Stylized Text and More

Text Formatting: A Short Review

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 categories, 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 email me 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.
Physical Styles

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

Logical Styles - Some New Stuff

 and 
Used for emphasis. Usually appears as italics. Example: If you like WTC, visit their web page at http://wtc.cc.tx.us.

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

 and 
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 (Entity Codes)

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
There are many more of these 'supported characters', but they are not used very 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, we've used them in this 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.