Lesson 3: This lesson will focus on enhancing your knowledge of text, color and fonts

Text effects

It is worth noting that some of the tags that you will learn in this lesson are deprecated. This means that they have been "red-circled" for removal from the HTML standard sometime in the future and future versions of browsers may eventually stop recognizing them. This is because the future of HTML is seen to rely more and more on defined style templates or CSS (Cascading Style Sheets). It is still worth learning, understanding and using the tags here, but as you get more advanced into HTML, you will want the control and special features that CSS can give you over the look of your page. For example, if you are using MSIE 5.5, you will notice that the scrollbar on the side of this page is coloured. This is done with CSS. There is another Area52 course on CSS.

Text decoration tags

Like most HTML, to apply a text effect you start or open the tag, type the text that you want to be affected and then close the tag to end the effect. All of the these tags go in the main body to effect the text you have in your HTML document. You can add an underline, a bold effect or italics to your text. All of these tags have a closing tag and are within the main body.

Note 1: Underline is still around, but I would recommend against using it for text decoration or emphasis; it is recognized by most people now as a hyperlink and can be confusing.

 Notice that you have to close this tag, otherwise your whole page would be underlined

 Bold : This tag also must be closed or your whole page will be bolded.

 Makes the text between the opening and closing tags appear as italics .

 This tag is emphasis that is the same effect as italics..

Font face or type

The default font face for your browser is Times New Roman or TNR. That means that if you don't specify a font, it will automatically appear as TNR. You can always specify a different font face in your HTML code.

Caution: To display in your visitor's browser, the font you use in your code must be installed on the computer of the person visiting your site. If you have a wild and crazy font that you love, but your visitor doesn't have the same font on their computer, their browser cannot display it and will instead use another font. If you stick to the most popular fonts, the ones that come with Windows or are installed with most browsers, the majority of your visitors will be able to view your page as you made it. Here are some examples of fonts that are installed on most operationg systems (and therefore work with most browsers):

Comic sans ms
Courier
Courier New
Arial
TimesNewRoman

To specify a font face code, you would do this:

 I love this neat font! 
and the sentence would look like this: I love this neat font!

Font size

To change the font size you use the font tag's size attribute.
 Then, when you want to end the effect, you have to close your tag with .

Font size ranges in size from 1 to 7; 1 being the smallest to 7 being the largest.

EXERCISE 2.1

Well that is a lot to read, and I believe learning is doing so lets give it a try. What you need to do is choose a font face, and a font size.

1. Go into your your file manager and open an html document. Inside your BODY tags, add this code at the beginning of a sentence:



2. Close your tag:



3. At the beginning of your next sentence add this code:



4. Close your tag:



5. You can choose any font you like instead of the examples I have used here.

6. Preview your page to see what happens.

Line Breaks

It is now time for a break before we get to the text color - a line break that is. The tag is another HTML tag that does not need a closing tag. The difference between the tag and the tag is that the tag creates a line between paragraphs, the just breaks the line at that point and begins the following text on the next line.

For example, this set of code

<HTML>
<HEAD>
<TITLE> This is my new page </TITLE>
</HEAD>
<BODY BGCOLOR= "#00FF00">

<H1> Area 52 I Believe</H1>
I must not fear. Fear is the mind killer. Fear is the little death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past, I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.(The Bene Gesserit Litany against Fear from Dune, by Frank Herbert)

</BODY >
</HTML>

Will look like this:

Area 52 I Believe

I must not fear.
Fear is the mind killer.
Fear is the little death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing.
Only I will remain.

(The Bene Gesserit Litany against Fear from Dune, by Frank Herbert)

Note: The tag adds a just a line break without adding the extra blank line like . It does not need to be closed.

Lesson4

Lesson 1 :: Area52 University

Lessons created by "Odona"2008/2009

Hosted by www.Geocities.ws