Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 6: More Text Formatting with HTML

 

 

Objectives:

This chapter introduces more tags which are used to vary the appearance of web documents. The objectives important to this chapter are:

  • logical tags
  • physical tags
  • alignment tags
  • using miscellaneous tags
Concepts:

Logical tags in HTML modify the presentation of text without specifying the exact appearance desired. Some are:

  • <em> - this applies EMPHASIS to the text, which may be bold, but may not: it depends on the browser
  • <strong> - this applies STRONG emphasis to the text, which may be different from EMPHASIS
  • <kbd> - this is meant to show text the user is to type from the keyboard, usually in Courier, monospaced font
  • <code> - this is an example of code that goes into a program or a page, and it might be Courier as well
The browser being used must understand logical tags for these tags to have effect. The page creator does not have any control as to how such text will actually appear.

Physical tags specify the appearance of text that they modify. Some web page authorities do not like them, since they cannot be used by browsers that cannot show text in the manner specified. Other developers like them for the control they give the web page creator. I will use some in the following list, and you can tell me if your browser supports them. Some frequently used ones are:

  • <b> - this applies boldface to the text
  • <i> - this applies Italics to the text
  • <u> - this is meant to show Underlined text
  • <s> - this is meant to show Strikethrough text
  • <big> - this is meant to show larger text than the surrounding text
  • <small> - this is meant to show smaller text than the surrounding text
  • <sup> - this is meant to show superscripts, as are used in equations: e=mc2
  • <sub> - this is meant to show subscripts, as are used in chemical formulas: H2O
Each of the physical tags and the logical tags must be paired with its appropriate closing tag.

Since we are on the subject, remember that tags are mostly used in pairs. If you open a tag, you should close it, too. Also, if you nest your tags, say for Bold and Italic, you should close them in the reverse order of opening them. For instance:

<B><I>This is the text.</I></B>

This format is correct. I closed the Italic tag first, because I opened it second. This is how you nest tags.

Another useful physical control is the Preformatted tag: <PRE>. It means to retain the spaces, tabs and line returns in the original source document. This may not seem like much until you realize that the browser throws away extra white space when it formats text. It is much easier to make a quick chart or table if you use Preformatted text.

Most pages you view have Horizontal Lines on them made with the <HR> tag. This tag originally needed no closing tag. In XHTML, it will be written differently and considered self closing: <HR /> It is usually placed on a line by itself in the source page, indicating the place you want a line drawn. There are several extensions to the <HR> tag in HTML 3.2, which are not supported by all browsers. If you want to use them, they are options inside the angle brackets like this:

  • <hr width="50%" /> - meant to draw a line half the available width of your screen. In my browser, this one comes out centered by default. Here's a try:
  • <hr size="10" /> - meant to draw a line five times as thick as a normal one
  • <hr width="50%" align="right" /> - meant to draw a line half the available width of your screen, and right-aligned in the space. It would be silly, of course, to align without varying the width.
  • <hr noshade /> - meant to draw a black line
Of course, you can combine these options.

The command I have used a lot in this page to make sure that text breaks to a new line is the <BR> tag, called the Line Break tag. It is useful whenever you need to start a new line. It, too, is adapted for XHTML. The new form is <BR />

The Address tag, <ADDRESS> tag, is used to allow search engines to find address information on your pages. It is a convention that pages should have such a tag in order for the author to be easily found. The information you put in such a tagged section may be your e-mail address, your land mail address, your phone number, or whatever you choose.

It is worth mentioning, for those who may want to write scholarly or formal documents in HTML, that there are formal tags for quotations. The <BLOCKQUOTE> tag and its partner should be used to enclose quoted material from other sources. I would use it if I were to type a whole paragraph from the textbook here, verbatim, instead of paraphrasing and explaining.

Some characters cannot be easily displayed in HTML documents. For instance, how am I showing you tags on this document? A tag is a command that is obeyed, not displayed. So, in order to type something on a web page that looks like a tag, I have to use special characters to stand for the angle brackets. The tags are:

  • &lt; - for the less than sign
  • &gt; - for the greater than sign
Which begs the question, if that's how you get the browser to display an angle bracket, what did you type to get it to show us the code itself? Well, you can type &amp; to get the browser to show you an ampersand. This is a little tricky, and should be practiced before putting it in a web site.

Aligning text is not an exact science yet. Your best bet is to put text that must be centered, right aligned, or left aligned inside a Heading tag. The Heading tags allow us to use the ALIGN option to specify the three kinds of alignment.

Fonts can be modified easily since HTML 3.2, first by using the <BIG> and <SMALL> tags already mentioned. Also, you can use the <FONT> tag with the SIZE= option in two ways. Setting the SIZE value to a number from 1 to 7 will be understood by the browser as an increase or decrease from the default relative size of 3. This means that the text the browser will display by default is considered to be size 3. Sizes 1 and 2 are smaller than the default, sizes 4, 5, 6, and 7 are larger. You can also set the option with a plus or minus and a number, such as +2, which would mean two levels larger than the surrounding text, which might be different from two levels larger than the default text. After all, the surrounding text might already have been modified.

A special change for the List format tags is to change the dingbat used by the Unordered lists. To do so you can use any of these:

  • <UL TYPE="DISC"> - makes solid bullets
  • <UL TYPE="CIRCLE"> - makes hollow bullets
  • <UL TYPE="SQUARE"> - makes hollow squares

Finally, you can vary the "bullet" for the Ordered lists by setting the type to be any of these:

  • <OL TYPE="1"> - that's a one, not a letter; uses Arabic numerals
  • <OL TYPE="A"> - uses Capital letters
  • <OL TYPE="a"> - uses lower case letters
  • <OL TYPE="I"> - uses Capital Roman numerals
  • <OL TYPE="i"> - uses lower case Roman numerals
These changes are great for outlines or other nested lists. In these examples, note that the capitalization of the English letters and Roman numerals inside the quotes matters. The case of the letter or Roman numeral sets the appearance of the actual list.

Laura discusses the use of the <blink> tag, advising you not to use it. I agree, and suggest that readers will not appreciate blinking or look at your page long if it contains blinking text.