Home

Basics

Using Flags

More Text Flags

Placing Images

Colors

Backgrounds

Linking Pages

Tables

Getting Online

HTML Basics, Tips and Tricks
by Fox Bautista

WHAT? MORE TEXT FLAGS?

Hey, hey, cool down! We'll be doing some neat stuff; I assure you. You'll learn how to change text size, create headings and change fonts. Fun stuff-- trust me.

Heading Commands

Heading commands are used extensively in HTML documents to... you guessed it, create headings! Heheheh. There are six heading commands:

<H1>

is the largest and

<H6>

is the smallest. Here are their relative sizes:

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Note: In later-version browsers (3.0 and above), the numbers 7 and 8 have been added, but in terms of size, there isn't a great deal of difference between them and the 6 heading.

Heading commands create nice, bold text, as shown above, and are quite easy to use. It's a simple <H#> and </H#> command (# stands for whichever number you put after the H). However, they have a distinguishing trait that you have to remember: They like to be alone. When you use a heading command, by default, you set the text alone. It's like the heading commands carry a <P> command with them. You can't get other text to sit right up against a heading. It's as if it wants to be... well, a "Heading." Try a few for yourself.

Font Size Commands

Maybe you'd like a little more control over your text size. Well, here it is. The commands. Heading commands are great for right at the top of the page, but these font commands are going to end up as the workhorses of your pages. There are 12 font size commands available to you: +6 through +1 and -1 through -6. As you've probably guessed, +6 is the largest (it's huge); -6 is the smallest (it's a little too small). Here are a few of them in action. There's no need to show all of them. You'll get the idea of their relative sizes. Follow this pattern to place one on your page.

<FONT SIZE="+3"> This is +3 </FONT>
<FONT SIZE="+1"> This is +1 </FONT>
<FONT SIZE="-1">This is -1 </FONT>
<FONT SIZE="-6">This is -6 </FONT>

Notice that this first command, is actually doing two things: It's asking for a new font size, then offering a number to denote the font size. You could think of it as a command inside a command. The technical HTML term is an "attribute". When you have that, you denote the attribute with an equal sign and enclose it within quotation marks. Look above. See the equal sign and the plus or minus number in quotes? That's what I'm talking about. Also notice that the end command for the <FONT SIZE="#"> flag only requires </FONT>. There are two other attributes you can use inside the FONT flag: COLOR and FACE (you'll encounter FACE soon; COLOR has its own tutorial). But even if you use all three inside a FONT flag, you still only need one </FONT>. Remember that an attribute is inside of a flag. When you use an end command, you are closing the flag, not the attribute. So you only need the one end flag, like above.

Centering Text

Since you've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without your specifying any particular justification.

Notice that this text is centered on the page. It's done by surrounding the text you want centered with simple <CENTER>and </CENTER> commands. Here's what it looks like:

Can you get text to the right? Sure. It's done by setting the text aside as a paragraph unto itself. I'm going to use the handy-dandy <P>command that you learned in the last lesson, but now I'm going to alter it. I'm going to add an attribute to it. Here's the format:

<P ALIGN="right">Text in here gets pushed to the right</P>

See how I added the ALIGN="right" attribute to the command? Okay, but you also have to remember that if you add an attribute to a single flag like the <P> flag, or the <BR> flag (yes, there are attributes for BR), then you'll need to use an end flag. See the </P>up there? If you're just using <P> to create a new paragraph, then it can sit all by its lonesome. But the moment you add an attribute=, you need to use an end flag.

Changing Fonts

Easy as pie. The flag to use is <FONT FACE=" ">. Here are some samples.

<FONT FACE="Times">Times New Roman</FONT>
<FONT FACE="Courier">Courier</FONT>
<FONT FACE="Georgia">Georgia</FONT>

This is very important! A text font command will only work if the font you call for is loaded on the computer displaying the page. ÊÊÊÊÊFor example, you head to one of those million-font sites and download a really neat but obscure font face. You load it onto your system and set it in the code. One your computer the text font will display just fine. Not so on just about every other computer in the universe. The font face isn't loaded onto those computers. What to do, what to do?ÊWell, don't use a non-traditional font, for starters. However, if there is a font you simply MUST have on your page, then why not use an image editor and create an image that has the font and text on it? That way, the computers load an image with the text and the text displays. Cool, huh?

You can also set numerous text font faces for the computer to choose from. Like this:

<FONT FACE="Times New Roman,Times,Serif">Blah blah blah</FONT>ÊÊÊÊÊ

Notice that I've got three font faces listed, each with a comma in between. Following that format, you suggest numerous font faces in descending order of importance. When the page loads, the browser check to see if the computer has the first font face listed. If the font face is on the computer, it displays. If not, the browser attempts to find the second font face listed. If it's not there either, then the third comes into play. I've seen pages that list up to ten font faces.ÊThat way...you're sure to get at least one displayed, unless you list ten really wacko font faces.

Hey, congratulations! You've finished this lesson! Kick back and relax, or go to the next one:

Placing Images