Introduction
There are various ways
to format the text that
appears on your Web site.
On the previous page, I
showed you how to define
the color of your text within
the <body>
tag. I will now show you
another method used to change
the color of your text and
I will also discuss other
ways to format the text-based
content that appears on
your website.
There are two widely
used tags that I will
introduce before explaining
the different methods
of formatting. These two
tags are the <br>
and the <p></p>
tags . The <br>
tag is the Line Break
tag. This tag moves any
text after it to the next
line of the document.
The <p></p>
tag is known as the Paragraph
tag. This tag will create
evenly spaced paragraphs.
Below is an example of
what the <br>
tag and the <p></p>
tag does:
HTML Code
<body>
The<br>
Line<br>
Break<br>
Tag<br>
</body>
Result
The
Line
Break
Tag
HTML Code
<body>
<p>Paragraph
1 is just some sample
text used to show you
what the Paragraph tag
does.</p>
<p>Paragraph
2 is more sample text
used to show you what
the Paragraph tag does.</p>
</body>
Result
Paragraph 1 is just
some sample text used
to show you what the
Paragraph tag does.
Paragraph 2 is more
sample text used to
show you what the Paragraph
tag does.
Now that I've introduced
those two tags, I will
move on to alignment.
We will be focusing on
the Paragraph tag to accomplish
this.
^^-Return
to Top-^^
Alignment
The first method of
formatting that I will
introduce is alignment.
There are three different
types of alignment that
you can use. These types
include left, center and
right.
As with many tags, the
<p></p>
tag has attributes that
can be used within the
tag. For now, we will
be using the align attribute.
Using the align attribute
is very simple:
Align left (default):
<p>This
text is aligned left</p>
or
<p
align="left">This
text is aligned left</p>
This text is aligned
left
Align center:
<p
align="center">This
text is aligned center</p>
This
text is aligned center
Align right:
<p
align="right">This
text is aligned right</p>
This
text is aligned right
There is also another
way to center your text.
To accomplish this, you
can also use the <center></center>
tag.
<center>This
text is centered by
using the Center tag</center>
This text is centered
by using the Center
tag
^^-Return
to Top-^^
Font
Types
Now I will discuss
how to format the look
of your text. I will start
by explaining how to use
a font other then the
default font, which is
generally Times New Roman.
To change the type of
font that will appear
on the user's screen,
you will use the <font>
tag and the face
attribute. As I explained
before, not every computer
may have the font that
you choose to use so try
to stick to the more common
fonts found on people's
machines. Below are a
few examples of how to
change the font type:
HTML Code
<font
face="Times
New Roman">This
text is Times New Roman</font>
Result
This
text is Times New Roman
HTML Code
<font
face="Verdana">This
text is Verdana</font>
Result
This
text is Verdana
HTML Code
<font
face="Arial">This
text is Arial</font>
Result
This
text is Arial
It is a good rule to
define at least three
fonts with in the "face"
attribute. This allows
more of a chance for the
user to have one of the
fonts installed on their
computer. Here is how
you would define more
then one font:
HTML Code
<font
face="Verdana,
Arial, Helvetica, Sans-Serif">This
is how you define more
then one font.</font>
Result
This
is how you define more
then one font.
So what does the above
example do? Basically,
when the user's browser
reads the page, it checks
the user's computer for
the Verdana font. If the
browser finds Verdana,
then the text will be
displayed as the Verdana
type face. If it doesn't
find the Verdana font,
it will then look for
Arial. If it finds Arial,
the text will be displayed
in Arial but if it doesn't
find it, it will then
search for Helvetica on
the user's computer. Again,
if the browser finds Helvetica,
then the text will be
displayed in Helvetica.
If not, the browser then
looks for Sans-Serif.
If the browser doesn't
detect any of the fonts
that are listed, it will
then display the text
as the default font face
which is usually Times
New Roman.
^^-Return
to Top-^^
Font
Styles
Now I will discuss some
ways to apply styles to
your fonts. The three
most used styles are Bold,
Italic and Underline.
Each of these has an opening
tag and a closing tag.
The tags for each of these
styles are:
| Bold |
<b>This
text is bold.</b> |
This
text is bold.
|
| Italic |
<i>This
text is italicized</i> |
This
text is italicized
|
| Underline |
<u>This
text is underlined</u> |
This
text is underlined
|
Some other styles that
are used but that are
less common are:
| Strikethrough |
<s>This
text has the style
of Strikethrough</s> |
This
text has the style
of Strikethrough
|
| Emphasis |
<em>This
text has the style
of Emphasis</em> |
This
text has the style
of Emphasis |
| Strong |
<strong>This
text has the style
of Strong</strong> |
This
text has the style
of Strong |
| Code |
<code>This
text has the style
of Code</code> |
This
text has the style
of Code |
| Citation |
<cite>This
text has the Citation
style</cite> |
This
text has the Citation
style |
^^-Return
to Top-^^
Font
Sizes
Next we will look at the
font sizes. To define
a font size you would
use the <font>
tag and the size
attribute. Here are a
few examples:
HTML Code
<font
size="2">This
font is set to size
2</font>
Result
This
font is set to size
2
HTML Code
<font
size="-2">This
font's size is -2</font>
Result
This
font's size is -2
HTML Code
<font
size="+1">This
font's size is +1</font>
Result
This
font's size is +1
There is also another
way to define the size
of your fonts but this
method is generally used
for headings to your pages
and paragraphs. The tag
used for this is the header
tag. There are six different
sizes to choose from:
<h1> - <h6>.
As with most tags, the
header tag also has a
closing tag. Below are
examples of the six different
headers.
| Heading
1 |
<h1>Heading
1</h1> |
Heading 1
|
| Heading
2 |
<h2>Heading
2</h2> |
Heading 2
|
| Heading
3 |
<h3>Heading
3</h3> |
Heading 3
|
| Heading
4 |
<h4>Heading
4</h4> |
Heading 4
|
| Heading
5 |
<h5>Heading
5</h5> |
Heading 5
|
| Heading
6 |
<h6>Heading
6</h6> |
Heading 6
|
^^-Return
to Top-^^
Font
Colors
We will now look at how
to apply different colors
to your text. To do this,
we will need to use the
<font> tag.
The color
attribute as well as a
color name or #RRGGBB
value will be what we
use within the <font>
tag to define our colors.
Below are a few examples
on how we would apply
a color to our text.
HTML Code
<font
color="teal">This
text is teal</font>
Result
This
text is teal
HTML Code
<font
color="#008080">This
text is also teal</font>
Result
This
text is also teal
^^-Return
to Top-^^
Notes
It should be noted that
you can use the face,
size
and color
attributes all at the same
time. You are also allowed
to have what are called
nested tags which are tags
within tags. For an example,
let's say that you want
your font to be Verdana,
size 2, maroon and bolded.
Here is what your code would
look like:
HTML Code
<font
face="Verdana"
size="2"
color="#990000"><b>This
text is Verdana that
is bold, white and has
a size of 2</b></font>
Result
This
text is Verdana that
is bold, maroon and
has a size of 2
|
