Please answer using Nearby.html Index.html E. Return to index.html in your edito
ID: 3797196 • Letter: P
Question
Please answer using
Nearby.html
Index.html
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.
or enter page HTML5 and CSS3, Illustrated Complete AA Independent Challenge 3 Diego Merckx, the manager of Hotel Nato 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 5.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 hl element with an imgelement 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. Saveyour work, then repeat for nearby ht c. In styles.css, create a new style rule forthe 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 hlimg 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.htmlin 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, a a figure element. Within the figure element, add an img element that references the file bridge.jpg in the images fold 2, and enter the Golden Gate Bridge, looking south from Specify a width of 350 and a height of he Marin Headlands toward the Presidio, with downtown San Francisc on the leftExplanation / Answer
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hotel Natoma</title>
<link type="text/css" rel="stylesheet" media="screen" href="natoma.css" />
<link type="text/css" rel="stylesheet" media="print" href="hnprint.css" />
<link rel="shortcut icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="scripts/semantic.js"></script>
<![endif]-->
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/19099802-A96D-F348-BAA2-AFDF25DD7325/main.js" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/5237DD52FDFA-2AAB-843F-D69A-20899091/abn/main.css"/></head>
<body>
<p id="skipnav"><a href="#main">Skip navigation</a></p>
<div id="box">
<h1>
<img src="images/natoma.gif" width="368" height="65" alt="Hotel Natoma" title="" />
</h1>
<nav>
<p id="mainnav">
<a href="index.html">Home</a> •
<a href="nearby.html">What's Nearby</a> •
<a href="http://bit.ly/bb3Sic" target="_blank">Location</a>
</p>
</nav>
<p id="main">A low-impact, Earth-friendly home base in the center of everything San Francisco has to offer.</p>
<figure class="center">
<img src="images/bridge.jpg" width="350" height="232" alt="Golden Gate Bridge" title="" />
</figure>
<p id="contact">568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
</div>
<p>Ernesto Molina HTML5 Unit F, Independent Challenge 3</p>
</body>
</html>
nearby.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hotel Natoma - What's Nearby</title>
<link type="text/css" rel="stylesheet" media="screen" href="natoma.css" />
<link type="text/css" rel="stylesheet" media="print" href="hnprint.css" />
<link rel="shortcut icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="scripts/semantic.js"></script>
<![endif]-->
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/19099802-A96D-F348-BAA2-AFDF25DD7325/main.js" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/5237DD52FDFA-2AAB-843F-D69A-20899091/abn/main.css"/></head>
<body>
<p id="skipnav"><a href="#main">Skip navigation</a></p>
<div id="box">
<h1>
<img src="images/natoma.gif" width="368" height="65" alt="Hotel Natoma" title="" />
</h1>
<nav>
<p id="mainnav">
<a href="index.html">Home</a> •
<a href="nearby.html">What's Nearby</a> •
<a href="http://bit.ly/bb3Sic" target="_blank">Location</a>
</p>
</nav>
<h2 id="main">What's Nearby</h2>
<figure class="right">
<a href="images/asian_lg.jpg"><img src="images/asian_sm.jpg" width="150" height="89" alt="front facade of the Asian Art Museum" title="Click to enlarge" /></a>
<figcaption><a href="images/asian_lg.jpg">Asian Art Museum</a></figcaption>
</figure>
<figure class="right">
<a href="images/cable_lg.jpg"><img src="images/cable_sm.jpg" width="150" height="89" alt="cable car" title="Click to enlarge" /></a>
<figcaption><a href="images/cable_lg.jpg">Cable Cars</a></figcaption>
</figure>
<p>
<a href="http://www.asianart.org/">Asian Art Museum</a><br />
<a href="http://bit.ly/93E5VI">City Hall</a><br />
<a href="http://bit.ly/dnELBZ">Civic Center Plaza</a><br />
<a href="http://www.hocfarmersmarket.org/">Heart of the City Farmer's Market</a><br />
<a href="http://www.sfcablecar.com/">Cable Car turnaround</a><br />
<a href="http://www.unionsquareshop.com/">Union Square</a>
</p>
<p id="contact">568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
</div>
<p>Ernesto Molina HTML5 Unit F, Independent Challenge 3</p>
</body>
</html>