HTML Tutorial - Chapter 2: Text Formatting



» For the Lazy Typer

In the previous chapter we learned about setting your canvas first, before doing anything else with your site. (Declaring that you'll be using HTML, laying out your head area, and then your body area.) You should always do this for every page of your site. However, for the purpose of this tutorial, if you're feeling tired of typing it all out, you may exclude the canvas and just type the HTML out directly...

...it should still work fine in the browser. Most browsers aren't very picky about things like that anymore.


» Tag Properties Introduction

Almost every tag has a set of properties that it can call upon to create a variation on its effect. Consider each to be a certain type of swiss army knife loaded with different tools to help your site. The best example of this is the "Paragraph" tag.

Here, take a look...

<p align="left">Looks good, doesn't it?</p>

Before, we just used <p>, now we're adding a little extra bit of code align="left" within it and even closing the tag off with </p>. It's easy to guess what all this does. But let me explain if you're a little confused.

First, the bit of code, align="left", represents one of the "Paragraph" tag's properties (properties are optional, remember that). You're telling the browser here to create a new paragraph that's aligned to the left. The reason we close the tag off at the end is because we might want to align the next paragraph a different way and if we don't close everything off, our code gets a little messy and we might forget what's what.

By default, all <p> tags are aligned to the left (as you saw in the previous chapter through experience). We can also align new paragraphs to the "center" and to the "right," if we so please.

Give it a try now. Type in some text below separated by paragraphs that are aligned in different ways. Please note, that our old friend, the "Break" tag <br> doesn't have any properties. You can't align text with it or anything. Give it a try if you want to prove me wrong. ^_^



» Font Tag

The tag I'm about to teach you is one of the most important you'll ever learn. It's also one of the most abused tags you'll ever find. Go easy on it!

I'm talking about the <font> tag. It lets you format the size, font, and color of your text. On the plus side, this means your text doesn't have to be boring black all the time. On the minus side, this means you're destined to visit tons of websites by amateurs who make every other paragraph a different, hard-to-see color.

The key to the <font> tag is that, on its own, it doesn't do anything. That is...

<font>I'm a huge fan of Japanese cartoons!</font>

...looks the exact same as if you didn't have the tags there at all. Poo! So to remedy this, let's add some properties to the mix.

First, let's experiment with changing the size of our text...

Now, first forget everything you know about text sizes from using word processor programs. It's irrelevant for HTML. In HTML, this is the range of sizes for all text:

Size 1 - My name is Adam!
Size 2 - My name is Adam!
Size 3 - My name is Adam!
Size 4 - My name is Adam! ...and so on

The default size is usually either 2 or 3. Anything below that becomes hard to read and anything above becomes obnoxiously big.

Knowing this now, let's add a size property to our lovely <font> tag!

<font size="3">What does "Otaku" mean anyway?</font>

Notice, we never name the property used in the closing tag! Only in the opening tag. All properties will use an equal sign with quotation marks surrounding their value. Anyway, the code above would return this:

What does "Otaku" mean anyway?

Each tag can use more than one property too at the same time. Let's add some color to the mix now.

<font size="3" color="red">What does "Otaku" mean anyway?</font>

Color is a tricky subject in HTML. While most basic color names (like "red" or "blue" or "green") will work, it's usually recommended to use Hex Names to achieve gradients and more sophisticated colors. Hex Names are a bore to memorize. Red in Hex would be: #FF0000, for example. So instead of "red" in your code, you'd type:

<font size="3" color="#FF000">james is from australia! he must like crocs!</font>

We have a handy section on Hex Names that we recommend bookmarking for future reference - for those days you need a quick table to consult for the Hex Name of dark lime.

Anyway, the code above will output (this font combination of size 3 in red is known as the "kuja" combination - no need to remember that though ^_^).

james is from australia! he must like crocs!

Finally now, let's add the third property possible with our friendly <font> tag. That is, changing the font itself.

There are only a handful of web-friendly fonts and of those, we only recommend two to use: Arial and Verdana. (This site uses Verdana.) While Times New Roman might look great on printed paper, it's too cluttered for the Internet and definitely a no-no. (Unfortunately, Times New Roman is the default font if you don't specify anything.)

Because this site has been using Verdana font for its entirety, let's change things up a little and give Arial some on-air time.

<font size="3" color="#FF000" face="arial">Where am I?</font>

Isn't it so cute? To change the font's font, we have to change its "face." This makes sense, as typing...

<font font="arial">

...would be a little (well, a lot) confusing.

Well that's all there is to know about Mr. <font>. Now's your turn to play and format text to all sorts of strange sizes, colors, and faces. I know this is your favorite part, theory is only so interesting before you want to get your fingers dirty. ^_^



» More Fun With Text

Now that we know how to change the size, shape, and color of our text, let's quickly learn three more useful tags for formatting. One is to make your text bold, the other lets you make your text italicized, while the last makes your text underlined.

Before you read anything more, mentally guess what the tags are for each of these. My only hint to you is that they follow the same pattern as the "Paragraph" tag for naming.

Got it? Well, the tag for bold is <b>, the tag for italics is <i> and the tag for underline is <u>. It's just the first letter of their names! These tags are insanely easy-to-use. Just go easy on them. Especially italics and underline. Italics don't show up too well online and you should almost never underline text - you'll confuse your visitors who'll think they're links!

<b>I need some confidence!</b>
<i>I see the world from a slanted perspective<i>
<u>I confuse the heck out of my visitors!<u>

There are three examples of using these tags. The first bolds, the second italicizes, while the third underlines. We can combine these tags too, if we wanted. Just remember the rule about embedding!

<b><i><u>I'm now bold, slanted and tricky!<u></i></b>

One fast way to check if your tags are ended in the right order is that they should be closed in the opposite order of how they were started. The code up there would output...

I am now bold, slanted and tricky!

Lovely. We can also combine these fun tags with what we know about the <font> tag!

<font color="green"><b>See you later, <i>space</i> cowboy!</b></font>

Tags all over the place here! Look over this code and predict what the output will look like. (Also notice that everything is ended in the right order. The closing tags are all in the reverse order of the opening tags. As it should be.

Now, the output is...

See you later, space cowboy!

Give these tags a try and be sure to combine them with everything you know about paragraphs and our favorite <font> tag!



» Next Chapter

You're doing very well if you've made it here and have mastered all the material! Remember, don't be afraid to keep flipping back through previous chapters to recall old material. All of it is useful!

Next, we're going to take a look at the most important tag ever created. The tag that the entire Internet was built on. The tag that lets us create links.

Previous Chapter | Next Chapter