|
|
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. 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?
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".
|
||||||
| 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.
|
||||||
| <font face="modern, arial, helvetica">text</font> | ||||||
|
Extra Information Here's the complete list: 1 = 8pt 2 = 10pt 3 = 12pt (default) 4 = 14pt 5 = 18pt 6 = 24pt 7 = 36pt |
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.
|
|||||
| 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.
|
||||||
character number;
or &name of character; |
||||||
|
Extra Information
Here is the code for the most common characters: & = & < = < > = > © = © ™ = ™ ° = ° ¢ = ¢   = (non-breaking space) |
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.
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. |
|||||