HTML V: Maps and Extensions of HTML

Required Reading

References:

  1. interactive HTML tools

Map

Below is an image of the Volen center at Brandeis on which we have added an HTML map. This map associates to each 100x100 block of pixels in the image a piece of text (the "alt" text) and a URL (the "href"). When the mouse is over the image, the browser displays the "alt" text for that portion of the map and when the user click, the browser goes to the URL associated with that part of the text.

Maps associated regions of an image with text and URLS. The syntax for a map is

<map name=NAME> <area href="URL1" coords="A1,B1,C1,D1" alt="ALTTEXT1"> <area href="URL2" coords="A2,B2,C2,D2" alt="ALTTEXT2"> ... </map> where "A1,B1" gives the coordinates of the upper left corner of the region, and "C1,D1" gives the coordinates of the lower right corner. A1 and C1 measure horizontal distance from the upper left corner and B1,D1 measure vertical distance from the upper left corner.

A map is associated to an image by adding the attribute:

usemap=URL to the image. For example, for the image below we used the following map: <map name=mymap> <area href="html1.html" coords=" 0, 0,100,100" alt=" 0-100, 0-100"> <area href="html2.html" coords=" 0,100,100,200" alt=" 0-100,100-200"> <area href="html3.html" coords=" 0,200,100,300" alt=" 0-100,200-300"> <area href="html4.html" coords=" 0,300,200,400" alt=" 0-100,300-400"> <area href="html1.html" coords="100, 0,200,100" alt="100-200, 0-100"> <area href="html2.html" coords="100,100,200,200" alt="100-200,100-200"> <area href="html2.html" coords="100,200,200,300" alt="100-200,200-300"> <area href="html2.html" coords="100,300,200,400" alt="100-200,300-400"> ... </map> and the following image element: <img src="map.gif" usemap="#mymap"> 0-100, 0-100 0-100,100-200 0-100,200-300 0-100,300-400 100-200, 0-100 100-200,100-200 100-200,200-300 100-200,300-400 200-300, 0-100 200-300,100-200 200-300,200-300 200-300,300-400 300-400, 0-100 300-400,100-200 300-400,200-300 300-400,300-400 400-500, 0-100 400-500,100-200 400-500,200-300 400-500,300-400

In order to determine the coordinates for your map, you can add the "ismap" tag to the img tag and put it inside a hyperlink, as follows:

<a href="nothing"> <img src="map.gif" ismap"> </a> Clicking on a point in this image whose coordinates are (37,143) would cause the browser to jump to the webpage whose URL is http://....../nothing?37,143 This is an easy way to determine the coordinates for your map.

Extensions of HTML

HTML has spawned several new languages which have somewhat different purposes. The most vigorously expanding descendant language is XML, which stands for eXtendible Markup Language and its associated Style Sheet language XSL. The idea behind XML is that the element/tag model is a good way to represent all sorts of information, not just web pages. The proposal is that all information, especially business information, should be stored using the element/tag model where the set of tags and attributes are determined by the community that will be sharing that data. For example, one can model inventory with xml tags like: <item> <name> .... </name> <stocknumber> ... </stocknumber> <quantity> ... </quantity> </item>

Scheme Servlets

Another extension of HTML which we will look into in detail next is the SXML approach to writing Servlets in Scheme. Servlets are programs that process form data and generate webpages dynamically in response to that form data.