Ez a dokumentum egy előző változata!
<!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és szövege -->
<meta charset="utf-8">
<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
h1 { color: blue; }
<!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.
<video src="sample3.ogg" width=”300” height=”300”></video>
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>
<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>
<!DOCTYPE html> <html> <head> <style type="text/css"> #div2 { width:70px; height:70px; padding:10px; border:1px solid #aaaaaa; } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="lib/images/notify.png" draggable="true" ondragstart="drag(event)" width="69" height="69"> </body> </html>
Húzd a képet a téglalapra:
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:
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).
<!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>