Review:

Some of the useful tags that we studied in the previous units are:

html head title body center
bold italic Hn p br
sup sub ol ul dl
blockquote font pre a img
bgsound table embed  

In this tutorial, we will expand on the inventory of the tags that we learned by introducing additional tags which can help improve the Web pages.  We will also introduce the concept of image maps and special; characters.

Additional Tags
U:

U tag works similar to the bold tag, except that it will underline a text. It requires an end tag.

Example: <u> This will be underlined</u> will be shown as:

This will be underlined

S:

S tag also works similar to the bold tag, except that it will create a strike out text. It is very useful to stress on deletions from a text or corrections and so on. This tag also requires an end tag.

Example: <s> This will be strike out</s> will be shown as:

This will be strike out

CITE:

Cite tag works similar to the ADDRESS tag. Its purpose is to indicate a citation, usually referring to a book, paper, or other published source material.

Example:

<cite>Masud Salimian's Multimedia Instructional Design</cite>

which will be displayed as:

Masud Salimian's Multimedia Instructional Design, 1998, WEB-ers Associates.

CODE:

Code tag also fits into the same category of ADDRESS and CITE. Its purpose is to specify a code sample. The coded statement is distinguished from its surrounding text by being rendered in a smaller font size (fixed-width by default unless you change the font face).

Example:

The if statement takes the following generic format:

if(value)
    statement1;
else
    statement2;

In the above example all C program statements are placed inside a <code></code> tags.

HR:

The inclusion of this tag in your HTML document causes a horizontal rule to be drawn on the page. The only useful attribute of the tag is WIDTH that identifies the length of the line.

Example:

<hr width=40%>
<hr width=60%>
<hr width=80%>

which will have the following effect:

Notice that I did not use <BR> to go to the next line. Those of you, using Internet Explorer 4.0+ may also notice that the middle line is red due to a COLOR attribute for HR tag supported in that browser

!--:

!-- is used for comments of the author of the document. You can include several lines of comment between this tag and its end tag. Any text between the tags will not appear in an HTML browser. The end tag is --. Here are a couple of examples:

Example:
<!--1995 Data-->
2843
3498
<!--1996 Data-->
4065
3957
<!--1996 Data (Please notice that the data is still not complete)-->
2017
2190

Will be shown as:

2843
3498
4065
3957
2017
2190

Using Image Maps in Web Pages

MAP:

Map is a very useful tag that can replace a large number of links in the form of text with an image whose different areas can create the same effect. Those areas (called hot spots) need to be identified on an image. therefore, it seems logical that a MAP tag should be accompanied by an image and a set of tags to identity the shape of those hot spots. And that is exactly what happens.

The MAP tag itself has only one attribute, NAME, and its end tag is </MAP>. However, between the start MAP tag and its end another tag is, AREA, is repeated as many times as we have the hot spots.

AREA:

AREA tag with its most useful attributes is presented as:

<AREA SHAPE=shape_type COORDS=coords HREF=url >

The attribute SHAPE defines the type of shape. The shape_type can be:

  • RECTANGLE (or RECT):    for rectangular shape hot spot.
  • CIRCLE (or CIRC):    for circular shape hot spot.
  • POLYGON (or POLY):    for polygonal shape hot spot.

The COORDS attribute specifies the coordinates that define the hot spot's shape.

coords values are different for different SHAPEs.

For RECT, you need to define the coordinates of two points in the form of x1, y1, x2, and y2 where x1 and y1 are the coordinates of the upper left corner point and x2 and y2 are the lower right corner point

For CIRC, you need three coordinates, x and y of the center of the circular hot spot and the length of its radius in pixels.

For POLY, you need three or more pairs of coordinates denoting a polygonal region.

Finally, we need an image that is going to be used for our map. The regular IMG tag is used to display the image, however an additional attribute is added to the IMG tag to identify the name of the map being used--the same one defined in the NAME attribute of the MAP tag. The attribute used in IMG tag for this purpose is USEMAP=#map_name.

Here is an example of a map.

The following statements were used to generate that map:

<IMG SRC="images/tricycle.jpg" USEMAP="#tricycle" BORDER=0 WIDTH=480 HEIGHT=244>
<MAP NAME="tricycle_2001">
<AREA SHAPE=CIRC COORDS="277,122,26" HREF="http://www.wheels.com/" ALT="">
<AREA SHAPE=RECT COORDS="194,65,243,78" HREF="http://www.seating.com/" ALT="">
<AREA SHAPE=POLY COORDS="226,38,238,35,261,62,269,61,267,38,279,35,280,43,272,48,273,67,260,68,238,47,226,45,226,38" HREF="http://www.handle.com/" ALT="">
<AREA SHAPE=POLY COORDS="155,170,176,152,211,141,231,140,288,155,316,180,306,200,266,201,206,192,158,185,155,170" HREF="http://www.shadows.com/" ALT="">
<AREA SHAPE=CIRC COORDS="216,115,20" HREF="http://www.right.com/" ALT="">
</MAP>

In the first line, we are placing the image in our document and by using USEMAP="#tricycle" we are connecting that image to a map named tricycle.

In the second line, we are defining a map named tricycle.

Lines 3-7 are defining the hot spots on the image through the AREA tag. As mentioned earlier, a shape is defined (rectangle, circle, or polygon) with its appropriate coordinate definition.

Finally, the last line is the closing tag for the map.

The method mentioned above is called the client-side image map. In this map, you put all the information about the map in your HTML document. All new browsers properly execute the client-side image maps. There is also a server-side image map that requires the system administrator to define the map in the root directory of the server. This is now obsolete.

The only chore in setting up image maps is in finding the coordinates necessary for COORDS attribute of the SHAPE tag. There are two ways to accomplish that. In the first method, you write the statements for the map and manually find the coordinates of the points you are looking for. In the second method, you use a software program that will help you identify the shape of the hot spots and draw them on the image and let the software save the image map. You can then cut/paste from this file into your original document. In this case, all statements are generated by the software (although, you have to make sure that the path for the image is correct and a copy of the image exists in your account). Most image editors such as Paintshop Pro will give you the coordinates that you need to use in image maps. The following tutorial (written for an older edition of the software) illustrate the approach. Using an image editor

Special Characters
when a browser loads an HTML document, it looks for a set of special characters that act as cues to the browser. Obviously, the major character that the browser looks for is the < sign. As soon as a browser detects that sign, it will expect a tag (an HTML element) right after that. From that point on, everything is taken to be the tag or its attributes until the browser detects a > sign. At that point, the browser executes the tag command.

This presents us with a dilemma as what if we wanted to put a < sign in our document, say we wanted to say X< 5. Notice that inside the document, as soon as we put a < sign, the browser expects to see a tag after that. So it will assume that 5, which has come after the < sign is the tag. Since no such tag exists, the browser will ignore it and continues to include everything else inside the tag until it reaches a > sign.

To solve the problem of special characters, HTML rules call for presentation of the special character within an ampersand and a semi-colon. Between the two, either a special name or number code is used to represent the character.

Characters that are Special because they are used by HTML tags are:

Name Sign HTML Representation
Number Code 		HTML Representation
Name Code
less than < &#60; &lt;
greater than > &#62; &gt;
ampersand & &#38; &amp;
double quote " &#34; &quot;

Characters that are Special because they are not on standard keyboards are:

Name Sign HTML Representation
Number Code 		HTML Representation
Name Code
degree ° &#176; &deg;
e acute é &#233; &eacute;
copyright © &#169; &copy;
registered ® &#174; &reg;

For the list of additional characters, and the standards governing them, I recommend Martin Ramsch's page as the starting point.

Please note that new browsers, can show several special characters such as the ampersand, and double quote characters as they are typed in the HTML document without any need for them being treated as special characters. It really depends on who your customers are. In my multimedia pages, I do not treat them as special characters, because I expect those who want to visit the site, have at least Netscape or Internet Explorer 3.0+. But in my humor pages, I do treat them as special characters, cause I will get a wide range of users with much older and/or restricted browsers.

Your HTML Practice for Units Three & Four

  1. Study the instructional materials and practice the use the above tags in an HTML document. Verify that your document is valid and correct by saving your document into an html file such as work.html and then try to look at it using your browser. (This can be done off-line)
  2. Create at least two additional documents about the course you are designing and use ALL the tags introduced in Unit Three somewhere in them (Each one does not need to have all the tags, but together they should add up to all).
  3. Create an HTML documents called FL_assignment_2.html (where FL should be replaced with your first and last initial) with explanations of where you used the tags in those two documents.
  4. Use an HTML reference library and find 10 new tags and explain their use similar to the explanations contained in the Unit One, Two, and Three at the bottom of FL_assignment_2.html document.
  5. Create links to the three documents in from your class main page.
  6. Check this page for flags of several countries for this assignment first, then pick your choice of the national flags of either Iceland, Faröe Island, or Norway and represent them using only the table tags, background colors only. All three are similar in general design. They all include a number of horizontal and vertical stripes and can be easily designed only using table tags. Do the same for the Naval Ensign flag of Tonga. Then design an appropriate size star similar to the one that you see in the flag of the Central African Republic.  Use the similar approach above except that you can use the newly designed star as an image in your table.
  7. Use the tables to redesign portions of the last module assignments that could be designed more efficiently with tables.  Save them using similar (but not exactly the same) name as before.  Make sure to create links to the new documents from your index.html file.
  8. Be creative. Try to see if you can write a "Challenge Sentence" or paragraph using as many special characters as you can (use at least twenty special characters).
  9. Create an image map related to the course you are designing and use it in one of its pages.  The image may be from a piece of equipment that the class uses, a software tutorial for the class, or simply an image from the list of student in that class that by clicking on a name it will show you the image of the participant.  If you still have no idea of what to use, you can use an image from one of the equipments in either Mitchell-223/250,  or Schaefer-103/104. Whatever your selction, please make sure that you use POLY, RECT, and CIRC area shapes in your image map at least once.
  10. This assignment is due Friday February 13th at 5:00pm.