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.

Return to Home Page | | Designing your Web page | | Header tags | | Centering text | | Emphasizing text |


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:

  1. <H1> gives the largest size heading while <H6> gives the smallest size heading.
  2. 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.
  3. 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.

Click here  to go to the answer section |

Final remarks on the HEADER tags:
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.

  1. 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.

  2. 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.

  3. 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).

  4. 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.

  5. 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.

  6. 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?

Click here  to go to the answer section |



<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

  1. <H4> appears to be closest to the normal size (at least in my browser).
  2. 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.
  3. <STRONG>. Notice that the tag </STRONG> ends the "bolding" of text.
  4. <EM> (which stands for EMphasize). Again, </EM> is needed to end italics.
  5. It was printed in both boldface and italics.
  6. 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.
  7. <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>


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Five |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 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 email