diff options
Diffstat (limited to 'HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm')
21 files changed, 487 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html new file mode 100644 index 0000000..5adac06 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html @@ -0,0 +1,27 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Examples of the Box Model</title>
+ <meta charset="utf-8">
+ <style>
+body { background-color: #FFFFFF;
+}
+h1 { background-color: #D1ECFF;
+ padding-left: 60px;
+ border-bottom: 3px ridge #330000;
+}
+#box { background-color: #74C0FF;
+ margin-left: 60px;
+ padding: 5px 10px;
+ border: 1px solid #000000;
+}
+ </style>
+ </head>
+ <body>
+ <h1>Examples of the Box Model</h1>
+ <div id="box">HTML elements display as boxes on web pages. This div element is configured to have a blue background.</div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html new file mode 100644 index 0000000..b9005c1 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html @@ -0,0 +1,44 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body { background-image: url(background.jpg);
+ font-family: Arial, Verdana, sans-serif;
+}
+h1 {
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 100px;
+ width: 700px;
+ font-size: 3em;
+ padding-left: 150px;
+ padding-top: 30px;
+ border-radius: 15px;
+}
+h2 { color: #000033;
+ font-family: arial, sans-serif;
+}
+footer { font-size: .80em;
+ font-style: italic;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
+ </nav>
+ <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>
+ <footer>
+ Copyright © Your Name Here
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg Binary files differnew file mode 100644 index 0000000..bd76938 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..4db3869 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html new file mode 100644 index 0000000..007aad5 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html @@ -0,0 +1,56 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body { background-image: url(background.jpg);
+ font-family: Arial, Verdana, sans-serif;
+}
+h1 {
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 100px;
+ font-size: 3em;
+ background-color: #9DB3DC;
+ margin-top: 0;
+ padding-left: 150px;
+ padding-top: 30px;
+ border-radius: 15px;
+}
+h2 { color: #000033;
+ font-family: arial, sans-serif;
+}
+footer { font-size: .80em;
+ font-style: italic;
+}
+
+#container {
+ background-color: #FFFFFF;
+ padding: 2em;
+ margin-left: auto; margin-right: auto;
+ width: 80%;
+ min-width: 800px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id=container>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
+ </nav>
+ <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>
+ <footer>
+ Copyright © Your Name Here
+ </footer>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg Binary files differnew file mode 100644 index 0000000..bd76938 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..4db3869 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html new file mode 100644 index 0000000..06143b7 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Coffee House</title>
+<meta charset="utf-8">
+<style>
+body { color: #221811;
+ font-family: Verdana, Arial, sans-serif;
+ width: 80%;
+ min-width: 750px;
+
+}
+header { background-color: #D2B48C;
+ background-image: url(coffeelogo.jpg);
+ background-repeat: no-repeat;
+}
+
+h1 { text-indent: 4em;
+ font-size: 4em;
+ height: 150px;
+ line-height: 220%;
+
+}
+
+nav { font-weight: bold;
+ text-indent: 1em;
+ font-size: 2em;
+}
+nav a { color: #804D33; text-decoration: none; }
+
+#wrapper { background-color: #FCEBB6; }
+</style>
+</head>
+<body>
+<div id="wrapper">
+<header>
+<h1>Coffee House</h1>
+</header>
+<nav>
+<a href="index.html">Home</a>
+<a href="menu.html">Menu</a>
+<a href="music.html">Music</a>
+<a href="jobs.html">Jobs</a>
+</nav>
+<main>
+<h2>Follow the Winding Road to Coffee House</h2>
+<h3>Coffee House features:</h3>
+<ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Bagels, Muffins, and Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ <li>Music and Poetry Readings</li>
+ <li>Open Mic Night</li>
+</ul>
+<div>
+12010 Garrett Bay Road<br>
+Ellison Bay, WI 54210<br>
+888-555-5555<br><br>
+</div>
+</main>
+<footer>
+Copyright © Coffee House<br>
+</footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg Binary files differnew file mode 100644 index 0000000..3c302c7 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html new file mode 100644 index 0000000..18f2ec5 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html @@ -0,0 +1,23 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Practice with Gradients</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ background-color: #DA70D6;
+ background-image: linear-gradient(to bottom, #FFFFFF, #DA70D6);
+ background-repeat: no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <h1>Linear Gradient</h1>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html new file mode 100644 index 0000000..6cd5e767 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html @@ -0,0 +1,23 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Practice with Gradients</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ background-color: #DA70D6;
+ background-image: radial-gradient(#FFFFFF, #DA70D6);
+ background-repeat: no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <h1>Linear Gradient</h1>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html new file mode 100644 index 0000000..c25804b --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+body { background-color: #FFFFDD;
+ font-family: Verdana, Arial, sans-serif;
+}
+header { background-color: #000033;
+ color: #FFFFB9;
+ background-image: url(headerbackblue.jpg);
+ background-position: right;
+ background-repeat: no-repeat;
+ height: 80px;
+ padding-top: 5px;
+ padding-left: 2em;
+ text-shadow: 1px 1px 1px #FFF;
+}
+
+h1, h2, h3 {
+ font-family: Georgia, "Times New Roman", serif;
+}
+h1 {
+ margin-bottom: 0;
+}
+nav {
+ font-weight: bold;
+ font-size: 1.25em;
+ background-color: #FFFFCC;
+ text-align: center;
+}
+nav a { text-decoration: none; }
+main {
+ background-color: #004D99;
+ background-image: url(heroback2.jpg);
+ color: #FFFFFF; padding: 2em;
+}
+
+footer {
+ font-style: italic;
+ text-align: center;
+ background-color: #000033;
+ color: #FFFFCC;
+ padding: 0.5em;
+}
+
+#container {
+ margin-left: auto;
+ margin-right: auto;
+ width: 80%;
+ min-width: 650px;
+ max-width: 1280px;
+ background-color: #FFFFFF;
+ box-shadow: 10px 10px 10px #333333;
+ border: 1px solid #000033;
+}
+ </style>
+ </head>
+ <body>
+ <div id=container>
+ <header>
+ <h1>KayakDoorCounty.net</h1>
+ </header>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg Binary files differnew file mode 100644 index 0000000..6ae2660 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg Binary files differnew file mode 100644 index 0000000..b2d66e1 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html new file mode 100644 index 0000000..f1a9fa1 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+#content { background-image: url(fall.jpg);
+ background-repeat: no-repeat;
+ margin: auto;
+ width: 640px;
+ height: 480px;
+ padding-top: 20px;
+}
+
+h1 {
+ background-color: #FFFFFF;
+ opacity: 0.6;
+ font-size: 4em;
+ padding: 10px;
+ margin-left: 40px;
+}
+
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <h1> Fall Nature Hikes</h1>
+ </div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html new file mode 100644 index 0000000..c6ca7ce --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+#content { background-image: url(fall.jpg);
+ background-repeat: no-repeat;
+ margin: auto;
+ width: 640px;
+ height: 480px;
+ padding-top: 20px;
+}
+
+h1 {
+ color: #ffffff;
+ color: rgba(255, 255, 255, 0.8);
+ font-family: Verdana, Helvetica, sans-serif;
+ font-size: 5em;
+ padding-right: 10px;
+ text-align: right;
+}
+
+
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <h1> Fall Nature Hikes</h1>
+ </div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html new file mode 100644 index 0000000..d74632e --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+#content { background-image: url(fall.jpg);
+ background-repeat: no-repeat;
+ margin: auto;
+ width: 640px;
+ height: 480px;
+ padding-top: 20px;
+}
+
+h1 {
+ color: #ffcccc;
+ color: hsla(60, 100%, 90%, 0.8);
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: 6em;
+ padding: 20px;
+}
+
+
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <h1> Fall Nature Hikes</h1>
+ </div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg Binary files differnew file mode 100644 index 0000000..b95e481 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html new file mode 100644 index 0000000..2329bd8 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html @@ -0,0 +1,59 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body { background-image: url(background.jpg);
+ font-family: Arial, Verdana, sans-serif;
+}
+h1 {
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 100px;
+ font-size: 3em;
+ background-color: #9DB3DC;
+ margin-top: 0;
+ padding-left: 150px;
+ padding-top: 30px;
+ border-radius: 15px;
+}
+h2 { color: #000033;
+ font-family: arial, sans-serif;
+ text-shadow: 1px 1px 0 #CCC;
+}
+footer { font-size: .80em;
+ font-style: italic;
+}
+
+#container {
+ background-color: #FFFFFF;
+ padding: 2em;
+ margin-left: auto; margin-right: auto;
+ width: 80%;
+ min-width: 800px;
+ box-shadow: 5px 5px 5px #1E1E1E;
+ text-shadow: 3px 3px 3px #676767;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id=container>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
+ </nav>
+ <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>
+ <footer>
+ Copyright © Your Name Here
+ </footer>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg Binary files differnew file mode 100644 index 0000000..bd76938 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..4db3869 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg |
