[ Layout ] [ Multimedia ] [ Programming ] [ Scripting ] [ Communicate ] [ Navigation ]

Standard Tags

[ Up ] [ HTML Document Structure ] [ Standard Tags ] [ Forms and Tables ]

Now that you know how to make a basic HTML document with a TITLE, BODY, paragraphs and headings, we will cover some elements that don't deal only with text.

First, the comment tag.  Any HTML between a <!-- and a --> is completely ignored by the browser.  Comment statements should not be nested.

The <HR> tag is for a horizontal rule.  It's a horizontal line which can be used to separate blocks of text.  It doesn't have an end tag, since it doesn't contain anything.  It supports the ALIGN attribute, along with SIZE and WIDTH.   The SIZE is the number of pixels tall the line is, while the WIDTH is either the width of the line in pixels or the percentage of the window width (if you follow the number with a percent sign).

If you want to force the end of a line, use <BR> to insert a line break.

Now to the heart of HTML, linking documents.  Links are made using the anchor tag, <A>.  Most of the time, you will only use the attribute HREF to specify where to link to.  You include whatever text (or other content) you want to be linked between the <A> and the </A>.  For example, to link help.html to the word help in the sentence "Click here for help.", you would use this HTML:
Click here for <A HREF="help.html">help</A>.

There are two general types of links: relative and absolute.  Absolute links contain the complete name of the protocol, server, path, and filename, like http://www.thinkquest.org/explore/index.html

Relative links contain the path relative to the current document.  Examples:
A link in
http://www.thinkquest.org/index.html to http://www.thinkquest.org/page1.html could be written as
<A HREF="page1.html">...</A>

A link in
http://www.thinkquest.org/explore/index.html to http://www.thinkquest.org/index.html could be written as
<A HREF="../index.html">...</A> (".." means one directory up from here)

A link in
http://www.thinkquest.org/explore/theweb/index.html to http://www.thinkquest.org/index.html could be written as
<A HREF="/index.html">...</A> ("/" at the beginning of a link means the top directory for the server)

You can use the NAME attribute for an anchor instead of HREF.  In this case, you are defining a bookmark inside the page where you can link to.  For example, at the top of this page I have this code: <A NAME="top"></A>  With bookmarks, it is not as important to have content inside them as it is to position them correctly.  Now, a link to "#top" would take you to the top of the page.   Click here to try it.  You can also link to bookmarks in other pages.  Here is a link to the HTML link section of the links page.

Note: If you want to do a link to an email address, use the mailto protocol instead of http.  For example:
Mail <A HREF="mailto:17131@advanced.org">Me</A>.

Images are linked in using the IMG tag.  The SRC attribute specifies the location of the image, which should usually be a GIF, JPEG, or PNG.

The ALT attribute gives text which can be displayed if the image is unavailable or if images are disabled.  The ALT attribute is used by text-only browsers and by special browsers for the handicapped, so you should ALWAYS specify alternate text for EVERY image.

The BORDER attribute says how many pixels wide the outline should be.  The ALIGN attribute supports both the standard left, right, center and the top, middle and bottom for aligning the image with the text around it.

The HEIGHT and WIDTH attributes control the size of the image in pixels.  The image will be stretched or shrunk to meet the size you specify if these attributes are different than the real size of the image.  Generally, it is best to use these attributes with the real size of the image so the browser can correctly format the page before the image has been downloaded.

List are created using either the <OL> tag or the <UL> tag, which stand for ordered list and unordered list.  Ordered lists are numbered, while unordered lists generally have bullets.

Within the <OL> or <UL>, you put list items within <LI>...</LI> tags.  Here is an example list:

There are several possible values for the OL TYPE attribute.  They are:
<UL>
<LI>A: use uppercase letters</LI>
<LI>a: use lowercase letters</LI>
<LI>I: use uppercase roman numerals</LI>
<LI>i: use lowercase roman numerals</LI>
<LI>1: use numbers</LI>
</UL>
There are several possible values for the UL TYPE attribute.  They are:
<UL>
<LI>circle</LI>
<LI>disc</LI>
<LI>square</LI>
</UL>

Here is the result:

There are several possible values for the OL TYPE attribute.  They are:

• A: use uppercase letters
• a: use lowercase letters
• I: use uppercase roman numerals
• i: use lowercase roman numerals
• 1: use numbers

There are several possible values for the UL TYPE attribute.  They are:

• circle
• disc
• square

The ordered list also supports the START attribute which tells it where to start the numbering.  You always use a number, even if you are using an alphabetic or roman numeral list.

The LI element supports the TYPE attribute.  It also supports the VALUE attribute, which works like the OL START attribute, but for a list item.  The numbering continues from that value.

There are four special characters which cannot be used in HTML.  Rather, there are special sequences to cause the browser to display them.  These are called escape sequences.

There are several special text-formatting tags.

All text in a PRE tag will not be
reformatted in the same way as
other text in an HTML document.
Linebreaks and spaces are
preserved.  Text is shown in a
font in which all characters
take one space.

[ Back ] [ Up ] [ Next ]

[ Layout ] [ Multimedia ] [ Programming ] [ Scripting ] [ Communicate ] [ Navigation ]
[ HTML Document Structure ] [ Standard Tags ] [ Forms and Tables ]

The Web Wizard's Spellbook © 1998, Team WWS