I need help!

TASK 1: THE WEBSITE FOLDER. Create a folder on your hard drive or portable storage device called javajam4. Copy all the files from your

Chapter 3L javajamcss folder into the javajam4 folder. Obtain the images used in this case study from the student files. Copy all the files from the

chapter/starters/iavajam folder into vour javajam4 folder.

TASK 2: THE HOME PAGE. Launch a text editor, and open the index.html file from your javajam4 folder. It is common for the Home page of a website to

have a slightly different layout than the content pages. Modify the

index.html file to look similar to the web page shown in Figure 4.471.

Configure a div element to display the hero.jpg image. Code an opening div tag assigned to the id named homehero after the closing nav tag. Next, code a closing div tag. As shown in the wireframe in Figure 4.48, this div is located between the nav element and the main element. There is no HTML or text content for this div. The purpose of this div is to display a large image (configured with CSS in

Task 5).

Replace the "Relax at JavaJam" text contained within the h2 element with "Follow the Winding Road to JavaJam."

Add a paragraph with the following text below the h2 element and above the existing paragraph: "We're a little out of the way, but take a drive in the country down Garrett Bay Road to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at JavaJam!"

Configure the text "JavaJam Coffee Bar features:" within an h3 element below the second paragraph and above the unordered list.

Save and test your new index.html page. It will be similar to Figure 4.471, but you'll notice that a few final touches (including the background image and the winding road image) are missing; you'll configure these with CSS in Task 5.

TASK 3: THE MENU PAGE.

Launch a text editor, and open the menu.html page from your javajam4 folder. Modify the menu.html file to look similar to the web page shown in Figure 4.491.

Code an img element for the mugs.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 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 61, you'll learn to use the CSS float property (instead of the align attribute) to configure this type of layout.

Add a paragraph with the following text below the h2 element: "Indulge in our locally roasted free-trade coffee and enjoy the aroma ,the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you purchase - ask the barista for details." Hint: See Appendix BI, "Special Characters," for the character code to display the em dash (-).

Save and test your new menu.html page. It will be similar to Figure 4.491, but missing a few final touches (see Task 5).

TASK 4: THE MUSIC PAGE.

Use the Menu page as the starting point for the Music page. Launch a text editor, and open the menu.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 4.50 :

Change the page title to an appropriate phrase.

Delete the image and description list from the page.