more html files added

basic html level code
CoderDojo · Apr 13, 2012 · c75269b · c75269b
1 parent afe64fc
commit c75269b
Show file tree

Hide file tree

Showing 18 changed files with 157 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/HTML Day 3/.DS_Store b/HTML Day 3/.DS_Store
diff --git a/HTML Day 3/HTML guidelines.pages b/HTML Day 3/HTML guidelines.pages
diff --git a/HTML Day 3/HTML guidelines.pdf b/HTML Day 3/HTML guidelines.pdf
diff --git a/HTML Day 3/HTML source.html b/HTML Day 3/HTML source.html
@@ -0,0 +1,55 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="stylesheet.css">
+<title> My Awesome website</title>
+</head>
+<body>
+	<h3>The list</h3>
+	<ul>
+		<li>The first</li>
+		<li>The Second</li>
+		<li>The Third</li>
+		<li>The Fourth</li>
+		<li>The Fifth</li>
+	</ul>
+	<h3>Another List</h3>
+	<ol>
+		<li>The first</li>
+		<li>The Second</li>
+		<li>The Third</li>
+		<li>The Fourth</li>
+		<li>The Fifth</li>
+	</ul>
+	<a href="http://coderdojo.com/"><img src="https://github.com/CoderDojo/CoderDojo-Design/raw/master/logo/logo.png" width="300" height="300" /></a>
+
+	<table>
+            <thead>
+                <tr>
+                    <th colspan="2"><style="color:red;">Items on This Page</th>
+                </tr>
+                <tr>
+                    <th><em>Item</em></th>
+                    <th><em>Count</em></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>List</td>
+                    <td>2</td>     
+                </tr>
+
+                <tr>
+                    <td>Images</td>
+                    <td>2</td>
+                </tr>
+
+                <tr>
+                    <td>Tables</td>
+                    <td>1(hopefully)</td>
+                </tr>
+            </tbody>
+        </table>
+
+
+</body>
+</html>
diff --git a/HTML Day 3/stylesheet.css b/HTML Day 3/stylesheet.css
@@ -0,0 +1,10 @@
+body{
+	background:white;
+}
+th{
+	border: 1px solid #999;
+	font-size:20px;
+}
+td{
+	border: 2px dashed green;
+}
diff --git a/HTML Day 4/.DS_Store b/HTML Day 4/.DS_Store
diff --git a/HTML Day 4/HTML Guidelines.pages b/HTML Day 4/HTML Guidelines.pages
diff --git a/HTML Day 4/HTML Guidelines.pdf b/HTML Day 4/HTML Guidelines.pdf
diff --git a/HTML Day 4/HTML Source.html b/HTML Day 4/HTML Source.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="stylesheet.css">
+<title>Time to switch it up a little bit!</title>
+</head>
+<body>
+<h4>Its time to add some nice UI touches!</h4>
+
+<div id="smallBox">
+	Lets start off with a simple box.<br />
+	Nothing to fancy just some tesxt inside a little div of ours.<br />
+	We've got a nice border going on stayed with the white background fairly standard affair.<br />
+	Now try putting the mouse over me.<br />
+	<h1>Thats a little more room!</h1>
+	Note how the absolute positioning makes the div grow in size in a different direction
+	For getting this far you get a special prize!
+	<iframe width="560" height="315" src="http://www.youtube.com/embed/FnF2ROKtdMY" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<div id="mediumBox">
+	We can also do some fun things such as add a scrollbar to the div or allow it to be resized. Check out this div with its fancy pants scroll bar going down the side. 
+</div>
+<h3> you should spend most of this session messing around with different div style things such as the positioning and such.</h3>
+
+<code>Your now at the stage where you can make a small webiste so you should start thinking of something to make with the kids for the next few weeks.</code>
+
+</body>
+</html>
diff --git a/HTML Day 4/stylesheet.css b/HTML Day 4/stylesheet.css
@@ -0,0 +1,44 @@
+body{
+	background:white;
+}
+div#smallBox{
+	position: absolute;
+	bottom:30%;
+	right:100px;
+	width:400px;
+	height:100px;
+	background: white;
+	border: 2px solid #124234;
+	overflow: hidden;
+}
+div#smallbox:hover{
+	background:blue;
+	width:700px;
+	height:400px;
+	border: 10px dashed #999;
+	overflow: scroll;
+	z-index: 2;/*z-index might be a bit much to go into at the minute so maybe save it for later*/
+}
+div#mediumbox{
+	position: relative;
+	top:20px;
+	left:150px;
+	margin: 20px;
+	width:40px;
+    min-height: 45px;
+   	overflow:hidden;
+	overflow-y:scroll;
+	resize:both;
+	max-width: 700px;
+    max-height: 90px;
+}
+code{
+	opacity: 0.3;
+	-moz-opacity: 0.3;
+	filter:alpha(opacity=3);
+}
+code:hover{
+	opacity: 1;
+	-moz-opacity: 1;
+	filter:alpha(opacity=1);
+}
diff --git a/HTML Day 5/.DS_Store b/HTML Day 5/.DS_Store
diff --git a/HTML Day 5/HTML Guidelines.pages b/HTML Day 5/HTML Guidelines.pages
diff --git a/HTML Day 5/HTML Guidelines.pdf b/HTML Day 5/HTML Guidelines.pdf
diff --git a/HTML Day 5/HTML source.html b/HTML Day 5/HTML source.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+	<title>Thinking Caps on guys</title>
+</head>
+<body>
+	<h3>Time to start your own website!<br />
+		some ideas include:</h3>
+<ol>
+	<li>A Page about themselves,</li>
+	<li>A site about a there hobbies,</li>
+	<li>An event in the area</li>
+	<li>A Page to display all of the different things they have done in HTML</li>
+	<li>A small blog</li>
+	<li>A page with links to all of there favorite things online</li>
+	<li>Whatever you can think of, maybe even ask the kids and see what they would like.</li>
+</ol>
+Generally you may want to also build up there skills during these weeks and go over some of the previously covered topics before moving on to javascript.
+</body>
+</html>
diff --git a/HTML day 1/.DS_Store b/HTML day 1/.DS_Store
diff --git a/HTML day 1/html guidlines.html → HTML day 1/HTML source.html b/HTML day 1/html guidlines.html → HTML day 1/HTML source.html
diff --git a/README.txt b/README.txt
@@ -0,0 +1 @@
+These Session plans are only a rough guideline to the way you introduce topics. The best way to operate the courses is to sometimes follow the directions of the kids themselves as it tends to engage there interests more and make programming seem useful and cool. You may also want to get feedback from the kids and see what they want to learn allowing them to develop skills in areas they are interested in and show them different things they can do.