Lesson #2

Recap:

Last lesson we went over what the web is, what HTML is, what a browser is, and how you can create an HTML document using a simple word processor, and view it with a browser. We also introduced HTML tags. <P> and <BR>.

Now lets start making our text file look the way we want it to.

Those first two tags move text around on the screen. But how do you make text look a certain way? The best part of computers is being able to make things look bold or italized, big or little, etc.

That's what these next bunch of tags do. They're known as style tags. And they surround the text that you want have look a certain way.

For instance.

Let's say you type in your word processor:

    Soledad, the greatest TV host in the world.

Now, I'm sure you want that statement to stand out.

You have to tell the browser of the world to start seeing this text as bold and then, because computers are generally dumb and take things literally, you have to tell your browser when to stop seeing this text as bold.

Soooo, here's the bold style tag that does that:

    <B>Soledad, the greatest TV host in the world.</B>

Let's look at this very closely. You notice how I start bold, pretty self explanatory with the B and the brackets that tells the browser that this is a tag. And look how I turn off the bolding, with the brackets, the B command and the / key, (lowerbase question mark). Simple, huh?

Let's try another one:

Italics:

    <I> 

and the shut off:

    </I>

Now let's make type bigger or smaller: these tags are called "font size" tags.

    <font size=10>

And here's the shut off:

    </font>

Just for reference, font size 3 is standard font size, about 10 to 12 points. You go up or down from there.

Okay, there are more, but let's not get too greedy here.

Now for some headings. Because the web is, first off, a text-based thang, you'll probably want to put in headings, or headlines, into your text files to keep them from being a sea of type. They are like the style tags, but you should know how they look. Eg:

Soledad is the greatest!

Then there's a succession of smaller headlines from H2 to H6. Let's try some.

    <H2>Soledad is great, but not the greatest</H2>

Result:

Soledad is great, but not the greatest

    <H3>Soledad is not so great, but OK</H3>

Soledad is not so great, but OK

One other important note here:

You'll eventually want to make a headline italic or even make some text italic and bold. You can, but you have to be careful not to overlap your style tags. For instance:

    <H1>Soledad is the <I>greatest</H1></I>

WRONG! You notice that the ital style tag "overlaps" the H1 heading tag.

You have to "nest" these tags and their turn off commands inside each other or you'll be in HTML hell.

Let's try it again

    <H1>Soledad is the <I>greatest</I></H1>

Result:

Soledad is the greatest

See, better. Let's take another break, you're wearing me out.

More in Depth:

What is HTML?

The Most Basic Tags

Uploading Your Webpage: FTP Programs

Advanced HTML: Resources

Back to this week's lesson plan