Basic Document Parts
Submitted by Syscrusher on Mon, 2005/06/06 - 23:29.
This page is a short collection of the tags most needed by beginning webmasters along with contextual information on how they are used. No matter what else you do, you will need to know these tags well because they are used constantly.
Basic Document Structure
All your documents should look contain these elements as a minimum:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>title of your page here</title>
</head>
<body>
...everything that is visible in the browser goes here...
</body>
</html>
Tags for Defining Document Parts
<html> and </html>
Your entire document must be within this tag set, except for the DTD line as shown
above. The <html> tag does not have any attributes.
<head>
document-header-info
</head>
The document header information is always contained within this tag set. Generally,
beginners will have only the <title> tag set and possibly one or two lines of
<meta> tags inside the header area.
<title>document-title</title>
The document's title goes here. This is what will (usually) be displayed in the window
bar of the browser on a graphical operating system, and it is what will be
"remembered" as the name of the page if the user bookmarks your page. To avoid
confusing users whose browsers alphabetize bookmarks, be sure to have no extra spaces
within the title text, especially right after the <title> tag itself. Having spaces
between words of the title itself is perfectly fine.
<body bgcolor=color text=color link=color vlink=color
alink=color background=imagefile>
body-of-your-document
</body>
imagefile should be a relative URL to a JPG, GIF, or PNG graphics file, such
as "images/bg001.jpg".
All of the attributes (bgcolor, text, link, and so forth) are optional. It is valid to
use just <body> with no attributes, or to leave out the ones you don't need.
bgcolor is the background color of the page.
text is the color of all regular text that is not a hyperlink. This color
can be overridden for parts of the text using the <font> tag.
link, vlink, and alink are the colors for unvisited
links, visited links, and active links, respectively. These are global to the entire
document and cannot be overridden by the <font> tag.
background specifies an image file that will be tiled (repeated
horizontally and vertically) to fill the browser window. The background graphic displays
behind, and is partially covered by, all other page elements.
<h1 align=alignment>page title or section name</h1>
h1 through h6, inclusive, are the heading levels. h1
is a top-level heading that is likely to be drawn quite large and in a bold typeface by
most browsers. h2 will be a little less emphatic, and so on. h6
is only slightly different from regular text. All headings are paragraphs unto
themselves -- do not put them inside paragraphs of text.
<p align=alignment>any amount of regular text</p>
This tag set should be used to enclose any paragraph. The closing tag is optional but
it is good practice to use it.
<blockquote>
some text which will be indented
</blockquote>
The block quote tag, used as shown above, causes the text within its boundaries to be
indented by a modest amount from the left margin (only). Take a look at this page -- the
indenting is accomplished with block quote tags. A table can give you more precise
control, but they take quite a lot more HTML work. The block quote tag indents what's
within it, and gracefully handles line wrapping as well. You don't have to indent the
contained text yourself.
<ol>
<li>some text</li>
<li>more text</li>
...
</ol> |
<ul>
<li>some text</li>
<li>more text</li>
...
</ul> |
Ordered and unordered lists. The ordered list <ol> tag causes items to be
numbered 1, 2, 3, and so on. The unordered list <ul> simply marks each item with the
same symbol, such as a bullet. Both kinds of list are "smart" about hanging
indents and line wraps, as with the block quote. Both kinds of lists can contain as many
items as you wish (as indicated above by the ellipsis).
<dl>
<dt>first_term
<dd>first_definition_data
<dt>second_term
<dd>second_definition_data
...
</dl>
The definition list <dl> tag is used in such things as glossaries or
dictionaries. The text after each <dt> tag is the definition term, and will be
(usually) somewhat outdented from the definitions and (often) boldfaced. The text after
the <dd> tag is the definition data, that is, the text of the definition of the
term. Generally, definition lists work best if the terms are short (just a couple of
words). The definition data can be any reasonable length.
<br clear=what>
The <br> tag is a line break, which forces the browser to break at a certain
point. Used by itself, it provides a correct way to force line breaks within a paragraph.
For instance, if you writing someone's postal address as in the following example, you
should use <br> tags at the beginning or end of the lines:
<p>Ms. Jacqueline K. Stephens
<br>413 East Maple Boulevard, Apt. 601G
<br>Anytown, USA 99901</p>
The choice of putting <br> at the end of one line or at the beginning of the next
is just a stylistic preference for the web author -- it won't affect how your page looks.
Sometimes the browser on a PC with a high-resolution screen will have too much room to
work with, and will continue lines of text to the right of your graphic images or tables
when you really wanted the text below the other element. In these cases, use <br
clear=all> after the table or image, to force the browser not to put anything
else beside what it has just displayed. There are also right and left
variants on the what attribute, which affect only images or tables aligned to
that particular side of the page. These variants are rarely used.
|
