Back to Main Page

E-mail me! Click here!

How to Change Text Style

Physical Styles

Bold, Italic, Underlined, Strikethrough, and Typewriter

Changing the text style of part or all of your page involves a double-ended statement like those described in the first section.

To make text bold simply surround the word or words you wish to embolden with <b>Your Text Here</b>, as shown. For underlined text, surround the text in question with <u>and</u>. And to get italic text, surround the segment with <i>and</i>. Remember that some people have their browsers underline all links, so underlined text may be a moot point in some cases. Still, it is useful outside of links (as long as text is a different color so guests aren't confused), and on a bibliography page for underlining book titles. Strikethrough does just what the name suggests and puts a horizontal line through your text. The tag for this is <s> and </s>. Finally, monospaced typewriter font. This has a visible effect similar to pre-formated text. To create this effect, type <tt> and </tt>

Superscript and Subscript

Superscript and Subscript can be useful, especially when you are dealing with such things as chemical formulas and exponents. Granted most personal home pages don't have much to do with subjects along these lines, but there are many other uses as well. To get superscript ^{(text above the rest of the words, but on the same line),} surround the text with <sup> and </sup>. To get subscript _{(text below the rest of the words, but on the same line),} surround the text with <sub> and </sub>.

By adding these tags more than once, you can move the text farther up or down on the line. This is a lot easier to understand if you think of normal text as centered on a line. Remember that in many browsers, the greater the increment of subscript or suberscript, the smaller the font size of your text. Make certain the text is still readable in most common browsers.

Logical Styles

Citation

This tag has a visible effect identical to italics in most browsers, but like all logical styles, some browsers may render it differently. This is most often used when typing an author's name and/or publication date in a bibliography. To get citation text, surround the text with <cite> and </cite>. As an example:

Dave's HTML Help Page (Newell, 1998)

Code

The most practical use for this type of text is showing visible sections of code. This is used in quite a few places throughout this site. The tags for "Code" Text are <code> and </code> (Creative, huh?). If you use this, you will still have to use the ALT Key Symbols to make the brackets appear around your HTML coding.

I have found that Netscape will not recognize this tag. I am running version 4.72, and therefore cannot speak for older versions of the program, but I would tend to assume they behave in a similar fashion.

Example

Example is an older command that I still find quite useful. Fortunately, all the modern browsers still recognize this tag. The tags look like <xmp> and </xmp>. Anything typed in between these two tags will show up on the page exactly as you typed it, thus allowing HTML examples to be typed out without the need for tons of ALT Key Symbols. This sort of thing can be a huge timesaver, especially with pages like this one.

Strong

This is similar to emphasized text, save that the text is more strongly emphasized. (Go figure....) This is usually rendered as bold text. To get this, surround the words of choice with <strong> and </strong>.

Sample

Sample text often appears smaller than the rest of the text on a line, but it will stay level with all other text unlike superscript and subscript. The code looks like this:
<samp> and </samp>.

Keyboard Text

This sort of text usually indicates text that is to be typed by the user; as in "Type YES in the box below to confirm your subscription." The HTML tags look like this: <kbd> and </kbd>.

Variables

This indicates some sort of variable that should be inserted by the user, such as a file name or a specific series of numbers. Surround the text in question with <var> and </var>.

Deffinitions

This statement is used to highlight the deffinition of a particular word or phrase, such as:
Logical character styles are styles named for their actual use.
The HTML looks like this: <dfn> and </dfn>

It bears mentioning that <dfn> is an older tag, and many newer web browsers may not recognize it. I can say for sure that Internet Explorer 5.0 treats it like italics, I haven't the time to test any others but if I do in the future I will be sure to report my findings in this space.

Emphasized Text

This sort of text usually appears as italics, but some browsers may render it differently, so if you want to be certain, use <i> and </i>. The tags for emphasized text are <em> and </em>.

Pre-formated Text

Sometimes you want text to appear just the way you typed it. That is to say, including all the multiple spaces, tabs, line feeds, etc. just as you typed them. To do this, surround the text in question with <pre> and </pre>.

The text you type between these will look like typewriter text, but HTML won't "correct" the spacing.

Note that preformated text will also be allowed to run off the edge of the browser screen if no line-breaks are inserted, and that spacing is not "corrected".

These attributes can also be placed on the same tag to make text disappear as soon as the cursor leaves the affected text. Reverse this to create text that is only visible so long as the cursor is NOT over the affected text. This attribute can also affect pictures, click here to see how to do this. Have fun and be creative!

How to make things blink

Here is a section for all you faithful Netscape users out there. Internet Explorer doesn't recognize the tags necessary to make stuff blink.

Ever see blinking text on a page? Ever see a fish do a hula in a dish? Sorry. Anyhow, as long as you remember not to overdo it, blinking text on a page can be useful to attract attention to important parts of your page. To make something blink, simply surround it with <blink> and </blink>. Its the parentheses thing again. By now you ought to be seeing a pattern in these statements.

In general, most pages will only have one or two blinking items, and these are usually plain text. Blinking hypertext (like the one on the front page, sorry) is notoriously hard to catch and therefore to use, so most HTML programmers avoid this. It should also be noted that the blink command described above will not work when surrounding an image. Blinking pictures are animated files, and not created through crafty use of HTML. However, blinking graphics are, for the most part anyhow, very annoying, and are avoided just like flashing hypertext, the black plague, and other nasty things.

Enjoy!