Web Develop > Text - Lesson 02

Text Formatting
Until now we have learned to insert simple text into our web pages. In this lesson we will learn text formatting techniques. This part of html writing skills is the most important part of our whole web design course. So you must learn it word by word.

Changing text style
We can make a text bold, italic or underlined. If you want to make a text bold, you must in close it
in "B"..."/B" tags.

"body"
This is very "B" important "/B"
"/body"
In above text the word "important" is typed bold. You can make a text italic by inclosing it in
"I"..."/I" tags.
And finally you can make some text underlined by inclosing it in "U"..."/U" tags.


In above example you can see that how we can make a text both bold and italic or any other combination.

You may notice the tag
in the end of each line. Let's see what this tag is. If you insert enter keys (new line characters) at the end of each line and wish that it will make new lines in your output page you will soon be disappointed.
All lines will be in a single line in output web page. No matter how html code is written in separate lines. To break lines in output web page you must insert
tags in breaking points. Also pay attention that
tag is one of few single tags in html language. It has not an ending tag.


Nested Tags
In previous section we saw a line of code with nested tags.
"B""I"This is both bold and italic"/I""/B"
When you use nested tags you must be sure that they do not overlap each other. They must be nested exactly. For example some part of text may change to bold although it is not desired.


Text With Fixed Width Font
As you may know, regular fonts use different horizontal space. For example letter 'w' uses more space than the letter 'i'. Sometimes we need a font with exactly the same width for all letters. For example if you want to make a table of numbers and you want the columns to be exactly under each other in different rows, we will need this kind of text.
To specify this kind of text you must use ... tags. TT means Typewriter Text.


Changing Size and Face of Fonts
We can change face and size of fonts using "FONT"..."/FONT" tags. Also using this tag alone will not change the text. You need to use parameters for this tag. These parameters specify what kind of change you need in text font.


Size of Font
To change size of font in a part of text, inclose it with a "FONT" tag as below:

"FONT SIZE=n"...,"/FONT"
n is size of font. size of font must be a number between 1 and 7. If you insert some text without determining its size default size will be 3.


Face of Fonts
We can use a font for a part of text by specifying its name.

"FONT FACE="Font Name Here""..."/FONT"
You must insert font name in double quotes in above tag.

In above example we have used Arial and Impact fonts while you can use any font you want. Warning: Fonts will be displayed on your viewer if specified font is installed on your computer. So be careful while using new fonts. It's better to use native windows fonts in your pages. Windows is used by about %95 of web surfers.
Alternatively you can use several font faces for each part of your text. In this way your browser will try alternative fonts if it can not find primary font.
"FONT Face="Arial,HELVATICA""..."/FONT"


Changing Font Colors
In previous lesson you learned how to change web page background color. Here we will learn how to change text color. Look at this example:

In above text different colors are used. You can change text color by changing color number. If you don't remember how to specify color numbers return to previous lesson and review section on "web page background color".


Combining Font Attributes
We can obviously combine "FONT" tag parameters as we wish. In this way we will be able to have text with different colors, font faces and font sizes. You can even use text styles with "FONT" tag by nesting style and font tags. "B""I""FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00""
How is this ?
"/FONT" "/I""/B"


Changing default font colors in a web page
Each browser has its own default settings for text color, link color, visited link color and active link
color.

Text color default is black. Links are usually blue. To change default settings for these values you must use "body" tag with more parameters.

"body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#00FF00" alink="#FF0000""Some Text "/body"
BGCOLOR: Web page background
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link"/span" "/p" "p" "span style="font-family:Verdana;font-size:85%;" " "/span" "/p"