Page 2
Agenda
• 12:00 - HTML Basics• 1:00 - HTML – Lists & Styling• Break • 2:00 CSS Basics• 3:00 Lunch• 3:30 CSS Selectors & Classes• Break• 5:00 HTML5 Page using CSS & HTML
Page 3
<!DOCTYPE html><strong>HTML is the BEST!</strong>
Page 4
See the code with the < >s?
<!DOCTYPE html><strong>HTML is the BEST!</strong>
<That’s HTML!>
Page 5
Your turn
<!DOCTYPE html><strong>HTML is the BEST!</strong>
Page 6
Key Points
1. HTML stands for HyperText Markup Language.
Hypertext means "text with links in it."
Page 7
Key Points
2. A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.
Page 8
Key Points
3. What makes webpages look attractive? That's CSS—Cascading Style Sheets.
“Think of it like skin and makeup that covers the bones of HTML.” - codecademy
Page 9
Basic Components
<!DOCTYPE html>
<html>Add your own text to the page. </html>
Page 10
<!DOCTYPE html>
<html>Add your own text to the page. </html>
Page 11
Tags
Question: So what are the <> open and close brackets?
Answer: Anything inside these brackets is called a Tag
Page 12
Rules for Tags
1. Tags nearly always come in pairs: an open tag and a closing tag
Open: <html>Close: </html>
Page 13
Rules for Tags
2. They’re like parentheses: if you open one, you have to close it.
Page 14
Rules for Tags
3. Tags nest, like the Russian dolls, so you should close them in the same order they lay down.
Page 15
Rules for Tags - Nesting
<first><second>TEXT</second></first>
Page 16
Head & Body
<!DOCTYPE html>
<html>Add your own text to the page. </html>
Page 18
<!DOCTYPE html><html> <head> <title>My Title</title> </head>
</html>
Page 19
Body & Paragraphs
Page 20
<!DOCTYPE html><html> <head> <title>My Title</title> </head>
<body><p> </p><p> </p>
</body></html>
Page 21
Checking In
Everyone has coded in HTML today!
Page 22
New Skills
1. When and why we use HTML2. Set up an HTML file with tags3. Title the webpage (in the <head>)4. Create paragraphs (in the <body> with <p>
tags)
Page 24
<body><h1> </h1><h2> </h2><h3> </h3>
</body>
Page 26
<a>
Same Window (_Self)
Page 27
<a href>
Same Window (_Self)
Page 28
<a href= “http://www.cbc.ca” >
Same Window (_Self)
Page 29
<a href="http://www.cbc.ca">News!
Same Window (_Self)
Page 30
<a href="http://www.cbc.ca">News!</a>
Same Window (_Self)
Page 31
<a href=“http://www.cbc.ca” target=“_blank”>News!</a>
Same Window (_Blank)
Page 32
<a href=“mailto:carolanne.graham@utoronto.ca”>Me</a>
Same Window (_Mailto:)
Page 34
<img src=“image source” />
Page 35
<!DOCTYPE html><html><head>
<title></title></head>
<body> <img src =“Image 1" /> <img src =“Image 2" /></body>
</html>
Page 37
<a><img src=“Your Image"/>
</a>
Page 38
<a href="http://www.cbc.ca/"><img src=“Your Image"/>
</a>
Page 40
<!DOCTYPE html><html> <head> <title>My Title</title> </head>
<body></body>
</html>
Page 41
<h1> Header </h1>
Page 42
<p> Paragraph </p>
Page 43
<img src=“Image” />
Page 44
<a href="http://www.cbc.ca/"><img src=“Link"/>
</a>
Page 45
HTML: Lists & Styling
Page 46
http://www.w3schools.com/
Page 47
Ordered Lists
1. Coffee2. Tea3. Milk
Page 48
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Page 49
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Page 50
Unordered Lists
• Coffee• Tea• Milk
Page 51
Nested Lists
• Coffee• Tea
o Black teao Green tea
• Milk
Page 52
Nested Lists
<ul></ul>
Page 53
Nested Lists
<ul></ul>
Page 54
Nested Lists
<ul> <li></li> <li></li> <li></li></ul>
Page 55
<ul> <li></li> <li>Guacamole</li>
<ul> </ul>
<li></li></ul>
Page 56
<ul> <li></li> <li>Guacamole</li>
<ul><li></li>
<li></li> <li></li>
</ul> <li></li></ul>
Page 58
comments
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
Page 59
font-size
<p style="font-size: 12px">
Page 60
color
<h2 style="color:blue">
Page 61
color + font-size
<h2 style="color: green; font-size:20px">
Page 62
font-family
<h1 style="font-family: Arial">Title</h1>
Page 63
all together
<p style = "font-size:14px; color: orange; font-family: Impact">
Page 64
background-color
<body style="background-color: red">
Page 65
align
<h1 style="text-align:center">
Page 66
bold (strong)
<p><strong> You have Mad Skills</strong></p>
Page 67
emphasis
<p>You have <em>Mad</em> Skills</p>
Page 68
Summary – your new skills!
• Make ordered and unordered lists• Change the color, size and type of font• Add comments to our HTML file• Change the background color• Align text• Bold and italicize text
Page 69
Review
• Make ordered and unordered lists• Change the color, size and type of font• Add comments to our HTML file• Change the background color• Align text• Bold and italicize text
Page 70
image & link
<a href="http://www.cbc.ca/"><img src=“Your Image"/>
</a>
Page 71
lists<ol> <li>Sherlock Holmes</li> <li>Watson</li>
<ul><li>loyal</li>
<li>patient</li> <li>brave</li>
</ul> <li>Mycroft</li></ol>
Page 72
style
<p style="font-size: 12px"><h2 style="color:blue">
<h1 style="font-family: Arial">Title</h1>
Page 73
bold & emphasis
<strong> </strong><em> </em>
Page 74
HTML: Tables, Div & Span
Page 75
tables
<table> </table>
Page 76
<table> <tr></tr></table>
Page 77
<table border="1px"> <tr> <td>Tessa Gray</td> </tr> <tr>
<td>Magnus Bane</td> </tr> <tr> </tr> </table>
Page 78
<table border="1px"> <tr> <td>Tessa Gray</td>
<td>Changling?</td> </tr> <tr>
<td>Magnus Bane</td><td>Warlock</td>
</tr> <tr> </tr> </table>
Page 79
<tbody> </tbody><thead> </thead>
Page 80
<table border="1px"> <tbody> <tr> <td>Tessa Gray</td> <td>Changling?</td> </tr> <tr> <td>Magnus Bane</td> <td>Warlock</td> </tr> </tbody> </table>
Page 81
<table border="1px"> <thead> </thead> <tbody>
</tbody></table>
Tessa Gray Changling?
Magnus Bane Warlock
James Carstairs Nephilium
Page 82
<table border="1px"> <thead> <tr> <th>Character</th> <th>Gift</th> </tr> </thead>
<tbody>
</tbody></table>
Tessa Gray Changling?
Magnus Bane Warlock
James Carstairs Nephilium
Page 83
Name Gift
Tessa Gray Changling?
Magnus Bane Warlock
James Carstairs Nephilium
Page 84
<th colspan="3">3 columns across!</th>
Page 85
<thead> <tr> <th>Infernal Devices</th> </tr> <tr> <th>Character</th> <th>Gift</th> </tr> </thead>
Page 86
<thead> <tr>
<th colspan="2" >Infernal Devices</th></tr><tr> <th>Character</th>
<th>Gift</th></tr>
</thead>
Page 87
style
<th style="font-size:12px; color:red"></th>
Page 88
div(isions)
<div> </div>
Page 89
<html><body>
<h1>Header</h1><div><p> <p><p> <p><p> <p></div>
</body></html>
Page 90
style
<div style="background-color: turquoise">
Page 92
<… ; margin:20px; padding:20px">
Page 93
linking a div tag
<a href="website address"><div>
<p></p></div>
</a>
Page 94
span tags
<span> </span>
Page 95
<span style="color:red">paragraph</span>
Page 96
<span style="font-family: Arial;">paragraph</span>
<span style="font-size:40px;">paragraph</span>
<span style="color:green">paragraph</span>
Page 98
CSS
<style> </style>
Page 99
span { color:blue;}
Page 100
span { color:blue; font-family: verdana;}
Page 101
inline styling vs. css
One is <less> awesome
Page 102
syntax
selector {
property: value;}
Page 103
syntax
Source: http://www.w3schools.com/css/css_syntax.asp
Page 104
h1 { text-align:center; font-size:30px; color: Orange;}
Page 105
span { font-size:40px; background-color: Green; font-style: italic;}
Page 106
comments
<!--I'm an HTML comment!-->
/*I'm a CSS comment!*/
Page 108
h1 { color:red;} h2 { color:purple; font-size:25px;} h3 { font-family:Impact;} p { font-style:italic; color:blue;}
Page 109
hexadecimal colors
h1 { color:#DAA520;}
Page 110
pixels vs. em
p { font-size:2em;}
Page 111
default fonts
h1 { color:#E87D73; font-family:serif;}
Page 112
backup values
p { font-family: Garamond, cursive;}
Page 113
background-color, height & width
div { background-color:#cc0000; height:100px; width:100px;}
Page 114
borderstd { height:50px; width:50px; border:1px dashed blue;} table { border: 1px solid black;
Page 115
styling links
a { color:#cc0000; text-decoration:none;}
Page 116
reviewh1 { font-family: verdana; color:#00FF00;} p { font-size:18px; color:#FFA500;}
Page 118
body { background-color:#C6E2FF;}
Page 119
div { background-color:#C6E2FF;}div li { font-family: Impact;{
Page 121
classes
.fancy { font-family: cursive; color: #0000CD; }
Page 122
ids
#serious { font-family:Courier; color:#CC0000;}
Page 123
Bring it all together – HTML5
Page 124
Specify a language
<html lang="en">
Page 125
Specify your character set
<meta charset="utf-8">
Page 126
Specify a language
<head><meta charset="utf-8"></head>