Felhasználói eszközök
Ez a dokumentum egy előző változata!
Tartalomjegyzék
HTML5
Alap
<!DOCTYPE html> <html> fej törzs </html>
A keresőknek célszerű a html számára egy lang attribútum megadása:
<!DOCTYPE html> <html lang="hu"> fej törzs </html>
Megjegyzések
<!-- megjegyzés szövege -->
Fejrész
Karakterkészlet
<meta charset="utf-8">
Weblap címe
Stíluslap
<link rel="stylesheet" href="style.css">
A link elemmel egy másik állományt kapcsolunk a html fájlunkhoz. A rel attribútum mondja meg, hogy milyen a kapcsolat, illetve a viszony a másik állománnyal. A rel a relation, azaz viszony szóból.
Külső és belső stílusinformáció megadása
- style.css
h1 { color: blue; }
- index.html
<!doctype html> <html lang=hu> <head> <title>Teszt</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <style> h1{ color: red; } </style> </head> <body> <h1>Az oldal címe</h1> </body> </html>
Ha mind a kettő meg van adva, akkor amelyik közelebb van a weblap törzséhez, az felülírja a másikat.
Beépített stíluslap
Törzs
Fejezetcímek
Bekezdés
Videó
<video src="sample3.ogg" width=”300” height=”300”></video>
- Működik Firefox, Opera, Chrome alatt
- IE8 nem jelenít meg semmit
Többféle formátumban felrakva
<video width=”300” height=”300”> <source src="sample3.ogg"> <source src="sample1.mp4"> </video>
Típusok megadása
<video width="….." height="….." controls> <source src="….mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="…...webm" type='video/webm; codecs="vp8, vorbis"'> <source src="…….ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
Hang
<audio controls="controls"> <source src="hangfajl.ogg" type="audio/ogg"> <source src="hangfajl.mp3" type="audio/mpeg"> A böngésződ nem támogatja az audio elemet. </audio>
HTML5 képesség
Hogy megtudd milyen HTML 5 képességeket tud a böngésződ, látogasd meg az alábbi oldalt:
Az oldal pontozza a böngésző képességét. Néhány mérés:
- Chrome (fejlesztői ág) 217 pont
- Safari 5.01 208 pont
- Firefox 4 béta2 189 pont
- Firefox 3.6.11 139 pont
- Opera 10.6 159 pont
- Internet Explorer 9 előzetes 84 pont
A maximális pontszám: 300
Az adatok régiek. A maximális pontszám már 500 és a Chrome éppen 422 pontos (2012-09-22).
Függelék
- index.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body { margin: 2% 10%; } header, nav, footer, article { display:block; background-color: #858500; } header { padding: 2px; } nav { float:left; width:14%; padding: 1%; } article { float:right; width:82%; padding: 1%; } footer { clear:both; text-align: center; } </style> </head> <body> <header> <h1>Egy kis leíárs rólam</h1> </header> <nav> <h2>Menu</h2> <ul> <li><a href=”last.html”>Múlt hét</a></li> <li><a href=”archive.html”>Archívum</a></li> </ul> </nav> <article> <h2>Hétfő</h2> <p>Megittunk valamit, valakivel, valahol</p> </article> <article> <h2>Kedd</h2> <p>Most változatos volt a nap, csak megittunk valamit, valakivel.</p> </article> <footer> <p> <small> Copyright (c) Sallai András, 2013. Kapcsolatteremtéshez látogasd meg az oktatásoldalt. </small></p> </footer> </body> </html>
Linkek
- http://html5.validator.nu (Validator)
