L  e  s  s  o  n     O  n  e
Basic HTML

Structural Tags of a web page

The basic structure of an HTML document:

  • <HTML> and </HTML>
    These start and end the HTML document.

  • <HEAD> and </HEAD>
    The head of the html document--only characters go here---no formatting. This is information about the web page, not the content of the page.

    • The most important (and often overlooked) part of the web page goes inside the head of the HTML document. In between the <TITLE> and </TITLE> tags the web designer sets the title for the page which appears in the blue bar above the web browsing window on PCs or in the gray bar above the web browsing window on Macs.

      This is an important part of the page because when users bookmark your web page, it gets added to their list of bookmarks under the title. With a meaningful title, users can quickly and easily navigate back to your page. If the title of the page does not relate to what the user sees as the content of the page, then, chances are pretty high that they won't bother going back to your page.

  • <BODY> and </BODY>
    Placed directly after the head of the document, the body tags mark the beginning and end of the content of your web site. All content which displays on the web page (text, graphics, etc.) must go between these two tags.

    The body start tag can be used with or without attributes. The attributes that can be used inside the BODY start tag control the background color or graphic of a web page as well as the colors of text and links:

    • <BODY>
      Used without any attributes, the body tag causes the web browser to display a page with the default background color (grey if using Netscape, white on IE) and the default text color (black).

      Keep in mind that on each user's machine, they have the option of customizing these default colors, so you can't even count on those colors being the one that the user sees.

      Designing a page without customizing the colors does not give the page a very professional look.

    • < BODY BGCOLOR="#FFFFFF">
      The BGCOLOR attribute can be used to add a background color to your web page. In this example the page's background color has been set to white using the hexidecimal RGB value for white. Since no colors have been specified for text or links, these will be displayed in their default colors (black for text, blue for links, purple for visited links) There are only 216 browser safe colors (colors that will display the same on everyone's computer regardless of platform, or browser). Their corresponding numbers/colors are shown on this chart.


    • < BODY BGCOLOR="#FFFFFF" TEXT="#666666" LINK="#FF6600" VLINK="#993300">
      The BGCOLOR attribute can be used to add a background color to your web page. In this example the page's background color has been set to white using the hexidecimal RGB value for white.

      Normal text has been set to display in this color.
      Links to other pages have been set to display in this color
      Visited Links (Links to other pages which have already been visited) have been set to display in this color
      Active links (those in the process of being clicked on) have been set to display in this color


    • Adding a background image which tiles to fill the page

      < BODY BACKGROUND="file.jpg"> or
      < BODY BACKGROUND="file.gif">

      We'll cover more of this in the next lesson, but for now please note that you can either specify the BACKGROUND attribute OR the BGCOLOR attribute, but not both. (Well, actually, you can use both at once, but you get very different results in Internet Explorer and in Netscape).

Read:
Castro: page 33 to 37

Next -->