picturing how html works

Structuring an HTML document

The HTML document is divided into two sections: The head and the body.

The HTML tags

<html> </html> creates an html document. Every web page must begin and end with these invisible tags.
The head contains background information about the web page, such as its title.

The Title

<title></title> creates a title, which will appear in the browser's title bar.
The body contains all the elements that will appear on the page itself, as well as instructions about how they should look and what they should do.

The Headline

<h1></h1> creates the largest possible headline.

The Paragraph

<p></p> creates a paragraph, preceded by a line break.

The List

<ul> </ul> creates an unnumbered (bulleted) list.

<li> </li> surround each item on the list, indicating where the line breaks and where the bullet points go.

The Link

<a href=""> </a> creates a hyperlink-in this case to the National Geographic site. The link will appear in blue underlined text, unless you specify otherwise.

The Image

<img src="" border=0> pulls in an image-in this case, "ostrich.jpg"-and makes it borderless (no frame).

the HTML document

<html> <head> <title>Africa's Big Five</title> </head> <body> <h1>Africa's Big Five: A new list</h1> <p>When you go on an African safari, everyone wants to see the so-called Big Five -- buffalo, elephant, leopard, lion and rhino -- the big, aggressive, impressive creatures that give you bragging rights.</p> <p>I, however, preferred a less-celebrated five.</p> <h3>My big five: </h3> <ul> <li> Giraffe </li> <li> Zebra </li> <li> Waterbuck </li> <li> Warthog </li> <li> Ostrich </li> </ul> <p>Ugly, awkward, unimpressive, and/or relatively common, they're not exactly <a href="http://www.nationalgeographic.com"> National Geographic</a> material! But they won me over, all the same! <p align="center"><img src="ostrich.jpg" border="1"></p> </body> </html>

the web page

graphics/195fig01.gif