Home

Hosting Services

Server Co-Location
Dedicated Server
Java Servlet Hosting
Website Hosting
WHOIS Lookup
Join Us Today!

Members

Member Forums
Documentation
Kattare F.A.Q.
Free Software
Members Section
News
Referral System
Spam Blocking
Webmail

Development

Programming
Website Design
Graphic Design

Company

About Us
Contact Us
Our Network
Page Us
Sites We Host
Terms of Service

Printable Version

Lists

Unnumbered Lists

To make an unnumbered, bulleted list,

1. start with an opening list <UL> (for unnumbered list) tag
2. Use <LI>...text...</LI> (list item) tag followed by the individual item
3. end the entire list with a closing list </UL> tag

Below is a sample three-item list:

    <UL>
    <LI>apples</LI>
    <LI>bananas</LI>
    <LI>grapefruit</LI>
    </UL> 

The output is:

• apples
• bananas
• grapefruit

The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags.

Numbered Lists

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code:

    <OL>
    <LI>oranges</LI>
    <LI>peaches</LI>
    <LI>grapes</LI>
    </OL>

produces this formatted output:

1. oranges
2. peaches
3. grapes

Definition Lists

A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line.

The following is an example of a definition list:

 

    <DL> 

    <DT> NCSA 

    <DD> NCSA, the National Center for Supercomputing 

      Applications, is located on the campus of the 

      University of Illinois at Urbana-Champaign.  

    <DT> Cornell Theory Center 

    <DD> CTC is located on the campus of Cornell 

      University in Ithaca, New York.  

    </DL> 

The output looks like:

NCSA

NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.

Cornell Theory Center

CTC is located on the campus of Cornell University in Ithaca, New York.

The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph tags), lists, or other definition information.

The COMPACT attribute can be used routinely in case your definition terms are very short. If, for example, you are showing some computer options, the options may fit on the same line as the start of the definition.

 

<DL COMPACT> 

<DT> -i 

<DD>invokes NCSA Mosaic for Microsoft Windows 

  using the initialization file defined in the path 

<DT> -k 

<DD>invokes NCSA Mosaic for Microsoft Windows in 

  kiosk mode 

</DL> 

-i

invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.

-k

invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

Nested Lists

Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

Here is a sample nested list:

 

    <UL> 

    <LI> A few New England states: 

 <UL> 

 <LI> Vermont 

 <LI> New Hampshire 

 <LI> Maine 

 </UL> 

    <LI> Two Midwestern states: 

 <UL> 

 <LI> Michigan 

 <LI> Indiana 

 </UL> 

    </UL> 

The nested list is displayed as

• A few New England states:
  • Vermont
  • New Hampshire
  • Maine
• Two Midwestern states:
  • Michigan
  • Indiana

Extended Quotations

Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text.

In the example:

 

    <BLOCKQUOTE> 

    <P>Omit needless words.</P> 

    <P>Vigorous writing is concise. A sentence should 

    contain no unnecessary words, a paragraph no unnecessary 

    sentences, for the same reason that a drawing should have 

    no unnecessary lines and a machine no unnecessary parts.

    </P> 

    --William Strunk, Jr., 1918 

    </BLOCKQUOTE> 

the result is:

Omit needless words.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

--William Strunk, Jr., 1918

Addresses

The <ADDRESS> tag is generally used to specify the author of a document, a way to contact the author (e.g., an email address), and a revision date. It is usually the last item in a file.

For example, the last line of the online version of this guide is:

 

    <ADDRESS> 

    Web Editors' Companion Guide

    </ADDRESS> 

The result is:

NOTE: <ADDRESS> is not used for postal addresses. See "Forced Line Breaks" below to see how to format postal addresses.

Forced Line Breaks/Postal Addresses

The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space. For example, with <BR>:

 

    National Center for Supercomputing Applications<BR> 

    605 East Springfield Avenue<BR> 

    Champaign, Illinois 61820-5518<BR> 

National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518

Horizontal Rules

The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate sections of your document. For example, many people add a rule at the end of their text and before the <address> information.

You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation. For example:

 

<HR SIZE=4 WIDTH="50%"> 

Character Formatting

NOTE: Some browsers don't attach any style to the <DFN> tag, so you might not see the indicated phrases in the previous paragraph in italics.

Logical Versus Physical Styles

If physical and logical styles produce the same result on the screen, why are there both?

In the ideal SGML universe, content is divorced from presentation. Thus SGML tags a level-one heading as a level-one heading, but does not specify that the level-one heading should be, for instance, 24-point bold Times centered. The advantage of this approach (it's similar in concept to style sheets in many word processors) is that if you decide to change level-one headings to be 20-point left-justified Helvetica, all you have to do is change the definition of the level-one heading in your Web browser. Indeed many browsers today let you define how you want the various HTML tags rendered on-screen.

Another advantage of logical tags is that they help enforce consistency in your documents. It's easier to tag something as <H1> than to remember that level-one headings are 24-point bold Times centered or whatever. For example, consider the <STRONG> tag. Most browsers render it in bold text. However, it is possible that a reader would prefer that these sections be displayed in red instead. Logical styles offer this flexibility.

Of course, if you want something to be displayed in italics (for example) and do not want a browser's setting to display it differently, use physical styles. Physical styles, therefore, offer consistency in that something you tag a certain way will always be displayed that way for readers of your document.

Try to be consistent about which type of style you use. If you tag with physical styles, do so throughout a document. If you use logical styles, stick with them within a document. Keep in mind that future releases of HTML might not support physical styles, which could mean that browsers will not display physical style coding.

Logical Styles

<DFN>

for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser.)

<EM>

for emphasis. Typically displayed in italics. (Consultants cannot reset your password unless you call the help line.)

<CITE>

for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML)

<CODE>

for computer code. Displayed in a fixed-width font. (The <stdio.h> header file)

<KBD>

for user keyboard entry. Typically displayed in plain fixed-width font. (Enter passwd to change your password.)

<SAMP>

for a sequence of literal characters. Displayed in a fixed-width font. (Segmentation fault: Core dumped.)

<STRONG>

for strong emphasis. Typically displayed in bold. (NOTE: Always check your links.)

<VAR>

for a variable, where you will replace the variable with specific information. Typically displayed in italics. (rm filename deletes the file.)

Physical Styles

<B>

bold text

<I>

italic text

<TT>

typewriter text, e.g. fixed-width font.

Escape Sequences (a.k.a. Character Entities)

• escaping special characters
• displaying other characters not available in the plain ASCII character set (primarily characters with diacritical marks)

To use one of the three characters in an HTML document, you must enter its escape sequence instead:

&lt;

the escape sequence for <

&gt;

the escape sequence for >

&amp;

the escape sequence for &

Additional escape sequences support accented characters, such as:

&ouml;

the escape sequence for a lowercase o with an umlaut: ö

&ntilde;

the escape sequence for a lowercase n with an tilde: ñ

&Egrave;

the escape sequence for an uppercase E with a grave accent: È

NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use &LT; instead of &lt;.

| Copyright © 1997 - 2006 Kättare Internet Services | | All Rights Reserved Worldwide |
| Rated Safe For Kids by [ICRA] | | Comments or feedback? Email: [support@kattare.com] |
| [Terms of Service] | | [Privacy Policy] | | Kattare is [SecurityMetrics Certified] and [Safe Harbor Certified] |
| Processed in 0.016 seconds by pyramid-06 in Corvallis, Oregon |