HTML 4_01 Weekend Crash Course - G. Perry

<!-- Second cell in Movie description row -->

<td width=1113 height=98 bgcolor=#FFFFFF valign=top colspan=2> <hr>

<p align=left>

<font color=#000000 face=Arial>

Capsule: A vacationing family learns that love comes only

from

<br>  commitment, responsibility, and concern. </font></P>

</td>

<tr> <!-- End of the first two rows of content -->

<!-- Continue the second row... -->

<td width=170 height=106 bgcolor=#FFFFFF valign=top align=right> <p align=center>

<a href=”http://www.xyzMovies.com/STMoon.htm/”> <font face=Arial size=3 color=#009900>

Movie’s Web site </a></p>

<p align=center>Barkley Family Rating:<br> </font>

<font face=”Arial” color=#009900 size=4> 3.5 of 5 Stars</font>

</td>

<!-- The right cell of the second row -->

<td width=1113 height=106 bgcolor=#FFFFFF valign=top colspan=2> <p align=left>

<font face=Arial>  Mom: 4 - <i>Finally, a realistic solution for family troubles!</i><br>

  Dad: 3 -

<i>Slow in places, overall good, needs more action.</i><br>   Rachel: 4 - <i>I liked it!</i><br>

  Annie: 3 - <i>I didn’t see any horses...

</i></font></P>

<p>

<font color=#000000 face=Arial>

Friends’ compiled rating: 3.25 Stars - Add yours below!

Figure 27-2

The bottom of the movie page holds a form the user can submit.

The Barkleys are keeping the form simple. They want results e-mailed to them. Notice that the form contains these controls:

A description in the left cell

Five radio buttons for the star-rating system

A multiline text box

A Submit button that triggers e-mailing the form’s contents

A Reset button that resets the user’s entries

In Session 14, you learned how to add form elements to your page. Forms are relatively simple to add. The Barkleys could have had the form answers submitted to the Web host, via a CGI script. E-mailing of the answers, however, is a much

<input type=reset value=Reset name=B2> </p>

</form>

<p> 

</td>

<td width=397 height=290 bgcolor=white valign=top>  

</td>

</tr>

</table>

When the form contents are mailed to the Barkley family, the V1 through V5 variables contain 1 or 0 based on the user’s selection (1 if the user checks the radio button, 0 if the button is unchecked). By default, the five-star radio button is selected when the form first appears on the screen; this is true because of the checked option in the fifth button’s <input type=radio> attribute.

Creating the Image Map for the Family Travels Page

An image map is a graphic image that contains multiple links. It forms a backdrop for the hyperlinks forming the image map. Depending on where the user clicks, the image map takes the user to a different location. You should load the graphic image that you’ll use as the image map into your graphics program and note the pixel coordinates (both width and height) for the entire image and the coordinates of the areas you want to use as hot spots for the links.

An image map’s links can fall into the following kinds of hot-spot areas:

A rectangle defined by the upper-left and the bottom-right coordinate pairs

A triangle defined by three coordinate pairs, one at each of the three angles

A circle defined by two coordinate pairs: the center and the right-edge coordinate point

Note

Two pixel measurements always define a pair of coordinate points: the starting pixel row width and the starting pixel column height of the point. Therefore, a coordinate pair of 130, 245 specifies a point exactly 130 pixels to the right and 245 pixels down from the upper-left corner of an image. The upper-left corner is considered to be the starting point.

Figure 27-3

The map provides a backdrop for hyperlinks forming an image map.

The image is named US.gif, and the image contains mapped coordinates named “states”. The <area> tag tells the browser the coordinates that define the rectangle (26, 167, 56, and 197, in this case); when the user clicks anywhere within that coordinate range, the hyperlink takes over. You specify as many coordinates and links as the image requires, and then you terminate the coordinates with a </map> tag.

The Barkleys use code just like this to map the four hot spots onto their map named, not coincidentally, US.gif. The code in Listing 27-3 shows the entire image mapping for the states. The image map requires very little HTML code. (This crash course does not create any of the image map’s linked pages.)

Session 28 lists limitations of image maps.

Cross-Ref

If you’ve followed along for the past 27 sessions, you are much farther along than a newcomer to HTML! You are on your way to becoming an HTML programmer.

REVIEW

Add forms to get user feedback on your site.

Use image maps in those situations where a graphic image makes an effective navigation tool.

Use coordinate pairs to recognize where the user clicks on your page’s image maps.

QUIZ YOURSELF

1.What happens when the user clicks the Barkleys’ form’s Reset button? (See “Adding the Form to the Favorite Movies Page.”)

2.What happens when the user clicks the Barkleys’ form’s Submit button? (See “Adding the Form to the Favorite Movies Page.”)

3.What are two disadvantages to sending a form’s answers to yourself via e-mail? (See “Adding the Form to the Favorite Movies Page.”)

4.What is the difference between an image used as a hyperlink and an image map? (See “Creating the Image Map for the Family Travels Page.”)

5.What is one drawback to image maps? (See “Creating the Image Map for the Family Travels Page.”)