LESSON
FOUR - TAGS THAT AFFECT THE APPEARANCE OF YOUR TEXT
You may read the
following sections in their entirety
or use
these choices to go directly to a section.
DESIGNING YOUR WEB
PAGES
Just how should you design your web pages? Well, you
should not design your pages only for appearance. You also need to
design your pages for content. For example, you could add color
to certain portions of text or you can highlight certain words
with color to make them stand out. In your browser, it may look
great. However, many people still use browsers that do not support
coloring portions of text. So while it looks great in your browser,
it will not give the same looks in other browsers, and text that
you thought were highlighted by color will not be highlighted in these other
browsers. Color is used to change the appearance of text.
If a browser can't perform the appearance change, it has no way to
determine an alternative. As a result the color attribute is simply ignored.
Also, you may be able to fit a heading neatly on one line
in your browser while in another browser, the font size
could be a little bigger and the heading will not fit on one line.
Or the reverse could be true, a heading may not fit on one line
in your browser, but in another browser with a little smaller font
size, it will fit into one line.
Thus the appearance of the heading in your browser could be different
in another browser. Also keep in mind
that some browsers and servers do not support graphics. A user
also has the option of turning off graphics to speed up the
loading of web pages. Of course we still want our web pages to be
pleasing to
the eye but we need to keep in mind that how something looks in
one browser could look entirely different in another browser. One
person told me how surprised she was to see her web pages look so
differently in another browser. She now designs her pages with this
in mind.
Consider this example: Suppose you want to have something printed by
the browser in italics to set it apart from the rest of the text.
Using the italics tag, you could tell the browser to "print these
words in italics".
But what if someone's browser does not support the italics tag? The
browser will simply not be able to perform the requested "appearance"
change and the tag will be ignored. The italics tag was originally a
Netscape extension tag that was not recognized by a number of
other browsers. Instead, it would be better to tell
the browser to "emphasize" the text through the "emphasis tag". In most
browsers, this would be italics but it could also be rendered as
something else. In any event, the text will be emphasized in some manner.
The same is true for bolding text. If you tell the browser to bold a portion
of text to make it stand out from the rest of the text, you are assuming
the browser will recognize the "boldface" tag. The boldface tag was also
originally a
Netscape extension tag and so not recognized by a number of
browsers. Instead, it would be better to tell the browser to
"strongly emphasize" the text. In most browsers this will be boldface,
but it could also be something else. Now with the passing of time, browsers
today do support the italics and bolding tags but there are still a number of
other tags supported by some browsers and not by others. That is, there are
still a number of tags out there that are browser specific. That is why you
sometimes see a statement such as "This web page is best viewed in Internet
Explorer."
The "emphasis" and "strong emphasis" tags are
"content based" markup tags
and the above examples illustrate why
you should use "content based" markup tags to mark up your text.
Content based markup allows
for browser independence. Knowing the meaning of a piece of text through a
content based tag allows a browser to pick the best way possible to
display the text on the platform it is running. Tags that are based
on content and not on appearance are called LOGICAL TAGS.
You are encouraged to use logical tags because the browser can then pick
the best way to display the text on the screen.
If all this sounds too confusing, don't quit on me. Just follow through
on the following
examples involving logical tags. It should all become clear. Then I would
suggest you come back
and read again this introduction on "Designing Your Web Pages".
| top | | bottom |
HEADER TAGS
Headings are controlled by HEADER tags. HEADER tags are logical tags
and used extensively in HTML documents to display
headings. HEADER tags not only make your headings
larger (or smaller), they also bold the headings at the same time.
There are only six HEADER tags and they range from H1 to H6.
H1 produces the largest size heading and
is called the "level 1 heading".
H6 produces the smallest size heading
and is called the "level 6 heading".
To compare the different levels of headings, SWITCH to NOTEPAD and
type in the following HTML document (this will also allow you to
experiment with the document):
- <HTML>
- <HEAD>
- <TITLE>HEADING LEVELS</TITLE>
- </HEAD>
<BODY>
<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.
<H2>THIS IS H2.</H2> THIS IS NORMAL SIZE.
<H3>THIS IS H3.</H3> THIS IS NORMAL SIZE.
<H4>THIS IS H4.</H4> THIS IS NORMAL SIZE.
<H5>THIS IS H5.</H5> THIS IS NORMAL SIZE.
<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR>
</BODY>
</HTML>
Now SWITCH to your browser and load the document. This is
what you should see in the browser window:
THIS IS H1.
THIS IS NORMAL SIZE.
THIS IS H2.
THIS IS NORMAL SIZE.
THIS IS H3.
THIS IS NORMAL SIZE.
THIS IS H4.
THIS IS NORMAL SIZE.
THIS IS H5.
THIS IS NORMAL SIZE.
THIS IS H6.
THIS IS NORMAL SIZE.
Note the following points:
- <H1> gives the largest size heading while <H6> gives the
smallest size heading.
- In most browsers, the HEADER tags print the headings in boldface.
A Level 1 heading (H1), because it is the largest heading, is considered
to be the most prominent or most important heading. The Level 2 heading (H2)
is the second most important heading. That is, it is more prominent
than a Level 3 heading (H3) but less prominent than a Level 1 heading.
- Good HTML form dictates that HEADER tags should be used in hierarchical order.
Don't jump all over the place with your heading levels. For example, if
you use a
Level 2 heading for a title or heading, then the next size to use
for a sub-title would be a level 3 heading.
Study the above HTML document again and answer the
following problems. The answers are given at the end of this lesson.
Problem 1: Which heading size is closest to the normal size?
Problem 2: Compare the document file with the results in
your browser. Something does not seem to add up. From
what you have learned so far in these lessons, state some of the
inconsistencies. These will be fully explained in the answer
section.
Final remarks on the HEADER tags:
- After all that has been said here about the header tags, keep in mind that
they are logical tags. This means that you cannot
assume, for example, that H1
means "very large bold text" in every browser. It will in
most browsers - but you can't assume true in all browsers. It can be
anything the browser chooses it to be - which could be defined by the
viewer.
- Some search engines give words appearing in headers more
importance in their index. The headers are often used by these search
engines to build an "outline" of the document which appears in the
search results.
| top | | bottom |
CENTERING TEXT
You can see from my lessons that I make good use of centering headings
and titles. The center command is:
ALIGN="CENTER" (no spaces around the equal sign) and must be used
in conjunction with a HEADER tag or the PARAGRAPH tag as in:
<H2 ALIGN="CENTER">a heading goes here</H2>
or
<P ALIGN="CENTER">a paragraph or block of text goes here</P>
Here are some points to remember concerning these two centering
commands.
- In the first example, a "heading" is centered (as indicated by the H2),
and remember that because we are using a
Header tag, a blank line will automatically be inserted
before and after the heading. For this section, my heading "CENTERING
TEXT" was centered using the H3 Header tag.
- The second example is
used to center whole portions of text - which could be several
lines of text.
In other words, we are centering a "paragraph"
or "block of text" with each line centered on the screen
just as these lines are centered (hopefully).
To end centering a block of text,
we use the </P> tag which is the closing paragraph tag.
This </P> tag is a new tag for us
and one that you may not end up using all that often.
But it does have its uses and this is one of them.
Choose DOCUMENT SOURCE from the VIEW menu
if you want to see how I centered these lines.
- In ALIGN="CENTER", the ALIGN part is called an attribute. In the first
example, ALIGN is the attribute for the Header tag. In the second
example, ALIGN is the attribute for the Paragraph tag. An attribute
provides extra information about the tag and the text it encloses.
An attribute can have a value. In our two examples,
the ALIGN attribute
has the value "CENTER". In the first example,
the browser is told to place (align) the heading
in the "center" of the line. If a viewer should make the browser screen
smaller, the heading will still remain centered in whatever the new screen
size is. In the next example, a heading will be centered. When you do
the example, be sure to try also ALIGN="RIGHT"
and ALIGN="LEFT" (which is the default
value if the ALIGN attribute is not used).
- The value must be enclosed in quotation marks
if it contains anything more than letters, numbers, hyphens and/or
periods. Otherwise placing the quotes around the value is optional.
Since our two examples have only letters in the value ("CENTER"), the
quotes may be
omitted. If you are ever in doubt about the quotes, then just put
them in. Of course the attribute and value do not have to be written
in upper case (capital) letters either. They may be written in lower
case. The maximum length of an attribute and its value is 1024
characters including the quotation marks if used.
- ALIGN="CENTER" is also called a "command within a command". The first command
(ALIGN), tells the browser to align something and the second command
(CENTER) tells the browser to align it in the center.
- Sometimes you will see documents use only the CENTER command
(no ALIGN="CENTER") to center
text as in:
<CENTER>
.
.
all lines or blocks of text will be
centered between these two tags
.
.
</CENTER>
<CENTER> was one of the first Netscape extension tags and, as was
the case with many of Netscape extension tags, not supported by a number
of browsers at the time. ALIGN="CENTER" is an official part of HTML 3.2 and accepted by
all browsers. You are therefore encouraged to use ALIGN="CENTER" for centering headings and paragraphs
of text. If a browser does not support the CENTER tag, the headings and text
will simply be left justified. We will be using the ALIGN="CENTER"
command in the next example.
| top | | bottom |
EMPHASIZING TEXT
There are two ways to emphasize text that I want to introduce here. These
were alluded to at the beginning of this lesson under "Designing Your
Web Pages". One is called ITALICS and the other is
called BOLDFACE. Let's
study both of them with the following example, which will also
include the centering of the heading.
Please SWITCH to NOTEPAD and type in the following HTML
document:
<HTML>
<HEAD>
<TITLE>OUTDOOR LIVING - ONTARIO</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">OUTDOOR LIVING IN ONTARIO</H2>
<H3>POINTS OF INTEREST</H3><HR>
<P>Northern Ontario:
<P><STRONG>Five Mile Lake Provincial Park</STRONG>
<P><EM>1.5 square miles.</EM> Camping, fishing
(<EM>walleye, northern pike, brook trout</EM>),
canoeing, self-guided nature trails.
<P><STRONG><EM>Recommended</EM></STRONG>
<HR>
</BODY></HTML>
Now load the document into your browser and your web page should look
like the following:
OUTDOOR LIVING IN ONTARIO
POINTS OF INTEREST
Northern Ontario:
Five Mile Lake Provincial Park
1.5 square miles. Camping, fishing (walleye,
northern pike, brook trout), canoeing, self-guided nature
trails.
Recommended
Here are some questions for you to answer on the above example followed
by a discussion on the emphasis tags.
Problem 3: Which tag appears to "bold" text?
Problem 4: Which tag tells the browser to write the text in
italics?
Problem 5: How was the word "Recommended" printed?
Problem 6: Why is there no <BR> tag at the end of the
line "OUTDOOR LIVING IN ONTARIO" or a <P> in front of the
line "POINTS OF INTEREST" of the document you typed in?
<EM> = EMPHASIZE TEXT
<EM> is used to emphasize text. It is a logical tag and so describes the
meaning of the text to be displayed rather than how the text is to be
displayed. In most browsers, the meaning is italics. However, if the browser
doesn't support italics or the viewer changes the meaning, the browser
will pick the best alternative way to display the text on the screen.
<STRONG> = STRONGLY EMPHASIZE TEXT
<STRONG> is also a logical tag. It is used to strongly emphasize text.
<STRONG> is distinct from <EM>. In most browsers, STRONG is
identical to boldface. If a browser does not recognize boldface or if
the viewer changes the meaning of STRONG, then the browser will pick the
best alternative from the platform it is running on.
Using <B> for Boldface or
<I> for Italics (Original Netscape Extension
Tags)
<STRONG> is accepted by all browsers as a way of strongly
emphasizing text which in most cases is boldface.
Instead of the <STRONG> and </STRONG> tags for
strongly emphasizing
text, you will sometimes see <B> and </B> for bolding
text. While <STRONG> is a "Logical Style Command",
<B> is not. <B> is a "Physical Style Command". A physical
style command cannot be rendered differently.
Therefore if a browser does not accept the <B> tag, then
your text will simply not be bolded as the browser has no alternative
way to display them on the screen.
The same reasoning is also be applied for using the tag
<I> to print in italics instead of the
<EM> tag. Now if for some reason you want to ensure
only italics or boldface and nothing else, then use the italic font
<I> or the boldface font <B>.
Here is your final problem to see how well you learned the
information given in this lesson.
Problem 7: Make up an HTML document in NOTEPAD that gives the
following web page in the browser. In other words, when you are
finished, your browser should show exactly the following
(the answer is given in the answer section):
TOSSED SALAD
Simple and attractive
1 large bunch of greens, preferably mixed
10 cherry tomatoes quartered
DRESSING
1/2 cup Mayonnaise
2 tbsp. Minced dill or sweet pickle
1 tsp. Prepared mustard
1/4 tsp. Onion powder
1 tsp. Granulated sugar
1 tbsp. Milk
Have greens ready in separate containers in refrigerator.
Dressing: Combine all ingredients together in
a small bowl. Mix well. Spoon over greens. Toss to coat. Add
tomato and toss together lightly. Serves 8
| top | | bottom |
ANSWERS
- <H4> appears to be closest to the normal size (at least in my
browser).
- First of all, if you look at the lines you typed in between the
<BODY> and </BODY> tags, you did not type in any
<BR> or <P> commands. For example, we did not type in
a <BR> tag between "THIS IS H1" and "THIS IS NORMAL". Yet
they were printed by the browser on separate lines. They should have
been printed on the same line.
Also, there is no <BR> tag at the end of any line and so
everything should have been printed by the browser on one long
line. Well, the reason for
all this is that HEADER tags (such as <H2>) are very fussy. They don't want
anything else on the same line with them. That is why "THIS IS
NORMAL SIZE" was printed on a separate line. Also, the HEADER tags
are not very sociable. They like to be separated from the rest
of the crowd and so a HEADER tag
will automatically place a blank or empty line above and below the heading.
That is why you also see a blank line above and below each heading
tag. For this reason, you do not need <BR> and <P>
tags with HEADER tags. Of course, if you want additional blank
lines before or after a HEADER tag, you will then need to use
<BR> or <P> tags.
- <STRONG>. Notice that the tag </STRONG> ends the
"bolding" of text.
- <EM> (which stands for EMphasize). Again,
</EM> is needed to end italics.
- It was printed in both boldface and italics.
- We do not need <BR> or <P> tags because the line
"Outdoor Living In Ontario" is a heading (H2) and a Header tag
provides its own line break and blank lines above and below the heading.
A new paragraph is always assumed to begin after a Header tag.
- <HTML>
<HEAD>
<TITLE>SALAD RECIPE</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">TOSSED SALAD</H2>
<H3 ALIGN="CENTER"><EM>Simple and
attractive</EM></H3><HR>
<P>1 large bunch of greens, preferably mixed<BR>
10 cherry tomatoes quartered
<P><STRONG>DRESSING</STRONG><BR>
1/2 cup Mayonnaise<BR>
2 tbsp. Minced dill or sweet pickle<BR>
1 tsp. Prepared mustard<BR>
1/4 tsp. Onion powder<BR>
1 tsp. Granulated sugar<BR>
1 tbsp. Milk
<P><EM>Have greens ready in separate containers
in refrigerator.</EM>
<P><STRONG>Dressing:</STRONG> Combine all
ingredients together in
a small bowl. Mix well. Spoon over greens. Toss to coat. Add
tomato and toss together lightly. <EM>Serves
8</EM>
</BODY></HTML>
The information contained in these free 21 lessons is Copyright ©, Brantford
Educational Services, 1997 - 2009 by local and international copyright laws.
All rights reserved. It is therefore illegal to copy these lessons into
another website. If you find a copyright violation, please report
it to htmltutorials@bfree.on.ca