(Solved): HTML5 CSS3 Unit G Independent Challenge 2 Independent Challenge 2 You incorporate the logo for th ...

HTML5 CSS3 Unit G Independent Challenge 2

Independent Challenge 2 You incorporate the logo for the Murfreesboro Regional Soccer League into the organizational website that you are creating. You also use an image map to link the parts of a soccer field to explanations of their functions. a. In your editor, open HTM_G-10.html from the IC2 folder where you store your Data Files for this unit, save it as index.html, then repeat to save HTM_G-11.html as field.html and HTM_G-12.css as styles.css. In the comment at the top of each file, enter your name and today's date where indicated, then save the files. b. In index.html, within the header element and beneath the \( h 1 \) element insert a div element, then within the div element add an img element that references the file mrsl.png in the images folder. Specify a width of 224 , a height of 105 , and a blank alt value. Save your changes, then repeat for field.html. c. In styles.css, within the header section, add declarations to the \( h 1 \) style rule to set the width to \( 61 \% \) and float the element on the right. Create a rule based on the header div selector that sets the width to \( 33 \% \) and floats the element left. In the header style rule, add the declaration overflow: auto; d. Create a new style rule for the img element at the end of the reset styles section, then add the declarations max-width: \( 1008 ; \), height: auto;, width: auto;, and display: block;. Add the img selector to the list of selectors in the style rule that sets border, padding, and margin to 0 in the reset styles section. Save your work, preview index.html and field.html in your browser, then verify that the logo graphic is displayed on the left side of the header and the \( h 1 \) text is displayed on the right side of the header. e. Return to field.html in your editor, then link the logo image to index.html. Save your changes, refresh or reload field.html in your browser, then verify that clicking the logo image opens index.html. f. Return to styles.css in your editor, change the background-color declaration in the .container style rule in the body and page container section to use the background shorthand property, then add a second background property that specifies the file grass.jpg in the images folder as the background image. In the print styles section, replace the background-color property with the background property in the aside, body, .container, footer, header style rule. Save your changes, refresh or reload index.html in your browser, then verify that a background image of grass is displayed. (Hint: The header and article elements have their own background colors, so the background image should be visible only behind the nav bar.) g. In your browser, open the file field.jpg from the images folder in the IC2 folder where you store your Data Files for this unit. Return to field.html in your editor, in the article FIGURE G-32 element add a blank line above the \( h 3 \) element containing the text Goal, then add a p element. Within the p element, add an img element that references field.jpg in the images folder, with a width of 450 , a height of 293 , alt text of diagram of a soccer field, and class value h. Below the p element you just created, add a map element with a name value of \( f \) ieldmap. In your editor, open the file areas.txt from the IC2 folder, then within the map element add ar i. In the tag for the field.jpg file, add a usemap attribute with a value of #fieldmap, then save your changes. j. In styles.css, at the bottom of the main content section, add a style rule with the . imagemap selector and the declaration max-width: none;, then save your changes. k. Refresh or reload events.html in your browser. Your document should match FIGURE G-32. Inserting and Working with Images Independent Challenge 2 (continued) 1. Test each shape in the image map, decreasing the height of your browser window if necessary for testing. m. In index.html, add a link element that references favicon.ico in the images folder as a favicon. Add another link element that references apple-touch-icon.png in the images folder as an Apple touch icon. Add a third link element that references android.png in the images folder as a touch icon, specifying its dimensions as 192x192. Save your changes, then repeat for field.html. n. Refresh or reload index.html in your browser, then verify that the favicon is displayed on the browser tab. Open index.html on a mobile device, save a link to the page on the home screen, then verify that the touch icon is displayed. FlGURE G-33 shows the touch icon on an Android device. 0. Validate all your HTML and CSS documents. hl f font-size: 2.4em; line-height: 1.4em; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: 0 0 \( 5 \mathrm{px} \) white: 3 \( / \) * site navigation * / nav.sitenavigation \{ padding: 28; width: 258; position: absolute; left: 0 ; nav.sitenavigation a \{ margin-bottom: \( 0.6 \mathrm{em} \); padding: \( 0.2 \mathrm{em} \); display: block; background-color: #c8f098; font-weight: bold; 3 nav.sitenavigation a:link \{ color: black; text-decoration: none: 3 nav.sitenavigation a:visited \{ color: #888; f nav.sitenavigation a:hover, nav.sitenavigation a:focus \{ color: black; background-color: white; 3 nav.sitenavigation a:active \{ position: relative; top: 1px; left: 1px; 3 \( / \star \operatorname{main} \) content * \( / \) article \{ padding: 1em 38; width: 658 ; position: relative; left: 298; background-color: white: 3 article h2 margin: \( 000.4 \mathrm{em} \); font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.6em; \( -1 \)