HTML Is Your Friend/ pg. 7

CHAPTER 5: TEXT FORMAT TAGS

I see that you have made it through four chapters so far; or maybe you're just one of those weirdos who doesn't read books in the right order (don't worry, I am one of those weirdos). In any case, you will learn about the numerous tags that regulate the style of the text on your webpage.

  1. Heading Text Tags
  2. Basic Text Tags
    1. Bold text
    2. Italic text
    3. Underlined text
    4. Teletype text
    5. Superscript
    6. Subscript
  3. The <font> tag
  4. Special Characters

Header Text Tags

Heading text tags are traditionally the first to be taught to budding new programmers. And who am I to deviate from tradition?
       Heading text tags follow the format of <hx> where the "x" stands for a number between one to six. When you employ a heading tag, the result on the webpage is text that is a given size and made bold, like so:

Headings - Microsoft Internet Explorer

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6

As you can see, <h1> is the largest heading, whilve <h6> is the smallest.

Quick Information: <h1-6>
Start Tag End Tag
Is it needed? required required
How it looks: <h1-6> </h1-6>
What it does This tag makes the text in the heading format. Remember that the tag is not <h1 - 6>, it's <h1> or other numbers.
Attributes:Name Values What it does
align= left
center
right
Aligns the heading text left, center, or right.


Basic Text Tags

There are several very simple, very basic tags used to format text, just as if you were using a word processor. There's a tag for italic, bold, superscript and subscript, and a few others. All of these tags are super basic. There are no attributes for any of these tags, so I won't be putting that field in the "Quick Information".
      I think that these tags will be self-explanatory. The bold tag, <b> makes text look bold. The italic tag <i> makes textitalic. The underline tag <u> makes text underlined. The teletype tag <tt> makes text teletype; basically, it looks like typewriter text. The superscript tag <sup> makes text superscripted. The subscript tag <sub> makes text subscripted.
      Although tese tags are simple, nesting becomes a slight annoyance. You can make text italic, bold, and underlined, and that's fine. But when you have to put the end tags in to stop the effect, there might be a potential non-intuitive question: "Does the order matter?" No, the order does not matter; just make sure you end the tags, or you'll get weird unexpected text! However, it is by convention that the last tag to be placed has its endtag place first. And so forth. Nesting has no effect on the text, other than the effect you want. You can nest tags til the cows come home and nothing will happen.

Quick Information: <b>
Start Tag End Tag
Is it needed? required required
How it looks: <b> </b>
What it does Makes text bold.
Quick Information: <i>
Start Tag End Tag
Is it needed? required required
How it looks: <i> </i>
What it does Makes text italic
Quick Information: <u>
Start Tag End Tag
Is it needed? required required
How it looks: <u> </u>
What it does Makes text underlined
Quick Information: <tt>
Start Tag End Tag
Is it needed? required required
How it looks: <tt> </tt>
What it does Makes text teletype style.
Quick Information: <sup>
Start Tag End Tag
Is it needed? required required
How it looks: <sup> </sup>
What it does Makes text superscripted
Quick Information: <sub>
Start Tag End Tag
Is it needed? required required
How it looks: <sub> </sub>
What it does Makes text subscripted.

The <font> Tag

Sure, all those tags are fine, but what do you use to change the font from that ugly Times New Roman? If you're smart (and even if you're not), you probably figured out that you use the <font> tag.
      The <font> tag is the tag you use to change the font "face" or style (i.e., Times New Roman, Arial, Helvetica, etc., etc., etc.). You can code for more than one type of font, so that if a computer doesn't have the first choice, it will look until it finds one of your choices, like the below example:

<font face="modern, arial, helvetica">text</font>

If you coded that into an HTML document, the word "text" would be in "modern" font. However, if the computer didn't have the font file "modern", it would then go to "arial". If that fails, then it will look for "helvetica". And if all else fails, the computer will go to the default font face, usually "times new roman". Unlike most attributes, you need to include quotation marks enclosing all the font names. You also need to include commas between font names. Also, include spaces in a font name if the font name includes it.
      You also use the <font> tag to change the size of the text. Unfortunantly, you cannot use point values; instead, you use a number scale from one to seven to determine the size of the text. Size one text is approximately 8 point, while size seven text is approximately 36 point. You can also set the values to negative, if you want ultra-small text. But you still have to stay within the 1-7 range in the negative. Their point sizes range down to 1. When you use the negative sign (-), make sure you include quotation marks, or the browser will get confused.
      And finally, the <font> tag is used in order for you to change the color of text. You use the hexadecimal system or the name system, just like any other color attribute.

Quick Information: <font>
Start Tag End Tag
Is it needed? required required
How it looks: <font> </font>
What it does This tag changes the face, size, and color of text.
Attributes:Name Values What it does
face= name of a font, ie "arial" Changes the font face (appearance) of text.
size= +/- 1 - 7 Changes the size of the text, from 8pt to 36pt.
color= #rrggbb
name of color
Changes the color of text.


Special Characters

Have you ever wanted to use a character that wasn't on your keyboard? If you own Windows 3.x or later, you would normally go to the "Character Map". Mac users go to the "Key Caps" under the Apple© menu.
      In HTML, such characters -- ones not featured on the keyboard -- are referred to as "special characters." Common special characters you may recognize are the copyright (©), the trademark symbol (™), the degree (°), and the regular bullet (•). But since you can't type these in as easily as an "a" or a "5" or even a "?", you must use a special syntax to code these characters into your text; don't think that Dr. Berners-Lee didn't think of that.
      Right now I must digress. As you may or may not know, there are several lists of characters, such as the ASCII or ISO10646 (aka Unicode -- a character set that comes in 8, 16, or 32 bits -- the standard), and others. The special character encoding syntax uses a modified ASCII (American Standard Commerce Information Interchange), which brings the total amount of characters you can encode to 256 (including "normal" ones such as "a" "5" or "?").
      You can code special characters using the syntax below:

&#character number;
or
&name of character;

Now, the first way to do it is the way you will have to code any of the special characters. You simply type in an ampersand(&), and pound symbol (#) and the number corresponding to the character you want to be shown. The second way is limited only to characters with a corresponding name as well as a number; these are usually the more common ones, like © ™ °, and others. The two characters that you must code like this, even though they are on the keyboard, are < and >. You cannot just type them into the HTML or else the browser will think you are making up a tag, and it will look bad or mess up the rest of the code.
      "But what are the characters numbers?" you may ask. Well, luckily, there's a chart that lists all characters, including ones like "a" "5" and "?". You can use the special character syntax to code every letter in you site, but that would take a long time; and why bother if the character is on your keyboard?
      A slight word of caution before we leave. Macs and IBM-PCs have slightly different character lists, since you code special characters using a nonstandard character list. They're based on the ASCII list. But all of the common ones are cross-platform.


So, we're done with another chapter. Don't you feel the love? Well, at least you should be feeling the burn. In any case, you now should be able to create simple web pages. Doesn't the power of knowledge feel good, to paraphrase Francis Bacon. Let's push on to the element that HTML is named for, the hyperlink.