Custom Search

HTML Lesson 3

by Caroline Seawright


Here's HTML Lesson 3! If you've missed out, here is HTML Lesson 1 and HTML Lesson 2 (don't worry - they will open in new windows, so you won't lose your place!)


Here's another simple thing that you can do - change how your font looks. Not just changing the colours, but the style of the font!

This is done using the attribute face:

<font face="helvetica">This is the Helvetica font</font> - This is the Helvetica font
<font face="arial">This is the Arial font</font> - This is the Arial font
<font face="times new roman">This is the Times New Roman font</font> - This is the Times New Roman font

Also, you can add numerous face attributes together. This is done so that people who don't have the font you specify, will get the first font they do have showing up on their browser:

<font face="helvetica, arial, times new roman">

If my computer doesn't have helvetica installed, I'll get the arial font. If I don't have the arial, I'll end up with times new roman showing!

You can find font names in various ways - search online for fonts, or have a look at your computer settings and see what you've got!

You can also change the size, too:

<font size=1>This is size 1</font> - This is size 1
<font size=2>This is size 2</font> - This is size 2
<font size=5>This is size 5</font> - This is size 5

And you can mix the two together, to get different styles and sizes. This is great for headings, adding notes to the bottom of the page, etc.

<font face="arial" size=5>This is Arial size 5</font> - This is Arial size 5

Play around with your text styles! You can also add, from Lesson 2, bold or italic to the text. And links, from Lesson 1. See what you can come up with!

If you're having trouble, here's a few examples of what you can do:

Coloured Links

<a href=""><font color="#0000CC">This is a coloured link</font></a> - This is a coloured link

Note the order - <a> <font> </font> </a> - if this is put the other way around, the link will not be coloured.

Another little note - this little trick seems to only work in Netscape 4 or higher, and IE 4 or highter. If your browser doesn't colour links, you will get the colour that you set in the body tag, at the top of the page.

Coloured Lists

Here is an example of coloured lists (which may not work in some browsers.) Unfortunately TS changes the code, so I can't show an example in this lesson. But here is the code... try it yourself, and see how it looks:

<font color="#0000CC"><li> Coloured List</font>

See how HTML is a lot of trial and error, and mix-and-match?! Try to have fun while your play around - try not to get frustrated if something doesn't work. All you can do is try, then move on. Sometimes HTML will not do exactly what you want. Remember that it has limitations... but have fun trying out new stuff with your new HTML skills!


Here are some of the things that can be done with your code:

Hi, this is my text. It doesn't say much, but look at the fun you can have with the HTML code!

I wouldn't advise having your pages look like this, but it will teach you how to do HTML!!

Links and Spaces

This is not a technique, but something that you should watch out for. HTML can be very unforgiving when you use spaces in the code, in regards to links.

Sometimes, you might find a funny little line before or after an image link, and you don't know what's going on. Here's an example of what I mean:


See the funny little underscores?

It doesn't happen all the time, but if it does, the problem is usually caused by a space in the code.

<a ...> <img ...>

Delete the spaces, as so:

<a ...><img ...></a>


I was going to start writing about tables in this lesson, but I think that it will have to have a lesson on its own! They can be rather confusing, and very frustrating at times, because often the browser draws tables the way it wants, not the way you want it! (Even after 3 years of doing tables, I want to toss them out the window! If only the graphics department would give me a design that doesn't require tables! Tables were never designed to be used for making a page look good....)

So, be ready for the next lesson - tables!!

I'll do my best to make them not a nightmare for you guys, in HTML Lesson 4!

End of Lesson 3

Go on to HTML Lesson 4 for more!

That's it for this lesson! I hope this helps! ^_^

© Caroline 'Kunoichi' Seawright 2000 - present

If you enjoyed this page, please join my Egyptology & Archaeology Essays Mailing List.

Or contact me on Twitter:

comments powered by Disqus