Skip to content

Commit

Permalink
Still working on consolidation and updating course material for cours…
Browse files Browse the repository at this point in the history 
…e not much left, current version
  • Loading branch information
@noelking
noelking committed Aug 1, 2012
1 parent 5decbc3 commit 9e5d157
Show file tree
Hide file tree
Showing 6 changed files with 338 additions and 0 deletions.
103 changes: 103 additions & 0 deletions 007 HTML Table the Irish Flag/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
007 HTML Table the Irish Flag HTML Course @ CoderDojo DCU
===================================


Aim
---------
This week we are going to look at tables in HTML, these allow us to put information
on our website in tabular format

This week we covered the following areas:

* Margin versus Padding in CSS.
* Introduced the marquee by making the h1 move.
* Got marquee to get two images bouncing around our page.

So lets get started,

Margin versus Padding in CSS.
------------------------------
We started with showing the difference between padding and margin. These are two
CSS properties used for spacing in your website. The key point is
* Padding will impact the inside of the tag
* Margin will change the spacing out side the tag

To illustrate this we started by using the div around the image tag we
worked on in week 4.

````html
<div class="mainImage">
<img src="coder.png" class="imageStyle"><img>
</div>
````

We now updated the CSS for class mainImage by adding padding and a
border.

````css
div.mainImage {
border: 2px solid black;
width: 200px;
padding: 50px;
}
````

After adding the border and padding, we now see a gap between the border
and image of 50px. This highlights how padding impacts the inside the
div tag.

Now add the a margin to our div and see what happens

````css
div.mainImage {
border: 2px solid black;
width: 200px;
padding: 10px;
margin: 20px;
}
````

Remember that the margin should impact outside the tag, so we expect
their to be space placed outside the border. Did the div move? If you cant
see it, then increase the value from 20px to 100px. In setting the margin 20px
you should see the div now moves in from the left hand side. This will
put a margin of 20px around the outside of the div tag.

Introducing the marquee tag
------------------------------
The marquee tag moves the tags inside the `<marquee> </marquee>`. To
get started with this we adding the marquee tag to our heading.

````html
<marquee>
<h1>Coder Dojo @ DCU</h1>
</marquee>
````

Ok tell us what this did to your header?

How about you change the direction of the marquee

````html
<table class="linksTable">
<tr>
<td class="leftColumn">Group A</td>
<td class="middleColumn"></td>
<td class="rightColumn">Group C</td>
</tr>

<tr>
<td class="leftColumn">Ukraine</td>
<td class="middleColumn"></td>
<td class="rightColumn">Croatia</td>
</tr>
<tr>
<td class="leftColumn">Poland</td>
<td></td>
<td class="rightColumn">Greece</td>
</tr>
</table>
````



Binary file added 007 HTML Table the Irish Flag/coder.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 82 additions & 0 deletions 007 HTML Table the Irish Flag/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Welcome To CoderDojo @ DCU</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">

<marquee>
<h1>Coder Dojo @ DCU</h1>
</marquee>

<div class="mainImage">
<img src="coder.png" class="imageStyle"><img>
</div>

<p>
Welcome to the first Coderdojo session in DCU. We have very few rules, but our main one
is to be cool. We will only teach areas that are cool such as web site, android, iPhone and
game development. If there is something cool out there we have not seen let us know.

This course will start with basics of HTML and then bring you on an adventure to
build what ever you imagination decides on the internet.

Some of the most popular pages on the internet have:
</p>

<ul>
<li>Games</li>
<li>Videos</li>
<li>Blogs</li>
<li>Social Media</li>
<li>Cool images </li>
</ul>

<div class="center">
<iframe width="420" height="315" src="http://www.youtube.com/embed/ImJD-nDxnc4">
Your browser does not support iframes
</iframe>
</div>

<div class="bounce">
<marquee direction="down" behavior="alternate" height="350">
<marquee behavior="alternate" scrollamount="3">
<div class="smallImage">
<img src="coder.png" class="imageStyle"><img>
</div>
</marquee>
<marquee behavior="alternate" scrollamount="3" direction="right">
<div class="smallImage">
<img src="coder.png" class="imageStyle"><img>
</div>
</marquee>
</marquee>
</div>

<div id="favouriteLinks">
<table class="linksTable">
<tr>
<td class="leftColumn">Group A</td>
<td class="middleColumn"></td>
<td class="rightColumn">Group C</td>
</tr>

<tr>
<td class="leftColumn">Ukraine</td>
<td class="middleColumn"></td>
<td class="rightColumn">Croatia</td>
</tr>
<tr>
<td class="leftColumn">Poland</td>
<td></td>
<td class="rightColumn">Greece</td>
</tr>
</table>
</div>
</div>
</body>
</html>
90 changes: 90 additions & 0 deletions 007 HTML Table the Irish Flag/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
body {
background-color: navy;
color: black;
}

h1 {
color: gray;
}

p {
font-size: 12px;
font-family: Georgia;
}

iframe {
border: 0;
}

div#container {
margin-left: auto;
margin-right: auto;
width: 960px;
background-color: white;
padding: 20px;
}

.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}

div.mainImage {
border: 2px solid black;
width: 200px;
padding: 10px;
margin: 20px;
}

div.smallImage {
width: 50px;
}


img.imageStyle {
width: 100%;
}

div.bounce {
margin: 20px;
border: 1px solid black;
}

table.linksTable {
background-color: white;
width: 100%;
border: 2px solid navy;
padding: 0px;
border-collapse: collapse;
}


td.leftColumn {
background-color: green;
color: green;
}

td.leftColumn:hover {
background-color: white;
}

td.middleColumn {
background-color: white;
color: white;
width: 33%;
}

td.middleColumn:hover {
background-color: green;
}
td.rightColumn {
background-color: orange;
color: orange;
}

td.rightColumn:hover {
background-color: white;
}


60 changes: 60 additions & 0 deletions 008 Your Week/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<title>Your HTML Week</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

<body>
<!--
This is our euro championship button
It was table 1's idea, great job
-->
<button type="button"
onclick="alert('You will never beat the Irish')"
>Are Ireland Going
To Win The Euros?</button>

<code>

function saySomethingTrue() {
alert('You will never beat the Irish');
}
</code>

<h2>Who will beat the Irish</h2>
<select>
<option>Nobody</option>
<option>Never</option>
<option>Maybe spain</option>
</select>

<dl>
<dt>HTML</dt>
<dd>- Hyper Text Markup Language
is a programming language used
to build webpages.
</dd>
</dl>

<form>
<fieldset>
<legend>Who are you:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Coolest country on planet:
<select>
<option>Ireland</option>
<option>Ireland</option>
</select>
</fieldset>
</form>

<iframe src="http://coderdojo.com"
width="100%" height="500px">
</iframe>`

</body>

</html>
3 changes: 3 additions & 0 deletions 008 Your Week/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
background-color: green;
}

0 comments on commit 9e5d157

Please sign in to comment.