Introduction to HTML I. Anatomy of an HTML Document A. HTML documents look different in text editors than in a browser. 1. HTML "source code" is very flexible in the way it is structured: In a browser, this:

This is a link to another page.

is equivalent to this:

This is a link to another page.

2. HTML documents can be made in ANY text editor. B. Most HTML programers develop a style for their code. 1. Important considerations A. Readability -- Can someone else look at your source and tell what you were trying to accomplish? B. Maintainence -- Are elements in this document easily found? Or are they all jumbled together, making searches difficult? C. Standard Style a. Except for the document structural tags like , , and , any HTML element we used to structure the document is placed on a seperate line and indented to show its nesting level within the document. Such elements include lists, forms, tables, and similar tags. b. Any HTML element used to control the appearance or style of text is inserted in the current line of text. This includes the basic font style tags like (bold text) and document linkages like (hypertext anchor). c. Avoid, where possible, the brealing of a URL onto two lines. d. Add extraneous newline characters to set apart special sections of the HTML document, for instance around paragraphs or tables. C. HTML documents consist of two parts, a head and body. 1. The head contains document information: title, description, etc. 2. The body contains document content: text, images, etc. D. HTML tags control the formatting of a document. 1. All tags are between the < and > characters. 2. Heads are not case sensitive -- = = = . 3. Tags often begin with a and end with a (emphasis on the front-slash []). 4. Most tags have starting tags <...> and ending tags . A list of exceptions are on p. 43. E. HTML tags do not totally control the final look of the document. 1. HTML tags are advice to the broswer about how to format the document. 2. Tags may be overridden by the end user. 3. Different browsers display different results. F. Character entities are HTML codes of characters that that are not usually type-able. (<, >) G. Use comments! It is a description of what you're doing. 1. Format of comment -- H. tag - pp. 47 - 48 I. tag - pp. 48 - 49 J. tag - pp 49 - 50 K. <body> tag - pp. 51 - 53 Assignment - Use pico to create a simple HTML document with your name and Challenge account name as the body (ie. Chris Karr - chickarr)