Unit N IC3

Independent Challenge 3 Diego Merckx, the manager of the Hotel Natoma, would like you to incorporate social media tools i website. You'll add Like and Tweet buttons, embedded content, and a Twitter feed nto the Hotel Natoma a. In your editor, open HTM_N-11.html from the IC3 folder where you store your Data Files for this unit, save it ats index.html, then repeat to save HTM N-12.html as guest.html and HTM N-13.css as styles.css. In t comment section at the top of each file, enter your name and today's date where indicated, then save the fi b. In index.html, add an empty div element with the class value social-media-buttons after the nav element and before the article element. Within the new div element, add code for a Facebook Like button f your choice and a Twitter Tweet button with the default text Check out this great Earth-friendly hotel in the heart of San Francisco! (Hint: Be sure to add the div and script elements for the Facebook Like button just after the opening tag.) Save your changes, then repeat for guest.html c. In styles.css and below the site navigation section, create a new section with the comment text social me buttons, then below the comment add a style rule for the element with the class value social-media-buttons that creates margins of 0.4em 0.6em and absolutely positions the element lem from the top and lem from the right of the positioned parent element. Add a rule for div elements within the element with the class value social-media-buttons and for iframe elements within the element with the class value social-media-buttons that sets the display property to inline-block and sets the vertical-align property to middle. Save your changes, open index.html in a browser, verify that the buttons are displayed at the bottom of the nav bar, then repeat for guest.html. (Note: To view the Like button, the web page must be opened from a web server.) FIGURE N-30 HotelNatomd ? d. Return to guest.html in your editor, then below the h2 heading Guestbook, add code to embed a tweet that contains the text San Francisco (or #sanfrancisco). Below the code for the tweet, add code to embed an Instagram image related to San Francisco. (Hint: If you don't have access to an Instagram account and a mobile device, you can choose a photo from one of the URLs used in this unit, such as instagram.com/usfws.) Save your changes, refresh or reload guest.html in your browser, then verify that the tweet and the image are displayed. Your page should resemble the one shown in FIGURE N-30 Return to index.html in your editor, then replace the content of the figure element with code to display your e. FIGURE N-31 HotelNatoma itter account feed with a height of 250px. (Hint: Set the height when generating the widget at twitter.com, not in your CSS code.) Save your changes, refresh or reload index html in your browser, then verify that the fed is displayed Your page should resemble the one shown in FIGURE N-31 f. Validate your HTML and CSS code. (Note: You can ignore any validation errors stemming from widgets you inserted A low-impact, Earth- friendly home base in the center of everything San Francisoo has to offer including warnings about deprecated attributes.) 402 Integrating Social Media