Documentation
Kattare is dedicated to making your hosting experience as painless as possible.
That means making as much help and documentation available as possible.
If you have a question that you think would be helpful to have here, please
[Submit your Question].
|
|
HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.
Unnumbered Lists
To make an unnumbered, bulleted list,
- start with an opening list <UL> (for unnumbered list) tag
- Use <LI>...text...</LI> (list item) tag followed by the individual item
- 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:
- oranges
- peaches
- 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>
The output looks like:
- -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:
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
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:
Web Editors' Companion Guide
NOTE: <ADDRESS> is not
used for postal addresses. See "Forced Line Breaks" below to
see how to format 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>
The output is:
National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518
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%">
displays as:
HTML has two types of styles for individual words or sentences:
logical and physical. Logical styles
tag text according to its meaning, while physical styles
indicate the specific appearance of a section. For example, in the preceding
sentence, the words "logical styles" was tagged as a "definition."
The same effect (formatting those words in italics) could have been
achieved via a different tag that tells your browser to "put these words
in italics."
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.
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.
Character entities have two functions:
- escaping special characters
- displaying other characters not available in the
plain ASCII character set (primarily characters with
diacritical marks)
Three ASCII characters--the left angle bracket
(<), the right angle bracket (>), and the
ampersand (&)--have special meanings in HTML and therefore
cannot be used "as is" in text. (The angle brackets are used to indicate
the beginning and end of HTML tags, and the ampersand is used to indicate
the beginning of an escape sequence.)
Double quote marks may be used as-is but a character entity
may also be used (").
To use one of the three characters in an HTML document, you must enter
its escape sequence instead:
- <
- the escape sequence for <
- >
- the escape sequence for >
- &
- the escape sequence for &
Additional escape sequences support accented characters, such as:
- ö
- the escape sequence for a lowercase o with an umlaut: ö
- ñ
- the escape sequence for a lowercase n with an tilde: ñ
- È
- the escape sequence for an uppercase E with a grave accent: È
You can substitute other letters for the
o, n, and E shown above.
Check this online reference for a longer list of
special characters.
NOTE: Unlike the rest of HTML, the escape sequences
are case sensitive. You cannot, for instance, use < instead
of <.
Home | Previous |
Next
|
