|
If all text looked
pretty much the same on web pages, it would get pretty boring
very quickly. Fortunately, you can modify text in all sorts of
different ways by using more tag pairs.
SOME
BASIC PAIRS:
- <b> </b>
= Enclosed text in boldface (Text)
- <i> </i>
= Enclosed text in italics (Text)
- <u> </u>
= Enclosed text is underlined (Text)
- <s> </s>
=Enclosed text is strike-through’ed (
Text)
Like other tags, these
can be nested. So <b><i><u>Text</u></i></b>
will appear in boldface italics, and will be underlined, as shown
below:
Text
Text can also be displayed
in various different sizes by using the “header” tags.
All header tags appear
in the format <Hx>Text </Hx>, where x is a number
from 1 to 6. The lower the “header” number, the larger
the text.
- <h1>Text</h1>
= Text
- <h2>Text</h2>
= Text
- <h3>Text</h3>
= Text
- <h4>Text</h4>
= Text
- <h5>Text</h5>
= Text
- <h6>Text</h6>
= Text
The problem with the Header tags (<H1> - <H6>) is
that the affect the entire LINE of text. You can’t change
font size in the same line of text with a Header tag. However,
there is a more advanced text formatting tag that allows you to
manipulate text in several different ways.
This tag
pair is <font> </font>. With this tag, you can manipulate
not only text size (including multiple size changes on the same
line), but also text color and even what font face the text is
displayed in!
The
<FONT> </FONT> Tag Pair
General Structure:
<font
size = {+/-} # COLOR = #(6-digit code or color name) FACE = “(Font
Name)”>
Any or all of these
attributes (Size, Color, and Face) can be set. If none are set,
the <FONT> tag will have no effect on the enclosed text.
SIZE: Can be
anything from 1 to 7, 7 being the largest (note that SIZE designation
is the REVERSE of the Header tags; in the Header tags, <H1>
is the largest!).
SIZE can also be given the values + (#) or - (#), which will increase
or decrease the size of the current font by the number after the
+ or - sign.
(Note:
The Default font size for normal HTML page text is 3.)
EXAMPLES:
<font size=4> Text </font> = Text
<font size=+2> Text </font> = Text
COLOR:
We'll be discussing changing colors in a couple pages, so we'll
skip that part for now.
FACE: This is
the actual name of the font. Examples, “Arial,” “Times
New Roman,” “Helvetica,” and so on. A page can
be made to display ANY True Type Font as a text font.
Unfortunately, if a
viewer does not have the particular True Type Font you designate
in a <FONT> tag installed on their computer, the text will
be displayed on their computer in the standard ("default")
font. Therefore, it’s always best to use common font faces
that almost every computer will have installed already (like Arial
and Times New Roman)
Let's try combining
a couple of the different <FONT> parameters in our web page.
Modify your web page code so it looks like the following:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
</body>
</html>
Taking a look at the
results, we see something that looks like this:
As an overall suggestion:
don’t go crazy changing font sizes, colors, and faces constantly…it’s
really annoying to the viewers. An occasional switch is nice to
add some variety, but don’t go overboard. For example:
Then
did those men in ancient times go forth
looks good. But
Then
did
those
men
in ancient times go
forth
does not. Always remember:
just because you can do it doesn’t necessarily
mean you should do it.
You may also notice
that, besides spaces and Tab stops, HTML does not recognize “carriage
returns” either.
Carriage returns can
be simulated in one of two ways in HTML :
<p> = The paragraph command. This command tells HTML that
you want to begin a new paragraph. The space separation between
lines is fairly high (equivalent hitting two or three carriage
return/line feeds.)
<br> = The line break command. Any time this command is
listed in the HTML code, it acts as a single carriage return and
line feed.
Text can also be aligned using a formatting tag pair. The
<center> </center> tag pair will horizontally center
the text inside the pair.
You can
also align text to the left, center, or right using the <div
align=left> </div> (or <div align=center> </div>
or <div align=right> </div>, as appropriate) tag pair.
Any modern browser will recognize any of these tag commands.
(
Note: <center> </center> = <div align=center>
</div>. The <center> </center> tag pair, while
it still works, is generally considered obsolete.)
Let's try modifying
our existing page a little more. Modify the code so it looks like
this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
<br>
<div align="right">This should be on the next
line and on the right side of the screen.</div>
<br>
<center>This should be centered text.</center>
<br>
<br>
<br>
<br>
<br>
<div align="center">So should this, but several
more lines down the page.</div>
</body>
</html>
Here's what the result
should look like:
Up next,
we'll be looking at how to split the page up using separators.
|
