Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1

Hands-On Exercises


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Find the Error<title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="trillium.jpg" height="100" width="100" alt="Trillium
flower" />
</body>
</html>

Hands-On Exercises


1.Write the XHTML to place an image called primelogo.gif on a Web page. The
image is 100 pixels high by 650 pixels wide.
2.Write the XHTML to create an image hyperlink. The image is called
schaumburgthumb.jpg. It is 100 pixels high by 150 pixels wide. The image should link
to a larger image called schaumburg.jpg. There should be no border on the image.
3.Write the XHTML to create a <div>containing three images used as navigation
links. Table 4.5 provides information about the images and their associated links.

153

Table 4.5
Image Name Link Page Name Image Height Image Width
home.gif index.html^50200
products.gif products.html 50 200
order.gif order.html 50 200

4.Experiment with page backgrounds.
a. Locate the twocolor.gif file in the student files chapter4/starters folder. Design a
Web page that uses this file as a background image that repeats down the left
side of the browser window. Save your file as bg1.html. Hand in printouts of the
source code (print in Notepad) and the browser display of your page to your
instructor.
b. Locate the twocolor1.gif file in the student files chapter4/starters folder. Design a
Web page that uses this file as a background image that repeats across the top of
the browser window. Save your file as bg2.html. Hand in printouts of the source
code (print in Notepad) and the browser display of your page to your instructor.
5.Visit one of your favorite Web sites. Note the colors used for background, text,
headings, images, and so on. Write a paragraph that describes how the site uses
color for these elements and if the Web Safe Color Palette is used. Code a Web page
(either a new page or you can use the index.html file from the student files,
Chapter4/index.html) that uses colors in a similar manner.


  1. Practice with Favicon.Obtain the favicon.ico file from the student files in the
    Chapter4/starters folder. In this exercise you will use your files from Hands-On
    Practice 4.5 (see the student files Chapter4/4.5 folder) as a starting point. You are

Free download pdf