Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download presentation source
Document related concepts
Transcript
HTML Introduction Thane Terrill Summer 1998 The Internet The Internet is world-wide system of inter-connected computer systems. It's similar to the design of the international telephone system. National telephone systems vary tremendously, but through a system of international agreements and standards, all telephone systems appear as a unified whole. July 1998 Thane B. Terrill The Web The Web is a graphically-oriented system for distributing information over the infrastructure provided by the Internet. July 1998 Thane B. Terrill Web Site & Web Page A web site is a collection of web pages. July 1998 A web page is an individual HTML file and its linked component files (like images, sound, PDF, video, etc.) Thane B. Terrill Web Browsers Web browsers (like Netscape's Navigator or Microsoft's Internet Explorer) are software programs that help the user to navigate and display web documents. The interesting thing to remember is that the browser controls many aspects of displaying HTML documents. Not only will different brands of browsers display the same web page differently, but browsers of the same brand may display differently based on user-configurable preferences. July 1998 Thane B. Terrill HTML HTML (HyperText Markup Language) is a set of coded tags that instruct a web browser how to handle text, images, sound, and any other form of computer data. Though programming languages are now being added to HTML documents, like Java, HTML is not a programming language. July 1998 Thane B. Terrill Frames A new trend in web design is to design a single screen presentation using multiple web pages. The designer divides the screen into areas (i.e. frames) and then loads different documents into each area. This is especially useful if one wants to keep an index or a list on the screen at all times while the user reads the contents in another area of the screen. The class web site uses frames. In this case, a group of web pages are not considered a web site. July 1998 Thane B. Terrill Terms Wrap-up In other words, the Internet is the infrastructure, the web is the service, and HTML is the method by which the service is constructed. The popularity of the web is due to the vast audience provided by the Internet, the graphical nature of web design, and the ease and cheapness of building web sites. July 1998 Thane B. Terrill HTML Basics The easiest way to think of HTML design is to think of an HTML document as simply a modified text file. One starts off with text and then adds HTML structure and tags. Of course there are many programs on the market that will let you simply type away and drag-anddrop images, if you like. It’s still a good idea, however, to learn basic HTML. July 1998 Thane B. Terrill HTML Header Every HTML document starts with a few HTML tags that lets the Web browser know it’s looking at an HTML document. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>TU5510: Group Work -Assignment</TITLE> </HEAD> Doctype tells the browser the version of HTML code you are using. It is not required. Most HTML tags need a closing tag. This marks the end of the header. July 1998 Thane B. Terrill The title goes into the browser bar. It does not show up in the browser window as text. HTML Body Most of the contents of an HTML document are placed in the body section. July 1998 <BODY bgcolor="White" text="Maroon" leftmargin=10 topmargin=20> <Blockquote> <p align="center"><font face="Arial Black" size="+1" color="Red">Group Work -Assignment</font></p> The purpose of the group work is to promote the ability to create and evaluate computerrelated proposals. Therefore, the class will be split between two groups. Group A will create a proposal for one of the project models listed Thane B. Terrill HTML Body July 1998 Thane B. Terrill HTML Ending At the end of every HTML document are two tags that let the browser know to stop. </BODY> </HTML> Anything after these tags will be ignored. July 1998 Thane B. Terrill HTML Section Wrap-up Once the structure has been established -- and it is as easy as it sounds -- the next task is to format the text so that it displays in the desired way. Of course, one must remember that web design cannot be as precise as when one prints to paper. The user's browser has a lot of control over how the HTML tags are followed. Web browsers are given this control because the wide variety of computer hardware found around the world requires it. July 1998 Thane B. Terrill Character Formatting It is possible to control basic character attributes, like bold, italics, and underlining. However, control over font type styles and font sizes are just coming available with the 4.0 HTML standard. July 1998 Bold <B></B> Italic <I></I> Subscript <SUB></SUB> Superscript <SUP></SUP> Typewriter <TT></TT> (displays in a monospaced font) Thane B. Terrill HTML Text Handling Most simple forms of controlling the flow of text are easily handled by HTML. July 1998 Center <Center></Center> Align left, justify or right Align images (top, left, right, middle, etc.) Blockquote <Blockquote></Blockquote> Thane B. Terrill HTML Text Limitations 1. no way to automatically indent a new paragraph; 2. no graceful way to handle a large initial capital letter; 3. few options regarding line spacing; and 4. accurate text placement is quite difficult. The good news is that the new 4.0 HTML standard fixes these issues. It should be another year before the 4.0 standard becomes common. July 1998 Thane B. Terrill HTML Organization One of the strongest tools of HTML is its ability to display organized information - like lists and outlines. Unordered List <UL><LI></UL> Ordered List <OL><LI></OL> Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition) Menu List <MENU><LI></MENU> Directory List <DIR><LI></DIR> July 1998 Thane B. Terrill HTML Tables Text body goes in this table cell. The others are used for margins. July 1998 Tables in HTML are used for much more than they are in other software programs. Tables are often used in HTML to precisely control the screen position of text and images. In other words, a table can be used as an invisible grid. Thane B. Terrill HTML Tables Define Table Table Row <TR></TR> <TABLE></TABLE> Alignment <TR Table Border <TABLE ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> BORDER></TABLE> Table Border <TABLE Table Cell <TD></TD> (must BORDER=?></TABLE> (you can set the value) appear within table rows) Alignment Cell Spacing <TABLE CELLSPACING=?> Cell Padding <TABLE CELLPADDING=?> Desired Width <TABLE WIDTH=?> Width Percent <TABLE WIDTH=%> (percentage of page) July 1998 Thane B. Terrill HTML Table July 1998 Thane B. Terrill Table Code <table width="50%" border="1" align="CENTER" bordercolor="Maroon"> <tr> <td align="CENTER" valign="TOP" nowrap><font size="+1" color="Navy">July 6th: </font><br> Introdution to the course</td> <td align="CENTER" valign="TOP" nowrap><font size="+1" color="Navy">July 8th:</font><br> Network fundamentals </td> </tr> </table> July 1998 Thane B. Terrill HTML Linking One of the main features of HTML is its Hyper-Text abilities. "Hyper-Text" just means that you can link one thing to another thing. This link may be inside of a document (like linking to an image) or it may be a link to another web site. Images may be linked to other images, text to sounds, text to text, or any other combination of HTML elements. So, instead of just writing about something, one can link the word to a picture, which links to a sound or video. The possibilities are endless. It's this flexibility and power that makes web design so potentially powerful. July 1998 Thane B. Terrill Linking Link Something <A HREF="URL"></A> Link to Target <A HREF="URL#***"></A> (if in another document) <A HREF="#***"></A> (if in current document)N2.0 Target Window <A HREF="URL" TARGET="***"></A> Define Target <A NAME="***"></A> Display Image <IMG SRC="URL"> Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> <a href="http://features.yahoo.com/comptop10/">Yahoo Buyer Guide</a> July 1998 Thane B. Terrill Educational Advantages Information can be "published” instantly. Excellent for information that cannot wait to be printed in book form. The Internet's low cost of access and wide-reach makes it an excellent delivery vehicle. Text can be combined with almost any form of data (i.e. images, sound, video, etc.). Web sites can be interactive with the user -- including testing of knowledge. Easily links to other sources of information. July 1998 Thane B. Terrill Educational Advantages The graphical nature of web presentations makes them user-friendly. Web pages can support forms that allow for feedback from the user. Web security features can allow for private web sites. Web sites can be displayed on virtually any computer system in the world -- not just on the computer system used to create it. Multiple people can work on building/maintaining the site at the same time from virtually anywhere. July 1998 Thane B. Terrill Educational Advantages There is no practical limit to the number of people who can use the web site. There is no time limit on when a web site can be used. Web sites can easily lead to CD-ROM presentations. The hyper-text nature of web design allows the user to cut through vast amounts of data quickly. It's easy to advertise the existence of a web site with little or no money. Data on a web site can be downloaded into the user's computer for further study. July 1998 Thane B. Terrill
