|
After you get the nifty DOCTYPE tag in place, it's time for the useful stuff.
I've already mentioned that all elements of the document must come between a pair of tags. This is true, even for some tags themselves. The grand-daddy of all tags, then, is the <HTML> tag. Everything, I mean absolutely everthing comes between the HTML tags. Ok, I lied. The DOCTYPE tag actually comes before it, but it's the only exception. Without the HTML tag, the browser would display your pages as a big mess of ugly text. In fact, it would look just like it does in Notepad when you code it. To see how a browser would render this page without the HTML tag, simply select view from the menu bar and then use the Source option. That lets you view the source code for this [or any other] document on the web. That's a pretty handy tool, because that way if you like the way someone's page looks, you can check out how they pulled it off, and you can learn from them. For example, the design of this tutorial is a blatant rip-off of Jeffrey Zeldman Presents, one of the best sites on the web. By the time this site goes live, Mr. Zeldman will know that I have done this, because I will have told him. I will also mention it in a COMMENT tag somewhere.
Anyway, so far your code should look like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
</HTML>
I included the closing HTML tag already just to make sure that we don't forget when we finish with our document. It's also a good idea to keep a little space between tags at this stage of the game, just to keep things a little more clear and easy to read. I like to put each new structural tag on a new line just to make my code that much easier to scan. You may also want to leave some extra white space. Chances are the way I code is probably a little hard for you to read at the moment, because chances are you are just getting your start, and my pages look a little dense. Don't worry, you'll get there eventually. In the meantime, my advice is to make sure that you can easily keep track of what you are doing. Don't worry about what my code looks like; I code this way because I have found through trial and error that this is the system that works for me. Find the system that works for you. I just recommend something well-spaced until you master the code, just to make it easier to spot any errors you might have made [and don't worry about that either - you will make errors, just as I have made errors on this very page that have had to be corrected].
Now we're going to move into more of the esoteric tags, with the introducition of the HEAD tag. The HEAD tag comes right after the opening HTML tag, and contains a bunch of information that you want the browser to see - most of which never winds up in the hands of the users themselves. The first bit of information is the page's title, and you specify that with the TITLE tag. For this tutorial, we're going to build a page together. Let's call this page "Fish Test". Don't ask why, just do it. The title itself will not show up on the page. Instead, it will appear in the blue title bar at the top of the browser window, and in the tab representing the browser in the task bar at the bottom of the screen. Your code should now look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
<HEAD>
<TITLE>FISH TEST</TITLE>
</HEAD>
</HTML> HEAD tag stuff. One more tag in this section, and then we'll move on to the stuff about formatting text and adding content, and stuff like that. You guessed it, I'm talking about the META tags. Those niftly little can-hardly-ever-tell-if-they're-working META tags.
You will probably never be able to see your META tags in action, but that's okay. They do what they're supposed to, don't you worry. What they do, is make it easier for search engines like Alta Vista to find your page. They contain a [preferably] brief description of your site, and some keywords to go along with it. Not bad, huh? But wait, these tags will be a little bit trickier than the others we've used so far. They have what are called attributes. Attributes are little features that some tags may or may not have that alter the way the tag behaves. Some tags, like the IMG tag have certain required attributes, and some don't. The META tag comes in a number of different "flavours", but they all have some specific attributes in common. I'm going to show you the two most common META tags, and the default attributes for them.
The first, and most useful META tag I'm going to show you is the keywords flavour. It lets you set a list of all the different words that you want to associate with your page. That, in turn, makes it easier for a search engine to figure out how to classify your page. Cool, right? Right.
The other flavour I'm going to teach you is the description flavour. This lets you provide a little description of your site [I use words like brief, and little in this tutorial, because the longer you make them, the longer it will take for your page to download - the longer people have to wait, the more they will be inclined to go elsewhere].
META tags have two kinds of necessary attributes: the NAME attribute, which allows you to set the flavour of the tag, and the CONTENT attribute, which, well... more or less speaks for itself.
When you set the attributes for a tag, there is always a single space between the main part of the tag and the attributes, and then the attributes are filled in with an equal sign and quotation marks. Bearing that in mind, with our nifty sample page "Fish Test", your code should now more or less look like this [don't worry, I'll wait a moment while you catch up]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
<HEAD>
<TITLE>FISH TEST</TITLE>
<META NAME="KEYWORDS" CONTENT="fish, test, page, tutorial, august, vestige, crash courses">
<META NAME="DESCRIPTION" CONTENT="A test page for the HTML tutorial at http://www.vestige.org/tutorials/">
</HEAD>
</HTML>
 
|