Documentation
Kattare is dedicated to making your hosting experience as painless as possible. That means making as much help and documentation available as possible.
|
|
Before HTML tags for tables were finalized, authors had to carefully
format their tabular information
within <PRE> tags, counting spaces and previewing their output.
Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages.
Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the
header information, each row explains an HTML table tag, and each cell contains a
paired tag or an explanation of the tag's function.
|
|
| Element |
Description |
| <TABLE> ... </TABLE> |
defines a table in HTML. If the
BORDER attribute is present, your
browser displays the table with a border. |
| <CAPTION> ... </CAPTION> |
defines the caption for the title of the table.
The default position of the title is
centered at the top of the table. The attribute ALIGN=BOTTOM
can be used to position the caption
below the table.
NOTE: Any kind of markup tag can be used in the caption. |
| <TR> ... </TR> |
specifies a table row within a table. You may define default
attributes for the
entire row: ALIGN (LEFT,
CENTER, RIGHT) and/or VALIGN
(TOP, MIDDLE, BOTTOM).
See Table Attributes at the end of this
table for more information.
|
| <TH> ... </TH> |
defines a table header cell. By default the text in this cell is
bold and centered. Table header cells may contain other attributes to determine
the characteristics of the cell and/or its contents.
See Table Attributes at the end of this table for more information. |
| <TD> ... </TD> |
defines a table data cell. By default the text in this
cell is aligned left and
centered vertically.
Table data cells may contain other attributes to determine the
characteristics of the cell and/or its contents.
See Table Attributes at the end of this table for more information.
|
|
|
|
NOTE: Attributes defined within <TH> ...
</TH> or
<TD> ... </TD> cells override
the default alignment set in a
<TR> ... </TR>.
|
| Attribute |
Description |
- ALIGN (LEFT, CENTER, RIGHT)
- VALIGN (TOP, MIDDLE, BOTTOM)
- COLSPAN=n
- ROWSPAN=n
- NOWRAP
|
- Horizontal alignment of a cell.
- Vertical alignment of a cell.
- The number (n) of columns a cell spans.
- The number (n) of rows a cell spans.
- Turn off word wrapping within a cell.
|
The general format of a table looks like this:
<TABLE>
start of table definition
<CAPTION> caption contents </CAPTION>
caption definition
<TR>
start of first row definition
<TH> cell contents </TH>
first cell in row 1 (a head)
<TH> cell contents </TH>
last cell in row 1 (a head)
</TR>
end of first row definition
<TR>
start of second row definition
<TD> cell contents </TD>
first cell in
row 2
<TD> cell contents </TD>
last cell in row 2
</TR>
end of second row definition
<TR>
start of last row definition
<TD> cell contents </TD>
first cell in last row ...
<TD> cell contents </TD>
last cell in last row
</TR>
end of last row definition
</TABLE>
end of table definition
The <TABLE> and </TABLE>
tags must surround the
entire table definition. The first item
inside the table is the CAPTION, which is optional.
Then you can have any
number of rows defined by the
<TR> and </TR> tags.
Within a row you can have any number of
cells defined by the <TD>...</TD> or
<TH>...</TH> tags. Each
row of a table is, essentially, formatted independently of the rows above and below
it. This lets you easily display tables like the one above with a single
cell, such as Table Attributes, spanning columns of the table.
Some HTML authors use tables to present nontabular information.
For example, because links
can be included in table cells, some authors use a table
with no borders to create "one" image from separate images.
Browsers that can display tables properly
show the various
images seamlessly, making the created image seem like an
image map (one image with hyperlinked
quadrants).
Using table borders
with images can create an impressive display as well. Experiment and see
what you like.
Web forms let a reader
return information to a Web server for some action.
For example, suppose you collect names and email addresses so you can email some
information to people who request it. For each person who enters his or her
name and address, you need
some information to be sent and the respondent's particulars added to a data base.
This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you cannot write a program or script for your incoming information, you need to find someone who
can do this for you.
The forms themselves are not hard to code. They follow the same constructs as other HTML tags. What could be difficult is the program or script that takes the information submitted in a form and processes it. Because of the need for specialized scripts to
handle the incoming form information, fill-out forms are not discussed in this primer. Check the Additional Online Reference section for more information.
Consider this example of HTML:
<B>This is an example of <DFN>overlapping</B>
HTML tags.</DFN>
The word overlapping is contained within both the <B>
and <DFN> tags. A browser might be confused by this
coding and might not display it the way you intend. The only way to know is to
check each popular browser (which is time-consuming and impractical).
In general, avoid overlapping tags. Look at your tags and try pairing them up.
Tags (with the obvious exceptions of elements whose end tags
may be omitted, such as paragraphs)
should be paired without an intervening tag in between. Look again at the
example above. You cannot pair the bold tags without another tag in the middle (the
first definition tag). Try matching your coding up like this to see if you
have any problem areas that should be fixed before your release your
files to a server.
HTML protocol allows you to embed links within other HTML tags:
<H1><A HREF="Destination.html">My heading</A></H1>
Do not embed HTML tags within an anchor:
<A HREF="Destination.html">
<H1>My heading</H1>
</A>
Although most browsers currently handle this second example, the official HTML
specifications do not support this construct and your file will probably not work with
future browsers. Remember that browsers can be forgiving when displaying improperly
coded files. But that forgiveness may not last to the next version of the software!
When in doubt, code your files according to the HTML specifications (see For More Information below).
Character tags modify the appearance of the text within other elements:
<UL>
<LI><B>A bold list item</B>
<LI><I>An italic list item</I>
</UL>
Avoid embedding other types of HTML element tags. For example,
you might be tempted to embed a heading within a list in order to make the
font size larger:
<UL>
<LI><H1>A large heading</H1>
<LI><H2>Something slightly smaller</H2>
</UL>
Although some browsers handle this quite nicely, formatting of such
coding is unpredictable (because it
is undefined). For compatibility with all
browsers, avoid these kinds of constructs. (The Netscape <FONT> tag,
which lets you specify how large individual characters will be displayed
in your window, is not currently part of
the official HTML specifications.)
What's the difference between embedding a <B> within
a <LI> tag as opposed to embedding a <H1>
within a <LI>?
Within HTML the semantic meaning of <H1> is that it's the main
heading of a document and that it should be followed by the content
of the document. Therefore it doesn't make sense to find a <H1>
within a list.
Character formatting tags also are generally not additive. For example, you might
expect that:
<B><I>some text</I></B>
would produce bold-italic text. On some browsers it does; other browsers
interpret only the innermost tag.
Validate Your Code
When you put a document on a Web server, be sure to
check the formatting and each link (including named anchors). Ideally you will
have someone else read through and comment on
your file(s) before you consider a document
finished.
You can run your coded files through
an HTML validation service that will tell you if your code conforms
to accepted HTML. If you are not sure your coding conforms to HTML specifications, this
can be a useful teaching tool. Fortunately the service lets you select the level
of conformance you want for your files (i.e., strict, level 2, level 3). If you
want to use some codes that are not officially part of the HTML specifications,
this latitude is helpful.
Dummy Images
When an <IMG SRC> tag points to an image that does not
exist, a dummy image is substituted by your browser software.
When this happens during your final review of your files, make sure that
the referenced image does in fact exist, that the hyperlink has the
correct information in the URL, and that the file permission is set
appropriately (world-readable). Then check online again!
Update Your Files
If the contents of a file are static (such as a biography of George Washington),
no updating is probably needed. But for documents
that are time sensitive or covering a field that changes frequently,
remember to update your documents!
Updating is particularly important when the
file contains information such as a weekly schedule or
a deadline for a program funding announcement.
Remove out-of-date files or note why something that
appears dated is still on a server (e.g., the program requirements will remain
the same for the next cycle so the file is still available as an interim reference).
Browsers Differ
Web browsers display HTML elements differently.
Remember that not all codes used in HTML files are interpreted by all
browsers. Any code a browser does not understand is usually ignored though.
You could spend a lot of time making your file "look perfect" using your
current browser. If you check that file using another browser, it will likely
display (a little or a lot) differently. Hence these words of
advice: code your files using
correct HTML. Leave the interpreting to the browsers and hope for the best.
You might want to include comments in your HTML files. Comments in HTML are like
comments in a computer program--the text you enter is not used by the browser in
any formatting and is not directly viewable by the reader just as computer
program comments are not used and are not viewable. The comments are accessible
if a reader views the source file, however.
Comments such as the name of the person updating a file, the software
and version used in creating a file, or the date that a minor edit was
made are the norm.
To include a comment, enter:
<!-- your comments here -->
You must include the exclamation mark and the hyphens as shown.
This guide is only an introduction to HTML, not a comprehensive
reference. Below are additional online sources of information. Remember to check
a bookstore near you for Web and HTML books.
The following offer advice on how to write "good" HTML:
These cover similar information as this guide:
Home | Previous
|
