Más contenido relacionado La actualidad más candente (20) Similar a Html5 intro (20) Html5 intro17. <!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>
21. <!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>
26. <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>
27. <header>
<nav>
<ul>
<li><a href=foo.html>foo</a></li>
...
</ul>
</nav>
<hgroup>
<h1>header</h1>
<h2>tagline</h2>
</hgroup>
</header>
28. New
article meter
aside nav
audio output
canvas progress
details section
figcaption summary
figure time
footer video
header
hgroup
mark
34. <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>
40. <!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->
41. article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{ display:block; }
55. // 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
}
56. search
tel time
url datetime-
email local
datetime number
date range
month color
week
57. autocomplete height and
novalidate width
autofocus list
form min
form overrides max
formaction, step
formenctype, multiple
formmethod, pattern
(regexp)
formnovalidate, placeholder
formtarget required
77. 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;
}
83. <object
width="357"
height="294">
<param name="movie"
value="http://www.youtube.com/p/69D055611E14B822?
hl=nl_NL&fs=1">
<param name="allowFullScreen" value="true"><param
name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/p/69D055611E14B822?
hl=nl_NL&fs=1" type="application/x-shockwave-flash"
width="357" height="294" allowscriptaccess="always"
allowfullscreen="true">
</object>
87. <video
width="320"
height="240"
controls>
<source
src="movie.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source
src="movie.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source
src="movie.ogv"
type='video/ogg; codecs="theora, vorbis"'>
</video>
95. @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;
}
110. <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" height="480" width="640">
<!--
-->
<!-- Created with SVG::Graph
-->
<!-- Sean Russell
-->
<!-- Based on SVG::TT::Graph for Perl by Leo Lapworth & Stephan Morgan
-->
<!-- //////////////////////////////////////////////////////////////////
-->
<defs>
<filter id="dropshadow" height="1.2" width="1.2">
<feGaussianBlur result="blur" stdDeviation="4"/>
</filter>
</defs>
<!--SVG Background
-->
<rect x="0" class="svgBackground" y="0" height="480" style="fill:#ffffff;" width="640"/>
<text x="320" class="mainTitle" y="16" style="text-anchor: middle; fill: #000000; font-size: 16px; font-family: "Arial", sans-serif; font-weight: normal;">Question 7
</text>
<g transform="translate(543.0 46)">
<rect x="0" class="key1" y="0" height="12" style="fill: #ff0000; fill-opacity: 0.7; stroke: none; stroke-width: 1px;" width="12"/>
<text x="17" class="keyText" y="12" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;">Internet [3]</text>
<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" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;">Newspaper [0]</text>
<rect x="0" class="key4" y="51" height="12" style="fill-opacity: 0.7; fill: #ffcc00; stroke: none; stroke-width: 1px;" width="12"/>
<text x="17" class="keyText" y="63" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;">Magazine [6]</text>
<rect x="0" class="key5" y="68" height="12" style="fill-opacity: 0.7; fill: #00ccff; stroke: none; stroke-width: 1px;" width="12"/>
<text x="17" class="keyText" y="80" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;">Radio
[1]</text>
</g>
<g transform="translate( 112 48 )">
<g>
<path transform="translate( 10 10 )" d="M207.5,207.5 L207.5,0.0 A207.5,207.5 0, 0,1, 413.487091375346 182.48863884702 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/>
<path transform="translate( 10 10 )" d="M207.5,207.5 L413.487091375346,182.48863884702 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/>
<path transform="translate( 10 10 )" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/>
<path transform="translate( 0.649837573145852 13.5460488704254 )" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 111.069941800918 23.7678746769589 Z" filter="url(#dropshadow)" style="fill:
#ccc; stroke: none;"/>
<path transform="translate( 10 10 )" d="M207.5,207.5 L111.069941800918,23.7678746769589 A207.5,207.5 0, 0,1, 207.5 0.0 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/>
</g>
<g>
<path d="M207.5,207.5 L207.5,0.0 A207.5,207.5 0, 0,1, 413.487091375346 182.48863884702 Z" style="fill: #fff; stroke: none;"/>
<path d="M207.5,207.5 L413.487091375346,182.48863884702 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill: #fff; stroke: none;"/>
<path d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill: #fff; stroke: none;"/>
<path transform="translate( -9.35016242685415 3.54604887042536 )" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 111.069941800918 23.7678746769589 Z" style="fill: #fff; stroke: none;"/>
<path d="M207.5,207.5 L111.069941800918,23.7678746769589 A207.5,207.5 0, 0,1, 207.5 0.0 Z" style="fill: #fff; stroke: none;"/>
</g>
<g>
<path class="fill1" d="M207.5,207.5 L207.5,0.0 A207.5,207.5 0, 0,1, 413.487091375346 182.48863884702 Z" style="fill: #ff0000; fill-opacity: 0.7; stroke: none; stroke-width: 1px;"/>
<text x="345.097951584965" class="dataPointLabel" y="52.1840197544965" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000;
text-anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">Internet 23%</text>
<text x="345.097951584965" class="dataPointLabel" y="52.1840197544965" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000;
text-anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;">Internet 23%</text>
<path class="fill2" d="M207.5,207.5 L413.487091375346,182.48863884702 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill: #0000ff; fill-opacity: 0.7; stroke: none; stroke-width: 1px;"/>
<text x="378.269152172934" class="dataPointLabel" y="325.373434946715" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000;
text-anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">TV 23%</text>
<text x="378.269152172934" class="dataPointLabel" y="325.373434946715" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000;
text-anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;">TV 23%</text>
<path class="fill3" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill-opacity: 0.7; fill: #00ff00; stroke: none; stroke-width: 1px;"/>
<path transform="translate( -9.35016242685415 3.54604887042536 )" class="fill4" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 111.069941800918 23.7678746769589 Z" style="fill-opacity: 0.7;
fill: #ffcc00; stroke: none; stroke-width: 1px;"/>
<text x="4.1339672159223" class="dataPointLabel" y="284.626562931752" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000; text-
anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">Magazine 46%</text>
<text x="4.1339672159223" class="dataPointLabel" y="284.626562931752" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000; text-
anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;">Magazine 46%</text>
<path class="fill5" d="M207.5,207.5 L111.069941800918,23.7678746769589 A207.5,207.5 0, 0,1, 207.5 0.0 Z" style="fill-opacity: 0.7; fill: #00ccff; stroke: none; stroke-width: 1px;"/>
<text x="157.841999660332" class="dataPointLabel" y="6.02957288409419" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000;
text-anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">Radio
8%</text>
<text x="157.841999660332" class="dataPointLabel" y="6.02957288409419" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: "Arial", sans-serif; font-weight: normal;; fill: #000000;
text-anchor:middle; font-size: 12px; font-family: "Arial", sans-serif; font-weight: normal;">Radio
8%</text>
</g>
</g>
</svg>
111. <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"
Notas del editor goedemiddag mensen, ik ben Wilfred Nas ik doe front end ontwikkeling. dit doe ik al zo&#x2019;n 15 jaar. eerst als ontwerper en later enkel code...\n \n \n \n sorry\n \n \n \n \n and the working group was shut down.\n \n \n \n \n \n \n \n \n \n is het al af? maakt niet uit, css\n in plaats van:\n kunnen we dit doen.\n het html element is overbodig, als ook het head als de body. Dit was al in html4...\n \n jaja, ook de body tag kun je gebruiken om je document te stylen...\n een hele mooie opbouw van een navigatie element en een header in een html4 document. Toch best wel mooi, niet?\n hier is hetzelfde document, alleen met html5 elementen in plaats van betekenisloze div&#x2019;s...\n We hebben redelijk wat leuke nieuwe elementen...\n \n \n \n \n google houd van html5 en goede, semantisch correcte html. Maakt het makkelijker om zaken te indexeren.\n \n \n En wat je op een andere plaats kunt hergebruiken.\n \n \n \n de beste vinding van IE. conditional comments. Dit stukje moet dus in de head en niet onderin de body...\n css, voor (zover ik weet) oudere browsers... de laatste safari, chrome, opera en firefox doen dit al...\n \n \n \n \n \n \n \n De meest makkelijke manier om een input element te definieren.\n dit wordt, in alle browsers.\n om een zoek veld aan te geven met een &#x2018;placeholder&#x2019;.\n \n \n \n \n \n \n \n \n \n \n \n \n \n opera\n firefox\n webkit\n postcode\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n waarom zou je dit willen?\n \n \n \n meer ruimte, werkt niet op ie6, maar wel met javascript...\n \n \n \n geen javascript, of flash nodig. werkt in ie6...\n \n \n \n \n \n discussie graag.\n \n \n goed voor dynamische data. zeg de verkiezings uitslag...\n \n ook geen data...\n \n \n \n veel data...\n niet voor mensen, wel voor zoek machines...\n \n \n \n \n \n \n