Stylized Text and Other Tricks

Text Formatting

HTML allows you to present text in certain styles to add depth and meaning to the presentation. Words can be italicized and bolded, for example. In HTML, text format tags fall into two catagories, logical and physical. Logical tags focus on the actual use of the formatting, such as citing a source or the emphasizing of a point. Physical tags, on the other hand, are more literal, and they tell the computer to recognize the text as specifically italicized, bolded, or some other different style.

Many web designers try to use logical tags more than physical tags, for as web software becomes more advanced, they'll be able to give more utility to certain tags. But that's not to say there's anything wrong with physical tags - they're easier to remember than logical tags, especially when you want to just bold or italicize something. (Personally, I prefer physical tags and rarely use logical ones, but that's just me.) All style tags are used the same way - you place a starting tag (without the slash) before the desired text, and then a closing tag (with the slash) at the end of the text. So, let's say I want to put part of the following phrase in bold:

Welcome to my website. Please email me if you have the chance.

I want to emphasize how much I want people to write me, so I've decided to put the words "email me" in bold. So, I code it like this:

Welcome to my website. Please <B>email me</B> if you have the chance.

By utilizing the bold tag, I get the following result:

Welcome to my website. Please email me if you have the chance.

Confused? Don't worry. Using these style tags is really easy. After you've tried it out, it'll make perfect sense. In any case, here is a list of the common physical and logical tags.

Physical Styles

• <B> and </B> are used to bolden text.
• <I> and </I> are used to italicize text.
• <TT> and </TT> will give you typewriter, or fixed-width, text.

Logical Styles

<EM> and </EM>

Used for emphasis. Usually appears as italics. Example: If you like the Rolling Stones, visit their web page at http://stones.com.

<CITE> and </CITE>

Used for citing books, movies, etc. Usually appears as italics. Example:Howard Gardner discusses Multiple Intelligences theory in Frames of Mind.

<CODE> and </CODE>

Used for presenting computer code. Appears as a fixed-width font. Example: 10 if x=y then go to 40

<KBD> and </KBD>

Used for user keyboard entry. Usually appears as either a bold fixed-width font. Example: To get the manual on the listserv, type in man listproc.

<STRONG> and </STRONG>

Used for strong emphasis. Usually appears as bold. Example: If you have any problems, please contact the webmaster!

<VAR> and </VAR>

Used to represent variables - i.e, something the user must replace with their own information. Usually appears as italics. Example: REVIEW LISTNAME will list the users subscribed to a given listserv.

Special Characters (Escape Sequences)

Four characters of the ASCII character set - the left angle bracket (<), the right angle bracket (>), the ampersand (&) and the double quote (") - are used in HTML to represent certain aspects of markup tags. Because of this, they cannot be used as part of a text document without a little bit of assistance. Additionally, accent marks and other less common characters can not appear without special help. Instead, you represent these characters with codes known as escape sequences, which must be included in the usual brackets for them to be recognized. Some of the more common codes:

• < is the escape sequence for <
• > is the escape sequence for >
• & is the escape sequence for &
• " is the escape sequence for "
• ö is the escape sequence for ö: a lowercase o with an umlaut
• ñ is the escape sequence for ñ: a lowercase n with an tilde
• È is the escape sequence for È: an uppercase E with a grave accent

A full list of supported characters can be found at the HTML Jalfrezi website. Chances are, though, you won't use them too often, so don't lose any sleep if you don't become an expert in them.

Horizontal Rules

The <HR> tag produces a horizontal line the width of the browser window. It's often used as a way to break up information in your document. So far, I've used them a bunch of times in the Crash Course. Check this out:

---

Neat, isn't it? You can even designate the width of the rule with the following command:

<HR WIDTH=X%>

In the part of the tag where you see the letter X, you would instead put the percentage of the screen you want the horizontal rule to take up. So, if I include WIDTH=50%, the results would look like this:

---

At 10%, it would look like

---

and so on. Additionally, if you wanted to make your line thicker, you can also include SIZE=Y, with Y equaling the number of pixels wide you wish the line to be. Our final example demonstrates this:

<HR WIDTH=50% SIZE=20>

ends up appearing as

---

Horizontal rules can be really handy sometimes, but don't overuse them without good reason, or you'll annoy your website users. (note - just in case you're wondering, there's no closing corresponding closing tag for a horizontal rule, so you only need to have one <HR> tag for each time you want to use it.

Centering Text

Thanks to the folks at Netscape, there's now an unofficial HTML tag that will allow you to center text and even objects on your screen. It's called

The Center Tag.

The center tag is simply <CENTER>. Place it before the text or object you wish to center, and when you want to stop centering, complete it with a </CENTER> tag. As you can see above, I used the centering tag like this:

<CENTER>The Center Tag.</CENTER><p>

Centering helps spice up documents, but always remember to include a </CENTER> tag when you're done, or everything else on your page below it will be centered as well.

Interactive Quiz

Ok, you've learned about paragraphs, headers, horizontal rules, and a bunch of stylized text formats. Take the next interactive HTML quiz and see how much you've retained. No peeking, please!

When you're done with it, move on to the next section or review the current lesson.