HTML 5
en introduksjon
Carl Mathisen
HTML 5
en introduksjon
Historie
1999 - 2001
HTML 4
2002 - 2006
XHTML 1.0
2007 - nå
HTML 5
WebKit
Alle disse støtter HTML 5
Hvorfor?
Ingen bruker XHTML 2
Hvorfor HTML 5?
Støtter eksisterende kode
Hvorfor HTML 5?
Fjerner kompleksitet
Hvorfor HTML 5?
Ny funksjonalitet
Hvorfor HTML 5?
Markup
Keep it simple, stupid.
HTML 4.01 doctype
<!DOCTYPE html PUBLIC
“-//W3C//DTD HTML 4.01 //EN”
“http://www.w3.org/TR/html4/strict.dtd”>
Nå
<!DOCTYPE html PUBLIC
“-//W3C//DTD HTML 4.01 //EN”
“http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 metatags
<meta http-equiv=“Content-Type”
content=“text/html; charset=UTF-8”>
HTML 4.01 metatags
<meta http-equiv=“Content-Type”
content=“text/html; charset=UTF-8”>
Nå
<meta charset=“UTF-8”>
HTML 4.01 script-tag
<script type=“text/javascript”
src=“fil.js”></script>
HTML 4.01 script-tag
<script type=“text/javascript”
src=“fil.js”></script>
Nå
<script type=“text/javascript”
src=“fil.js”></script>
HTML 4.01 link-tag
<link rel=“stylesheet” type=“text/css”
href=“fil.css”>
HTML 4.01 link-tag
<link rel=“stylesheet” type=“text/css”
href=“fil.css”>
Nå
<link rel=“stylesheet” type=“text/css”
href=“fil.css”>
Strenge markup-regler
<img src=“bilde.jpg” alt=“Mitt bilde” />
<br />
Strenge markup-regler
<img src=“bilde.jpg” alt=“Mitt bilde” />
<br />
Nå er alt lov
<img src=bilde.jpg>
<br>
frame, frameset, noframes
Ha det bra!
font, big, center, strike
Don’t call us, we’ll call you!
Block-level links
<a href=“/carl”>
<h2>Om Carl</h2>
<p>Trykk for å lese mer om meg</p>
</a>
So far, so good
semantikk
Flunkende ny
Layout-elementer
section? article? aside?
aside
section
section > article
article > section
article > section
Layout-elementer
<div class=“header”>
<h1>Tittel</h1>
</div>
Layout-elementer
<div class=“header”>
<h1>Tittel</h1>
</div>
<header>
<h1>Tittel</h1>
</header>
Layout-elementer
Bruk dem allerede i dag
section, article, header, footer, nav, aside {
display: block;
}
Layout-elementer
html5shiv
<!--[if lt IE 9]>
<script src=“http://
html5shiv.googlecode.svn/trunk/
html5.js”></script>
<![endif]-->
Forms
Plassholder
<input name=“search” placeholder=“Your
name” />
http://diveintohtml5.org/forms.html
Autofokus
<input name=“field” autofocus />
http://diveintohtml5.org/forms.html
Epostadresse
<input name=“field”
type=“email” />
http://diveintohtml5.org/forms.html
Nettadresse
<input name=“field”
type=“url” />
http://diveintohtml5.org/forms.html
Tall
<input name=“field”
type=“number” />
http://diveintohtml5.org/forms.html
Rekkevidde/bredde
<input name=“field” type=“range”
min=“1” max=“10” value=“8” />
http://diveintohtml5.org/forms.html
Dato
<input name=“field” type=“date”/>
<input name=“field” type=“datetime”/>
http://diveintohtml5.org/forms.html
Søkefelt
<input name=“field” type=“search” />
http://diveintohtml5.org/forms.html
Fargevelger
<input name=“field” type=“color” />
http://diveintohtml5.org/forms.html
Forms
Forms
<video> <audio>
Film og lyd
Native musikkavspiller
jPlayer
jQuery med HTML 5 eller Flash
Helt OK!
Men sikkert lurt å ha Flash i bakhånd
SVG/Canvas
jQuery Visualize
37signals Chalk
SVG/Canvas
SVG/Canvas
Raphael
Mye mer
Content editable	

 WebSocket	

Web workers	

Drag and drop	

Geolocation	

Web storage	

Query selector	

Data-attributter	

WebGL
CSS3
rgb
div { color: rgb(255, 0, 0); } /* #f00 */
rgb & opacity
div { color: rgb(255, 0, 0); } /* #f00 */
div { color: rgb(255, 0, 0, 0.5); }
background-size
div { background-position: top left }
background-size
div { background-position: top left }
div { background-size: 30px 60px }
Lineær gradient
div {
background-color: #1a82f7;
background: url(bakgrunn.png);
}
Lineær gradient
div {
background: -moz-gradient(100%,
100%, 90deg, #2f2727, #1a82f7);
}
border-radius
div {
border-radius: 10px;
}
box-shadow
div {
box-shadow: 0 0 10px 10px #000;
}
text-shadow
div {
color: #fff;
text-shadow: 0 2px 4px #000;
}
Opera-logo av kun CSS
Google WebFonts
Testing av fonter
css3please.com
Prefix
Firefox: -moz-box-shadow
Safari: -webkit-box-shadow
Opera: -o-box-shadow
IE: -ms-box-shadow
Standard: box-shadow
http://diveintohtml5.org/forms.html
Eksempler
Eksploderende video
rumpetroll.com
Quake II for HTML 5
apple.com/html5
html5demos.com
Modernizr
Modernizr
if(Modernizr.canvas) {
// her kan vi tegne vektorgrafikk
}
html5readiness.com
diveintohtml5.org
books.alistapart.com
Takk for meg
Twitter: @carlmathisen
www.kamikazemedia.no
Ta kontakt!

HTML 5 - en introduksjon