SECTION CODES
This is a tough section, since I can't really demonstrate the results of the tags I show you. Here's some of the theory, though.
First of all, just as a matter of convention, the first tag in your HTML document should always be the <HTML> tag. Make this your habit. It alerts browsers that your document is written in HTML. Likewise, the very last tag in your document should always be the </HTML> tag - it is a cue to your browser (and to you or anyone else who reads the code) that your page is done.
HTML pages are always broken up into two sections, called the head and the body. The head contains information about the page that other programs might need to know, while the body contains all of the stuff that your readers will see.
You surround the head section with the <HEAD> and </HEAD> tags. It can contain two basic things: the title and "meta" tags.
- The title is surrounded by the <TITLE> and </TITLE> tags. Inside these tags, you place the name that you want browsers to show when they display your page. For example, the title tag on this page is:
<TITLE>Steve's HTML Primer - <SECTION CODES></TITLE>
(The < code tells the computer to display a left bracket, and the > code tells the computer to display a right bracket.) You can see how your browser displayed this title information by looking at the very top of your screen.
- "Meta" tags are still not supported consistently by all browsers. They can contain many types of information (in fact, they can contain anything you want - they don't actually "do" anything), but the two basic meta tags that most people use are called "description" and "keywords". They look like this, on the page you are now reading:
<META name="description" content="This page explains the head, body, and HTML tags.">
<META name="keywords" content="HTML, section codes, Steve Anisman">
I put these on this page so that when a search engine, like Yahoo or Alta Vista, comes looking at this page, they will be able to tell what the page is about. Remember that search engines look at millions of pages a day, and they need automated ways like this to record all of their information. If you want your pages to be available on search engines, you should use these tags in the HEAD section of your document.
The description tag should be a simple sentence that describes the content of your page.
The keywords tag should be a list of words, separated by commas, that people might type in to a search engine when they are looking for a page like yours. In my case, I thought people who were looking for information on HTML should be able to find my page, so I included it as one of my keywords.
Here is the complete HEAD section for the page you are now reading:
<HEAD>
<TITLE>Steve's HTML Primer - <SECTION CODES></TITLE>
<META name="description" content="This page explains the head, body, and HTML tags.">
<META name="keywords" content="HTML, section codes, Steve Anisman">
</HEAD>
The BODY section of the page contains all of the information that you are now reading. The body section is started with a <BODY> tag, and is ended with a </BODY> tag. The opening tag can (and should) contain some additional information.
For example, here is the complete BODY tag for the page you are now reading:
<BODY
BACKGROUND="bckgrnds/marblbak.gif"
BGCOLOR=000000
LINK="#0000FF"
ALINK="FF0000"
VLINK="000066">
Let's go through this line by line.
- <BODY - Opens the BODY tag. Tells the browser that we are entering the portion of the HTML document that is meant to be displayed to the reader. The fact that we haven't yet included the > bracket means that we have more information to provide about the BODY before we get to the content, though.
- BACKGROUND="bckgrnds/marblbak.gif" - This tells the browser to display a file called "marblbak.gif", which is located on my server in the "bckgrnds" subdirectory, as the background of this page. It is the gray and white marble-looking background that you are now seeing.
- BGCOLOR=000000 - This tells the browser to display the color 000000 (black) as the background color of this page. You may have noticed that the page was black when you first loaded this page, until the marble background finished loading. If you are using a background image, you don't need to include this line, as the background image will cover up whatever color you specify (that's what happened here). HOWEVER, the borders on tables, and divider bars (which are created using the <HR> tag) WILL use the background color as their shading color, in most browsers. The proper format for listing hex colors is to include both quotation marks and the pound (#) sign - but most browsers will let you get away with sloppy code, as I've demonstrated here.
- LINK="#0000FF" - This tells the browser to display all links in the color 0000FF (blue). Once you visit a link, it will no longer be displayed in this color - it will then be displayed in the Visited Link (VLINK) color. Note that I've used the "proper" formatting of the hex color here.
- ALINK="FF0000" - This tells the browser to display a link in the color FF0000 (red) while the user pushes down the mouse button on it. As soon as the user lets go of the mouse button, the link is no longer displayed in this color. This code gives the user feedback that they are choosing this link.
- VLINK="000066"> - This tells the browser to display all links that have been visited in the color 000066 (light blue). Finally, the > bracket tells the broswer that we are done describing the BODY tag, and we can move on to the content.
Note that the BODY tag was shown over 6 lines - this was for ease of reading and modifying. Your browser didn't even notice that it was spread over six lines - it read the whole thing as if it was written like this:
<BODY BACKGROUND="bckgrnds/marblbak.gif" BGCOLOR=000000 LINK="#0000FF" ALINK="FF0000"
VLINK="000066">
In fact, this is a perfectly fine way to write it.
At this point, you know what you need to know about the HEAD and BODY sections. Let's look at one final example to see how it all fits together:
<HTML>
<HEAD>
<TITLE>Steve's Sample Web Page</TITLE>
<META name="description" content="This is a bogus page that demonstrates section codes in HTML.">
<META name="keywords" content="HTML, section codes, Steve Anisman">
</HEAD>
<BODY
BACKGROUND="bckgrnds/marblbak.gif"
BGCOLOR="#000000"
LINK="#0000FF"
ALINK="#FF0000"
VLINK="#000066">
<DIV ALIGN=CENTER><FONT SIZE=7 COLOR="red">Bogus Page</FONT></DIV>
<BR><BR>
This is bogus text.<BR><BR>
Click <A HREF="hthedbod.htm"> here</a> to return.<BR><BR>
</BODY>
</HTML>
Last Updated:
