HTML and CSS Reference
In-Depth Information
One way to be productive is to create pages based on your earlier work. Launch
Notepad and open the Testimonials page (testimonials.html). Save the file as
store.html. This will give you a head start and ensure that the pages on the Web
site are similar. Perform the following modifications:
a. Change the page title to an appropriate phrase.
b. Configure the viewtrans.gif image to display at the top of the
rightcolumn
id
area. Assign the viewtrans.gif to the
floatright
class. Add a line break tag
below the image. Assign the line break tag to the
clearright
class.
c. Delete the
<h2>
, paragraphs, and images from the
rightcolumn
id area.
d. Configure the primer.jpg image to belong to the
floatright
class.
e. Code a
div
to contain the heading, description, and “Add to Cart” button.
f. Configure an
<h2>
to display the following text: Painting Primer.
g. Code a paragraph that will display the text description. “Are you a do-it-your-
selfer? Have we got the painting tips for you! Ranging from how to choose the
right color to quick clean-up routines. 206 pages. Softcover. $19.95”
h. Add the Add to Cart button. The visitor will click a button to indicate
that they wish to purchase an item. This shopping cart button is placed in
a form. For this exercise, 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 only works
with two items. The store.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 add the shop-
ping cart button for the Painting Primer book below the description para-
graph, write the following code:
<form method="post"
action="http://www.webdevfoundations.net/scripts/cart.asp">
<input type="hidden" name="desc1" id="desc1"
value="Painting Primer" />
<input type="hidden" name="cost1" id="cost1" value="19.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.
i. Code a
div
to contain the heading, description, and “Add to Cart” button.
j. Configure an
<h2>
to display the text “You Can Decorate!”
k. Code a paragraph that will display the text description. “Ever wonder how the
professionals put it all together? This easy to follow guide lets you in on their
secrets. Lots of example rooms and suggestions. 145 pages. Softcover. $24.95”
l. Add the Add to Cart button by writing the following XHTML for the form
with the shopping cart button:
<form method="post"
action="http://www.webdevfoundations.net/scripts/cart.asp">
Search WWH ::
Custom Search