The HTML Document Elements

4. Intermediate HTML

4.1 Using <meta> Tags

The <meta> tag can be used for a variety of applications:

Provide additional information about a document such as keywords, description, creation date, author, or copyright. These information is invisible to a Web browser reader.
Two types of <meta> tags including <meta HTTP-EQUIV= > and <meta NAME= > are useful for servers, web browsers, and search engines.
A <meta> tag must be always placed within the <HEAD> tags of the document, and multiple <meta> are allowed.

Attributes of meta

CHARSET=name

The CHARSET is used to specify the character set to be used with this Web page.

CONTENT=string

Specify meta-information in the double-quoted string format.

For example, the following meta-information will reload the same document after 10 seconds:

And the following meta-information will cause the homepage at the specified URL location to be loaded:

DIR=direction

Specify the text rendering direction: LTR (left to right), RTL (right to left)

LANG=language

Specify a standard two-character ISO language name defined in RFC 2070 standard on internationalization, for examples: fr (French), de (German), en (English), it (Italian), ja (Japanese), ko (Korean), ml (Dutch), sv (Swedish), zh (Chinese)

NAME=string

SCHEME=scheme

HTTP-EQUIV=string

Specify client-pull application and allow the

For specifying the HTTP equivalent name for the meta-information and cause the server to include the name and content in the HTTP header for this document when it transmitted to the client.

Keywords, Description for Search Engine

Client Pulls

To create a "client-pull" within a document you should specify:

HTTP-EQUIV=refresh

To reload the same Web page every 20 second:

To load a different file after 10 seconds for updated information:

To create a slide-show effect:

An example -

In showlin1.html contains:

In showlin2.html contains:

In showlin3.html contains:

In showlin4.html contains:

Expire Attribute

For indicating the expiration date and time of a document that may be used by Web agents or Web robots:

CONTENT-TYPE

For internationalization of a Web page to indicate the 8-bit encoded Japanese character sets are used:

For internationalization of a Web page to indicate the 16-bit encoded character sets are used:

CONTENT-LANGUAGE

The Web content is prepared with French natural language

Other languages:

jw - Japanese

Example 4-1: Creating a slide show using <meta> tag..

<HTML>

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

</HEAD>

<BODY>

</CENTER>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

</HEAD>

<BODY>

</CENTER>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

</HEAD>

<BODY>

</CENTER>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> Client Pull -- showing Pictures </TITLE>

</HEAD>

<BODY>

</CENTER>

</BODY>

</HTML>

Activities

©Determine the resource needed for designing a Web site for the SUNXYZ Co., that sales PCs directly through the Web. The company has the following departments; PRODUCT SALES, TECHNICAL SUPPORT, ACCOUNTING, PERSONNALE, SHIPPING
©Architect and organize the SUNXYZ Co., Web site by determining folders or directories for appropriate department. Creating the folders for the departments as listed above.
©Use Notepad editor to creating your first incomplete HTML document -- the homepage for the SUNXYZ Co. Refer to example 1 for the basic tags needed. This page should include the following TAGS and Attributes:

<HTML>

<!-- index.html

Author: Your Name

Date: Today

Authoring Tools: Microsoft Notepad

-->

<HEAD>

<TITLE>SUNXYZ Co., </TITLE>

</HEAD>

<BODY>

<H1> This page is under the construction. </H1>

</BODY>

</HTML>

©Save this incomplete homepage as "index.html" in the A drive.
©View the index.html using both Microsoft Internet Explorer and Netscape Navigator browsers.
Add a client-pull statement in your index.html so that Web browser view this page will be updated automatically every 10 sec. (inexpensive Web cam)
Go to the ECET department Lab server at: http://149.164.36.204, then click on Webcam to view the lab setup.

4.2 Image Maps

Clickable hotspots or anchors for linking can be created using properly designed image maps.
An example of image map is to define an image map for the United States where each state is a link.

Uses images as anchors to link to other documents

Server side image maps require the mouse moving coordinates being sent back to servers for processing.
Client side image maps are implemented by placing the map coordinates in HTML within <area> tag.

To prepare a client side image map, we need to use

A <map> tag for defining an image map with a map name
An <area> tag for specifying coordinate and shape and URL of a file to be linked
An <img> tag that reference to the image file and the map and coordinate definition

area Tag and Attributes

COORDS = values

HREF= URL

Example:

Define a rectangle:

COORDS= "x1, y1, x2, y2" for defining a rectangle with two upper left (x1, y1), and lower right (x2, y2) of the area. Where, x1, x2, x3, and x3 are numbers in the units of pixels.

Define a circle:

COORDS= "x1, y1, r" for defining a circle area with the center at (x1, y1), and the radius of r.

Define a polygon:

COORDS= "x1, y1, x2, y2, x3, y3", using three X, Y sets for defining a triangle area.

COORDS= "x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, .., xn, yn", using n X, Y sets for defining a polygon area.

Image Map Examples

<HTML>

<HEAD>

<TITLE> Image Map Example </TITLE>

</HEAD>

<BODY>

<area HREF = "f_rect1.html" SHAPE = "rect"

COORDS = "x1, y1, x2, y2" ALT = "Go to f_rect1" >

<area HREF = "f_rect2.html" SHAPE = "rect"

COORDS = "x3, y3, x4, y4" ALT = "Go to f_rect2" >

<area HREF = "f_circle.html" SHAPE = "circle"

COORDS = "x5, y5, radius" ALT = "Go to f_circle" >

<area HREF = "f_poly.html" SHAPE = "ploy"

COORDS = "x6, y6, x7, y7, x8,y8, x9, y9" ALT = "Go to f_poly" >

</map>

<img SRC = "picture.gif" WIDTH = "200" HEIGHT = "200" BORDER = "2"

ALT = "SUNXYZ Co." USEmap = "#image_name">

</BODY>

</HTML>

example from Altavista

Artwork on loan from Altavista!

source code

  <a href="http://altavista.digital.com/cgi-                         bin/query?pg=tmpl&v=about.html">

         <img src="/dimages/av-logo.gif" alt="[AltaVista] "

         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=204></a>

  <a href="http://altavista.digital.com/cgi-bin/query?pg=aq">

         <img src="/dimages/av-adv.gif" alt="[Advanced Query]  "

         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=59></a>

  <a href="http://altavista.digital.com/cgi-bin/query?pg=q">

         <img src="/dimages/av-sim.gif" alt="[Simple Query] "

         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=42></a>

  <a href="http://altavista.software.digital.com/products/search/choice.htm">

         <img src="/dimages/av-pex.gif"

         alt="[Private eXtension Products] "

         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=65></a>

  <a href="http://altavista.digital.com/cgi-bin/query?pg=h">

         <img src="/dimages/av-help.gif" alt="[Help with Query]  "

         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=35></a>

Activities

1. ©Determine the resource needed for designing a Web site for the SUNXYZ Co., that sales PCs directly through the Web. The company has the following departments; PRODUCT SALES, TECHNICAL SUPPORT, ACCOUNTING, PERSONNALE, SHIPPING

2. ©Architect and organize the SUNXYZ Co., Web site by determining folders or directories for appropriate department. Creating the folders for the departments as listed above.

3. ©Use Notepad editor to creating your first incomplete HTML document -- the homepage for the SUNXYZ Co. Refer to example 1 for the basic tags needed. This page should include the following TAGS and Attributes:

<HTML>

<!-- index.html

Author: Your Name

Date: Today

Authoring Tools: Microsoft Notepad

-->

<HEAD>

<TITLE>SUNXYZ Co., </TITLE>

</HEAD>

<BODY>

<H1> This page is under the construction. </H1>

</BODY>

</HTML>

6. ©Add a client-pull statement in your index.html so that Web browser view this page will be updated automatically every 10 sec. (inexpensive Web cam)

for a tutorial on this subject.