HTML and CSS Reference
In-Depth Information
c. Notice that the View Cart image displays on the right side of the content area.
Code an
image
element that displays the viewtrans.gif and is assigned to the
floatright
class. Code the text “JavaJam Gear” with an
<h3>
element.
d. Configure the following image:
javashirt.gif height="150" width="150".
Configure appropriate
alt
text for the image. Assign the image to the
floatright
class.
e. Configure the following text in a paragraph “JavaJam shirts are comfortable
to wear to school and around town. 100% cotton. XL only. $14.95”.
f. Configure a line break tag below the paragraph. Assign the line break tag to
the
clearright
class.
g. Configure the following image:
javamug.gif height="150" width="150".
Configure appropriate
alt
text for the image. Assign the image to the
floatright
class.
h. Configure the following text in a paragraph “JavaJam mugs carry a full load
of caffeine (12 oz.) to jump-start your morning. $9.95”.
i. Next you will add a shopping cart button to each item for sale. This is
placed in a form. The action on the form is the ASP script called
http://www.webdevfoundations.net/scripts/cart.asp.
Remember that whenever
you use server-side scripts, there will be some documentation or specifications
for you to follow. This script processes a limited shopping cart that works with
two items only. The gear.html Web page will pass information to the script by
using hidden fields in the form that contains the button to invoke the script.
Please pay careful attention to detail when working on this.
To place the shopping cart button for the T-shirt, add the following code
below the paragraph which describes the T-shirt and above the line break tag.
<form method="post"
action="http://www.webdevfoundations.net/scripts/cart.asp">
<input type="hidden" name="desc1" id="desc1"
value="JavaJam Shirt" />
<input type="hidden" name="cost1" id="cost1" value="14.95" />
<input type="submit" value="Add to Cart" />
</form>
This XHTML invokes a server-side script that processes a demonstration shop-
ping cart. The hidden fields named
desc1
and
cost1
are sent to the script when
the Submit button is clicked. These indicate the name and cost of the item.
The process for adding the shopping cart button for the mug is similar, using
hidden form fields named
desc2
and
cost2
. Add the following code below the
paragraph that contains the description of the mug.
<form method="post"
action="http://www.webdevfoundations.net/scripts/cart.asp">
<input type="hidden" name="desc2" id="desc2"
value="JavaJam Mug" />
<input type="hidden" name="cost2" id="cost2" value="9.95" />
<input type="submit" value="Add to Cart" />
</form>
j. Earlier you placed the viewtrans.gif image on the page on the same line as the
“JavaJam Gear” text. Visitors will click on this image to view the contents of
the shopping cart. Recall that when you use server-side scripts sometimes there
Search WWH ::
Custom Search