HTML Introduction Thane Terrill Summer 1998

July 1998Thane B. Terrill 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 1998Thane B. Terrill The Web The Web is a graphically-oriented system for distributing information over the infrastructure provided by the Internet.

July 1998Thane B. Terrill Web Site & Web Page A web site is a collection of web pages. A web page is an individual HTML file and its linked component files (like images, sound, PDF, video, etc.)

July 1998Thane 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 1998Thane 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 1998Thane 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 1998Thane 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 1998Thane 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-and- drop images, if you like. It’s still a good idea, however, to learn basic HTML.

July 1998Thane 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. TU5510: Group Work -- Assignment Doctype tells the browser the version of HTML code you are using. It is not required. The title goes into the browser bar. It does not show up in the browser window as text. Most HTML tags need a closing tag. This marks the end of the header.

July 1998Thane B. Terrill HTML Body Most of the contents of an HTML document are placed in the body section. Group Work -- Assignment The purpose of the group work is to promote the ability to create and evaluate computer- related proposals. Therefore, the class will be split between two groups. Group A will create a proposal for one of the project models listed

July 1998Thane B. Terrill HTML Body

July 1998Thane B. Terrill HTML Ending At the end of every HTML document are two tags that let the browser know to stop. Anything after these tags will be ignored.

July 1998Thane 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 1998Thane 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. 4 Bold 4 Italic 4 Subscript 4 Superscript 4 Typewriter (displays in a monospaced font)

July 1998Thane B. Terrill HTML Text Handling Most simple forms of controlling the flow of text are easily handled by HTML. 4 Center 4 Align left, justify or right 4 Align images (top, left, right, middle, etc.) 4 Blockquote

July 1998Thane 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 1998Thane B. Terrill HTML Organization One of the strongest tools of HTML is its ability to display organized information - - like lists and outlines. 4 Unordered List 4 Ordered List 4 Definition List ( =term, =definition) 4 Menu List  Directory List

July 1998Thane B. Terrill HTML Tables 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. Text body goes in this table cell. The others are used for margins.

July 1998Thane B. Terrill HTML Tables 4 Define Table 4 Table Border 4 Table Border (you can set the value) 4 Cell Spacing 4 Cell Padding Desired Width 4 Width Percent (percentage of page) 4 Table Row 4 Alignment  Table Cell (must appear within table rows) Alignment

July 1998Thane B. Terrill HTML Table

July 1998Thane B. Terrill Table Code July 6th: Introdution to the course July 8th: Network fundamentals

July 1998Thane 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 1998Thane B. Terrill Linking 4 Link Something Link to Target (if in another document) (if in current document)N2.0 4 Target Window 4 Define Target 4 Display Image  Alignment Yahoo Buyer Guide

July 1998Thane B. Terrill Educational Advantages 4 Information can be "published” instantly. Excellent for information that cannot wait to be printed in book form. 4 The Internet's low cost of access and wide-reach makes it an excellent delivery vehicle. 4 Text can be combined with almost any form of data (i.e. images, sound, video, etc.). 4 Web sites can be interactive with the user -- including testing of knowledge. 4 Easily links to other sources of information.

July 1998Thane B. Terrill Educational Advantages 4 The graphical nature of web presentations makes them user-friendly. 4 Web pages can support forms that allow for feedback from the user. 4 Web security features can allow for private web sites. 4 Web sites can be displayed on virtually any computer system in the world -- not just on the computer system used to create it. 4 Multiple people can work on building/maintaining the site at the same time from virtually anywhere.

July 1998Thane B. Terrill Educational Advantages 4 There is no practical limit to the number of people who can use the web site. 4 There is no time limit on when a web site can be used. 4 Web sites can easily lead to CD-ROM presentations. 4 The hyper-text nature of web design allows the user to cut through vast amounts of data quickly. 4 It's easy to advertise the existence of a web site with little or no money. 4 Data on a web site can be downloaded into the user's computer for further study.