diff options
Diffstat (limited to 'HTML/Chapter')
231 files changed, 5456 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html new file mode 100644 index 0000000..d5b7269 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html @@ -0,0 +1,14 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Form Example</title>
+ </head>
+ <body>
+ <h1>Join Our Newsletter</h1>
+ <form method="get">
+ E-mail: <input type="text" name="email" id="email"><br><br>
+ <input type="submit" value="Sign Me Up!">
+ <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html new file mode 100644 index 0000000..b645165 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html @@ -0,0 +1,25 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ First Name: <input type="text" name="fname" id="fname">
+ <br>
+ <br>
+ Last Name: <input type="text" name="lname" id="lname">
+ <br>
+ <br>
+ E-mail: <input type="text" name="email" id="email">
+ <br>
+ <br>
+ Comments:<br>
+ <textarea name="comments" id="comments" rows=4 cols=40></textarea><br>
+ <br>
+ <input type="submit" value="Contact"> <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html new file mode 100644 index 0000000..5c4e64f --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ <label>First Name: <input type="text" name="fname" id="fname"
+ <input type="text" name="fname" id="fname"><br><br>
+ </label>
+ <label>Last Name: <input type="text" name="lname" id="lname"
+ <input type="text" name="lname" id="lname"><br><br>
+ </label>
+ <label>E-mail: <input type="text" name="email" id="email"
+ <input type="text" name="email" id="email"><br><br>
+ </label>
+ <label for="comments">Comments:</label><br>
+ <textarea name="comments" id="comments" rows="4" cols="40"></textarea><br><br>
+ <input type="submit" value="Contact"> <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html new file mode 100644 index 0000000..1893bec --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html @@ -0,0 +1,49 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+input[type="submit"] {
+ margin-left: 110px;
+}
+
+form {
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px;
+ padding: 10px;
+}
+
+ label {
+ float: left;
+ clear: left;
+ display: block;
+ width: 100px;
+ padding-right: 10px;
+ margin-top: 10px;
+ text-align: right;
+ }
+
+ input {
+ display: block; margin-top: 10px;
+ }
+
+ textarea {
+ display: block; margin-top: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input id="mySubmit" type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html new file mode 100644 index 0000000..6977d05 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html @@ -0,0 +1,55 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+
+
+form { background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px; padding: 10px;}
+label { float: left; clear: left;
+ display: block; width: 100px;
+ text-align: right;
+ padding-right: 10px;
+ margin-top: 10px; }
+input, textarea { margin-top: 10px;
+ display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+ form {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 6em 1fr;
+ grid-gap: 1em;
+ gap: 1em;
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 60%;
+ min-width: 20em;
+ padding: 2em;
+ }
+
+ input[type="submit"] {
+ grid-column: 2 / 3;
+ width: 10em; margin-left: 0;
+ }
+}
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form>
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html new file mode 100644 index 0000000..a922c22 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html @@ -0,0 +1,55 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+
+
+form { background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px; padding: 10px;}
+label { float: left; clear: left;
+ display: block; width: 100px;
+ text-align: right;
+ padding-right: 10px;
+ margin-top: 10px; }
+input, textarea { margin-top: 10px;
+ display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+ form {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 6em 1fr;
+ grid-gap: 1em;
+ gap: 1em;
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 60%;
+ min-width: 20em;
+ padding: 2em;
+ }
+
+ input[type="submit"] {
+ grid-column: 2 / 3;
+ width: 10em; margin-left: 0;
+ }
+}
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html new file mode 100644 index 0000000..f97c3c3 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html @@ -0,0 +1,42 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Comment Form</title>
+ <meta charset="utf-8">
+ <style>
+label { display: block;
+ margin-top: 20px; }
+input { display: block;
+ margin-bottom: 20px; }
+ </style>
+ </head>
+ <body>
+ <h1>Comment Form</h1>
+ <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+ <label for="myFirstName">* First Name</label>
+ <input type="text" name="myFirstName"
+ id="myFirstName" required="required"
+ placeholder="your first name">
+ <label for="myLastName">* Last Name</label>
+ <input type="text" name="myLastName"
+ id="myLastName" required="required"
+ placeholder="your last name">
+ <label for="myEmail">* E-mail</label>
+ <input type="email" name="myEmail" id="myEmail"
+ required="required"
+ placeholder="you@yourdomain.com">
+ <label for="myRating">Rating (1 — 10)
+ </label>
+ <input type="range" name="myRating"
+ id="myRating" min="1" max="10">
+ <label for="myComments">* Comments</label>
+ <textarea name="myComments" id="myComments"
+ rows="2" cols="40"
+ required="required"
+ placeholder="your comments here">
+ </textarea>
+ <input type="submit" value="Submit">
+ </form>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html new file mode 100644 index 0000000..cd50e92 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html @@ -0,0 +1,12 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Podcast</title>
+ </head>
+ <body>
+ <h1>Web Design Podcast</h1>
+ <a href="11.1.podcast.mp3">Podcast Episode 1</a> (MP3)
+ <br>
+ <a href="11.1.podcast.txt">Podcast Transcript</a>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 Binary files differnew file mode 100644 index 0000000..6190438 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt new file mode 100644 index 0000000..8ebd91f --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt @@ -0,0 +1,13 @@ +Welcome to an example podcast.
+
+I'm Terry Morris, the author of your textbook.
+
+If this were an actual podcast it would focus on a topic and perhaps include an interview with an interesting guest.
+
+It's very easy to create a podcast.
+
+If you use a Mac computer, try ou the pre-installed Garageband application.
+
+If you are using Windows, you can download Audacity. It's a free audio recorder and editor.
+
+Have fun creating your own podcast!
\ No newline at end of file diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html new file mode 100644 index 0000000..77739e4 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Podcast</title>
+ </head>
+ <body>
+ <h1>Web Design Podcast</h1>
+ <audio controls>
+ <!--I usually put ogg first because of better compression-->
+ <source src="11.2.podcast.ogg" type="audio/ogg">
+ <source src="11.2.podcast.mp3" type="audio/mpeg">
+ <a href="11.2.podcast.mp3">download the Podcast</a> (MP3)
+ </audio>
+ <br>
+ <a href="11.2.podcast.txt">Podcast Transcript</a>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 Binary files differnew file mode 100644 index 0000000..6190438 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg Binary files differnew file mode 100644 index 0000000..ab1c589 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt new file mode 100644 index 0000000..4c5d526 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt @@ -0,0 +1,13 @@ +Welcome to an example podcast.
+
+I'm Terry Morris, the author of your textbook.
+
+If this were an actual podcast it would focus on a topic and perhaps include an interview with an interesting guest.
+
+It's very easy to create a podcast.
+
+If you use a Mac computer, try ou the pre-installed Garageband application.
+
+If you are using Windows, you can download Audacity. It's a free audio recorder and editor.
+
+Have fun creating your own podcast!
\ No newline at end of file diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html new file mode 100644 index 0000000..5263d3e --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html @@ -0,0 +1,27 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Sedona Scenes</title>
+ <meta charset="utf-8">
+ </head>
+ <style>
+ video {
+ width: 100%;
+ height: auto;
+ max-width:1280px;
+ }
+ </style>
+ <body>
+ <h1>Sedona Scenes</h1>
+ <video controls poster="11.3.sedona.jpg">
+ <!--
+ I prefer to put free formats first
+ I personally would have chose webm over ogv
+ -->
+ <source src="11.3.sedona.ogv" type="video/ogg">
+ <source src="11.3.sedona.m4v" type="video/mp4">
+ <a href="11.3.sedona.mov">Photos of Sedona</a> (.mov)
+ </video>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg Binary files differnew file mode 100644 index 0000000..33d66f0 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v Binary files differnew file mode 100644 index 0000000..73744ca --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov Binary files differnew file mode 100644 index 0000000..87b800c --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv Binary files differnew file mode 100644 index 0000000..5a26118 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html new file mode 100644 index 0000000..8ada3f1 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html @@ -0,0 +1,13 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Iframe Example</title>
+ </head>
+ <body>
+ <h1>iframe example</h1>
+ <iframe src="https://www.youtube.com/embed/2CuOug8KDWI"
+ width="640" height="385">
+ <a href="https://www.youtube.com/embed/2CuOug8KDWI">YouTube Video</a>
+ </iframe>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html new file mode 100644 index 0000000..2911854 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html @@ -0,0 +1,116 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav { background-color: #B3C7E6; }
+nav ul { list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+nav li { border-bottom: 1px solid #ffffff;
+}
+nav a { text-decoration: none;
+ display: block;
+ padding: 1em 2em;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #F8F8F8; }
+nav a:hover { color: #000066;
+ background-color: #eaeaea;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(11.5.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 7em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main { padding: 1em; }
+aside { padding: 1em; }
+figure { margin: auto;
+ padding: 8px;
+ width: 265px;
+ background-color: #FFF;
+ border: 1px solid #CCC;
+ box-shadow: 5px 5px 5px #828282;
+ transform: rotate(3deg);
+}
+figcaption { text-align: center;
+ font-size: .8em;
+ font-style: italic;
+}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+#offer { background-color: #eaeaea;
+ width: 10em;
+ margin: 2em auto 0 auto;
+ text-align: center;
+ transform:scale(2);
+}
+#offer a { text-decoration: none;
+ color: #FF0000;
+}
+header, main, nav, figure, footer { display: block; }
+@media only screen and (min-width: 768px) {
+#content { display: flex; }
+nav { flex: none; }
+main { flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF; }
+aside { flex: 4;
+ background-color: #EAEAEA; }
+header { padding-left: 10em; }
+}
+</style>
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <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>
+ <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.<br><br></p>
+ <div id="offer">
+ <a href="#">Special Offer</a>
+ </div>
+ </main>
+ <aside>
+ <figure>
+ <img src="11.5.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ </div>
+ <footer>Copyright © </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html new file mode 100644 index 0000000..be94ed7 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html @@ -0,0 +1,115 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav { background-color: #B3C7E6; }
+nav ul { list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+nav li { border-bottom: 1px solid #ffffff;
+}
+nav a { text-decoration: none;
+ display: block;
+ padding: 1em 2em;
+ transition: background-color 2s linear;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #F8F8F8; }
+nav a:hover { color: #000066;
+ background-color: #EAEAEA;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(11.6.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 7em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main { padding: 1em; }
+aside { padding: 1em; }
+figure { margin: auto;
+ padding: 8px;
+ width: 265px;
+ background-color: #FFF;
+ border: 1px solid #CCC;
+ box-shadow: 5px 5px 5px #828282;
+}
+figcaption { text-align: center;
+ font-size: .8em;
+ font-style: italic;
+}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+#offer { background-color: #eaeaea;
+ width: 10em;
+ margin: 2em auto 0 auto;
+ text-align: center;
+}
+#offer a { text-decoration: none;
+ color: #FF0000;
+}
+header, main, nav, figure, footer { display: block; }
+@media only screen and (min-width: 768px) {
+#content { display: flex; }
+nav { flex: none; }
+main { flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF; }
+aside { flex: 4;
+ background-color: #EAEAEA; }
+header { padding-left: 10em; }
+}
+</style>
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <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>
+ <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.<br><br></p>
+ <div id="offer">
+ <a href="#">Special Offer</a>
+ </div>
+ </main>
+ <aside>
+ <figure>
+ <img src="11.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ </div>
+ <footer>Copyright © </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg Binary files differnew file mode 100644 index 0000000..7c079d6 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg Binary files differnew file mode 100644 index 0000000..daef5a5 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg Binary files differnew file mode 100644 index 0000000..0ca7e32 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg Binary files differnew file mode 100644 index 0000000..428399a --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html new file mode 100644 index 0000000..b062c17 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html @@ -0,0 +1,91 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>First HTML Webpage</title>
+ <meta charset="utf-8">
+ </head>
+ <style>
+
+body {
+ font-family: Trajan Pro, Verdana, Arial;
+}
+
+h1 {
+ padding: .5em;
+ height: 2em;
+}
+
+.gallery {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ width: 70%;
+ margin: auto;
+}
+
+figure {
+ position: relative;
+ opacity: .75;
+ transition: all ease-out 3s;
+ margin: 1em;
+ z-index: 1;
+ background-color: #FFF;
+ color: rgba(0,0,0,0);
+ font-size: .5em;
+ text-align: center;
+}
+
+figure:hover {
+ opacity: 1;
+ transform: scale(3);
+ z-index: 999;
+ box-shadow: 3px 3px 3px #333;
+ color: rgba(0, 0, 0, 1);
+}
+
+ </style>
+ <body>
+ <h1>Image Gallery</h1>
+ <div id=gallery>
+
+ <figure><a href="11.7.broken-arrow-trail.jpg"><img src="11.7.photo1thumb.jpg" width=100 height=100 alt="Broken Arrow Trail, Sedona, Arizona"></a>
+ <figcaption>Broken Arrow</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.thunder-mountain.jpg"><img src="11.7.photo2thumb.jpg" width=100 height=100 alt="Thunder Mountain, Sedona, Arizona"></a>
+ <figcaption>Thunder Mountain</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.bear-mountain.jpg"><img src="11.7.photo3thumb.jpg" width=100 height=100 alt="Bear Mountain, Sedona, Arizona"></a>
+ <figcaption>Bear Mountain</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.aerie-trail.jpg"><img src="11.7.photo4thumb.jpg" width=100 height=100 alt="Aerie Trail, Sedona, Arizona"></a>
+ <figcaption>Aerie Trail</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.cathedral-rock.jpg"><img src="11.7.photo5thumb.jpg" width=100 height=100 alt="Cathedral Rock, Sedona, Arizona"></a>
+ <figcaption>Cathedral Rock</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.oak-creek.jpg"><img src="11.7.photo6thumb.jpg" width=100 height=100 alt="Oak Creek, Sedona, Arizona"></a>
+ <figcaption>Oak Creek</figcaption>
+ </figure>
+
+ </div>
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg Binary files differnew file mode 100644 index 0000000..202b674 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg Binary files differnew file mode 100644 index 0000000..4822af2 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg Binary files differnew file mode 100644 index 0000000..6c318be --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg Binary files differnew file mode 100644 index 0000000..a14d215 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg Binary files differnew file mode 100644 index 0000000..9208138 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg Binary files differnew file mode 100644 index 0000000..cf423e4 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg Binary files differnew file mode 100644 index 0000000..10bdb89 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg Binary files differnew file mode 100644 index 0000000..09b5dca --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css new file mode 100644 index 0000000..f5084fc --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css @@ -0,0 +1,88 @@ +* { box-sizing: border-box; }
+body { font-family: Verdana, Arial, sans-serif;
+ background-color: #EAEAEA;
+ margin: 0;
+}
+#wrapper {
+ color: #000066;
+ background-color: #FFFFFF;
+
+}
+header { font-family: Georgia, "Times New Roman", serif;
+ color: #00005D;
+ background-color: #869dc7;
+ background-image: url(11.8.lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ margin-top: 0;
+ padding-bottom: 1em;
+ min-height: 120px;
+ height: auto;
+}
+header h1 { padding-left: 120px;
+ padding-top: 40px;
+ margin: 0;
+}
+header span { font-style: italic;
+ font-weight: bold;
+ font-size: 95%;
+ color: #FFFFFF;
+ padding-left: 30%;
+}
+nav { background-color: #00005D;
+ letter-spacing: 0.1em;
+ font-weight: bold;
+ padding-right: 2em;
+}
+nav ul { list-style-type: none;
+ margin: 0;
+}
+
+nav li { padding: 0.5em;
+ display: inline-block;
+}
+nav a { text-decoration: none;
+ display: block;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #D3DBEB;}
+main { background-color: #ffffff;
+ color: #000000;
+ padding: 10px 20px;
+
+}
+
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+ margin: 5px;
+}
+
+
+footer {font-size:70%;
+ text-align: center;
+ padding: 10px;
+ clear: both;
+}
+header, main, nav, footer, figure, figcaption { display: block; }
+@media (min-width: 600px) {
+ #wrapper { margin: auto;
+ width: 80%; }
+ header span { padding-left: 25%; }
+}
+
+nav ul ul {
+ position: absolute;
+ background-color: #5564A0;
+ padding: 0;
+ display: none;
+}
+nav ul ul li {
+ border: 1px solid #00005D;
+ display: block;
+ width: 8em;
+ padding-left: 1em;
+ margin-left: 0;
+}
+nav li:hover ul {
+ display: block;
+}
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html new file mode 100644 index 0000000..4464d33 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Breakfast at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Breakfast Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html new file mode 100644 index 0000000..e387b85 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Coffee</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Coffee Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html new file mode 100644 index 0000000..c958c16 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Contact Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Contact Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html new file mode 100644 index 0000000..e597a05 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Cuisine</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Cuisine Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html new file mode 100644 index 0000000..fd20d0b --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Dinner at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Dinner Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html new file mode 100644 index 0000000..aaaeb66 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Directions</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Directions Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html new file mode 100644 index 0000000..cbfd2f1 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html @@ -0,0 +1,48 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="11.8.bistro.css" rel="stylesheet">
+ </head>
+ <body>
+ <div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a>
+ <ul>
+ <li><a href="11.8.breakfast.html">Breakfast</a></li>
+ <li><a href="11.8.lunch.html">Lunch</a></li>
+ <li><a href="11.8.dinner.html">Dinner</a></li>
+ </ul>
+ </li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <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>
+ <h2>Lunch and Light Dinners</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>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..3893f16 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html new file mode 100644 index 0000000..3e2483e --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lunch at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Lunch Page</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. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html new file mode 100644 index 0000000..e9f8d04 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html @@ -0,0 +1,27 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Principles of Visual Design</title>
+ </head>
+ <body>
+ <h1>Principles of Visual Design</h1>
+
+ <details>
+ <summary>Repetition</summary>
+ <p>Repeat visual components throughout the design</p>
+ </details>
+ <details>
+ <summary>Contrast</summary>
+ <p>Add visual excitement and draw attention</p>
+ </details>
+ <details>
+ <summary>Proximity</summary>
+ <p>Group related items</p>
+ </details>
+ <details>
+ <summary>Alignment</summary>
+ <p>Align elements to create visual unity</p>
+ </details>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html new file mode 100644 index 0000000..bf901fa --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png Binary files differnew file mode 100644 index 0000000..c0c553f --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html new file mode 100644 index 0000000..78d7e90 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html @@ -0,0 +1,29 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>Home Services Contact</b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business. </p>
+</main>
+<footer>
+ <i><small>Copyleft 🄯 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</small></i>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html new file mode 100644 index 0000000..a4549b4 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html @@ -0,0 +1,40 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Casita Sedona Bed & Breakfast</h1>
+</header>
+<nav>
+ <b>
+ Home
+ Rooms
+ Events
+ Contact
+ </b>
+</nav>
+<main>
+ <h2>Stay in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you'll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h3>Luxurious Rooms </h3>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, and balcony overlooking the red rocks.</p>
+ <div>
+ <strong>Casita Sedona Bed & Breakfast</strong><br>
+ 612 Tortuga Lane<br>
+ Sedona, AZ 86336<br>
+ 928-555-5555<br><br>
+ </div>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html new file mode 100644 index 0000000..497798f --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html @@ -0,0 +1,46 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro Blog</title>
+<meta charset="utf-8">
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <b>
+ Home
+ Menu
+ Blog
+ Contact
+ </b>
+ </nav>
+ <main>
+ <section>
+ <aside><p><i>Watch for the March Madness Wrap next month!</i></p></aside>
+ <h2>Bistro Blog</h2>
+
+ <article>
+ <header><h3>Valentine Wrap</h3></header>
+ <time datetime="2022-02-01">February 1, 2022</time>
+ <p>The February special sandwich is the Valentine Wrap —
+ heart-healthy organic chicken with roasted red peppers on a
+ whole wheat wrap.</p>
+ </article>
+ <article>
+ <header><h3>New Coffee of the Day Promotion</h3></header>
+ <time datetime="2022-01-12">January 12, 2022</time>
+ <p>Enjoy the best coffee on the coast in the comfort of your
+ home. We will feature a different flavor of our gourmet,
+ locally roasted coffee each day with free bistro tastings and a
+ discount on one-pound bags.</p>
+ </article>
+ </section>
+ </main>
+ <footer>Copyleft 🄯 2022
+ </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html new file mode 100644 index 0000000..815ca8c --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html @@ -0,0 +1,10 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Anchor Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<a href="http://webdevbasics.net">Basics of Web Design Textbook Companion</a>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html new file mode 100644 index 0000000..8ca9ab7 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Contact</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Contact Trillium Media Design Today</h2>
+ <ul>
+ <li>E-mail: <a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a></li>
+ <li>Phone: 555-555-5555</li>
+ </ul>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html new file mode 100644 index 0000000..a933d75 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html new file mode 100644 index 0000000..68cc664 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html @@ -0,0 +1,38 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Services</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+ <dt><strong>Website Design</strong></dt>
+ <dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
+ <dt><strong>E-Commerce Solutions</strong></dt>
+ <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
+ <dt><strong>Search Engine Optimization</strong></dt>
+ <dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
+</dl>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html new file mode 100644 index 0000000..60e1fd3 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html @@ -0,0 +1,22 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Paragraph Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<p>Sample Test Paragraph. </p>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html new file mode 100644 index 0000000..c7098a7 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html @@ -0,0 +1,23 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Line Break Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<p>This is a sample paragraph. <br /> This is a linebreak test.
+</p>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html new file mode 100644 index 0000000..8c95b56 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Horizontal Rule Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Heading Level 1</h1>
+<p>This is a sample paragraph. <br> Heading tags can help to make your pages more accessible and usable. It is good coding practice to use heading tags to outline the structure of your web page content.
+</p>
+<hr>
+<h2>Heading Level 2</h2>
+<h3>Heading Level 3</h3>
+<h4>Heading Level 4</h4>
+<h5>Heading Level 5</h5>
+<h6>Heading Level 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html new file mode 100644 index 0000000..fa5ce63 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Blockquote Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>The Power of the Web</h1>
+<p>According to Richard Stallman, the inventor of the GNU Operating system and founder of the Free Software Foundation, from the <a href=https://www.gnu.org/gnu/manifesto.en.html>GNU Manifesto</a>:
+</p>
+<blockquote>
+The idea of copyright did not exist in ancient times, when authors frequently copied other authors at length in works of non-fiction. This practice was useful, and is the only way many authors' works have survived even in part.
+</blockquote>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html new file mode 100644 index 0000000..541373b --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html @@ -0,0 +1,16 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ol>
+ <li>Blue</li>
+ <li>Green</li>
+ <li>Teal</li>
+
+</ol>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html new file mode 100644 index 0000000..e5eaead --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ol type="A">
+ <li>Blue</li>
+ <li>Green</li>
+ <li>Teal</li>
+</ol>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html new file mode 100644 index 0000000..87004b2 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ul>
+ <li>Blue</li>
+ <li>Teal</li>
+ <li>Red</li>
+</ul>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html new file mode 100644 index 0000000..e0900e8 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Description List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Sample Description List</h1>
+<dl>
+ <dt>TCP</dt>
+ <dd>Transmission Control Protocol is a method (protocol) used along with the Internet Protocol (IP) to send data in the form of message units, called packets, between computers over the Internet.</dd>
+ <dt>IP</dt>
+ <dd>Internet Protocol is the method or protocol by which data is sent from one computer to another on the Internet. Each computer on the Internet is uniquely identified by an IP address.</dd>
+ <dt>FTP</dt>
+ <dd>File Transfer Protocol is a protocol used to exchange files between computers on the Internet. </dd>
+ <dt>HTTP</dt>
+ <dd>Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia files on the Web.</dd>
+</dl>
+</body>
+</html>
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html new file mode 100644 index 0000000..140d5cc --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Creative Commons</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Web Design Steps</h1>
+ <ul>
+ <li><strong>Determine the Intended Audience</strong><br>
+ The colors, images, fonts, and layout should be tailored to the
+ <em>preferences of your audience.</em> The type of site content (reading level, amount of animation, etc.) should be appropriate for your chosen audience.</li>
+ <li><strong>Determine the Goals of the Site</strong><br>
+ Some common goals of web sites are: to be informative, to create a personal home page, to establish a corporate web presence, and to do business in e-commerce.</li>
+ <li><strong>Determine the General Content and Create a Site Map</strong><br>
+ The site map is sometimes called a Storyboard. Common organizational structures for Web sites are: hierarchical, linear, and random.</li>
+ <li><strong>Sketch a Tentative Page Layout</strong><br>
+ <em>Be consistent</em> in your overall layout — color, typefaces, logo location,
+ navigation bar, etc. Plan your Home Page Layout to avoid scrolling.
+ Plan your Content Page Layout to be consistent, with easy navigation.</li>
+</ul>
+
+
+<p><small>Copyleft 🄯 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</small></p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html new file mode 100644 index 0000000..073816e --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Block Anchor</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+<a href="http://www.w3.org/TR/html-markup">
+<h1>HTML5 Reference</h1>
+<p>Bookmark this site for a handy HTML5 reference.</p>
+</a>
+</header>
+<main>
+<p>
+Website content goes here
+</p>
+</main>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html new file mode 100644 index 0000000..7213b6f --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Blockquote Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>The Power of the Web</h1>
+<p>According to Tim Berners-Lee, the inventor of the World Wide Web, at https://www.w3.org/Press/IPO-announce:
+</p>
+<blockquote>
+The power of the Web is in its universality. <em>Access by everyone</em> regardless of disability is an essential aspect.
+</blockquote>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html new file mode 100644 index 0000000..a89283d --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Contact</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Contact Trillium Media Design Today</h2>
+ <ul>
+ <li>E-mail: contact@trilliummediadesign.com</li>
+ <li>Phone: 555-555-5555</li>
+ </ul>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html new file mode 100644 index 0000000..a933d75 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html new file mode 100644 index 0000000..68cc664 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html @@ -0,0 +1,38 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Services</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+ <dt><strong>Website Design</strong></dt>
+ <dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
+ <dt><strong>E-Commerce Solutions</strong></dt>
+ <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
+ <dt><strong>Search Engine Optimization</strong></dt>
+ <dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
+</dl>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html new file mode 100644 index 0000000..9e7949d --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html @@ -0,0 +1,36 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <b>
+ Home
+ Menu
+ Blog
+ Contact
+ </b>
+ </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>
+ <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>
+ <footer>Copyright © 2022
+ </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html new file mode 100644 index 0000000..1e45a3d --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html @@ -0,0 +1,56 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Favorite Sites</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Favorite Sites</h1>
+<ul>
+ <li>Hobbies</li>
+ <li>HTML5</li>
+ <li>CSS</li>
+</ul>
+<h2>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>HTML5</h2>
+ <dl>
+ <dt>Elements</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>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>Back to Top</h2>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html new file mode 100644 index 0000000..b91aef0 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html @@ -0,0 +1,10 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Anchor Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<a href="http://webdevbasics.net" target="_blank">Basics of Web Design Textbook Companion</a>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html new file mode 100644 index 0000000..6a48229 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html @@ -0,0 +1,9 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html new file mode 100644 index 0000000..4de4e5f --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Inline CSS Example</title> +</head> +<meta charset="utf-8"> +<body style="background-color:#F5F5F5;color:#008080;"> + <h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1> + <p>This paragraph inherits the styles applied to the body tag.</p> + <!--This is exactly what the book requests, it's so simple that no differentiation or style could really be done--> +</body> +</html> diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html new file mode 100644 index 0000000..bef46cd --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Inline CSS Example</title> +</head> +<meta charset="utf-8"> +<body> + <h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1> + <p>This paragraph inherits the styles applied to the body tag.</p> + <p style="color:#333333">This paragraph overrides the text color style applied to the body tag.</p> +<!--This is so simple that any deviation would result in penalties. Please do not consider this copied--> +</body> +</html> diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html new file mode 100644 index 0000000..cb14841 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html @@ -0,0 +1,53 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+body {
+ background-color: #F9F0FE;
+ color: #5B3256;
+}
+h1 {
+ background-color: #833B83;
+ color: #F9F0FE;
+}
+h2 {
+ background-color: #AD77C3;
+ color: #F9F0FE;
+}
+<!--This is exactly what was asked, please do not consider this copied.-->
+</style>
+
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services:</p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li>Usability Studies</li>
+ <li>Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html new file mode 100644 index 0000000..b959488 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html @@ -0,0 +1,62 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+<!--The Book requests this exactly! This is not copied!-->
+body {
+ background-color: #F9F0FE;
+ color: #5B3256;
+}
+h1 {
+ background-color: #833B83;
+ color: #F9F0FE;
+}
+h2 {
+ background-color: #AD77C3;
+ color: #F9F0FE;
+}
+
+.feature {
+ color: #B33939;
+}
+
+#new {
+ color: #227093;
+}
+<!--Comment for differentiation purposes-->
+</style>
+
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services:</p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li class="feature">Usability Studies</li>
+ <li class="feature">Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p id="new">Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html new file mode 100644 index 0000000..6896758 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html @@ -0,0 +1,59 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+body {
+ background-color: #F9F0FE;
+ color: #5B3256;
+}
+h1 {
+ background-color: #833B83;
+ color: #F9F0FE;
+}
+h2 {
+ background-color: #AD77C3;
+ color: #F9F0FE;
+}
+span {
+ background-color: black;
+}
+span h1 {
+ color: yellow;
+}
+<!--Comment for differentiation purposes-->
+</style>
+
+</head>
+<body>
+<header>
+<span><h1>Trillium Media Design</h1><span>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p><span>Trillium Media Design</span> will bring your company’s Web presence to the next level. <span>We offer a comprehensive range of services:</span></p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li>Usability Studies</li>
+ <li>Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png Binary files differnew file mode 100644 index 0000000..eff3802 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css new file mode 100644 index 0000000..0e4f9ac --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css @@ -0,0 +1,6 @@ +/* Ideally these colors shouldn't be as eye-bleachingly bright. Also, since these colors are the "purest form" of colors, css aliases like "blue" and "white" should be used.*/
+
+body {
+ background-color: #0000FF;
+ color: #FFFFFF;
+}
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html new file mode 100644 index 0000000..9f7df07 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html @@ -0,0 +1,12 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>External Styles</title>
+<meta charset="utf-8">
+<!--Changing CSS name is a requirement for this to function given the new naming scheme-->
+<link rel="stylesheet" href="4.3.color.css">
+</head>
+<body>
+ <p>This web page uses an external style sheet.</p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html new file mode 100644 index 0000000..6be2f7f --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html @@ -0,0 +1,18 @@ +<!--I just discovered my editor has an auto-indentor for html. Never realized it supported HTML/XML as well. I guess everything I make will have proper indentations too.-->
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>The Cascade in Action</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="4.7.site.css">
+ <style>
+body {
+ color: #0000FF;
+}
+ </style>
+ </head>
+ <body>
+ <p>this paragraph applies the external and embedded styles — note hwo the blue text color that is configured in the embedded styles takes precedence over the black text color configured in the external stylesheet.</p>
+ <p style="color: #FF0000">inline styles configure this paragraph to have red text and take precedence over the embedded and external styles.</p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css new file mode 100644 index 0000000..b9f18c5 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css @@ -0,0 +1,4 @@ +body {
+ background-color: #FFFFCC; /*Now this is a good looking color!*/
+ color: #000000;
+}
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html new file mode 100644 index 0000000..6c6f4f4 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html @@ -0,0 +1,38 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="4.6.trillium.css">
+</head>
+<body>
+<header>
+<span><h1>Trillium Media Design</h1><span>
+</header>
+<nav><a href="4.6.index.html">Home</a>
+ <a href="4.6.services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p><span>Trillium Media Design</span> will bring your company’s Web presence to the next level. <span>We offer a comprehensive range of services:</span></p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li>Usability Studies</li>
+ <li>Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html new file mode 100644 index 0000000..d9d1804 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="4.6.trillium.css">
+</head>
+<body>
+ <header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+ <dt><strong>Website Design</strong></dt>
+ <dd>Whether your needs are large or small, Trillium can get your company on the Web!</dd>
+ <dt><strong>Interactive Animation</strong></dt>
+ <dd>Multimedia training and marketing animations are our specialty.</dd>
+ <dt><strong>E-Commerce Solutions</strong></dt>
+ <dd>Trillium offers quick and easy entry into the e-commerce marketplace.</dd>
+ <dt><strong>Usability Studies</strong></dt>
+ <dd>Trillium can assess the usability of your current site and suggest improvements.</dd>
+ <dt><strong>Search Engine Optimization</strong></dt>
+ <dd>Most people find websites using search engines. Trillium can help you get your site noticed.</dd>
+ </dl>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css new file mode 100644 index 0000000..c260a61 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css @@ -0,0 +1,18 @@ +body { + background-color: #F9F0FE; + color: #5B3256; +} +h1 { + background-color: #833B83; + color: #F9F0FE; +} +h2 { + background-color: #AD77C3; + color: #F9F0FE; +} +span { + background-color: black; +} +span h1 { + color: yellow; +} diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html new file mode 100644 index 0000000..a8826b3 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html @@ -0,0 +1,72 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+body {
+ background-image: url(background.jpg);
+ font-family: Verdana, Arial, sans-serif;
+}
+
+header {
+ background-color: #000033;
+ background-image: url(headerbackblue.jpg);
+ background-position: right;
+ background-repeat: no-repeat;
+ color: #FFFF99;
+ line-height: 400%;
+ text-indent: 1em;
+}
+
+h1, h2, h3 {
+ font-family:Georgia, 'Times New Roman', serif;
+}
+
+nav {
+ font-weight: bold;
+ font-size: 1.5em;
+}
+
+nav a {
+ text-decoration:: none;
+}
+
+p {
+ text-indent: 2em;
+}
+
+footer {
+ text-align: center;
+ font-style: italic;
+ font-size: .80em;
+}
+ </style>
+ </head>
+ <body>
+ <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>
+ <img src="hero.jpg" alt="tour guide paddling a kayak" width="500" height="350">
+
+ <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>
+ Copyright © KayakDoorCounty.net
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg Binary files differnew file mode 100644 index 0000000..5d33e9e --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg Binary files differnew file mode 100644 index 0000000..6ae2660 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg Binary files differnew file mode 100644 index 0000000..363e638 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html new file mode 100644 index 0000000..b37bbcf --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Coffee House</title>
+ <meta charset="utf-8">
+ <style>
+body { font-size: 150%;
+ font-family: Arial;
+ color: #992435;
+ background-image: url(coffeepour.jpg);
+ background-repeat: no-repeat;
+ background: url(coffee.gif) no-repeat left bottom,
+ url(coffeepour.jpg) no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Coffee House</h1>
+ </header>
+ <main>
+ <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+ <ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ </ul>
+ </main>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html new file mode 100644 index 0000000..4de880a --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Coffee House</title>
+ <meta charset="utf-8">
+ <style>
+body { font-size: 150%;
+ font-family: Arial;
+ color: #992435;
+ background-image: url(coffeepour.gif);
+ background: url(coffee.gif) no-repeat left bottom,
+ url(coffeeback.gif) no-repeat,
+ url(coffeepour.gif) no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Coffee House</h1>
+ </header>
+ <main>
+ <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+ <ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ </ul>
+ </main>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html new file mode 100644 index 0000000..0257d60 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html @@ -0,0 +1,39 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Coffee House</title>
+ <meta charset="utf-8">
+ <style>
+body { font-size: 150%;
+ font-family: Arial;
+ color: #992435;
+ background-image: url(coffeepour.jpg);
+ background-repeat: no-repeat;
+ background: url(coffee.gif) no-repeat left bottom,
+ url(coffeepour.jpg) no-repeat;
+}
+ul {
+ list-style-image: url(marker.gif);
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Coffee House</h1>
+ </header>
+ <main>
+ <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+ <ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ </ul>
+ </main>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif Binary files differnew file mode 100644 index 0000000..de749d0 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif Binary files differnew file mode 100644 index 0000000..8026552 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif Binary files differnew file mode 100644 index 0000000..2981542 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg Binary files differnew file mode 100644 index 0000000..4b031f0 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif Binary files differnew file mode 100644 index 0000000..7031505 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html new file mode 100644 index 0000000..c7a8a2f --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Tropical Island</title>
+ <meta charset="utf-8">
+ <style>
+figcaption {
+ font-weight: bold;
+ font-style: italic;
+ font-family: Papyrus, fantasy;
+ font-size: 1.5em;
+}
+ </style>
+ </head>
+ <body>
+ <figure>
+ <img src=myisland.jpg alt="Tropical Island" height=480 width=640>
+ <figcaption>Tropical Island Getaway</figcaption>
+ </figure>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg Binary files differnew file mode 100644 index 0000000..5d90394 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html new file mode 100644 index 0000000..9070c7d --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html @@ -0,0 +1,36 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </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>
+ <img height=350 width=500 alt="KayakDorCountry.net" src=hero.jpg>
+
+ <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>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html new file mode 100644 index 0000000..26cf162 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html @@ -0,0 +1,45 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+#bar{
+ background-color:#152420;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+ <img height=350 width=500 alt="KayakDorCountry.net" src=hero.jpg>
+
+ <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>
+ <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>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html new file mode 100644 index 0000000..e7bae4d --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html @@ -0,0 +1,49 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+#bar{
+ background-color:#152420;
+}
+main {
+ background-image: url(heroback.jpg);
+ background-repeat: no-repeat;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></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>
+ <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>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html new file mode 100644 index 0000000..e57c2ad --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html @@ -0,0 +1,58 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+#bar{
+ background-color:#152420;
+}
+
+body {
+ font-family: Verdana, Arial, sans-serif;
+}
+
+h2, h3 {
+ font-family: Georgia, 'Times New Roman', serif;
+}
+
+main {
+ background-image: url(heroback.jpg);
+ background-repeat: no-repeat;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></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>
+ <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>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html new file mode 100644 index 0000000..4806c6c --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html @@ -0,0 +1,50 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <link rel=icon href=favicon.ico type="image/x-icon">
+ <style>
+#bar{
+ background-color:#152420;
+}
+main {
+ background-image: url(heroback.jpg);
+ background-repeat: no-repeat;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></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>
+ <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>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif Binary files differnew file mode 100644 index 0000000..e620a5b --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico Binary files differnew file mode 100644 index 0000000..c22c6bb --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg Binary files differnew file mode 100644 index 0000000..363e638 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg Binary files differnew file mode 100644 index 0000000..a72a7a0 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif Binary files differnew file mode 100644 index 0000000..7e0eab6 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif Binary files differnew file mode 100644 index 0000000..8fd7564 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif Binary files differnew file mode 100644 index 0000000..c2189a2 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif Binary files differnew file mode 100644 index 0000000..807e4e8 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif 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 diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html new file mode 100644 index 0000000..318d34c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html @@ -0,0 +1,25 @@ +<!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;
+}
+ </style>
+ </head>
+ <body>
+ <div class="div1">
+ This is the first box.
+ </div>
+ <div class="div2">
+ This is the second box.
+ </div>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html new file mode 100644 index 0000000..6bcaf53 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html @@ -0,0 +1,34 @@ +<!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>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html new file mode 100644 index 0000000..3805264 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Layout Example</title>
+ <meta charset="utf-8">
+ <style>
+nav {
+ float: left;
+ width: 150px;
+}
+main {
+ margin-left: 160px;
+}
+body {
+ background-color: #000066;
+}
+#wrapper {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background-color: #EAEAEA;
+}
+h1 {
+ margin: 0;
+ padding: 10px;
+}
+nav {
+ float: left;
+ width: 150px;
+ padding: 10px;
+}
+main {
+ margin-left: 160px;
+ padding: 10px;
+ background-color: #FFFFFF;
+}
+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>
+ <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 © </footer>
+ </div>
+ </body>
+</html>
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html new file mode 100644 index 0000000..a9575b3 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html @@ -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="7.7.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 ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css new file mode 100644 index 0000000..e32be27 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css @@ -0,0 +1,91 @@ +*{ + 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(7.7.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; +} + + + + diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html new file mode 100644 index 0000000..e2c4866 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html @@ -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, margin, and border properties:
+.float { float: left;
+ margin-right: 10px;
+ border: 3px ridge #000000; }
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+ <img class=float src="7.2.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 — support organizations dedicated to preserving their habitat. </p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg Binary files differnew file mode 100644 index 0000000..7dd9982 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html new file mode 100644 index 0000000..14226a7 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html @@ -0,0 +1,98 @@ +<!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(7.5.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;
+}
+
+nav li {
+ display: inline;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ font-size: 1.5em;
+ margin: 5px;
+}
+nav a {
+ text-decoration: none;
+ padding-left: 10px;
+ 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="7.5.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 ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html new file mode 100644 index 0000000..3d69728 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html @@ -0,0 +1,102 @@ +<!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(7.6.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;
+}
+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;
+}
+
+ </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="menu.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="7.6.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 ©
+ </footer>
+ </main>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt new file mode 100644 index 0000000..9be3095 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt @@ -0,0 +1 @@ +I am using an older version of the book, so this assignment doesn't match up with the student files. I got the older version as a hand-me-down due to budgeting constraints. So please do understand that this section being different isn't out of laze, mistake, or plagarism, but rather the unaffordability of textbooks, but a willingness to still practice. diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html new file mode 100644 index 0000000..bce1e3b --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>First HTML Webpage</title>
+ <meta charset="utf-8">
+ <style>
+* {
+ box-sizing: border-box;
+}
+
+#gallery {
+ position: relative;
+}
+
+#gallery ul {
+ width: 280px;
+ list-style-type: none;
+}
+
+#gallery li {
+ display: inline;
+ float: left;
+ padding: 10px;
+}
+
+#gallery img {
+ border-style: none;
+}
+
+
+#gallery a {
+ text-decoration: none; color: #333; font-style: italic;
+}
+
+#gallery span {
+ display: none;
+}
+
+#gallery a:hover span {
+ display: block;
+ position: absolute;
+ top: 10px;
+ left: 300px;
+ text-align: center;
+}
+ </style>
+ </head>
+ <body>
+ <div id=gallery>
+ <ul>
+ <li><a href="yls.jpg"><img src="yls.jpg" width="100" height="75" alt="YLS"><span><img src="yls.jpg" width="250" height="150" alt="YLS"><br>YLS</span></li>
+ <li><a href="yogadoor.jpg"><img src="yogadoor.jpg" width="100" height="75" alt="yogadoor"><span><img src="yogadoor.jpg" width="250" height="150" alt="yogadoor"><br>yogadoor</span></li>
+ <li><a href="lighthouselogo.jpg"><img src="lighthouselogo.jpg" width="100" height="75" alt="lighthouselogo"><span><img src="lighthouselogo.jpg" width="250" height="150" alt="lighthouselogo"><br>lighthouselogo</span></li>
+ </ul>
+ </div>
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg Binary files differnew file mode 100644 index 0000000..7dd9982 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg Binary files differnew file mode 100644 index 0000000..fe0de96 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt new file mode 100644 index 0000000..db84d5f --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt @@ -0,0 +1 @@ +Similar to ch7p, this part of the book is missing for me. Textbooks are expensive and all I request is a bit of mercy due to this. diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html new file mode 100644 index 0000000..f4a045e --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html @@ -0,0 +1,90 @@ +<!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 a { text-decoration: none;
+ padding: 10px;
+ font-weight: bold;
+}
+nav ul { list-style-type: none;
+ padding: 10px;
+}
+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>
+ <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>
+ </nav>
+ <main>
+ <div class="content">
+ <img src="7.4.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 ©
+ </footer>
+ </main>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html new file mode 100644 index 0000000..7c7e1e2 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html @@ -0,0 +1,109 @@ +<!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;
+ margin-top: 40px;
+}
+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 {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 40px; width: 100%;
+ min-width: 40em;
+ background-color: #B3C7E6;
+ z-index: 9999;
+}
+
+nav li {
+ display: inline;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ font-size: 1.5em;
+ margin: 5px;
+ padding-right: 10%;
+}
+nav a {
+ text-decoration: none;
+ padding-left: 10px;
+ 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="7.11.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 ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html new file mode 100644 index 0000000..ecd29f3 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link media="screen" href="bistro.css" rel="stylesheet">
+<link media="print" href="bistroprint.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="7.8.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 ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css new file mode 100644 index 0000000..f47a52d --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css @@ -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(7.8.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;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css new file mode 100644 index 0000000..e165b24 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css @@ -0,0 +1,55 @@ +* {
+ 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: #000000;
+ font-size: 20pt;
+ padding: 10px 10px 10px 155px;
+ height: 150px;
+ background-repeat: no-repeat;
+background-image: url(7.8.lighthouselogo.jpg); }
+
+nav{
+display:none;
+}
+
+main {
+ background-color: #FFFFFF;
+ color: #000000;
+ padding: 10px 20px;
+ display: block;
+ overflow: auto;
+ 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;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html new file mode 100644 index 0000000..60471e6 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<!--The Chapter 7 folder didn't come with any template for this. So I opted to use the 7.7 work as a a base-->
+<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="7.9.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 ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif Binary files differnew file mode 100644 index 0000000..832901a --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css new file mode 100644 index 0000000..b8a0b9d --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css @@ -0,0 +1,95 @@ +*{ + 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(7.9.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(7.9.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; +} + + + + diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html new file mode 100644 index 0000000..c8bd7af --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
+ background-color: #227093;
+}
+
+h1 {
+ color: #FFFFFF;
+ font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html new file mode 100644 index 0000000..d338ba2 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex; min-height: 100vh;
+ justify-content: center; align-items: center;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html new file mode 100644 index 0000000..8ac938e --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex; min-height: 100vh;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+ margin: auto;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html new file mode 100644 index 0000000..5cb35ee --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: grid; min-height: 100vh;
+ justify-content: center; align-items: center;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg Binary files differnew file mode 100644 index 0000000..014d773 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html new file mode 100644 index 0000000..2c4b9c1 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html @@ -0,0 +1,145 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <!--Similar situation here to my problem with 8.5, my book didn't actually have instructions on how to do this, so I have to try my best to reverse engineer and figure out the example. I hope this is satisfactory!-->
+ <style>
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+body {
+ font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper {
+ padding: 0;
+ min-width: 900px;
+}
+nav {
+ float: left;
+ width: 150px;
+}
+
+nav ul {
+ list-style-type: none;
+ padding: 1em;
+}
+nav a {
+ text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+header {
+ background-color: #869dc7;
+ color: #00005D;
+ background-image: url(8.6.light2.jpg);
+ padding: 1em 0 1em 190px;
+ font-size: 130%;
+ min-width: 600px;
+ background-repeat: no-repeat;
+ font-family: "Times New Roman", serif;
+}
+
+main {
+ float: left;
+ width: 50%;
+ padding: 1em;
+}
+
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+
+aside {
+ float: right;
+ width: 300px;
+ background-color: #EAEAEA;
+ padding-left: 1em;
+ margin: 0;
+}
+
+figcaption {
+ font-style: italic; padding-left: 2em;
+}
+
+footer {
+ background-color: #869dc7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+
+header {
+ grid-area: header;
+}
+
+nav {
+ grid-area: nav;
+}
+
+main {
+ grid-area: main; width: 100%;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+}
+
+ @supports (display: grid) {
+ #wrapper {
+ display: grid;
+ grid-template:
+ "header header header" 100px
+ "nav main aside" auto
+ "footer footer footer" 50px
+ / 150px 1fr 300px;
+ }
+ }
+ </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>
+ <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>
+ <aside>
+ <figure>
+ <img src="8.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Lighthouse Island Bistro</figcaption>
+ </figure>
+ </aside>
+ <footer>Copyright ©</footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg Binary files differnew file mode 100644 index 0000000..4d5d07b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg Binary files differnew file mode 100644 index 0000000..db35321 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg Binary files differnew file mode 100644 index 0000000..816f817 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg Binary files differnew file mode 100644 index 0000000..3a37f44 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg Binary files differnew file mode 100644 index 0000000..a19a586 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg Binary files differnew file mode 100644 index 0000000..c5bd806 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg Binary files differnew file mode 100644 index 0000000..09b35e8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html new file mode 100644 index 0000000..b0bf600 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html @@ -0,0 +1,54 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Flexbox Gallery</title>
+ <meta charset="utf-8">
+ <style>
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #FEFEFE;
+}
+
+header {
+ text-align: center;
+}
+
+#gallery {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+img {
+ margin: 1em;
+ box-shadow: 10px 10px 10px #777;
+}
+
+
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Flexbox Gallery</h1>
+ </header>
+ <main>
+ <div id="gallery">
+ <img src="8.1.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+ <img src="8.1.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+ <img src="8.1.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+ <img src="8.1.bird4.jpg" width="200" height="150" alt="Rock Wren">
+ <img src="8.1.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+ <img src="8.1.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+ </div>
+
+ </main>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html new file mode 100644 index 0000000..4669030 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html @@ -0,0 +1,113 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+
+
+
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+ padding: 1em; }
+nav a { text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(8.2.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 10em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+nav { float: left; }
+main{ padding: 1em; }
+aside { float: right; padding: 1em; }
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+
+#content {
+ display: flex;
+}
+nav {
+ flex: none;
+ background-color: #B3C7E6;
+}
+
+main {
+ flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF;
+}
+
+aside {
+ flex: 4;
+ background-color: #EAEAEA;
+}
+
+header, main, nav, figure, footer {
+ display: block;
+}
+
+nav {
+ order: 1;
+}
+
+main {
+ order: 2;
+}
+
+aside {
+ order: 3;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <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>
+ <aside>
+ <figure>
+ <img src="8.2.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ <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>
+ <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>
+
+ </div>
+ <footer>Copyright © </footer>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg Binary files differnew file mode 100644 index 0000000..db35321 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg Binary files differnew file mode 100644 index 0000000..816f817 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg Binary files differnew file mode 100644 index 0000000..3a37f44 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg Binary files differnew file mode 100644 index 0000000..a19a586 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg Binary files differnew file mode 100644 index 0000000..c5bd806 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg Binary files differnew file mode 100644 index 0000000..09b35e8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html new file mode 100644 index 0000000..195a419 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html @@ -0,0 +1,43 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Grid Gallery</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body { background-color: #FEFEFE; }
+header { text-align: center; }
+
+#gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 200px);
+ grid-template-rows: auto;
+ grid-gap: 2em; gap: 2em;
+}
+
+
+
+
+
+
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Grid Gallery</h1>
+ </header>
+ <main>
+ <div id="gallery">
+ <img src="8.3.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+ <img src="8.3.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+ <img src="8.3.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+ <img src="8.3.bird4.jpg" width="200" height="150" alt="Rock Wren">
+ <img src="8.3.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+ <img src="8.3.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+ </div>
+ </main>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html new file mode 100644 index 0000000..17854a8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html @@ -0,0 +1,101 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+ <!--I checked my work and compared
+ it to the work provided by the student files
+ My book had some extra stuff in it that I had to remove.
+ Following is what it had:
+ @supports (display: grid) {
+ #wrapper { display: grid;
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 160px auto auto; }
+ header { grid-row: 1 / 2; grid-column: 1 / 3; }
+ nav { grid-row: 2 / 3; grid-column: 1 / 2; }
+ main { grid-row: 2 / 3; grid-column: 2 / 3; }
+ footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+ }
+ I'd love to use the most up to date version, but,
+ as stated, textbooks are incredibly expensive
+ and even renting is taxing.-->
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family: Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+ padding: 1em; }
+nav a { text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+
+
+header { background-color: #869dc7;
+ color: #00005D;
+ background-image: url(8.4.light2.jpg);
+ padding: 1em 0 1em 190px;
+ font-size: 130%;
+ min-width: 700px;
+ background-repeat: no-repeat;
+ font-family: "Times New Roman", serif;
+}
+nav { float: left; }
+main { padding: 1em; }
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869dc7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+
+}
+
+
+#wrapper {
+ display: grid;
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 100px auto 50px;
+}
+
+header { grid-row: 1 / 2; grid-column: 1 / 3; }
+nav { grid-row: 2 / 3; grid-column: 1 / 2; }
+main { grid-row: 2 / 3; grid-column: 2 / 3; }
+footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+
+
+</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>
+ <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 © </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg Binary files differnew file mode 100644 index 0000000..ae6551b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg Binary files differnew file mode 100644 index 0000000..cb611ce --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html new file mode 100644 index 0000000..43a27a8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html @@ -0,0 +1,131 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<!--
+ This assignment was completely missing from my book
+ I tried my best to research how to do it via the internet
+ so if this, well, sucks, do bare in mind that's the case.
+
+ these newer textbooks are just too expensive!
+ they cost more than my gas money for my gas guzzling SUV!
+-->
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Arial, sans-serif;
+ margin: 0;
+}
+
+header { background-image: url(8.5.header.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+header {
+ grid-area: header;
+}
+
+nav {
+ grid-area: nav;
+}
+
+main {
+ grid-area: main;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+}
+
+
+#wrapper {
+ display: grid;
+ grid-template:
+ "header header header" 100px
+ "nav main aside" auto
+ "footer footer footer" 50px
+ / 150px 1fr 30%;
+}
+
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+ color: #F7F1E3;
+ font-size: 300%;
+ text-shadow: 10px 10px 10px #000000;
+}
+nav { font-size: 120%; }
+
+nav ul { padding-left: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; }
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+ min-width: 6em;
+ font-size: 110%;
+ text-align: center;
+ background-color: #003C58;
+ margin: .5em;
+ padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+aside { padding: 1em;}
+
+main { padding: 0 1em 1em; }
+
+footer { background-color: #CCCCCC;
+ text-align: center;
+ font-style: italic;
+ padding: 1em; }
+
+
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Casita Sedona</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Rooms</a></li>
+ <li><a href="specials.html">Specials</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Located in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h2>Luxurious Rooms </h2>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms — each is unique and sure to be a high point of your vacation experience.</p>
+ <h2>Hearty Breakfast</h2>
+ <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+ <h2>About Your Hosts</h2>
+ <p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+ </main>
+ <aside>
+ <img src="8.5.scenery.jpg" alt="Owl Clover wildflowers with red rock mountain">
+ <h2>Guided Hikes</h2>
+ <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+ </aside>
+ <footer>Copyright ©
+ </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg Binary files differnew file mode 100644 index 0000000..25eab07 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg Binary files differnew file mode 100644 index 0000000..e703c63 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html new file mode 100644 index 0000000..4155306 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html @@ -0,0 +1,14 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+ <h1>Image Element</h1>
+ <img src="8.12.fallback.jpg"
+ sizes="100vw"
+ srcset="8.12.large.jpg 1200w, 8.12.medium.jpg 800w, 8.12.small.jpg 320w"
+ alt="waterwheel">
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg Binary files differnew file mode 100644 index 0000000..a79996a --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg Binary files differnew file mode 100644 index 0000000..4478ad8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg Binary files differnew file mode 100644 index 0000000..946c71f --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg Binary files differnew file mode 100644 index 0000000..e703c63 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html new file mode 100644 index 0000000..480b464 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html @@ -0,0 +1,18 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+ <!--The student files had a header, adding just in case my book is missing it.-->
+ <h1>Picture element<h1>
+ <!--Opted to try out the webp images here. I'm a big fan of them and wanted to see if they'd work with this set up as well. -->
+ <picture>
+ <source media="(min-width: 1200px)" srcset="8.11.large.webp">
+ <source media="(min-width: 800px)" srcset="8.11.medium.webp">
+ <source media="(min-width: 320px)" srcset="8.11.small.webp">
+ <img src="8.11.fallback.jpg" alt="waterwheel">
+</picture>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg Binary files differnew file mode 100644 index 0000000..a79996a --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp Binary files differnew file mode 100644 index 0000000..ca3bf54 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg Binary files differnew file mode 100644 index 0000000..4478ad8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp Binary files differnew file mode 100644 index 0000000..b90e766 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg Binary files differnew file mode 100644 index 0000000..946c71f --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp Binary files differnew file mode 100644 index 0000000..5051869 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html new file mode 100644 index 0000000..b1e9bd4 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html @@ -0,0 +1,141 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+* { box-sizing: border-box;
+ margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color: #B3C7E6;
+}
+
+header { color: #00005D;
+ background-color: #869DC7;
+ background-image: url(8.8.light.gif);
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ padding: .5em 0 .5em 5.5em;
+}
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 1em;
+}
+aside { text-align: center; }
+
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+ padding-left: 0;
+ border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;
+ text-align: center;
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+ font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+ color: #FEFEFE; }
+
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+ nav li {
+ display: inline-block;
+ width: 7em;
+ padding: 0.5em;
+ border: none;
+ }
+ nav ul {
+ text-align: center;
+ }
+ main {
+ float: left;
+ width: 55%;
+ }
+ aside {
+ margin-left: 55%;
+ }
+ footer {
+ clear: both;
+ }
+
+}
+
+ @media (min-width: 1024px) {
+ nav li {
+ display: block;
+ }
+ nav ul {
+ text-align: left;
+ }
+ nav {
+ float: left;
+ }
+ #wrapper {
+ width: 80%; margin: auto; max-width: 1200px;
+ }
+ body {
+ background-color: #000066; }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li id="page">Home</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 Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast free-trade 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>
+ <aside>
+ <figure>
+ <img src="8.8.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+ </figure>
+ </aside>
+ <footer>
+ Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html new file mode 100644 index 0000000..c0b856b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html @@ -0,0 +1,170 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+* { box-sizing: border-box;
+ margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color: #B3C7E6;
+}
+
+header { color: #00005D;
+ background-color: #869DC7;
+ background-image: url(8.9.light.gif);
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ padding: .5em 0 .5em 5.5em;
+}
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 1em;
+}
+aside { text-align: center; }
+
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+ padding-left: 0;
+ border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;
+ text-align: center;
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+ font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+ color: #FEFEFE; }
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+ nav ul {
+ display: flex; flex-flow: row nowrap;
+ justify-content: space-around;
+ }
+ nav ul li {
+ border-bottom: none;
+ }
+
+ #wrapper {
+ display: grid;
+ grid-template-columns: 55% auto;
+ grid-template-rows: auto auto auto auto;
+ }
+ header {
+ grid-row: 1 / 2;
+ grid-column: 1 / 3;
+ }
+ nav {
+ grid-row: 2 / 3;
+ grid-column: 1 / 3;
+ }
+ main {
+ grid-row: 3 / 4;
+ grid-column: 1 / 2;
+ }
+ aside {
+ grid-row: 3 / 4;
+ grid-column: 2 / 3;
+ }
+ footer {
+ grid-row: 4 / 5;
+ grid-column: 1 / 3;
+ }
+}
+
+ @media (min-width: 1024px) {
+ body {
+ background-color: #000066;
+ }
+ nav ul {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ }
+ #wrapper {
+ width: 80%;
+ margin: auto; max-width: 1200px;
+ display: grid;
+ grid-template-columns: 150px auto auto;
+ grid-template-rows: auto auto auto ;
+ }
+ header {
+ grid-row: 1 / 2; grid-column: 1 / 4;
+ }
+ nav {
+ grid-row: 2 / 3; grid-column: 1 / 2;
+ }
+ main {
+ grid-row: 2 / 3; grid-column: 2 / 3;
+ }
+ aside {
+ grid-row: 2 / 3; grid-column: 3 / 4;
+ }
+ footer {
+ grid-row: 3 / 4; grid-column: 1 / 4;
+ }
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li id="page">Home</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 Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast free-trade 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>
+ <aside>
+ <figure>
+ <img src="8.9.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+ </figure>
+ </aside>
+ <footer>
+ Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg Binary files differnew file mode 100644 index 0000000..cb611ce --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html new file mode 100644 index 0000000..5eb0f22 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html @@ -0,0 +1,132 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Verdana, Arial, sans-serif;
+ margin: 0;
+}
+
+header { background-image: url(8.10.header.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+img { max-width: 100%;
+ height: auto; }
+
+/* Name Grid Areas */
+header { grid-area: h; }
+nav { grid-area: n; }
+main { grid-area: m; }
+aside { grid-area: a; }
+footer { grid-area: f; }
+#wrapper { background-color: #F7F1E3;
+ color: #0B8781;
+ display: grid;
+ grid-template:
+ "h "
+ "n "
+ "m"
+ "f" ; }
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+ color: #F7F1E3;
+ font-size: 300%;
+ text-shadow: 10px 10px 10px #000000;
+ font-size: 300%;
+}
+nav { font-size: 120%; }
+
+nav ul { padding-left: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; }
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+ min-width: 6em;
+ font-size: 110%;
+ text-align: center;
+ background-color: #003C58;
+ margin: .5em;
+ padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+
+aside { display: none; padding: 1em;}
+
+main { padding: 0 1em 1em; }
+
+footer { text-align: center;
+ font-style: italic;
+ padding: 1em; }
+
+@media (min-width: 38em) {
+ #wrapper { grid-template:
+ " h h "
+ " n n "
+ " m a "
+ " f f "
+ / 60% 40% ; }
+ aside { display: block; }
+}
+@media (min-width: 65em) {
+ nav ul { display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap; }
+ #wrapper { grid-template:
+ " h h h"
+ " n m a"
+ " f f f"
+ / 150px 1fr 30%; }
+}
+
+
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Casita Sedona</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Rooms</a></li>
+ <li><a href="specials.html">Specials</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Located in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h2>Luxurious Rooms </h2>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms — each is unique and sure to be a high point of your vacation experience.</p>
+ <h2>Hearty Breakfast</h2>
+ <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+ <h2>About Your Hosts</h2>
+ <p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+ </main>
+ <aside>
+ <img src="8.10.pools.jpg" alt="Pools of water in the rock">
+ <h2>Guided Hikes</h2>
+ <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+ </aside>
+ <footer>Copyright ©
+ </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg Binary files differnew file mode 100644 index 0000000..b738448 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html new file mode 100644 index 0000000..ce51ed7 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html @@ -0,0 +1,32 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+ <table border=1>
+ <caption>School History</caption>
+ <tr>
+ <td><b>School Attended</b></td>
+ <td><b>Years</b></td>
+ <td><b>Degree Awarded</b></td>
+ </tr>
+ <tr>
+ <td>Anonymized High School Name</td>
+ <td>2018-2020</td>
+ <td>High School Diploma</td>
+ </tr>
+ <tr>
+ <td>Artkansas Tech University</td>
+ <td>2020-Present</td>
+ <td>In-Progress Bachelors Degree in Information Technology</td>
+ </tr>
+ </table>
+
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html new file mode 100644 index 0000000..98c4b70 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+
+<table border=1>
+ <tr>
+ <td rowspan=3>Cana Island Lighthouse</td>
+ <td>Built: 1869.</td>
+ </tr>
+ <tr>
+ <td>Automated: 1944.</td>
+ </tr>
+ <tr>
+ <td>Tower Height: 65 Feet.</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html new file mode 100644 index 0000000..0a11470 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html @@ -0,0 +1,61 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+table {
+ margin: auto;
+ border: 5px solid #000066;
+ width: 600px;
+ border-spacing: 0;
+}
+
+caption {
+ font-family: Verdana, sans-serif;
+ font-weight: bold;
+ font-size: 1.2em;
+ padding-bottom: 5px;
+}
+
+
+td, th {
+ padding: 5px;
+ font-family: Arial, sans-serif;
+ border-style: none;
+}
+
+.altrow {
+ background-color: #eaeaea;
+}
+
+
+ </style>
+ </head>
+ <body>
+ <table>
+ <caption>Lighthouse Island Bistro Specialty Coffee Menu</caption>
+ <tr>
+ <th>Specialty Coffee</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ <tr class=altrow>
+ <td>Lite Latte</td>
+ <td>Indulge in a shot of espresso with steamed, skim milk</td>
+ <td>$3.50</td>
+ </tr>
+ <tr>
+ <td>Mocha Latte</td>
+ <td>Choose dark or milk chocolate with steamed milk</td>
+ <td>$4.00</td>
+ </tr>
+ <tr class=altrow>
+ <td>MCP Latte</td>
+ <td>A luscious mocha latte with caramel and pecan syrup</td>
+ <td>$4.50</td>
+ </tr>
+ </table>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html new file mode 100644 index 0000000..db73610 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+table {
+ margin: auto;
+ border: 5px solid #000066;
+ width: 600px;
+ border-spacing: 0;
+}
+
+caption {
+ font-family: Verdana, sans-serif;
+ font-weight: bold;
+ font-size: 1.2em;
+ padding-bottom: 5px;
+}
+
+
+td, th {
+ padding: 5px;
+ font-family: Arial, sans-serif;
+ border-style: none;
+}
+
+tr:nth-of-type(even) {
+ background-color: #eaeaea;
+}
+
+tr:first-of-type {
+ background-color: #006;
+ color: #eaeaea;
+}
+
+
+ </style>
+ </head>
+ <body>
+ <table>
+ <caption>Lighthouse Island Bistro Specialty Coffee Menu</caption>
+ <tr>
+ <th>Specialty Coffee</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ <tr>
+ <td>Lite Latte</td>
+ <td>Indulge in a shot of espresso with steamed, skim milk</td>
+ <td>$3.50</td>
+ </tr>
+ <tr>
+ <td>Mocha Latte</td>
+ <td>Choose dark or milk chocolate with steamed milk</td>
+ <td>$4.00</td>
+ </tr>
+ <tr>
+ <td>MCP Latte</td>
+ <td>A luscious mocha latte with caramel and pecan syrup</td>
+ <td>$4.50</td>
+ </tr>
+ </table>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html b/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html new file mode 100644 index 0000000..3d1acf5 --- /dev/null +++ b/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html @@ -0,0 +1,19 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>First HTML Webpage</title>
+<meta charset="utf-8">
+</head>
+<body>
+Test
+</body>
+</html>
+
+
+
+
+
+
+
+
+
|
