Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 157

Hands-On Practice Case

Obtain the images used in this case study from the student files. The images are located
in the Chapter4/CaseStudyStarters/JavaJam folder. The images are: melanie.jpg (Figure
4.28), melaniethumb.jpg (Figure 4.29), greg.jpg (Figure 4.30), gregthumb.jpg (Figure
4.31), javalogo.gif (Figure 4.32), windingroad.jpg (Figure 4.33), and background.gif
(Figure 4.34). Save them in your javajam folder.

Figure 4.28
Melanie Morris (melanie.jpg)

Figure 4.29
Melanie Morris thumbnail
(melaniethumb.jpg)

Figure 4.30
Greg (greg.jpg)

Figure 4.31
Greg thumbnail
(gregthumb.jpg)

Figure 4.32
JavaJam logo
( javalogo.gif )

Figure 4.34
Background
(background.gif)

Figure 4.33
Winding road
( windingroad.jpg)

1. The Home Page. Launch Notepad and open the index.html file from your javajam
folder. Modify the index.html file to look similar to the Web page shown in
Figure 4.26.
● Replace the JavaJam Coffee House heading with the javalogo.gif, Figure 4.32.
Be sure to include the alt , height , and width attributes on the <img /> tag
for the graphic.
● Configure windingroad.jpg, Figure 4.33, to display on the right side of the
paragraph. Be sure to include the alt , height , and width attributes. Hint :
Use the align="right" attribute on the <img /> tag. Note : In Chapter 6
you'll learn to use CSS to configure this alignment.
Save and test your new index.html page.
2. The Menu Page. Launch Notepad and open the menu.html page from your java-
jam folder. Modify the menu.html page in a similar manner—adding the logo
banner. Save and test your new menu.html page.