HTML5 tutorial BEVEZETÉS:

Átírás

1 HTML5 tutorial Készítette: Cyber Zero Web: Msn: Skype: cyberzero_cz Fb: BEVEZETÉS: A HTML 5 egy új html szabvány. Az előző verzió 1999-ben született, de az óta a web sokat változott. Célja egy új eszközfüggetlen html, amihez kevesebb külső plugin szükséges (pl.: Flash) és jobb a hibakezelése. A html5 megalkotása folyamatban lévő munka, így még nem hivatalos szabvány, de már a fontosabb böngészők támogatnak belőle elemeket és API-kat, folyamatosan vezetik be az új funkciókat. Tartalmaz új elemeket és tulajdonságokat, teljes CSS3 támogatással rendelkezik, van benne videó- és audiólejátszás amihez nem kell külső bővítmény, 2D/3D-s grafikai felület, helyi adattárolás, helyi fájl hozzáférés, helyi sql adatbázis, alkalmazás gyorsítótár, XHTMLHttpRequest 2, és webalkalmazások készítésére is alkalmas. Tartalmaz új szemantikus elemeket, mint például a fejléc, lábléc, menük, cikkek jelölésére. Új űrlap elemekkel bővítették ki. CSS3-ban új selectorok, új tulajdonságok, animációk, 2D/3D-s transzformációk, lekerekített sarkok, árnyékhatások, letölthető karakterkészletek segítik a html5 kinézetének kényelmesebb alakíthatóságát. Nem csak hozzáadtak, hanem el is távolítottak belőle felesleges elemeket: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> A html5 doctype részéből csak 1 van, és sokkal egyszerűbb, mint az eddigi. <!DOCTYPE html> A html5 dokumentumok minimális tartalma a következő: <!DOCTYPE html> <html> <head> <title>a dokumentum címe</title> </head> <body> A dokumentum tartalma... </body> </html>

2 Hozzáadott elemek (30): <article> <aside> <audio> <bdi> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <track> <video> <wbr> a cikk, egy független, önálló tartalmat jelöl: fórum bejegyzés, blogbejegyzés, egy új sztori, vagy hozzászólás az őt körülvevő tartalomhoz kapcsolódó megjegyzés, amit félre kell helyezni egy hangot lejátszó felület a körülvevő tartalomtól független formázású szöveg jelölése, ami akkor hasznos, ha a felhasználó által generált beágyazandó tartalom ismeretlen, például egy arab szöveg egy grafikai tároló, amire szkriptek segítségével (pl.: javascript) rajzolhatunk egy helyi menü vagy eszköztár egy menüpontja lehet, egy szöveg, ami meghatároz egy parancsot (pl.: javascript) egy előre definiált lista, ami egy input mezőbe való kattintáskor, az alapértelmezett választási lehetőségek legördülő listájaként jelenik meg egy lenyitható widget, ha a felhasználó rákkatint, akkor lenyílik belőle a tartalom, vagy visszazáródik egy külső alkalmazás, vagy interaktív tartalom (pl.: flash) tároló konténere egy felirat, ami képaláírásként szolgál egy képhez illusztrációk, diagramok, fotók, kód listák tároló konténere, ez tartalmazza a figcaption képaláírást is egy lábléc szakasz, amely tartalmazhatja a dokumentum szerzőjét, a szerzői jogi információkat, linkeket a felhasználási feltételekhez, elérhetőségeket egy fejléc szakasz, a bevezető tartalomnak, navigációs linkeknek a h1-h6 címsor elemek egy csoportját tartalmazhatja egy kulcspár generátor mező egy form-ban, ahol a privát kulcsot helyben tárolják, a publikus kulcsot pedig a szerver küldi szövegkiemelő, besárgázza a szöveg hátterét, mintha kihúztuk volna egy szövegkiemelővel egy ismert skálán, egy mért eredmény megjelenítésére szolgál grafikusan, ez egy állapotot mutat, folyamat ábrázolására a progress szolgál egy blokk a navigációs linkek számára, a fogyatékkal élőket segíti akik például képernyőolvasót használnak egy számítás eredményének a megjelenítését szolgáló szöveg egy folyamat előrehaladását ábrázolhatjuk vele, például egy letöltés, statikus megjelenítésre a meter szolgál az rp mutatja meg a kiejtést, ahol a ruby nem támogatott az rt mutatja meg a kiejtést, ahol a ruby támogatott a ruby megjegyzést használhatjuk a kelet-ázsiai karakterek kiejtésének megmutatására egy szakaszt határoz meg a dokumentumban, például egy fejezetet az audió vagy videó elemeknek a source-okkal több forrásfájl is megadható a details elemek címét adja meg, ami mindig látható, még ha a details tartalma el is van rejtve egy időpont (24 órás formátum) vagy egy dátum (Gergely naptár) adható meg vele, ismeri az időzóna eltolódást audió vagy videó elemhez lehet vele hozzáadni feliratfájlt, ami a média lejátszása alatt megjelenít feliratot, vagy dalszöveget egy videót lejátszó felület ha egy szó túl hosszú, vagy tartunk tőle, hogy a böngésző rossz helyen töri meg a szöveget, akkor ez jelöli az opcionális sortörést egy szóban A bdi-t a Firefox és a Chrome támogatja csak. A command-ot csak az Internet Explorer. A datalistet csak a Firefox és az Opera. A details-t csak a Chrome. A keygen-t az Internet Explorer-en kívül minden. A progress-t a Firefox, az Opera és a Chrome. A summary-t csak a Chrome. A time-t és a track-et jelenleg egyik böngésző sem támogatja. A wbr-t az Internet Explorer-en kívül minden böngésző támogat.

3 Eltávolított elemek (12): <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> mozaikszavak rövidítésének meghatározására volt használható, az abbr-t kell használni helyette applet-ek beágyazására használták, az object-et kell használni helyette az alapértelmezett betűtípust határozta meg, CSS formázást kell használni helyette nagyobb szöveget határozott meg, CSS formázást kell használni helyette középre igazította a szöveget és a tartalmat, CSS formázást kell használni helyette egy könyvtár listát határozott meg, ul-t kell használni helyette a betűtípust határozta meg, CSS formázást kell használni helyette egy keret egy keretes szerkezetű oldalban, negatív hatása van egy oldal használhatóságára több keretet szervezett egybe, negatív hatása van egy oldal használhatóságára egy szöveget jelenített meg, ott ahol nem voltak támogatva a keretek, feleslegessé vált áthúzott szöveget határozott meg, CSS formázást, vagy a del-t kell használni helyette telex szöveget határozott meg, CSS formázást kell használni helyette Átvett elemek (75): <! > <!DOCTYPE> <a> <abbr> <address> <area> <b> <base> <bdo> <blockquote> <body> <br> <button> <caption> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <fieldset> <form> <h1> - <h6> a forráskódba szúrható megjegyzés, ami nem jelenik meg csak a dokumentum forrásában meghatározható vele, hogy melyik html verzióban írták a dokumentumot, mire számítson a böngésző hiperhivatkozás az egyik oldalról a másikra egy rövidítés magyarázataként szolgál (pl.: EU - Európai Unió) a dokumentum vagy a cikk szerzőjének elérhetőségi adatait határozza meg egy kép térképén belül egy kattintható területet határoz meg félkövér szöveget határoz meg egy URL-t határozhat meg a head rész első sorában, minden relatív link ezt az URL-t használja majd megadja a szöveg irányát egy másik oldalról idézet tartalom forrását határozza meg a dokumentum teljes tartalmát foglalja magába a sortörés, egy bekezdésben egy kattintható gomb, aminek a belsejében lehet szöveg, vagy kép egy table elemben a táblázat címe egy mű, könyv, dal, film, TV-show, festmény, szobor címe, a szerző nem tartozik a címhez egy számítógépes kód jelölésére szolgál egy teljes oszlop formázására szolgál csoportba foglalja a col-okat a definíciós listában a definíció kifejtését jelöli egy szöveg, amit töröltek a dokumentumból, áthúzott formázást kap a szöveg meghatároz egy definíciós kifejezést egy szakaszt határoz meg a dokumentumban, amit egységesen szeretnénk formázni egy definíciós listát foglal magában a definíciós listában a definíció nevét jelöli hangsúlyozott szöveg kapcsolódó beviteli mezők összekapcsolása, melyek köré egy dobozt rajzol egy űrlap elemeit foglalja magába címsorok, ahol az 1-es a legfontosabb és a 6-os a legkevésbé fontos

4 <head> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> a head elem tartalmazza a dokumentum címét, a szkripteket, a stílusokat, a meta információkat egy tematikus szünet a tartalomban, ami változást jelöl, vízszintes vonal jelenik meg a helyén a dokumentum gyökerét jelzi, a doctype-on kívül minden ezen belül az elemen belül helyezkedik el dőlt betűvel jelöl egy másfajta hangulatot, egy szakkifejezést, egy gondolatot, vagy egy másik nyelvet egy beágyazott keretet jelöl, amivel a dokumentumba ágyazható egy másik html dokumentum egy képet jelöl a dokumentumban egy beviteli mezőt határoz meg, amibe a felhasználó megadhatja az adatokat egy utólag beszúrt szöveget jelöl a dokumentumba, amit aláhúzással jelöl egy billentyűzet bemenet jelölésére szolgál egy címkét ad az input elemhez, ha rákattintunk, akkor beleugrik a hozzá tartozó input mezőbe ez határozza meg a fieldset, a figure és a details feliratát egy listaelemet határoz meg a rendezett, rendezetlen, és menülistákban egy külső erőforrás és a dokumentum közötti kapcsolatot határozza meg, leggyakrabban stíluslapokhoz használják létrehoz egy kapcsolatot egy kép és a hozzá tartozó kattintható területek között egy menüt határoz meg helyi menük és eszköztárak számára információk a dokumentum leírásáról, kulcsszavairól, szerzőjéről, utolsó módosításáról, ezek nem jelennek meg az oldalon ha nem támogatottak, vagy le vannak tiltva a kliens oldali szkriptek, akkor egy alternatív tartalmat jelenít meg a felhasználóknak objektumokat lehet beágyazni vele a dokumentumba (audió, videó, Java, ActiveX, PDF, Flash) egy rendezett listát foglal magában egy legördülő lista választható opcióinak csoportosítására szolgál egy select vagy datalist elem egy opciója egy bekezdést jelöl a dokumentumban egy objektum paramétereit határozza meg egy előre formázott szöveg, ahol a betűk fix szélesságűek, megtartja a többes szóközöket és tabulátorokat is rövid idézet jelölésére szolgál, az idézet idézőjeleket kap jelöli, hogy a szöveg már nem helytálló, áthúzott formázást kap egy számítógép program kimenetének jelölése egy kliens oldali szkriptet foglal magába (pl.: javascript) egy legördülő listát foglal magába kisebb szövegméretre formáz a szöveg sorában egy résznek a formázására használható egy fontos szöveget jelöl stílus információk határozhatóak meg benne alsó index (pl.: H 2 O) felső index jelölésére szolgál (pl.: 4 2 ) egy táblázatot foglal magában a táblázat tartalmi részének elkülönítésére használható általános cellája a táblázatnak, balra igazított, normál szöveg több soros beviteli mező, fix szélességű betűkkel a táblázat lábléc részének elkülönítésére használható, minden oldalán látszik a nyomtatásnak a fejléc cellái a táblázatnak, középre igazított, és félkövér a táblázat fejléc részének elkülönítésére használható, minden oldalán látszik a nyomtatásnak meghatározza a dokumentum címét, ami a böngésző fejlécében is megjelenik egy sort határoz meg a table táblázatban, tartalmazza a th és td elemeket

5 <u> <ul> <var> aláhúzott szöveget határoz meg egy rendezetlen listát foglal magában egy változó jelölésére szolgál A menu elemet jelenleg egyik böngésző sem támogatja. ÁLTALÁNOS TULAJDONSÁGOK: Olyan tulajdonságok, melyek minden HTML elemnél megtalálhatóak. Hozzáadott általános tulajdonságok (6): contenteditable Meghatározza, hogy egy elem szerkeszthető-e vagy nem. Például, ha egy bekezdés rendelkezik ezzel a tulajdonsággal és belekattintunk, szerkeszthetővé válik. Az értéke true, ha szerkeszthető és false, ha nem szerkeszthető. Ha az értéke inherit, akkor az elem szerkeszthető, ha a szülő eleme szerkeszthető. <p contenteditable="true">változtasd meg ezt a szöveget!</p> contextmenu Egy helyi menüt rendel egy elemhez. Például, ha egy bekezdés rendelkezik ezzel a tulajdonsággal és jobb egérgombbal rákattintanak, akkor a contextmenu tulajdonságnak megadott értékű id-val rendelkező menu elem helyi menü fog megnyílni. <p contextmenu="ezthivdmeg">kattints jobb gombbal ide!</p> <menu id="ezthivdmeg"> <command label="menüpont1" onclick="csinaldmenu1();"> <command label="menüpont2" onclick="csinaldmenu2();"> </menu>

6 draggable Meghatározza, hogy az elem mozgatható vagy nem. A linkek és képek alapértelmezésként mozgathatóak. Ez a tulajdonságot gyakran használják a fogd és vidd műveletekhez. True érték esetén mozgatható, false esetén nem mozgatható, auto esetén pedig a böngésző alapértelmezését használja. <head> <script type="text/javascript"> function adrop(esemeny){esemeny.preventdefault();} function drag(esemeny){esemeny.datatransfer.setdata("text",esemeny.target.id);} function drop(esemeny){ var adat=esemeny.datatransfer.getdata("text"); esemeny.target.appendchild(document.getelementbyid(adat)); esemeny.preventdefault();} </script> </head> <body> <div id="doboz" ondrop="drop(event);" ondragover="adrop(event);"></div><br /> <p id="drag" draggable="true" ondragstart="drag(event);">fogd és vidd!</p> </body> dropzone Meghatározza, hogy az elem mit csináljon, amikor a fogd és vidd módszernél elengedik. Copy érték esetén átmásolódik, move érték esetén áthelyeződik az új helyére, link érték esetén pedig egy link helyeződik el, ami az eredeti tartalomra hivatkozik. hidden Elrejthető vele egy elem. Akkor hasznos, ha az elemet egy feltétel teljesüléséig, például egy jelölőnégyzet bekattintásáig el szeretnénk rejteni a felhasználó elől. <p hidden="hidden">ez egy rejtett bekezdés.</p>

7 spellcheck Egy elem helyesírás- és nyelvhelyesség ellenőrzésének vizsgálatára szolgál. Használható input mezőknél, textarea-nál és szerkeszthető elemeknél. True érték esetén be van kapcsolva, false esetén pedig ki van kapcsolva. <p contenteditable="true" spellcheck="true">a helyesírás ellenőrzés itt be van kapcsolva.</p> A contextmenu-t jelenleg egyik böngésző sem támogatja. A draggable-t a Firefox, a Chrome és a Safari támogatja. A dropzone-t jelenleg egyik böngésző sem támogatja. A hidden-t az Internet Explorer kivételével mindegyik böngésző támogatja. A spellcheck-et az Opera a Chrome és a Safari támogatja. Átvett általános tulajdonságok (8): accesskey Egy gyorsbillentyű állítható be a segítségével, amelyre az elem aktiválódik, fókuszba kerül. Minden html elemen használható, de nem mindegyiken hasznos. Az a, area, button, input, label, legend és textarea elemeken hasznos. Meghívhatók az Alt + accesskey, vagy Shift + Alt + accesskey. <a href=" accesskey="g">nyomd le az ALT-ot és a G-t egyszerre!</a> class Arra használható, hogy osztályokba soroljunk elemeket, így könnyebb egy bizonyos osztályba tartozó elemek kinézetét CSS-el módosítani, vagy javascript-el egy osztály elemein műveletet végezni. Minden html elemen használható, de nem mindegyiken hasznos. Az osztály nevének kis vagy nagybetűvel kell kezdődnie. Ezt követhetik további betűk, számok, kötőjel (-) és aláhúzás jel (_). A html-ben minden érték érzékeny a kis és nagy betűk különbségére. <head> <style type="text/css"> h1.osztaly1 {color: blue;} p.osztaly2 {color: green;} </style> </head> <body> <h1 class="osztaly1">címsor</h1> <p class="osztaly2">ez egy formázott osztály.</p> </body>

8 dir A szöveg irányát határozza meg az elemen belül. Minden html elemen használható, de nem mindegyiken hasznos. Az ltr az alapértelmezett értéke, azaz balról jobbra. Rtl érték esetén a szöveg iránya jobbról balra halad. Auto érték a böngészőre bízza, hogy a tartalom alapján felismerje a szöveg irányát, ez csak akkor ajánlott, ha a szöveg iránya nem ismert. <p dir="rtl">egy szöveg jobbról balra!</p> id Egy egyedi azonosító, ami arra használható, hogy egyes elemeket CSS-el egyedien formázhassunk, vagy javascript-el műveleteket végezhessünk rajta. Minden html elemen használható, de nem mindegyiken hasznos. Az id nevének kis vagy nagybetűvel kell kezdődnie. Ezt követhetik további betűk, számok, kötőjel (-) és aláhúzás jel (_). A html-ben minden érték érzékeny a kis és nagy betűk különbségére. <head> <script type="text/javascript"> function valtoztasd(){ document.getelementbyid("cim").innerhtml="ezt a javascript csinálja id alapján.";} </script> </head> <body> <h1 id="cim">ennek az elemnek az id-ja: cim</h1> <button onclick="valtoztasd();">változtat!</button> </body> lang Az elem tartalmának a nyelvét határozza meg a két betűs ISO formátumú nyelvkód. Minden html elemen használható, de nem mindegyiken hasznos. <p>ez egy bekezdés.</p> <p lang="en"> This is a paragraph.</p>

9 Nyelv Abház Messze Afrikaans Albán Amhara Arab Aragóniai Örmény Asszámi Ajmara Azerbajdzsáni Baskír Baszk Bengali (Bangla) Bhutani Bihari Bislama Breton Bolgár Burmai Belorusz (fehérorosz) Kambodzsai Katalán Cherokee Chewa Kínai (egyszerűsített) Kínai (hagyományos) Korzikai Horvát Cseh Dán Divehi Holland Edo Angol Eszperantó Észt Feröer-szigeteki Perzsa Fidzsi-szigetek Finn Flamand Francia Fríz Fulfulde Galíciai Gael (skót) Gaelic (Manx) Grúz Német Görög Grönland Guarani Gudzsaráti Haiti kreol Hausza Language Abkhazian Afar Afrikaans Albanian Amharic Arabic Aragonese Armenian Assamese Aymara Azerbaijani Bashkir Basque Bengali (Bangla) Bhutani Bihari Bislama Breton Bulgarian Burmese Byelorussian (Belarusian) Cambodian Catalan Cherokee Chewa Chinese (Simplified) Chinese (Traditional) Corsican Croatian Czech Danish Divehi Dutch Edo English Esperanto Estonian Faeroese Farsi Fiji Finnish Flemish French Frisian Fulfulde Galician Gaelic (Scottish) Gaelic (Manx) Georgian German Greek Greenlandic Guarani Gujarati Haitian Creole Hausa ISO kód ab aa af sq am ar an hy as ay az ba eu bn dz bh bi br bg my be km ca zh zh co hr cs da nl en eo et fo fa fj fi fr fy gl gd gv ka de el kl gn gu ht ha

10 Hawaii Héber Hindi Magyar Ibibio Izlandi Ido Igbo Indonéz Interlingua Interlingue Inuktitut Inupiak Ír Olasz Japán Jávai Kannada Kanuri Kasmíri Kazah Kinyarwanda (Ruanda) Kirgiz Kirundi (Rundi) Konkani Koreai Kurd Laoszi Latin Lett (lettországi) Limburgish (Limburger) Lingala Litván Macedóniai Madagaszkári Maláj Malayalam Máltai Maori Marathi Moldvai Mongol Nauru Nepali Norvég Okszitán Oriya Oromo (Afan, Galla) Papiamentu Pastu (Pushto) Lengyel Portugál Pandzsábi Quechua Rhaeto-román Román Orosz Hawaiian Hebrew Hindi Hungarian Ibibio Icelandic Ido Igbo Indonesian Interlingua Interlingue Inuktitut Inupiak Irish Italian Japanese Javanese Kannada Kanuri Kashmiri Kazakh Kinyarwanda (Ruanda) Kirghiz Kirundi (Rundi) Konkani Korean Kurdish Laothian Latin Latvian (Lettish) Limburgish ( Limburger) Lingala Lithuanian Macedonian Malagasy Malay Malayalam Maltese Maori Marathi Moldavian Mongolian Nauru Nepali Norwegian Occitan Oriya Oromo (Afan, Galla) Papiamentu Pashto (Pushto) Polish Portuguese Punjabi Quechua Rhaeto-Romance Romanian Russian he, iw hi hu is io id, in ia ie iu ik ga it ja jv kn ks kk rw ky rn ko ku lo la lv li ln lt mk mg ms ml mt mi mr mo mn na ne no oc or om ps pl pt pa qu rm ro ru

11 Sami (lapp) Szamoai Sangro Szanszkrit Szerb Szerb-horvát Sesotho Setswana Shona Szecsuán Yi Szindi Szingaléz Siswati Szlovák Szlovén Szomáliai Spanyol Szundanéz Szuahéli (Kiswahili) Svéd Szír Tagalog Tádzsik Tamazight Tamil Tatár Telugu Thai Tibeti Tigrinya Tonga Tsonga Török Türkmén Twi Ujgur Ukrán Urdu Üzbég Venda Vietnami Volapük Wallon Walesi Wolof Xhosa Yi Jiddis Joruba Zulu Sami (Lappish) Samoan Sangro Sanskrit Serbian Serbo-Croatian Sesotho Setswana Shona Sichuan Yi Sindhi Sinhalese Siswati Slovak Slovenian Somali Spanish Sundanese Swahili (Kiswahili) Swedish Syriac Tagalog Tajik Tamazight Tamil Tatar Telugu Thai Tibetan Tigrinya Tonga Tsonga Turkish Turkmen Twi Uighur Ukrainian Urdu Uzbek Venda Vietnamese Volapük Wallon Welsh Wolof Xhosa Yi Yiddish Yoruba Zulu sm sg sa sr sh st tn sn ii sd si ss sk sl so es su sw sv tl tg ta tt te th bo ti to ts tr tk tw ug uk ur uz vi vo wa cy wo xh yi, ji yo zu

12 style Egy inline elem stílusát határozhatjuk meg vele. Felülbírál minden globálisan meghatározott stílust, és stíluslapot. Minden html elemen használható, de nem mindegyiken hasznos. Több CSS tulajdonság esetén pontosvesszővel (;) kell elválasztani a tulajdonságokat. <h1 style="color:blue;text-align:center">ezt a stílus tulajdonság formázza.</h1> tabindex Az elemek bejárási sorrendjét határozza meg a tabulátor gomb megnyomása esetén. Minden html elemen használható, de nem mindegyiken hasznos. <a href=" tabindex="2">második</a><br /> <a href=" tabindex="1">első - nyomd meg a TAB-ot!</a><br /> <a href=" tabindex="3">harmadik</a> title Ha az elemre rávisszük az egeret, akkor egy tetszőleges szöveget jelenít meg egy buborék ablakban. Gyakran tippeket és egyéb információkat szoktak megjeleníteni a segítségével. Minden html elemen használható, de nem mindegyiken hasznos. <p title="itt jelenik meg a tip...">mozgasd fölém az egeret!</p> Az accesskey-t az opera kivételével minden böngésző támogat. A tabindex-et a Safari kivételével minden böngésző támogat.

13 ÁLTALÁNOS ESEMÉNY TULAJDONSÁGOK: Olyan események, melyek minden HTML elemnél megtalálhatóak. Hozzáadott ablak esemény tulajdonságok (16): onafterprint onbeforeprint onbeforeonload onerror onhaschange onmessage onoffline ononline onpagehide onpageshow onpopstate onredo onresize onstorage onundo onunload a dokumentum kiíratása után bekövetkező esemény a dokumentum kiíratása előtt bekövetkező esemény a dokumentum letöltődése előtt bekövetkező esemény hiba esetén bekövetkező esemény a dokumentum megváltozásakor bekövetkező esemény üzenet megjelenésekor bekövetkező esemény bekövetkezik, ha a dokumentum nem elérhető állapotba kerül bekövetkezik, ha a dokumentum elérhető állapotba kerül az oldal elrejtésekor bekövetkező esemény az oldal rejtésből láthatóvá válása esetén bekövetkező esemény az ablak történetének változásakor bekövetkező esemény a dokumentum visszavont műveletének újbóli alkalmazása esetén bekövetkező az ablak átméretezése esetén bekövetkező esemény a web storage terület frissülése esetén bekövetkező esemény a dokumentumon visszavonáskor bekövetkező esemény a dokumentum elhagyásakor bekövetkező esemény Átvett ablak esemény tulajdonságok (3): onblur onfocus onload az ablak fókuszának elvesztése esetén bekövetkező esemény az ablak újból fókuszba kerülése esetén bekövetkező esemény a dokumentum betöltődése közben bekövetkező esemény Hozzáadott űrlap esemény tulajdonságok (5): oncontextmenu onformchange onforminput oninput oninvalid a helyi menü felbukkanásakor bekövetkező esemény az űrlapban történő változás bekövetkezésekor történő esemény az űrlapon érték bevitelekor bekövetkező esemény a beviteli mezőbe történő érték bevitelekor bekövetkező esemény nem megengedett érték bevitelekor bekövetkező esemény Eltávolított űrlap esemény tulajdonságok (1): onreset az űrlap újratöltődésekor bekövetkező esemény Átvett űrlap esemény tulajdonságok (5): onblur onchange onfocus onselect onsubmit az elem fókuszának elvesztése esetén bekövetkező esemény az elemben történő változás bekövetkezésekor történő esemény az elem újból fókuszba kerülése esetén bekövetkező esemény az elem kijelölésekor bekövetkező esemény az űrlap elküldésekor bekövetkező esemény Átvett billentyűzet esemény tulajdonságok (3): onkeydown onkeypress onkeyup egy billentyű lenyomásakor bekövetkező esemény egy billentyű lenyomása, majd utána felengedésekor bekövetkező esemény egy billentyű felengedésekor bekövetkező esemény

14 Hozzáadott egér esemény tulajdonságok (9): ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousewheel onscroll az elem vonszolásakor bekövetkező esemény az esemény bekövetkezik, amikor befejezzük a vonszolást az esemény bekövetkezik, ha az elem bekerül az érvényes ejtési helyre az esemény bekövetkezik, ha az elem elhagyja az érvényes ejtési helyet az esemény bekövetkezik, ha az elemet egy érvényes ejtési hely felett vonszoljuk az esemény bekövetkezik, amikor elkezdjük a vonszolást az elem elejtésekor bekövetkező esemény az egér görgőjének görgetésekor bekövetkező esemény az esemény bekövetkezik, amikor az elem görgetősávján görgetünk Átvett egér esemény tulajdonságok (7): onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup az egér kattintásakor bekövetkező esemény az egér dupla kattintásakor bekövetkező esemény az egér gombjának lenyomásakor bekövetkező esemény az egér mutatójának mozgatásakor bekövetkező esemény az egér mutatójának az elemből való kikerülésekor bekövetkező esemény az egér mutatójának az elem fölé kerülésekor bekövetkező esemény az egér gombjának felengedésekor bekövetkező esemény Hozzáadott média esemény tulajdonságok (22): oncanplay oncanplaythrough ondurationchange onemptied onended onerror onloadeddata onloadedmetadata onloadstart onpause onplay onplaying onprogress onratechange onreadystatechange onseeked onseeking onstalled onsuspend ontimeupdate onvolumechange onwaiting bekövetkezik, amikor a média készen áll a lejátszásra, már elég a buffer az esemény bekövetkezik, amikor a fájl lejátszható a végéig anélkül, hogy szünetel a buffer-elés az esemény bekövetkezik, amikor a média hossza megváltozik bekövetkezik, amikor a fájl hirtelen elérthetetlen lesz, például megszakad az esemény bekövetkezik, amikor a média a végére ér, hasznos például a "köszönöm, hogy meghallgattak" üzenetekhez az esemény bekövetkezik, amikor a fájl betöltődése közben hiba történik az esemény bekövetkezik, amikor a média adat betöltődött bekövetkezik, amikor a meta adatok (pl.: méretek, időtartam) betöltődtek bekövetkezik, amikor a fájl elkezd betölteni, mielőtt még bármi is betöltődne bekövetkezik, amikor a média szünetel a felhasználó, vagy a program által az esemény bekövetkezik, amikor a média készen áll a lejátszásra az esemény bekövetkezik, amikor a média ténylegesen elkezdte a lejátszást az esemény bekövetkezik, amikor a böngésző a média adat közzétételének folyamatában van az esemény bekövetkezik, amikor a lejátszás sebessége változik, gyorsítják, vagy lassítják az esemény bekövetkezik, amikor a lejátszó készenléti állapotba kerül az esemény bekövetkezik, amikor a média keresési tulajdonsága már nem igaz és a keresés már véget ért az esemény bekövetkezik, amikor a média keresési tulajdonsága még igaz és a keresés már elkezdődött az esemény bekövetkezik, amikor a böngésző nem tudja beolvasni a média adatot bármilyen okból az esemény bekövetkezik, amikor a média adatok beolvasása bármilyen okból megáll, mielőtt teljesen betöltődött volna az esemény bekövetkezik, amikor a lejátszás pozíciója megváltozik az esemény bekövetkezik, amikor a média hangereje megváltozik, vagy lenémítódik az esemény bekövetkezik, amikor a média megáll, de a várhatóan folytatódik (pl.: buffer-elés)

15 Átvett média esemény tulajdonságok (1): onabort az esemény megszakításakor bekövetkező esemény VIDEÓK: Eddig még nem volt szabványos elem a videók lejátszásához, és bővítményekkel lehetett megoldani. De a különböző böngészőkhöz különböző bővítmények álltak rendelkezésre. Erre alkották meg az új video tag-at. A tag-nek ajánlott mindig megadni a szélességet és magasságot, mert ha ez elmarad, akkor a betöltés közben megváltozik az oldal szerkezete és így széteshet a tartalma. Jelenleg 3 támogatott videó formátum van: az MP4 (MPEG 4 fájlok, H264 videó és AAC audio codec-el), a WebM (WebM fájlok, VP8 videó és Vorbis audio codec-el) és az Ogg (Ogg fájlok, Theora videó és Vorbis audio codec-el). Mindegyik böngésző más és más formátumokat támogat. De felsorolható több forrásállomány is, melyek közül a böngésző azt nyitja meg, amelyiket először felismer az általa támogatott formátumú videó források közül. <video width="320" height="240" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> Leellenőrizhető, hogy a böngésző mennyire támogatja az új video elemet. <head> </head> <body> </body> <script type="text/javascript"> function videotamogatas(){ if(!!document.createelement('video').canplaytype){ var vidteszt=document.createelement("video"); oggtest=vidteszt.canplaytype('video/ogg; codecs="theora, vorbis"'); if (!oggtest){ h264test=vidteszt.canplaytype('video/mp4; codecs="avc1.42e01e, mp4a.40.2"'); if (!h264test){ document.getelementbyid("videotamogataseredmenye").innerhtml="nincs támogatás."} else{ if (h264test=="probably"){ document.getelementbyid("videotamogataseredmenye").innerhtml="teljes támogatás.";} else{ document.getelementbyid("videotamogataseredmenye").innerhtml="bizonyos mértékű támogatás van.";} } } else{ if (oggtest=="probably"){ document.getelementbyid("videotamogataseredmenye").innerhtml="teljes támogatás.";} else{ document.getelementbyid("videotamogataseredmenye").innerhtml="bizonyos mértékű támogatás van.";} } }else{ document.getelementbyid("videotamogataseredmenye").innerhtml="nincs támogatás."; } } </script> <div id="videotamogataseredmenye"><button onclick="videotamogatas()">ellenőrzés</button></div>

16 Hozzáadott választható video tulajdonságok (9): autoplay Automatikusan elindítja a videót, amint lejátszható megállás nélkül. <video autoplay="autoplay"> controls Hozzáad egy vezérlőt a videóhoz, amin megtalálható a lejátszás, szünet, keresés, hangerő, váltás teljes képernyőre, feliratok, sávok. Igény esetén, ha elhagyjuk, írhatunk saját szkriptet is a kezelésére. <video controls="controls"> height A videó magasságát adja meg pixelekben. A forrás állomány az eredeti felbontásban töltődik le, csak a megjelenítésnek a magassága változik. <video height="240"> loop A tulajdonság hatására a videó amint befejeződött, újrakezdődik. <video loop="loop"> muted A videóban az audió kimenetet elnémítja. <video muted =" muted ">

17 poster A tulajdonsággal beállítható egy képre mutató url, amelyik a videó helyett addig látszódik, amíg le nem töltődött illetve a felhasználó el nem indította. Ha nem adjuk meg ezt a tulajdonságot, akkor a videó első képkockája lesz a poszter kép. <video poster="/kepek/elonezet.png"> preload A tulajdonság meghatározza, hogy a videót előre be kell tölteni, közvetlenül az oldal letöltődése után. A preload nem érvényesül autoplay esetén. Három értéke van: a none (amikor nem kell betölteni a videót), a metadata (amikor csak a meta adatok töltődnek be előre) és az auto (amikor az egész videó előre betöltődik). <video preload="none"> src Egy videó fájl esetén az src tulajdonságnak megadott url mutat rá a média fájlra. Ez nem ajánlott, mert jelenleg nincs olyan videó formátum, amelyet mindegyik főbb böngésző támogat. Ajánlatos a source tag-ek segítségével különböző formátumú média fájlokat megadni. <video src="video.ogg"> width A videó szélességét adja meg pixelekben. A forrás állomány az eredeti felbontásban töltődik le, csak a megjelenítésnek a szélessége változik. <video width="320"> A HTML5 video elemet az új böngészők már támogatják. A loop tulajdonságot az Opera még nem támogatja. A muted tulajdonságot az IE és a Safari még nem támogatja. A preload tulajdonságot még az IE nem támogatja.

18 Több forrás állomány esetén a source tag-el hivatkozhatunk az alternatív videó fájlokra. A böngésző ezek közül választ, és lejátsza az első olyan formátumút, amit támogat. <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> Hozzáadott választható source tulajdonságok (3): media A böngésző a tulajdonság segítségével, még betöltés előtt meg tudja állapítani, hogy le tudja-e játszani az adott fájlt, vagy sem, így feleslegesen nem tölti le. A tulajdonság értéke egy kifejezés. A kifejezés három lehetséges operátort fogad el: és (and) nem (not) vagy (,) A kifejezésben továbbá meg lehet határozni az eszközöket amire optimalizálva van a videó: a minden eszköz az alapértelmezett (all) beszéd szintetizátorok (aural) Braille feedback eszközök (braille) kis képernyős, korlátozott sávszélességű kézi eszközök (handheld) projektorok (projection) nyomtatási előnézet módban, nyomtatott oldalak (print) számítógép képernyőn (screen) teletypes és hasonló médiák, amik fixed-pitch karakter hálót használnak (tty) televízió típusú eszközök, amelyek alacsony felbontásúak és korlátozott scrool képességűek (tv) Végül a kifejezésben megadhatóak az eszközökre vonatkozó értékek: a width ami megadja a megjelenítési terület szélességét media="screen and (width:500px)" a height ugyanez csak a magasságra vonatkozóan a device-width megadja célkijelző, vagy papír szélességét a device-height ugyanez csak magasságra vonatkozóan az orientation megadja a tájolást, ami lehet portrait vagy landscape media="all and (orientation: landscape) az aspect-ratio az oldalarány media="screen and (aspect-ratio:16/9) a device-aspect-ratio ugyanez, csak a megcélzott megjelenítési területre vonatkozóan a color meghatározza, hogy hány bites a színmélység media="screen and (color:3)" a color-index megadja a színek számát, amit a kijelző képes kezelni media="screen and (color-index:256)" a monochrome a monokróm megadja a pit/pixel-t a monokróm frame bufferben media="screen and (monochrome:2)" a resolution megadja a pixelsűrűséget dpi-ben vagy DPCM-ben media="print and (resolution:300dpi)"

19 a scan megadja a scanning metódust a tv kijelzőhöz, ami lehet progressive vagy interlace media="tv and (scan:interlace)" a grid megadja, hogy a kimeneti eszköz rács, vagy bitmap. 1-es ha rács, és 0 ha bármi más media="handheld and (grid:1)" Az orientation, a scan és a grid értékek kivételével mindenhol használható a min- és max- előtag Példa: media="screen and (min-width:500px)" <source src="video.ogg" type="video/ogg" media="screen and (min-width:320px)" /> src A tulajdonságnak megadott url mutat rá a média fájlra, amit a source használ. <source src="video.mp4" type="video/mp4" /> type A tulajdonság határozza meg a média forrás MIME típusát. Három gyakori értéke van egy videó esetén a tulajdonságnak: Példa: video/ogg video/mp4 video/webm <source src="video.mp4" type="video/mp4" /> A source elem media tulajdonságát még egyik böngésző sem támogatja.

20 Van egy track tag is a videókhoz, melynek feladata, hogy a videó vagy az audio lejátszása közben megjelenítsen egy feliratot, vagy egy dalszöveget. <track src="subtitles_hu.vtt" kind="subtitles" srclang="hu" label="hungarian" /> Hozzáadott választható track tulajdonságok (5): default A tulajdonság meghatározza, hogy több felirat esetén, melyik az alapértelmezett. Egy videó elemben csak egy alapértelmezett felirat lehet. <track src="subtitles_hu.vtt" default="default" /> kind A tulajdonság meghatározza a sáv típusát. Példa: a captions, ami egy párbeszéd fordítására, vagy egy hangefekt jelölésére szolgál, ezzel segítve a siket felhasználókat a chapters, ami egy fejezet címét határozza meg, ezzel segítve a videóban való navigálást a descriptions, amivel szöveges leírást adhatunk meg a tartalomról, ami előnyös a vak felhasználók számára, ha felolvasót használnak a metadata, amit a felhasználók nem látnak, de a szkriptek használhatják a subtitles egy felirat a videóhoz <track src="captions_hu.vtt" kind="captions " /> label A tulajdonság egy címkét képvisel, amibe a felirathoz írhatunk egy tetszőleges szöveget a részletekről. <track src="subtitles_hu.vtt" label="hungarian" /> src A tulajdonságnak megadott url mutat rá a felirat fájlra, amit a track használ. <track src="subtitles_hu.vtt" />

Több megjelenítése