STRUCTURE TAGS
Now we get down to the gritty stuff. Page structure tags are the most basic tags that you need in you webpage. Why? These tags form the basic skeleton of the page, where everything else is hung. There aren't too many of these tags. You'll grow to LOVE these tags.
The Structure of HTML
First, I have to explain the structure of an HTML document. I'll explain the individual tags later.
An HTML document begins with the <html>tag, and ends with its respective end tag. HTML documents are divided into two sections, the head and the body. The head section, which is fairly small, contains information that will not be seen in the visible webpage. It is in the head section that programmers put the title, JavaScript, Cascading Style Sheets, and other information (don't worry if those terms are unfamiliar). The body section is much, much larger. The body contains all the coding for the visible content of the page. The body contains all the other tags, except for a few certain tags. And that's it. Our first friend is the <html> tag and its end tag. This is probably the simplest tag you will ever use. This is the first tag to be put into HTML coding. Although the <html> tag is actually optional, it is convention to use it. As this tag is the first tag to be used, and its corresponding end tag is the last tag to be used. If you do include these tags, anything outside of the <html> tag will not be included. For our purposes (see disclaimer), there are no attributes, so don't worry.
The <html> Tag
</html>
If you type in the example of code seen above, and save it as a file named "sample.htm" or "sample.html", you will get a very, very simple page, like this:
| C:/sample.htm - Microsoft Internet Explorer |
Don't worry if our little webpage looks kind of empty. We will soon learn how to populate it with text, images, and other cool stuff. Now on to the <head> tag. Like the <html> tag, this tag has no attributes. None. Notta. Nothing. Let's move on. This tag goes directly after the <html> tag, and its end tag comes directly before the <body> start tag. Like so:
Head Tags
<head>
head section tags
</head>
<body>
</body>
</html>
The <head> tag just denotes the head section and what goes inside. Nothing more. The <head> tag is also optional, but by convention, HTML authors always use it. The end tag is unremarkable. It is like any other end tag in that there are no attributes in it; wow, you knew that already... right? Anyway, the end tag looks like this: </head>.
Next on our list of tags is the <title> tag. As the name says, this tag is the title for the page. When you look at the bar on top of the browser window, be a Windows or Mac machine, the title will appear, like "My First Webpage - Microsoft Internet Explorer". The title tag is easy to use. It is in the head section, and cannot appear as a tag in the body. This tag is required, as well as its end tag, </title>.
<head>
<title>The Title</title>
</head>
</html>
||World Wide Web Consortium||
And if you put the example of the title tag inside our "sample.htm" file, inside the head section, you can get this lovely page:
| The Title - Microsoft Internet Explorer |
If you compare this browser window with the one before, you will notice that the application window bar (the blue thing) has changed names. That's how the <title> tag is seen. Another tag that is included in the head section of an HTML document if the <meta> tag. The purpose of the <meta> tag is to give additional information about the webpage. Anything in the <meta> tag will not show up anywhere in the visible page. So why put it there in the first place? you might ask. A few reasons:
TThe <meta> tag is easy to use. It's a bit tricky, though. The <meta> tag only has a start tag; it's end tag is forbidden. That means the end tag doesn't exist, and cannot be used!! On to attributes. There are only two very important attributes (there are four in total). The content and name attributes are required to be in the <meta> tag. You can put anything, well almost, in the <meta> tag.
description
author
generator
abstract
expiration
Body Tags
Let's move on to the body structure tags. As I said, everything else is inclueded in this section. This page would be extremely long (and dull) if I included every tag. So I have decided to split them up into catagories. Only the <body> tag is explained.
The <body> tag is the first tag of the section. Wow, that's exciting. The start tag is normal, as is the end tag; however, both are optional, but everyone uses it, so use it!The <body> tag is the first tag that really has any attributes. It's attributes involve the appearance of everything inside the body section, such as color of the font, color of the links, the background image or color, and other junk like that. So here's a list of attributes, and the way the body tag looks like inside of code.
Well, now it's time to turn the page. Get ready to learn about more body section tags!