HTML for beginners
Lesson 7
More Text Tags

Here are some more tags that can alter how your text looks and where it goes.

<u>underscore tag</u> gives underscore tag
I personally don't like using this tag too much because when a visitor sees something like this, they usually assume it's a link.

<blink>blink tag</blink> gives blink tag
<small>small tag</small> gives small tag
<big>big tag</big> gives big tag
The "small" tag is the same as <font size="-1"> and the "big" tag is the same as <font size="+1">.

^{superscript tag} gives ^{superscript tag} like when you want to write 2³ or refer to notes¹ at the end of the page.
_{subscript tag} gives the opposite _{subscript tag} when you want it.
If you make a site about chemistry, you will use those 2 tags a lot.

<font face="Arial">font face tag</font> gives font face tag
<font face="Courier">font face tag</font> gives font face tag
<font face="Comic Sans MS">font face tag</font> gives font face tag
<font face="Times New Roman">font face tag</font> gives font face tag which is the default when no font face is specified.
To see what font face options you have, check your "fonts" directory. If you didn't add any of your own, most of them should work. If you use a font face that a visitor doesn't have, they will see their default instead.

Another tag that affects the text is called the "header" tag. It is an h followed by a number from 1 to 6. It works like this.
<h1>h1</h1> gives

h1

h4

h6

With the h4 sample I added an align tag. The header tag is like the paragraph tag and can be told whether to align with the left, right, or center of the page. The header tag is usually used for.......
a header of course. :) The header tag is automatically bold. Adding the bold "b" tag won't change a thing, and since it is a header, it also automatically puts itself into its own paragraph. In the example, did you notice how the actual headers are in their own paragraphs, seperate from the codes. I typed the 3 examples on 3 lines, not seperate ones, and no paragraph tags, but the headers automatically put themselves in their own paragraphs with a blank line above and below each one. That means if you want big and bold text with the next line right below it, you would have to use the "font size" and "bold" tags instead, but for real headers, the "header" tags are great.

The "pre" tag is handy when you want text to show up just as you type it.

<pre>
This text here
      would look
   just like this as long as       it's between
           the "pre" tags.
</pre>

That text and the tags you can see are between real "pre" tags so that it will look right on the screen. Here is the exact same sample, with all the spaces, but no real "pre" tags.
<pre> This text here would look just like this as long as it's between the "pre" tags. </pre>

Remember when it was said earlier that the browser needs to be told when to make carriage returns? That's why this time all the text appeared on one line. I didn't use formatting or the "pre" tag. I swear I typed the text exactly the same the second time as I did the first time. If you don't believe me, view the source code of this page.

To view a pages source code, right-click on the page and select "view source". Once you have the basics of web design down pat, this is how how can go into more depth. View a pages "source code" to see how it was put together. Be careful though. It is illegal to just copy someones code, but it's not illegal to study it to learn how it works. If you view the source code of this page you will see many tags and tag features that haven't been mentioned yet. When you are finished this course you will understand every one of them. Web design really is fun when you know what you are doing. Now of course, if you can't learn web design, or don't have the time to, you can always hire me to design your site for you.

Now lets fix up our own source code a little. Final web pages can get very long, sometimes very very long. An average web page is easily 100 lines long and can be several hundred lines long. Even a thousand lines isn't that hard to get. When a page gets to be very big you want to be able to look over your code and read it easily. Well formatted code is much easier to read. How to format your code is entirely up to you. different people do it in different ways.

Here is how the code would look if I wrote it:

<html>
<head>
<title></title>
</head>

<body bgcolor="00ffff">

<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.

<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>

</body>
</html>

I use blank lines to seperate different parts and paragraphs, and I start my actual paragraph on the line after the paragraph tag. You will also notice the </p> tags disappeared. I never did bother with them because until xml and xhtml are popular, they don't matter. Since it doesn't hurt to be prepared though, from the next lesson on, we will be using them. I am trying to make it a habit. :)

Let's put those closing "p" tags back and get a title on our page so we can be ready for the next lesson. Your code now should look like this. View your page and you should see the title at the top of your screen.

<html>
<head>
<title>My first page</title>
</head>

<body bgcolor="00ffff">

<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>

<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>

</body>
</html>

Since you have now learned many html codes, you should put a few web pages together trying the various codes until you get the hang of it. The next 3 lessons will be bringing in many new codes to remember. In lessons 8 and 9 we will add pictures, then in lesson 10 we will add links. Without links you can only have a one page website, right?

During your experimenting, try mixing various codes like adding the underscore or font color to a header tag. Look closely at our code directly above and you will see that our tags are all being closed in the opposite order they were opened. In the first paragraph, we started a paragraph, then changed the font size and color, then made it italic, then ended the italic, then the font features, then the paragraph. Most browsers don't care when you start and end various codes, but it is best to end them in the reverse order they started. Here is a good example.

You want:
A mixture of bold and italics.
The simplest way would be:
A mixture of <b>bold <i>and</b> italics</i>.
It would work in most browsers, but it is not a good way to do it. Any of the next examples would be acceptable.
A mixture of <b>bold</b> <b><i>and</i></b> <i>italics</i>.
A mixture of <b>bold <i>and</i></b> <i>italics</i>.
A mixture of <b>bold</b> <i><b>and</b> italics</i>.
Look closely at each example and you will notice that in the first one, the b and i tags overlap, but in the other three they do not. All opening and closing pairs should be opened and closed inside of other pairs, not overlapping them. Some browsers don't care, some do, and the new xml and xhtml language requires it that way.

You have learned a lot at this point and may have easily absorbed all of it, or may be forgetting all of it now. Some people will finish this lesson in 15 minutes and be ready to move on. Others will be here for a while and be scared to see more new tags. No matter which one you are, until you feel comfortable with what you have learned so far, don't go to the next lesson.

Are you ready to make your page a little more lively?

Add pictures

Notes:
1) This is the note I'm refering to when I introduced you to the superscript tag near the top of this page.