diff options
Diffstat (limited to 'HTML/Chapter/Ch. 4 Hands-on assignments')
13 files changed, 330 insertions, 0 deletions
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; +} |
