There are quite a few ways to change the appearance of the text in your
web pages, to make them more readable and appealing. You can use any
combination of the following text features: make the text larger or
smaller; Italicize, embolden, and underline text; use different font
faces; use superscripts and subscripts, as well as mark paragraph
boundaries. When you have text in an HTML document, it gets some
automatic formatting done to it. The white space and line breaks are
discarded, and the text is automatically spaced, it fills the available
space from left to right, and is automatically wrapped down to the next
line(s) as needed. If you have a block or section of text that
you want to preserve the white space and line breaks (such as a program
code listing), there is a neat, easy way to do that, as well.
Titles, Headers, and Text Size
Each page should have some kind of title, something nice and bold that
"jumps" right out at you, and announces to the world what your page
is all about. To make a Header or Title display in big characters, we
can do this a couple of ways. One way is to enclose the text within
<FONT SIZE=+3> and
</FONT> HTML tags. This instructs the
viewer's browser to display the enclosed characters three sizes larger
than the default font size. For users of IE 3.0
or Netscape 3.0 & later versions, their browsers support Header HTML
tags. You can enclose the text within <H1>
and </H1> HTML tags, which displays the
enclosed text in the predefined main header size. For example, the
title of this page is coded like this:
<font size=+2>The Basics of Formatting
Text in Webpages</font>
If you were to use <FONT SIZE=+1>, the
text would be one size larger than the default size. If you used
<FONT SIZE=-2>, the text would be 2
sizes smaller than the default. Let's give that a try:
Here's some <font size=-2>
smaller</font> text.
When using header tags, the number range available is 1 to 6. Text
enclosed in a <H1> will display the
largest, with each number from 2 to 6 displaying successively smaller.
Both of these HTML tags, once invoked, are in force until they are
closed with the corresponding "/" tag.
Titles, Headers, and Font Size Tips:
- It is a matter of personal choice as to whether you want
to use Header or Font Size HTML tags. Bear in mind, however, that
there still are users out there with older versions of browsers, that
do not support header tags. Their browser will just ignore them, and
anything in header tags will display in the default font size.
- You can use these HTML tags anywhere in your document - not just for
a title or paragraph header, even though that is what they are usually
used for.
- If you use a header tag within a sentence, it will also put in a
line break. The "Font Size" tag will let you combine text of
differing sizes on the same sentence line. Look at this example:
Here I use a <H2>HTML
</H2>
tag in the middle of a line.
Notice how the line was broken up, and how there's a space above and
below the word "HTML"? Now, I'm going to do the same thing
using the "Font Size" tag:
A <FONT SIZE=+2>HTML</FONT>
tag in the middle of a line.
Paragraphs
It helps a lot to break up the contents of your page into groups or
paragraphs, if you have more than a few lines of text. To mark the
beginning and end of a paragraph, enclose the paragraph in
<P> and </P>
HTML tags. You can use these tags to make "paragraph" breaks for
graphic images, tables, and links, as well as blocks of text, too.
The paragraph tag is very useful and versatile!
Paragraph Tips:
- Treat your webpage just like you would any type of formal document that
you would be distributing for others to read. Proper grammer, spelling,
and organized ordering of your text will help make your page a success!
- You do not have to use the ending </P>
tag to mark the end of a paragraph if you do not want to. If you begin
each paragraph block with the <P>, it
is sufficient to insert the paragraph break.
Line Breaks
Normally, when you have a sizeable block of text, you can just type it in
the HTML file, and let the user's browser handle filling in the space,
adding the proper word spacing, and wrapping the text down however many
lines are needed. Sometimes, however, you want to have a line break
inserted into a particular spot, without a total paragraph break.
This is where we use the <BR> HTML tag.
Here's an example:
Start a new line here.<BR>
Like the paragraph tag, you can use these tags to start a new line before
or after graphic images, tables, and links, as well as text.
Line Break Tips:
- If you want to add just a single line break, use the
<BR> tag. If you want to add a line break
and a blank dividing line, use the <P> tag.
- He who throws mud, loses ground!
Using Preformatted Text
Usually, you will want to let the viewer's browser handle the basic
formatting of your text. That way, the text will fill the available space,
no matter what browser window size or screen resolution they are running.
To see an example of what I mean, grab the right border of your browser's
window, and drag it in to the left a bit. You will see that your browser
will re-arrange this text, so that it fills the space again. But, there are
times where you want to "force" your own series of spaces and line breaks,
such as if you are displaying program or html source code, or a table, for
example. You could laboriously put multiple <BR>
tags in. Or, you could enclose the section of text with
<PRE> and </PRE>
HTML tags. These tags tell the viewer's browser to preserve all
of the spaces, positioning, and line breaks of the text as it is entered.
But why just talk about it? Let's look at an example:
<PRE>
<applet code=rect_marquee.class width=630 height=500>
<param name=message value="Javajavajavajava...">
<param name=font value=Helvetica>
<param name=point_size value=30>
<param name=delay value=20>
</applet>
</PRE>
What you were just looking at was a bit of Javascript code, to run a Java
applet. I used it as an example of how the <PRE>
and </PRE> tags preserve all the
spaces, positioning, and line breaks, just the way the lines were coded into
the HTML document. Otherwise, the exact same Javascript code would look
like this:
<applet code=rect_marquee.class width=630 height=500>
<param name=message value="Javajavajavajava...">
<param name=font value=Helvetica>
<param name=point_size value=30>
<param name=delay value=20>
</applet>
Pre-formatted Text Tips:
- The <PRE> tag must be paired with an ending
</PRE> tag, or all the remaining text will be
affected to the end of your HTML document.
- Always drink upstream from the herd.
Bold Text
For additional emphasis, you can make a character, word, or even a whole
sentence bold. The characters will be the same size, but the stroke weight
will be heavier. To accomplish this, we use the <B>
and </B> HTML tags. This is so easy,
let's just jump right into an example with wild, gleeful abandon:
Let's make a <B>bold</B> statement.
Naw, this isn't really getting any easier - you're just getting good at
it, that's all!
Bold Text Tips:
- As with other things like color and font size, too much is....too much!
The more sparing your use of this feature, the more your bold sections will really
stand out.
- To totally invalidate the previous statement, I have (in the past) had to make
all of the text bold on a particular document, to make it more visible against the
background. So, feel free to be creative, if you feel the need. After all, they
are your webpages!
- Bold can be combined with other attributes such as underlining,
strike-thru, and italics. So, a
<B> tag is in effect until a
</B> tag is encountered. This is an easy mistake
to make, but it is also a very easy mistake to spot and fix, as well.
Italicized Text
Well, since I went and jumped the gun above, I might as well go ahead and show
you all about Italics. Italics are useful for distinguishing proper names,
publication titles, or even a different flavor of emphasis. They are also very
useful for people who like to read with their head tilted at an angle. Let's make
some italics:
This is getting <I>fun</I>!
Come on, admit it - you're enjoying learning HTML.
Italics Text Tips:
- Like "bold", a <I> tag is in effect until a
</I> tag is encountered.
- Follow your dreams...except the one where you're at work during a fire drill
wearing only your underwear.
Underlined Text
We can also underline text, for added emphasis. Also, if you're trying to
make a webpage look like a paper form, underlined text can be handy there, as well.
You can underline a character, word, or whole sentences. When you underline a
group of two or more words, the spaces in between the words are all underlined as
well. We've spent enough time together, by now you KNOW I'm going to give you an
example:
This is <U>how we underline</U>
stuff.
You know, I can't help but wonder if you can have both underlining
and strikethrough active at the same time.
See? You just never know until you try....
Underlined Text Tips:
- "Underline" works like "bold" and "Italic"; a <U>
tag is in effect until a </U> tag is encountered.
Superscript and Subscript Text
Now here's a couple of things that I have every confidence that you will properly use
to their fullest ability - the Superscript and Subscript text
options. Let me introduce the <SUP>,
</SUP>, <SUB>, and
<SUP> HTML tag pairs. These are often used for chemical
formulas, like CO2 or H2O. But, I'd rather do Fun
Things Like This. That's much more
entertaining! And yes, don't worry, I'm going to show you exactly how I did that:
...do <SUP>F</SUP>u<SUB>n
T</SUB>h<SUP>in</SUP>g<SUB>s
L</SUB>i<SUP>ke</SUP> T<SUB>
hi</SUB>s.
Superscript and Subscript Text Tips:
- "Superscript" and "Subscript" work like "bold", "Italic", "Underline", and
"Strike-Thru"; the <SUP> and
<SUB> tags are in effect until a
</SUP> or </SUB>
tag is encountered, respectively.
Text Font Face Selection
Using different font styles in your web pages is a tricky issue. To select a specific
font, we use the <FONT FACE=> and
</FONT> HTML tag pairs. After the "=" sign, you simply
put in the name of the font you desire to use. But, there is a catch; since the browser
is doing all the work on the viewer's computer, the font file must exist on the viewer's
computer, as well. If the font file isn't on their computer, the browser will ignore
the font face selection, and display the text in the default font, which is defined
within the viewer's browser preferences. Let's play around a bit with a couple of
standard fonts (I hope they're on your computer!):
<FONT FACE="ARIAL">This is the Arial font.
</FONT>
<FONT FACE="COURIER">This is the Courier font.
</FONT>
<FONT FACE="Times New Roman">
This is the Times New Roman font.</FONT>
<FONT FACE="HELVETICA">This is the Helvetica font.
</FONT>
<FONT FACE="WINGDINGS">This is the Wingdings font.
</FONT>
Wingdings, you ask? Hey, it just doesn't get any better than that!
Text Font Face Selection Tips:
- You can specify a comma-delimited list of fonts. The browser will try to load the
first font, then move on to the second, then the third, and so forth, if it is unable
to load the current one in the list. It would look like this:
<FONT FACE="Ariel,Courier,Helvetica,Sans-Serif">
- The font names are case-insensitive, but must be spelled and punctuated correctly.
- Remember, any <FONT> tag is in effect until the next
<FONT> or </FONT> tag is
encountered!
Get your own free page!