Text Styles
The HTML 4.0 standard offers numerous
ways to provide typographic subtlety within
Web pages. These include typeface, color, emphasis,
and size control. These styles might draw the
eye to important points, provide contrast between
primary and secondary ideas, or add context
cues.
Text styles
allow Web page authors to design flexible
typography for their pages. Whether the author
is looking for casual or formal presentations,
or loose or tight style specifications, HTML
tags permit a wide range of text expression
including whimsy. For example,
Send MonEy or The cAt
Dies
Note:
There is a lot of controversy over using the
<FONT> tag when creating Web pages.
There are many things to keep in mind. The article
"What's Wrong With Font?" found on the
Web at www.mcsr.olemiss.edu/%7Emudws/font.html
puts using the <FONT> tag and its attributes into perspective. In addition
to the restrictions to using the <FONT> tag, it has been depreciated in the current HTML 4.0
version.
Font Styles
The
font tag controls text style. The text can
be controlled by the <FONT>
and </FONT>
tags. These tags are containers and must surround
the text affected. Three attributes, SIZE,
FACE,
and COLOR,
specify how the text is presented. For example:
<BASEFONT SIZE=4>
The font tag controls text styles.
<FONT SIZE=-3>This text is very small.</FONT> while
<FONT SIZE=+2>this text is quite big.</FONT>
<FONT FACE="Courier">This text is in the Courier font face</FONT> and
<FONT COLOR="BLUE">this text displays in blue.</FONT>
produces
this formatted text:
The font tag controls text styles.
This text is very small
while this text is quite big.
This text is in the Courier font face and this
text displays in blue.
Text size varies between one and seven.
Size one is very small. Size seven is very large.
You can set the standard font size in your Web
page with the basefont tag. Place this tag near
the top of your HTML documents before the text
of your Web page.
Note:
It is not necessary
to use the <BASEFONT SIZE=4> tag. If the <BASEFONT SIZE=4> tag is not used, the Web browser will default
to the text setting in the user's browser.
The most common type size for Web pages
is three: <BASEFONT SIZE=3>, the default size for most Web browsers.
Human studies show that
a slightly larger font reduces information
density and provides a more readable document.
There are few things harder to read than a
densely written small-type Web page.
The size attribute is relative. The
SIZE
attribute is often prefixed with a plus or
minus sign. This value relates to the basefont.
For example, SIZE=-2
requests a font size two steps smaller than
the basefont.
<BASEFONT SIZE=4>
<FONT SIZE=+1>
This is written in a font one size larger than the basefont. <P>
</FONT>
This is written in the default-sized font. <P>
<FONT SIZE=-1>
This is written in a font one size smaller.
</FONT>
produces this formatted text:
This is written in a font
one size larger than the basefont.
This is written in the default-sized font.
This is written in a font
one size smaller.
The face attribute sets the typeface.
Although you can set the typeface to any valid
face on your computer, in practical use there
are but two faces more or less guaranteed
to exist on every machine which accesses your
pages. These two are "Courier",
a fixed-width typewriter style font; and "Times",
the standard serif-faced proportional font.
<FONT FACE="Courier">This is the Courier Font</FONT><P>
<FONT FACE="Times">This is
the Times Font</FONT>
produces this formatted
text:
This is the
Courier Font
This is the
Times Font
Specify alternate font faces by adding comma-separated
font names. In this tag,
<FONT FACE="Helvetica,Lucida Sans,Arial">,
Lucida Sans is selected when Helvetica is
not available and Arial when both Helvetica
and Lucida Sans are not supported. When no
matching font can be found or, in the case
of certain PC-based Netscape Navigator versions,
when face attributes are not fully supported,
the browser will display the default font.
Certain colors can be specified by name.
The case-insensitive color names and their
RGB values are as follows:
| Color Name |
| Black |
#000000 |
| Silver |
#C0C0C0 |
| Gray |
#808080 |
| White |
#FFFFFF |
| Maroon |
#800000 |
| Red |
#FF0000 |
| Purple |
#800080 |
| Fuchsia |
#FF00FF |
| Green |
#008000 |
| Lime |
#00FF00 |
| Olive |
#808000 |
| Yellow |
#FFFF00 |
| Navy |
#000080 |
| Blue |
#0000FF |
| Teal |
#008080 |
| Aqua |
#00FFFF |
For example:
<FONT COLOR="RED">This is written in red.</FONT><P>
<FONT COLOR="GREEN">This is written in green.</FONT><P>
<FONT COLOR="BLUE">This is written in blue.</FONT>
produces this formatted text:
This is written in red.
This is written
in green.
This is written
in blue.
Exercise
2.1
In this exercise you will create paragraphs
of text changing the font elements using the
<FONT> tag and its attributes.
To change the font size,
face and color:
- Create a new HTML document
in your text editor by clicking File, New
from the menu bar.
- Begin Typing:
<HTML>
<TITLE>Lesson 2.1</TITLE>
<BODY>
<BASEFONT
SIZE=5>
<P>
<FONT SIZE=1 FACE=Arial COLOR=RED>
The text in this paragraph is size 1,
font face Arial, and the color red.
</FONT>
</P>
<P>
<FONT SIZE=2 FACE=Verdana COLOR=BLUE>
The text in this paragraph is size 2,
font face Verdana, and the color blue.
</FONT>
</P>
<P>
The text in this paragraph will default
back to the basefont of size 5 that is
pre-set at the beginning of this HTML
document.
</P>
</BODY>
</HTML>
- Save and name the file
L2.htm.
- Click the Reload or Refresh
button in the Web browser to view the changes.
,
***
Format
Styles
Bold, italic, and underline styles have
special tags. These three styles, bold,
italic and underline, date from HTML's inception.
As a consequence, they have special opening
and closing tags and are not (yet) combined
into the font tag. The underline tag, by the
way, was an standard "rogue" tag not well
supported by many browsers. HTML 3.2 reintroduced
it into the standard. These tags <B>,
<I>,
<U>,
</B>,
</I>,
and </U>
are used like this:
<B>This</B> is written in boldface while
<I>this</I> is written in italics and
<U>this</U> is underlined.
which produces this formatted
text:
This
is written in boldface while this is
written in italics and this is underlined.
Boldface draws the eye to important points.
Italics are often used for attributions and
single-word emphasis. Underlines, traditionally
a shorthand for italics, are used to bypass
the harder-to-read italics and for book titles.
Note:
The underline tag has been depreciated
in the HTML 4.0 standard in favor of style sheets.
Exercise 2.2
In this exercise you will format text using
the <B>,
<I>,
<U>,
</B>,
</I>,
and </U>
tags.
To format text using
format tags:
- Position your cursor below
the last entry on the L3.htm file.
- Begin Typing:
<P>
Formatting text can emphasize on specific
words to relate style or meaning.
</P>
<P>
<B>This</B> is written in boldface
while <I>this</I> is written
in italics and <U>this</U> is
underlined.
</P>
- Save the changes to L2.htm.
- Click the Reload or Refresh
button in the Web browser to view the changes.
Summary
-
Use the font tag to set text size, face, and
color.
- Set
the default font size with the basefont tag
before your document text begins. The font
size may vary between one (small) and seven
(large).
- Use
relative sizes, such as +2 or -1, in the font
size attribute.
- Select
Courier or Times for your font face attribute.
- Set
the font color attribute with color names.
- Bold,
italic, and underline attributes cannot be
set with the font tag.
Test
Yourself
1. Which
of the following lines will display a different
result than the others?
<BASEFONT SIZE=4>
This is a line.<P>
<FONT SIZE=+4>This is a line.<P>
<FONT SIZE=+0>This is a line.<P>
<FONT SIZE=4>This is a line.<P>
2. If you use the font face Albertus
in your HTML document, what might happen:
-
If the font is available on your machine?
-
If the font is available on your reader's
machine?
-
If the font is not available on your machine?
-
If the font is not available on your reader's
machine?
3. Predict how the following HTML would display:
We are such stuff<FONT COLOR="BLUE" SIZE=2>
as dreams are made on
and our <FONT COLOR="RED">little
life is</FONT> rounded with</FONT>
a sleep.
|
