HTML PART 2.........................
F O R M A T I N G T E X T
Lesson
2
Formatting Text
The same as this book, text in web pages can be of different styles and can use different fonts with
different sizes. In this lesson we will learn about text formatting techniques.
T
Changing text style
Making a part of text to appear in bold letters, italic or underlined form is possible in Html by enclosing the
text in specific tags. Enclosing the text in <B>…</B> tags will make it bold, using <I>…</I> makes it
italic and finally <U>…</U> is used to underline a part of text.
<BODY>
This is very <B> important </B>
</BODY>
In example 2-1 you see how we can make a part of text bold, italic, both or any combination of mentioned
styles.
Example 2-1: page2-1.html
<HTML>
<HEAD>
<TITLE>Example 1, Lesson 2</TITLE>
</HEAD>
<BODY>
<B>This text is bold</B><br>
<I>While this one is Italic</I><br>
<U>and this text is underlined</U><br>
<B><I>Look at this, this is both bold and italic</I></B>
</BODY>
</HTML>
You may notice <BR> tags at the end of each line in above code. Pressing enter key in html code will make
the code to continue in a new line but in the resulting output page in a browser the text will not break into a
new line unless you use a <BR> tag in your Html code. Also pay attention that <BR> tag is one of few single
tags in html language which do not have a closing tag.
9 9
99
F O R M A T I N G T E X T
FIGURE 2-1: Bold, Italic and underline text
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 ensure that they do not overlap each other. They must be nested into
each other correctly.
Text with fixed width font
As you may know, regular fonts use different width for different alphabets. For example letter 'w' has a bigger
width than the letter 'i'. Sometimes we need a font with exactly the same width for all alphabets. If you want to
make a table of numbers and you want the columns of numbers to be exactly under each other in different
rows, you will need this kind of font. Another example is when you want to quote a computer code and you
again prefer a fixed width font. To enforce the browser to use a fixed width font with a text you can surround
the text with <TT>...</TT> tags. TT means Typewriter Text.
FIGURE 2-2: Fixed width and normal fonts.
10 10
1010
F O R M A T I N G T E X T
Changing size and face of fonts
We can change face and size of fonts using <FONT>...</FONT> tags. FONT tag has a few parameters
which specify the font face, size, color etc.
Size of font
To change size of font in a part of text, enclose it in a <FONT> tag:
<FONT SIZE=n>...</font>
n is the size of the font. Size of the font must be a number between 1 and 7. If you insert some text without
determining its size a default size of 3 will be considered.
Example 2-2: page2-2.html
<HTML>
<HEAD>
<TITLE>Example 2, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>1This text is bold</FONT><br>
<FONT SIZE=2>2This text is bold</FONT><br>
<FONT SIZE=3>3This text is bold</FONT><br>
<FONT SIZE=4>4This text is bold</FONT><br>
<FONT SIZE=5>5This text is bold</FONT><br>
<FONT SIZE=6>6This text is bold</FONT><br>
<FONT SIZE=7>7This text is bold</FONT><br>
</BODY>
</HTML>
FIGURE 2-3: Text with different font sizes.
11 11
1111
F O R M A T I N G T E X T
Face of fonts
We can specify different font types by specifying their short name in <FONT> tag. If your font name is more
than one word, you should enclose it in double quotes.
<FONT FACE="Font Name Here">...</FONT>
Example 2-3: page23.html
<HTML>
<HEAD>
<TITLE>Example 3, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT FACE="ARIAL">This text is in ARIAL font</FONT><br>
<FONT FACE="IMPACT">This text is in IMPACT font</FONT><br>
</BODY>
</HTML>
You can test other fonts and see the difference. Just pay attention that web pages are viewed in different
operating systems, browsers and even mobile phones. Because of this, you normally need to choose your
fonts from a very limited list of popular fonts. It is also possible to use a list of alternative fonts in your
<FONT> tag. In this way, if your browser cannot find a specific font, it will proceed to the next mentioned
one.
<FONT Face="Arial,HELVATICA">...</
Changing font colors
In previous lesson you learned how to change background color of a web page. Here we will learn how to
change color of web page text. Look at this example:
Example 2-4: page24.html
<HTML>
<HEAD>
<TITLE>Example 4, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is in red color.</FONT><br>
<FONT COLOR="#00FF00">This text is in green color.</FONT><br>
<FONT COLOR="#0000FF">This text is in blue color.</FONT><br>
</BODY>
</HTML>
In above example different colors are used for each line of text. We described how color codes are used in
previous lesson. Try different combinations on above code and see the effect.
12 12
1212
F O R M A T I N G T E X T
Combining Font attributes
You can guess that we can combine attributes in a <FONT> tag to produce different effects. As you know it
is also possible to nest tags. Below example is a completely valid HTML code.
<B><I><FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00">
A line of text in green color, bold and italic styles and Impact face
</FONT></I></B>
Changing default font colors in a web page
Each browser has its own default settings for text, link, visited link and active link colors. Text color is
normally black. Links are usually blue etc. To change default colors, you can use below attributes of
<BODY> tag of the page.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#00FF00"
ALINK="#FF0000">
...
</BODY>
BGCOLOR: Web page background color
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link
Remembering tags and their attributes will be easier if you do enough practice with them and use them for a
while. Doing exercises is the minimum practice you can do. You can additionally create your own web pages
to do more practice.
Exercises
Important: Do not use any html authoring program like MS FrontPage,
Expression or Dreamweaver. You must work on the codes using a simple text editor.
Paid students need to submit their exercises inside e-learning virtual campus.
Corrected exercises will be available inside virtual campus.
If you have obtained the e-Book only, you can discuss your homework
questions in Learnem.com support forums (in registered e-book users section).
1. Write an html page which uses text in these forms in separate lines:
Italic and bold
13 13
1313
F O R M A T I N G T E X T
Lesson
2
Formatting Text
The same as this book, text in web pages can be of different styles and can use different fonts with
different sizes. In this lesson we will learn about text formatting techniques.
T
Changing text style
Making a part of text to appear in bold letters, italic or underlined form is possible in Html by enclosing the
text in specific tags. Enclosing the text in <B>…</B> tags will make it bold, using <I>…</I> makes it
italic and finally <U>…</U> is used to underline a part of text.
<BODY>
This is very <B> important </B>
</BODY>
In example 2-1 you see how we can make a part of text bold, italic, both or any combination of mentioned
styles.
Example 2-1: page2-1.html
<HTML>
<HEAD>
<TITLE>Example 1, Lesson 2</TITLE>
</HEAD>
<BODY>
<B>This text is bold</B><br>
<I>While this one is Italic</I><br>
<U>and this text is underlined</U><br>
<B><I>Look at this, this is both bold and italic</I></B>
</BODY>
</HTML>
You may notice <BR> tags at the end of each line in above code. Pressing enter key in html code will make
the code to continue in a new line but in the resulting output page in a browser the text will not break into a
new line unless you use a <BR> tag in your Html code. Also pay attention that <BR> tag is one of few single
tags in html language which do not have a closing tag.
9 9
99
F O R M A T I N G T E X T
FIGURE 2-1: Bold, Italic and underline text
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 ensure that they do not overlap each other. They must be nested into
each other correctly.
Text with fixed width font
As you may know, regular fonts use different width for different alphabets. For example letter 'w' has a bigger
width than the letter 'i'. Sometimes we need a font with exactly the same width for all alphabets. If you want to
make a table of numbers and you want the columns of numbers to be exactly under each other in different
rows, you will need this kind of font. Another example is when you want to quote a computer code and you
again prefer a fixed width font. To enforce the browser to use a fixed width font with a text you can surround
the text with <TT>...</TT> tags. TT means Typewriter Text.
FIGURE 2-2: Fixed width and normal fonts.
10 10
1010
F O R M A T I N G T E X T
Changing size and face of fonts
We can change face and size of fonts using <FONT>...</FONT> tags. FONT tag has a few parameters
which specify the font face, size, color etc.
Size of font
To change size of font in a part of text, enclose it in a <FONT> tag:
<FONT SIZE=n>...</font>
n is the size of the font. Size of the font must be a number between 1 and 7. If you insert some text without
determining its size a default size of 3 will be considered.
Example 2-2: page2-2.html
<HTML>
<HEAD>
<TITLE>Example 2, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>1This text is bold</FONT><br>
<FONT SIZE=2>2This text is bold</FONT><br>
<FONT SIZE=3>3This text is bold</FONT><br>
<FONT SIZE=4>4This text is bold</FONT><br>
<FONT SIZE=5>5This text is bold</FONT><br>
<FONT SIZE=6>6This text is bold</FONT><br>
<FONT SIZE=7>7This text is bold</FONT><br>
</BODY>
</HTML>
FIGURE 2-3: Text with different font sizes.
11 11
1111
F O R M A T I N G T E X T
Face of fonts
We can specify different font types by specifying their short name in <FONT> tag. If your font name is more
than one word, you should enclose it in double quotes.
<FONT FACE="Font Name Here">...</FONT>
Example 2-3: page23.html
<HTML>
<HEAD>
<TITLE>Example 3, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT FACE="ARIAL">This text is in ARIAL font</FONT><br>
<FONT FACE="IMPACT">This text is in IMPACT font</FONT><br>
</BODY>
</HTML>
You can test other fonts and see the difference. Just pay attention that web pages are viewed in different
operating systems, browsers and even mobile phones. Because of this, you normally need to choose your
fonts from a very limited list of popular fonts. It is also possible to use a list of alternative fonts in your
<FONT> tag. In this way, if your browser cannot find a specific font, it will proceed to the next mentioned
one.
<FONT Face="Arial,HELVATICA">...</
Changing font colors
In previous lesson you learned how to change background color of a web page. Here we will learn how to
change color of web page text. Look at this example:
Example 2-4: page24.html
<HTML>
<HEAD>
<TITLE>Example 4, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is in red color.</FONT><br>
<FONT COLOR="#00FF00">This text is in green color.</FONT><br>
<FONT COLOR="#0000FF">This text is in blue color.</FONT><br>
</BODY>
</HTML>
In above example different colors are used for each line of text. We described how color codes are used in
previous lesson. Try different combinations on above code and see the effect.
12 12
1212
F O R M A T I N G T E X T
Combining Font attributes
You can guess that we can combine attributes in a <FONT> tag to produce different effects. As you know it
is also possible to nest tags. Below example is a completely valid HTML code.
<B><I><FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00">
A line of text in green color, bold and italic styles and Impact face
</FONT></I></B>
Changing default font colors in a web page
Each browser has its own default settings for text, link, visited link and active link colors. Text color is
normally black. Links are usually blue etc. To change default colors, you can use below attributes of
<BODY> tag of the page.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#00FF00"
ALINK="#FF0000">
...
</BODY>
BGCOLOR: Web page background color
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link
Remembering tags and their attributes will be easier if you do enough practice with them and use them for a
while. Doing exercises is the minimum practice you can do. You can additionally create your own web pages
to do more practice.
Exercises
Important: Do not use any html authoring program like MS FrontPage,
Expression or Dreamweaver. You must work on the codes using a simple text editor.
Paid students need to submit their exercises inside e-learning virtual campus.
Corrected exercises will be available inside virtual campus.
If you have obtained the e-Book only, you can discuss your homework
questions in Learnem.com support forums (in registered e-book users section).
1. Write an html page which uses text in these forms in separate lines:
Italic and bold
13 13
1313
Post a Comment