Felhasználói eszközök
oktatas:web:html:html5_ujdonsagai
Különbségek
A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
| Előző változat mindkét oldalon Előző változat | |||
|
oktatas:web:html:html5_ujdonsagai [2022/01/30 20:49] admin eltávolítva |
— (aktuális) | ||
|---|---|---|---|
| Sor 1: | Sor 1: | ||
| - | [[:oktatas:web:html|< HTML]] | ||
| - | ====== HTML5 ====== | ||
| - | |||
| - | |||
| - | ===== Alap ===== | ||
| - | |||
| - | <code html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | fej | ||
| - | törzs | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | A keresőknek célszerű a html számára egy lang attribútum megadása: | ||
| - | <code html> | ||
| - | <!DOCTYPE html> | ||
| - | <html lang="hu"> | ||
| - | fej | ||
| - | törzs | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ==== Megjegyzések ==== | ||
| - | |||
| - | <code html> | ||
| - | <!-- megjegyzés szövege --> | ||
| - | </code> | ||
| - | |||
| - | ===== Fejrész ===== | ||
| - | |||
| - | <code html> | ||
| - | <head> | ||
| - | karakterkészlet megadása | ||
| - | weblap címe | ||
| - | külső stíluslap csatolása | ||
| - | beágyazott stílus | ||
| - | </head> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Karakterkészlet ==== | ||
| - | |||
| - | <code html> | ||
| - | <meta charset="utf-8"> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | ==== Weblap címe ==== | ||
| - | |||
| - | <code html> | ||
| - | <title>Weblapcím</title> | ||
| - | </code> | ||
| - | |||
| - | ==== Stíluslap ==== | ||
| - | <code html> | ||
| - | <link rel="stylesheet" href="style.css"> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | 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 | ||
| - | |||
| - | |||
| - | <code css style.css> | ||
| - | h1 { | ||
| - | color: blue; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <code html 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> | ||
| - | </code> | ||
| - | |||
| - | 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 ==== | ||
| - | |||
| - | <code html> | ||
| - | <style> | ||
| - | CSS kód | ||
| - | </style> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== Törzs ===== | ||
| - | |||
| - | |||
| - | ==== Fejezetcímek ==== | ||
| - | |||
| - | <code html> | ||
| - | <h1>Cím</h1> | ||
| - | <h2>Kettes fejezetcím</h2> | ||
| - | ... | ||
| - | <h6>Hatos fejezetcím</h6> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Bekezdés ==== | ||
| - | |||
| - | <code html> | ||
| - | <p>Bekezdés szövege</p> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== Videó ===== | ||
| - | |||
| - | <code html> | ||
| - | <video src="sample3.ogg" width=”300” height=”300”></video> | ||
| - | </code> | ||
| - | |||
| - | * Működik Firefox, Opera, Chrome alatt | ||
| - | * IE8 nem jelenít meg semmit | ||
| - | |||
| - | |||
| - | |||
| - | Többféle formátumban felrakva | ||
| - | <code html> | ||
| - | <video width=”300” height=”300”> | ||
| - | <source src="sample3.ogg"> | ||
| - | <source src="sample1.mp4"> | ||
| - | </video> | ||
| - | </code> | ||
| - | |||
| - | Típusok megadása | ||
| - | <code html> | ||
| - | <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> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <html> | ||
| - | <video width="320" height="240" controls="controls"> | ||
| - | <source src="http://w3schools.com/html/movie.mp4" type="video/mp4"> | ||
| - | <source src="http://w3schools.com/html/movie.ogg" type="video/ogg"> | ||
| - | A böngésződ nem támogatja a vedeo elemet. | ||
| - | </video> | ||
| - | </html> | ||
| - | |||
| - | |||
| - | ===== Hang ===== | ||
| - | |||
| - | <code html> | ||
| - | <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> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <html> | ||
| - | <audio controls="controls"> | ||
| - | <source src="http://w3schools.com/html/horse.ogg" type="audio/ogg"> | ||
| - | <source src="http://w3schools.com/html/horse.mp3" type="audio/mpeg"> | ||
| - | A böngésződ nem támogatja az audio elemet. | ||
| - | </audio> | ||
| - | </html> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== 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: | ||
| - | * http://www.html5test.com | ||
| - | |||
| - | 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 ===== | ||
| - | |||
| - | <code html5 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> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== Linkek ===== | ||
| - | * http://www.tutorialspoint.com/html5/index.htm | ||
| - | * http://www.tutorial.hu/webszerkesztes/html5-css3-osszefoglalo/html5-css3-osszefoglalo-v4.pdf | ||
| - | * http://html5.validator.nu (Validator) | ||
| - | * http://www.whatwg.org/specs/web-apps/current-work/multipage/ | ||
| - | * http://www.w3.org/TR/html5/ | ||
| - | * http://www.w3.org/TR/2dcontext/ | ||
| - | * http://html5test.com/ | ||
| - | * http://detectmybrowser.com/ | ||
| - | * http://diveinto.html5doctor.com/detect.html | ||
| - | * https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills | ||
oktatas/web/html/html5_ujdonsagai.1643572179.txt.gz · Utolsó módosítás: 2022/01/30 20:49 szerkesztette: admin
Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
