Both physical and logical character formatting styles are defined in HTML. Use logical styles whenever possible, since physical styles may differ from browser to browser. We'll look at the three physical styles first, just to show you what they are. You'll see that they are all included one way or another in the logical styles.

Physical Styles

Logical Styles

Usually italicized, the emphasized style looks like this. Usually bold, this is the strong style. Another fixed font, the code style is usually used for (obviously) code examples and such. The keyboard style is generally used for examples of user input. The sample style is yet another fixed font. Do not be surprised if a browser displayed these last three styles using the same font. The variable style is intended for something that would stand out as an entity that would be replaced; this is often in italics or underlined. The definition style is intended for a word that is being (or has been) defined. And finally, the citation style should be used to cite sources or refer to footnotes.

White space in your HTML document is ignored, which means that you can enter <CR> all you want in the original, but the lines will run together in the browser. The exception is pre-formatted text:

      (  )
"Moo" (oo)
       \/------\
        ||    | \         (it's a cow)
        ||--W||  *
        ||   ||

Block quotes are used to create quotations, either set off from the text by indentions or some other method:

What If Dr. Seuss Did Technical Writing?

Here's an easy game to play.
Here's an easy thing to say:

If a packet hits a pocket on a socket on a port,
And the bus is interrupted as a very last resort,
And the address of the memory makes your floppy disk abort,
Then the socket packet pocket has an error to report!

If your cursor finds a menu item followed by a dash,
And the double-clicking icon puts your window in the trash,
And your data is corrupted 'cause the index doesn't hash,
Then your situation's hopeless, and your system's gonna crash!

You can't say this?
What a shame sir!
We'll find you
Another game sir.

If the label on the cable on the table at your house,
Says the network is connected to the button on your mouse,
But your packets want to tunnel on another protocol,
That's repeatedly rejected by the printer down the hall,

And your screen is all distorted by the side effects of gauss
So your icons in the window are as wavy as a souse,
Then you may as well reboot and go out with a bang,
'Cause as sure as I'm a poet, the sucker's gonna hang!

When the copy of your floppy's getting sloppy on the disk,
And the microcode instructions cause unnecessary risk,
Then you have to flash your memory and you'll want to RAM your ROM.
Quickly turn off the computer and be sure to tell your mom!

Images & Graphics

GIF Images

This is a normal inline image:
This is the same image with a height & width of 100 (which by the way is a Netscape extension):
An example of the large image with top aligned text,

with middle aligned text,

and finally bottom aligned text.
The same example, but with the smaller image:
First, top aligned text,

next middle aligned text,

and bottom aligned text.

Note that text is aligned by the baseline, so middle aligned looks like it's up too high. Netscape has some extensions that address this issue, if you're interested.

JPG Images

See the two problems? The first is obvious... we've magnified the image beyond the useful resolution of the original. Second, the image wasn't expanded proportionally (the original was rectangular, the magnified version square). Here are two more examples of the same image:

Links to other images

All these are links to documents that contain nothing but images. Be advised that not all these pages load fast. And since they I use absolute path names (oddly enough not generally a good idea) to documents beyond my control, you may not be able to get there from here. Let me know if you run into problems...

• Misc
• Papers
• Bullets
• Lines
• Misc
• Arrows
• Symbols
• Maps
• Halloween
• Christmas

Lists

Included in this section are examples of the five types of lists available in HTML. In no particular order they are:

1. Unordered lists.
2. Ordered (numbered) lists.
3. Menu lists.
4. Directory lists.
5. Definition (glossary) lists.

Unordered Lists

• First entry
• Second entry
• Third entry
• Fourth entry
• Fifth entry
• and so on
• and so on
• and so on...

Ordered Lists

1. First entry
2. Second entry (with an imbedded second ordered list)
   1. First entry
   2. Second entry
   3. Third entry
   4. Fourth entry
   5. Fifth entry
   6. and so on
   7. and so on
   8. and so on...
3. Third entry
4. Fourth entry (with an imbedded unordered list)
   • First entry
   • Second entry
   • Third entry
   • Fourth entry
   • Fifth entry
   • and so on
   • and so on
   • and so on...
5. Fifth entry
6. and so on
7. and so on
8. and so on...

Menu Lists

Directory Lists

Definition (glossary) Lists

First entry

to be defined

Second entry

to be defined

Third entry

to be defined (of course the definition can be quite long, and in fact this type of list can be used anywhere an intended type of list is needed...)

Fourth entry

to be defined

Fifth entry

to be defined

and

so on

and

so on

and

so on...

Links

Links are included throughout this document (the table of contents is one example; so is the 'Back to TOC' entry at the beginning of each chapter. These reference specific locations within this document. To link to another document, put it's URL within the quotes in the HREF section of the anchor tag. To link to a location within a document, include the #XXXXX (where XXXXX is the anchor within the document) after the URL in the HREF section. Study the examples in Chapter 4 & the 'mailto' at the bottom of the document.

You can also use images as links. Look at the two examples. The first is a linkback to the table of contents. The second is a link to another image. Note that I include a text link also...

Back

THE

You can link to almost anything, including audio & video. If your machine has sound capability, try the following links:

Simple sound check.

Lunch anyone?

DON'T piss me off.

Breaks & Bars

Normally the text in an HTML document is reformatted before it's displayed by the browser. This means that line breaks are lost from the original document. This is actually desirable, since it allows users to change the size of the browser window and not have to scroll left and right to see all the text in a document.

But what do you do if you really want a line break in a certain location?
Use the <BR> tag.
A line break will be forced at that point.
Check out this source.

Sometimes you need more than a line break to separate text. Use a horizontal bar. Each of the chapters in this document is preceded by one. Again, check the source of this document. Of course you can always use an image as a bar. Here are some examples:

Extensions and Non-Standard Features

(Ooh, let's try that!)

The features in this section aren't strictly defined in the original HTML spec. Even though they may be widely accepted, they may not work or appear the same on different browsers. Specifically, Netscape does a lot of things that other browsers can't or don't. Yet.

The first heading at the top of this section is center aligned, the second right aligned. The above paragraph is center alligned. This paragraph is right aligned. Maybe.

Here is an examlpe of an imbeded change of font size. With a 1/2 wide bar thrown in for good measure.

Netscape also supports blinking text. This was originally an easter egg in an early release of Netscape, but has caught on. Too bad. Remember that blinking can become REALLY annoying.

Here's our poor over-exploded JPEG image left aligned with a paragraph of text to the right. Normally only one line would be next to the image, and the rest would be formatted below the image.

And in yet another example we have the same JPEG image right aligned with a paragraph of text to the left. These are useful in that you don't waste vertical space when you have an image on the screen and text at the same time.