|
Most documents have common elements, such as, titles, paragraphs, and lists. These elements are
identified in HTML through the use of tags. Everything that is not an HTML tag is part of the
document content. With a few exceptions, HTML does not allow you to describe the exact appearance or layout of
a document. The designers of HTML did this on purpose. Why? Because you don't know the capabilities of the
computer that is going to display the document, i.e. the size of the screen, the fonts that are installed,
etc. By separating the structure of a document and its appearance, a browser program that reads and
interprets HTML can make formatting decisions based on the capabilities of the end user's computer.
Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g.
<TagName>the affected text</TagName>The tag name itself (here, TagName) is enclosed in brackets (< >). The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser. This is a <STRONG>basic</STRONG> tag tutorial.will be displayed as: This is a basic tag tutorial.Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list. All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document. The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links. Sounds and AnimationsThe same syntax used to link to images is used to link to external animations and sounds. The only difference is the file extension of the linked file. For example, <A HREF="AdamsRib.mov">link text</A>specifies a link to a QuickTime movie. Some common file types and their extensions are:
Keep in mind your intended audience and their access to software. Most UNIX workstations, for instance, cannot view QuickTime movies. Clickable Image MapsNetscape, Microsoft (Version 2.0 and later) and Spyglass browsers all support the client-side (browser processed) image map element MAP. MAP specifies the regions of a mapped image and the associated URLs. This allows you to assign different links to different parts of a single image rather than only one link to the entire image. The format is: <MAP NAME="string">
<AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="url_for_region">
..... more shapes ...
</MAP>
where (x1,y1) are the upper-left hand coordinates and (x2,y2) the lower
right-hand coordinates for a rectangle within the image associated with the link.
Other possible shapes are: <AREA SHAPE="circle" COORDS="x1, y1, x2, y2" HREF="url_for_region">
<AREA SHAPE="polygon" COORDS="x1, y1, x2, y2 ... xn, yn" HREF="url_for_region">
With the circle, (x1,y1) is the center and (x2,y2) is an edge. All coordinates are in pixels.
Referencing the MAP You reference the map from within an IMG element using the USEMAP attribute. For example: <IMG SRC="blobby.gif" USEMAP="#string">references the map named "string" listed above. Client-side image maps are simple to create with the assistance of a map coordinate program. You simply specify the image you want to map in the application, use several geometric tools to define the area and assign a URL. The program does the rest and inserts the map coordinates in your HTML document. Simple and easy!
You can download a free evaluation copy of a mapping application at any one
of the following:
Clickette by Sausage Sorry, only WIN95 version ($25)
|