BASIC HTML 101

Overall HTML format: HTML head and body



Every page must start with:

<html>
and end with
</html>

Inside these tags there are two sections:

<head></head>

<body></body>

So, an HTML document is comprised of:

<html>
<head></head>
<body></body>
</html>

Inside the <head></head> tags you should put the title of the document inside <title> </title> tags.

<head> <title> Title goes here </title> </head>

The title appears in the window or toolbar at the top of the browser.

Additionally, inside the <head></head> tags, other information, for example:

  • used by spiders (search engines) to categorize keywords describing the document like:
    <META NAME="keywords" CONTENT="html authoring, reference, HEAD, BODY, tag overview">
  • used to automatically change the currently displayed HTML document
    ( Try this META file with a 20 second timeout. ).
  • More information on use of the META tag is here.

    So, now an HTML document might be organized as follows:

       <html>
          <head>
             <META NAME="keywords" CONTENT="keyword#1, keyword#2">
             <title> Title goes here</title>
          </head>
          <body>
          </body>
       </html> 
    
    

    The BODY tag can also specify colors for background, text, and links (not-visited, visited, and active); even java script. The BODY tag in this document looks like:

    Where #FFFFFF corresponds to white and #000000 corresponds to black. There are many colors which can be specified either with the 24-bit hexdecimal code, or, with english names, a variety of which are available from this color link. Some browsers will, by default, display a document with a white background; however, if your browser does not, then, this copy of this file will have a gray background (which is set to gray with the body statement for instructional purposes here).

    Text and graphics following the body tags in your document will display on the page itself.

    Just as you learned in algebra class, you have to be careful about "nesting" correctly. This is the source of many simple but frustrating errors.

    Nesting is the inserting of pairs of tags within other pairs of tags. It is important to keep the tags in the correct order, or the file will be read incorrectly. The ending tags must be included in the reverse order of the beginning tags

    For instance, follow the model of

    <tag1> <tag2> <tag3> </tag3> </tag2> </tag1>
    See the following example. The first line shows the HTML coding, while the second line shows what is seen on a web page:

    So, remember,

    <FONT SIZE=+2><b>Nesting</FONT> <i></b>is <b>important.</i></b>
    Nesting is important.

    Oops, I mean,

    <FONT SIZE=+2><b>Nesting</b></FONT> <i>is <b>important.</b></i>
    Nesting is important.