Independent Challenge 3 As you continue your work on the website for Hotel Natoma, you incorporate links between pages as well as to external websites, and incorporate navigational accessibility features.

Independent Challenge 3 As you continue your work on the website for Hotel Natoma, you incorporate links between pages as well as to external websites, and incorporate navigational accessibility features. a. In your editor, open the file HTM_F-17.html from the IC3 folder where you store your Data Files for this unit, save it as index.html, then repeat to save the file HTM_F-18.html as nearby.html, and HTM_F-19.css as styles.css. b. Within the comment section at the top of each file, enter your first and last names and today's date, then save your changes. c. Return to index.html in your editor, then below the header element add a nav element with a class value of sitenavigation d. Within the nav element, create 3 p elements containing the text Home, What's Nearby, and Location. Link the text Home to index.html and What's Nearby to nearby.html. (Hint: Replace the curly apostrophe in What's Nearby with the character reference ’.) e. In your browser, navigate to a map service, then, using the address in the footer element of index.html, open a map showing that location. Copy the URL (or a short link) to the Clipboard, return to index.html in your editor, then, using the URL you copied, add a link to the word Location on the nav bar, specifying that the file should open in a new browser tab. Save your changes. f. Copy the nav element from index.html, return to nearby.html in your editor, then paste the nav element below the header element. Save your changes. g. Return to styles.css in your editor, above the main content section add a comment containing the text site navigation, then below the comment, create the following style rules: For the nav element with the class value sitenavigation, set the width to 20%, padding to 2%, and float the element on the left For p elements within the nav element with the class value sitenavigation, set the bottom margin to 0.5em. For default links within the nav element with the class value sitenavigation, set text color to white, the font weight to bold, and remove underlines. For visited links within the nav element with the class value sitenavigation, set text color to #ddd. For links that the mouse pointer is over or that have the focus and that are within the nav element with the class value sitenavigation, create a text shadow with 0 horizontal offset, O vertical offset, 5px blur, and a color of #082008 For links that are being clicked and that are within the nav element with the class value sitenavigation, set a relative position 1px down from the top and 1px over from the left. h. Save your changes to styles.css, return to index.html in your editor, then in the opening

tag in the article element, add an id value of contentstart. i. Below the opening

tag with the class value container, add a p element with the class value skipnavigation. Within the p element, add the text Skip navigation and link it to the element with the id value contentstart. Save your changes. j. Repeat Steps h and i for nearby.html, adding the id value to the h2 element. j. Repeat Steps h and i for nearby.html, adding the id value to the h2 element. k. Return to styles.css in your editor, then above the header section, add a comment containing the text skip navigation link. Below it, add the following style rules: For a elements within the p element with the class value skipnavigation, set an absolute position -10000px from the left. For a elements with the focus that are within the p element with the class value skipnavigation, set the position 0.2em from the left and 0.2em from the top, set the background color to linen, set the text color to #082008, and set a z-index of 2. 1. In the print styles section, add a style rule before the existing first style rule that sets float to none for the article element and sets its width to 100%, then add another style rule before the @page rule that removes nav elements from the layout for printed output. Inserting and Working with Links 165 Independent Challenge 3 (continued) m. Save your changes, open nearby.html in a browser, FIGURE F-26 then compare it to FIGURE F-26. Hellom the n. Test all the links on both index.html and nearby. file:///C:/Users/sasha, 000/Documents/29049.HTML_UF_Data_Files/C3earby html, test the Skip navigation link using a Hotel Natoma keyboard, then create a print preview and verify that the nav bar is not displayed, the article element is positioned at the left edge of the container, and all content is displayed as black text on a white background. 0. Validate the code for your web pages and style sheet. Home What's Nearby Location What's Nearby Asian Art Museum City Hall Civic Center Plaza United Nations Plaza Cable Car turnaround Union Square 564 Naloma St. San Francisco, CA 94103. (415) 565-8378