diff --git a/lectureCodeExamples/Week2/CSSCode/DescendantSelector.css b/lectureCodeExamples/Week2/CSSCode/DescendantSelector.css
new file mode 100755
index 0000000000000000000000000000000000000000..54ced3faa54645ad47d1542fad01a309c935a105
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/DescendantSelector.css
@@ -0,0 +1,15 @@
+body {
+ font-family: arial, sans-serif;
+}
+
+a {
+ font-size: 2em;
+ color: green;
+}
+
+/* When a found in li override previous a definition */
+li a {
+ font-size: 4em;
+ font-style: italic;
+ color: red;
+}
diff --git a/lectureCodeExamples/Week2/CSSCode/DescendantSelector.html b/lectureCodeExamples/Week2/CSSCode/DescendantSelector.html
new file mode 100755
index 0000000000000000000000000000000000000000..2cf382290d55c276fd81fc82a8082a946be71788
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/DescendantSelector.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Descendant Selectors</title>
+ <link rel="stylesheet" href="DescendantSelector.css" />
+</head>
+
+<body>
+ <h1>Local Newspaper</h1>
+ <p>
+ For news about the City of College Park and the University of
+ Maryland you can check the
+ <a href="http://www.diamondbackonline.com/" title="City News">Diamondback</a>
+ </p>
+ <h1>World News</h1>
+ <ul>
+ <li><a href="http://www.cnn.com/" title="World News">CNN</a></li>
+ <li>Nightly News</li>
+ </ul>
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSCode/ExternalFile.css b/lectureCodeExamples/Week2/CSSCode/ExternalFile.css
new file mode 100755
index 0000000000000000000000000000000000000000..9469602521c316e47589b54009d1bc8a6912e7e9
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/ExternalFile.css
@@ -0,0 +1,7 @@
+h1 {
+ color: red;
+}
+
+p {
+ font-size: 2em;
+}
diff --git a/lectureCodeExamples/Week2/CSSCode/ExternalFile.html b/lectureCodeExamples/Week2/CSSCode/ExternalFile.html
new file mode 100755
index 0000000000000000000000000000000000000000..7b883126215495ebd08c8d2df0fe30d6d975d3af
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/ExternalFile.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>External Style File</title>
+ <!-- The next line connects this file with the style sheet -->
+ <link rel="stylesheet" href="ExternalFile.css" type="text/css" />
+</head>
+
+<body>
+ <h1>Additional information</h1>
+ <p> Additional information can be found through the undergraduate web page.
+ </p>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/CSSCode/InternalStyle.html b/lectureCodeExamples/Week2/CSSCode/InternalStyle.html
new file mode 100755
index 0000000000000000000000000000000000000000..880badba72a0f89219780e9f3ba038f4b662332e
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/InternalStyle.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Internal Style</title>
+ <style>
+ h1 {
+ color: blue
+ }
+
+ p {
+ font-size: 1.5em;
+ }
+
+ </style>
+ <link rel="stylesheet" href="ExternalFile.css" type="text/css" />
+</head>
+
+<body>
+ <h1>Introduction to CS</h1>
+ <p>The following courses are provided by the Department of Computer Science.
+ </p>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/CSSCode/PropInheritance.css b/lectureCodeExamples/Week2/CSSCode/PropInheritance.css
new file mode 100755
index 0000000000000000000000000000000000000000..d7aa100aeed763c717ccf80976df523cbc353fa0
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/PropInheritance.css
@@ -0,0 +1,13 @@
+article {
+ color: red;
+ border: medium solid;
+}
+
+h2 {
+ color: blue;
+}
+
+article h2 {
+ color: inherit;
+ /* h2 inside article will be red color (not blue)*/
+}
diff --git a/lectureCodeExamples/Week2/CSSCode/PropInheritance.html b/lectureCodeExamples/Week2/CSSCode/PropInheritance.html
new file mode 100755
index 0000000000000000000000000000000000000000..48b1245c0bd05de28736442cfc9529023e8187ce
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/PropInheritance.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Inline Style</title>
+ <link rel="stylesheet" href="PropInheritance.css">
+</head>
+
+<body>
+ <h1>Introduction to CS</h1>
+ <h2>CSS Property Inheritance</h2>
+ <article>
+ <h2>H2 with enforced inheritance</h2>
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+
+ <p>
+ Corrupti sit dolores maxime <span>recusandae</span> fugit alias aliquam
+ error inventore! Consequuntur incidunt mollitia, nulla blanditiis
+ nesciunt atque a commodi ipsam totam voluptatem.
+ </p>
+ </article>
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSCode/PseudoElementsUniv.css b/lectureCodeExamples/Week2/CSSCode/PseudoElementsUniv.css
new file mode 100755
index 0000000000000000000000000000000000000000..789cc32e5dce3880746f3d0bc5c71d7c36808b9c
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/PseudoElementsUniv.css
@@ -0,0 +1,25 @@
+body {
+ font-family: sans-serif;
+ /* notice, using serif */
+}
+
+* {
+ color: teal;
+}
+
+p * {
+ /* Note that only descendants (not p itself) are affected by this style */
+ color: red;
+}
+
+/* Try first-line as well */
+p:first-letter {
+ font-weight: bold;
+ font-size: 4rem;
+ /* try with em */
+}
+
+p:first-line {
+ font-weight: 400;
+ font-size: 2em;
+}
diff --git a/lectureCodeExamples/Week2/CSSCode/PseudoElementsUniv.html b/lectureCodeExamples/Week2/CSSCode/PseudoElementsUniv.html
new file mode 100755
index 0000000000000000000000000000000000000000..9c23f7e63657101c019faeecf79eb92623f79fc7
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/PseudoElementsUniv.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <link rel="stylesheet" href="PseudoElementsUniv.css" type="text/css" />
+ <title>Pseudoelements</title>
+
+ <!-- If you omit the type attribute, the browser will make an educated
+ guess at the content type by looking at the rel attribute instead. So
+ it will assume the type is text/css where the rel attribute is
+ stylesheet, for example.
+
+ Read more: https://html.com/attributes/link-type/#ixzz5yTAj77mD -->
+</head>
+
+<body>
+ <h1>Partnerships</h1>
+ <p>
+ The future of <strong> public higher education in America</strong>
+ depends on forming effective partnerships with government,
+ industry, business, faculty and students to carry on the discovery
+ and creation of knowledge that underlies the continuing improvement
+ of our social, civic, economic and cultural lives.
+ </p>
+
+ <p>
+ The President has facilitated the establishment and enhancement of many
+ partnerships that
+ will benefit both the university and the larger society.
+ </p>
+
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/CSSCode/Selectors.css b/lectureCodeExamples/Week2/CSSCode/Selectors.css
new file mode 100755
index 0000000000000000000000000000000000000000..33c7b0c8f728de460b9645718c8796cc84bdd31e
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/Selectors.css
@@ -0,0 +1,100 @@
+/* This is a comment in CSS */
+/* The next line tell us the font to look for. The last line is a generic
+/* font family (serif, sans-serif, monospace)*/
+
+body {
+ font-family: arial, Helvetica, "Times New Roman", sans-serif;
+ /* background: #F5F5DC; */
+ background: rgba(125, 125, 125, 0.5);
+ color: teal;
+ font-size: 90%; /* try different percentages */
+}
+
+a:link {
+ color: blue;
+}
+
+a:visited {
+ color:purple;
+}
+
+a:hover {
+ color: red;
+}
+
+a:active {
+ color: gray;
+}
+
+h1 {
+ color: gray;
+}
+
+pre {
+ color: gray;
+ font-style: italic;
+ text-align: center;
+}
+
+pre:hover {
+ font-size: 2em;
+}
+
+strong {
+ color: red;
+}
+
+ol {
+ list-style-type: lower-latin; /* try lower-roman, upper-roman, upper-latin */
+}
+
+ul {
+ color: maroon;
+ /* list-style-image: url(bus.gif); */
+ list-style-type: circle; /* try disc, square, none */
+}
+
+table {
+ background-color: black; /* try commenting this out */
+ border-collapse: separate; /* try collapse */
+ border-style: dashed; /* try solid, dashed, groove, ridge, inset, outset */
+ border-color: red;
+ border-width: .125em;
+ text-align: center; /* try left, right */
+}
+
+th {
+ background-color: #F5DEB3;
+ padding: 8px;
+}
+
+td {
+ background-color: white;
+}
+
+/* class selector */
+.styleOne {
+ color: red;
+ font-style: italic;
+ text-align: center;
+}
+
+/* class selector */
+.styleTwo {
+ color: gray;
+ font-style: oblique;
+ text-align: center;
+}
+
+/* class selector */
+.styleThree {
+ color: blue;
+ background-color: white;
+}
+
+/* id selector */
+#additionalInfo {
+ color: green;
+ font-weight: bold; /* try normal, bolder, 100, 200, 300, 400 (normal)..., 700 (bold), 900*/
+ text-align: center;
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSCode/Selectors.html b/lectureCodeExamples/Week2/CSSCode/Selectors.html
new file mode 100755
index 0000000000000000000000000000000000000000..811a7f35f2da76f7c537c02ea167f977b1270f34
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSCode/Selectors.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Class Id Selectors</title>
+ <link rel="stylesheet" href="Selectors.css" />
+</head>
+
+<body>
+ <h1>The Road Not Taken</h1>
+
+ <p> The following is a famous poem by <em>Robert Frost</em>(1874–1963).
+ We will study his work this semester.
+ </p>
+
+ <!-- careful with the identation of pre -->
+ <pre class="styleOne">
+ Two roads diverged in a yellow wood
+ And sorry I could not travel both
+ And be one traveler, long I stood
+ And looked down one as far as I could
+ To where it bent in the undergrowth
+ </pre>
+
+ <!-- notice the use of multiple class selectors -->
+ <pre class="styleTwo styleThree">
+ Then took the other as just as fair
+ And having perhaps the better claim
+ Because it was grassy and wanted wear;
+ Though as for that, the passing there
+ Had worn them really about the same
+ </pre>
+
+ <pre class="styleOne">
+ And both that morning equally lay
+ In leaves no step had trodden black
+ Oh, I kept the first for another day!
+ Yet knowing how way leads onto way
+ I doubted if I should ever come back
+ </pre>
+
+ <pre class="styleTwo">
+ I shall be telling this with a sigh
+ Somewhere ages and ages hence
+ Two roads diverged in a wood
+ And I took the one less traveled by
+ And that has made all the difference
+ </pre>
+
+ <h2>Midterm Paper Questions</h2>
+ <ol>
+ <li>Which road would you travel(<strong>today</strong>)?</li>
+ <li>Which road have you been taken?</li>
+ </ol>
+
+ <h3>Final Paper Questions</h3>
+ <ul>
+ <li>Compare Robert Frost work with another author discussed in lecture.</li>
+ <li>What is the major contribution of Robert Frost's work?</li>
+ </ul>
+
+ <h3>Schedule</h3>
+ <table>
+ <tr>
+ <th>Week</th>
+ <th>Reading</th>
+ <th>Work</th>
+ </tr>
+ <tr>
+ <td>1 </td>
+ <td>Poem</td>
+ <td>Report</td>
+ </tr>
+ <tr>
+ <td>2 </td>
+ <td>Paper</td>
+ <td>Quiz</td>
+ </tr>
+ </table>
+
+ <h3>Additional information</h3>
+ <p id="additionalInfo">You can find additional information in
+ <a href="http://en.wikipedia.org/wiki/The_Road_Not_Taken_(poem)">Wikipedia
+ Reference</a>
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSCode/bus.gif b/lectureCodeExamples/Week2/CSSCode/bus.gif
new file mode 100755
index 0000000000000000000000000000000000000000..45595ec5801640e52f62f3560a820e0925f833f0
Binary files /dev/null and b/lectureCodeExamples/Week2/CSSCode/bus.gif differ
diff --git a/lectureCodeExamples/Week2/CSSIICode/Background.css b/lectureCodeExamples/Week2/CSSIICode/Background.css
new file mode 100755
index 0000000000000000000000000000000000000000..f5ace340aff0c4b177e2729cfbeea9d2efae33ed
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/Background.css
@@ -0,0 +1,14 @@
+body {
+ /* Background properties */
+ background-color: silver;
+ background-image: url(campusBldg.jpg);
+ background-repeat: repeat-x; /* Try repeat-x, no-repeat, repeat */
+ background-attachment: fixed; /* Try scroll, fixed */
+ background-position: center; /* Try top */
+
+ /* Shorthand version for above background properties */
+ /* background: silver url(campusBldg.jpg) repeat-x fixed center; */
+
+ /* Next description includes image from the internet */
+ /* background-image: url(https://background-tiles.com/overview/white/patterns/large/1029.png); */
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/Background.html b/lectureCodeExamples/Week2/CSSIICode/Background.html
new file mode 100755
index 0000000000000000000000000000000000000000..5fd742052d66ae6ded8b90a92ef2d81828bbf106
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/Background.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Background</title>
+ <link rel="stylesheet" href="Background.css" type="text/css" />
+</head>
+
+<body>
+ <h1>Partnerships</h1>
+
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+
+ <p>
+ Progress on the new M Square Research Park, 128 acres at the
+ College Park Metro station, is another example of such
+ partnerships. Collaboration between the University, the State, the
+ federal government and private sector businesses promise to build
+ UM's research programs in depth and breadth. Several steps occurred
+ this year that advanced the University closer to the complete
+ vision of M Square as a hub for collaborative research initiatives:
+ the National Foreign Language Center moved into the Patapsco
+ Building at M Square and Datastream graduated from the Technology
+ Advancement Program on campus to the Technology Ventures building
+ at M Square. Physically, the site is now primed with 65 acres
+ readied for new building construction. Construction of the first
+ 120,000 square foot spec building is set to begin this October, and
+ the main road, University Research Court, is now completed. The
+ residential component of M Square, which will provide upscale
+ condominiums to researchers and the general public, has received
+ its state approvals. An exciting feature of this condominium
+ project is that the university will own 50 units, which will be
+ allocated on a competitive basis to attract the "best and the
+ brightest" graduate and postdoctoral students and visitors from
+ around the world.
+ </p>
+
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/BackgroundStretch.css b/lectureCodeExamples/Week2/CSSIICode/BackgroundStretch.css
new file mode 100755
index 0000000000000000000000000000000000000000..dcc8377139ab6c485c4eb07fb8670343f73e6da5
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/BackgroundStretch.css
@@ -0,0 +1,6 @@
+.style1 {
+ background: url(sean-unsplash.jpg);
+ background-repeat: no-repeat;
+ background-size: cover; /* Cover entire container */
+ background-position: center; /* try left right */
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/BackgroundStretch.html b/lectureCodeExamples/Week2/CSSIICode/BackgroundStretch.html
new file mode 100755
index 0000000000000000000000000000000000000000..90359020b83cc9b4d87b7201f758a7fe95b0d11f
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/BackgroundStretch.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Background</title>
+ <link rel="stylesheet" href="backgroundStretch.css" type="text/css" />
+
+</head>
+
+<body>
+ <h1>Partnerships (Resize Window)</h1>
+
+ <p class="style1">
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+
+ <p>
+ Progress on the new M Square Research Park, 128 acres at the
+ College Park Metro station, is another example of such
+ partnerships. Collaboration between the University, the State, the
+ federal government and private sector businesses promise to build
+ UM's research programs in depth and breadth. Several steps occurred
+ this year that advanced the University closer to the complete
+ vision of M Square as a hub for collaborative research initiatives:
+ the National Foreign Language Center moved into the Patapsco
+ Building at M Square and Datastream graduated from the Technology
+ Advancement Program on campus to the Technology Ventures building
+ at M Square. Physically, the site is now primed with 65 acres
+ readied for new building construction. Construction of the first
+ 120,000 square foot spec building is set to begin this October, and
+ the main road, University Research Court, is now completed. The
+ residential component of M Square, which will provide upscale
+ condominiums to researchers and the general public, has received
+ its state approvals. An exciting feature of this condominium
+ project is that the university will own 50 units, which will be
+ allocated on a competitive basis to attract the "best and the
+ brightest" graduate and postdoctoral students and visitors from
+ around the world.
+ </p>
+
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/BoxModel.css b/lectureCodeExamples/Week2/CSSIICode/BoxModel.css
new file mode 100755
index 0000000000000000000000000000000000000000..0af7c8fe8dae0945cf1bfa18d105aaf628809ea7
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/BoxModel.css
@@ -0,0 +1,55 @@
+
+body {
+ font-family: arial, sans-serif;
+
+ color: black;
+ background-color: floralwhite;
+ width: 30em;
+ height: 70em;
+ border-style: solid;
+ border-color: green;
+ border-width: 0.5em;
+ padding: 1em; /* Change to 0 em, 1 ... 6 em */
+ margin: 5em; /* Change to 0 em, 1 ... 6 em */
+}
+
+
+#articleExample {
+ color: yellow;
+ background-color: gray;
+ width: 10em; /* Change to other values */
+ height: 8em; /* Change to other values */
+ border-color: red;
+ border-style: solid;
+ border-width: 0.25em;
+ padding-left: 2em; /* Change to other values */
+ margin-left: 4em;
+}
+
+#thirdParagraph {
+ width: 15em;
+ height: 20em;
+ margin: auto; /* auto horizontally centers
+ element within the container */
+ border: 0.5em double blue;
+}
+
+#outer {
+ margin-top: 1em; /* Change to other values (including negative values) */
+ border: 1em ridge brown;
+}
+
+#inner {
+ border: .5em solid lightblue;
+ padding-left: .5em;
+}
+
+/* This is an adjacent sibling selector */
+p + div {
+ background-color: orange;
+}
+
+/* This is a child selector */
+div > div {
+ color: white;
+}
diff --git a/lectureCodeExamples/Week2/CSSIICode/BoxModel.html b/lectureCodeExamples/Week2/CSSIICode/BoxModel.html
new file mode 100755
index 0000000000000000000000000000000000000000..d48e34dfdabb9bdd73cecef86cceedb11e391283
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/BoxModel.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Box Model Tests</title>
+ <link rel="stylesheet" href="BoxModel.css" />
+
+
+</head>
+
+<body>
+ <p>
+ First paragraph.
+ </p>
+ <article id="articleExample">
+ <h1>First Header</h1>
+ <p>
+ This is the second paragraph.
+ </p>
+ </article>
+
+ <p id="thirdParagraph">
+ Third paragraph in our document.
+ </p>
+
+ <div id="outer">
+ Insider outer div before inner div
+ <div id="inner">
+ Testudo in inner div
+ </div>
+ </div>
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/GoogleFont.css b/lectureCodeExamples/Week2/CSSIICode/GoogleFont.css
new file mode 100755
index 0000000000000000000000000000000000000000..9ad5ec9165e4d559ffb339afda49e4f4102997bc
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/GoogleFont.css
@@ -0,0 +1,15 @@
+#para1 {
+ font-family: Chilanka; /* Google's font */
+ background-color: gray;
+ color: yellow;
+ border: 5px dashed red;
+ margin: .5em;
+ padding: .5em;
+}
+
+#para2 {
+ font-family: Ubuntu; /* Google's font */
+ border: 1em ridge red;
+ margin: .5em;
+ padding: .5em;
+}
diff --git a/lectureCodeExamples/Week2/CSSIICode/GoogleFont.html b/lectureCodeExamples/Week2/CSSIICode/GoogleFont.html
new file mode 100755
index 0000000000000000000000000000000000000000..d6c4ab48017147a7d4419dca2a0907884669fc7c
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/GoogleFont.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="zxx">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Shorthand Properties</title>
+ <link rel="stylesheet" href="googleFont.css" />
+ <link href="https://fonts.googleapis.com/css?family=Chilanka|Ubuntu&display=swap" rel="stylesheet">
+</head>
+
+<body>
+ <p id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et pariatur,
+ neque libero recusandae unde blanditiis itaque sit. Excepturi maiores aperiam
+ cupiditate necessitatibus suscipit, et praesentium. Quaerat, facere? Voluptates,
+ numquam dicta?</p>
+
+ <p id="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident esse,
+ dolor quae ipsa ipsum dolores sint cum harum, commodi earum amet magnam! Doloribus
+ beatae accusantium ipsam magni quis sequi. Tempore.</p>
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/MediaQuery.css b/lectureCodeExamples/Week2/CSSIICode/MediaQuery.css
new file mode 100755
index 0000000000000000000000000000000000000000..ab869070ae8f2f8659bfb57c67ce1825713cbe15
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/MediaQuery.css
@@ -0,0 +1,23 @@
+/* Until max-width is not reached */
+@media only screen and (max-width: 600px) {
+ body {
+ background-color: lightblue;
+ }
+}
+
+article {
+ margin: 4em;
+ padding: 1.5em;
+ border: 0.5em double goldenrod;
+ border-radius: 1em; /* Creates round corners */
+ background-image: url(https://background-tiles.com/overview/white/textures/large/5021.png);
+}
+
+article p {
+ line-height: 1.5em;
+}
+
+article h1 {
+ letter-spacing: 0.5em;
+ /* normal|length|initial|inherit */
+}
diff --git a/lectureCodeExamples/Week2/CSSIICode/MediaQuery.html b/lectureCodeExamples/Week2/CSSIICode/MediaQuery.html
new file mode 100755
index 0000000000000000000000000000000000000000..5dd606dd32d6937259fefb04d0457618a5ac569d
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/MediaQuery.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="zxx"> <!-- Notice NOT using "en" -->
+
+<head>
+ <meta charset="utf-8" />
+ <title>Media Query Tests</title>
+ <link rel="stylesheet" href="MediaQuery.css" />
+</head>
+
+<body>
+
+ <article>
+ <h1>Lorem ipsum (Resive Window for Color Change)</h1>
+ <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt dolores esse
+ fuga aliquid, corrupti ut fugit inventore animi illo rerum, voluptas dolorum
+ blanditiis eius voluptatem, ex corporis reprehenderit! Ex, aspernatur cum!
+ Dignissimos dolores unde, est nostrum dolore libero ab molestias inventore
+ incidunt odit saepe a odio necessitatibus optio, ducimus nulla expedita eaque
+ adipisci. Magnam temporibus sunt, corporis voluptas labore hic ad consequuntur
+ corrupti, explicabo eaque ex, molestiae ipsa itaque incidunt quaerat saepe a.
+ Ab minus illo eligendi facilis debitis repudiandae, nemo amet natus eius
+ explicabo impedit? Mollitia quidem officiis reiciendis incidunt numquam dolor
+ voluptatum, sequi excepturi eligendi, illo qui aliquam dignissimos! Similique
+ neque voluptate molestias autem necessitatibus dolorem? Porro iusto assumenda
+ officia saepe voluptate eaque ducimus nisi molestias esse dolor beatae
+ perspiciatis blanditiis suscipit tempora aut distinctio, illo quas illum
+ recusandae, et quo ea deleniti accusamus!
+ </p>
+
+ <p> Assumenda laudantium alias iste aliquid nemo, exercitationem magni perferendis
+ error necessitatibus. Aperiam praesentium corporis fuga voluptatem,
+ voluptatibus distinctio dignissimos quasi tenetur iusto nisi facere laboriosam
+ voluptas dolore possimus labore nam, exercitationem eum, suscipit voluptate
+ sunt eaque odio. Reprehenderit, voluptas! Doloremque et quas id? Mollitia,
+ excepturi quis. Provident excepturi nesciunt magnam veniam, veritatis illum
+ dicta repellendus sed totam ex a cupiditate, deleniti, ab aliquid nobis dolor
+ pariatur nostrum voluptate minima maiores laudantium hic nam voluptates! Illo
+ saepe accusamus laborum accusantium at? Hic doloremque tempore, placeat
+ corporis iusto saepe accusantium! Obcaecati debitis sapiente vitae iusto
+ cumque quas ipsam placeat atque magnam! Veritatis voluptate deleniti officia
+ quaerat atque quasi deserunt ex earum, numquam perferendis consequatur dicta
+ a. Quod fugiat optio error quia quis animi, magni expedita. Eaque quasi
+ commodi consequuntur corrupti vel veritatis unde optio exercitationem
+ recusandae, iusto, illum explicabo impedit ipsum culpa facere molestias,
+ numquam minima cumque fugit in atque vero iure ullam rerum? Ipsam temporibus
+ similique est dolor? Incidunt iure laudantium, itaque veritatis deleniti
+ recusandae. Blanditiis ad est temporibus modi deleniti laboriosam libero saepe
+ perferendis sed porro ducimus quibusdam perspiciatis velit quod magni iste
+ optio quam repellendus, voluptas facilis nobis officia. At sint quae suscipit
+ non alias praesentium voluptate corrupti minima temporibus. Odit magni fugit
+ ex fugiat vel, corrupti voluptate rem, dolore aliquam, suscipit perspiciatis
+ neque dolorum. Ipsum sapiente assumenda deleniti! Asperiores deleniti, error
+ blanditiis illum eius reiciendis dignissimos ad sequi laboriosam ducimus
+ dolores cupiditate quaerat quis! Perspiciatis beatae similique aut
+ reprehenderit quidem. Consectetur id ullam voluptatem, eius veniam aliquid
+ fuga eaque tenetur, perspiciatis laborum numquam libero placeat officia
+ officiis nam praesentium corporis excepturi explicabo omnis porro? Non laborum
+ provident, possimus eligendi quod porro nostrum a vero, pariatur ipsam tenetur
+ sunt animi quo ullam dolore ipsa similique adipisci mollitia. Commodi ratione
+ quibusdam reiciendis rerum dicta, praesentium dolore velit facilis ad repellat
+ recusandae nostrum fuga perspiciatis unde, reprehenderit dolorem? Ad molestias
+ saepe officia aperiam maxime modi! Praesentium incidunt molestias obcaecati
+ eius, illum quas molestiae assumenda asperiores, dolores eos est. Molestias
+ praesentium aliquam accusamus commodi rem in nemo, perspiciatis et, id
+ expedita minima dignissimos ex pariatur culpa? Voluptatem ratione vel saepe,
+ sit aliquam voluptatum corrupti magni praesentium illum cum ut quam, error est
+ nemo tenetur deleniti a voluptatibus perferendis. Exercitationem sit aliquam
+ obcaecati numquam incidunt mollitia iste fugiat iure, reiciendis porro
+ deleniti laudantium at nihil blanditiis est illum distinctio eveniet? Quo
+ maiores tempora temporibus inventore, corrupti optio, et officia aut quod
+ voluptatum odio a id, qui in ipsa aliquid vero ullam magnam mollitia quas
+ deserunt. Minus, modi cum. Esse, officiis hic eligendi harum eum nemo
+ praesentium tempore, perferendis explicabo dicta fugiat ratione dolorum? Ad
+ fuga, impedit consequatur neque, amet illo dolores, nam voluptatem minima
+ facere placeat. Et quos tempora consequuntur dolorum expedita quis iste quasi
+ impedit suscipit tenetur ab soluta consequatur eos dolores non repellat est
+ perferendis, consectetur totam placeat aut molestias. Nam, dolorem cum itaque
+ aperiam dignissimos perspiciatis laboriosam velit necessitatibus cupiditate
+ beatae asperiores explicabo fugit optio quidem a qui nostrum enim tempore quis
+ quod?
+ </p>
+ <p>
+ Enim excepturi quibusdam ipsa inventore voluptatibus quaerat labore quas
+ temporibus
+ expedita sed ab eaque numquam ad, aperiam repellat repellendus quam nam
+ adipisci
+ assumenda id a dolorem! At laudantium tempore culpa est quis facilis aliquid,
+ architecto odit, quas ad aperiam ipsum earum. In autem ipsa enim tempora rerum
+ possimus, quibusdam facere tempore velit? Ipsam odit itaque, doloribus, nisi
+ voluptatem
+ natus ullam amet facilis, tempore doloremque in iste rem. Vel aliquam
+ perspiciatis
+ natus velit cum pariatur, nam maxime ut possimus tempora totam eligendi eum
+ debitis! Ad
+ iusto distinctio, nesciunt laborum cupiditate voluptatem omnis in rem quod
+ quos
+ consequatur provident similique saepe alias nisi quam. Ipsam perspiciatis
+ laudantium,
+ impedit minima, enim repellat corrupti dolores distinctio voluptate delectus
+ dolorem
+ rem esse quibusdam fugit deleniti reprehenderit debitis nostrum eaque suscipit
+ quae
+ optio, vero nesciunt illum. Et harum laudantium necessitatibus incidunt
+ corporis
+ pariatur molestiae ad laborum! Non, maiores totam consequuntur voluptates at
+ culpa
+ exercitationem quia debitis aperiam fuga deserunt reiciendis sapiente libero,
+ molestias, dignissimos recusandae earum repellendus. Sequi quo, incidunt
+ maiores rerum
+ autem in, aperiam dicta at consectetur nostrum iure neque, suscipit error! In
+ dignissimos laboriosam magnam veritatis! Modi suscipit laboriosam ut similique
+ fugiat
+ dignissimos iusto temporibus repudiandae obcaecati officia, accusamus itaque
+ neque!
+ Adipisci, quae quibusdam nam ut odit quasi eligendi ad ab, dolore, expedita
+ beatae!
+ Dolorem, atque sapiente est optio alias dolores id cumque molestiae,
+ reprehenderit iste
+ repudiandae quos provident similique doloribus debitis labore neque quo
+ mollitia
+ pariatur tempore dolore beatae minus? Nam commodi voluptates sunt delectus
+ laborum.
+ Quas, temporibus. Odit officiis consequuntur aut facere odio aperiam. Ex quas
+ doloremque tempore, perspiciatis voluptatum aut modi id harum cum libero sed
+ nostrum
+ iste iusto quam quod veritatis sequi ea voluptas fuga suscipit cupiditate
+ recusandae
+ asperiores dignissimos? Doloremque nemo illum hic minima odit, dolor itaque
+ deserunt
+ vitae, adipisci sed ipsum magni, numquam sit delectus dolorum maiores tenetur
+ atque
+ consequuntur id. Voluptatum quidem, rem sunt ea facere quo, provident ipsa
+ aperiam iure
+ temporibus eos, blanditiis ratione ducimus delectus maiores nulla magni totam
+ magnam
+ harum incidunt cumque enim. Neque vitae est placeat asperiores iusto
+ accusantium ipsa
+ deleniti repellat optio voluptate, dignissimos mollitia ex quaerat aliquid
+ ipsum rerum
+ quidem officiis dolor non voluptatibus alias. Voluptas voluptates id libero
+ eius sed
+ vel quidem consequuntur, nobis voluptatibus? Ut exercitationem tenetur commodi
+ molestiae tempora.</p>
+ </article>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/ShorthandProperties.css b/lectureCodeExamples/Week2/CSSIICode/ShorthandProperties.css
new file mode 100755
index 0000000000000000000000000000000000000000..4344c6031e32ac8524235b2ef1e53801f6913616
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/ShorthandProperties.css
@@ -0,0 +1,53 @@
+body {
+ /* Note multiple values are given as "fallback"s. */
+ font-family: arial, Helvetica, sans-serif;
+}
+
+.noShorthand {
+ /* Font specification */
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: normal;
+ font-size: .80em;
+ line-height: 1.1em;
+ font-family: Verdana, Arial, sans-serif;
+
+ /* Border specification */
+ border-width: 2em;
+ border-style: solid;
+ border-color: green;
+
+ /* Following description defines the color of each
+ side */
+ /* border-color: red green blue yellow; */
+
+ /* Margin specification */
+ margin-top: 6em;
+ margin-right: 8em;
+ margin-bottom: 4em;
+ margin-left: 2em;
+
+ /* Padding specification*/
+ padding-top: 3em;
+ padding-right: 4em;
+ padding-bottom: 2em;
+ padding-left: 1em;
+}
+
+.withShorthand {
+ /* Font specification */
+ font: italic small-caps normal .80em/1.1em Verdana, Arial, sans-serif;
+
+ /* Border specification */
+ border: 2em solid green;
+
+ /* Margin specification */
+ margin: 6em 8em 4em 2em;
+
+ /* Padding specification*/
+ padding: 3em 4em 2em 1em;
+
+
+ /* Description defining the color of each side */
+ border-color: red green blue yellow;
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/ShorthandProperties.html b/lectureCodeExamples/Week2/CSSIICode/ShorthandProperties.html
new file mode 100755
index 0000000000000000000000000000000000000000..339fcac8c0378c828590ea19aea115b4cd402ac9
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIICode/ShorthandProperties.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Shorthand Properties</title>
+ <link rel="stylesheet" href="ShorthandProperties.css" />
+</head>
+
+<body>
+ <h1>Not Using Shorthands</h1>
+ <p class="noShorthand">
+ The future of public higher education in America depends on forming
+ effective partnerships with government, industry, business, faculty
+ and students to carry on the discovery and creation of knowledge
+ that underlies the continuing improvement of our social, civic,
+ economic and cultural lives.
+ </p>
+
+ <h2>Using Shorthands</h2>
+
+ <p class="withShorthand">
+ The President has facilitated the establishment and enhancement of
+ many partnerships that will benefit both the university and the
+ larger society.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIICode/campusBldg.jpg b/lectureCodeExamples/Week2/CSSIICode/campusBldg.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..0a965bf27cc8fc0d180b454e4b775cfdd38d108d
Binary files /dev/null and b/lectureCodeExamples/Week2/CSSIICode/campusBldg.jpg differ
diff --git a/lectureCodeExamples/Week2/CSSIICode/sean-unsplash.jpg b/lectureCodeExamples/Week2/CSSIICode/sean-unsplash.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..ac24428d566c85f8c9f3545b60ff1a8d7b7ddd3e
Binary files /dev/null and b/lectureCodeExamples/Week2/CSSIICode/sean-unsplash.jpg differ
diff --git a/lectureCodeExamples/Week2/CSSIIICode/Display/Display.css b/lectureCodeExamples/Week2/CSSIIICode/Display/Display.css
new file mode 100755
index 0000000000000000000000000000000000000000..ac885b24595bc9ffab1bb3a3e7eade07b4131cd6
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/Display/Display.css
@@ -0,0 +1,71 @@
+body {
+ font-family: Arial, Helvetica, serif;
+}
+
+#list1 a {
+ display: inline;
+}
+
+#list2 a {
+ display: block;
+}
+
+#list3 a {
+ /* display: inline; */
+ border-style: solid;
+ border-color: yellowgreen;
+}
+
+#list4 a {
+ display: block;
+ border-style: solid;
+}
+
+#list5 a {
+ display: inline;
+ border-style: solid;
+ background-color: yellow;
+}
+
+#list6 a {
+ display: block;
+ border-style: solid;
+ background-color: yellow;
+}
+
+#list7 a {
+ display: block;
+ border-style: solid;
+ background-color: yellow;
+ width: 6em;
+ text-decoration: none;
+ margin: .25em;
+ text-align: center;
+}
+
+a:link {
+ color: blue;
+}
+
+a:visited {
+ color:purple;
+}
+
+a:hover {
+ color: red;
+}
+
+a:active {
+ color: gray;
+}
+
+p span {
+ display: inline-block;
+ border-style: solid;
+ background-color: yellow;
+ margin: 10px;
+}
+
+#hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/Display/Display.html b/lectureCodeExamples/Week2/CSSIIICode/Display/Display.html
new file mode 100755
index 0000000000000000000000000000000000000000..610fed80d360c74ecbb6f4cad3634978b597f98e
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/Display/Display.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Changing Display Property</title>
+ <link rel="stylesheet" href="Display.css" type="text/css"/>
+ </head>
+
+ <body>
+ <h2>#1 Inline display property for <a></h2>
+ <div id="list1">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <h2>#2 Block display property for <a></h2>
+ <div id="list2">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <h2>#3 Inline display property for <a> and border</h2>
+ <div id="list3">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <h2>#4 Block display property for <a> and border</h2>
+ <div id="list4">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <h2>#5 Inline display property for <a>, border, background</h2>
+ <div id="list5">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <h2>#6 Block display property for <a>, border, background</h2>
+ <div id="list6">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <h2>#7 Block display property for <a> border, background color, width,
+ text-decoration, margin, text-align</h2>
+ <div id="list7">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+
+ <p>Lorem ipsum dolor
+ <span>sit amet</span>
+ consectetur adipisicing elit. Dolorem odio beatae praesentium odit maxime, et
+ magni error! Quas, sapiente recusandae.</p>
+
+ <p id="hidden">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est,
+ veniam soluta repellat, recusandae non eligendi debitis incidunt eveniet dolore
+ reprehenderit esse error sunt deleniti nihil praesentium consequuntur placeat
+ quasi. Ducimus, architecto! Reiciendis dolorem non optio. Nam voluptatibus atque
+ cum qui porro numquam ad alias harum non molestiae tempore, ab cumque?</p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/Float/Float.css b/lectureCodeExamples/Week2/CSSIIICode/Float/Float.css
new file mode 100755
index 0000000000000000000000000000000000000000..58c126c009dca838b1c346268ba348c9c7923a5d
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/Float/Float.css
@@ -0,0 +1,15 @@
+body {
+ font-family: Arial, Helvetica, serif;
+}
+
+#UMDGlobeImgNone {
+ float: none;
+}
+
+#UMDGlobeImgLeft {
+ float: left;
+}
+
+#UMDGlobeImgRight {
+ float: right;
+}
diff --git a/lectureCodeExamples/Week2/CSSIIICode/Float/Float.html b/lectureCodeExamples/Week2/CSSIIICode/Float/Float.html
new file mode 100755
index 0000000000000000000000000000000000000000..e07778b76e4eeb6a1f67a5aa631319b8e5a696b6
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/Float/Float.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Float</title>
+ <link rel="stylesheet" href="Float.css" type="text/css"/>
+ </head>
+
+ <body>
+ <h2>float: none</h2>
+ <p>
+
+ The University of Maryland, College Park is a public research university, the
+ flagship campus of the University System of Maryland and the original 1862
+ <img
+ id="UMDGlobeImgNone"
+ src="UMDGlobe.gif"
+ width="73"
+ height="73"
+ alt="UMGGlobeImg"/>land-grant
+ institution in the State. It is one of only 62 members of the Association of
+ American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is
+ committed to achieving excellence as the State's primary center of research and
+ graduate education and the institution of choice for undergraduate students of
+ exceptional ability and promise. Note: reduce the size of the window.
+ </p>
+
+ <h2>float: left</h2>
+ <p>
+
+ The University of Maryland, College Park is a public research university, the
+ flagship campus of the University System of Maryland and the original 1862
+ <img
+ id="UMDGlobeImgLeft"
+ src="UMDGlobe.gif"
+ width="73"
+ height="73"
+ alt="UMGGlobeImg"/>land-grant
+ institution in the State. It is one of only 62 members of the Association of
+ American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is
+ committed to achieving excellence as the State's primary center of research and
+ graduate education and the institution of choice for undergraduate students of
+ exceptional ability and promise. Note: reduce the size of the window.
+ </p>
+
+ <h2>float: right</h2>
+ <p>
+
+ The University of Maryland, College Park is a public research university, the
+ flagship campus of the University System of Maryland and the original 1862
+ <img
+ id="UMDGlobeImgRight"
+ src="UMDGlobe.gif"
+ width="73"
+ height="73"
+ alt="UMGGlobeImg"/>land-grant
+ institution in the State. It is one of only 62 members of the Association of
+ American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is
+ committed to achieving excellence as the State's primary center of research and
+ graduate education and the institution of choice for undergraduate students of
+ exceptional ability and promise. Note: reduce the size of the window.
+ </p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/Float/UMDGlobe.gif b/lectureCodeExamples/Week2/CSSIIICode/Float/UMDGlobe.gif
new file mode 100755
index 0000000000000000000000000000000000000000..6458495c6efabc1f2574b0bd51fc61b1564e42f3
Binary files /dev/null and b/lectureCodeExamples/Week2/CSSIIICode/Float/UMDGlobe.gif differ
diff --git a/lectureCodeExamples/Week2/CSSIIICode/FloatBlock/FloatBlock.css b/lectureCodeExamples/Week2/CSSIIICode/FloatBlock/FloatBlock.css
new file mode 100755
index 0000000000000000000000000000000000000000..94dccf5d16df721ecfa0b0d917b3ce7110b2ca5c
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/FloatBlock/FloatBlock.css
@@ -0,0 +1,40 @@
+body {
+ font-family: Arial, Helvetica, serif;
+}
+
+#navigation {
+ float: none; /* try right, left, none */
+}
+
+#news {
+ float: right; /* try right, left, none */
+}
+
+#navigation ul {
+ list-style-type: none;
+ margin-right: 1em;
+}
+
+#content {
+ text-align: justify; /* try removing this line */
+}
+
+#footer {
+ text-align: center;
+}
+
+a:link {
+ color: blue;
+}
+
+a:visited {
+ color:purple;
+}
+
+a:hover {
+ color: red;
+}
+
+a:active {
+ color: gray;
+}
diff --git a/lectureCodeExamples/Week2/CSSIIICode/FloatBlock/FloatBlock.html b/lectureCodeExamples/Week2/CSSIIICode/FloatBlock/FloatBlock.html
new file mode 100755
index 0000000000000000000000000000000000000000..ed001f1ae5b6a1f80508c40e31bd61bcf3d99652
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/FloatBlock/FloatBlock.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Float</title>
+ <link rel="stylesheet" href="FloatBlock.css" type="text/css" />
+ </head>
+
+ <body>
+ <div id="navigation">
+ <ul>
+ <li><a href="#">Alumni</a></li>
+ <li><a href="#">Faculty</a></li>
+ <li><a href="#">Staff</a></li>
+ <li><a href="#">Parents</a></li>
+ <li><a href="#">Media</a></li>
+ </ul>
+ </div>
+
+ <div id="news">
+ <ul>
+ <li><a href="#">Local</a></li>
+ <li><a href="#">Department</a></li>
+ <li><a href="#">State</a></li>
+ <li><a href="#">Media</a></li>
+ </ul>
+ </div>
+
+ <div id="content">
+ <p>
+ The University of Maryland, College Park is a public research university, the flagship campus
+ of the University System of Maryland
+ and the original 1862 land-grant institution in the State. It is one of only 62 members of the
+ Association of American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is committed to
+ achieving excellence as the State's primary center of research and graduate education and
+ the institution of choice for undergraduate students of exceptional ability and promise.
+ <strong>Note: reduce the size of the window.</strong>
+ </p>
+
+ <p>
+ The University creates and applies knowledge for the benefit of the economy and
+ culture of the State, the region, the nation, and beyond. As the flagship of the University
+ System of Maryland, the University shares its research, educational, cultural, and
+ technological strengths with businesses, government, and other educational institutions.
+ The University advances knowledge, provides outstanding and innovative instruction,
+ and nourishes a climate of intellectual growth in a broad range of academic disciplines
+ and interdisciplinary fields.
+ </p>
+ </div>
+
+ <div id="footer">
+ <p>
+ University of Maryland College Park.
+ </p>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/PositioningSummary/Positioning.css b/lectureCodeExamples/Week2/CSSIIICode/PositioningSummary/Positioning.css
new file mode 100755
index 0000000000000000000000000000000000000000..75aa32532c8d9ff43ba28966c285acef89a48a84
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/PositioningSummary/Positioning.css
@@ -0,0 +1,93 @@
+/* For this example it would help to first disable all the
+ id selectors (e.g., #par1) and then enable them one by one.
+*/
+
+* {
+ /* Important: to better understanding positioning,
+ we are setting the padding and margin of all elements
+ to zero */
+
+ padding: 0px;
+ margin: 0px;
+}
+
+body {
+ height: 40em;
+ position: relative;
+ /* Needed to absolute position in par2 works */
+ border: 0.25em solid blue;
+ padding: 0em;
+ margin: 2em;
+}
+
+p {
+ /* All paragraphs will have same width and border-style */
+ width: 20em;
+ border-style: solid;
+}
+
+#par1 {
+ /* Adjust relative to "normal" position/flow */
+ position: relative;
+
+ /* How far from the left */
+ left: 5em;
+
+ /* How far from the top */
+ top: 0em;
+}
+
+#par2 {
+ /* Adjust within non-static ancestor (body) */
+ position: absolute;
+
+ top: 10em;
+ left: 8em;
+}
+
+#containerPar3 {
+ border: .25em solid red;
+}
+
+#par3 {
+ border: .25em solid yellow;
+ /* Adjust relative to "normal" position */
+ position: relative;
+
+ top: 2em;
+}
+
+#containerPar4 {
+ width: 25em;
+ height: 10em;
+ border: .25em solid green;
+
+ /* Stays in this spot, even if you scroll */
+ position: fixed;
+
+ /* The position is with respect to the viewport (browser window) */
+ top: 20em;
+ left: 5em;
+ background-color: gray;
+}
+
+#par4 {
+ /* Adjust relative to "normal" position */
+ position: relative;
+
+ top: 2em;
+ left: -5em;
+ background-color: orange;
+
+ /* Change to 1 and #par5 z-index to 2 */
+ z-index: 2;
+}
+
+
+#par5 {
+ position: relative;
+ background-color: aqua;
+
+ /* Change to 2 and #par4 z-index to 1 */
+ z-index: 1;
+}
diff --git a/lectureCodeExamples/Week2/CSSIIICode/PositioningSummary/Positioning.html b/lectureCodeExamples/Week2/CSSIIICode/PositioningSummary/Positioning.html
new file mode 100755
index 0000000000000000000000000000000000000000..1d016dd10c826607635d6546ef4c2d11e11846d8
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/PositioningSummary/Positioning.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning Example</title>
+ <link rel="stylesheet" href="Positioning.css" />
+ <meta charset="UTF-8" />
+</head>
+
+<body>
+ <p id="par1">
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ </p>
+
+ <p id="par2">
+ Second paragraph we see.
+ Second paragraph we see.
+ Second paragraph we see.
+ Second paragraph we see.
+ Second paragraph we see.
+ </p>
+
+ <div id="containerPar3">
+ <p id="par3">
+ Third paragraph in the document.
+ Third paragraph in the document.
+ Third paragraph in the document.
+ Third paragraph in the document.
+ </p>
+ </div>
+
+ <div id="containerPar4">
+ <p id="par4">
+ Fourth paragraph in the document.
+ Fourth paragraph in the document.
+ Fourth paragraph in the document.
+ </p>
+ <p id="par5">
+ Fifth paragraph in the document.
+ Fifth paragraph in the document.
+ Fifth paragraph in the document.
+ </p>
+ </div>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/CSSIIICode/WidthHeight/WidthHeight.css b/lectureCodeExamples/Week2/CSSIIICode/WidthHeight/WidthHeight.css
new file mode 100755
index 0000000000000000000000000000000000000000..32d102b763eda066dc879f2b81277171db5d1eb1
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/WidthHeight/WidthHeight.css
@@ -0,0 +1,53 @@
+body {
+ font-family: Arial, Helvetica, serif;
+ width: 50em; /* Try 25, 50 */
+ height: 100em; /* Try 75, 50 */
+ border-style: solid;
+ border-color: black;
+}
+
+#p1 {
+ width: 15em;
+ height: 10em;
+ border-style: solid;
+ border-color: red;
+}
+
+/* Increasing width*/
+#p2 {
+ width: 30em;
+ height: 10em;
+ border-style: solid;
+ border-color: red;
+ border-width: 3px medium thin;
+}
+
+/* Adding padding and margin */
+#p3 {
+ width: 15em;
+ height: 10em;
+ border-style: solid;
+ border-color: red;
+ padding: 2em;
+ margin: 4em;
+}
+
+/* Reducing size, using overflow visible */
+#p4 {
+ width: 15em;
+ height: 2em;
+ border-style: solid;
+ border-color: red;
+ padding: 2em;
+ overflow: visible;
+}
+
+/* Reducing size, using overflow scroll */
+#p5 {
+ width: 15em;
+ height: 2em;
+ border-style: solid;
+ border-color: red;
+ padding: 2em;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/WidthHeight/WidthHeight.html b/lectureCodeExamples/Week2/CSSIIICode/WidthHeight/WidthHeight.html
new file mode 100755
index 0000000000000000000000000000000000000000..a2c8a662f38fbd200ef67d0719c185e3b0f9e41d
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/WidthHeight/WidthHeight.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Width/Height</title>
+ <link rel="stylesheet" href="WidthHeight.css">
+</head>
+
+<body>
+ <div id="content">
+ <h1>Excerpts from the Inaugural Address by John F. Kennedy</h1>
+ <p id="p1">First Paragraph:<br />
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p id="p2">Second Paragraph:<br />
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p id="p3">Third Paragraph:<br />
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p id="p4">Fourth Paragraph:<br />
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+ <br /><br />
+ <p id="p5">Fifth Paragraph:<br />
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+ </div>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningAbsolute/Absolute.css b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningAbsolute/Absolute.css
new file mode 100755
index 0000000000000000000000000000000000000000..a4c71d0280d860312d76513d0663e59bf27374d7
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningAbsolute/Absolute.css
@@ -0,0 +1,14 @@
+body {
+ font-family: Arial, Helvetica, serif;
+ height: 300em;
+}
+
+#content {
+ position: relative; /* Try changing to static */
+}
+
+#additionalRef {
+ position: absolute; /* Try changing to static */
+ top: 12em;
+ left: 20em;
+}
diff --git a/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningAbsolute/Absolute.html b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningAbsolute/Absolute.html
new file mode 100755
index 0000000000000000000000000000000000000000..cd66b426b6e38fe2c0837146b0f6dcb544c20dd8
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningAbsolute/Absolute.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Absolute Positioning</title>
+ <link rel="stylesheet" href="Absolute.css">
+ </head>
+
+ <body>
+ <div id="intro">
+ <h1>JFK</h1>
+ <p>
+ Excerpts from the Inaugural Address by John F. Kennedy. He was referred to by
+ his initials JFK, and was the thirty-fifth President of the United States,
+ serving from 1961 until 1963.
+ </p>
+ </div>
+ <div id="content">
+ <h2>Speech</h2>
+ <p>
+ In the long history of the world, only a few generations have been granted the
+ role of defending freedom in its hour of maximum danger. I do not shank from
+ this responsibility - I welcome it. I do not believe that any of us would
+ exchange places with any other people or any other generation. The energy, the
+ faith, the devotion which we bring to this endeavour will light our country and
+ all who serve it -- and the glow from that fire can truly light the world.
+ </p>
+
+ <p>
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p>
+ My fellow citizens of the world: ask not what America will do for you, but what
+ together we can do for the freedom of man.
+ </p>
+ <div id="additionalRef">
+ <ul>
+ <li>
+ <a href="http://en.wikipedia.org/wiki/John_F._Kennedy">Wikipedia</a>
+ </li>
+ <li>
+ <a href="http://www.whitehouse.gov/history/presidents/jk35.html">WhiteHouse</a>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningFixed/Fixed.css b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningFixed/Fixed.css
new file mode 100755
index 0000000000000000000000000000000000000000..1a5907e6ad6e2268c4ba044df9dc92d954afef26
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningFixed/Fixed.css
@@ -0,0 +1,15 @@
+body {
+ height: 300em;
+ font-family: Arial, Helvetica, serif;
+}
+#nav {
+ position: fixed;
+ top:0em;
+}
+
+#p1 {
+ position: fixed;
+ top:15em;
+ left:10em;
+ color: red;
+}
diff --git a/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningFixed/Fixed.html b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningFixed/Fixed.html
new file mode 100755
index 0000000000000000000000000000000000000000..c995e71474abd8c900b52beb26b4233264ccc72b
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningFixed/Fixed.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Fixed Positioning</title>
+ <link rel="stylesheet" href="Fixed.css" type="text/css"/>
+ </head>
+
+ <body>
+ <div id="nav">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ <a href="#">Staff</a>
+ <a href="#">Forum</a>
+ </div>
+ <p id="p1">
+ The Department of Computer Science has course exemption examinations available
+ for CMSC 131, 132 and 250 and 212.These examinations aid in determining the most
+ appropriate initial placement of a student into CMSC courses at UMCP and cannot
+ be used to receive credit (ie they are not credit-by-examinations). Prior to
+ taking a particular CMSC course, a student must have all prerequisite courses on
+ their UMCP transcript, or they must have passed the departmental exemption
+ examination for the prerequisite course(s) in question.
+ </p>
+ <p id="p2">
+ A student is allowed to attempt the exemption examination for a particular
+ course only once. Also, a student may not take a CMSC exemption exam once they
+ have enrolled in a CMSC course here at UMCP - "enroll" is defined for purposes
+ here as "having taken the course and attended it beyond the end of the schedule
+ adjustment period". Typically an incoming student will take the exemption exam
+ during their orientation. No sample exams are available and the contents of the
+ exams may require writing code, tracing code, answering questions, solving
+ problems... The exams are all paper exams and may last anywhere from 60 to 90
+ minutes. Not all topics listed below may actually appear on each exam. There is
+ no charge to take a CMSC exemption exam and only one exam may be taken during
+ each testing date. Additionally it should be noted that introductory CMSC
+ courses here at the Univ. of MD, College Park may require 5-7 substantial
+ programming projects to be written independently by each student throughout the
+ semester. Written exams, by their very nature, cannot fully assess ones
+ capability to complete an electronic program which contains 100's ( to 1000's)
+ of lines of code (100's for CMSC 131 projects, to 1000's for CMSC 212 projects).
+ Students placing into CMSC 131, 132 or higher should be prepared to write
+ computer programs on the order of several hundred lines of code (for the 1st 132
+ project) or a thousand or so lines of code (for the 1st 212 project). If you
+ have any questions after reviewing these webpages you may contact a CMSC advisor
+ during any of the posted advising hours.
+ </p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningRelative/Relative.css b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningRelative/Relative.css
new file mode 100755
index 0000000000000000000000000000000000000000..a5acd360947436865ec44cd99d2c78aeedf00530
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningRelative/Relative.css
@@ -0,0 +1,26 @@
+body {
+ font-family: Arial, Helvetica, serif;
+}
+
+.borderOnly {
+ border-style: solid;
+}
+
+#p2 {
+ border-style: solid;
+ background-color: silver;
+ margin: 30px auto;
+}
+
+#p5 {
+ border-style: solid;
+ position: relative;
+ top: 1.5em;
+ left: 5em;
+ background-color: silver;
+}
+
+#pdelimeter {
+ color: red;
+ font-size: 2em;
+}
diff --git a/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningRelative/Relative.html b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningRelative/Relative.html
new file mode 100755
index 0000000000000000000000000000000000000000..c27fccbfbdb584ab8162b3e061affa3e30dccd4d
--- /dev/null
+++ b/lectureCodeExamples/Week2/CSSIIICode/oldDontUse/PositioningRelative/Relative.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Relative Positioning</title>
+ <link rel="stylesheet" href="Relative.css" type="text/css" />
+</head>
+
+<body>
+ <p class="borderOnly">
+ In the long history of the world, only a few generations have been
+ granted the role of defending freedom in its hour of maximum danger.
+ I do not shank from this responsibility - I welcome it. I do not
+ believe that any of us would exchange places with any other people
+ or any other generation. The energy, the faith, the devotion which
+ we bring to this endeavour will light our country and all who serve
+ it -- and the glow from that fire can truly light the world.
+ </p>
+
+ <p id="p2">
+ And so, my fellow Americans: ask not what your country can do for
+ you - ask what you can do for your country.
+ </p>
+
+ <p class="borderOnly">
+ My fellow citizens of the world: ask not what America will do for you,
+ but what together we can do for the freedom of man.
+ </p>
+
+ <p id="pdelimeter">
+ Same text as above but now we have changed the position of the second paragraph (using
+ relative positioning).
+ </p>
+
+ <p class="borderOnly">
+ In the long history of the world, only a few generations have been
+ granted the role of defending freedom in its hour of maximum danger.
+ I do not shank from this responsibility - I welcome it. I do not
+ believe that any of us would exchange places with any other people
+ or any other generation. The energy, the faith, the devotion which
+ we bring to this endeavour will light our country and all who serve
+ it -- and the glow from that fire can truly light the world.
+ </p>
+
+ <p id="p5">
+ And so, my fellow Americans: ask not what your country can do for
+ you - ask what you can do for your country.
+ </p>
+
+ <p class="borderOnly">
+ My fellow citizens of the world: ask not what America will do for you,
+ but what together we can do for the freedom of man.
+ </p>
+</body></html>
diff --git a/lectureCodeExamples/Week2/FormsCode/FieldSet.html b/lectureCodeExamples/Week2/FormsCode/FieldSet.html
new file mode 100755
index 0000000000000000000000000000000000000000..b60251b4d4d050d9a7c123a97131f3e088413e76
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/FieldSet.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>FieldSet and Legend</title>
+ <meta charset="utf-8" />
+</head>
+
+<body>
+ <form>
+ <fieldset>
+ <legend>
+ <strong>User Information</strong>
+ </legend>
+
+ <label>First Name: <input type="text" /></label><br><br>
+ <label>Last Name: <input type="text" /></label><br><br>
+
+ How many pairs of shoes do you own?<br />
+ <label><input type="radio" name="shoes">0 to 5 pairs</label><br />
+ <label><input type="radio" name="shoes">6 to 10 pairs</label><br />
+ <label><input type="radio" name="shoes">11 to 30 pairs</label><br />
+ <label><input type="radio" name="shoes" checked="checked">31 or more pairs</label><br>
+ </fieldset>
+ <hr>
+
+ <fieldset>
+ <legend>
+ <strong>Responses</strong>
+ </legend>
+
+ Please tell us which of our products you own:<br>
+ <label><input type="checkbox" />Shoe Polish</label><br>
+ <label><input type="checkbox" />Shoe Horn</label><br>
+ <label><input type="checkbox" />Closet Shoe Tree</label><br>
+ <br>
+ Please tell us why you love our products:<br>
+ <textarea rows="10" cols="40"></textarea><br>
+ </fieldset>
+ </form>
+</body>
+</html>
diff --git a/lectureCodeExamples/Week2/FormsCode/FormElements.css b/lectureCodeExamples/Week2/FormsCode/FormElements.css
new file mode 100755
index 0000000000000000000000000000000000000000..54dfb8f4fa39e0e53d372ee60e59cb53a2d7c94f
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/FormElements.css
@@ -0,0 +1,23 @@
+/* NOTE: While validating, make sure you use CSS */
+/* level 3 profile by accessing "More Options" */
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+input {
+ margin: 0.75em;
+
+ /* Makes our input elements with round borders (currently DISABLED) */
+ /* border-radius: 1em; */
+
+ /* Some padding to help round borders */
+ padding: 0.125em;
+}
+
+input[type="button"] {
+ box-shadow: 1em 1em 1em silver;
+}
+
+h1 {
+ text-shadow: silver 0.125em 0.125em 0.125em;
+}
diff --git a/lectureCodeExamples/Week2/FormsCode/FormElements.html b/lectureCodeExamples/Week2/FormsCode/FormElements.html
new file mode 100755
index 0000000000000000000000000000000000000000..264f0f75b7acf2b15128f0d09a5d3526bc6da0d4
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/FormElements.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Form Elements</title>
+ <!-- Notice: no more need for type -->
+ <link rel="stylesheet" href="FormElements.css" />
+</head>
+
+<body>
+ <h1>Form Elements</h1>
+ <hr>
+ <form>
+ <label for="userMidtermScore">Range</label>
+ <input id="userMidtermScore" type="range" min="0" max="50" step="5" value="0">
+ <br>
+
+ <label for="userFinalScore">Number</label>
+ <input id="userFinalScore" type="number" min="0" max="100" step="10" value="0">
+ <br>
+
+ <label for="date">Date</label>
+ <input id="date" type="date">
+ <br>
+
+ <label for="time">Time</label>
+ <input id="time" type="time">
+ <br>
+
+ <label for="datetime-local">Datetime-local</label>
+ <input id="datetime-local" type="datetime-local">
+ <br>
+
+ <label for="week">Week</label>
+ <input id="week" type="week">
+ <br>
+
+ <label for="month">Month</label>
+ <input id="month" type="month">
+ <br>
+
+ <label for="tel">Telephone</label>
+ <input id="tel" type="tel">
+ <br>
+
+ <label for="color">Color</label>
+ <input id="color" type="color">
+ <br>
+
+ <label>Button: <input type="button" value="Execute"></label>
+ <br><br>
+ <hr>
+ </form>
+</body></html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/FormsCode/InputElementAttributes.html b/lectureCodeExamples/Week2/FormsCode/InputElementAttributes.html
new file mode 100755
index 0000000000000000000000000000000000000000..739ff1bba52fa7744c2dc349f6709742bdaee778
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/InputElementAttributes.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Input Element Attributes</title>
+</head>
+
+<body>
+ <h1>Input Element Attributes</h1>
+
+
+ <form>
+ Name: <input type="text" value="Mary" size="4" maxlength="8">
+ <br><br>
+
+ School (readonly): <input type="text" value="UMD" size="1" maxlength="3" readonly>
+ <br><br>
+
+ Building (disabled): <input type="text" value="Iribe" size="1" disabled>
+ <br><br>
+
+ <input type="reset">
+ </form>
+</body>
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/FormsCode/InputList.html b/lectureCodeExamples/Week2/FormsCode/InputList.html
new file mode 100755
index 0000000000000000000000000000000000000000..f9207c220edfd381d161c72bab79c2d12d22c64f
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/InputList.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Input List</title>
+ <meta charset="utf-8" />
+</head>
+
+<body>
+ <h1>Input List</h1>
+
+ <form action="inputList.php" method="get">
+ <strong>Select color</strong><br>
+ <input list="color-options" name="color-choice">
+
+ <datalist id="color-options">
+ <option value="orange">
+ <option value="blue">
+ </datalist>
+
+ <br><br>
+ <input type="submit">
+ </form>
+
+</body></html>
diff --git a/lectureCodeExamples/Week2/FormsCode/Labels.html b/lectureCodeExamples/Week2/FormsCode/Labels.html
new file mode 100755
index 0000000000000000000000000000000000000000..39b138f1012c1bb9facc279832488d84facac470
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/Labels.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Labels</title>
+ <meta charset="utf-8" />
+</head>
+
+<body>
+ <form>
+ <h1>User Information</h1>
+
+ <!-- Input element is embedded in label -->
+ <!-- Clicking on "First Name:" text will change focus to this element -->
+ <label>First Name: <input type="text" /></label>
+ <br><br>
+
+ <!-- Relying on id and for to link label and input element -->
+ <label for="lastname">Last Name:</label><input type="text" id="lastname" />
+ <br><br>
+
+ <!-- Clicking on "School:" text will NOT change focus to this element -->
+ <!-- as we are not using a label -->
+ School: <input type="text">
+ <br><br>
+
+ <input type="reset">
+ </form>
+
+</body></html>
diff --git a/lectureCodeExamples/Week2/FormsCode/inputList.php b/lectureCodeExamples/Week2/FormsCode/inputList.php
new file mode 100755
index 0000000000000000000000000000000000000000..a8b6231d17f5ad283791dfa90a3e89b8370db793
--- /dev/null
+++ b/lectureCodeExamples/Week2/FormsCode/inputList.php
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Datalist Processing</title>
+</head>
+
+<body>
+ <?php
+ echo "<h1>Color Choice</h1>";
+ $choice = $_GET['color-choice'];
+ echo "<strong>Choice is: $choice</strong>";
+ ?>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/.classpath b/lectureCodeExamples/Week2/JavaToyWebServer/.classpath
new file mode 100755
index 0000000000000000000000000000000000000000..d171cd4c1231c688762ba221723f4b629bd7667d
--- /dev/null
+++ b/lectureCodeExamples/Week2/JavaToyWebServer/.classpath
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+ <classpathentry kind="src" path="src"/>
+ <classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
+ <classpathentry kind="output" path="bin"/>
+</classpath>
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/.project b/lectureCodeExamples/Week2/JavaToyWebServer/.project
new file mode 100755
index 0000000000000000000000000000000000000000..839dca3db202b8e448c8a9d1e673ae7fed9f3c06
--- /dev/null
+++ b/lectureCodeExamples/Week2/JavaToyWebServer/.project
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>JavaToyWebServer</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ <buildCommand>
+ <name>org.eclipse.jdt.core.javabuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ </buildSpec>
+ <natures>
+ <nature>org.eclipse.jdt.core.javanature</nature>
+ </natures>
+</projectDescription>
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/.settings/org.eclipse.jdt.core.prefs b/lectureCodeExamples/Week2/JavaToyWebServer/.settings/org.eclipse.jdt.core.prefs
new file mode 100755
index 0000000000000000000000000000000000000000..c616123c4789675ae661c78cd618303b3356eef9
--- /dev/null
+++ b/lectureCodeExamples/Week2/JavaToyWebServer/.settings/org.eclipse.jdt.core.prefs
@@ -0,0 +1,14 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=15
+org.eclipse.jdt.core.compiler.codegen.unusedLocal=preserve
+org.eclipse.jdt.core.compiler.compliance=15
+org.eclipse.jdt.core.compiler.debug.lineNumber=generate
+org.eclipse.jdt.core.compiler.debug.localVariable=generate
+org.eclipse.jdt.core.compiler.debug.sourceFile=generate
+org.eclipse.jdt.core.compiler.problem.assertIdentifier=error
+org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
+org.eclipse.jdt.core.compiler.problem.enumIdentifier=error
+org.eclipse.jdt.core.compiler.problem.reportPreviewFeatures=warning
+org.eclipse.jdt.core.compiler.release=enabled
+org.eclipse.jdt.core.compiler.source=15
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/bin/toyWebServer/WebServer.class b/lectureCodeExamples/Week2/JavaToyWebServer/bin/toyWebServer/WebServer.class
new file mode 100755
index 0000000000000000000000000000000000000000..bf5c620f2ca056b57a0e247ba2927c8b65dd7682
Binary files /dev/null and b/lectureCodeExamples/Week2/JavaToyWebServer/bin/toyWebServer/WebServer.class differ
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/htdocs/quotes.txt b/lectureCodeExamples/Week2/JavaToyWebServer/htdocs/quotes.txt
new file mode 100755
index 0000000000000000000000000000000000000000..4261e3af5be12a5a6490efabf80836a64bbc625d
--- /dev/null
+++ b/lectureCodeExamples/Week2/JavaToyWebServer/htdocs/quotes.txt
@@ -0,0 +1,11 @@
+"What does not kill me, makes me stronger."
+Friedrich Nietzsche
+
+"Imagination is more important than knowledge."
+Albert Einstein
+
+"To listen closely and reply well is the highest perfection we are able to attain in the art of conversation."
+Francois de La Rochefoucauld
+
+"We make a living by what we get, we make a life by what we give."
+Sir Winston Churchill
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/htdocs/testudo.jpg b/lectureCodeExamples/Week2/JavaToyWebServer/htdocs/testudo.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..d517a368bc05e837b888a3377ab8ac3a0ff84455
Binary files /dev/null and b/lectureCodeExamples/Week2/JavaToyWebServer/htdocs/testudo.jpg differ
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/src/toyWebServer/WebServer.class b/lectureCodeExamples/Week2/JavaToyWebServer/src/toyWebServer/WebServer.class
new file mode 100644
index 0000000000000000000000000000000000000000..ab114955315e58e8a7d4d8897f4dba24615d3702
Binary files /dev/null and b/lectureCodeExamples/Week2/JavaToyWebServer/src/toyWebServer/WebServer.class differ
diff --git a/lectureCodeExamples/Week2/JavaToyWebServer/src/toyWebServer/WebServer.java b/lectureCodeExamples/Week2/JavaToyWebServer/src/toyWebServer/WebServer.java
new file mode 100755
index 0000000000000000000000000000000000000000..72a56f465744f27019855169a164cb70ce5a21c3
--- /dev/null
+++ b/lectureCodeExamples/Week2/JavaToyWebServer/src/toyWebServer/WebServer.java
@@ -0,0 +1,64 @@
+package toyWebServer;
+
+/* From browser you can retrieve data as follows */
+/* http://localhost:8080/testudo.jpg */
+/* http://localhost:8080/quotes.txt */
+
+import java.io.*;
+import java.net.ServerSocket;
+import java.net.Socket;
+import java.net.URLConnection;
+import java.util.regex.*;
+
+public class WebServer {
+
+ public static void main(String[] args) throws Exception {
+ @SuppressWarnings("resource")
+ ServerSocket ss = new ServerSocket(8080);
+ Pattern pattern = Pattern.compile("GET /(.+) (HTTP/1.0|HTTP/1.1)");
+
+ while (true) {
+ System.out.println("Web Server Running");
+ Socket s = ss.accept();
+ BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream()));
+ PrintWriter out = new PrintWriter(new OutputStreamWriter(s.getOutputStream()));
+ String request = in.readLine();
+ System.out.println("Request received: " + request);
+
+ Matcher matcher = pattern.matcher(request);
+ matcher.find();
+ String fileName = matcher.group(1);
+ File file = new File("htdocs/" + fileName);
+ String contentType = URLConnection.getFileNameMap().getContentTypeFor(file.toString());
+ System.out.println("Content type detected: " + contentType);
+
+ /* Adding the file contents */
+ try {
+ /* Opening the file */
+ FileInputStream fileInputStream = new FileInputStream(file);
+
+ /* Writing the header */
+ out.print("HTTP/1.1 200 OK" + "\n");
+ out.print("Content-Length: " + file.length() + "\n");
+ out.print("Content-Type: " + contentType + "\n");
+ out.print("\n");
+ out.flush();
+ int byteOfData = fileInputStream.read();
+ while (byteOfData != -1) {
+ s.getOutputStream().write(byteOfData);
+ byteOfData = fileInputStream.read();
+ }
+ out.flush();
+ out.close();
+ fileInputStream.close();
+
+ } catch (FileNotFoundException e) {
+ out.println("HTTP/1.1 404 Not Found");
+ out.println("Content-Type: text/html\n");
+ out.println();
+ out.println("<h1>Invalid Request</h1>");
+ out.close();
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/FormsSummary/formsSummary.html b/lectureCodeExamples/Week2/WebServersFormsCode/FormsSummary/formsSummary.html
new file mode 100755
index 0000000000000000000000000000000000000000..43805188eaab5708f0c3a90755509fa76d7df1a4
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/FormsSummary/formsSummary.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Form Example</title>
+</head>
+
+<body>
+ <form action="formsSummary.php" method="get">
+ <!-- Textboxes and Password entry -->
+ <p><strong>FirstName: </strong><input type="text" name="firstName" autofocus required/><br /><br />
+ <strong>LastName: </strong><input type="text" name="lastName" required /><br /><br />
+ <strong>Password: </strong><input type="password" name="password" required /><br /><br />
+ </p>
+
+ <p>
+ <!-- id and name are different attributes -->
+ <strong>Email Address: <input id="emailaddress" type="email" name="email" placeholder="example@notreal.notreal"></strong>
+ </p>
+
+ <p>
+ <strong>Personal Website: <input id="website" type="url" name="website" placeholder="example@notreal.notreal"></strong>
+ </p>
+
+ <!-- Checkboxes (Notice the one that is checked by default) -->
+ <p>
+ <strong>Own a Laptop</strong><input type="checkbox" name="ownsLaptop" />
+ <strong>Own a Desktop</strong><input type="checkbox" name="ownsDesktop" />
+ <strong>Computers Available at School</strong><input type="checkbox" name="atSchool" checked="checked" /><br />
+ </p>
+
+ <!-- Radio (Notice all share the same name) -->
+ <p>
+ <strong>Gender:</strong>
+ Male<input type="radio" name="gender" value="male" />
+ Female<input type="radio" name="gender" value="female" />
+ </p>
+
+ <!-- Radio (default selection) -->
+ <p>
+ <strong>Course to take:</strong>
+ Beginner<input type="radio" name="course" value="beginner" checked="checked" />
+ Intermediate<input type="radio" name="course" value="intermediate" />
+ Advanced<input type="radio" name="course" value="advanced" />
+ </p>
+
+ <!-- File Upload -->
+ <p>
+ <strong>Upload your transcript file</strong>
+ <input type="file" name="transcript" />
+ </p>
+
+ <!-- textarea (Notice it does not use input) -->
+ <p>
+ <strong>Brief description of why you want to participate</strong><br />
+ <textarea rows="5" cols="80" name="description"></textarea>
+ </p>
+
+
+ <!-- select (Notice it does not use input) -->
+ <!-- To set the default choice use selected rather than checked -->
+ <p>
+ <strong>Describe your level of expertise</strong>
+ <select name="expertise">
+ <option value="amateur">Amateur</option>
+ <option value="proficient" selected="selected">Proficient</option>
+ </select>
+ </p>
+
+
+ <!-- select (Notice it does not use input) -->
+ <!-- Notice that the name has a [] set -->
+ <!-- multiple is required for multiple selection -->
+ <p>
+ <strong>Select which development environments you have used.</strong><br />
+ <select name="environments[]" multiple="multiple">
+ <option value="Eclipse">Eclipse</option>
+ <option value="Netbeans">Netbeans</option>
+ <option value="CommandLine">CommandLine</option>
+ <option value="JBuilder">JBuilder</option>
+ </select>
+ </p>
+
+ <p>
+ <input type="reset" />
+ <input type="submit" />
+ </p>
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/FormsSummary/formsSummary.php b/lectureCodeExamples/Week2/WebServersFormsCode/FormsSummary/formsSummary.php
new file mode 100755
index 0000000000000000000000000000000000000000..a5ad607bb87a0d20d050e0a41f6a12907bdf544a
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/FormsSummary/formsSummary.php
@@ -0,0 +1,67 @@
+<?php
+
+ print "<strong>Full Name: </strong> ".$_GET["firstName"]." ".$_GET["lastName"]."<br />";
+ print "<strong>Password Provided was: </strong>".$_GET["password"]."<br />";
+ print "<strong>Email Address: </strong>".$_GET["email"]."<br />";
+ print "<strong>Personal website: </strong>".$_GET["website"]."<br />";
+
+ print "<strong>Owns a laptop: </strong>";
+ if (isset($_GET['ownsLaptop'])) {
+ print "Yes<br />";
+ } else {
+ print "No<br />";
+ }
+
+ print "<strong>Owns a desktop: </strong>";
+ if (isset($_GET['ownsDesktop'])) {
+ print "Yes<br />";
+ } else {
+ print "No<br />";
+ }
+
+ print "<strong>Computers available at school: </strong>";
+ if (isset($_GET['atSchool'])) {
+ print "Yes<br />";
+ } else {
+ print "No<br />";
+ }
+
+ print "<strong>Gender: </strong>";
+ if (isset($_GET['gender'])) {
+ print "{$_GET["gender"]}<br />";
+ } else {
+ print "Not specified<br />";
+ }
+
+ if (isset($_GET['course'])) {
+ print "<strong>Course selected is: {$_GET['course']}</strong><br />";
+ }
+
+ print "<strong>Transcript file: </strong>";
+ if (isset($_GET['transcript'])) {
+ print "{$_GET["transcript"]}<br />";
+ } else {
+ print "None<br />";
+ }
+
+ if (isset($_GET['description'])) {
+ echo "<strong>Description(Using nl2br)</strong><br />";
+ echo nl2br($_GET['description']); // notice use of nl2br
+ echo "<br />";
+ }
+
+ if (isset($_GET['expertise'])) {
+ echo "<strong>Expertise: {$_GET['expertise']}<strong><br />";
+ }
+
+ print "<strong>Environments: </strong><br />";
+ if (!isset($_GET["environments"]))
+ print "No environments selected<br />";
+ else {
+ foreach ($_GET["environments"] as $entry) {
+ print($entry."<br />");
+ }
+ }
+
+ print "</p>";
+?>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/GetExample/formGet.html b/lectureCodeExamples/Week2/WebServersFormsCode/GetExample/formGet.html
new file mode 100755
index 0000000000000000000000000000000000000000..6cb76e5ffec85534e5c8ee758ad0434c478176f4
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/GetExample/formGet.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Form Example (Using Get)</title>
+</head>
+
+<body>
+ <h1>Form Example (Using Get)</h1>
+ <form action="getProcessing.php" method="get">
+ <strong>Name: </strong><input type="text" name="name" /><br><br>
+ <strong>Age: </strong><input type="text" name="age" /><br><br>
+ <input type="submit" value="Submit Data Amigo" /><br><br>
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/GetExample/getProcessing.php b/lectureCodeExamples/Week2/WebServersFormsCode/GetExample/getProcessing.php
new file mode 100755
index 0000000000000000000000000000000000000000..9012f49054bb2ab1c446722d9789926ee7c8958b
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/GetExample/getProcessing.php
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Get Example Processing</title>
+</head>
+
+<body>
+ <?php
+ echo "<h1>Look at the URL; you will see parameters</h1>";
+ echo "<h1>Change parameters and execute script by pressing enter</h1>";
+ $nameSubmitted = $_GET['name'];
+ $ageSubmitted = $_GET['age'];
+ if ($nameSubmitted === "Mary") {
+ echo "<strong>Welcome Mary, my friend!!</strong>";
+ } else {
+ echo "<strong>Welcome $nameSubmitted</strong>";
+ }
+ echo "<br><strong>Received age value is: $ageSubmitted</strong>";
+ ?>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/PostExample/formPost.html b/lectureCodeExamples/Week2/WebServersFormsCode/PostExample/formPost.html
new file mode 100755
index 0000000000000000000000000000000000000000..eb61fdd5a42228dba9ed457d5896aebef7a0af1d
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/PostExample/formPost.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Form Example (Using Post)</title>
+</head>
+
+<body>
+ <h1>Form Example (Using Post)</h1>
+ <form action="postProcessing.php" method="post">
+ <strong>Name: </strong><input type="text" name="name" /><br><br>
+ <strong>Age: </strong><input type="text" name="age" /><br><br>
+ <input type="submit" value="Submit Data Amiga" /><br><br>
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/PostExample/postProcessing.php b/lectureCodeExamples/Week2/WebServersFormsCode/PostExample/postProcessing.php
new file mode 100755
index 0000000000000000000000000000000000000000..e1705eafa4e1b2a535470515487dde4fb3aa27c0
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/PostExample/postProcessing.php
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Post Example Processing</title>
+</head>
+
+<body>
+ <?php
+ echo "<h1>Look at the URL; you will NOT see parameters</h1>";
+ echo "<h1>Execute the script again by reloading this page; what do you see?</h1>";
+ $nameSubmitted = $_POST['name'];
+ $ageSubmitted = $_POST['age'];
+ if ($nameSubmitted === "Mary") {
+ echo "<strong>Welcome Mary, my friend!!</strong>";
+ } else {
+ echo "<strong>Welcome $nameSubmitted</strong>";
+ }
+ echo "<br><strong>Received age value is: $ageSubmitted</strong>";
+ ?>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/SamplePage.html b/lectureCodeExamples/Week2/WebServersFormsCode/SamplePage.html
new file mode 100755
index 0000000000000000000000000000000000000000..82d809fa500c37dd0ccaa4d17eefa88d2f0bd7b8
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/SamplePage.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <!-- For responsive page -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Sample Page for Web Server</title>
+</head>
+
+<body>
+ <h1>Sample Page for Web Server</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies purus ut felis malesuada, ut tincidunt magna eleifend. Quisque a augue cursus, aliquet orci a, sagittis turpis. In tempus, orci sodales viverra feugiat, mi lacus mollis enim, a semper massa felis at tortor. Aliquam tincidunt pulvinar bibendum. Vestibulum posuere purus eget dictum posuere. Pellentesque quis massa convallis, imperdiet lorem eget, venenatis ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque augue odio, ultrices quis ornare vitae, congue ut est. Praesent id venenatis arcu. Morbi viverra tortor vel tincidunt dictum. Maecenas tristique sapien vitae dolor rutrum viverra. Praesent eget placerat dui, in pulvinar dolor. Nulla sit amet iaculis eros.
+
+ </p>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/SearchGoogleYouTube.html b/lectureCodeExamples/Week2/WebServersFormsCode/SearchGoogleYouTube.html
new file mode 100755
index 0000000000000000000000000000000000000000..b0a53609b0a0b947c4bdbfdf54f3ceb3e241fa46
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/SearchGoogleYouTube.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Search App</title>
+ <style>
+ h1 {
+ text-decoration: underline;
+ }
+
+ h2 {
+ color: red;
+ text-decoration: underline;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Search App</h1>
+
+ <h2>Search using Google</h2> <!-- https://www.google.com/search?q= -->
+ <form action="https://www.google.com/search" method="get">
+ Enter topic to search <input type="text" name="q">
+ <input type="submit" value="Search in Google">
+ </form>
+
+ <h2>Search using YouTube</h2> <!-- https://www.youtube.com/results?search_query=cat -->
+ <form action="https://www.youtube.com/results" method="get">
+ Enter topic to search <input type="text" name="search_query">
+ <input type="submit" value="Search in YouTube">
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/commonHeader.html b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/commonHeader.html
new file mode 100755
index 0000000000000000000000000000000000000000..c447a56ad22d2d16672dbe3d3a382b381ecd9648
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/commonHeader.html
@@ -0,0 +1,5 @@
+<div id="headerOne">
+ <a href="http://www.umd.edu"><img id="globe1" src="images/UMDImages/globe1.png" width="10" height="10" alt="globe1 Image" /></a>
+ <a href="http://www.cs.umd.edu"><img id="deptcs" src="images/deptcs.png" width="10" height="10" alt="dept Image" /></a>
+ <img id="passportHeader" src="images/passportHeader.png" width="10" height="10" alt="passport header Image" />
+</div>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/css/mainstylesheet.css b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/css/mainstylesheet.css
new file mode 100755
index 0000000000000000000000000000000000000000..831546ee1b01d3c054b6b78243fb095bde83d486
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/css/mainstylesheet.css
@@ -0,0 +1,74 @@
+/***** HTML Selectors *****/
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 75%;
+ width: 52em;
+}
+
+h1 {
+ text-decoration: underline;
+}
+
+/***** Layout Logic *****/
+#headerOne #globe1 {
+ width: 6em;
+ height: 6em;
+ margin-left: 1em;
+ border-style: none;
+}
+
+#headerOne #deptcs {
+ width: 437px;
+ /* 487px, 52 px */
+ height: 47px;
+ margin-left: 3em;
+ border-style: none;
+ vertical-align: 1em;
+ padding: 0em;
+ margin-bottom: 0em;
+}
+
+#headerOne #passportHeader {
+ width: 251px;
+ height: 46px;
+ margin-left: 18em;
+ padding: 0;
+ margin-top: -1em;
+}
+
+
+#footer {
+ margin-top: 1em;
+ clear: both;
+ font-size: 1.25em;
+ border-style: double;
+ border-color: silver;
+ border-width: .25em;
+ height: 4.5em;
+ padding-top: .35em;
+ background-image: url(../images/background.jpg);
+}
+
+#footer ul {
+ list-style: none;
+}
+
+#footer p {
+ font-size: .85em;
+ font-style: italic;
+ text-align: center;
+}
+
+#footer li {
+ display: inline;
+ border-right-style: solid;
+ border-right-width: .05em;
+ border-right-color: gray;
+ padding-right: .3em;
+ padding-left: .25em;
+}
+
+#footerLastLi li {
+ display: inline;
+ border: none;
+}
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/footer.html b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/footer.html
new file mode 100755
index 0000000000000000000000000000000000000000..eca5a14f0839ddd1bcf48cf3d7be477ff48e429f
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/footer.html
@@ -0,0 +1,11 @@
+ <div id="footer">
+ <ul>
+ <li><a href="index.shtml">Home</a></li>
+ <li><a href="http://www.umd.edu/">University of Maryland College Park</a></li>
+ <li><a href="http://www.cs.umd.edu/">Department of Computer Science</a></li>
+ </ul>
+ <p>
+ <br /><br />
+ © University of Maryland
+ </p>
+ </div>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/UMDImages/globe1.png b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/UMDImages/globe1.png
new file mode 100755
index 0000000000000000000000000000000000000000..a520570b976a737215ed91c0e4787aa50b5e4163
Binary files /dev/null and b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/UMDImages/globe1.png differ
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/background.jpg b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/background.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..dca29af4a60852fca1fa0c6124a1e8d2110e06b4
Binary files /dev/null and b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/background.jpg differ
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/deptcs.png b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/deptcs.png
new file mode 100755
index 0000000000000000000000000000000000000000..0b5c6cbf5405dc21533210be4a9097f439f0531a
Binary files /dev/null and b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/deptcs.png differ
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/passportHeader.png b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/passportHeader.png
new file mode 100755
index 0000000000000000000000000000000000000000..c3f10375b71edf391d013be8f2a3ad845fdf1306
Binary files /dev/null and b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/images/passportHeader.png differ
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/index.shtml b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/index.shtml
new file mode 100755
index 0000000000000000000000000000000000000000..29f7953e56435d37cba866340cc64e2320459181
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/index.shtml
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Server Side Includes Example</title>
+ <link rel="stylesheet" href="css/mainstylesheet.css" title="MainStyle" />
+ </head>
+
+ <body>
+ <!--#include virtual="commonHeader.html" -->
+
+ <h1>Passport Program</h1>
+ <p>Summer program offered by the Department of Computer Science.</p>
+
+ <!--#include virtual="footer.html" -->
+
+ <br><br>
+ <hr>
+ <strong>Last Modified: </strong><!--#echo var="LAST_MODIFIED" --><br>
+ <strong>Date: </strong><!--#echo var="DATE_LOCAL" -->
+
+ </body>
+</html>
diff --git a/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/modifiedExtension.html b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/modifiedExtension.html
new file mode 100755
index 0000000000000000000000000000000000000000..29f7953e56435d37cba866340cc64e2320459181
--- /dev/null
+++ b/lectureCodeExamples/Week2/WebServersFormsCode/ServerSidesIncludesExample/modifiedExtension.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Server Side Includes Example</title>
+ <link rel="stylesheet" href="css/mainstylesheet.css" title="MainStyle" />
+ </head>
+
+ <body>
+ <!--#include virtual="commonHeader.html" -->
+
+ <h1>Passport Program</h1>
+ <p>Summer program offered by the Department of Computer Science.</p>
+
+ <!--#include virtual="footer.html" -->
+
+ <br><br>
+ <hr>
+ <strong>Last Modified: </strong><!--#echo var="LAST_MODIFIED" --><br>
+ <strong>Date: </strong><!--#echo var="DATE_LOCAL" -->
+
+ </body>
+</html>
diff --git a/lectureSlides/Week02/CSS.pdf b/lectureSlides/Week02/CSS.pdf
new file mode 100755
index 0000000000000000000000000000000000000000..19fff67969b9ed32a66f6f9c69696ad3c5197166
Binary files /dev/null and b/lectureSlides/Week02/CSS.pdf differ
diff --git a/lectureSlides/Week02/CSSII.pdf b/lectureSlides/Week02/CSSII.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..def787fc590c827635bb43662061178bc543b91a
Binary files /dev/null and b/lectureSlides/Week02/CSSII.pdf differ
diff --git a/lectureSlides/Week02/CSSIII.pdf b/lectureSlides/Week02/CSSIII.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..2b5df56975a10df613c32101cd9f941da8bddd72
Binary files /dev/null and b/lectureSlides/Week02/CSSIII.pdf differ
diff --git a/lectureSlides/Week02/Forms.pdf b/lectureSlides/Week02/Forms.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..234439cdbc46ad5231eac3656be60701004dffc1
Binary files /dev/null and b/lectureSlides/Week02/Forms.pdf differ
diff --git a/lectureSlides/Week02/WebServersForms.pdf b/lectureSlides/Week02/WebServersForms.pdf
new file mode 100755
index 0000000000000000000000000000000000000000..c3620f4e4132b6864f5002a85f9f4cdc8b3f3f0f
Binary files /dev/null and b/lectureSlides/Week02/WebServersForms.pdf differ