Printable Format
Intro and Layout
Text Formatting
Hyperlinks

TEXT FORMATTING IN HTML

OKAY, so youve built your own web page!

If everything turned out perfectly and youre sitting there with a goofy smile saying "Yeah! I rule.", Congratulations, you are one of the few perfect people in the world. If everything didnt go super smoothly for you, dont worry about it. When you first start, HTML is easy to mess up. Luckily for you, the rules are pretty basic, and once you get them under your belt youll do just fine.

So far we can put text on the screen, we can center it, and make it go down a line, but thats about it. We havent figured out how to change the way our words look. Now, in the web design course, were going to learn some new tags to make our web page look pretty.

Changing Text Appearance With Headings

There are two main ways you can change font size in HTML, the first one involves what are called "headings". Headings model themselves after the print publishing practice of establishing standardized type styles. For example, the headline of a newspaper is always a certain size, and the authors name is always another set size. By having these exact style sets, you follow the rules and no one has to worry too much about what should be what size and what should be another size. Your newspaper has continuality and appears professional. HTML gives you the ability to use set heading sizes much like newspapers do.

Your heading sizes range from 1 to 7Heading 1 being the strongest, and Heading 7 the weakest. The tag for Heading 1 is simply:

<h1>

Headings require closing tags. The closing tag for <H1> is:

</h1>

1. Build a basic HTML page and put some text in the body. Experiment with the different heading sizes, 1-7
Remember, that it is important to close the heading tags.

Notice that when you use different headings and view your page in the Internet Explorer, more than one characteristic of the font changes. Words get bigger or smaller, but sometimes other characteristics like boldness and italic also change.

Changing Text Appearance With the Tag
Headings arent the only way to change fonts in HTML. Actually, most font changes utilize the tag. tags and heading tags have some of the same functions and cant be used together.

You might imagine that there are a lot of different changeable characteristics about a font. You can change its size, its color, or the font typeset itself. It would probably be inconvenient if you had to use a different tag for every tiny change made to a font, so the happy makers of HTML have provided a nice solution for you. They have provided us with the tag.

Font tags are a little bit different than other tags weve been using with so far, in that they have modifiers. A modifier is an addition to the standard tag that allows you to make small changes. This is how it works:

The font tag starts just like you think it would:

If you wanted to change the size of the font, the tag would look like this:

size="1" is the modifier of the Font tag. It is an optional extra detail about the font. Many tags have modifiers.

Take note that isnt referred to as the "Font Size" tag. is still just the "Font" tag. Size is a modifier of the Font tag. There are other modifiers that well learn in a little bit. No matter how many you add, the tag will remain the font tag, and "font" must always come first in the tag. After "font", it doesnt matter what order the modifiers come in.

<font size="1">	<size="1" font>
Right	Wrong

What font sizes are available?

Fonts range in size from "1" to "7". The largest font size is "7". The smallest is "1". The default font size is 3. You can also set font sizes to be positive or negative numbers. For example, a font size of +4 would equal font size 7. (default size=3) + 4 = 7

Closing a Tag With Modifiers

To close the font tag you dont have to write: . Instead, you only have to write:

In fact if you do write it wont work. No matter how many modifiers a tag has, you only have to close the tag using a slash and the first word in the tag. Later we will learn other tags modifiers, they all work exactly the same way. You close the tag with

</TheFirstWord>

1. Experiment with different font sizes in your HTML.
Example Dang, I love the Internet!

2. Remember to Click File/Save/Refresh to view your work in the Internet Explorer

Rules About Tags with Modifiers

Tags with modifies have spaces and quotes! How are you supposed to remember when to insert a space, and what goes in quotes?

Notice in there is a space between FONT and SIZE. You might easily write <fontsize="1">, but if you did, the tag wouldnt work. How are you supposed to remember when to insert a space? Heres the rule:

In HTML, one command is one word.

In , "font" is a command that says, "this is a font tag".

After font, there is a space and a modifier, size="1".

"size" is a whole different command. It says, "Make something this size or that size."

So, the rule being that each command in a tag gets its own word, "font" and "size" are separated by a space.

You may have also noticed that "1" appeared in quotes. How are you supposed to know what goes in quotes? Easy:

Everything after an equal sign goes in quotes.

Example: THIS="THAT"

These basic rules will help you to craft your HTML tags. Just remember that In HTML, one command is one word, and that everything after an equal sign goes in quotes. Youll do just fine.

Changing Text Color

Size is not the only modifier that can be applied to a font tag.

The modifier for font color is:

COLOR

For example, if I wanted my font color to be red and my font size to be 4, I would type:

Its that easy?

Yes, one of the ways to get color is to just type out the color. HTML knows a lot of colors. As long as the color is one word, everything will be great. "Blue" will work fine. "dark blue" wont work so well.

Again, it doesnt matter what order the modifiers come in as long as "font" comes first and there is a space in between modifiers.

Go ahead and try it.

1. Change the fonts in your HTML so that they have different colors and sizes. Experiment with different colors, it knows some you might not think of like gold, silver or teal.

2. File/Save/Refresh

So far, we know two modifiers for the font tag SIZE and COLOR. Were about to learn how to change the actual font itself. First well have to learn a little bit about how your computer applies different looks to typefaces.

So, how do fonts work in my computer?

To correctly understand fonts on the Internet, you have to understand how fonts work in your computer. The fonts on your screen are not actually little pictures per say. The computer does not draw each one of them individually. The computer says "put this text on the screen and apply this font map to it". A font map is a basic drawing in the computer, telling it how to make each letter look.

To see your font maps:

On a PC:

Start Settings Control Panel Fonts Folder

On a Mac

Hard Drive System Folder Font folder

In the fonts folder youll see all your fonts. Double-click any one and youll see the font in all different sizes. Kind of cool, huh? Different computers have different fonts installed in them. You could have a thousand fonts on your computer. Sadly though, these font maps do not download with the web page.

How does a viewers computer display fonts?

If a web page calls for a font map, the users computer goes into its own Font Folder and tries to find the font map called for. If the computer cant find the font map asked for, it just picks any other one that it feels like, and you end up with a very ugly website. What that means to you, is that you can not just use any old font you feel like when programming for the Internet, you have to use font families which are kept in every computer, so your web page will look the same on everybodys screen.

So, what Fonts can I use?

You can choose from:

1. Ariel (pc) or Helvetica (mac)

2. Times New Roman, which is the standard font used in programs like Microsoft Word

3. Courier, which looks like old typewriter type

4. Georgia, which looks like Times New Roman, but was designed for the computer screen

5. Verdana, which looks like Ariel, but was designed for the computer screen

Verdana and Georgia were made to be displayed on computer screen and therefore often look better when viewed on the Internet.

Serif vs. San-Serif

Georgia and Times New Roman are called serif fonts, this is the letter "T" in serif font: "T". A serif font has fancy squigglings and overhangs. They were invented for the Guttenberg Press to drive your eye to the next letter.

"Sans" means "not", so sans-serif fonts do not have little squigglings. Studies have shown that sans-serif fonts read faster and have higher level of comprehension. They are also easier to read on the computer screen, which doesnt have the high resolution of print. Right now, the san-serif font families are also much more in style. Verdana and Arial are sans-serif fonts.

Changing a Font

Lets change the font displayed on the screen. The modifier used to change the font face is:

face="fontname"

If I wanted a small, blue, san-serif font I might type:

***You can choose between Arial, Verdana, Helvetica, Times, Georgia, or Courier

1. Experiment with changing fonts faces.
Remember to close a FONT tag you only use

2. Write a word, center it, and make it go down a line.

3. Change the font size, font color, and font face.

Quick! Heres Three Easy Tags:

Bold:

 and 

Underline:

 and 

Italic:

 and 

1. Take a minute to experiment with your new font changing skills.

If you think about it, youve learned a lot so far. You can make a web page. You know the basic outline of a web page, starting with <head> using the <title>, and following with <body>. You can change the way words look. You can change their position on the page using <center>, , and . You can change their appearance using the heading tags <H1> and the font tag with all of its Modifiers

This isnt the prettiest website yet, but we sure are getting there!

Continue on to Hyperlinks |