picturing how html works | The Unusually Useful Web Book

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="/books/2/132/1/html/2/" border=0> pulls in an image in this case, "ostrich.jpg" and makes it borderless (no frame).

the HTML document

[View full width]
 <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="/books/2/132/1/html/2/ostrich.jpg" border="1"></p> </body> </html>

the web page

graphics/195fig01.gif