Please i need the solution for this tutorial
Tutorial 2 Developing a Web Site HTML and CSS HTML 125 ce the skills wamed in torial using me case rio. w Review Assignments Data Files needed for the Review Assignments camhome.htm, child1.jpg child3.jpg, childtxt.htm, conlogo.jpg, constyles.css, contest1.png-contest3. png contesttxt.htm, flower1.jpg-flower3.jpg, flowertxt.htm, modernizr-1.5.js, photogloss.htm, scenic1.jpg-scenic3.jpg, scenictxt.htm, thirdstip.jpg thumb1.jpg- thumb9.jpg, tipweek.htm Gerry has been working on the CAMshots Web site for a while. During that time, the site has grown in popularity with amateur photographers. Now he wants to host a monthly photo contest to highlight the work of his colleagues. Each month Gerry will pick the three best photos from different photo categories. He's asked for your help in creating the collection of Web pages highlighting the winning entries, Gerry has already created four pages. The first page contains information about the photo contest; the remaining three pages contain the winning entries for child photos, scenic photos, and flower photos. Although Gerry has already entered much of the page content, he needs you to work on creating the links between and within each page. Figure 2-49 shows a preview of the photo contest's home page. Figure 2-49 CAMshots Contest Winners page / camshot News from the Word of Digthegraphy TIPS CONTEST GLOSSARY Contest Winners Next Month's Contest Categories Here are the results for this month's contest in the categories of Child Photos, Flower Photos, and Scenic Photos. I received hundreds of entries and it was difficult to narrow the entries down to three in each category. Thanks to everyone who participated this month Below are thumbnail images of the winning photos. You can click the photos to view larger images of each. These photos are distributed for non-commercial use. If you wish to obtain copies for commercial use, please contact the photographer. Child Photos Please submit your entries to Gerry Hayward Include your name, the photo category, and the photo settings. JPEG photos only Attention: Our friends BetterPhoto.com are having their annual photo contest. Please take this opportunity to submit your work to HTML and CSS Tutorial 2 Developing a Web Site t to the contest.htm filen Apply your knowledge of hypertext links to create a directory of universities and colleges APPLY Figure 2.50 Complete the following: 1. Use your text editor to open the contesttxt.htm, childtxt.htm, scenictxt.htm, and flowertxt.htm files from the tutorial.02 eview folder included with your Data Files Enter your name and the date within each file, and then save them as contest.htm child.htm, scenic.htm, and flower.htm, respectively, in the same folder. 2. Go to the child.htm file in your text editor. Directly below the header element, create a navigation list containing an unordered list with the following list items as hyperlinks: o me home linked to the camhome h ret 1932 b. Tips linked to the tipweek.htm fie c. Contest linked to the contest.htm file che d. Glossary linked to the photogloss.htm file 3. Go to the section element and locate the contest.png inline image. Directly below the inline image, insert an image map with the following properties: d. Set the name of the image map as contestmap b. Add a polygonal hotspot pointing to the child.htm file containing the points (427, 5. (535, 201, (530, 591, and (421, 43). Enter Child Photos as the alternate text for the hotspotree shape "plyCardi. 5,535,20,530,57, 4143" het dit c. Add a polygonal hotspot pointing to the flower.htm file containing the points (539, 57), (641, 841, (651, 46), and (547, 26). Enter Flower Photos as the alternate text for the hotspot d. Add a polygonal hotspot pointing to the scenic.htm file containing the points 1650, 86), (753, 125), (766, 78), and (662, 49). Enter Scenic Photos as the alter- mate text for the hotspot sederetu l t. lo con 4. Apply the contestmap image map to the contest1 inline image. Co n 5. Locate the three h elements naming the three child photo winners. Assign the h2 elements the ids photo, photo2, and photo3, respectively. 6. Save your changes to the file. 7. Go to the flower.htm file in your text editor. Repeat Steps 2 through 6, applying the image map to the contest2.png image at the top of the section element 8. Go to the scenic.htm file in your text editor. Repeat Steps 2 through 6 applying the image map to the contest3.png image at the top of the section element. 9. Go to the contest.htm file in your text editor. Repeat Step 2 to insert a navigation list at the top of the page. 10. Scroll down to the second article. Link the text Child Photos to the child.htm file. Link Flower Photos to the flower.htm file. Link Scenic Photos to the scenic.htm file. 11. Scroll down to the nine thumbnail images (named thumb1.jpg through thumb9.jpg) Link each inline image to the corresponding he heading in the child.htm, flower. him, or scenic.htm file you identified in Step 5. 12. Scroll down to the aside element. Mark the text Gerry Hayward as a hypertext link to an e-mail address with ghaywarde camshots.com as the e-mail address and Photo Contest as the subject line. 13. Mark the text BetterPhoto.com as a hypertext link pointing to the URL http://www. betterphoto.com. Set the attribute of the link so that it opens in a new browser win: dow or tab. 14. Save your changes to the file. 15. Open contest.htm in your web browser. Verify that the e- mail link opens a new mail message window with the subject line Photo Contest Verify that the link to BetterPhoto com opens that Web site in a new browser window or tab. Verify that you can navigate through the Web site using the hypertext links in the navigation list. Finally, click each of the nine thumbnail images at the bottom of the page and verify that each connects to the larger image of the photo on the appropriate photo contest page. Tutorial 2 Developing a Web Site HTML and CSS HTML 127 16. Go to the child.htm file in your web browser. Verify that you can navigate forward and backward through the three photo contest pages by clicking the hotspots in the image map. 17. Submit your completed files to your instructor, in either printed or electronic form, as requested. Tutorial 2 Developing a Web Site HTML and CSS HTML 125 ce the skills wamed in torial using me case rio. w Review Assignments Data Files needed for the Review Assignments camhome.htm, child1.jpg child3.jpg, childtxt.htm, conlogo.jpg, constyles.css, contest1.png-contest3. png contesttxt.htm, flower1.jpg-flower3.jpg, flowertxt.htm, modernizr-1.5.js, photogloss.htm, scenic1.jpg-scenic3.jpg, scenictxt.htm, thirdstip.jpg thumb1.jpg- thumb9.jpg, tipweek.htm Gerry has been working on the CAMshots Web site for a while. During that time, the site has grown in popularity with amateur photographers. Now he wants to host a monthly photo contest to highlight the work of his colleagues. Each month Gerry will pick the three best photos from different photo categories. He's asked for your help in creating the collection of Web pages highlighting the winning entries, Gerry has already created four pages. The first page contains information about the photo contest; the remaining three pages contain the winning entries for child photos, scenic photos, and flower photos. Although Gerry has already entered much of the page content, he needs you to work on creating the links between and within each page. Figure 2-49 shows a preview of the photo contest's home page. Figure 2-49 CAMshots Contest Winners page / camshot News from the Word of Digthegraphy TIPS CONTEST GLOSSARY Contest Winners Next Month's Contest Categories Here are the results for this month's contest in the categories of Child Photos, Flower Photos, and Scenic Photos. I received hundreds of entries and it was difficult to narrow the entries down to three in each category. Thanks to everyone who participated this month Below are thumbnail images of the winning photos. You can click the photos to view larger images of each. These photos are distributed for non-commercial use. If you wish to obtain copies for commercial use, please contact the photographer. Child Photos Please submit your entries to Gerry Hayward Include your name, the photo category, and the photo settings. JPEG photos only Attention: Our friends BetterPhoto.com are having their annual photo contest. Please take this opportunity to submit your work to HTML and CSS Tutorial 2 Developing a Web Site t to the contest.htm filen Apply your knowledge of hypertext links to create a directory of universities and colleges APPLY Figure 2.50 Complete the following: 1. Use your text editor to open the contesttxt.htm, childtxt.htm, scenictxt.htm, and flowertxt.htm files from the tutorial.02 eview folder included with your Data Files Enter your name and the date within each file, and then save them as contest.htm child.htm, scenic.htm, and flower.htm, respectively, in the same folder. 2. Go to the child.htm file in your text editor. Directly below the header element, create a navigation list containing an unordered list with the following list items as hyperlinks: o me home linked to the camhome h ret 1932 b. Tips linked to the tipweek.htm fie c. Contest linked to the contest.htm file che d. Glossary linked to the photogloss.htm file 3. Go to the section element and locate the contest.png inline image. Directly below the inline image, insert an image map with the following properties: d. Set the name of the image map as contestmap b. Add a polygonal hotspot pointing to the child.htm file containing the points (427, 5. (535, 201, (530, 591, and (421, 43). Enter Child Photos as the alternate text for the hotspotree shape "plyCardi. 5,535,20,530,57, 4143" het dit c. Add a polygonal hotspot pointing to the flower.htm file containing the points (539, 57), (641, 841, (651, 46), and (547, 26). Enter Flower Photos as the alternate text for the hotspot d. Add a polygonal hotspot pointing to the scenic.htm file containing the points 1650, 86), (753, 125), (766, 78), and (662, 49). Enter Scenic Photos as the alter- mate text for the hotspot sederetu l t. lo con 4. Apply the contestmap image map to the contest1 inline image. Co n 5. Locate the three h elements naming the three child photo winners. Assign the h2 elements the ids photo, photo2, and photo3, respectively. 6. Save your changes to the file. 7. Go to the flower.htm file in your text editor. Repeat Steps 2 through 6, applying the image map to the contest2.png image at the top of the section element 8. Go to the scenic.htm file in your text editor. Repeat Steps 2 through 6 applying the image map to the contest3.png image at the top of the section element. 9. Go to the contest.htm file in your text editor. Repeat Step 2 to insert a navigation list at the top of the page. 10. Scroll down to the second article. Link the text Child Photos to the child.htm file. Link Flower Photos to the flower.htm file. Link Scenic Photos to the scenic.htm file. 11. Scroll down to the nine thumbnail images (named thumb1.jpg through thumb9.jpg) Link each inline image to the corresponding he heading in the child.htm, flower. him, or scenic.htm file you identified in Step 5. 12. Scroll down to the aside element. Mark the text Gerry Hayward as a hypertext link to an e-mail address with ghaywarde camshots.com as the e-mail address and Photo Contest as the subject line. 13. Mark the text BetterPhoto.com as a hypertext link pointing to the URL http://www. betterphoto.com. Set the attribute of the link so that it opens in a new browser win: dow or tab. 14. Save your changes to the file. 15. Open contest.htm in your web browser. Verify that the e- mail link opens a new mail message window with the subject line Photo Contest Verify that the link to BetterPhoto com opens that Web site in a new browser window or tab. Verify that you can navigate through the Web site using the hypertext links in the navigation list. Finally, click each of the nine thumbnail images at the bottom of the page and verify that each connects to the larger image of the photo on the appropriate photo contest page. Tutorial 2 Developing a Web Site HTML and CSS HTML 127 16. Go to the child.htm file in your web browser. Verify that you can navigate forward and backward through the three photo contest pages by clicking the hotspots in the image map. 17. Submit your completed files to your instructor, in either printed or electronic form, as requested
