Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Still working on consolidation and updating course material for cours…

…e not much left, current version
  • Loading branch information...
commit 9e5d157dcda310533d211923a7c52adc413a376a 1 parent 5decbc3
@noelking noelking authored
View
103 007 HTML Table the Irish Flag/README.md
@@ -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>
+````
+
+
+
View
BIN  007 HTML Table the Irish Flag/coder.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
82 007 HTML Table the Irish Flag/index.html
@@ -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>
View
90 007 HTML Table the Irish Flag/style.css
@@ -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;
+}
+
+
View
60 008 Your Week/index.html
@@ -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>
View
3  008 Your Week/style.css
@@ -0,0 +1,3 @@
+body {
+ background-color: green;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.