Image of Navigational Map linked to Home / Contents / Search Just 'slightly' beyond HTML 101

by Matt Gray - GUI Computing
Image of Line Break

The average web developer - even some way above average - probably uses only a small subset of the available HTML tags. The average ASP developer (if he or she comes from a VB background) probably uses and/or understands even less - that's certainly the case around GUI!

But some of the more unusual (dare I say exciting?) HTML tags may not be common but can be very useful nonetheless - either on static or dynamic pages.

If you're an HTML guru, read no further. Otherwise - here they come!

The Meta tag

This is usually a mechanism for identifying meta-information about the document (hence the title), but other uses may be to refresh/redirect the current document after a specified time interval, identify search keywords for search engines, allow an expires date and time for the browser cache and inter-page transitions. This tag is placed within the <Head></Head> tags.

Client Pull

This can be useful when requiring a refresh or redirect to another page when you don't want to include Server or Client scripting to do the work.

This form uses the HTTP-EQUIV attribute as the identifier in the META statement with a value of REFRESH. The content can be either an integer value [n] representing the number of seconds to wait before refreshing the current page, or a combination value separated by a semi-colon representing a time value [n] and a URL page destination [URL].

Refresh a document after n seconds

<meta HTTP-EQUIV="refresh" CONTENT="[N]">

Automatically go to [URL] after n seconds

<meta HTTP-EQUIV="refresh" CONTENT="[N]; URL=[URL]">

This example will redirect to GUI's home page after 5 seconds - which is probably an extremely common usage <g>

<meta HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.gui.com.au">

Editor Identification

This meta tag, with Name = "Generator" is sometimes inserted into a page by the editor program that generated the HTML. The editor's name usually follows in the CONTENT attribute. This tag is usually ignored by browsers, and is just a way of identifying something about the document editor. It can come in handy if, for example, you wish to somehow manipulate the HTML in code after it has been generated.

For example, this Meta tag is ngenerated by the 'U-Beaut' Html editor

<meta NAME="Generator" CONTENT="U-Beaut"> 

Search Engine identification

Keywords that relate to your document and a description of your page/pages should go here if you want Search engines to index your files. Use the NAME = "Keywords" attribute followed by comma separated keywords in the CONTENT attribute for you keywords….and "Description" and a description of your document respectively in another tag to identify a document description. Examples below:

Search Engine ID KEYWORDS are set like this :

<meta NAME="Keywords" CONTENT="jokes, laughs, laughter, naughty ">
The Search Engine ID DESCRIPTION is set like this :
<meta NAME="Description" CONTENT= "Jokes on U is a complete site dedicated to naughty jokes"> 

Browser Cache Override

If you don't want Browsers to cache the requested page beyond a certain date/time, then you can use "Expires" as the HTTP-EQUIV attribute, and specify a date and time as the CONTENT attribute

The syntax:

<meta HTTP-EQUIV="Expires" CONTENT="[Date Value]">
This example will expire the page after the date below
<meta HTTP-EQUIV="Expires" CONTENT= "Mon, 01 Jan 1996 23:59:59 GMT"> 

Inter-Page Transitions

This is used by IE 4.0 and above to allow special effects while the page is loading/unloading. For more information on filter effects, see Microsoft site on filters at http://www.microsoft.com/workshop/author/filter/filters.htm.

The Syntax:

<meta HTTP-EQUIV="[event]" CONTENT="Duration=[Seconds],Transition=[Transition Type]">
where: [event] is either one of: Page-Enter, Page-Exit, Site-Enter, or Site-Exit, [Seconds] is the transition time in seconds and [Transition Type] is an integer from 0 to 23 representing a transition effect.

An example Transition effect on Page-Exit:

<meta HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=2.500,Transition=6)">

Content Type

You can also change the header to reflect what content type is being passed, eg. Text/html or Image/gif . Set HTTP-EQUIV to be "Content-Type" Example

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">

The Script tag

The Script element is used by browsers to recognise client/server side scripting languages embedded or external to an HTML page. Whilst server-side scripting can be hidden from anyone trying to view the source of a page, client-side scripting usually is not - and is usually embedded in the HTML page.

But you can also use the SRC attribute of the Script element to tell the browser where to look for the script, which allows the code to be hidden from viewers' prying eyes (you could keep all your script under a private directory); it also allows the reuse of functions you may have written…simple, but cool.

The SRC attribute of the <SCRIPT> tag lets you specify a file as the JavaScript source (rather than embedding the JavaScript in the HTML). For example:

<SCRIPT SRC="stuff.js">
document.write("Can't find script file");
</SCRIPT>

Then, in the stuff.js file, just include all your Javascript code - no script tags necessary.

External JavaScript files should have the file name suffix .js, and the server must map the .js suffix to the MIME type application/x-javascript, which the server sends back in the HTTP header. To map the suffix to the MIME type, add the following line to the mime.types file in the server's config directory, and then restart the server.

type=application/x-javascript   exts=js

If the server does not map the .js suffix to the application/x-javascript MIME type, the browser improperly loads the JavaScript file specified by the SRC attribute.

The closing script tag is required in the HTML page, and any code between <script> and </script> tags here are ignored unless there is an error in the src file - hence the document.write statement, which will execute on error of the src file.

The Complex Table Model

Did you know there is another way of setting up a table in HTML - not that this is a good way or anything…but may come in handy if you like to fill your page with extraneous tags that don't do much more than the simple <table><tr><td>data</td></tr></table>...well, seriously, there ARE useful attributes that you can only set if you use the complex table model.

For example, the THEAD and TFOOT tags, which enable header and footer data; the COLGROUP tag which enables a container for a group of columns, with specific properties for each. Also new table attributes like Frame which allows greater control over borders, and Rules, which is like Frame, but controls the interior border dividing line display in a table.:

Properties of Frame

Rules

The following HTML shows you how you can gain greater control over properties of a table by showing you a table using both the complex model and the simple model, with the same data.

Complex table model example

<table  BORDER="2" 
	ALIGN="left" 
	CELLPADDING="5" 
	BORDERCOLOR="#ff0000" 
	COLS="4" 
	FRAME="vsides" 
	RULES="rows" 
	WIDTH="75%"> 
<caption ALIGN="top">Number of Alien abductions of GUI staff</caption>
<thead>
<tr>
	<th>Staff</th>
	<th>Gobbledoks</th>
	<th>Short-skirt wearing Aliens</th>
	<th>Beady-eyed ones</th> 
</tr>
</thead>
<tbody>
<tr> 
	<td>Ross</td> 
	<td>2</td> 
	<td>3, and then 4</td> 
	<td>0</td> 
</tr>
<tr> 
	<td>Brett</td> 
	<td>4</td> 
	<td>He wishes!!!</td> 
	<td>NA</td> 
</tr>
<tr> 
	<td>Jason</td> 
	<td>1</td> 
	<td>2, "suit you sir"</td> 
	<td>20</td> 
</tr>
<tr> 
	<td>Rupert</td> 
	<td>0</td> <td>0 </td> 
	<td>0</td> 
</tr>
</tbody>
<tfoot>
<tr> 
	<th COLSPAN=4>NB This is just a small sample of data, and maybe inaccurate in parts</th> 
</tr>
</tfoot>

</table>

Simple table model example

<table  BORDER="2" 
	ALIGN="left" 
	CELLPADDING="5" 
	BORDERCOLOR="#ff0000" 
	WIDTH="75%">
<caption ALIGN="top">Number of Alien abductions of GUI staff</caption>
<tr> 
	<th>Staff</th> 
	<th>Gobbledoks</th> 
	<th>Short-skirt wearing Aliens</th> 
	<th>Beady-eyed ones</th> 
</tr>
<tr> 
	<td>Ross</td> 
	<td>2</td> 
	<td>3, and then 4</td> 
	<td>0</td> 
</tr>
<tr> 
	<td>Brett</td> 
	<td>4</td> 
	<td>He wishes!!!</td> 
	<td>NA</td> 
</tr>
<tr> 
	<td>Jason</td> 
	<td>1</td> 
	<td>2, "suit you sir"</td> 
	<td>20</td> 
</tr>
<tr> 
	<td>Rupert</td> 
	<td>0</td> 
	<td>0</td> 
	<td>0</td> 
</tr>
<tr> 
	<th COLSPAN=4>NB This is just a small sample of data, and maybe inaccurate in parts</th> 
</tr>
</table>

 
 

There are a lot more tags out there that I haven't described in this article….so here is an online reference so you can look up more weird HTML tags like ACRONYM, SPACER, RUBY etc: http://www.rpi.edu/~hopews/reference/index.html.



Written by: Matt Gray
February '99

Image of Arrow linked to Previous Article Image of Arrow linked to Next Article
Image of Line Break


[HOME] [TABLE OF CONTENTS] [SEARCH]