Other Useful HTML Tags

There are many HTML tags in addition to those already discussed. The tags described in this section are the remainder of those that we have found most useful. Appendix E contains a list of all HTML tags supported in Internet Explorer 5 with a brief description of each. A complete reference to these tags can be found on the SBN Workshop Web site and on the CD that accompanies this book. On the CD go to Workshop (References); DHTML, HTML & CSS; HTML References; and then Elements. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm , or open the file named MSDN_OL.htm on the companion CD, and choose HTML Tags and Attributes.

Comment Tags

It is often useful to make notes, or comments, inside your HTML files that will not actually display on the screen. Such comments can help to (1) describe what various parts of a file are supposed to do; (2) explain why a piece of code was written in a certain way; (3) include information in a file that you do not want to be displayed, such as copyright information and author names; or (4) disable parts of a file. There are two forms of HTML comment tags, which are illustrated in Code Listing 4-5 and displayed in Figure 4-5.

Code Listing 4-5.

<HTML> <!-- Author:   Eric Schurman Purpose:  Demonstrate comments Location: Chapter 4 --> <HEAD> <TITLE>Listing 4-5</TITLE> </HEAD> <BODY> <!--This is an example of a single line comment --> <B>This is a normal block of HTML. The rest of the HTML on this page does not display because it is disabled, or  <I>"commented out,"</I> through the use of comments.</B> <!--This multi-line comment disables ("comments out") some HTML. This <B>line of HTML</B> is commented out in both browsers. --> <COMMENT>This type of comment is part of HTML 4.0.</COMMENT> <COMMENT>This one comments out some more HTML. This is <B>yet more commented out HTML</B>. This type of  comment tag does not work in Netscape Navigator 3 and 4. </COMMENT> </BODY> </HTML> 

click to view at full size.

Figure 4-5. Use of the different comment tags.

The first type of comment tag used has <!-- as the opening tag and --> as the closing tag. All text between these two tags is treated as a comment and not displayed on screen. This type of comment tag is by far the most common. The first such comment in Code Listing 4-5 is found at the beginning of the file and contains information about the file itself. Notice that the opening and closing tags are not on the same line. In this instance, all the intermediate lines are treated as comments and are not displayed. The second comment demonstrates a single-line comment, in which the opening and closing tags are on the same line. The last comment of this type surrounds some normal HTML code, which therefore is not displayed. Placing comment tags so that they cause code not to display is known as commenting out the code. This is a powerful debugging technique: if part of your file is not acting as expected, you can pinpoint the problem areas by selectively commenting out parts of the code until you find the source of the issue.

The second type of comment tag opens with <COMMENT> and closes with </COMMENT>. This comment tag is supported by Internet Explorer and Mosaic but not by any current version of Netscape Navigator. In Internet Explorer, this type of comment tag will function identically to the first type, but it will have no effect in Netscape Navigator; therefore, the text between the <COMMENT> tags will be visible to the Netscape Navigator user. It is possible to take advantage of this difference in browser behavior. If you want to display a message to Netscape Navigator users only, simply place it inside a COMMENT element. Internet Explorer will not display it, while Netscape Navigator will.

Meta Tags

In the previous code sample, we used comment tags to provide context at the beginning of our document. Providing context is one of many roles played by the metainformation <META> tag. This tag can also be used to furnish a number of services not directly related to the content of the page. Following is a list of some of the tasks you can accomplish with <META> tags, along with the corresponding code:

  • Force a page to refresh after a set number of seconds (5 in the sample below).

     <META HTTP-EQUIV="REFRESH" CONTENT="5"> 

  • Load a non-English character set for the document (Japanese in the sample below). The specified character set will display only if it is both supported and installed on the client's computer.
  • <META HTTP-EQUIV="Content-Type" CONTENT="text/html;      CHARSET=Windows-51932"> 

  • Force a page to not be cached (stored locally). Some browsers do not support this feature.
  • <META NAME="Pragma" CONTENT="No-Cache"> 

  • Indicate that the document's contents expired at a point in the past, which forces the page not to be read from the local cache:

    <META HTTP-EQUIV="Expires" CONTENT="Thursday, 18-Jan 96 16:26:30 GMT"> 

  • Redirect the user to a different page after a set period of time:

    <META HTTP-EQUIV="refresh" CONTENT="5;URL=http://www.microsoft.com"> 

  • Include keywords, a description, a document type, and a revisit interval that will be used by many Web search engines:

    <META NAME="keywords" VALUE="DHTML, CSS, ActiveX, HTML, JScript"> <META NAME="description" VALUE="Description of DHTML."> <META NAME="type" CONTENT="User Manual"> <META NAME="revisit-after" CONTENT="10 days"> 

<META> tags almost always should be placed at the very top of the HEAD element in a file. You should be aware that many search engines will ignore your <META> tags if you repeat a word too many times. Using synonyms or describing a wider variety of items in a keyword <META> tag is typically a much better policy.

Many people will use <META> tags with custom NAME attributes to track information about a page. For example, <META> tags with NAME attributes of ISBN, Author, and Title could be used to track information about a book. Some search engines are capable of searching on such custom <META> tags.

FieldSet and Legend Tags

The <FIELDSET> and <LEGEND> tags are useful for grouping types of information together. They are especially handy in forms. The <FIELDSET> tag draws a line around its contents. The <LEGEND> tag (which, if used, must be the first element within a FIELDSET element) names the FIELDSET. Code Listing 4-6 provides examples of different types of FIELDSETs. The results are displayed in Figure 4-6.

Code Listing 4-6.

<HTML> <HEAD> <TITLE>Listing 4-6</TITLE> </HEAD> <BODY> <FIELDSET> This fieldset has no LEGEND. </FIELDSET> This text comes after Fieldset number 1. This text comes after Fieldset number 1. This text comes after Fieldset number 1. <FIELDSET TITLE="A Fieldset"> <LEGEND>Fieldset 2</LEGEND> This content is inside Fieldset 2. </FIELDSET> This text comes after Fieldset number 2. This text comes after Fieldset number 2. This text comes after Fieldset number 2. <FIELDSET ALIGN="right" STYLE="width:140"> <LEGEND>Fieldset 3</LEGEND> This content is inside Fieldset 3. </FIELDSET> This text comes after Fieldset number 3. This text comes after Fieldset number 3. This text comes after Fieldset number 3. <FIELDSET> <LEGEND ALIGN="center">Fieldset 4</LEGEND> This content is inside Fieldset 4. </FIELDSET> This text comes after Fieldset number 4. This text comes after Fieldset number 4. This text comes after Fieldset number 4. </BODY> </HTML> 

Most of the code in the sample should be fairly self-explanatory. Note, however, that the third FIELDSET has both an ALIGN attribute and a STYLE attribute. The ALIGN attribute causes the FIELDSET to display at a particular location relative to the text around it, like the IMG element, which is covered in Chapter 2. Normally, however, the FIELDSET takes up the entire width of the screen, so there is no room for it to appear to one side or the other of text. In the sample, we used the STYLE attribute to set a FIELDSET width of 140 pixels; thus allowing room for text. The STYLE attribute will be covered in depth in Part 3.

The FIELDSET tag is part of the HTML 4.0 specification and is not supported in any current version of Netscape Navigator. In Navigator (and in any browser that does not support FIELDSET elements), content inside FIELDSET or LEGEND elements is displayed as standard text.

Figure 4-6. Several examples of FIELDSETs, with and without LEGENDs.

Image Maps

An image map is a graphic that contains hyperlinks to a number of different locations. Where the user clicks on the image map determines the hyperlink that is activated. Image maps consist of two major components, an IMG element and a MAP element. The IMG element (see Chapter 2) is a standard <IMG> tag with the addition of a USEMAP attribute, which references the MAP element that should be used with the image with the MAPs NAME attribute. If the specified MAP element is defined in the same file as the USEMAP attribute, a pound symbol (#) should precede the name of the map, as shown in Code Listing 4-7 and displayed in Figure 4-7.

Code Listing 4-7.

<HTML> <HEAD> <TITLE>Listing 4-7</TITLE> </HEAD> <BODY> <IMG SRC="nav.gif" WIDTH="300" HEIGHT="200" USEMAP="#NavMap"> <MAP NAME="NavMap"> <AREA SHAPE="rect" COORDS="0,0,50,100" HREF="http://www.microsoft.com"> <AREA SHAPE="circ" COORDS="100,150,20" HREF="http://www.w3c.org"> <AREA SHAPE="poly" COORDS="200,50,250,50,250,100,200,150,150,100" HREF="http://mspress.microsoft.com"> </MAP> <BR> <A HREF="http://www.microsoft.com">Microsoft</A> <A HREF="http://www.w3c.org">W3C</A> <A HREF="http://mspress.microsoft.com">Microsoft Press</A> </BODY> </HTML> 

click to view at full size.

Figure 4-7. Users can click on the image to navigate.

The MAP element contains any number of AREA elements, each of which specifies a shape, a location on the image map, and a hyperlink, using the SHAPE, COORDS, and HREF attributes, respectively.

The SHAPE attribute supports rectangles with the rect and rectangle values, circles with circ and circle, and polygons with poly and polygon. Each of these SHAPES uses the COORDS attribute slightly differently. For circles, the first two numbers in the COORDS attribute are the x and y coordinates at the center of the circle, relative to the top left of the graphic. The third number is the radius of the circle. For rectangles, the first two numbers are the x and y coordinates for the upper left corner of the rectangle, while the second two numbers are the coordinates for the lower right corner. Finally, for polygons, each pair of numbers represents the coordinates of another point in the polygon. By using many points in a polygon, you can create detailed shapes.

Always include alternate navigation routes when using image maps. Code Listing 4-7 includes standard text hyperlinks for this task. This practice ensures that users who have turned off images in their browsers or have browsers that cannot display images can still follow your links. This is especially important for blind users.

NOTE
The blue border around the image can be disabled by setting the IMG's BORDER attribute to 0.

Span and Div Tags

The <SPAN> and <DIV> tags are known as container tags. They are useful for separating a block of text from its surroundings without imparting any formatting of their own. These tags are frequently used with Cascading Style Sheets (CSS), which is covered in detail in Part 3.

SPAN is an in-line element, meaning that it can be embedded in text and flow with the paragraph without causing a line break. Some other common in-line elements are B (boldface), U (underline), and I (italic). Each of these elements flows in a paragraph without causing a line break. In contrast, DIV is a block element, which does not flow in a paragraph. Instead, the DIV element is treated as a separate block of text and becomes its own paragraph. Some other common block elements are P (paragraph), HR (horizontal rule), TABLE, and list elements such as UL (unordered list), OL (ordered list), and LI (list item). Code Listing 4-8 demonstrates some basic uses of styles with the SPAN and DIV tags. Note that the two similar lines of code produce quite different results in Figure 4-8.

Code Listing 4-8.

<HTML> <HEAD> <TITLE>Listing 4-8</TITLE> </HEAD> <BODY> Here is <SPAN STYLE="font:bold 14pt">some text</SPAN> in a SPAN. <HR> Here is <DIV STYLE="font:bold 14pt">some text</DIV> in a DIV. </BODY> </HTML> 

click to view at full size.

Figure 4-8. Basic styles on SPAN and DIV elements.

The XMP (Example) Tag

The <XMP> tag can be extremely useful. This tag acts like the <PRE> tag (covered in Chapter 2), except that in addition to formatting the displayed text with the same spacing as the HTML text, it causes the underlying HTML code to display on the screen. Code Listing 4-9 illustrates the <XMP> tag, and Figure 4-9 displays the results.

Code Listing 4-9.

<HTML> <HEAD> <TITLE>Listing 4-9</TITLE> </HEAD> <BODY> <P> This paragraph contains <B>bold</B>,  <I>italic</I>, and <U>underline</U> tags. </P> <XMP> <P> This paragraph contains <B>bold</B>,  <I>italic</I>, and <U>underline</U> tags. </P> </XMP> </BODY> </HTML> 

click to view at full size.

Figure 4-9. The XMP tag exposes the underlying code.

Notice that Internet Explorer displays the first paragraph as we would expect: elements surrounded by formatting tags (<B>, <I>, and <U>) are formatted appropriately. The second paragraph is enclosed in an XMP element and is displayed quite differently. Rather than display the formatted text, the browser renders the code in raw form, including the HTML tags. This technique is extremely useful when constructing pages that contain examples of HTML code.

The World Wide Web Consortium (W3C) has officially deprecated this tag and recommends that it no longer be used. However, the <XMP> tag is supported in Internet Explorer 5 (as it was in versions 4 and 3) for the purpose of maintaining backward compatibility. There is no new substitute tag that does exactly what the <XMP> tag does. However, a similar effect can be accomplished using the <PRE> tag with character entities, discussed next.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net