Html5 intro

Wilfred Nas
Front end developer

anwb, ing, agis, vst-pn, essent, Min. VWS..

wnas.nl
@wnas

Eerst een korte geschiedenisles...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>

<title></title>

<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="UTF-8">

<title>HTML 5</title>
</head>
<body>

<p>foo</p>
</body>
</html>

<div id=header>

<div id=nav>

<ul>

<li><a href=foo.html>foo</a></li>

...

</ul>

</div>

<div class=headers>

<h1>header</h1>

<p>tagline</p>

</div>
</div>

<header>

<nav>

<ul>

<li><a href=foo.html>foo</a></li>

...

</ul>

</nav>

<hgroup>

<h1>header</h1>

<h2>tagline</h2>

</hgroup>
</header>

New
article meter
aside nav
audio output
canvas progress
details section
figcaption summary
figure time
footer video
header
hgroup
mark

Semantiek
Hoe duidelijker, hoe beter je te begrijpen bent.

<header>

<hgroup>

<h1>header</h1>

<h2>tagline</h2>

</hgroup>
</header>
<section>

<article>

<hgroup>

<h1>header</h1>

<h2><time>2011-06-08</time></h2>

</hgroup>

<p>fooooo</p>

<section>

<h1>header</h1>

<p>baaaaaar</p>

<footer>copy</footer>

</section>

<aside>

<time>22.00</time>

</aside>

</article>
</section>

<article>
“Like an article of clothing, not a newspaper article.” (@brucel)

<article>
Iets wat op zich zelf staat.

<article>
ook makkelijk voor cms makers.

Maar wat doen we met
oudere browsers? ( kuch IE )

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{ display:block; }

“wel of geen aanhalingstekens?”

Pragmatisch

Gebruik wat mensen al doen.

class=foo

class=foo bar
class=”foo bar”

use “quotes” and lowercase.

Form elementen
Dingen die je al lang wilde...

// build an input to test for html5 attr.
var i = document.createElement('input');
// see if placeholder is supported
if ( !('placeholder' in i) ) {

//provide placeholder support
}

search
tel time
url datetime-
email local
datetime number
date range
month color
week

autocomplete height and
novalidate width
autofocus list
form min
form overrides max

formaction, step

formenctype, multiple

formmethod, pattern

(regexp)
formnovalidate, placeholder

formtarget required

<input

type=”email”

required>

(alle browsers)

<input

type=”email”

required>

(indien niet ondersteund)

<input

type=”email”

required>

(alle browsers, met javascript)

<input

pattern=”[1-9][0-9]{3}s?[a-zA-Z]{2}”

required>

(http://html5pattern.com/)

<input type=email required>
(stolen slides following)

elm.setCustomValidity("No, that's wrong!");

input::-webkit-validation-bubble-message {
color: #f00;
background: #000;
border: 10px solid #f00;
-webkit-box-shadow: 0 0 0 0;
}
input::-webkit-validation-bubble-arrow {
background: #ff3456;
border-color: orange;
-webkit-box-shadow: 0 0 0 0;
}

(End of stolen slides. Thanks to @robertnyman)

http://wnas.nl/html5-safe-usage-2

http://diveintohtml5.info/video.html

CACHE MANIFEST

style.css
script.js
logo.png

@Fontface
Typografie op het web.

@font-face {
font-family: 'stoppoliceRegular';
src: url('fonts/stop_police-webfont.eot');
src: url('fonts/stop_police-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/stop_police-webfont.woff') format('woff'),
url('fonts/stop_police-webfont.ttf')
format('truetype'),
url('fonts/stop_police-webfont.svg#stoppoliceRegular')
format('svg');
font-weight: normal;
font-style: normal;

}

http://isgeolocationpartofhtml5.com/

navigator.geolocation.getCurrentPosition();

<rect x="0" class="key2" y="17" height="12"
style="fill: #0000ff; fill-opacity: 0.7;
stroke: none; stroke-width: 1px;"
width="12"/>
<text x="17" class="keyText" y="29"
style="fill: #000000; text-anchor:start;
font-size: 10px; font-family:
"Arial", sans-serif; font-weight:
normal;">TV [3]</text>
<rect x="0" class="key3" y="34"
height="12" style="fill-opacity: 0.7; fill:
#00ff00; stroke: none; stroke-width: 1px;"
width="12"/>
<text x="17" class="keyText" y="46"

http://www.drawastickman.com/

http://html5demos.com/

Html5 intro

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Html5 intro (20)

Recently uploaded (20)

Html5 intro

Editor's Notes