So, how did it go with your first Web pages last week? You know how to do quite a few things already. You know what tags are, you know the basic structure of a Web page, and you know how to create text in bold, italic or underlined styles. You also know how to use the <HR>, <BR> and <P> tags. This was enough to create your first Web page, but you might have said, "This is great, but this page looks a little boring." You know what?...You’re right! This week we will learn how to make your Web pages a little more interesting. This week, we will learn how to align text, and change the font and size of your text. By the end of this lesson, you’ll definitely know some tricks that will help you create some more interesting pages. OK, let’s start…
Heading Commands
Heading commands are used in HTML documents to (you guessed it) create headings. There are six (6) heading commands: <H1> through <H6>. Just like most of the tags that we have worked with already, the heading commands have a start tag (like <H1>) and an end tag (like </H1>).
Heading commands are neat, because with one simple tag, you:
- Skip a line
- Make the text bold
- Change the size of the text
Because it does all of this, obviously, it’s perfect for making headings. See the heading above that says "Heading Commands". This was created using the <H4> command. <H1> is the largest size and <H6> is the smallest. Here are their relative sizes:
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
Heading commands are very useful, but they do have one annoying quality: they like to be alone. When you use a heading command, you set the text alone. It's like the heading commands carry a <P> command with them. Let’s say you want to create big or small text that is not all by itself. Then we can use font size commands.
Font Size Commands
As a Web designer, you definitely would like to have control over your text size. Well, you can do that with the <FONT SIZE> commands. Heading commands are great for headings, but these font commands can be used throughout your pages.
Just like most of the tags that we have worked with already, the heading commands have a start tag and an end tag (like </H1>). The format is:
<FONT SIZE="Put your number here">Put your text here</FONT>
Notice that the end tag is </FONT>, not </FONT SIZE>.
There are seven (7) font size commands available to you:+4 through +1, the default size, and -1 through -2. As you may have guessed, +4 is the largest (it's huge); -2 is the smallest (it's very small). Here are examples of them. Notice that this first command, <FONT SIZE="--"> is actually doing two things:
It’s almost like a command inside of a command. The technical HTML term is an attribute. When you use an attribute, 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. Remember that an attribute is inside of a tag. When you use an end command, you are closing the tag, not the attribute. So you only need the one end tag, like above. We start the tag with <FONT SIZE="-"> and we end it with </FONT> Would you like to learn how to get the font face to change? Alright, that was a little silly, but you get the idea. As a Web designer, it’s nice to be able to change the style of your font face. If you understood the last section on Font Size Commands, this will be easy for you. All you do is use another attitribute, this time <FONT FACE="-">…</FONT>. Below are some examples of a few font face commands. This is regular font Changing the font face may seem pretty easy, but there is one important thing to know about font faces. A text font command will only work if the font you call for is loaded on the computer displaying the page. In other words, not every computer understands every font face. So what can you do? A great idea is listing more than one font face for the computer to use. Here is an example: <FONT FACE="modern, arial, veranda">Text</FONT> Notice that I have three font faces listed each with a comma in between. When the page loads, the browser checks to see if the computer has the first font face listed (in this example, the first font is modern). If the font face is on the computer, it displays. If not, the browser attempts to find the second font face listed (arial). If it's not there either, then the third font face comes into play (veranda). If the computer does not recognize any of the font faces listed, it will simply use its regular font. One font face command that I use a lot is: <FONT FACE="arial, helvetica">…</FONT> In fact, all of the pages on this Web site are written with this font face. Arial is a very standard font that can be found on most computers, but for the few computers that don’t have it, helvetica is a good second option. You’re welcome to use this font face on your pages. I think it looks pretty nice.
<FONT SIZE="+4">This is +4</FONT>
<FONT SIZE="+3">This is +3</FONT>
<FONT SIZE="+2">This is +2</FONT>
<FONT SIZE="+1">This is +1</FONT>
This is the default size. (which means this is the size you will get if you do not specify a font size)
<FONT SIZE="-1">This is -1</FONT>
<FONT SIZE="-2">This is -2</FONT>
Font Face Commands
Would you like to learn how to get the font face to change?
Would you like to learn how to get the font face to change?
Would you like to learn how to get the font face to change?
Would you like to learn how to get the font face to change?
<FONT FACE="arial">arial font</FONT>
<FONT FACE="verdana">verdana font</FONT>
<FONT FACE="century">century font</FONT>
<FONT FACE="braggadocio">braggadocio font</FONT>
<FONT FACE="courier">courier font</FONT>
<FONT FACE="desdemona">desdemona font</FONT>
<FONT FACE="garamond">garamond font</FONT>
<FONT FACE="modern">modern font</FONT>
<FONT FACE="symbol">symbol font</FONT> (These are pretty silly.)
<FONT FACE="wingdings">wingdings font</FONT> (As are these.) Bad News: Every Font Will Not Work Everywhere
