Back to Index Introduction Tools Structure Structure II Content/Text Onward to the next 5



August's HTML Crash Course - Content/Text

Web pages were originally all about text. The guy who invented HTML [I think his name was Tim Berners-Lee or something] didn't forsee the use of images, or any of the nifty tools that we have today. He thought it was just going to be used for academics to exchange dry as dust reports with other academics. I, for one, am glad that he was wrong.

The thing is, though, before you can put all that cool stuff like images and multi-media on your page, you should know the basics about putting text on your page. The first thing you need is the last major structural tag, the BODY tag. The BODY tag is the tag that contains all the content of your page [i.e. everything you want the reader to see], and it comes right after the HEAD tag. In the BODY tag, you can decide what colour you want your text and background to be, if you want to use a picture for a background, and all kinds of stuff like that. It's a pretty important tag [until you get to style sheets, when you can control that stuff elsewhere with greater accuracy - but that's a little advanced and therefore beyond the scope of this tutorial - I'll set up some links so you can learn more about style sheets when you're done here].

The BODY tag, unlike the META tags, has a closing tag, which is the last tag you should have before you close the HTML tag. The BODY tag also has some pretty spectacular attributes, like the BGCOLOR and TEXT attributes, but we'll deal with those in the "Adding Colour" section of this tutorial. For now, let's just get that bad boy up there.

<!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>
<BODY>

</BODY>
</HTML>
With a little luck, your code should look like the example above [not that adding the BODY tag to that was a big stretch]. You are now officially ready to add text, or as the current buzzword suggests, "content".

The first thing you should know, is that text can be added in a number of different ways. You can add text in paragraph form [which is what I'm going to show you first], in list form [that'll be the second bit], and in tables [which will come near the end of the tutorials]. There are a bunch of other ways as well, but they too go beyond the scope of this tutorial.

The foundation of all documents is the paragraph. If you want to start a new paragraph, you simply add a paragraph tag, which looks like this <P>. If you view the source code of this document, you can see that I use them quite often. Another thing I feel I should mention, is that you don't actually have to close the paragraph tag - putting in a new one will automatically override the old one - but it's a good idea to do it all the same. It's good programming style, and helps to keep things organized in large blocks of text.

From now on we'll be starting and ending all our examples with the BODY tag, because we're pretty much done with everything above an below it, and it's more or less a waste of space to include it all.

What you should do now is decide on what you want to write about. I'm going to use "http://www.vestige.org is the coolest web site there is" for this example, just because I'm like that. You can use what you want, but just remember to keep track of what I'm doing, so that you can follow the examples. The page will now look like this:

<BODY>
http://www.vestige.org is the coolest web site there is.
</BODY>
Now, if you were to save your file [as a .html file - otherwise it won't work] and then open it up in Internet Explorer or Netscape, then you should see the text you typed displayed in black on a white background, in the top left hand corner of the page. The text would be rendered in your browser's default font. You have just learned how to add text to your page. Congratulations, it's time to build a list of all the things you can do so far.

Back to Structure II     Onward to Lists

c: august@vestige.org h: http://www.vestige.org