Lab3

Using Graphics & Visual Elements

In this lab, we add images to the websites, create a new page, and modify existing page.

JavaJam Coffee House

See the previous labs for an introduction to the JavaJam Coffee House Case Study. The Home page was created. Using the existing
website as a starting point, you will modify the design of the page and create a new page, the Music page.
You have four tasks in this case study:
1. Create a new folder for this JavaJam case study, and obtain the starter image files.
2. Modify the Home page to display the winding road image.
3. Create a new Music page.
4. Modify the style rules in the javajam.css file as needed.

Figure 1 New JavaJam Home page

Task 1: Create a folder on your hard drive or portable storage device called javajam4. Copy all the files from your previous lab -
javajamcss folder into the javajam4 folder. Obtain the images used in this case study from the javajam folder. The images are
background.gif, greg.jpg, gregthumb. jpg, javajamlogo.jpg, melanie.jpg, melaniethumb.jpg, mugs.jpg, and windingroad.jpg. Save
them in your javajam4 folder.

Task 2: The Home Page. Launch a text editor, and open the index.html file from your javajam4 folder. Modify the index.html file to
look similar to the web page shown in Figure 1.

1. Replace the “Relax at JavaJam” text contained within the h2 element with “Follow the Winding Road to JavaJam.”
 2. Code an img tag for the windingroad.jpg image above the h2 element in the main content area. Be sure to include the alt,
height, and width attributes. Also configure the image to appear to the right of the text content by coding the
align="right" attribute on the <img> tag.

Note: The W3C HTML validator will indicate that the align attribute is invalid. We’ll ignore the error for this case study. In
Chapter 6 you’ll learn to use the CSS float property (instead of the align property) to configure this type of layout.

3. Add a paragraph with the following text below the h2 element: “We’re a little out of the way, but take a drive down Route
42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You’ll feel right at home at
JavaJam!”

4. Configure the text “JavaJam Coffee House features:” within an h3 element below the paragraph and above the unordered
list. Save and test your new index.html page. It will be similar to Figure 1, but you’ll notice that a few final touches
(including the background image and logo image) are missing; you’ll configure these with CSS in Task 4.

Task 3: The Music Page. Use the home page as the starting point for the Music page. Launch a text editor, and open the index.html
file in the javajam4 folder. Save the file as music.html. Modify the music.html file to look similar to the Music page, as shown in
Figure 2:

Figure 2 JavaJam music.html

1. Change the page title to an appropriate phrase.

2. Delete the image and the list from the page.
3. Configure “Music at JavaJam” as the text within the h2 element.
4. Configure the following as the text within the paragraph element: “The first Friday night each month at JavaJam is a special
night. Join us from 8 pm to 11 pm for some music you won’t want to miss!”
5. The rest of the content in the page will consist of two areas describing music performances. The area describing each music
performance consists of an h4 element, a div assigned to the class named details, and an image link.
January Music Performance:
• Configure an h4 element with the following text: January
• Code an opening div tag. Assign the div to the class named details.
• Configure the melaniethumb.jpg as an image link to melanie.jpg. Code appropriate attributes on the <img> tag.
• Configure the following text within the div after the image link: Melanie Morris entertains with her melodic folk style.
February Music Performance:
Configure an h4 element with the following text: February
Code an opening div tag. Assign the div to the class named details.
Configure the gregthumb.jpg as an image link to greg.jpg. Code appropriate attributes on the <img> tag. Configure the following
text within the div after the image: Tahoe Greg is back from his tour. New songs. New stories.

Save the music.html file. If you test your page in a browser, you’ll notice that it looks different from Figure 2—you still need to
configure style rules.

Task 4: Configure the CSS. Open javajam.css in a text editor. Edit the style rules as follows:
1. Modify the body element selector style rules. Configure background.gif as the background image.
2. Modify the style rules for the wrapper id. Configure the background color to be #FEF6C2. Configure a minimum width of
900px (use min-width). Configure a maximum width of 1280px (use max-width). Use the box-shadow property to
configure a drop-shadow effect.
3. Modify the header element selector style rules. Remove the text-align declaration. Code a declaration to set the
height to 150px. Configure declarations to display the javajamlogo.jpg image as a background image without repeating.
4. Modify the h1 element selector style rules. Remove the line-height declaration. Configure declarations to set the top
padding to 45px, left padding to 220px, and font size to 3em.
5. Modify the nav element selector style rules. Configure declarations for 1.5em font size size and 10px of top padding.
6. Code a new style rule to prevent the hyperlinks in the nav area from displaying the default underline. Use nav a {
text-decoration: none; }
7. Modify the footer element selector style rules. Configure declarations for 10px of bottom padding and a solid 2px top
border (use #221811 as the color).
8. Add a new style rule for the h4 element selector that configures a background color (#D2B48C), font size (1.2em), left
padding (10px), and bottom padding (5px).
9. Add a new style rule for the main element selector to configure 2em of padding on the left, right, and bottom. Also
configure display: block; (this will prevent rendering issues in versions of Internet Explorer that do not support the
HTML5 main element).
10. Add a new style rule for the class named details to add 20% left and right padding. Notice how this rule adds empty
space on either side of the music performance description and image on the music.html page.
11. Add a new style rule for the img element selector that configures 10px left padding and 10px right padding.

Save the javajam.css file. Test your pages (index.html, and music.html) in a browser. If your images do not appear or your image links
do not work, examine your work carefully. Use Windows Explorer or Mac Finder to verify that the images are saved in your javajam4
folder. Examine the src attribute on the <img> tags to be sure you spelled the image names correctly. Another useful
troubleshooting technique is to validate the HTML and CSS code. See Chapters 2 and 3 for Hands-On Practice exercises that describe
how to use these validators.

Reference: Felke-Morris, Terry. Web development and design foundations with HTML5.