Enhancing Web Pages - Cognizant E-learning Modules

Learning Objective

After completing this topic, you should be able to

 use advanced HTML elements to enhance a web page Exercise overview

In this exercise, you're required to create a web page that contains a table, a form, and an image map and link it to a style sheet.

This involves the following tasks:

 adding elements to a table

 adding elements to a form

 defining image maps, and

 linking a Cascading Style Sheet

You want to create a number of web pages with a table, a form, and an image map and link it to a style sheet for the company EarthFarm.

Task 1: Adding elements to a table

You've added a table to a web page listing some of your company's products. Now you want to improve the appearance of the table and add some interactive elements.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona;//EN">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<table>

Question

You want to add a caption to the table.

Type the opening tag that allows you to do this.

65

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<table>

INSERT THE MISSING CODE

Answer

You type <caption> to open the caption tag.

Correct answer(s):

1. <caption>

You create your caption, which is "Organic Food."

Graphic

This code is referenced:

<table>

<caption>

Organic Food </caption>

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<table>

Organic Food </caption>

<tr>

66 Question

You now want to create a border for the table.

Enter the attribute that enables you to create a border for the table within the table tag and set the value of this attribute to two.

Code

<body>

Answer

You type border="2" to create a border for the table and set the value of this attribute to two.

Correct answer(s):

1. border="2"

You add width and cellpadding attributes.

Graphic

The code for this is:

<table width="60%" border="2" cellpadding="5">

Code

<body>

Organic Food </caption>

Question

For each product listed in the table, you want to provide a link to a separate page about that product.

Start by adding the tag that creates a link from the text "Honey" to the web page "honey.html".

Code

<tr>

67

<td>INSERT THE MISSING CODEHoney</td>

</tr>

Answer

You type <a href="honey.html"> to begin the process of linking to the honey.html page.

Correct answer(s):

1. <a href="honey.html">

You add the closing anchor tag to create the link.

Code

<tr>

<td><a href="honey.html">Honey</a></td>

</tr>

You view the table in your web browser.

Graphic

The table – titled Organic Food – lists a number of food items, and their prices at given quantities.

Task 2: Adding elements to a form

You've added a form to a page, so that users can submit answers about products that aren't listed in the table. You need to add some more elements to the form.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

68 Question

Specify that this form will be used to submit data by adding the appropriate attribute and value.

Code

<form name="survey" INSERT THE MISSING CODE action="survey.php"

enctype="text/plain">

Answer

You type method="post" to specify that this form will be used to submit data.

Correct answer(s):

1. method="post"

Question

You create your form and you scroll to the bottom of the page to create a text area.

Complete the missing code to add a text area called "notes" to the form.

Code

<br>

Do you like any other vegetables? If so, please specify:<br>

<br>

<br>

Answer

You type textarea name="notes" to add a text area called "notes" to the form.

Correct answer(s):

1. textarea name="notes"

Question

Complete the code to add a radio button to the form.

Code

Do you like carrots?

<br>

69

<br>

Answer

You type type="radio" to add a radio button to the form.

Correct answer(s):

1. type="radio"

You add a second radio button to the form.

Code

Do you like carrots?

<br>

<br>

You complete the form.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<form name="survey" method="post" action="survey.php"

enctype="text/plain">

<strong>Quick survey:</strong><br>

<br>

We are considering adding carrots to our list of organic vegetables.<br>

<br>

Do you like carrots?

<br>

70

<br>

What are your favorite vegetables?<br>

<br>

<option value="Beans">Beans</option>

You view the form in your web browser.

Graphic

The form has Yes/No radio buttons asking the question "Do you like carrots?" There is also a select list on the form asking "What are your favorite vegetables?" The list has the following vegetables:

Beans, Broccoli, Celery, Peppers, Potatoes, and Tomatoes. Following this is a text box asking the user to specify what other vegetables they like.

Task 3: Defining image maps

One of the pages on EarthFarm's site contains an image that you want to use as an image map.

It will contain links to different parts of the site. You've added the code for the image map, but it's missing some elements.

Question

You view the HTML code for the web page that contains the image.

Enter the value and attribute that link the image map "earthfarm" to the image.

Code

<P>

<img src="assets/fruit.gif" width="300" height="245"

align="middle" INSERT THE MISSING CODE border="0"

vspace="0" hspace="75">

</P>

Answer

You type usemap="#earthfarm" to attach the image map "earthfarm" to the image.

Correct answer(s):

1. usemap="#earthfarm"

Question

71

The tag that defines the shape and coordinates for the hot spot is missing some elements.

Enter the code that enables you to define the shape and coordinates.

Code

INSERT THE MISSING CODE="rect" href="banana.html"

coords="11,34,98,180">

Answer

You type <area shape to define the shape.

Correct answer(s):

1. <area shape

You create other image maps using the rest of the image.

Code

<area shape="rect" href="banana.html"

coords="11,34,98,180"/>

<area shape="poly" href="grape.html"

coords="178,165,50,189,81,212,153,211"/>

<area shape="circ" href="peach.html"

coords="227,159,48"/>

Question

Enter the closing tag for the image map.

Code

<area shape="rect" href="banana.html"

coords="11,34,98,180"/>

<area shape="poly" href="grape.html"

coords="178,165,50,189,81,212,153,211"/>

<area shape="circ" href="peach.html"

coords="227,159,48"/>

INSERT THE MISSING CODE

Answer

72

In document Cognizant E-learning Modules (Page 65-73)