This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

HTML Coding

Basics of Web Publishing: Formatting Options

Note: The HTML pages are out-of-date and will not be updated.

There are many formatting options for writing Web pages. The first option to consider is the code you use to write the documents; see the section on Browser Considerations for further explanation of this. Then you can consider:

return to topBrowser Considerations

The browser a person uses to view your Web pages can alter the appearance of the page. The current standard for HTML codes is 3.2. The newest versions of Netscape (3.0) and Internet Explorer (3.0) support the HTML 3.2 standard. However, older versions of Netscape and Internet Explorer and other browsers, such as America Online's and Prodigy's, do not support all of the codes with HTML 3.2.

If a browser does not understand a code, it will generally ignore it. However, in some circumstances it will alter, sometimes negatively, the appearance of your page. Testing your pages with multiple browsers is strongly recommended if you do not know the browser and version that your audience will be using.

Prior to HTML 3.2, there were several "Netscape Only" codes; codes that only worked with the Netscape browser. Many of these codes have now been incorporated into the HTML 3.2 standard. One of the "Netscape Only" codes that was not incorporated was the BLINK code. This code has both an on and off code. 

return to topFont Size Options

Font size can be used to have additional control over the appearance of information on the screen. Headings are often used when you want larger text; however, this forces the text to start on a new line with extra spacing before the text and the text following the heading to begin on a new line. If you want a word or phrase to just appear larger, font size is probably the best bet for you. The following examples demonstrate the use of the font size command and the options available with it. Style sheets may replace this code in HTML 3.

All font size adjustments are made relative to the user's setup in their browser. Unformatted text in a Web document will be displayed in the font size selected by the user's browser. This text is considered to be a base font of three. A font size adjustment of two will be slightly smaller than the base font and a font size adjustment of four will be slightly larger.

NOTE: Font size adjustments may also be expressed as a value referring to the base font of 3. Using 3 as the base, a font size of -1 would yield the same results as a font size of 2 (3-1=2), and a font size of +1 would yield the same results as a font size of 4.

For information on how to change the font size in Netscape 2.0 and 3.0, refer to the LTS Online Help Collection's Changing Font Attributes in Netscape.

Font Size Examples Based on Body Text

The following examples are based on body text, the default text for your documents. In all of the examples the font size adjustment has been applied to the phrase "looks like this." Both possibilities for coding are shown.

Font Size Sample Code
Size=1
OR
Size=-2
looks like this <FONT SIZE=1>looks like this</FONT>
OR
<FONT SIZE=-2>looks like this</FONT>
Size=2
OR
Size=-1
looks like this <FONT SIZE=2>looks like this</FONT>
OR
<FONT SIZE=-1>looks like this</FONT>
Size=3 looks like this <FONT SIZE=3>looks like this</FONT>
Size=4
OR
Size=+1
looks like this <FONT SIZE=4>looks like this</FONT>
OR
<FONT SIZE=+1>looks like this</FONT>
Size=5
OR
Size=+2
looks like this <FONT SIZE=5>looks like this</FONT>
OR
<FONT SIZE=+2>looks like this</FONT>
Size=6
OR
Size=+3
looks like this <FONT SIZE=6>looks like this</FONT>
OR
<FONT SIZE=+3>looks like this</FONT>

Font Size Examples with Heading Sizes

Font size adjustments can also be applied to headings. In the following examples, the word "sample" is in the heading size and the word "text" is in an adjusted font size. Only one of the coding possibilities is shown.

Font Size Sample* Code

Font Size Applied to Heading 1
Size=1
OR
Size=-2

Sample text

<H1>Sample <FONT SIZE=1>text</FONT></H1>
OR
<H1>Sample<FONT SIZE=-2>text</FONT></H1>
Size=3

Sample text

<H1>Sample <FONT SIZE=3>text</FONT></H1>
Size=6
OR
Size=+3

Sample text

<H1>Sample<FONT SIZE=6>text</FONT></H1>
OR
<H1>Sample<FONT SIZE=+3>text</FONT></H1>

Font Size Applied to Heading 3
Size=1
OR
Size=-2

Sample text

<H3>Sample <FONT SIZE=1>text</FONT></H3>
OR
<H3>Sample<FONT SIZE=-2>text</FONT></H3>
Size=3

Sample text

<H3>Sample <FONT SIZE=3>text</FONT></H3>
Size=6
OR
Size=+3

Sample text

<H3>Sample <FONT SIZE=6>text</FONT></H3>
OR
<H3>Sample<FONT SIZE=+3>text</FONT></H3>

return to topCentering Text

Alignment of paragraphs and headings will be left aligned unless you add an attribute to the paragraph or heading code. You can also use a simple center code. The following examples illustrate how you can use them.

Sample Code

Center with Paragraph

<P ALIGN=CENTER>Center with Paragraph</P>

NOTE: The </P> is not required with Netscape 3.0 but we STRONGLY recommended that you include it. Failure to include the </P> will cause problems in older versions of Netscape and some other browsers.

Center Code Only
<CENTER>Center Code Only</CENTER>

Center with Heading

<H3 ALIGN=CENTER>Center with Heading</H3>

return to topBlockquoting Text

The blockquote code is used to indent an entire paragraph. With this command, the paragraph will be indented from both the left and right margin. The blockquote code is often used with long quotes, as you would indent on a word processor. Another use of the code is for pages that are very heavy with text (like this one!). The blockquote code provides some white space on the screen and makes it more inviting to the user and easier to read.

Purpose Code
Mark the beginning of a section <BLOCKQUOTE>
Mark the end of a section </BLOCKQUOTE>

return to topAligning Your Text Using the Pre Command

The PRE code is often used for text that is multiple columns and need to align properly. It may also be used to distinguish a section of text as a quote. Text within the PRE and /PRE codes is generally in the Courier font.

Some examples include the University of Toronto's table of special characters (URL: http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/iso_table.html) .

Purpose Code
Mark the beginning of a section <PRE>
Mark the end of a section </PRE>

return to topHorizontal Rule Options

The horizontal rule <HR> is popular for Web documents. The basic horizontal rule has five attributes which are illustrated in our examples. These attributes control the width, size (thickness), alignment (location), and shading (depth) of the line. Codes for controlling the appearance of the horizontal rule are included. The examples also show how to combine these attributes.

The basic horizontal rule <HR> looks like this:


Width

Width is expressed as a percentage of the entire page width.

Width=25% <HR WIDTH=25%>


Width=50% <HR WIDTH=50%>


Width=75% <HR WIDTH=75%>


Size

Size is expressed as a whole number which controls the thickness of the line.

Size=1 <HR SIZE=1>


Size=3 <HR SIZE=3>


Size=5 <HR SIZE=5>


Alignment

Alignment places a line, which is less than 100% in width, on the page. You can align it with the left or right margin. The default is a centered alignment.

Aligned left <HR WIDTH=50% ALIGN=LEFT>


Aligned right <HR WIDTH=50% ALIGN=RIGHT>


Shading

Shading gives your line depth, or a three-dimensional appearance. The default is a shaded line.

Shaded line (default) <HR SIZE=5>


Line without shade <HR SIZE=5 NOSHADE>


Combining Options

As you can see, combining some or all of the width, size, alignment, and shading attributes gives you many options for the use of rules on your page.

<HR WIDTH=50% SIZE=5 ALIGN=LEFT NOSHADE>


<HR WIDTH=50% SIZE=3 ALIGN=RIGHT>


Excellence. Our Measure. Our Motto. Our Goal.