HTML/CSS 2 Answers 1. Intro to level 2 HTML5/CSS3 · Intro to level 2 HTML5/CSS3 1.1. doctype and title

12/16/2016

1/62

HTML/CSS 2 Answers

1. Intro to level 2 HTML5/CSS3

1.1. doctype and title

<!doctype html> <title>Index, Code Avengers Travel</title>

1.2. heading


<h1>Middle Earth Adventure</h1>

1.3. logo


<img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> <h1>Middle Earth Adventure</h1>

1.4. anchors and break


<img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> <h1>Middle Earth Adventure</h1>

<a href="plan.html">Plan</a><br> <a href="day1.html">Day 1</a><br> <a href="day2.html">Day 2</a><br> <a href="day3.html">Day 3</a><br>

1.5. doctype and title for each page

<!doctype html> <title>Plan, Code Avengers Travel</title>

<h1>Plan</h1> <!doctype html> <title>Day 1, Code Avengers Travel</title>

<h1>Day 1 Activities</h1> <!doctype html> <title>Day 2, Code Avengers Travel</title>

<h1>Day 2 Activities</h1> <!doctype html> <title>Day 3, Code Avengers Travel</title>

<h1>Day 3 Activities</h1>

2. External CSS stylesheet

2.1. external stylesheets

<!doctype html> <title>Plan, Code Avengers Travel</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css"> <h1>Plan</h1> <!doctype html> <title>Day 1, Code Avengers Travel</title> <h1>Day 1 Activities</h1> <!doctype html> <title>Day 2, Code Avengers Travel</title> <h1>Day 2 Activities</h1> <!doctype html> <title>Day 3, Code Avengers Travel</title> <h1>Day 3 Activities</h1> body { background‐color: lightGreen; }

2.2. heading style

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); body { background‐color: lightGreen; } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; }

2.3. background image

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif; text‐align: center; } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; }

12/16/2016

2/62

2.4. text style

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine);

body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; }

h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; text‐shadow: 1px 1px 2px white; }

a { font‐size: 18px; text‐decoration: none; }

2.5. external stylesheet link





3. Audio and video

3.1. audio controls





<audio></audio>

3.2. audio source

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <audio controls> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

3.3. autoplay and loop attributes

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <audio autoplay controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

12/16/2016

3/62

3.4. iframe element





<br> <iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>

<br> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

3.5. Wikipedia iframe





<br> <iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe> <br> <iframe width="320" frameborder="0" src="http://en.wikipedia.org/wiki/New_Zealand?printable=yes"></iframe>

<br> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

iframe { background‐color: white; }

4. Comments in HTML & CSS code

4.1. HTML comments

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; <!‐‐ This music sounds like an adventure movie ‐‐> } <br> <iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe> <br> <iframe width="320" frameborder="0" src="http://en.wikipedia.org/wiki/New_Zealand?printable=yes"></iframe> <br> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> iframe { background‐color: white; }

12/16/2016

4/62

4.2. comment out code





<br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐>

<!‐‐<br> <iframe width="320" frameborder="0" src="http://en.wikipedia.org/wiki/New_Zealand?printable=yes"></iframe> <br>‐‐>

<!‐‐ This music sounds like an adventure movie ‐‐> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

4.3. todo comments

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> <iframe width="320" frameborder="0" src="http://en.wikipedia.org/wiki/New_Zealand?printable=yes"></iframe> <br>‐‐> <!‐‐ This music sounds like an adventure movie ‐‐> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

12/16/2016

5/62

4.4. author comments

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐>

body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> }

h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; }



<!‐‐<br> <iframe width="320" frameborder="0" src="http://en.wikipedia.org/wiki/New_Zealand?printable=yes"></iframe> <br>‐‐>

<!‐‐ This music sounds like an adventure movie ‐‐> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

4.5. CSS comments

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> <iframe width="320" frameborder="0" src="http://en.wikipedia.org/wiki/New_Zealand?printable=yes"></iframe> <br>‐‐> <!‐‐ This music sounds like an adventure movie ‐‐> <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

5. Spacing with [[padding]] and [[margin]]

5.1. styled images

<!doctype html> <title>Test page</title> <style> img { border: 4px solid blue; width: 100px; } </style> <img src="/images/daughter10.jpg"> <img src="/images/daughter11.jpg"> <img src="/images/daughter12.jpg"> <img src="/images/daughter13.jpg">

12/16/2016

6/62

5.2. padding and margin

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 8px; margin: 8px; width: 100px; } </style>

<img src="/images/daughter10.jpg"> <img src="/images/daughter11.jpg"> <img src="/images/daughter12.jpg"> <img src="/images/daughter13.jpg">

5.3. padding and margin longhand

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding‐bottom: 4px; padding‐left: 8px; padding‐right: 2px; padding‐top: 0; margin‐bottom: 12px; margin‐left: 6px; margin‐right: 6px; margin‐top: 12px; width: 100px; } </style>


5.4. padding and margin shorthand

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 0 2px 4px 8px; margin: 12px 6px; width: 100px; } </style>


5.5. overriding rules

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 0 2px 4px 8px; padding‐top: 24px; margin: 12px 6px; margin‐top: 24px; width: 100px; } </style>


6. 3 types of HTML elements

6.1. display type

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 0 2px 4px 8px; padding‐top: 24px; width: 100px; } h2, p { border: 3px solid blue; } a, strong { border: 3px solid lime; } </style> <h2>Cute Photos</h2> <img src="/images/daughter10.jpg"> <img src="/images/daughter11.jpg"> <img src="/images/daughter12.jpg"> <img src="/images/daughter13.jpg"> <p><strong>Pictures</strong> from <a href="http://focusstudio.co.nz">FocusStudio</a>

6.2. block elements

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 0 2px 4px 8px; padding‐top: 24px; width: 100px; } h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; } a, strong { border: 3px solid lime; } p { height: 40px; } h2 { width: 120px; } </style> <h2>Cute Photos</h2> <img src="/images/daughter10.jpg"> <img src="/images/daughter11.jpg"> <img src="/images/daughter12.jpg"> <img src="/images/daughter13.jpg"> <p><strong>Pictures</strong> from <a href="http://focusstudio.co.nz">FocusStudio</a>

12/16/2016

7/62

6.3. inline elements

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 0 2px 4px 8px; padding‐top: 24px; width: 100px; }

h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; }

a, strong { border: 3px solid lime; height: 80px; margin‐left: 10px; margin‐right: 10px; padding‐bottom: 20px; padding‐left: 15px; padding‐right: 15px; padding‐top: 20px; width: 80px; }

p { height: 40px; }

h2 { width: 120px; }

</style>

<h2>Cute Photos</h2>


<p><strong>Pictures</strong> from <a href="http://focusstudio.co.nz">FocusStudio</a>

6.4. inline‐block elements

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; padding: 0 2px 4px 8px; padding‐top: 24px; width: 60px; } h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; } a, strong { border: 3px solid lime; height: 80px; margin‐left: 10px; margin‐right: 10px; padding‐bottom: 20px; padding‐left: 15px; padding‐right: 15px; padding‐top: 20px; width: 80px; } p { height: 40px; } h2 { width: 120px; } </style> <h2>Cute Photos</h2> <h2>Cute Photos</h2> <img src="/images/daughter10.jpg"><img src="/images/daughter11.jpg"><img src="/images/daughter12.jpg"><img src="/images/daughter13.jpg"> <p><strong>Pictures</strong> from <a href="http://focusstudio.co.nz">FocusStudio</a>

12/16/2016

8/62

6.5. changing display type

<!doctype html> <title>Test page</title> <style> img { background‐color: red; border: 4px solid blue; display: block; padding: 0 2px 4px 8px; padding‐top: 24px; width: 60px; }

h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; }

a, strong { border: 3px solid lime; height: 80px; margin‐left: 10px; margin‐right: 10px; padding‐bottom: 20px; padding‐left: 15px; padding‐right: 15px; padding‐top: 20px; width: 80px; }

p { height: 40px; }

h2 { display: inline‐block; width: 120px; }

</style>

<h2>Cute Photos</h2> <h2>Cute Photos</h2>

<img src="/images/daughter10.jpg"><img src="/images/daughter11.jpg"><img src="/images/daughter12.jpg"><img src="/images/daughter13.jpg">

<p><strong>Pictures</strong> from <a href="http://focusstudio.co.nz">FocusStudio</a>

7. Make an [[anchor]] look like a button

7.1. button style

<!doctype html> <style> img { background‐color: red; border: 4px solid blue; display: block; padding: 0 2px 4px 8px; padding‐top: 24px; width: 60px; } h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; } a, strong { border: 3px solid lime; height: 80px; margin‐left: 10px; margin‐right: 10px; padding‐bottom: 20px; padding‐left: 15px; padding‐right: 15px; padding‐top: 20px; width: 80px; } p { height: 40px; } h2 { display: inline‐block; width: 120px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br>

12/16/2016

9/62

a { background‐color: lawnGreen; border: 1px solid limeGreen; color: darkGreen; font‐size: 18px; text‐decoration: none; text‐shadow: 0 1px 0 white; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

7.2. button width

<!doctype html> <style> img { background‐color: red; border: 4px solid blue; display: block; padding: 0 2px 4px 8px; padding‐top: 24px; width: 60px; } h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; } a, strong { border: 3px solid lime; height: 80px; margin‐left: 10px; margin‐right: 10px; padding‐bottom: 20px; padding‐left: 15px; padding‐right: 15px; padding‐top: 20px; width: 80px; } p { height: 40px; } h2 { display: inline‐block; width: 120px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } h1 { background‐color: red; color: dimGray; font‐family: 'BenchNine', sans‐serif; font‐size: 25px; text‐shadow: 1px 1px 2px white; width: 200px; }

12/16/2016

10/62

a { background‐color: lawnGreen; border: 1px solid limeGreen; color: darkGreen; font‐size: 18px; text‐decoration: none; text‐shadow: 0 1px 0 white; width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

7.3. block elements


12/16/2016

11/62

a { background‐color: lawnGreen; border: 1px solid limeGreen; border‐radius: 5px; color: darkGreen; display: block; font‐size: 18px; text‐decoration: none; text‐shadow: 0 1px 0 white; width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

7.4. increase the button heights


12/16/2016

12/62

a { background‐color: lawnGreen; border: 1px solid limeGreen; border‐radius: 5px; box‐shadow: 0 1px 1px lightGreen, inset 0 1px 0 honeyDew; color: darkGreen; display: block; font‐size: 18px; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 white; width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

7.5. horizontally center buttons

<!doctype html> <style> img { background‐color: red; border: 4px solid blue; display: block; padding: 0 2px 4px 8px; padding‐top: 24px; width: 60px; } h2, p { border: 3px solid blue; margin‐top: 0; padding: 10px; } a, strong { border: 3px solid lime; height: 80px; margin‐left: 10px; margin‐right: 10px; padding‐bottom: 20px; padding‐left: 15px; padding‐right: 15px; padding‐top: 20px; width: 80px; } p { height: 40px; } h2 { display: inline‐block; width: 120px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <a href="plan.html">Plan</a> <a href="day1.html">Day 1</a> <a href="day2.html">Day 2</a> <a href="day3.html">Day 3</a> background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: lawnGreen;

12/16/2016

13/62

border: 1px solid limeGreen; border‐radius: 5px; box‐shadow: 0 1px 1px lightGreen, inset 0 1px 0 honeyDew; color: darkGreen; display: block; font‐size: 18px;

a { background‐color: lawnGreen; border: 1px solid limeGreen; border‐radius: 5px; box‐shadow: 0 1px 1px lightGreen, inset 0 1px 0 honeyDew; color: darkGreen; display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 white; width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

8. Use [[colorTable2|RGB color]] values

8.1. RGB colors

<!doctype html> <title>RGB Color Test</title>

<style> body { background‐color: rgb(0, 0, 255); color: rgb(255, 255, 255); } </style>

<h1>RGB Color Test</h1>

8.2. RGB color tool




8.3. RGB color practice




8.4. semi-transparent colors

<!doctype html> <title>RGB Color Test</title> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> <h1>RGB Color Test</h1>

12/16/2016

14/62

8.5. choose your colors

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); }

h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐>





<!‐‐<br>

a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

9. Use new CSS3 properties with browserprefixes

9.1. user‐select

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

12/16/2016

15/62

9.2. user‐select

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); }

h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐>

‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; ‐o‐user‐select: none; user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐>





<!‐‐<br>


9.3. article element

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article>

12/16/2016

16/62

<h2>Haggas Honking Holes</h2> <p>This is Waitomo’s most concentrated Action Adventure. Feel like Indiana Jones in a washing machine. <p>Do a series of abseils, rock climbs, crawling and cruising as you explore this fabulous cave. <h2>Lost World Tour</h2> <p>Abseil (rappel) 100m slowly into the Lost World, secured by your guide who abseils alongside. After the approximately 30 minute descent, you embark on your journey back to the surface though another spectacular dry cavern. <p>The abseil is at least twice the height of any other cave at Waitomo and the beauty of this iconic cavern is unsurpassed. <p>Descend slowly turning in the void as the mist filtered light gives unreal qualities to the strange plants and formations.

</article>

article { text‐align: left; }

h2 { font‐size: 18px; margin‐top: 0; }

9.4. column‐count

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Tongariro Crossing and hot pools in Taupo ‐‐> <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article>

12/16/2016

17/62

<h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits.

</article>

<article>

<h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2> <p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge.

</article>

article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; }

h2 { margin‐top: 0; font‐size: 18px; }

9.5. linear‐gradient

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐image: ‐webkit‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐moz‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐o‐linear‐gradient(left, lightGreen, yellow); background‐image: linear‐gradient(to right, lightGreen, yellow); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px;

12/16/2016

18/62

} <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

<article>


</article>

<article>


</article>



10. Use [[gradient]] color fills

10.1. linear gradient

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐image: ‐webkit‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐moz‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐o‐linear‐gradient(left, lightGreen, yellow); background‐image: linear‐gradient(to right, lightGreen, yellow); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(bottom, green, yellow); background‐image: ‐moz‐linear‐gradient(bottom, green, yellow); background‐image: ‐o‐linear‐gradient(bottom, green, yellow); background‐image: linear‐gradient(to top, green, yellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240);

12/16/2016

19/62

color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

<article>


</article>

<article>


</article>



10.2. multi-colored gradients

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐image: ‐webkit‐linear‐gradient(red, orange, yellow, green, blue); background‐image: ‐moz‐linear‐gradient(red, orange, yellow, green, blue); background‐image: ‐o‐linear‐gradient(red, orange, yellow, green, blue); background‐image: linear‐gradient(red, orange, yellow, green, blue); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240);

12/16/2016

20/62

color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

<article>


</article>

<article>


</article>



10.3. background‐attachment

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(honeydew, lightGreen); background‐image: ‐moz‐linear‐gradient(honeydew, lightGreen); background‐image: ‐o‐linear‐gradient(honeydew, lightGreen); background‐image: linear‐gradient(honeydew, lightGreen); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0);

12/16/2016

21/62

display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio>

<article>


</article>

<article>


</article>



10.4. diagonal gradients

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, honeydew, lightGreen); background‐image: ‐moz‐linear‐gradient(right top, honeydew, lightGreen); background‐image: ‐o‐linear‐gradient(right top, honeydew, lightGreen); background‐image: linear‐gradient(to left bottom, honeydew, lightGreen); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐>

12/16/2016

22/62

<!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐>

<!‐‐<br>


<article>


</article>

<article>


</article>



10.5. semi-transparent gradients

<!doctype html> <style> body { background‐color: rgb(255, 160, 122); color: rgb(0, 128, 128); } h1 { background‐color: rgba(255, 0, 0, .25); border: 1px solid rgba(255, 0, 0, 1); border‐radius: 4px; padding: 8px; } </style> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐moz‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐o‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: linear‐gradient(to left bottom, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen,

12/16/2016

23/62

greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐>

<!‐‐<br>


<article>


</article>

<article>


</article>



11. Use validation to check the HTMLcorrectness

11.1. HTML validation

<!doctype html> <title>Validation lesson</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>HTML Validators</h1> <p>Validators are free tools that check your code follows the W3C rules.


<!doctype html> <title>Validation lesson</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>HTML Validators</h1> <p>Validators are free tools that check your code follows the W3C rules. <h2>How to validate?</h2> <p>Use the official HTML5 validator at <a href="https://html5.validator.nu">html5.validator.nu</a> <p>This <a href="https://validator.w3.org">W3C validator</a> can be used to check code from all HTML versions. For HTML5 validation it uses <a href="https://html5.validator.nu">html5.validator.nu</a>


<!doctype html> <title>Validation lesson</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>HTML Validators</h1> <p>Validators are free tools that check your code follows the W3C rules. <h2>How to validate?</h2> <p>Use the official HTML5 validator at <a href="https://html5.validator.nu">html5.validator.nu</a> <p>This <a href="https://validator.w3.org">W3C validator</a> can be used to check code from all HTML versions. For HTML5 validation it uses <a href="https://html5.validator.nu">html5.validator.nu</a> <h2>Why validate?</h2> <ul> <li>Helps you find and fix bugs <li>Helps your page work well in all browsers <li>Makes maintenance easier <li>Helps teach good practices <li>Is a sign of professionalism </ul>


<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> </body> </html>

12/16/2016

24/62


<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html>

12. Use the {{figure}} tag

12.1. Google maps

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐image: ‐webkit‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐moz‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐o‐linear‐gradient(left, lightGreen, yellow); background‐image: linear‐gradient(to right, lightGreen, yellow); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article> <h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the

12/16/2016

25/62

volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits.

</article>

<article>


</article>


h2 { margin‐top: 0; font‐size: 18px; } <iframe width="320" height="240" src="https://maps.google.com/maps?ie=UTF8&q=waitomo+adventures&fb=1&hq=waitomo+adventures&cid=0,0,13834141062254148857&hnear=&t=h&ll=‐38.266085,175.12825&spn=0.023586,0.027466&z=14&output=embed"></iframe>

12.2. image and video


12/16/2016

26/62


</article>

<article>


</article>


h2 { margin‐top: 0; font‐size: 18px; } <iframe width="320" height="240" src="https://maps.google.com/maps?ie=UTF8&q=waitomo+adventures&fb=1&hq=waitomo+adventures&cid=0,0,13834141062254148857&hnear=&t=h&ll=‐38.266085,175.12825&spn=0.023586,0.027466&z=14&output=embed"></iframe> <iframe width="320" height="240" src="http://www.youtube.com/embed/QjFSkzxc5Tc"></iframe> <img width="320" alt="Lady in haggas honking holes" src="http://www.waitomo.co.nz/pics/3660,3,1,6,4,0/haggas‐honking‐holes‐waitomo‐adventure‐centre.jpeg">

12.3. figure and figcaption


12/16/2016

27/62


</article>

<article>


</article>


h2 { margin‐top: 0; font‐size: 18px; } <figure> <iframe width="320" height="240" src="https://maps.google.com/maps?ie=UTF8&q=waitomo+adventures&fb=1&hq=waitomo+adventures&cid=0,0,13834141062254148857&hnear=&t=h&ll=‐38.266085,175.12825&spn=0.023586,0.027466&z=14&output=embed"></iframe> <figcaption>Waitomo Adventure Center Map</figcaption> </figure>

<figure> <iframe width="320" height="240" src="http://www.youtube.com/embed/QjFSkzxc5Tc"></iframe> <figcaption>Waitomo’s most concentrated Action Adventure</figcaption> </figure>

<figure> <img width="320" alt="Lady in haggas honking holes" src="http://www.waitomo.co.nz/pics/3660,3,1,6,4,0/haggas‐honking‐holes‐waitomo‐adventure‐centre.jpeg"> <figcaption>Prepare to get wet!</figcaption> </figure>

12.4. figure style

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> border: none; } figure { border‐bottom: 1px gray dotted; border‐top: 1px gray dotted; color: gray; margin: 10px 5px; padding: 5px 0; text‐align: center; }

12/16/2016

28/62

12.5. day 2 and day 3

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐image: ‐webkit‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐moz‐linear‐gradient(left, lightGreen, yellow); background‐image: ‐o‐linear‐gradient(left, lightGreen, yellow); background‐image: linear‐gradient(to right, lightGreen, yellow);

<!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐>

‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐>





<!‐‐<br>


<article>

<h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the

volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits. </article> <article> <h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2> <p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge. </article> article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; } h2 { margin‐top: 0; font‐size: 18px; }<figure> <iframe width="320" height="240" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=tongariro+alpine+crossing&aq=&sll=‐39.179046,175.57045&sspn=0.459351,0.617294&t=h&ie=UTF8&hq=&hnear=Tongariro+Alpine+Crossing,+Tongariro+National+Park+4691,+New+Zealand&ll=‐39.123668,175.705032&spn=0.459727,0.617294&z=11&iwloc=A&output=embed"></iframe> <figcaption>Togariro National Park</figcaption> </figure> <figure> <iframe width="320" height="180" src="http://www.youtube.com/embed/IJ0WXByLobY"></iframe> <figcaption>Tongariro Alpine Crossing Video</figcaption> </figure> <figure> <iframe width="320" height="240" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=rotorua+185+Fairy+Springs+Rd,+Fairy+Springs,+Rotorua+3015,+New+Zealand&aq=&sll=‐38.062149,176.351166&sspn=0.933122,1.234589&t=h&ie=UTF8&hq=&hnear=185+Fairy+Springs+Rd,+Fairy+Springs,+Rotorua+3015,+New+Zealand&ll=‐38.10854,176.222437&spn=0.233171,0.308647&z=12&output=embed"></iframe> <figcaption>Skyline Rotorua Map</figcaption> </figure> <figure> <iframe width=320 height="180" src="http://www.youtube.com/embed/_KCEsQHXxe0?list=PL9A4B2DEF85584700"></iframe> <figcaption>Skyline Rotorua Luge</figcaption> </figure>

13. Add {{meta}} tags

12/16/2016

29/62

13.1. meta viewport

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta name="viewport" content="width=device‐width">

<meta name="viewport" content="width=device‐width">




/*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐moz‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐o‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: linear‐gradient(to left bottom, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png);




h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow);

color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; }


a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br>

<!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article> <h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits. </article> <article> <h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2> <p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge. </article> article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; } h2 { margin‐top: 0; font‐size: 18px; }

12/16/2016

30/62

13.2. other meta tags

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta name="viewport" content="width=device‐width"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island">












a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen,

greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article> <h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits. </article> <article> <h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2> <p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge. </article> article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; } h2 { margin‐top: 0; font‐size: 18px; }

12/16/2016

31/62

13.3. description and keywords

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta name="viewport" content="width=device‐width"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island">










color: dimGray; font‐family: 'BenchNine', sans‐serif;

<!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article> <h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits. </article> <article> <h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2> <p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge. </article>

12/16/2016

32/62



13.4. robot meta tags

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta name="robots" content="noindex,nofollow"> <meta name="viewport" content="width=device‐width"> <meta name="robots" content="nofollow"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐moz‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐o‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: linear‐gradient(to left bottom, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow);

12/16/2016

33/62



a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐>

<!‐‐<br>


<article>


</article>

<article>


</article> article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; } h2 { margin‐top: 0; font‐size: 18px; }

12/16/2016

34/62

13.5. meta charset

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta name="robots" content="noindex,nofollow">

<meta name="viewport" content="width=device‐width"> <meta name="robots" content="nofollow"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island">









h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow);

background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article> <h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits. </article> <article> <h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2>

12/16/2016

35/62

<p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge.

</article>



14. Create a [[table]]

14.1. table element

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Header 1<th>Header 2 <tr><td>Data 1<td>Data 2 <tr><td>Data 3<td>Data 4 </table>

table { border: 1px solid red; }

td, th { border: 1px solid blue; }

14.2. table rows and header

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr><td>0800 <tr><td>0900 <tr><td>1000 <tr><td>1100 <tr><td>1200 <tr><td>1300 <tr><td>1400 <tr><td>1500 <tr><td>1600 <tr><td>1700 <tr><td>1800 <tr><td>1900 <tr><td>2000 <tr><td>2100 </table>

12/16/2016

36/62

14.3. table data

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr><td>0800 <tr><td>0900 <tr><td>1000<td>Haggas Honking Holes <tr><td>1100 <tr><td>1200 <tr><td>1300 <tr><td>1400<td>Lunch <tr><td>1500<td>Lost World Tour <tr><td>1600 <tr><td>1700 <tr><td>1800 <tr><td>1900<td>Dinner <tr><td>2000 <tr><td>2100 </table>

14.4. rowspan attribute

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr><td>0800<td>Travel to Waitomo <tr><td>0900<td>Free time <tr><td>1000<td rowspan="4">Haggas Honking Holes <tr><td>1100 <tr><td>1200 <tr><td>1300 <tr><td>1400<td>Lunch <tr><td>1500<td rowspan="4">Lost World Tour <tr><td>1600 <tr><td>1700 <tr><td>1800 <tr><td>1900<td>Dinner <tr><td>2000<td rowspan="2">Travel to Tongariro <tr><td>2100 </table>

12/16/2016

37/62

14.5. colspan attribute

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr> <td>0800 <td>Travel to Waitomo <td rowspan="10">Tongariro Alpine Crossing <td>Huka falls and bungee jump <tr> <td>0900 <td>Free time <td>Travel to Rotorua <tr> <td>1000 <td rowspan="4">Haggas Honking Holes <td rowspan="3">Redwood Forest <tr><td>1100 <tr><td>1200 <tr><td>1300<td>Lunch <tr> <td>1400 <td>Lunch <td rowspan="2">Mud pools and geysers <tr><td>1500<td rowspan="4">Lost World Tour <tr><td>1600<td rowspan="3">Gondola and luge <tr><td>1700 <tr><td>1800<td>Travel to Taupo <tr><td>1900<td colspan="3">Dinner <tr> <td>2000 <td rowspan="2">Travel to Tongariro <td rowspan="2">Hot pools <td rowspan="2">Travel to Airport <tr><td>2100 </table>

15. Style a [[table]]

15.1. border‐collapse property

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta name="robots" content="noindex,nofollow"> <meta name="viewport" content="width=device‐width"> <meta name="robots" content="nofollow"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐moz‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐o‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: linear‐gradient(to left bottom, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow);

12/16/2016

38/62

background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow);




<!‐‐<br>


<article>


</article>

<article>

<h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2>

<p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge. </article> article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; } h2 { margin‐top: 0; font‐size: 18px; }table { border‐collapse: collapse; } td, th { border: 1px solid rgb(191, 187, 128); padding: 3px; }

12/16/2016

39/62

15.2. class attribute and selector

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta name="robots" content="noindex,nofollow">

<meta name="viewport" content="width=device‐width"> <meta name="robots" content="nofollow"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island">









h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow);

background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg"> <source src="/audio/background1.mp3" type="audio/mpeg"> </audio> <article> <h2>Tongariro Crossing</h2> <p>The Tongariro Alpine Crossing is one of New Zealand's most spectacular tramping tracks and regarded by many as one of the top 10 single day tramps in the world. <p>The trek features unique landforms, including the volcanic peaks of Tongariro and Ngauruhoe which features as Mt Doom in the Lord of the Rings Trilogy. <h2>Taupo Hot Pools</h2> <p>Relax and soothe your tired aching muscles in warm mineral pools set amongst beautiful landscaped resort surroundings. <p>Taupo is one of New Zealand’s most active thermal regions. For more than a century, people have flocked there to partake in its famous relaxation and medicinal benefits. </article> <article> <h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2>

12/16/2016

40/62

<p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge.

</article>


h2 { margin‐top: 0; font‐size: 18px; }<table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr> <td>0800 <td>Travel to Waitomo <td class="activity" rowspan="10">Tongariro Alpine Crossing <td>Huka falls and bungee jump <tr> <td>0900 <td>Free time <td>Travel to Rotorua <tr> <td>1000 <td rowspan="4">Haggas Honking Holes <td rowspan="3">Redwood Forest <tr><td>1100 <tr><td>1200 <tr><td>1300<td>Lunch <tr> <td>1400 <td>Lunch <td rowspan="2">Mud pools and geysers <tr><td>1500<td rowspan="4">Lost World Tour <tr><td>1600<td rowspan="3">Gondola and luge <tr><td>1700 <tr><td>1800<td>Travel to Taupo <tr><td>1900<td colspan="3">Dinner <tr> <td>2000 <td rowspan="2">Travel to Tongariro <td rowspan="2">Hot pools <td rowspan="2">Travel to Airport <tr><td>2100 </table>

.activity { background‐color: rgb(242, 255, 145); }

15.3. activity class

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr> <td>0800 <td>Travel to Waitomo <td class="activity" rowspan="10">Tongariro Alpine Crossing <td class="activity">Huka falls and bungee jump <tr> <td>0900 <td>Free time <td>Travel to Rotorua <tr> <td>1000 <td class="activity" rowspan="4">Haggas Honking Holes <td class="activity" rowspan="3">Redwood Forest <tr><td>1100 <tr><td>1200 <tr><td>1300<td>Lunch <tr> <td>1400 <td>Lunch <td class="activity" rowspan="2">Mud pools and geysers <tr><td>1500<td class="activity" rowspan="4">Lost World Tour <tr><td>1600<td class="activity" rowspan="3">Gondola and luge <tr><td>1700 <tr><td>1800<td>Travel to Taupo <tr><td>1900<td colspan="3">Dinner <tr> <td>2000 <td rowspan="2">Travel to Tongariro <td class="activity" rowspan="2">Hot pools <td rowspan="2">Travel to Airport <tr><td>2100 </table> table { background‐color: rgb(30, 38, 12); border‐collapse: collapse; color: rgb(191, 187, 128); } td, th { border: 1px solid rgb(191, 187, 128); padding: 3px; } .activity { background‐color: rgb(242, 255, 145); color: rgb(0, 0, 0); }

12/16/2016

41/62

15.4. other classes

<!doctype html> <html> <head> <meta charset="utf‐8"> <link rel="stylesheet" href="/css/profile1.css"> <title>About Code Avengers</title> </head> <body> <h1>Code Avengers</h1> <h2>Our Mission</h2> <p>Our mission is to create fun and effective computer programming and web development courses. <h2>Our Team</h2> <p>Meet Sargent Mike, Ninja Nel, Beast, Electra, Ryandroid and Ice Man <br> <img src="/images/profile1.png" alt="Mike" width="150"> <img src="/images/profile2.png" alt="Nellie" width="150"> <img src="/images/profile3.png" alt="Richard" width="150"> <img src="/images/profile8.png" alt="Jenna" width="150"> <img src="/images/profile11.png" alt="Ryan" width="150"> <img src="/images/profile7.png" alt="Adam" width="150"> </body> </html> <table> <tr><th>Time<th>Day 1<th>Day 2<th>Day 3 <tr> <td>0800 <td class="other">Travel to Waitomo <td class="activity" rowspan="10">Tongariro Alpine Crossing <td class="activity">Huka falls and bungee jump <tr> <td>0900 <td class="free">Free time <td class="other">Travel to Rotorua <tr> <td>1000 <td class="activity" rowspan="4">Haggas Honking Holes <td class="activity" rowspan="3">Redwood Forest <tr><td>1100 <tr><td>1200 <tr><td>1300<td class="eat">Lunch <tr> <td>1400 <td class="eat">Lunch <td class="activity" rowspan="2">Mud pools and geysers <tr><td>1500<td class="activity" rowspan="4">Lost World Tour <tr><td>1600<td class="activity" rowspan="3">Gondola and luge <tr><td>1700 <tr><td>1800<td class="other">Travel to Taupo <tr><td>1900<td class="eat" colspan="3">Dinner <tr> <td>2000 <td class="other" rowspan="2">Travel to Tongariro <td class="activity" rowspan="2">Hot pools <td class="other" rowspan="2">Travel to Airport <tr><td>2100 </table>

.eat,

.free,

.other { background‐color: rgb(255, 255, 255); }

15.5. table border

<!doctype html> @import url(http://fonts.googleapis.com/css?family=BenchNine); <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta name="robots" content="noindex,nofollow"> <meta name="viewport" content="width=device‐width"> <meta name="robots" content="nofollow"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐moz‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐o‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: linear‐gradient(to left bottom, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow);

12/16/2016

42/62

background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow);




<!‐‐<br>


<article>


</article>

<article>

<h2>Redwood Forest</h2> <p>Mountain biking: 90km of master crafted trails with an unbeatable blend of riding surfaces, topography and scenery, with something for all levels of rider. <p>Orienteering: a compass is not required ‐ just a map, some clues and good observation skills! <h2>Gondola and Luge</h2>

<p>Jump on board an 8 seater Gondola cabin and experience Rotorua’s most spectacular views! <p>Then select from one of the three exciting trails and take off downhill through twists and turns on the part go‐cart, part toboggan Luge. </article> article { ‐webkit‐column‐count: 2; ‐moz‐column‐count: 2; column‐count: 2; text‐align: left; } h2 { margin‐top: 0; font‐size: 18px; }table { background‐color: rgb(30, 38, 12); border: 3px solid rgb(191, 187, 128); border‐collapse: collapse; color: rgb(191, 187, 128); } td, th { border: 1px solid rgb(191, 187, 128); padding: 3px; } .activity { background‐color: rgb(242, 255, 145); color: rgb(0, 0, 0); } .eat, .free, .other { background‐color: rgb(255, 255, 255); }

16. Learn about class selectors

16.1. table review

<style> table { border: 2px solid rgb(0, 0, 255); height: 300px; text‐align: center; width: 300px; } </style> <!doctype html> <title>Checker Board</title> <h1>Checker Board</h1> <table> <tr><td>1<td>2<td>3 <tr><td>4<td>5<td>6 <tr><td>7<td>8<td>9 </table>

12/16/2016

43/62

16.2. even class

<style> table { background‐color: rgb(200, 0, 0); border: 2px solid rgb(0,0,255); border‐collapse: collapse; height: 300px; text‐align: center; width: 300px; }

.even { background‐color: rgb(0,0,0); color: rgb(255, 255, 255); } </style> <!doctype html> <title>Checker Board</title> <h1>Checker Board</h1>

<table> <tr><td>1<td class="even">2<td>3 <tr><td class="even">4<td>5<td class="even">6 <tr><td>7<td class="even">8<td>9 </table>

16.3. class names

<style> table { background‐color: rgb(200, 0, 0); border: 2px solid rgb(0,0,255); border‐collapse: collapse; font‐size: 24px; height: 300px; text‐align: center; width: 300px; }

.even { background‐color: rgb(0,0,0); color: rgb(255, 255, 255); }

.multiple‐of‐3 { font‐size: 48px; } </style> <!doctype html> <title>Checker Board</title> <h1>Checker Board</h1>

<table> <tr><td>1<td class="even">2<td class="multiple‐of‐3">3 <tr><td class="even">4<td>5<td class="even multiple‐of‐3">6 <tr><td>7<td class="even">8<td class="multiple‐of‐3">9 </table>

16.4. css rule priority

<style> table { background‐color: rgb(200, 0, 0); border: 2px solid rgb(0,0,255); border‐collapse: collapse; font‐size: 24px; height: 300px; text‐align: center; width: 300px; } .even { background‐color: rgb(0,0,0); color: rgb(255, 255, 255); font‐size: 10px; } .multiple‐of‐3 { font‐size: 48px; } </style> <!doctype html> <title>Checker Board</title> <h1>Checker Board</h1> <table> <tr><td>1<td class="even">2<td class="multiple‐of‐3">3 <tr><td class="even">4<td>5<td class="even multiple‐of‐3">6 <tr><td>7<td class="even">8<td class="multiple‐of‐3">9 </table>

16.5. CSS rules with multiple classes

<style> table { background‐color: rgb(200, 0, 0); border: 2px solid rgb(0,0,255); border‐collapse: collapse; font‐size: 24px; height: 300px; text‐align: center; width: 300px; } .even { background‐color: rgb(0,0,0); color: rgb(255, 255, 255); font‐size: 10px; } .multiple‐of‐3 { font‐size: 48px; } td { height: 100px; width: 100px; } .even.multiple‐of‐3 { font‐size: 64px; font‐weight: bold; } </style> <!doctype html> <title>Checker Board</title> <h1>Checker Board</h1> <table> <tr><td>1<td class="even">2<td class="multiple‐of‐3">3 <tr><td class="even">4<td>5<td class="even multiple‐of‐3">6 <tr><td>7<td class="even">8<td class="multiple‐of‐3">9 </table>

17. Learn about descendant selectors

12/16/2016

44/62

17.1. selectors review

<style> .water { background‐color: rgb(224, 255, 255); } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1>

<h2>Vehicles</h2>

<ol> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol>

17.2. list selectors

<style> .water { background‐color: rgb(224, 255, 255); }

ol { background‐color: rgb(255, 192, 203); }

li { background‐color: rgb(255, 255, 224); } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1>

<h2>Vehicles</h2>

<ol> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol>

17.3. selectors with multiple classes

<style> .water { background‐color: rgb(224, 255, 255); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <ul> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ul>

12/16/2016

45/62

17.4. selectors with multiple elements.

<style> .water { background‐color: rgb(224, 255, 255); }


li { background‐color: rgb(255, 255, 224); }

ul { background‐color: rgb(211, 211, 211); }

ul li { background‐color: rgb(210, 180, 140); }

.land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1>

<h2>Vehicles</h2>

<ol> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2>

<ul> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ul>

17.5. descendant selectors with classes

<style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol>

18. Create a [[header]] and [[footer]]

12/16/2016

46/62

18.1. header and section

<!doctype html> <style> .vehicle .water { background‐color: rgb(224, 255, 255); }

.animal .land { background‐color: rgb(144, 238, 144); }




.land.water { text‐decoration: underline; } </style> <section> <header> @import url(http://fo </header> nts.googleapis.com/css?family=BenchNine); <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta charset="utf‐8"> <meta name="robots" content="noindex,nofollow"> <meta name="viewport" content="width=device‐width"> <meta name="robots" content="nofollow"> <meta name="author" content="Adam"> <meta name="description" content="Rotorua attractions and Matamata Hobbiton"> <meta name="keywords" content="Rotorua, Hobbiton"> <meta name="description" content="Tongariro alpine crossing and Taupo hot pools"> <footer>Created by Electra</footer> <meta name="keywords" content="Tongariro alpine crossing, Taupo hot pools"> <meta name="description" content="Visit to Waitomo Caves"> <meta name="keywords" content="Waitomo, caves"> <meta name="description" content="3 day plan for NZ adventure holiay"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="description" content="3 day adventure holiday in New Zealand"> <meta name="keywords" content="New Zealand, adventure"> <meta name="author" content="Adam"> <meta name="author" content="Adam"> <meta name="geo.country" content="NZ"> <meta name="geo.placename" content="Central North Island"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> <meta name="viewport" content="width=device‐width"> /*Adam: [email protected] */ /*TODO: Add style to make the links look like buttons */ <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Mud pools, gondala and luge in Rotorua ‐‐> <!‐‐ Adam: [email protected] ‐‐> background‐attachment: fixed; background‐image: ‐webkit‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: ‐moz‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)),

url(/images/textures/light1.png); background‐image: ‐o‐linear‐gradient(right top, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); background‐image: linear‐gradient(to left bottom, rgba(240, 255, 240, .25), rgba(144, 238, 144, .75)), url(/images/textures/light1.png); <!‐‐ Adam: [email protected] ‐‐> <!‐‐ Haggis Honking Holes and Lost World Tour at Waitomo caves ‐‐> ‐webkit‐user‐select: none; ‐moz‐user‐select: none; ‐ms‐user‐select: none; <!‐‐ Adam: [email protected] ‐‐> <!‐‐ TODO: add table with daily schedule ‐‐> <!‐‐ Adam: [email protected] ‐‐> body { background‐color: lightGreen; background‐image: url('/images/textures/light1a.png'); font‐family: Verdana, sans‐serif ; text‐align: center; <!‐‐ TODO: make the links look cooler ‐‐> } h1 { background‐image: ‐webkit‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(lawnGreen, greenYellow); background‐image: linear‐gradient(lawnGreen, greenYellow); color: dimGray; font‐family: 'BenchNine', sans‐serif; <!‐‐ TODO: unhide the video and article ‐‐> font‐size: 25px; text‐shadow: 1px 1px 2px white; } a { font‐size: 18px; text‐decoration: none; } a:hover { background‐image: ‐webkit‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐moz‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: ‐o‐linear‐gradient(bottom, lawnGreen, greenYellow); background‐image: linear‐gradient(to top, lawnGreen, greenYellow); } <br> <!‐‐ This video is a Lord of the Rings style promo of NZ ‐‐> <!‐‐<iframe width="320" height="160" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/64qx95Ckrwc"></iframe>‐‐> <!‐‐<br> a { background‐color: rgb(124, 252, 0); border: 1px solid rgb(50, 205, 50); border‐radius: 5px; box‐shadow: 0 1px 1px rgb(144, 238, 144), inset 0 1px 0 rgb(240, 255, 240); color: rgb(0, 100, 0); display: block; font‐size: 18px; margin: 10px auto; padding: 10px; text‐decoration: none; text‐shadow: 0 1px 0 rgb(255, 255, 255); width: 250px; } <audio controls loop> <source src="/audio/background1.ogg" type="audio/ogg">

12/16/2016

47/62

<source src="/audio/background1.mp3" type="audio/mpeg"> </audio> </section>

<article>


</article>

<article>


</article>



18.2. fixed position

<style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol> footer, header, section { padding: 5px; position: fixed; } footer, header { background‐color: rgb(120, 255, 120); }

12/16/2016

48/62

18.3. fixed position footer

<style> .vehicle .water { background‐color: rgb(224, 255, 255); }






<h2>Vehicles</h2>

<ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol>

<h2>Animals</h2>

<ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol>

footer, header, section { padding: 5px; position: fixed; }

footer, header { background‐color: rgb(120, 255, 120); }

footer { bottom: 0; left: 0; right: 0; }

18.4. fixed position header and section

<style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol> footer, header, section { padding: 5px; position: fixed; } footer, header { background‐color: rgb(120, 255, 120); } footer { bottom: 0; left: 0; right: 0; } header { left: 0; right: 0; top: 0; } section { bottom: 30px; left: 0; right: 0; top: 50px; }

12/16/2016

49/62

18.5. combining css rules

<style> .vehicle .water { background‐color: rgb(224, 255, 255); }






<h2>Vehicles</h2>

<ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol>

<h2>Animals</h2>

<ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol>

footer, header, section { left: 0; padding: 5px; position: fixed; right: 0; }

footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); }

footer { bottom: 0; }

header { top: 0; }

section { bottom: 30px; top: 50px; }

19. Create a navigation bar

19.1. navigation element

<!doctype html> <style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <nav> <!doctyp </nav> e html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck <nav> <a href="plan.html">Plan</a> <a href="day1.html">Day 1</a> <a href="day2.html">Day 2</a> <a href="day3.html">Day 3</a> </nav> </ol> <h2>Animals</h2> <ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol> footer, header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } footer { bottom: 0; } header { top: 0; }

12/16/2016

50/62

section { bottom: 30px; top: 50px; }

19.2. header style

<style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <ol class="animal"> <li class="land">dog <li class="air">eagle <li class="land water">frog <li class="land water">seal <li class="water">shark <li class="water">whale </ol> footer, header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } footer { bottom: 0; } header { top: 0; } section { bottom: 30px; top: 50px; } header a { display: inline‐block; font‐size: 14px; margin: 0;

12/16/2016

51/62

width: 50px; }

19.3. navigation buttons

<style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> <li class="land water">seal <li class="water">shark <li class="water">whale </ol> footer, header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } footer { bottom: 0; } header { top: 0; } section { bottom: 30px; top: 50px; } header a { display: inline‐block; font‐size: 14px; margin: 0; width: 50px; }

12/16/2016

52/62

header nav { display: inline‐block; vertical‐align: top; }

19.4. header and footer opacity

<style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <!doctype html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> <li class="land water">seal <li class="water">shark <li class="water">whale </ol> footer, header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } opacity: 0.7; footer { bottom: 0; } header { top: 0; } section { bottom: 30px; top: 50px; } header a { display: inline‐block; font‐size: 14px; margin: 0; width: 50px; }

12/16/2016

53/62

header nav { display: inline‐block; vertical‐align: top; }

header:hover { opacity: 1; }

19.5. header style

<!doctype html> <style> .vehicle .water { background‐color: rgb(224, 255, 255); } .animal .land { background‐color: rgb(144, 238, 144); } ol { background‐color: rgb(255, 192, 203); } li { background‐color: rgb(255, 255, 224); } ul { background‐color: rgb(211, 211, 211); } .land.water { text‐decoration: underline; } </style> <section> <!docty </section> pe html> <title>Descendant selectors</title> <h1>Descendant selectors</h1> <h2>Vehicles</h2> <ol class="vehicle"> <li class="air">airplane <section> <section> <section> <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> <li class="land water">seal <li class="water">shark <li class="water">whale </ol> nav a { header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } opacity: 0.7; footer { bottom: 0; } header { top: 0; } section { bottom: 30px; top: 50px;

12/16/2016

54/62

} header a { display: inline‐block; font‐size: 14px; margin: 0; width: 50px; } header nav { display: inline‐block; vertical‐align: top; } header:hover { opacity: 1; } </section> </section> </section> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header>

<footer>Created by Electra</footer>

<header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header>


<header> <a href="index.html"> overflow: auto; <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header>




20. Style your pages for printing

20.1. print media queries


12/16/2016

55/62









@media print { h1 { color: red; } }

20.2. screen media queries


12/16/2016

56/62









@media screen { h1 { color: red; } section { position: static; } footer, header { display: none;

} }

12/16/2016

57/62

20.3. print versus screen






.land.water { text‐decoration: underline; } </style> <section> <!docty </section> pe html> <title>Descendant selectors</title> <h1>Descendant selectors</h1>

<h2>Vehicles</h2>

<ol class="vehicle"> <li class="air">airplane <section> <section> <section> <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> <li class="land water">seal <li class="water">shark <li class="water">whale </ol> nav a { header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } opacity: 0.7; footer { bottom: 0; } header { top: 0; } section { bottom: 30px; top: 50px;

} header a { display: inline‐block; font‐size: 14px; margin: 0; width: 50px; } header nav { display: inline‐block; vertical‐align: top; } header:hover { opacity: 1; } </section> </section> </section> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> <header> <a href="index.html"> overflow: auto; <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> @media screen { section { position: static; } audio, footer, header { display: none; } article { ‐webkit‐column‐count: 1;

12/16/2016

58/62

‐moz‐column‐count: 1; column‐count: 1; } }

20.4. hide videos from print


12/16/2016

59/62





<header> <figure class="video"> overflow: auto; <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <figure class="video"> </nav> </header>




@media screen { section { position: static; } audio, footer, header, .video { display: none; } article {

‐webkit‐column‐count: 1; ‐moz‐column‐count: 1; column‐count: 1; } }

12/16/2016

60/62

20.5. change to print media query






.land.water { text‐decoration: underline; } </style> <section> <!docty </section> pe html> <title>Descendant selectors</title> <h1>Descendant selectors</h1>

<h2>Vehicles</h2>

<ol class="vehicle"> <li class="air">airplane <section> <section> <section> <li class="land">bicycle <li class="water">canoe <li class="land water">hovercraft <li class="water">jetboat <li class="land">truck </ol> <h2>Animals</h2> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> <li class="land water">seal <li class="water">shark <li class="water">whale </ol> nav a { header, section { left: 0; padding: 5px; position: fixed; right: 0; } footer, header { background‐color: rgba(20, 204, 51, 0.7); border: 2px solid rgb(61, 153, 77); } opacity: 0.7; footer { bottom: 0; } header { top: 0; } section { bottom: 30px; top: 50px;

} header a { display: inline‐block; font‐size: 14px; margin: 0; width: 50px; } header nav { display: inline‐block; vertical‐align: top; } header:hover { opacity: 1; } </section> </section> </section> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> <header> <a href="index.html"> overflow: auto; <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> <header> <a href="index.html"> <img src="/images/caLogo.png" alt="CA logo" title="Code Avengers"> </a> <nav> <a href="plan.html">Plan</a><a href="day1.html">Day 1</a><a href="day2.html">Day 2</a><a href="day3.html">Day 3</a> </nav> </header> <footer>Created by Electra</footer> @media print { section { position: static; } audio, footer, header, .video { display: none; } article {

12/16/2016

61/62

‐webkit‐column‐count: 1; ‐moz‐column‐count: 1; column‐count: 1; } }

12/16/2016

62/62

Documents

HTML/CSS 2 Answers 1. Intro to level 2 HTML5/CSS3 · Intro to level 2 HTML5/CSS3 1.1. doctype and title