Diego Merckx, the manager of Hotel Natoma, has provided you with a web-ready version of the facility's logo as well as photos of a few local attractions. You incorporate these into the hotel's website.
a. In your editor, open HTM_G-13.html from the IC3 folder where you store your Data Files for this unit, save it as index.html, then repeat to save HTM_G-14.html as nearby.html and HTM_G-15.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, replace the text of the h1 element with an img element referencing the file logo.gif in the images folder. Specify a width of 368 and a height of 65, and add Hotel Natoma as the alt text. Save your work, then repeat for nearby.html.
c. In styles.css, create a new style rule for the img element at the end of the reset styles section, then add the declarations max-width: 100%; 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. In the header section, create a new style rule using the h1 img selector with the declarations margin: 0 auto; and display: block;. Save your changes, then preview index.html and nearby.html in a browser.
d. Return to nearby.html in your editor, then link the logo img element to index.html. Save your changes, refresh or reload nearby.html in a browser, click the logo, then verify that index.html opens.
e. Return to index.html in your editor, then within the article element, before the p element, add a figure element. Within the figure element, add an img element that references the file bridge.jpg in the images folder. Specify a width of 350 and a height of 232, and enter the Golden Gate Bridge, looking south from the Marin Headlands toward the Presidio, with downtown San Francisco on the left as alt text. After the img element, add a figcaption element containing the text Golden Gate Bridge. Save your changes.
f. Return to styles.css, then in the style rule that sets border, padding, and margin to 0 in the reset styles section, add the figcaption and figure selectors to the list of selectors. In the main content section and below the article h3 rule, add a style rule based on the article figure selector that specifies a maximum width of 100%, a left margin of lem, and floats the element to the right. Below the rule you just added, add a style rule based on the article figcaption selector that center-aligns text and sets the font weight to bold. In the article style rule, add the declaration overflow: auto;. Save your changes, then refresh or reload index.html in your browser. Your document should match FIGURE G-34.
Figure G-34: see image.
g. Return to nearby.html in your editor, then within the article element and below the h3 element with the text Asian Art Museum, add a figure element. Within the figure element, add an img element that references the file aam.jpg in the images folder. Specify a width of 450 and a height of 337, and enter the San Francisco Asian Art Museum, a beaux arts building composed of large granite bricks with columns above the entry doors as alt text. Below the img element, add a figcaption element containing the same text as the preceding h3 element, Asian Art Museum. Repeat for the remaining four h3 elements using the details in TABLE G-6, then save your changes.
Table G-6: see image.
h. In styles.css, scroll to the main content section, then add the declaration clear: right; to the article h3 style rule. Save your changes, then refresh or reload hours.html in your browser.
i. In your browser, open the file map.png from the images folder. Return to nearby.html in your editor, scroll as needed to the article element, add a p element above the h3 element containing the text Asian Art Museum. Within the p element, add an img element that references map.jpg in the images folder, with a width of 465, a height of 347, alt text of map of the area around Hotel Natoma, and class value of imagemap.
j. Below the p element you just created, add a map element with a name value of nearby. In your editor, open the file areas.txt from the IC3 folder, then within the map element add area elements for the 5 shapes described in the file.
k. In the < img> tag for the map.png file, add a usemap attribute to use the map element as an image map, then save your changes. 1. In styles.css, at the bottom of the main content section, add a style rule with the .imagemap selector and the declarations border: 2px solid black;, margin: 0 auto; and max-width: none;. Below this style rule, add a style rule with the imagemap img selector that sets max-width to none. Save your changes.
l. In styles.css, at the bottom of the main content section, add a style rule with the .imagemap selector and the declarations border: 2px solid black;, margin: 0 auto; and max-width: none;. Below this style rule, add a style rule with the imagemap img selector that sets max-width to none. Save your changes.
m. Refresh or reload nearby.html in your browser. Your document should match FIGURE G-35.
Figure G-35: see image.
n. Return to index.html in your editor, then add link elements for a favicon, an Apple touch icon, and an Android touch icon with a size of 192x192. Save your changes, 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. FIGURE G-36 shows the touch icon on an iOS device.
Figure G-36: see image.
o. Repeat Step n for nearby.html.
p. Validate all your HTML and CSS documents.