Margin of Error

Note:

All the items in this exercise have counterparts in CSS (cascading style sheets), however, you will come across all of them as you work on the web - they are on millions of web pages. They are also much easier to do, but don't have the flexibility (or complexity) of CSS.

Page Margins

Browsers have a habit of pushing text too close to the edges. If you want to prevent that from happening, you can specify the page's margins. This page is an example. Note that css has largely usurped this responsibility, but this is an html course, so I want you to know how to do it using html.

Change the shape of your browser window now and see how the margins on this page remain the same width as you change the shape. To adjust the margins using html, use the margin attributes.They go into the BODY tag. (Note that in css, the margin "property" does the same thing, but you can also apply it to numerous other types of tags).

Here are the html margin attributes. Their value is given in pixels:

LEFTMARGIN=
TOPMARGIN=

The Blockquote

Another way to indent is to use the BLOCKQUOTE tag. This tag will indent text from both sides relative to the rest of the page text. It's intended use is for displaying quotations, but it has practical applications for positioning text as well.

This is the effect that BLOCKQUOTE tags have. The BLOCKQUOTE tag indents the text from both sides of the browser window. Blockquotes are often used for text positioning and indenting.

Preformatted Text

Positioning of text can also be accomplished using the PRE tag to create what's called preformatted text. The PRE tag will honor the integrity of the character spacing and line breaks as they appear in the code. This is particularly useful when you need to line up text in rows and columns.

Preformatted text is always displayed with what is called a monospace font. These are fonts that use the same amount of width per character regardless of what the letter is.

For example, normally the letter W takes up much more territory horizontally than the letter i. However, with monospaced fonts this is not the case; they both take up equal amounts of space on a line. Because of this, letters can be lined up perfectly on top of one another from one row to the next.

Examples:

Preformatted text:
WWWWW
iiiii

The Same Text Not Preformatted:
WWWWW
iiiii

Courier is the most common monospaced font. The problem with monospaced fonts is that they are not automatically "kerned" and therefore visually unattractive. (Kerning means to adjust the gap between letters.)

The PRE tag can also be used to add blank rows. Any blank rows in the code within PRE tags will be displayed as such.

Here's an example of using the PRE tag. Look in the code and see that the line breaks and spaces are maintained from the code when shown in your browser.

Fire Department     Salary Comparisons
               Captain  Lieutenant    Fireman
Los Angeles    $65,432     $52,938    $42,015     
Chicago        $71,515     $56,329    $40,509
New York       $73,402     $57,894    $49,519

Assignment:

Save this file as D03_yourlastname.html
Set both page margin attributes to 50.
Convert the last paragraph above (the paragraph that starts with the words "Here's an example of using...") into preformatted text. Remove any unneeded tags. (You will find the PRE tags and how to use them in the code for this page.)
Put the paragraph that's two paragraphs up from the bottom into blockquotes (the paragraph that starts with the words "The PRE tag can also be used...").
Save your file. Check it in your browser.
Online students: send your file to me by email.