HTML 002 - Text Formatting
PDF

Now that you understand the basics of HTML I will now go over how to format text with different tags and attributes. After this tutorial you will know a few tags and attributes you can use to change the appearance of your text. This tutorial will not go over all of the possible tags and attributes, but you can find them in the full reference sheet.

So, if you still have your file from the last tutorial you can open it up. Otherwise you can just copy and paste the code below into your text editor. If you don't understand anything going on in this tutorial it is suggested that you do the previous tutorial if you haven't already.

<html>
<head>
<title>My Web Page</title>
</head>
<body bgcolor="blue">
<b>Hello!</b>
</body>
</html>

The code above already has some text formatting in it. They are the b tags around "Hello!". Those tags tell the browser to make the text that is in between those tags bold. There are many other tags you can use to change the appearance of your text and most of them are used in the same way. Another example is italics. All you need to do is change the 'b' in the tags around 'Hello!' to an 'i':

<i>Hello!</i>

If you save your file and open it up in your browser you should see that your text is now in italics. For more text formatting tags like these ones go to the reference sheets.

Some changes require attributes. The attribute usually needs a new tag to go around the text you would like affected by the attribute. Let's fix one problem with our current webpage, the text color. Right now we have black text on a blue background, which is quite hard to read. In order to change the text color with HTML we have to use an attribute.

In order to do this we must insert new tags. Since we already have tags around "Hello!", there is a specific way you must put the tags around the text. We will be using the font tags and they must be used as such:

<font><i>Hello!</i></font> Good
<i><font>Hello!</font></i> Good

And not:
<font><i>Hello!</font></i> Bad
<i><font>Hello!</i></font> Bad

For one reason or another you cannot do either of the last two examples. The only way to make it work is to choose one of the first two. If a tag starts within another tag it must have its ending tag before the closing tag it is within. You can put as many tags within each other as you like.

Just by adding the font tag to your file will not change anything to your webpage. We must add attributes to change our text. So to change the text color we will add the 'color' attribute.

<font color="white"><i>Hello!</i></font>

As you can see it is quite basic. Save your file, refresh your webpage and your text should turn white. As with the tags that change the text appearance there are a few other attributes you can use with the font tags. They are all listed in the reference sheets.

Not only can you change the appearance of your text but you can also change the positioning. Many of the tags that you can use to change the positioning can also be used for other things, such as images, videos, or tables. To change the positioning of our text lets remove our i tags and add p the tags. The p tag signifies a paragraph. Your coding should look like this:

<html>
<head>
<title>My Web Page</title>
</head>
<body bgcolor="blue">
<p>><font color="white">Hello!</font></p>
</body>
</html>

With only HTML the p tag only provides spacing between each paragraph, so you will only see a change when you use multiple paragraph tags. To change the positioning you must add an attribute. Let's center our text. To position our text we will add the 'align' attribute.

<p align="center"><font color="white">Hello!</font></p>

Save your file and refresh your browser screen. This should cause "Hello!" to center itself in your browsers screen. Just as with the other tags and attributes you can find them all at the bottom of this tutorial. Now, some have asked, Why can't we just put the align attribute in the font tags? The reason for this is that there are rules in HTML. Some attributes may only work in one tag while others will work in many tags. In this case, the align attribute will not work in the font tags so we had to add one that would work.

There are also a few other tags that go by themselves that can alter the way your text looks. These are br and hr tags. br is the equivalent of hitting enter in your text editor. This just forces the next bit of text to start on the next line. hr is similar but this puts a horizontal line in your text. This is mainly used a separator.

If you are typing up a document that requires the use of new lines, br can be used quite a bit because when your browser reads your HTML page it will not automatically go to the next line if you type it up that way. Here is an example, make your HTML file look like this:

<html>
<head>
<title>My Web Page</title>
</head>
<body bgcolor="Blue">
<p><font color="white">Hello! How are you?</font></p>
<p><font color="white">Hello!
How are you?</font></p>
<p><font color="white">Hello! <br /> How are you?</font></p>
</body>
</html>

If you save the file and refresh your browser you should see something like this:

Hello! How are you?

Hello! How are you?

Hello!
How are you?

As you can see the only one that moved "How are you?" to the next line had the br in it. It is also good to take note that there is space between each of the three lines. This is caused from the use of the p tags. Since the browser saw them as separate paragraphs it automatically put a line between them. If you are writing many paragraphs in a document it is usually done by using many p tags, but another way is to add br tags whenever you need a new paragraph.

Fonts

When setting the font of your web page you are restricts to about three widely compatible fonts a couple others that work decently and then there are the rest of the fonts that exist. Usually you will stick with these first three:

Serif, Sans-Serif, Monospace.

These three fonts are pretty much compatible with every browser out there. There are a couple others that work with success on some browsers. If you don't see any obvious difference below, you don't have the font.

Cursive, Fantasy.

The font of the text about will be rendered as times, or the font this text is in. Since you are doing HTML fonts here are the names of fonts that work well with most browsers and work with the three popular font families.

Serif, Vardana, Sans-Serif, Monospace.

Of all the fonts, these are installed on almost every computer. If you stick to these one you should have no problems with how your site looks when it comes to the font.