Heather Lee's

HTML Lesson 3

Breaking it down

Would you like to know what you just did? I've already mention the html, head, and body tags. The new ones that you put into your page are the "a" or link tag, the "p" or paragraph tag, and the "h#" or heading tag. If you are wondering why I wrote the tags on one page, and the explanations for them on the other its to give you a chance to think about them and, quite likely, figure out what they are.

The <a> </a> tag is placed around text or an image to link it to another area of the document, and image, a different page, or another website entirely. The "href=....." part of that tag is called an attribute, it indicates where the user should be taken when they click the link. We will look more at attributes of tags in the next lesson.

<p> and </p> are useful to give structure to your document. An essay that had no paragraphs would be hard to read, it would just appear to be a confusing jumble of words. Since the browser doesn't understand that leaving a blank line means its a new paragraph, the "p" tag shows the browser that its a separate area of text. This ability to give structure to a document is the whole reason for the existence of HTML.

The last new tag I threw in there is the <h1> </h1> tag. The heading tag indicates to the browser that the heading should be displayed so that it stands out from the page. There are six levels of heading, with h1 being the highest in priority. It will be displayed larger than an h2 heading for example. The least prominent heading will be the h6 heading. It is a good idea to use headings to indicate the importance of various areas of your document. For example you would want your title to be the most prominent piece of text, and you might use h2 or h3 headings to indicate things like the link lists, or other areas of the page.

Tag Order

Now is probably a good time to mention that html tags must be closed in the same order they are opened in, and some are meant only to be used in the head of the document or only in the body of the document. Think of the main tag "html" as being a fridge, the "head" tag is the freezer, and the "body" tag is the part of the fridge where the shelves are. The frozen foods, in this case things like the "title" tag need to go in the freezer, or the "head" area. Other items like the fresh veggies (in our case headings, paragraphs, links and images) need to be placed in the fridge or "body" area. You can obviously sort the content you put into the fridge into containers, or even containers inside containers without wrecking anything, as long as you place one closed container inside another. And as long as the inner container is smaller than the outer one.

Lets try a little more complex page... You will need to create a new directory inside of the "mysite" directory (the one where your web page is). Name it "images" then right click fellow below and save him to that directory with the name "elf.gif". Now create a new text file, type the code below into it and save it as "page_02.html". Now open it up and take a look, getting better isn't it?

Your Second Page

Eeeeeeeeek! Whats all that gobbledegook! ; )

On to Lesson 4

---

| Lesson 1, 2, 3, 4, 5, 6, 7 | Lesson Links | Lesson Clip Art |

---

Don't worry if you are having trouble remembering the various tags, as you use them with each new page you develop they will quickly become second nature.

---