Text: Web Development and Design Foundations with HTML5 (7th edition) Chapter 11

ID: 3854587 • Letter: T

Question

Text: Web Development and Design Foundations with HTML5 (7th edition) Chapter 11. Pacific Trails Resort

Pacific Trails Resort Home Yurts Activities Enjoy Nature in Luxury Pacific Trails Resort offers a special lodging experience on the Califomia North Coast. Relax in serenity with panoramic views of the Pacific Ocean Private yurts with decks overloolding the ocean Activities lodge with fireplace and gilt shop Nightly fine dining at the Overlook Cafe Heated outdoor pool and whirlpool Guided hiking tours of the redwoods Pacific Trails Resort 2010 Pacific Trails Road Zephyr, CA 95555 88-555-5555 Figure 11.26 Pacific Trais Resort home page Hands-0n Practice Case Study Task 1: Create a Folder. Create a folder called pacific11. Copy all of the files from your Chapter 9 pacific9 folder into the pacific11 folder. Copy the following files from the chapterl1/casestudystarters folder in the student files and save them in your pacificl1 folder: pacifictrailsresort.mp4, pacifictrailsresort.ogv, pacifictrailsresort.jpg, and pacifictrailsresort.swf. Copy the following files from the chapter1 l/starters/gallery folder in the student files and save them in your pacific11 folder: photo2.jpg, photo3.jpg, photo4.jpg. photo6.jpg, photo2thumb.jpg, photo3thumb.jpg, photo4thumb.jpg, and photo6thumb.jpg Task 2: Configure the Video. Launch a text editor and open the home page (index.html) Replace the image with an HTML5 video control. Configure the video, source, and embed elements to work with the following files: pacifictrailsresort.mp4, pacifictrailsresort.ogv, pacifictrailsresort.swf, and pacifictrailsresort.jpg. The dimensions of the video are 320 pixels wide by 240 pixels high. Save the file. Check your HTML syntax using the W3C validator (http:validator.w3.org). Correct and retest if necessary Next, configure the CSS. Launch a text editor and open pacific.css. Locate the main img selector which is configured with style rules to float to the left and have padding on the right. Add the main video and main embed selectors to the style rule as follows: main img, main video, main embed float: left; padding-right: 20px; padding-bottom: 20px;

Explanation / Answer

HTML and CSS files for your assignment. Let me know you need images as well.

activities.html
------------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort :: Activities</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

<div id="gallery">


   <figure>
    <img src="photo2.jpg" alt="Pacific Trails" width="200" height="150">
    </figure>


    <ul>
   <li><a href="photo2.jpg"><img src="photo2thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo2.jpg" width="200" height="150" alt="Pacific Trails"><br>Ocean View</span></a></li>
     <li><a href="photo3.jpg"><img src="photo3thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo3.jpg" width="200" height="150" alt="Pacific Trails"><br>Mountain View</span></a></li>
     <li><a href="photo4.jpg"><img src="photo4thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo4.jpg" width="200" height="150" alt="Pacific Trails"><br>Beach View</span></a></li>
     <li><a href="photo6.jpg"><img src="photo6thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo6.jpg" width="200" height="150" alt="Sunset"><br>Sunset View</span></a></li>
   </ul>

</div>
</div>

<div id="footer">
    Copyright © 2014 Pacific Trails Resort<br>
    <a href="mailto:xyz@pacifictrails.com">xyz@pacifictrails.com</a>
</div>
    </div>
</body>
</html>
---------------------------------------------------------------------
index.html
--------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California
North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<div id="content">
    <li>Private yurts with decks overlooking the ocean</li>
    <li>Activities lodge with fireplace and gift shop</li>
    <li>Nightly fine dining at the Overlook Cafe</li>
    <li>Heated outdoor pool and whirlpool</li>
    <li>Guided hiking tours of the redwoods</li>
</div>

<div id="contact">
    <span class="resort">Pacific Trails Resort</span><br>
    12010 Pacific Trails Road<br>
    Zephyr, CA 95555<br><br>
    888-555-5555<br><br>
</div>
</div>
<div id="footer">
    Copyright © 2014 Pacific Trails Resort<br>
    <a href="mailto:xyz@pacifictrails.com">xyz@pacifictrails.com</a>
</div>

</body>
</html>
------------------------------------------------------------------
reservations.html
---------------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort :: Reservations</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

<body>
    <div id="wrapper">
<h1>Pacific Trails Resort</h1>
<nav>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="yurts.html">Yurts</a></li>
    <li><a href="activities.html">Activities</a></li>
    <li><a href="reservations.html">Reservations</a></li>
    </ul>
    </nav>
<div id="content">
    <h2>Reservations at Pacific Trails</h2>
    <h3>Contact Us Today!</h3>

    <p>Required fields are marked with an asterisk *</p>

<form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<label for="myFName">*First Name</label>
<input type="text" name="myFName" id="myFName" required="required"><br>
<label for="myLName">*Last Name</label>
<input type="text" name="myLName" id="myLName" required="required"><br>
<label for="myEmail">*E-mail</label>
<input type="email" name="myEmail" id="myEmail" size="40" required="required"><br>
<label for="mobile">Phone Number:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12"><br>
<label for="myDate">Arrival Date:</label>
<input type="date" name="myDate" id="myDate"><br>
<label for="Nights">Nights:</label>
<input type="number" name="Nights" id="Nights" min="1" max="14"><br>
<label for="mycomments">*Comments:</label>
<textarea name="mycomments" id="mycomments" rows="2" cols="32" required="required"></textarea><br>

</form>
<br>

</body>
</html>
--------------------------------------------------------------------------
yurts.html
-----------------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort :: Yurts</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

    <h3>What is a yurt?</h3>
    <p>Our luxury yurts are permanent structures four feet off the ground. Each yurt has canvas walls,
    a wooden floor, and a roof dome that can be opened.</p>

    <h3>How are the yurts furnished?</h3>
    <p>Each yurt is furnished with a queen-size bed with down quilt and a gas-fired stove.
    The luxury camping experience also includes electricity and a sink with hot and cold
    running water. Shower and restroom facilities are located in the lodge.</p>
    <h3>What should I bring?</h3>
    <p>Bring a sense of adventure and some time to relax! Most guests also pack comfortable
    walking shoes and plan to dress for changing weather with layers of clothing.</p>


    <h3>Yurts Packages</h3>
<p>A variety of luxury yurt packages are available. Choose a package below and contact
us to begin your reservation. We’re happy to build a custom package just for you!</p>

<table border="1">
<tr>
<th>Package Name</th>
<th>Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
<tr>
<td>Weekend Escape</td>
<td id="text">Two breakfasts, a trail map, and a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Zen Retreat</td>
<td id="text">Four breakfasts, a trail map, a picnic snack, and a pass for the daily
sunrise Yoga session</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
    <td>Kayak Away</td>
    <td id="text">Two breakfasts, two hours of kayak rental daily, and a trail map</td>
    <td>2</td>
    <td>$500</td>
</tr>
</table>

</div>

<div id="footer">
    Copyright © 2014 Pacific Trails Resort<br>
    <a href="mailto:xyz@pacifictrails.com">xyz@pacifictrails.com</a>
</div>
    </div>
</body>
</html>
----------------------------------------------------------------------------------------
pacific.css
----------------------------------------------------------
body {
   color: #666666;
   background-color: #FFFFFF;
   }

h1 {
   color: #FFFFFF;
   background-color: #000033;
   }

nav {
   float: left; width: 160px;
       font-weight: bold;
   }

h2 {
   color: #3399CC;
   font-family: Georgia, "Times New Roman", serif;
   }

dt {
color: #000033
}

.resort {
   color: #5C7FA3;
   font-weight: bold;
   }

h1 {
   background-image: url(sunset.jpg);
   background-repeat: no-repeat;
   background-position: right top;
   padding: 10px;
   font-family: Georgia, "Times New Roman", serif;
   margin-bottom: 0;
   }

h3 {
   color: #000033;
   font-family: Georgia, "Times New Roman", serif;
   }

body {
   background-image: url(ptrbackground.jpg);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 97%;
   }

#wrapper {
   margin-left: auto;
   margin-right: auto;
   min-width: 960px;
   width: 80%;
   background-color: #90c7e3;
   }

#content {
       padding: 1px 20px 55px 30px;
       margin-left: 190px;
       list-style-position: inside;
       list-style-image: url(marker.gif);
       background-color: #ffffff;
   }

#contact {
       font-size: 90%;
       padding: 1px 20px 20px 5px;
   }

#footer {
   padding: 20px;
   font-size: 75%;
   font-style: italic;
   font-family: Georgia, "Times New Roman", serif;
   background-color: #ffffff;
   margin-left: 190px;
   clear: both;
   }

#content img, #content video, #content embed {
       float: left;
       padding-right: 20px;
   }

nav ul {
   list-style-type: none;
   padding: 20px;
   }

nav a {
   font-size: 1.2em;
   text-decoration: none;
   -webkit-transition: color 3s ease-out;
    -moz-transition: color 3s ease-out;
    -o-transition: color 3s ease-out;
    transition: color 3s ease-out;
   }

nav a:visited {
color: #344873;
}

nav a:hover {
color: #ffffff;
}

header, hgroup, nav, footer, figure, figcaption, aside, section,
article {
display: block;
}

#mobile {
display: none;
}

#desktop {
display: inline;
}

img {
   max-width: 100%;
   height: auto;
   }

label {
   float: left;
   display: block;
   text-align: right;
   width: 120px;
   padding-right: 10px;
   }

input, textarea {
   display-block;
   margin-bottom: 20px;
   }

#gallery {
position: relative;
height: 200px; }

#gallery ul {
   list-style-type: none;
       width: 300px;
   }

#gallery li {
   display: inline;
        float: left;
   padding: 10px;
   }

#gallery img {
border-style: none;
}

#gallery a {
   text-decoration: none;
        text-align: left;
   color: blue;
   }

#gallery span {
   position: absolute;
        left: -1000px;
        opacity: 0;
   }

#gallery a:hover span {
           position: absolute;
           top: 16px;
           left: 320px;
           text-align: center;
                   opacity: 1;
       }

figure {
   position: absolute;
   left: 280px;
   text-align: center;
        opacity: .25;
   }

@media only screen and (max-width: 768px) {
body { margin: 0; }
#wrapper { min-width: 0;
   width: auto; }
#content { margin-left: 0; }
nav { float: none;
   width: auto;
   padding: 0; }
nav ul { text-align: center; }
nav li { padding: 0 0.75em 0 .75em;
   display: inline; }
#footer { margin-left: 0; }
}

table {
   border: 1px solid #3399CC;
   width: 80%;
   border-spacing: 0;
   }

td, th {
   padding: 5px;
   border: 1px solid #3399CC;
   }

td {
text-align: center;
}

#text {
text-align: left;
}

tr:nth-of-type(odd) {
background-color: #F5FAFC;
}

@media only screen and (max-width: 480px) {
body { margin: 0; }
#wrapper { width: auto;
   min-width: 0;
   margin: 0; }
#content { padding: 0.1em 1em 0.1em 1em;
   font-size: 90%;
   margin: 0; }
h1 { margin: 0;
   font-size: 1.5em;
   padding-left: 0.3em; }
nav ul { padding: 0; }
nav li { display: block;
   margin: 0;
   border-bottom: 2px solid #330000; }
nav a { display: block; }
#content img { float: none;
   padding: 0;
   margin: 0.1em; }
#content ul { list-style-position: outside; }
#mobile { display: inline; }
#desktop { display: none; }
label { float: none;
text-align: left; }
#gallery { display: none; }
}

iframe {
   position:relative;
   float:left;
   margin-right:20px;
}

Navigate

Text: Web Development and Design Foundations with HTML5 (7th edition) Chapter 11

TextBook: Staffing Organization ( Eight Edition) Pages: attached above 487-488 E

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Text: Web Development and Design Foundations with HTML5 (7th edition) Chapter 11

Question

Explanation / Answer

Related Questions

Navigate