LESSON NINETEEN - THE REMAINING TAGS


You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Introduction | | BASE, DIR, ISINDEX, LINK, MENU and META tags | | APPLET, DIV, DFN, PARAM, SCRIPT, STRIKE and STYLE tags | | Printing this lesson |


Note: Some people like to print out these lessons on paper. If you tried to print this lesson and your browser gave you an error message, then go to the section titled "Printing this lesson".


INTRODUCTION

There are still a few tags found in both HTML 2.0 and HTML 3.2 that have not been discussed in any of the previous lessons. Some of these tags are seldom used. However, it would still be good to take some time and learn just what these tags are all about. The first group of tags is part of HTML 2.0 (which also makes it part of HTML 3.2) and the second group of tags is part of HTML 3.2 (and not part of HTML 2.0).


top | | bottom |

BASE, DIR, ISINDEX, LINK, MENU and META TAGS

These tags all belong to HTML 2.0 and complete the discussion on HTML 2.0 tags.

<BASE>

The BASE tag is used in locating HTML documents. To understand the BASE tag, we first need to understand what a relative URL is. If I were to give you directions to a friend's house in my town, I might say, "My friend lives on Main Street, four houses down from Elm Street. This is a relative address where the location is given relative to another location. The starting point for the address is given relative to a BASE location which is at Elm Street. That is, where the relative address points to depends on where the information is given from. With the same information given in a different town, you would never find the house.

The opposite of a relative address is an absolute address. An absolute address would be analogous to a complete mailing address, including name, street and number, city, state, zip code and country. If you were to send a letter, no matter which city or town the letter is sent from, it will find the address. The mail service needs no other information.

In terms of URLs, a relative URL gives the location of a document or file relative to the location of a base URL such as of a directory (also called a folder). You use the BASE tag to define the base URL of the directory. All relative URL's in the document are resolved against this base URL.

An absolute URL, on the other hand, gives the entire path to the document or file, including the protocol, the server name, the complete path and the document or file name itself. The most common protocol is http which stands for HyperText Transfer Protocol. It is usually followed by a colon (:) and two forward slashes (//) as in http://.

The BASE tag is placed in the HEAD section of the HTML document (just like the TITLE tag is placed in the HEAD section).

For example, if the BASE directory's URL (placed in the HEAD section) is:

<BASE HREF="http://www.htmltutorials.ca/">

then all relative URL's contained in the HTML document will be built using this URL as a reference. So if the relative URL is:

<A HREF="lesson19.htm">

then this corresponds with the complete URL:

<A HREF="http://www.htmltutorials.ca/lesson19.htm">

You can also use relative URL's to go a level higher in the directory structure. For example, if the BASE URL is:

<BASE HREF="http://www.htmltutorials.ca/">

then,

<A HREF="../lesson19.htm">

would correspond with the complete URL:

<A HREF="http://www.bfree.on.ca/lesson19.htm">

The "../" implies a directory one level up in the hierarchy.

You can also use relative URL's to go a level down, that is, a subdirectory of the current directory. For example, if the BASE URL was:

<BASE HREF="http://www.htmltutorials.ca/">

then,

<A HREF="/index/lesson19.htm">

would correspond with the full URL:

<A HREF="http://www.htmltutorials.ca/index/lesson19.htm">

The BASE tag is used to indicate the correct location of a document or file on the server. Normally the browser already knows this location. Therefore, it should not be necessary to use this tag. Use it only if relative URL's won't work otherwise.


<DIR>

The DIR element is similar to the UL (Unordered List) element. DIR stands for DIRectory list and it is used to produce a bulleted list of short items, typically up to 20 characters each. The format is:

<DIR>
<LI>
</DIR>

where each item is specified using <LI>. That is, <DIR> puts the enclosed items marked with a <LI> in a directory listing. Items in a directory list may be arranged in columns, typically 24 characters wide. DIR is seldom used and most HTML books do not even mention this tag. This is because the three most recognized ways by browsers to organize lists are OL (ordered list), UL (unordered list) and DL (definition list).


<ISINDEX>

<ISINDEX> is used in primitive searches. The format for this tag is:

<ISINDEX PROMPT="string" ACTION="location of CGI program">

The ISINDEX tag is placed in the HEAD section of the document and was used before the FORM tag became popular. Today, this tag has been all but replaced by forms. The ISINDEX tag was popular for simple searches using HTML and CGI scripts. When <ISINDEX> is inserted into a document, it will allow the viewer to enter keywords which are then sent to the server. The server then executes a search and returns the results. The ISINDEX tag displays a text dialogue box indicating the presence of a searchable index. The PROMPT attribute can be used to override the default message in the dialogue box which is usually something like: "Enter search keywords". The default search prompt often varied from browser to browser and wasn't relevant to what the author wanted you to enter into the field. The prompt attribute got around that problem as in:

<ISINDEX PROMPT="Enter your height:">

or

<ISINDEX PROMPT="Enter your numbers, separated by commas:">

The ISINDEX tag should be inserted by the server if the document can be searched on the server (for example, if the document is generated with a CGI script). Just inserting the ISINDEX tag will not make the document searchable. The server must be set up to support it. For more flexibility, use a FORM instead.


<LINK>

Not many browsers support the LINK tag although it has some usefulness in site maintenance and in style sheets. The LINK tag is placed in the HEAD section of the HTML document.

In site maintenance, the LINK tag can be used to indicate the relationship between the current document and another document. For this role, LINK has three attributes:

  1. REL which defines the RELationship between the current document and another document.
  2. REV which defines a REVerse relationship between another document and the current document.
  3. HREF whose value is the URL of the other document.
The values of the REL and REV attributes are varied. Let's take a brief look at the first two attributes beginning with the REV attribute.

REV

The most common use of the LINK tag is the following which indicates the author of the document:

<LINK REV="made" HREF="mailto:jbes@bfree.on.ca">

where the value of HREF is the mailto: command containing the e-mail address of the author.

Some browsers, such as LYNX, can use this statement to send comments to the author of the HTML document

REL

Another use of LINK is to create tool bars for common elements of documents, such as REL values of home, next, previous, copyright, stylesheet, etc. By using these values, the browser can automatically generate tool bars or button bars in the window header or elsewhere that link to those documents. For example,

<LINK REL="home" HREF="URL of home page">
indicates the location of the current website's home page. A click on the tool bar or button would load the home page.

Similarly, we have:

REL="toc"
indicates the location of the table of contents, or overview of the website.

REL="index"
indicates the location of the index which does not have to be the same as the table of contents. The index could be alphabetical for example.

REL="glossary"
indicates the location of a glossary of terms for the website.

REL="copyright"
indicates the location of the page with copyright information for the site.

REL="help"
indicates the location of a help file for the website - which can be useful if the website is complex or if the current document requires additional explanations (for example, a large form to fill in).

REL="up"
indicates the location of the document which is up one level from the current document.

REL="next"
indicates the location of the next document in the series relative to the current document.

REL="previous"
indicates the location of the previous document in a series relative to the current document.

Still another use of the LINK attribute is in style sheets. For example,

REL="stylesheet"
points to an external style sheet. It allows the current HTML document to use an external style sheet. Style sheets are a new way to easily and effectively customize web pages in ways that were not possible before. Please see the section on the STYLE tag for a little more information on style sheets.


<MENU>

The MENU element produces a list like <UL> (a bulleted list). The format is:

<MENU>
<LI>
</MENU>

MENU puts the enclosed items marked with <LI> in a menu list. The list items should be displayed in a more compact form. Not all browsers make this distinction and some will print the list items without bullets. As with the <DIR> element described above, <MENU> is also seldom used and most HTML books do not mention this tag.


<META>

The META tag is used to automatically move the visitor from one web page to another (a page jump). You can even use it to create a web slide show. The following is an example of a page jump where the visitor is automatically sent to another page without having to do anything. This situation often occurs when a web page has been moved to another address (a new URL). If you had bookmarked the old URL, the browser would of course load the old page and the old page will load the new page. You are then expected to bookmark the new URL. To see how this works, SWITCH to NOTEPAD and type in the following HTML document exactly as you see it:

<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="10; URL=index.htm">
</HEAD>
<BODY>
This URL has moved. Wait 10 seconds and you will automatically be taken to my new URL called "index.htm" or <A HREF="index.htm">click here to go there now.</A>
</BODY>
</HTML>

Now save this HTML document using a suitable name (if you can't think of one, use "jump.htm"). Then SWITCH back to your browser, load the document and observe what happens (assuming that you are still on-line or that "index.htm" (which is my home page) is in your working directory). Note that if you don't click on the instructional words, "click here to go there now", the document called "index.htm" will automatically load after 10 seconds (which could actually be longer depending on the speed of your browser and the busyness of the server you are accessing). In an actual situation, you may not want the visitor to wait 10 seconds. Five seconds may be long enough.

Note:

  1. This META tag is often called "meta refresh" which causes the document given in the URL to be loaded after a specified number of seconds as stated in the value of the CONTENT attribute (10 seconds in the above example).
  2. Make sure you use a display time that is long enough for your page to appear on the screen and be read by the visitor. Do not use a display time of "zero" seconds (CONTENT="0;) because then the visitor will not be able to go "back" with his BACK button. As soon as he is back to the page with the "refresh" he will be redirected to the page he is trying to get away from.
  3. This use of the META tag works in all browsers.
  4. You can create a series of links to show a portfolio or a series of images without having to create a lot of links and buttons by placing a META tag on each of those pages.

ANOTHER USE FOR THE META TAG
The META tag is especially very important to include in your HTML document if you plan to submit the URL to the search engines. This tag, located in the HEAD section, is used to give a description of your web page or of your website to the search engines. It is also used to pass on your website's keywords to these search engines (such as "Alta Vista" and "Infoseek"). All this submitted information is called meta information.

Here are two META tags as found on my home page in relation to the HEAD and TITLE tags. Note the order of these tags. They have been placed in order from the most important to the least important. In other words, the TITLE tag is the most important tag as all search engines recognize this tag and will utilize the information found in it. The Keywords META tag is a little less important than the TITLE tag but a little more important than the Description META tag. Other META tags can follow the Description META tag. If you want to see some other META tags you can go to my home page and choose "Source" or "Document Source" from the "View" menu.

<HEAD>
<TITLE>html tutorials in web page design</TITLE>
<META NAME="Keywords" CONTENT="html tutorials, html lessons, html help, web page design, html 3.0, html 3.2, html 4.0">
<META NAME="Description" CONTENT="HTML tutorials and lessons in web page design. Design your own website with over 30 easy to follow interactive html tutorials in web page design.">
</HEAD>
<BODY>

Note that each META tag is given with NAME and CONTENT attributes along with their values.


top | | bottom |

APPLET, DIV, DFN, PARAM, SCRIPT, STRIKE and STYLE TAGS

These tags are new to HTML 3.2 and have not been discussed in previous lessons.

<APPLET> AND <PARAM> TAGS

<APPLET>

The APPLET element is used to set up a Java applet. Java applets are little applications (hence the term applets) to create special effects and interactive events on your web pages such as led signs, clocks, calculators, conversion tables and a host of other interactive events. These applets are written in a language called Java and can be included in an HTML document, much as an image can be included. When you use a Java compatible browser to view a web page that contains a Java applet, the applet's code is transferred and executed by the browser.

There are many books devoted entirely to Java so I will only show you how to insert applets on your web page once you have written them or copied them from another source. To insert an applet, use the format:

<APPLET CODE="applet.class" WIDTH="100" HEIGHT="150"></APPLET>

where "applet.class" is the name of the applet and the WIDTH and HEIGHT attributes specify the size of the applet. Note that the extension for an applet is .class.

Suppose the applet is a clock that will be placed on your web page. Since this clock is an image (a picture), it can be treated as an image. Thus you can use the same attributes with the APPLET tag as you can with the IMG tag except for SRC and attributes that deal with image maps. Note that the location (URL) of the applet is indicated with CODE instead of SRC.

The APPLET attributes give the browser information about the applet. The only attributes that must be included are CODE, WIDTH and HEIGHT. Thus for the applet clock we could have something like:

<APPLET CODE="clock.class" WIDTH="150" HEIGHT="125"></APPLET>

This statement tells the browser to load the applet whose compiled code is named "clock.class" located in the same directory as the current HTML document and to set the size of the applet to 150 pixels wide and 125 pixels high.

Here are the attributes that can be used with the APPLET tag:

<PARAM>

If there are parameters that need to be passed on as arguments to the applet, then they are done as NAME/VALUE pairs in a PARAM tag located between the opening and closing APPLET tags. These arguments then take the form:

<PARAM NAME="name of argument" VALUE="value of argument">

For example, here is an example of an APPLET element that works out your biorhythm that involves passing on parameters to the applet such as your birth date and other information. The actual compiled applet code that works everything out would be stored on the server in the same directory as the HTML document containing these statements:

Biorhythm Estimator
<APPLET CODE="Biorhythm.class" WIDTH="550" HEIGHT="220">
<PARAM NAME="Copyright" VALUE="name of person and e-mail address">
<PARAM NAME="BeginDate" VALUE="10">
<PARAM NAME="EndDate" VALUE="20">
<PARAM NAME="BackGroundColor" VALUE="#ffffff">
</APPLET>

The names and values are case sensitive so be sure you write the parameters in the correct case.

As stated above with the ALT attribute, if a browser understands (that is, recognizes) the APPLET tag but can't run the Java applet for some reason, it will display the text found in the ALT attribute and if the browser can't understand the APPLET tag at all, it will simply ignore the tag. Now if a browser does not recognize the APPLET tag, it would be good to let the viewer know this. You can do this with alternate text between the <PARAM> and </APPLET> tags as in (I have also included the ALT attribute in this example):

Biorhythm Estimator
<APPLET CODE="Biorhythm.class" WIDTH="550" HEIGHT="220" ALT="Your browser understands the APPLET tag but for some reason isn't running the applet.>
<PARAM NAME="Copyright" VALUE="name of person and e-mail address">
<PARAM NAME="BeginDate" VALUE="10">
<PARAM NAME="EndDate" VALUE="20">
<PARAM NAME="BackGroundColor" VALUE="#ffffff">
<HR>Your browser is completely ignoring the APPLET tag! If you were using a Java enabled browser, you would see the Biorhythm Estimator Chart instead of these two sentences.<HR>
</APPLET>

There are many places on the web where you can download freeware Java applets and also get more information on Java applets. Here is one interesting website to visit: http://www.javasoft.com/. For other sites, just go to your favorite search engine and do a search for Java applets.

You can also download a Java Development Kit (JDK) from this same "javasoft" website. It is available for both MAC and Windows. Even if you do not know how to write Java applets, you can still use JDK to make minor changes to existing applets. You make the desired change and then compile the new class file with the Java Compiler that is part of JDK.


<DIV>

The DIV container element is used to mark up divisions in a document. With HTML 3.2, you can only use it to set the default alignment for all enclosed block elements. It takes the attribute ALIGN with values LEFT, RIGHT and CENTER. That is, just like with other block elements such as <P> or a header tag such as <H1>, you can specify left, right and centered alignments (for example, <DIV ALIGN="CENTER">). However, instead of:

<DIV ALIGN="CENTER">

use

<CENTER>

as they are considered identical. That is, <CENTER> is shorthand for <DIV ALIGN="CENTER"> and the CENTER element is more widely supported.


<DFN>

DFN stands for DeFiNition. It is a logical tag used to define or markup a term when the term is used for the first time. This tag could have been grouped with the other logical tags from Lesson Seventeen (ADDRESS, CITE, CODE, KBD, SAMP, VAR, etc.). However these tags are all HTML 2.0 tags while DFN is not. DFN was added to HTML 3.2.

DFN usually renders the term in italics so the visitor can see that this is where the term is used for the first time. The text is formatted to look like a definition. However, not all browsers recognize this element and those that do not will simply ignore the tag. Here is the DFN tag at work. If you see no difference then your browser does not support this tag.

An Absolute URL shows the entire path to the file, including the protocol, the server name, the complete path and the file name itself.

Here is the HTML coding for this statement:

An <DFN>Absolute URL</DFN> shows the entire path to the file, including the protocol, the server name, the complete path and the file name itself.

You can also enclose the entire definition between the opening and closing DFN tags.


<SCRIPT>

The SCRIPT element is used for inline scripts. That is, it is used to contain scripts. This tag is placed in the HEAD section of an HTML document and the format is:

<SCRIPT attribute> ... script statements ... </SCRIPT>

The SCRIPT element should contain a valid script such as a JavaScript. In HTML 3.2, however, nothing is done with the text (script) inside this element (that is, the script is simply hidden between these tags). You should see newer versions of HTML include support for inline scripts such as the browser executing the enclosed scripting language. Note that not all browsers support the SCRIPT element. Those that do not will not hide the tag's contents. Therefore, if you need a script in your document, put them inside HTML comment tags (<!-- ... -->) so they will remain hidden. This will also ensure "backward compatibility" with older browsers.

There are two attributes that can be used with the SCRIPT element. They are LANGUAGE and SRC as in:

<SCRIPT LANGUAGE="name of language" SRC="location of file containing script">

where the "name of language" specifies a language such as "JavaScript" or "VBScript" and where the value of the SRC attribute specifies the location of the file containing the script. The SRC attribute can be used if you don't want the code to be in the same HTML document.

There is also a NOSCRIPT element. It is used to enclose anything you want displayed by browsers that do not support inline scripts. The opening (<NOSCRIPT>) and closing (</NOSCRIPT>) NOSCRIPT tags are placed between the opening and closing SCRIPT tags.


<STRIKE>

The STRIKE element tells the browser to display the enclosed text in a strike-through appearance. Usually this is done with a line through the middle of the text. Strike-through text is normally used to show revisions to text. Since this tag is new, support for it is not universal. If you absolutely require strike-through text, you would be better to do it as an image.

<STRIKE>This text will be striked if your browser supports the strike tag.</STRIKE>

All browsers accept the short form "S" in place of "STRIKE". That is, you can use <S> and </S> instead of <STRIKE> and </STRIKE>.


<STYLE>

The STYLE tag is used in style sheets. Style sheets are a new way to customize web pages in ways that were not possible before. With style sheets, you are able to specify fonts, colors, margins and many other features to gain precise control over your presentation. Style sheets make it easy to give all of your web pages a common look. My Lessons 30, 31 and 32 are devoted to designing web pages using style sheets.


top | | bottom |

PRINTING THIS LESSON

This lesson contains a lot of tags and so every once in awhile I get an email from someone who is experiencing problems printing this lesson. There is nothing wrong with the lesson itself. It just that some printers won't print the lesson, while other printers do print the lesson. One of the tags in this lesson is causing the problem. It seems that the printer is trying to execute the tag which is causing the error. The tag that is causing the problem can vary depending on the printer. If your printer refuses to print the lesson, I would suggest you try the following method - Copy the lesson into your word processor and print it from your word processor. That is,:
  1. From the Edit menu in your browser, choose Select All to highlight this entire lesson.

  2. Then from the Edit menu, choose Copy.

  3. Load your word processor such as Microsoft Word and from the Edit menu, choose Paste (or click on the Paste button).

  4. Print the lesson from your word processor.

Note: The links may not print but that should be okay. If you want to try a link, you can always go back to this actual lesson.
 


You can save money by going for compatible ink cartridges which also lowers impact on nature by reducing waste.


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twenty |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to email