![html5shiv
<!--[if lt IE 9]>
<script src=“http://
html5shiv.googlecode.svn/trunk/
html5.js”></script>
<![endif]-->](https://image.slidesharecdn.com/html5-101117142554-phpapp01/85/HTML-5-en-introduksjon-47-320.jpg)
HTML 5 - en introduksjon
- 1.
- 2.
- 4.
- 5.
- 6.
- 7.
- 8.
- 11.
- 12. Alle disse støtterHTML 5
- 14.
- 15. Ingen bruker XHTML2 Hvorfor HTML 5?
- 16.
- 17.
- 18.
- 19. Markup Keep it simple,stupid.
- 20. HTML 4.01 doctype <!DOCTYPEhtml PUBLIC “-//W3C//DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>
- 21. Nå <!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>
- 22. HTML 4.01 metatags <metahttp-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
- 23. HTML 4.01 metatags <metahttp-equiv=“Content-Type” content=“text/html; charset=UTF-8”> Nå <meta charset=“UTF-8”>
- 24. HTML 4.01 script-tag <scripttype=“text/javascript” src=“fil.js”></script>
- 25. HTML 4.01 script-tag <scripttype=“text/javascript” src=“fil.js”></script> Nå <script type=“text/javascript” src=“fil.js”></script>
- 26. HTML 4.01 link-tag <linkrel=“stylesheet” type=“text/css” href=“fil.css”>
- 27. HTML 4.01 link-tag <linkrel=“stylesheet” type=“text/css” href=“fil.css”> Nå <link rel=“stylesheet” type=“text/css” href=“fil.css”>
- 28. Strenge markup-regler <img src=“bilde.jpg”alt=“Mitt bilde” /> <br />
- 29. Strenge markup-regler <img src=“bilde.jpg”alt=“Mitt bilde” /> <br /> Nå er alt lov <img src=bilde.jpg> <br>
- 30. frame, frameset, noframes Hadet bra!
- 31. font, big, center,strike Don’t call us, we’ll call you!
- 32. Block-level links <a href=“/carl”> <h2>OmCarl</h2> <p>Trykk for å lese mer om meg</p> </a>
- 33. So far, sogood
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. Bruk dem alleredei dag section, article, header, footer, nav, aside { display: block; }
- 46.
- 47. html5shiv <!--[if lt IE9]> <script src=“http:// html5shiv.googlecode.svn/trunk/ html5.js”></script> <![endif]-->
- 48.
- 49. Plassholder <input name=“search” placeholder=“Your name”/> http://diveintohtml5.org/forms.html
- 50. Autofokus <input name=“field” autofocus/> http://diveintohtml5.org/forms.html
- 51.
- 52.
- 53.
- 54. Rekkevidde/bredde <input name=“field” type=“range” min=“1”max=“10” value=“8” /> http://diveintohtml5.org/forms.html
- 55. Dato <input name=“field” type=“date”/> <inputname=“field” type=“datetime”/> http://diveintohtml5.org/forms.html
- 56. Søkefelt <input name=“field” type=“search”/> http://diveintohtml5.org/forms.html
- 57. Fargevelger <input name=“field” type=“color”/> http://diveintohtml5.org/forms.html
- 58.
- 59.
- 60.
- 63. Native musikkavspiller jPlayer jQuery medHTML 5 eller Flash
- 64. Helt OK! Men sikkertlurt å ha Flash i bakhånd
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. Mye mer Content editable WebSocket Web workers Drag and drop Geolocation Web storage Query selector Data-attributter WebGL
- 71.
- 72. rgb div { color:rgb(255, 0, 0); } /* #f00 */
- 73. rgb & opacity div{ color: rgb(255, 0, 0); } /* #f00 */ div { color: rgb(255, 0, 0, 0.5); }
- 74.
- 75. background-size div { background-position:top left } div { background-size: 30px 60px }
- 76. Lineær gradient div { background-color:#1a82f7; background: url(bakgrunn.png); }
- 77. Lineær gradient div { background:-moz-gradient(100%, 100%, 90deg, #2f2727, #1a82f7); }
- 78.
- 79. box-shadow div { box-shadow: 00 10px 10px #000; }
- 80. text-shadow div { color: #fff; text-shadow:0 2px 4px #000; }
- 81.
- 82.
- 83.
- 84.
- 85. 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
- 86.
- 87.
- 88.
- 89. Quake II forHTML 5
- 90.
- 91.
- 92.
- 93. Modernizr if(Modernizr.canvas) { // herkan vi tegne vektorgrafikk }
- 94.
- 95.
- 96.
- 97.
- 98.