CCF_100/ASDV-WebDev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Semester 3 pog

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-08-16 17:31:33 -05:00
parent 2dc89a3b93
commit a33c99cbd2
1558 changed files with 439 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
Semester 1/Chapter ZIPs/HTML/chapter7/7.1/box1.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
.div1 { width:200px;
height:200px;
background-color:#D1ECFF;
border: 3px dashed #000000;
padding:5px;
}
.div2 { width:100px;
height:100px;
background-color:#FFFFFF;
border: 3px ridge #000000;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<div class="div1">
This is the first box.
</div>
<div class="div2">
This is the second box.
</div>
</body>
</html>

31
Semester 1/Chapter ZIPs/HTML/chapter7/7.1/box2.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
.div1 { width:200px;
height:200px;
background-color:#D1ECFF;
border:3px dashed #000000;
padding:5px;
}
.div2 { width:100px;
height:100px;
background-color:#FFFFFF;
border:3px ridge #000000;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<div class="div1">
This is the outer box.
<div class="div2">
This is the inner box.
</div>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.10/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

25
Semester 1/Chapter ZIPs/HTML/chapter7/7.10/index.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kayak Adventure</title>
<style>
.hero { position: relative; }
.hero h1 { position: absolute;
z-index: 999;
top: 40%;
left: 10%;
color: rgba(255, 255, 255, 0.6);
font-family: Georgia, serif;
width: 40%;
}
</style>
</head>
<body>
<div class="hero">
<h1>Your next adventure is only a paddle away...</h1>
<img src="beached.jpg" alt="kayaks on the beach" width="900" height="578">
</div>
</body>
</html>

112
Semester 1/Chapter ZIPs/HTML/chapter7/7.11/index.html Normal file
View File

@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body {font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
margin-top: 40px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
nav { position: fixed; top: 0; left: 0;
height: 40px;
min-width: 40em;
width: 100%;
background-color: #B3C7E6;
z-index: 9999;
}
nav ul { list-style-type: none;
text-align: right;
font-size: 1.5em;
margin: 5px;
padding-right: 10%;
}
nav li { display: inline; }
nav a { text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
main { padding: 20px 20px 0 20px;
background-color: #ffffff;
color: #000000;
display: block;
}
main img { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>Copyright &copy;
</footer>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.11/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.11/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

134
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/index.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>KayakDoorCounty.net</title>
<meta charset="utf-8">
<style>
body { font-family: Tahoma, Verdana, Arial, sans-serif;
margin: 0; padding: 0;
}
.hero {
background-image: url(beached.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.tourshero {
background-image: url(kayaks.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.rentalshero {
background-image: url(rentals.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.contacthero {
background-image: url(lonekayak.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
nav { z-index:9999;
position: fixed;
top: 0;
left: 0;
padding: .5em;
height: 40px;
background:rgba(25,25, 25, 0.70);
width: 100%;
font-size: 120%;
font-weight: bold;
min-width: 900px; }
nav ul { list-style-type: none;
margin: 5px; }
nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
nav a { text-decoration:none; }
nav a:link { color: #EAEAEA; }
nav a:visited { color: #FFF; }
nav a:hover { color: #FDA27F; }
h1 { height: 100px;
padding-top: 2em;
text-align: center;
background:rgba(255, 255, 255, 0.80);
}
.space { height: 20vh; }
#tours, #rentals, #contact { background-color: #FFF;
width: 60%;
padding-left: 6em;
padding-top: 70px;
padding-bottom: 2em;
}
footer { background:rgba(25,25, 25, 0.90);
width: 100%;
font-size: 90%;
text-align: center;
color: #EAEAEA;
position: fixed;
bottom: 0;
}
footer a { text-decoration: none;
color: #EAEAEA; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">KayakDoorCounty.net</a></li>
<li><a href="#tours">Tours</a></li>
<li><a href="#rentals">Rentals</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Home Page -->
<section id="home" class="hero" >
<div class="space"> </div>
<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1>
</section>
<!-- Tours Page -->
<section id="tours">
<h2>Tours by KayakDoorCounty.net</h2>
<h2>Your next adventure is only a paddle away....</h2>
<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
<h3>Featured tours this week:</h3>
<ul>
<li>Cana Island</li>
<li>Mink River</li>
<li>Europe Lake</li>
</ul>
</section>
<div class="tourshero"></div>
<!-- Rentals Page -->
<section id="rentals">
<h2>Rent Kayaks from KayakDoorCounty.net</h2>
<h3>Be Your Own Guide.....</h3>
<p>Half day, full day, and week-long rentals available.<br><br>
Rent a kayak at one of these three scenic locations:</p>
<ul>
<li>Eagle Harbor</li>
<li>Sister Bay</li>
<li>Garrett Bay</li>
</ul>
</section>
<div class="rentalshero"></div>
<!-- Contact Page -->
<section id="contact">
<h2>Contact KayakDoorCounty.net</h2>
<h3>Call, Text, or Email</h3>
<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
<p>Call to reserve your kayak today!</p>
555-555-5555<br><br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</section>
<div class="contacthero"></div>
<footer>
KayakDoorCounty.net<br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</footer>
</body>
</html>

132
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/index1.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>KayakDoorCounty.net</title>
<meta charset="utf-8">
<style>
body { font-family: Tahoma, Verdana, Arial, sans-serif;
margin: 0; padding: 0;
}
.hero {
background-image: url(beached.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.tourshero {
background-image: url(kayaks.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.rentalshero {
background-image: url(rentals.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.contacthero {
background-image: url(lonekayak.jpg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
nav { z-index:9999;
position: fixed;
top: 0;
left: 0;
padding: .5em;
height: 40px;
background:rgba(25,25, 25, 0.70);
width: 100%;
font-size: 120%;
font-weight: bold;
min-width: 900px; }
nav ul { list-style-type: none;
margin: 5px; }
nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
nav a { text-decoration:none; }
nav a:link { color: #EAEAEA; }
nav a:visited { color: #FFF; }
nav a:hover { color: #FDA27F; }
h1 { height: 100px;
padding-top: 2em;
text-align: center;
background:rgba(255, 255, 255, 0.80);
}
.space { height: 20vh; }
#tours, #rentals, #contact { background-color: #FFF;
width: 60%;
padding-left: 6em;
padding-top: 70px;
padding-bottom: 2em;
}
footer { background:rgba(25,25, 25, 0.90);
width: 100%;
font-size: 90%;
text-align: center;
color: #EAEAEA;
}
footer a { text-decoration: none;
color: #EAEAEA; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">KayakDoorCounty.net</a></li>
<li><a href="#tours">Tours</a></li>
<li><a href="#rentals">Rentals</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Home Page -->
<section id="home" class="hero" >
<div class="space"> </div>
<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1>
</section>
<!-- Tours Page -->
<section id="tours">
<h2>Tours by KayakDoorCounty.net</h2>
<h2>Your next adventure is only a paddle away....</h2>
<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
<h3>Featured tours this week:</h3>
<ul>
<li>Cana Island</li>
<li>Mink River</li>
<li>Europe Lake</li>
</ul>
</section>
<div class="tourshero"></div>
<!-- Rentals Page -->
<section id="rentals">
<h2>Rent Kayaks from KayakDoorCounty.net</h2>
<h3>Be Your Own Guide.....</h3>
<p>Half day, full day, and week-long rentals available.<br><br>
Rent a kayak at one of these three scenic locations:</p>
<ul>
<li>Eagle Harbor</li>
<li>Sister Bay</li>
<li>Garrett Bay</li>
</ul>
</section>
<div class="rentalshero"></div>
<!-- Contact Page -->
<section id="contact">
<h2>Contact KayakDoorCounty.net</h2>
<h3>Call, Text, or Email</h3>
<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
<p>Call to reserve your kayak today!</p>
555-555-5555<br><br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</section>
<div class="contacthero"></div>
<footer>
KayakDoorCounty.net<br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</footer>
</body>
</html>

146
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/index2.html Normal file
View File

@@ -0,0 +1,146 @@
<!DOCTYPE html>
<!-- This is the parallax scrolling single page webste -->
<html lang="en">
<head>
<title>KayakDoorCounty.net</title>
<meta charset="utf-8">
<style>
body { font-family: Tahoma, Verdana, Arial, sans-serif;
margin: 0; padding: 0;
}
.hero {
background-image: url(beached.jpg);
min-height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 0;
}
.tourshero {
background-image: url(kayaks.jpg);
min-height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rentalshero {
background-image: url(rentals.jpg);
min-height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.contacthero {
background-image: url(lonekayak.jpg);
min-height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
nav { z-index:9999;
position: fixed;
top: 0;
left: 0;
padding: .5em;
height: 40px;
background:rgba(25,25, 25, 0.70);
width: 100%;
font-size: 120%;
font-weight: bold;
min-width: 900px;
}
nav ul { list-style-type: none;
margin: 5px; }
nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
nav a { text-decoration:none; }
nav a:link { color: #EAEAEA; }
nav a:visited { color: #FFF; }
nav a:hover { color: #FDA27F; }
h1 { height: 100px;
padding-top: 2em;
text-align: center;
background:rgba(255, 255, 255, 0.80);
}
.space {height: 20vh; }
#tours, #rentals, #contact { background-color: #FFF;
width: 60%;
padding-left: 6em;
padding-top: 70px;
padding-bottom: 2em; }
footer { background:rgba(25,25, 25, 0.90);
width: 100%;
font-size: 90%;
text-align: center;
color: #EAEAEA;
position: fixed;
bottom: 0;}
footer a { text-decoration: none;
color: #EAEAEA; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">KayakDoorCounty.net</a></li>
<li><a href="#tours">Tours</a></li>
<li><a href="#rentals">Rentals</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Home Page -->
<section id="home" class="hero">
<div class="space"> </div>
<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1>
</section>
<!-- Tours Page -->
<section id="tours">
<h2>Tours by KayakDoorCounty.net</h2>
<h2>Your next adventure is only a paddle away....</h2>
<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
<h3>Featured tours this week:</h3>
<ul>
<li>Cana Island</li>
<li>Mink River</li>
<li>Europe Lake</li>
</ul>
</section>
<div class="tourshero"></div>
<!-- Rentals Page -->
<section id="rentals">
<h2>Rent Kayaks from KayakDoorCounty.net</h2>
<h3>Be Your Own Guide.....</h3>
<p>Half day, full day, and week-long rentals available.<br><br>
Rent a kayak at one of these three scenic locations:</p>
<ul>
<li>Eagle Harbor</li>
<li>Sister Bay</li>
<li>Garrett Bay</li>
</ul>
</section>
<div class="rentalshero"></div>
<!-- Contact Page -->
<section id="contact">
<h2>Contact KayakDoorCounty.net</h2>
<h3>Call, Text, or Email</h3>
<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
Call to reserve your kayak today!</p>
555-555-5555<br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</section>
<div class="contacthero"></div>
<footer>
KayakDoorCounty.net<br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</footer>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/kayakdc.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/kayaks.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/lonekayak.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.12/rentals.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

34
Semester 1/Chapter ZIPs/HTML/chapter7/7.2/float.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body { width: 500px;
background-color: #FFFFFF;
color: #000000;
}
div { background-color: #F3F1BF;
}
h1 { background-color: #658B42;
padding: 10px;
color: #E1DB5F;
}
p { font-family: Arial,sans-serif;
}
.float { float: left;
margin-right: 10px;
border: 3px ridge #000000;
}
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
</div>
<h2>Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.2/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

51
Semester 1/Chapter ZIPs/HTML/chapter7/7.3/iefix.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Layout Example</title>
<meta charset="utf-8">
<style>
nav { float: left;
width: 150px;
padding: 10px; }
main { margin-left: 160px;
padding: 10px;
background-color: #FFFFFF;
/* The following declaration forces IE to display
the new HTML5 main element as needed.
The display property is introduced in Chapter 7 */
display: block;
}
body { background-color: #000066; }
#wrapper { width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA; }
header { background-color: #CCCCFF; }
h1 { margin: 0;
padding: 10px; }
footer { text-align: center;
font-style: italic;
background-color: #CCCCFF;
clear: both; }
</style>
</head>
<body>
<div id="wrapper">
<header><h1>Layout Example</h1></header>
<nav>
<a href="index.html">Home</a><br>
<a href="page1.html">Page 1</a><br>
<a href="page2.html">Page 2</a>
</nav>
<main>
<h2>Page Heading</h2>
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
</main>
<footer>Copyright &copy; </footer>
</div>
</body>
</html>

46
Semester 1/Chapter ZIPs/HTML/chapter7/7.3/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Layout Example</title>
<meta charset="utf-8">
<style>
nav { float: left;
width: 150px;
padding: 10px; }
main { margin-left: 160px;
padding: 10px;
background-color: #FFFFFF; }
body { background-color: #000066; }
#wrapper { width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA; }
header { background-color: #CCCCFF; }
h1 { margin: 0;
padding: 10px; }
footer { text-align: center;
font-style: italic;
background-color: #CCCCFF;
clear: both; }
</style>
</head>
<body>
<div id="wrapper">
<header><h1>Layout Example</h1></header>
<nav>
<a href="index.html">Home</a><br>
<a href="page1.html">Page 1</a><br>
<a href="page2.html">Page 2</a>
</nav>
<main>
<h2>Page Heading</h2>
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
</main>
<footer>Copyright &copy; </footer>
</div>
</body>
</html>

88
Semester 1/Chapter ZIPs/HTML/chapter7/7.4/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body { font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
nav { float: left;
width: 150px;
}
nav ul { list-style-type: none;
padding: 10px; }
nav a { text-decoration: none;
padding: 10px;
font-weight: bold; }
main { margin-left: 155px;
background-color: #ffffff;
color: #000000;
display: block;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
.content {padding: 20px 20px 0 20px;
}
#floatright { margin: 10px;
float: right;
}
footer { font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<div class="content">
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</div>
<footer>Copyright &copy;
</footer>
</main>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.4/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.4/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

85
Semester 1/Chapter ZIPs/HTML/chapter7/7.5/index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
nav ul { list-style-type: none;
text-align: center;
font-size: 1.5em;
margin: 5px;
}
nav li { display: inline; }
nav a { text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
main { padding: 20px 20px 0 20px;
background-color: #ffffff;
color: #000000;
display: block;
}
main img { margin: 10px;
float: right;
}
footer { font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>Copyright &copy;
</footer>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.5/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.5/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

89
Semester 1/Chapter ZIPs/HTML/chapter7/7.6/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
nav { float: left;
width: 150px;
}
nav ul { list-style-type: none; padding: 10px; }
nav a { text-decoration: none; padding: 10px;
font-weight: bold; }
nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }
nav a:hover { color: #000066; }
main { margin-left: 155px;
background-color: #ffffff;
color: #000000;
display: block;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
.content {padding: 20px 20px 0 20px;
}
#floatright { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<div class="content">
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</div>
<footer>Copyright &copy;
</footer>
</main>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.6/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.6/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

47
Semester 1/Chapter ZIPs/HTML/chapter7/7.7/bistro.css Normal file
View File

@@ -0,0 +1,47 @@
* { box-sizing: border-box; }
body { background-color: #00005D;
font-family: Verdana, Arial, sans-serif; }
#wrapper { margin: 0 auto;
width: 80%;
min-width: 940px;
background-color: #B3C7E6;
color: #000066; }
header { background-color: #869DC7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
height: 150px;
background-repeat: no-repeat;
background-image: url(lighthouselogo.jpg); }
nav { float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em; }
main { background-color: #FFFFFF;
color: #000000;
padding: 10px 20px;
display: block;
overflow: auto; }
h2 { color: #869DC7; font-family: Arial, sans-serif; }
#floatright { float: right; margin: 10px; }
nav ul { list-style-type: none;
margin: 0;
padding: 0; }
nav a { text-decoration: none;
padding: 20px;
display: block;
background-color: #B3C7E6;
border-bottom: 1px solid #FFFFFF;
}
nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }
nav a:hover { color: #869DC7;
background-color: #EAEAEA; }
footer { font-size: 70%;
text-align: center;
padding: 10px;
background-color: #869DC7;
clear: both;
}

40
Semester 1/Chapter ZIPs/HTML/chapter7/7.7/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link href="bistro.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer>Copyright &copy;
</footer>
</div> <!-- end of wrapper -->
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.7/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.7/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

44
Semester 1/Chapter ZIPs/HTML/chapter7/7.8/bistro.css Normal file
View File

@@ -0,0 +1,44 @@
* { box-sizing: border-box; }
body { background-color: #00005D;
font-family: Verdana, Arial, sans-serif; }
#wrapper { margin: 0 auto;
width: 80%;
min-width: 940px;
background-color: #B3C7E6;
color: #000066; }
header { background-color: #869DC7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
height: 150px;
background-repeat: no-repeat;
background-image: url(lighthouselogo.jpg); }
nav { float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em; }
main { background-color: #FFFFFF;
color: #000000;
padding: 10px 20px;
display: block;
overflow: auto; }
h2 { color: #869DC7;
font-family: Arial, sans-serif; }
#floatright { float: right; margin: 10px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav a { text-decoration: none; padding: 20px; display: block;
background-color: #B3C7E6;
border-bottom: 1px solid #FFFFFF;
}
nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }
nav a:hover { color: #869DC7;
background-color: #EAEAEA; }
footer { font-size: 70%;
text-align: center;
padding: 10px;
background-color: #869DC7;
clear: both;
}

31
Semester 1/Chapter ZIPs/HTML/chapter7/7.8/bistroprint.css Normal file
View File

@@ -0,0 +1,31 @@
* { box-sizing: border-box; }
body { background-color: #00005D;
font-family: Verdana, Arial, sans-serif; }
#wrapper { margin: 0 auto;
width: 80%;
min-width: 940px;
background-color: #B3C7E6;
color: #000066; }
header { color: #000000; font-size: 20pt; }
nav { display: none; }
main { font-family: "Times New Roman", serif; font-size: 12pt; }
h2 { color: #869DC7;
font-family: Arial, sans-serif; }
#floatright { float: right; margin: 10px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav a { text-decoration: none; padding: 20px; display: block;
background-color: #B3C7E6;
border-bottom: 1px solid #FFFFFF;
}
nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }
nav a:hover { color: #869DC7;
background-color: #EAEAEA; }
footer { font-size: 70%;
text-align: center;
padding: 10px;
background-color: #869DC7;
clear: both;
}

41
Semester 1/Chapter ZIPs/HTML/chapter7/7.8/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link href="bistro.css" rel="stylesheet" media="screen">
<link href="bistroprint.css" rel="stylesheet" media="print">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer>Copyright &copy;
</footer>
</div> <!-- end of wrapper -->
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.8/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.8/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

49
Semester 1/Chapter ZIPs/HTML/chapter7/7.9/bistro.css Normal file
View File

@@ -0,0 +1,49 @@
* { box-sizing: border-box; }
body { background-color: #00005D;
font-family: Verdana, Arial, sans-serif; }
#wrapper { margin: 0 auto;
width: 80%;
min-width: 940px;
background-color: #B3C7E6;
color: #000066; }
header { background-color: #869DC7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
height: 150px;
background-repeat: no-repeat;
background-image: url(lighthouselogo.jpg); }
nav { float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em; }
main { background-color: #FFFFFF;
color: #000000;
padding: 10px 20px;
display: block;
overflow: auto; }
h2 { color: #869DC7;
font-family: Arial, sans-serif; }
#floatright { float: right; margin: 10px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav a { text-decoration: none; padding: 20px; display: block;
background-color: #B3C7E6;
border-bottom: 1px solid #FFFFFF;
background-image: url(sprites.gif);
background-repeat: no-repeat;
background-position: right 0;
}
nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }
nav a:hover { color: #869DC7;
background-color: #EAEAEA;
background-position: right -100px;}
footer { font-size: 70%;
text-align: center;
padding: 10px;
background-color: #869DC7;
clear: both;
}

40
Semester 1/Chapter ZIPs/HTML/chapter7/7.9/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link href="bistro.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer>Copyright &copy;
</footer>
</div> <!-- end of wrapper -->
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.9/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.9/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/7.9/sprites.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

23
Semester 1/Chapter ZIPs/HTML/chapter7/absolute.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Absolute Positioning</title>
<meta charset="utf-8">
<style>
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
p {position: absolute;
left:200px;
top:100px;
font-family:Arial,sans-serif;
width:300px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<p>This paragraph is 300 pixels wide and uses CSS absolute positioning to be placed 200 pixels in from the left and 100 pixels down from the top of the browser window.</p>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

31
Semester 1/Chapter ZIPs/HTML/chapter7/boxsizing1.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Default box-sizing</title>
<meta charset="utf-8">
<style>
body { width: 600px; }
.pod { float: left;
width: 30%;
height: 150px;
background-color: #D1ECFF;
padding: 20px; margin: 10px; border: 1px solid #000033; }
</style>
</head>
<body>
<main>
<h1>Default box-sizing</h1>
<div class="pod">
Element 1
</div>
<div class="pod">
Element 2
</div>
<div class="pod">
Element 3
</div>
</main>
</body>
</html>

32
Semester 1/Chapter ZIPs/HTML/chapter7/boxsizing2.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>box-sizing set to border-box</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body { width: 600px; }
.pod { float: left;
width: 30%;
height: 150px;
background-color: #D1ECFF;
padding:20px; margin: 10px; border: 1px solid #000033; }
</style>
</head>
<body>
<main>
<h1>box-sizing set to border-box</h1>
<div class="pod">
Element 1
</div>
<div class="pod">
Element 2
</div>
<div class="pod">
Element 3
</div>
</main>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/coast2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

89
Semester 1/Chapter ZIPs/HTML/chapter7/faqs.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>FAQs</title>
<meta charset="utf-8">
<style>
#wrapper { margin: auto; width: 80%; }
</style>
</head>
<body>
<div id="wrapper">
<h1 id="top">Frequently Asked Questions</h1>
<ul>
<li><a href="#faq0">Why doesn&apos;t the heading tag go in the head section?</a></li>
<li><a href="#faq1">Why does the text in my web page wrap differently than the examples?</a></li>
<li><a href="#faq2">How can I create web pages that look exactly the same on all browsers?</a></li>
<li><a href="#faq3">How do I know when to use an id, a class, or a descendant selector?</a></li>
<li><a href="#faq4">My CSS doesn&apos;t work. What can I do?</a></li>
</ul>
<h2 id="faq0">Why doesn&apos;t the heading tag go in the head section?</h2>
<p>It&apos;s common for students to try to code the heading tags in the head section of the document, but someone doing this won&apos;t be happy with the way the browser displays the web page. Even though &quot;heading tag&quot; and &quot;head section&quot; sound similar, always code heading tags in the body section of the web page document.</p>
<a href="#top">Back to Top</a>
<h2 id="faq1">Why does the text in my web page wrap differently than the examples?</h2>
<p>The text may wrap a little differently because your screen resolution or browser viewport size may not be the same as those on the computer used for the screen captures. That&apos;s part of the nature of working with the Web&mdash;expect your web pages to look slightly different in the multitude of screen resolutions, browser viewport sizes, and devices that people will use to view your designs.</p>
<a href="#top">Back to Top</a>
<h2 id="faq2">How can I create web pages that look exactly the same on all browsers?</h2>
<p>You can&apos;t.Design with the most popular browsers and screen resolutions in mind, but expect your web pages to look slightly different when displayed by different browsers and on monitors with different screen resolutions. Expect web pages to look even more different when displayed on mobile devices. You&apos;ll learn about responsive web design techniques later in this chapter.</p>
<a href="#top">Back to Top</a>
<h2 id="faq3">How do I know when to use an id, a class, or a descendant selector?</h2>
<p>The most efficient way to configure CSS is to use HTML elements as selectors. However, sometimes you need to be more specific&mdash;that&apos;s when other types of selectors are useful. Create a class when you need to configure one or more specific objects on a web page in the same way. A class can be applied more than once per web page. An id is similar to a class, but be mindful that it is not valid to apply an id more than once on a web page. To repeat: an id can be used once and only once on each web page. Use an id for a unique item, such as the navigation hyperlink that indicates the current page. As you become more comfortable with CSS, you&apos;ll begin to see the power and efficiency of descendant selectors, which allow you to target elements within a specific context (such as all paragraphs in the footer area) without the need to code additional classes or ids within the HTML code.</p>
<a href="#top">Back to Top</a>
<h2 id="faq4">My CSS doesn&apos;t work. What can I do?</h2>
<p>Coding CSS is a detail&ndash;oriented process. There are several common errors that can cause the browser not to apply CSS correctly to a web page. With a careful review of your code
and the following tips, you should get your CSS working:</p>
<ul>
<li>Verify that you are using the colon &quot;:&quot; and semicolon &quot;;&quot; symbols in the right spots&mdash;they are easy to confuse. The : symbol should separate the properties from their values. The ; symbol should be placed between each property : value configuration.</li>
<li>Check that you are not using = signs instead of : between each property and its value.</li>
<li>Verify that the { and } symbols are properly placed around the style rules for each selector.</li>
<li>Check the syntax of your selectors, their properties, and property values for correct usage.</li>
<li>If part of your CSS works and part doesn&#39;t, read through the CSS and check to determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.</li>
<li>Use the W3C&apos;s CSS validator at <a href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator </a> to help you find syntax errors.</li>
</ul>
<a href="#top">Back to Top</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#top">Back to Top</a>
</div>
</body>
</html>

57
Semester 1/Chapter ZIPs/HTML/chapter7/favorites.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<!-- This web page is demonstrated in the VideoNote "Linking to a Named Fragment" -->
<html lang="en">
<head>
<title>Favorite Sites</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="top">Favorite Sites</h1>
<ul>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#HTML5">HTML5</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<h2 id="hobbies">Hobbies</h2>
<dl>
<dt>Running</dt>
<dd><a href="http://www.runningnetwork.com">http://www.runningnetwork.com</a></dd>
<dt>Cooking</dt>
<dd><a href="http://www.cooking.com">http://www.cooking.com</a></dd>
</dl>
<h2 id="HTML5">HTML5</h2>
<dl>
<dt>Specification</dt>
<dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd>
<dt>Tutorials</dt>
<dd><a href="http://www.w3schools.com/html5">http://www.w3schools.com/html5</a></dd>
</dl>
<h2 id="CSS">CSS</h2>
<dl>
<dt>W3C Cascading Style Sheets</dt>
<dd><a href="http://www.w3.org/Style/CSS">http://www.w3.org/Style/CSS</a></dd>
<dt>Tutorials</dt>
<dd><a href="http://www.w3schools.com/css3">http://www.w3schools.com/css3</a></dd>
</dl>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2><a href="#top">Back to Top</a></h2>
</body>
</html>

92
Semester 1/Chapter ZIPs/HTML/chapter7/fixed.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
#leftcolumn { float: left;
width: 150px;
}
#rightcolumn { margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
padding-bottom: 1em;
}
p { margin-bottom: 3em; }
.content {padding: 20px 20px 0 20px;
}
#floatright { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
clear: right;
padding-bottom: 5em;
padding-top: 5em;
}
nav { position: fixed; }
nav ul { list-style-type: none;
padding: 10px; }
nav a { text-decoration: none;
padding: 10px;
font-weight: bold; }
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<div id="leftcolumn">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div id="rightcolumn">
<div class="content">
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</div>
<footer>Copyright &copy;
</footer>
</div>
</div>
</body>
</html>

25
Semester 1/Chapter ZIPs/HTML/chapter7/float.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
h1 { background-color:#A8C682;
padding: 5px;
color: #000000;
}
p { font-family: Arial,sans-serif;
}
#yls {float: right;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h1>Wildflowers</h1>
<img id="yls" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The heading and paragraph follow normal flow. The Yellow Lady Slipper pictured on the right is a wildflower. It grows in wooded areas and blooms in June each year. The Yellow Lady Slipper is a member of the orchid family.</p>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/float/.clear1.html.kate-swp Normal file
View File

Binary file not shown.

36
Semester 1/Chapter ZIPs/HTML/chapter7/float/clear1.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body {width: 500px;
background-color: #FFFFFF;
color: #000000;
}
div {background-color: #F3F1BF;
}
h1 { background-color: #658B42;
padding: 10px;
color: #e1db5f;
}
p { font-family: Arial,sans-serif;
}
.float {float: left;
margin-right: 10px;
border: 3px ridge #000000;
}
.clearleft {clear: left; }
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
<br class="clearleft">
</div>
<h2 >Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

35
Semester 1/Chapter ZIPs/HTML/chapter7/float/clear2.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body {width: 500px;
background-color: #FFFFFF;
color: #000000;
}
div {background-color: #F3F1BF;
}
h1 { background-color: #658B42;
padding: 10px;
color: #e1db5f;
}
p { font-family: Arial, sans-serif;
}
.float {float: left;
margin-right: 10px;
border: 3px ridge #000000;
}
.clearleft {clear:left; }
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
</div>
<h2 class="clearleft">Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

34
Semester 1/Chapter ZIPs/HTML/chapter7/float/float.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body {width: 500px;
background-color: #FFFFFF;
color: #000000;
}
div {background-color: #F3F1BF;
}
h1 { background-color: #658B42;
padding: 10px;
color: #E1DB5F;
}
p { font-family: Arial,sans-serif;
}
.float {float: left;
margin-right: 10px;
border: 3px ridge #000000;
}
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
</div>
<h2>Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/float/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

37
Semester 1/Chapter ZIPs/HTML/chapter7/float/overflow.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body {width: 500px;
background-color: #FFFFFF;
color: #000000;
}
div { background-color: #F3F1BF;
overflow: auto;
width: 100%;
}
h1 { background-color: #658B42;
padding: 10px;
color: #E1DB5F;
}
p { font-family: Arial, sans-serif;
}
.float {float: left;
margin-right: 10px;
border: 3px ridge #000000;
}
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
</div>
<h2>Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

38
Semester 1/Chapter ZIPs/HTML/chapter7/float/scroll.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body {width: 500px;
background-color: #FFFFFF;
color: #000000;
}
div { background-color: #F3F1BF;
overflow: scroll;
width: 300px;
height: 100px;
}
h1 { background-color: #658B42;
padding: 10px;
color: #E1DB5F;
}
p { font-family: Arial, sans-serif;
}
.float {float: left;
margin-right: 10px;
border: 3px ridge #000000;
}
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
</div>
<h2>Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

78
Semester 1/Chapter ZIPs/HTML/chapter7/float/twocolumn.html Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
width: 80%;
margin: auto;
min-width:850px;
}
nav { float: left;
width: 150px;
padding: 20px;
}
main { margin-left: 165px;
background-color: #FFFFFF;
padding: 20px;
/* The following declaration forces IE to display
the new HTML5 main element as needed.
The display property is introduced in Chapter 7 */
display: block;
}
header{ background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
}
h1 { margin: 0; }
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
main img { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
margin-left: 165px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<a href="index.html">Home</a><br>
<a href="rooms.html">Menu</a><br>
<a href="directions.html">Directions</a><br>
<a href="contact.html">Contact</a>
</nav>
<main>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>Copyright &copy;
</footer>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/float/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/layout/lighthouse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/layout/lightlogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

125
Semester 1/Chapter ZIPs/HTML/chapter7/layout/sticky.html Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width: 850px;
max-width: 1200px;
}
main { display: block; /* for Internet Explorer version 10 and below */
padding: 3em;
background-color: #ffffff;
color: #000000;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 30px;
}
nav { position: sticky;
top: 0;
background-color: #B3C7E6;
height: 40px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
#floatright { margin: 10px;
float: right;
}
footer { background-color: #869dc7;
color: #FFFFFF;
font-size:70%;
text-align: center;
clear: right;
padding: 2em;
}
nav ul { list-style-type: none;}
nav li { display: inline; }
nav a { text-decoration: none;
padding-right: 10px; }
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<img src="lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>Copyright &copy; 2020
</footer>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

76
Semester 1/Chapter ZIPs/HTML/chapter7/navigation.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:850px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
main { padding: 20px 20px 0 20px;
background-color:#ffffff;
color: #000000;
display: block;
}
main img { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
nav ul { list-style-type: none;}
nav li { display: inline; }
nav a { text-decoration: none;
padding-right: 10px; }
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>Copyright &copy;
</footer>
</div>
</body>
</html>

21
Semester 1/Chapter ZIPs/HTML/chapter7/relative.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Relative Positioning</title>
<meta charset="utf-8">
<style>
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
p { position: relative;
left:30px;
font-family:Arial,sans-serif;
}
</style>
</head>
<body>
<h1>Relative Positioning</h1>
<p>This paragraph uses CSS relative positioning to be placed 30 pixels in from the left side.</p>
</body>
</html>

28
Semester 1/Chapter ZIPs/HTML/chapter7/singlecol.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Layout Example</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header><h1>Layout Example</h1></header>
<nav>
<a href="index.html">Home</a>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
</nav>
<main>
<h2>Page Heading</h2>
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
</main>
<footer>Copyright &copy; </footer>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/sprites.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/spwstart/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

137
Semester 1/Chapter ZIPs/HTML/chapter7/spwstart/index.html Normal file
View File

@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>KayakDoorCounty.net</title>
<meta charset="utf-8">
<style>
body { font-family: Tahoma, Verdana, Arial, sans-serif;
margin: 0; padding: 0;
}
.hero {
background-image: url(beached.jpg);
min-height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.tourshero {
background-image: url(kayaks.jpg);
min-height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rentalshero {
background-image: url(rentals.jpg);
min-height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.contacthero {
background-image: url(lonekayak.jpg);
min-height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
nav { z-index:9999;
position: fixed;
top: 0;
left: 0;
padding: .5em;
height: 40px;
background:rgba(25,25, 25, 0.70);
width: 100%;
font-size: 120%;
font-weight: bold;
min-width: 900px; }
nav ul { list-style-type: none;
margin: 5px; }
nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
nav a { text-decoration:none; }
nav a:link { color: #EAEAEA; }
nav a:visited { color: #FFF; }
nav a:hover { color: #FDA27F; }
h1 { height: 100px;
padding-top: 2em;
text-align: center;
background:rgba(255, 255, 255, 0.80);
}
.space { height: 20vh; }
#tours, #rentals, #contact { background-color: #FFF;
width: 60%;
padding-left: 6em;
padding-top: 70px;
padding-bottom: 2em;
}
footer { background:rgba(25,25, 25, 0.90);
width: 100%;
font-size: 90%;
text-align: center;
color: #EAEAEA;
position: fixed;
bottom: 0;
}
footer a { text-decoration: none;
color: #EAEAEA; }
</style>
</head>
<body>
<nav>
</nav>
<!-- Home Page -->
<section id=" " class="hero" >
<div class="space"> </div>
<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1>
</section>
<!-- Tours Page -->
<section id=" ">
<h2>Tours by KayakDoorCounty.net</h2>
<h2>Your next adventure is only a paddle away....</h2>
<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
<h3>Featured tours this week:</h3>
<ul>
<li>Cana Island</li>
<li>Mink River</li>
<li>Europe Lake</li>
</ul>
</section>
<div class="tourshero"></div>
<!-- Rentals Page -->
<section id=" ">
<h2>Rent Kayaks from KayakDoorCounty.net</h2>
<h3>Be Your Own Guide.....</h3>
<p>Half day, full day, and week-long rentals available.<br><br>
Rent a kayak at one of these three scenic locations:</p>
<ul>
<li>Eagle Harbor</li>
<li>Sister Bay</li>
<li>Garrett Bay</li>
</ul>
</section>
<div class="rentalshero"></div>
<!-- Contact Page -->
<section id=" ">
<h2>Contact KayakDoorCounty.net</h2>
<h3>Call, Text, or Email</h3>
<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
<p>Call to reserve your kayak today!</p>
555-555-5555<br><br>
<a href="email:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</section>
<div class="contacthero"></div>
<footer>
KayakDoorCounty.net<br>
<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
</footer>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/spwstart/kayakdc.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/spwstart/kayaks.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/spwstart/lonekayak.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/spwstart/rentals.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

14
Semester 1/Chapter ZIPs/HTML/chapter7/starter1.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
</body>
</html>

30
Semester 1/Chapter ZIPs/HTML/chapter7/starter2.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float</title>
<meta charset="utf-8">
<style>
body { width:500px;
background-color:#FFFFFF;
color:#000000;
}
div { background-color:#F3F1BF;
}
h1 { background-color:#658B42;
padding:10px;
color: #E1DB5F;
}
p { font-family:Arial,sans-serif;
}
</style>
</head>
<body>
<h1>Yellow Lady Slipper</h1>
<div>
<img src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
</div>
<h2>Be Green When Enjoying Wildflowers</h2>
<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p>
</body>
</html>

81
Semester 1/Chapter ZIPs/HTML/chapter7/starter3.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; }
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
nav { float: left;
width: 150px;
}
main { margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
.content {padding: 20px 20px 0 20px;
}
main { display: block; }
#floatright { margin: 10px;
float: right;
}
footer { font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="rooms.html">Menu</a>
<a href="directions.html">Directions</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<div class="content">
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</div>
<footer>Copyright &copy;
</footer>
</main>
</div>
</body>
</html>

74
Semester 1/Chapter ZIPs/HTML/chapter7/starter4.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
body {font-family:Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 130px;
}
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
main { padding: 20px 20px 0 20px;
background-color: #ffffff;
color: #000000;
display: block;
}
main img { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
clear: right;
padding-bottom:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>Copyright &copy;
</footer>
</div>
</body>
</html>

39
Semester 1/Chapter ZIPs/HTML/chapter7/starter5.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer>Copyright &copy;
</footer>
</div> <!-- end of wrapper -->
</body>
</html>

9
Semester 1/Chapter ZIPs/HTML/chapter7/template.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
</head>
<body>
</body>
</html>

46
Semester 1/Chapter ZIPs/HTML/chapter7/twocolumn3.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Layout Example</title>
<meta charset="utf-8">
<style>
body { font-family:Verdana, Arial, sans-serif;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
nav { float: left;
width: 150px;
}
main { margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
<div id="wrapper">
<header><h1>Layout Example</h1></header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Page Heading</h2>
<p>This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence.</p>
</main>
<footer>Copyright &copy; </footer>
</div>
</body>
</html>

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
Semester 1/Chapter ZIPs/HTML/chapter7/yogadoor2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB