HTML5 tutorial BEVEZETÉS:
Méret: px
Mutatás kezdődik a ... oldaltól:

Download "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" />

21 srclang A tulajdonság a felirat nyelvének a két betűs ISO nyelvkódja. Az ISO kódokkal már foglalkoztunk az általános tulajdonságoknál. A subtitles fajtájú feliratoknál kötelező ennek a tulajdonságnak az alkalmazása. <track src="subtitles_hu.vtt" kind="subtitles" srclang="hu"> A track elemet jelenleg egyik főbb böngésző sem támogatja. Ezen a ponton, a videókkal kapcsolatos minden elemet és tulajdonságot elsajátítottunk. Így következzen egy forrás részlet egy általános videó példájára: <video width="320" height="240" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <track src="subtitles_hu.vtt" kind="subtitles" srclang="hu" label="hungarian" default="default" /> <track src="felirat_en.vtt" kind="subtitles" srclang="en" label="english" /> </video> A video elem és a DOM: A DOM, azaz Document Object Model, egy platform- és nyelv-független interfész, amely engedélyezi a programok és script-ek számára, hogy dinamikusan hozzáférjenek és frissíteni tudják a dokumentum tartalmát, szerkezetét és stílusát. A HTML5 DOM-nak vannak olyan metódusai, tulajdonságai és eseményei a video elemhez, melyek segítségével, JavaScript használatával, manipulálni tudjuk a videót. Hozzáadott DOM video metódusok (5): addtexttrack() A metódussal hozzáadhatunk a videóhoz egy új szöveg sávot. canplaytype() A metódussal ellenőrizhető, hogy a böngésző képes-e lejátszani az adott videó típust. A metódus három értéket dobhat vissza: valószínűleg (probably), ha a böngésző valószínűleg támogatja ezt a videó típust talán (maybe), ha lehet, hogy a böngésző támogatja ezt a videó típust üres sztring, ha a böngésző nem támogatja a videó típust

22 Bemeneti paraméterként az alábbiak valamelyikét várja egy video elem esetén: video/ogg video/mp4 video/webm video/ogg; codecs="theora, vorbis" video/mp4; codecs="avc1.4d401e, mp4a.40.2" video/webm; codecs="vp8.0, vorbis" A kodek-es változat esetén akkor tér vissza valószínűleg értékkel, ha a kodek-et is tartalmazza. <p>mp4? <span> <button onclick="tamogatotttipus(event,'video/mp4','avc1.42e01e, mp4a.40.2');" type="button">teszt</button> </span> </p> <p>ogg? <span> <button onclick="tamogatotttipus(event,'video/ogg','theora, vorbis');" type="button">teszt</button> </span> </p> <script type="text/javascript"> function tamogatotttipus(e,vidtype,codtype){ videom=document.createelement('video'); eztamogatott=videom.canplaytype(vidtype+';codecs="'+codtype+'"'); if (eztamogatott==""){eztamogatott="nem";} e.target.parentnode.innerhtml="a válasz: " + eztamogatott;} </script> load() A forrás vagy egyéb beállítás cseréje után újra betölthető vele a videó. <button onclick="forrasvaltas();" type="button">forrás váltás</button><br /> <video id="video" controls="controls" autoplay="autoplay"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> function forrasvaltas(){ document.getelementbyid("mp4_src").src="video2.mp4"; document.getelementbyid("ogg_src").src="video2.ogg"; document.getelementbyid("video").load();} </script>

23 play() A metódus elkezdi lejátszani a jelenlegi videót. <button onclick="videolejatszas();" type="button">play Video</button><br /> <video id="video"> <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> <script type="text/javascript"> var videom=document.getelementbyid("video"); function videolejatszas(){ videom.play();} </script> pause() A metódus szünetelteti az éppen játszott videót. <button onclick="videoszunet();" type="button">szünet</button><br /> <video id="video"> <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> <script type="text/javascript"> var videom=document.getelementbyid("video"); function videoszunet(){videom.pause();} </script> Az addtexttrack metódust jelenleg egyik főbb böngésző sem támogatja. A load metódust a Safari nem támogatja. Hozzáadott DOM video tulajdonságok (29): A videó tulajdonságai közül a videowidth és videoheight azonnal rendelkezésre állnak, a többi tulajdonság azonban csak a videó meta adatainak betöltődése után elérhető. audiotracks Visszatér egy MultipleTrackList objektummal, amely az elérhető audió sávok listáját tartalmazza.

24 autoplay Az automatikus lejátszást állíthatjuk be vele. Két értéke van: ha be van állítva az automatikus lejátszás, akkor igaz (true) ha ki van kapcsolva az automatikus lejátszás, akkor hamis (false) <button onclick="autoplaybe();" type="button">autoplay bekapcsolása</button> <button onclick="autoplayki();" type="button">autoplay kikapcsolása</button> <button onclick="autoplayallapot();" type="button">autoplay állapota</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function autoplaybe(){ videom.autoplay=true; videom.load();} function autoplayki() { videom.autoplay=false; videom.load();} function autoplayallapot(){alert(videom.autoplay);} </script> buffered Visszatér egy TimeRanges objektummal, amely reprezentálja a videó aktuális buffer-elt részét. Egy buffer-elt tartomány, a buffer-elt videó egy időtartománya. Több tartományt kapunk, ha a felhasználó ugrik a videóban. Az objektumnak három tulajdonsága van: a length, a buffer-elt tartományok számát adja meg a videó sávban a start(index), a kiinduló helyzetet adja meg másodperben, a megadott buffer-elt tartományban az end(index), a véghelyzetet adja meg másodpercben, a megadott buffer-elt tarományban <button onclick="buffertartomany();" type="button">buffer-elt tartomány</button><br /> <video id="video" 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> <script type="text/javascript"> videom=document.getelementbyid("video"); function buffertartomany(){ alert("kezdés: " + videom.buffered.start(0) + " Befejezés: " + videom.buffered.end(0));} </script>

25 controller Visszatér egy MediaController objektummal, amely reprezentálja az adott videó média vezérlőjét. controls Meghatározza, hogy a videó vezérlő engedélyezve van, vagy sem. <button onclick="vezelokengedelyez();" type="button">vezérlők engedélyezése</button> <button onclick="vezerloktilt();" type="button">vezérlők tiltása</button> <button onclick="vezerlokallapot();" type="button">vezérlők állapota</button><br /> <video id="video"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function vezelokengedelyez(){ videom.controls=true; videom.load();} function vezerloktilt(){ videom.controls=false; videom.load();} function vezerlokallapot(){alert(videom.controls);} </script> crossorigin Meghatározza a videó CORS beállításait. currentsrc Visszatér az aktuális videó URL-jével. <button onclick="url();" type="button">url</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function url(){alert(videom.currentsrc);} </script>

26 currenttime Meghatározza az aktuális lejátszás pozícióját másodpercben. Ha ezt a beállítást alkalmazzuk, a lejátszás az adott pozícióba ugrik. <button onclick="miapozicio();" type="button">mi a pozíció</button> <button onclick="pozicio5();" type="button">5 másodperchez</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function miapozicio(){alert(videom.currenttime);} function pozicio5(){videom.currenttime=5;} </script> defaultmuted Meghatározza, hogy a videó alapértelmezésből el van-e némítva. Ez a tulajdonság nem az aktuális állapotra vonatkozik, hanem az alapértelmezésre. <button onclick="alapbolnemitott();" type="button">alapértelmezetten némított?</button> <button onclick="legyenalapbolnemitott();" type="button">legyen alapból némított</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function alapbolnemitott(){alert(videom.defaultmuted);} function legyenalapbolnemitott(){ videom.defaultmuted=true; videom.load();} </script>

27 defaultplaybackrate Meghatározza, a videó alapértelmezett lejátszási sebességét. Ez a tulajdonság nem az aktuális állapotra vonatkozik, hanem az alapértelmezésre. Viszonyítási alapként néhány érték: normál sebesség (1.0) fél sebesség(0.5) dupla sebesség (2.0) visszafelé normál sebességgel (-1.0) <button onclick="alapsebesseg();" type="button">mi az alapértelmezett sebesség</button> <button onclick="lasitottalap();" type="button">legyen lassított</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function alapsebesseg(){alert(videom.defaultplaybackrate);} function lasitottalap(){ videom.defaultplaybackrate=0.5; videom.load();} </script> duration Meghatározza az aktuális videó időtartamát másodpercben. <button onclick="hossz();" type="button">videó hossza</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function hossz(){alert(videom.duration);} </script>

28 ended Meghatározza, hogy a videó véget ért, vagy sem. A videó akkor ér véget, amikor a lejátszás pozíciója a végére kerül. <button onclick="vegetert();" type="button">vége van?</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function vegetert(){alert(videom.ended);} </script> error Visszatér egy MediaError objektummal, amely reprezentálja a videó hibájának állapotát. A visszatérési érték egy hibakód: 1 = MEDIA_ERR_ABORTED - megszakítva a felhasználó által 2 = MEDIA_ERR_NETWORK - hiba történt a letöltés során 3 = MEDIA_ERR_DECODE - hiba történt a dekódolás 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - nem támogatott videó <button onclick="hiba();" type="button">hiba állapot</button><br /> <video id="video" controls="controls" autoplay="autoplay"> <source src="nincs.mp4" type="video/mp4" /> <source src="nincs.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function hiba(){alert(videom.error.code);} </script>

29 height Visszatérési értéke a videó elem szélessége. <button onclick="magassag();" type="button">magasság</button><br /> <video id="video" controls="controls" width="640" height="480"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function magassag(){alert(videom.height);} </script> loop Meghatározza, hogy a videó véget érése után újra kell kezdeni a lejátszást. <button onclick="loopbe();" type="button">loop engedélyezése</button> <button onclick="loopki();" type="button">loop letiltása</button> <button onclick="loopallapot();" type="button">loop állapota</button><br /> <video id="video" 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> <script type="text/javascript"> videom=document.getelementbyid("video"); function loopbe(){ videom.loop=true; videom.load();} function loopki(){ videom.loop=false; videom.load();} function loopallapot(){alert(videom.loop);} </script> mediagroup Meghatároz egy videó csoportot. Arra használható, hogy összekapcsoljunk a segítségével több videót.

30 muted Meghatározza, hogy a videó el van némítva, vagy sem. Némítás esetén a hang ki van kapcsolva. <button onclick="nemitasbe();" type="button">némítás be</button> <button onclick="nemitaski();" type="button">némítás ki</button> <button onclick="nemitasallapot();" type="button">némítás állapota</button><br /> <video id="video" 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> <script type="text/javascript"> videom=document.getelementbyid("video"); function nemitasbe(){videom.muted=true;} function nemitaski(){videom.muted=false;} function nemitasallapot(){alert(videom.muted);} </script> networkstate Visszatérési értéke a videó aktuális hálózati állapota. <button onclick="allapot();" type="button">állapot?</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function allapot(){alert(videom.networkstate);} </script>

31 paused Meghatározza, hogy a videó szünetel, vagy sem. <button onclick="szunetel();" type="button">szünetel?</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function szunetel(){alert(videom.paused);} </script> playbackrate Meghatározza a videó aktuális lejátszási sebességét. Viszonyítási alapként néhány érték: normál sebesség (1.0) fél sebesség(0.5) dupla sebesség (2.0) visszafelé normál sebességgel (-1.0) <button onclick="miasebesseg();" type="button">mi a sebesség?</button> <button onclick="lassits();" type="button">lassíts</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function miasebesseg(){alert(videom.playbackrate);} function lassits(){videom.playbackrate=0.5;} </script> played Visszatér egy TimeRanges objektummal, amely reprezentálja a videónak már játszott részeit.

32 preload Meghatározza, hogy a videót be kell-e tölteni az oldal betöltődésekor közvetlenül vagy sem. readystate Meghatározza a videó aktuális állapotát. <button onclick="allapot();" type="button">állapot?</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function allapot(){alert(videom.readystate);} </script> seekable Visszatér egy TimeRanges objektummal, amely reprezentálja a videó kereshető részeit. seeking Visszatér, ha a felhasználó jelenleg mozog, vagy átugrik egy új pozícióra a videóban. src Meghatározza a videó elem forrását. startoffsettime Visszatér egy Date objektummal, amely reprezentálja a jelenlegi idő eltolódást.

33 texttracks Visszatér egy TextTrackList objektummal, amely az elérhető szöveg sávok listáját tartalmazza. videotracks Visszatér egy VideoTrackList objektummal, amely az elérhető videó sávok listáját tartalmazza. volume Meghatározza a hangerejét a videónak. <button onclick="miahangero();" type="button">mi a hangerő?</button> <button onclick="hangero();" type="button">75% hangerő</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function miahangero(){alert(videom.volume);} function hangero(){videom.volume=0.75;} </script> videoheight Visszatérési értéke a videó forrásának eredeti magassága. <button onclick="videomagassag();" type="button">forrás magassága</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function videomagassag(){alert(videom.videoheight);} </script>

34 videowidth Visszatérési értéke a videó forrásának eredeti szélessége. <button onclick="videoszelesseg();" type="button">forrás szélessége</button><br /> <video id="video" controls="controls"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function videoszelesseg(){alert(videom.videowidth);} </script> width Visszatérési értéke a videó elem szélessége. <button onclick="szelesseg();" type="button">szélesség</button><br /> <video id="video" controls="controls" width="640" height="480"> <source id="mp4_src" src="video.mp4" type="video/mp4" /> <source id="ogg_src" src="video.ogg" type="video/ogg" /> A te böngésződ nem támogatja a HTML5 videót. </video> <script type="text/javascript"> videom=document.getelementbyid("video"); function szelesseg(){alert(videom.width);} </script> A defaultmuted és a defaultplaybackrate tulajdonságokat csak a Chrome támogatja. Az error tulajdonságot csak az IE támogatja. A playbackrate tulajdonságot csak a Chrome és a Safari támogatja.

35 Hozzáadott DOM video események (22): abort canplay canplaythrough durationchange emptied ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting az esemény megszakításakor bekövetkező esemény 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 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)

36 Ha nem használunk controls vezérlőt, mert sajátot szeretnénk írni, akkor a fenti tudást felhasználva, egyszerűen megtehetjük. <button onclick="lejatszszunet();">lejátszás/szünet</button><br /> <video id="video" width="420"> <source src="videon.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> <script type="text/javascript"> var videom=document.getelementbyid("video"); function lejatszszunet(){ if (myvideo.paused) myvideo.play(); else myvideo.pause();} </script> AUDIÓK: Eddig még nem volt szabványos elem az audió 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 áltak rendelkezésre. Erre alkották meg az új audio tag-at. Jelenleg 3 támogatott audio formátum van: az mp3, a wav és az ogg. 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ú audió források közül. Az audio elem használata teljes egészében megegyezik a video elemével, ezért nem részletezném. Ugyanazok a tulajdonságok, metódusok és események állnak rendelkezésünkre, mint a video elem esetén. Egyetlen főbb kivétel, hogy az audio elem esetén nem használható a track elem. A video elemmel szemben az audio elemnek, csupán öt választható tulajdonsága van, ám ezek használata megegyezik a video elemnél már megtanult megoldásokkal. Ezek az autoplay, controls, loop, preload és src. A loop elemet az audio-nál minden főbb böngésző támogatja, ellentétben a video elem loop tulajdonságával. A preload tulajdonságot jelenleg az IE és az Opera nem támogatja. A source tag az audio-nál is úgy működik mint a video-nál. A media tulajdonságát jelenleg egyik főbb böngésző sem támogatja. A videó és audió elemek DOM metódusai, tulajdonságai és eseményei sorra megegyeznek. <audio controls="controls"> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mp3" /> A te böngésződ nem támogatja a HTML5 audiót. </audio>

37 FOGD ÉS VIDD: Amikor megragadunk egy elemet és egy másik helyre húzzuk a jelenlegi pozíciójáról, fogd és vidd módszernek hívjuk. A drag and drop a HTML5 szabvány része, és HTML5-ben minden elem mozgathatóvá alakítható. A technika alkalmazásának első lépése, hogy a kívánt elemet mozgathatóvá alakítjuk a draggable tulajdonságával. <img src="kep.png" draggable="true" /> Második lépésként meg kell határoznunk, hogy mi történjen, ha az elemet elkezdjük húzni. Az ondragstart tulajdonság meghív egy függvényt, melynek bemeneti paramétere egy esemény. Esetünkben ez a húzás nevű függvény lesz. Ez a függvény határozza meg, hogy milyen adatokat kell húzni. A függvény belsejében meghívjuk a DataTransfer.setData() metódust, amely meghatározza az adat típusát és a behúzott adat értékét. Ebben az esetben az adatok típusa szöveg, az érték pedig a mozgatható elem id-ja, azaz huzhato. <head> <script type="text/javascript"> function huzas(esemeny){esemeny.datatransfer.setdata("text",esemeny.target.id);} </script> </head> <body> <img id="huzhato" src="kep.png" draggable="true" ondragstart="huzas(event);" /> </body> A harmadik lépésben meghatározzuk, hogy hova lehessen húzni az elemet. Alapértelmezett esetben egy adatot, vagy elemet, nem lehet beledobni egy másik elembe, ezért engedélyeznünk kell ezt. Az ondragover tulajdonság meghív egy függvényt, melynek bemeneti paramétere egy esemény. Esetünkben ez a dobhatod nevű függvény lesz. A függvény belsejében meghívjuk az esemény preventdefault() metódusát, amely megakadályozza, hogy az esemény elvégezze az alapértelmezett funkcióját. Például egy link elem, nem hagyhatja el az oldalt, ha rákatintanak. <head> <script type="text/javascript"> function dobhatod(esemeny){esemeny.preventdefault();} </script> </head> <body> <div id="idedobd" ondragover="dobhatod(event);"></div> </body>

38 Utolsó lépésként meg kell határozzuk, hogy mi történjen, ha az elemet elengedték az új helyén. Az ondrop tulajdonság meghív egy függvényt, melynek bemeneti paramétere egy esemény. Esetünkben ez a elenged nevű függvény lesz. Ez a függvény határozza meg, hogy mi történjen az elem elengedése esetén. A függvény belsejében egy adat nevű változóba kinyerjük a szöveg típusú adatot, így ha a huzhato id-jű elemet belehúzzuk az idedobd id-jű elembe és elengedjük, akkor az adat nevű változóba belekerül a huzhato id. Ezt a huzhato id-jű elemet hozzáfűzzük a appendchild() metódus segítségével az idedobd elemhez. Végezetül meghívjuk a preventdefault() metódust, hogy megakadályozzuk, hogy a böngésző az alapértelmezett módján kezelje az adatot. <head> <script type="text/javascript"> function elenged(esemeny){ var adat=esemeny.datatransfer.getdata("text"); esemeny.target.appendchild(document.getelementbyid(adat)); esemeny.preventdefault();} </script> <body> <div id="idedobd" ondrop="elenged(event);" ondragover="dobhatod(event);"></div> </body> Jelenleg az Opera kivételével minden főbb böngésző támogatja a fogd és vidd módszert. A fentiek elsajátításával már egyszerűen kialakíthatunk egy olyan kódot, melynek segítségével két tároló elem között oda-vissza húzogathatunk egy elemet. A forráskódhoz a jobb áttekinthetőség érdekében hozzáadunk egy kis stílusformázást is, amely egymás mellé helyezi a két elemet, beállít nekik egy fix távolságot egymástól, és hozzájuk ad 1 pixeles fekete keretet, hogy lássuk, hogy hol a két tároló elem határa. <head> <style type="text/css"> #idedobd1, #idedobd2{ float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid #000000;} </style> <script type="text/javascript"> function dobhatod(esemeny){esemeny.preventdefault();} function huzas(esemeny){esemeny.datatransfer.setdata("text",esemeny.target.id);} function elenged(esemeny){ var adat=esemeny.datatransfer.getdata("text"); esemeny.target.appendchild(document.getelementbyid(adat)); esemeny.preventdefault();} </script> </head>

39 <body> <div id="idedobd1" ondrop="elenged(event);" ondragover="dobhatod(event);"></div> <div id="idedobd2" ondrop="elenged(event);" ondragover="dobhatod(event);"> <img id="huzhato" src="kep.png" draggable="true" ondragstart="huzas(event);" /> </div> </body> CANVAS ÉS A RAJZOLÁS: A canvas elem egy konténer, ami egy rajzolható területet határoz meg a HTML kódban, megadott szélességgel és magassággal. Ahhoz hogy rajzolni tudjunk rá szkriptet kell használnunk, például JavaScript-et. A rajzoláshoz több módszer áll rendelkezésünkre. Rajzolhatunk útvonalak alapján. Rajzolhatunk téglalapokat, köröket, karakterek. És hozzáadhatunk már kész képeket is akár. Először is hozzunk létre egy canvas elemet. Adjunk meg neki szélességet és magasságot, valamint egy id-t, hogy a későbbiekben, a rajzoló függvényekkel egyszerűen hivatkozhassunk rá. Fontos, hogy minden egyes alkalommal, amikor megváltoztatjuk a vászon szélességét, vagy magasságát, akkor a teljes vászon tartalma letörlődik, még akkor is, ha ugyanarra az értékre állítjuk be, ami eddig is volt. Így a vászon mérete ténylegesen nem változik, de a tartalma letörlődik. <canvas id="vaszon" width="200" height="200"> A te böngésződ nem támogatja a HTML5 canvas elemet. </canvas> Már említettem, hogy a canvas elemnek nincs önálló rajzolási képessége, ezért JavaScript-el rajzoltathatunk rá. Első lépésben azonosítjuk az rajzterulet nevű id alapján a canvas elemet és eltároljuk egy v nevű változóban. A getcontext metódussal kiválasztjuk a 2 dimenziós rajzolási módot és eltároljuk egy rajzterulet nevű változóban az objektumot. Ez a változó lesz az, amire meghívjuk a különböző rajzolási függvényeket a későbbiekben. <script type="text/javascript"> var v=document.getelementbyid("vaszon"); var rajzterulet=v.getcontext("2d"); </script> A rajzterület egy téglalap alakú terület, melynek koordinátái a bal felső sarokban kezdődnek és jobb és lefelé növekszenek. Az X koordináta a rajzterület bal szélétől való távolságot, az Y a felső szélétől való távolságot jelképezi. A canvas elemet minden főbb böngésző támogatja.

40 Színek és stílusok, tulajdonságok (10): fillstyle A kitöltés színét határozza meg, melynek alapértelmezett színe a fekete. A kitöltés színét a szokásos megadási módokon lehet meghatározni. angol színnévvel történő megadás: blue hexadecimális színmegadás: #0000FF rgb színmegadás: rgb(255,0,0) rajzterulet.fillstyle="#ff0000"; strokestyle A körvonal színét határozza meg, melynek alapértelmezett színe a fekete. A kitöltés színét a szokásos megadási módokon lehet meghatározni. rajzterulet.strokestyle="#00ff00"; linecap A vonal végének stílusát határozza meg. Három lehetséges értéke van: a ceruza sapkája tus, ez az alapértelmezés (butt) a kör sapka (round) a négyzet sapka (square) rajzterulet.linecap="round"; linejoin A vonalak találkozásának stílusát határozza meg. Három lehetséges értéke van: tompa (bevel) kerek (round) ferdén vágott, ez az alapértelmezett (miter) rajzterulet.linejoin="bevel";

41 linewidth A körvonal vastagságát határozza meg pixelben, melynek alapértelmezett mérete az 1. rajzterulet.linewidth=5; miterlimit A vonal sarkai nagyságának limitét határozza meg, melynek alapértelmezett értéke 10. Abban az esetben használható csak, ha a linejoin értéke miter. A miter a belső- és külső sarok közötti távolság. Minél kisebb két csatlakozó vonal szöge, annál nagyobb a belső- és külső sarok távolsága. Arra használhatjuk a miterlimit-et, hogy meg tudjuk akadályozni, hogy ez a távolság kis szögek esetén túl nagyra nyúljon. Abban az esetben ha a távolság meghaladja a limitet, akkor a sarok bevel linejoin típussal jelenik meg. rajzterulet.linejoin="miter"; rajzterulet.miterlimit=5; shadowcolor Az árnyék színét határozza meg, melynek alapértelmezett színe a fekete. rajzterulet.shadowcolor="red"; shadowoffsetx Az árnyék vízszintes helyzetét határozza meg, melynek alapértelmezett értéke a 0. Pozitív számok esetén jobbra tolódik az árnyék, negatív számok esetén pedig balra. rajzterulet.shadowoffsetx=15; shadowoffsety Az árnyék függőleges helyzetét határozza meg, melynek alapértelmezett értéke a 0. Pozitív számok esetén lefelé tolódik az árnyék, negatív számok esetén pedig felfelé. rajzterulet.shadowoffsety=15;

42 shadowblur Az árnyék elmosódásának nagyságát határozza meg, melynek alapértelmezett értéke a 0. rajzterulet.shadowblur=20; Színek és stílusok, metódusok (6): createlineargradient(x0,y0,x1,y1) Létrehoz egy gradient objektumot. Ez az objektum egy lineáris színátmenetet képvisel, amit használhatunk a fillstyle és strokestyle tulajdonságoknál. A koordináta paraméterek segítségével megadhatjuk, hogy az átmenetekre hol kerül sor. Az x0 és y0 meghatározza a kezdeti koordinátáját az átmenetnek, az x1 és y1 pedig a végkoordinátáját. Színátmenetek segítségével kitölthetünk vonalakat, négyszögeket, köröket. rajzterulet.createlineargradient(0,0,150,0); createpattern(objektum,minta) Egy képből létrehoz egy mintát, melyet használhatunk a fillstyle és strokestyle tulajdonságoknál. A createpattern egy objektumot használ, ami lehet kép, videó, vagy egy másik canvas elem. A mintánál beállítató, hogy a minta milyen módon ismétlődjön a kitöltés során. alapértelmezésként vízszintesen és függőlegesen is ismétlődik (repeat) csak vízszintes ismétlődés (repeat-x) csak függőleges ismétlődés (repeat-y) nincs ismétlődés, csak egyszer jelenik meg (no-repeat) <img id="kepem" src="kep.png" width="32" height="32" /> var kep=document.getelementbyid("kepem"); var pat=rajzterulet.createpattern(kep,"repeat");

43 createradialgradient(x0,y0,r0,x1,y1,r1) Létrehoz egy gradient objektumot. Ez az objektum egy sugaras színátmenetet képvisel, amit használhatunk a fillstyle és strokestyle tulajdonságoknál. A koordináta paraméterek segítségével megadhatjuk, hogy az átmenetekre hol kerül sor. A kezdő kör középpontját az x0 és y0 koordináta páros határozza meg, sugara pedig az r0. A végső kör középpontját az x1 és y1 koordináta páros határozza meg, sugara pedig az r1. Színátmenetek segítségével kitölthetünk vonalakat, négyszögeket, köröket. var grd=rajzterulet.createradialgradient(100,50,5,60,50,50); addcolorstop(pozicio,szin) Meghatározza az átmenet pozícióját és színét, azaz megadja, hogy az adott szín az átmenetben hol szerepeljen. Így lehetséges több színből álló átmenetet létrehozni. Az addcolorstop metódust használhatjuk a createlineargradient és a createradialgradient metódusok mellé. A pozíció egy 0.0 és 1.0 közé eső szám, ahol a 0.0 az átmenet eleje, az 1.0 pedig az átmenet vége. Szín paraméternek tetszőleges CSS színértéket megadhatunk. var grd=rajzterulet.createlineargradient(0,0,150,0); grd.addcolorstop(0.3,"red"); grd.addcolorstop(0.7,"green"); rajzterulet.fillstyle=grd; A fennmaradó kettő metódust, azaz a drawcustomfocusring(elem) és drawsystemfocusring(elem) metódust jelenleg egyik főbb böngésző sem támogatja. Útvonal, görbe, kör és téglalap, metódusok (16): fillrect(x,y,w,h) Egy kitöltött téglalapot rajzol a fillstyle által meghatározott színnel. Az x és y paraméter a négyszög bal felső koordinátáját határozza meg. A w a négyszög szélességét, a h pedig a magasságát adja meg. rajzterulet.fillrect(20,20,100,100);

44 strokerect(x,y,w,h) Egy téglalap körvonalat rajzol a strokestyle által meghatározott színnel. Az x és y paraméter a négyszög bal felső koordinátáját határozza meg. A w a négyszög szélességét, a h pedig a magasságát adja meg. rajzterulet.strokerect(20,20,100,100); clearrect(x,y,w,h) Töröl egy téglalapnyi területet. Minden pixel ezen a területen belül törlésre kerül. Az x és y paraméter a négyszög bal felső koordinátáját határozza meg. A w a négyszög szélességét, a h pedig a magasságát adja meg. rajzterulet.clearrect(20,20,100,100); beginpath() Elindít egy új útvonalat, és törli az aktuálisat. Hozzáadhatunk moveto(), lineto(), quadriccurveto, beziercurveto, arcto, és arc() metódusok által új utakat az útvonalhoz. A storke() metódus segítségével körberajzolhatjuk, a fill() metódus segítségével kitölthetjük az aktuális útvonalat. rajzterulet.beginpath(); rajzterulet.moveto(40,40); rajzterulet.lineto(40,200); rajzterulet.lineto(100,200); rajzterulet.stroke(); moveto(x,y) Az útvonalat az x, y koordinátájú pontra mozgatja, anélkül, hogy vonalat rajzolna. rajzterulet.moveto(20,20);

45 closepath() Befejezi az útvonalat, ami a kezdő ponttól, az utolsó út végpontjáig tart. rajzterulet.beginpath(); rajzterulet.moveto(40,40); rajzterulet.lineto(40,150); rajzterulet.lineto(100,150); rajzterulet.closepath(); rajzterulet.fill(); lineto(x,y) Húz egy vonalat az aktuális pozícióból az x, y koordinátájú végpontba. rajzterulet.lineto(70,100); rect(x,y,w,h) Létrehoz egy téglalapot, de nem rajzolja ki. Az x és y paraméter a négyszög bal felső koordinátáját határozza meg. A w a négyszög szélességét, a h pedig a magasságát adja meg. A storke() metódus segítségével körberajzolhatjuk, a fill() metódus segítségével kitölthetjük az aktuális útvonalat. rajzterulet.rect(20,20,150,100); fill() Kitölt egy útvonalat. Ha az útvonal kiindulási pontja nem ugyanaz, mint a végpontja, akkor a kitöltés úgy fog végbemenni, mintha a kezdő pont és végpont az útvonalban össze lenne kötve. rajzterulet.fill(); stroke() Körberajzolja az útvonalat. rajzterulet.stroke();

46 clip() Létrehoz egy területet a vásznon, amely kivételével más nem látható a vásznon. Csak az adott terület látszódik a rajzterületen. Az egyéb területekre rajzoltak nem látszódnak. rajzterulet.rect(10,15,200,75); rajzterulet.clip(); rajzterulet.fillstyle="lightblue"; rajzterulet.fillrect(0,0,300,150); rajzterulet.fillstyle="red"; rajzterulet.font="30px Arial"; rajzterulet.filltext("html5 leírás", 10,30); quadraticcurveto(cpx,cpy,x,y) Létrehoz egy kvadratikus Bezier görbe vonalat az aktuális pontból egy megadott ponthoz, egy ControlPoint ponton keresztül. A cpx, cpy a ControlPoint koordinátái, amin a görbének keresztül kell haladnia. Az x, y a végpont koordinátái, amik a görbe végét határozzák meg. rajzterulet.moveto(0,0); rajzterulet.quadraticcurveto(20,100,200,20); rajzterulet.stroke(); beziercurveto(cpx0,cpy0,cpx1,cpy1,x,y) Létrehoz egy harmadfokú Bezier görbe vonalat az aktuális pontból egy megadott ponthoz, két ControlPoint ponton keresztül. A cpx0, cpy0 az első ControlPoint koordinátái. A cpx1, cpy1 a második ControlPoint koordinátái. Az x, y a végpont koordinátái, amik a görbe végét határozzák meg. rajzterulet.moveto(20,20); rajzterulet.beziercurveto(20,100,200,100,200,20); rajzterulet.stroke();

47 arc(x,y,r,s,e,i) Létrehoz egy kört, vagy egy körnek a részét. Az x, y a kör középpontjának a koordinátái, az r pedig a kör sugara. Az s a körív kezdőszöge, az e pedig a záró szöge. A 0 szöghöz tartozó pont, a középponttól jobbra a sugár távolságában található meg. Az i logikai paraméter meghatározza, hogy az irány az óramutató járásával megegyezik-e, vagy sem. Ez az utolsó paraméter elhagyható, alapértelmezett értéke true, azaz igaz. rajzterulet.arc(100,75,50,0*math.pi,1.5*math.pi); rajzterulet.stroke(); arcto(x0,y0,x1,y1,r) Létrehoz egy ívet két pont között. Az x0, y0 koordináta az ív kezdőpontja, az x1, y1 koordináta pedig a végpontja. Az r az ív sugarát határozza meg. rajzterulet.arcto(150,20,150,70,50); rajzterulet.stroke(); ispointinpath(x,y) Visszaad egy logikai értéket, amely igaz (true), ha a paraméterben megadot x, y koordinátájú pont rajta van az útvonalon, és hamis (false), ha nincs. rajzterulet.rect(20,20,150,100); if (rajzterulet.ispointinpath(10,50)){alert("rajta van!");} else{alert("nincs rajta!");} Az arc és arcto metódust az Opera kivételével minden főbb böngésző támogat.

48 Transzformáció metódusok (5): scale(x,y) Segítségével a rajzokat kisebbre, vagy nagyobbra skálázhatjuk. A skálázás történhet szélességben (x), magasságban (y), vagy egyszerre mindkét paraméterben. Skálázáskor a távolságok is arányosan változnak. Így ha egy téglalapot például kétszeresen skálázunk mind szélességében, mind magasságában, akkor ez a téglalap, kétszer távolabb is lesz a bal széltől és a vászon felső szélétől is. Viszonyítási alapként néhány érték: nincs skálázás (1) felére kicsinyítés (0.5) kétszeresre nagyítás (2) rajzterulet.scale(5,5); rajzterulet.strokerect(5,5,25,15); rotate(a) A megadott a szöggel elforgatja a vásznat. A szöget radiánban kell megadni a forgatás esetében is. rajzterulet.rotate(20*math.pi/180); rajzterulet.fillrect(50,50,100,50); translate(x,y) Elmozgatja a vásznat az adott pozícióba. A vászon ilyenkor nem mozog, csak a viszonyítási pont mozdul el a bal felső sarokból. Az x a vízszintes eltolás, az y a függőleges eltolást határozza meg. rajzterulet.translate(70,70); rajzterulet.fillrect(10,10,100,50);

49 transform(a,b,c,d,e,f) Egy mátrix alapján transzformálja a vásznat. Segítségével lehet skálázni, forgatni, eltolni, vagy dönteni a vásznat. Az a paraméter a vízszintes skálázás, a b paraméter a vízszintes döntés, a c paraméter a függőleges döntés, a d paraméter a függőleges skálázás, az e paraméter a vízszintes eltolás, az f paraméter pedig a függőleges eltolás. Fontos, hogy ha a scale metódussal már skáláztunk kétszeresre, és a transform-mal is skálázunk kétszeresre, akkor összességében négyszeresére skálázzuk az adott rajzot. Ez vonatkozik a forgatásra, eltolásra és döntésre is. rajzterulet.transform(0.93,0.3,-0.3,0.93,0,0); rajzterulet.fillstyle="green"; rajzterulet.fillrect(0,0,250,100); rajzterulet.fillstyle="blue"; rajzterulet.filltext("transzformáció",10,30); settransform(a,b,c,d,e,f) Egy mátrix alapján transzformálja a vásznat. Segítségével lehet skálázni, forgatni, eltolni, vagy dönteni a vásznat. Az a paraméter a vízszintes skálázás, a b paraméter a vízszintes döntés, a c paraméter a függőleges döntés, a d paraméter a függőleges skálázás, az e paraméter a vízszintes eltolás, az f paraméter pedig a függőleges eltolás. Fontos, hogy ha a scale metódussal skáláztunk kétszeresre, és a settransformmal skálázunk kétszeresre, akkor nem lesz négyszeres skálázás, csak kétszeres. Ez fontos különbség a transform és settransform metódus között. Ez vonatkozik a forgatásra, eltolásra és döntésre is. rajzterulet.settransform(0.93,0.3,-0.3,0.93,0,0); rajzterulet.fillstyle="green"; rajzterulet.fillrect(0,0,250,100); rajzterulet.fillstyle="blue"; rajzterulet.filltext("transzformáció", 10,30); Szöveg tulajdonságok (3): font Meghatározza a szöveg betűtípusát, amivel írunk a vászonra. A font tulajdonságot, a CSS font tulajdonsággal megegyezően lehet használni. A tulajdonság lehetséges értékei: betűstílus (font-style: normal, italic, oblique) variáns (font-variant: normal, small-caps) vastagság (font-weight: normal, bold, bolder, lighter, vagy megadható számmal: 100) méret és sor magasság (megadható pixel-lel: 10px) betűcsalád (font-family: Arial, Verdana, Times New Roman, Courier New, serif, sans-serif) használható gombokhoz, vagy drop-down-hoz caption (caption) ikonokhoz icon (icon) legördülő menükhöz menu (menu) párbeszéd panelekhez message-box (message-box)

50 kis felirat small-caption (small-caption) állapotsorban status-bar (status-bar) rajzterulet.font="normal 30px Arial" textalign A szöveg vízszintes igazítását határozza meg. A tulajdonság lehetséges értékei: alapértelmezésként a szöveg a pozíciónál kezdődik (start) a szöveg a pozíciónál végződik (end) a szöveg a pozíciónál kezdődik (left) a szöveg a pozíciónál végződik (right) a szöveg közepe a pozícióhoz igazított (center) rajzterulet.textalign="right"; rajzterulet.filltext("vízszintes igazítás",150,75); textbaseline A szöveg függőleges igazítását határozza meg. A tulajdonság lehetséges értékei: alapértelmezésként a szöveg a szokásos módon, az alapvonalon helyezkedik el (alphabetic) a szöveg az alapvonal alatt helyezkedik el (bottom) a hanging vonalhoz képest helyezi el a szöveget, hasonlít a top-ra (hanging) a képrírásos szöveg elhelyezése (ideographic) a szöveg közepe az alapvonalon helyezkedik el (middle) a szöveg az alapvonal felett helyezkedik el (top) rajzterulet.textbaseline="top"; rajzterulet.filltext("függőleges igazítás",175,50);

51 Szöveg metódusok (3): filltext(s,x,y,w) Egy kitöltött szöveget rajzol a fillstyle által meghatározott színnel. Az s paraméter határozza meg a kirajzolandó szöveget, az x, y koordináta pár meghatározza a szöveg helyzetét. Végül a w egy opcionális paraméter, ami meghatározza a szöveg maximális szélességét. Ha a szöveg túllógna ezen a határon, akkor olyan betűmérettel rajzolódik ki, amellyel már belefér ebbe a szélességbe. rajzterulet.filltext("kitöltött",10,10); stroketext(s,x,y,w) Egy szöveg körvonalait rajzolja ki a strokestyle által meghatározott színnel. Az s paraméter határozza meg a kirajzolandó szöveget, az x, y koordináta pár meghatározza a szöveg helyzetét. Végül a w egy opcionális paraméter, ami meghatározza a szöveg maximális szélességét. Ha a szöveg túllógna ezen a határon, akkor olyan betűmérettel rajzolódik ki, amellyel már belefér ebbe a szélességbe. rajzterulet.stroketext("körvonal",10,10); measuretext(s).width Az s paraméterben megadott szöveg szélességét adja vissza pixelekben. Arra hasznosítható, hogy megtudjuk a szöveg kirajzolása előtt, hogy mekkora a szélessége, majd ennek függvényében döntéseket hozhatunk. rajzterulet.font="30px Arial"; rajzterulet.filltext("width:" + rajzterulet.measuretext("mi a szélessége").width,10,10);

52 Kép és pixel manipuláció, tulajdonságok (3): data Egy imagedata objektumban elhelyezkedő összes pixel rgba értékét tartalmazza egy tömbben. Az első pixel-ről tárolt információk, a tömb 0. elemétől a 3. eleméig tart, és ezt követi négyesével minden pixel. Az első érték a piros (0-255), a második a zöld (0-255), a harmadik a kék (0-255), a negyedik pedig az alfa erőssége (0-255), ahol 0 az átlátszó, a 255 pedig a teljesen látható. imgdata.data[0]=0; imgdata.data[1]=0; imgdata.data[2]=255; imgdata.data[3]=255; height Meghatározza az imagedata objektum magasságát pixel-ekben. var imgdata=rajzterulet.createimagedata(50,50); mag=imgdata.height; width Meghatározza az imagedata objektum szélességét pixel-ekben. var imgdata=rajzterulet.createimagedata(50,50); szel=imgdata.width; Kép és pixel manipuláció, metódusok (4): drawimage(i, x, y, w, h, dx, dy, dw, dh) Egy képet, vagy a részleteit ráfesti a rajzvászonra. Ezeket lehet növelve, vagy csökkentve is rajzoltatni. A metódus akár 9 paramétert is elfogad, attól függően, hogy mit szeretnénk csinálni a képpel. A kép objektum lehet kép, video elem, vagy egy másik vászon. A metódus paraméterei: a kép, amit használunk a rajzhoz (i: image, video, canvas) a kép vízszintes pozíciója (x) a kép függőleges pozíciója (y) a kép szélessége pixel-ekben (w) a kép magassága pixel-ekben (h) a kép kivágott részének vízszintes pozíciója (dx) a kép kivágott részének függőleges pozíciója (dy) a kép kivágott részének szélessége pixel-ekben (dw) a kép kivágott részének magassága pixel-ekben (dh)

53 Kirajzoltathatunk például egy képrészletet a vászonra: <body> <canvas id="vaszon" style="border:1px solid gray;"></canvas> <img id="kep" src="kep.png" /> <script type="text/javascript"> document.getelementbyid("kep").onload=function(){ var v=document.getelementbyid("vaszon"); var rajzterulet=v.getcontext("2d"); var img=document.getelementbyid("kep"); rajzterulet.drawimage(img,90,130,50,60,10,10,50,60);}; </script> </body> Vagy kirajzoltathatunk egy videót a vászonra, ami 20ms-onként frissül. <body> <video id="video" controls autoplay> <source src="video.mp4" type='video/mp4' /> <source src="video.ogg" type='video/ogg' /> <source src="video.webm" type='video/webm' /> </video><br /> <canvas id="vaszon" style="border:1px solid gray;"></canvas> <script type="text/javascript"> var vid=document.getelementbyid("video"); var v=document.getelementbyid("vaszon"); rajzterulet=v.getcontext('2d'); vid.addeventlistener('play', function(){ idozito=window.setinterval(function(){rajzterulet.drawimage(vid,5,5,260,125)},20);},false); vid.addeventlistener('pause',function(){ window.clearinterval(idozito); },false); vid.addeventlistener('ended',function(){ clearinterval(idozito); },false); </script> </body>

54 createimagedata() Létrehoz egy üres imagedata objektumot, melynek alapértelmezésként minden pontja fekete, azaz rgba(0,0,0,0). A metódust két féleképpen hívhatjuk meg. Ha egyetlen paraméter van, és ez egy másik imagedata objektumot, akkor az új imagedata objektumunk átveszi a paraméterben átadottnak a méreteit. A másik módszer, a kétparaméteres meghívás, ilyenkor mi magunk adjuk meg a szélességét és magasságát a két paraméter segítségével. var imgdata=rajzterulet.createimagedata(50,50); getimagedata(x,y,w,h) Létrehoz egy imagedata objektumot, amibe a vászon megadott részletét átmásolja. Az x, y koordináta pár meghatározza a rajzvásznon a négyszög bal felső sarkát, amit az imagedata objektumba másolunk. A w paraméter meghatározza a kimásolandó négyszög szélességét, a h pedig a magasságát. <script type="text/javascript"> document.getelementbyid("kep").onload=function(){ var v=document.getelementbyid("vaszon"); var rajzterulet=v.getcontext("2d"); var img=document.getelementbyid("kep"); rajzterulet.drawimage(img,0,0); var imgdata=rajzterulet.getimagedata(0,0,v.width,v.height); </script> putimagedata(i,dx,dy,x,y,w,h) Egy imagedata objektumot rajzol a vászonra. Két féleképpen hívható meg. Három paraméterrel (imagedata, x, y), ha az imagedata objektummal megegyező méretben és alakban szeretnénk a vászon x, y koordinátájú pozíciójába rajzoltatni. És hét paraméterrel (imagedata,dx,dy,x,y,w,h), ha az imagedata egy részletét szeretnénk csak a vászonra rajzoltatni, vagy más méretarányban szeretnénk a kirajzoltatást elvégezni. Például, ha egy kép minden pixelének színét invertálva szeretnénk kirajzoltatni a vászonra: <script type="text/javascript"> document.getelementbyid("kep").onload=function(){ var v=document.getelementbyid("vaszon"); var rajzterulet=v.getcontext("2d"); var img=document.getelementbyid("kep"); rajzterulet.drawimage(img,0,0); var imgdata=rajzterulet.getimagedata(0,0,v.width,v.height);

55 for (i=0; i<imgdata.width*imgdata.height*4;i+=4){ imgdata.data[i]=255-imgdata.data[i]; imgdata.data[i+1]=255-imgdata.data[i+1]; imgdata.data[i+2]=255-imgdata.data[i+2]; imgdata.data[i+3]=255;} rajzterulet.putimagedata(imgdata,0,0);}; </script> Kompozitálás, tulajdonságok (2): globalalpha A rajzolás átláthatóságát határozza meg egy 0.0 és 1.0 közötti értékkel, ahol a 0 a teljes átláthatóságot jelenti, az 1 pedig azt az esetet, amikor nincs átláthatóság. rajzterulet.fillstyle="red"; rajzterulet.fillrect(20,20,75,50); rajzterulet.fillstyle="blue"; rajzterulet.globalalpha=0.2; rajzterulet.fillrect(50,50,75,50); globalcompositeoperation Meghatározza, hogy az alakzatok milyen módon rajzolódjanak a vászonra egymáshoz képest. Az alakzat, amit előbb rajzolunk, a forrás alakzat, az alakzat amit később rajzolunk, a cél alakzat. Jelenleg 11 különböző kompozitálási mód van: megjeleníti a forrást és felette levő cél alakzatot, de csak azt a részét, ami a forrás területén belülre esik (source-atop) a forrást nem jeleníti meg, de a felett levő cél alakzatot igen, de csak azt a részét, ami a forrás területén belülre esik (source-in) a forrást nem jeleníti meg, de a felett levő cél alakzatot igen, de csak azt a részét, ami a forrás területén kívülre esik (source-out) az alapértelmezett, megjeleníti a forrást és felette levő cél alakzatot teljes egészben (source-over) megjeleníti a célt és felette levő forrás alakzatot, de csak azt a részét, ami a cél területén belülre esik (destination-atop) a célt nem jeleníti meg, de a felett levő forrás alakzatot igen, de csak azt a részét, ami a cél területén belülre esik (destination-in) a célt nem jeleníti meg, de a felett levő forrás alakzatot igen, de csak azt a részét, ami a cél területén kívülre esik (destination-out) megjeleníti a célt és felette levő forrás alakzatot teljes egészben (destination-over) mindkét alakzatot kirajzolja, de a közös részüket összefésüli (lighter) a forrás alakzatot kihagyja egészében, és csak a cél alakzatot jeleníti meg (copy) mindkét alakzatot kirajzolja, de a közös részüket kihagyja (xor)

56 rajzterulet.fillstyle="blue"; rajzterulet.fillrect(150,20,75,50); rajzterulet.fillstyle="green"; rajzterulet.globalcompositeoperation="destination-over"; rajzterulet.fillrect(180,50,75,50); Egy komolyabb példa: <body> <script type="text/javascript"> var kompoz=new Array(); kompoz.push("source-atop"); kompoz.push("source-in"); kompoz.push("source-out"); kompoz.push("source-over"); kompoz.push("destination-atop"); kompoz.push("destination-in"); kompoz.push("destination-out"); kompoz.push("destination-over"); kompoz.push("lighter"); kompoz.push("copy"); kompoz.push("xor"); for (i=0;i<kompoz.length;i++){ document.write("<div id='p_"+i+"' style='float:left;'>"+kompoz[n]+":<br />"); var v=document.createelement("vaszon"); document.getelementbyid("p_"+i).appendchild(v); var rajzterulet=v.getcontext("2d"); rajzterulet.fillstyle="yellow"; rajzterulet.fillrect(10,10,50,50); rajzterulet.globalcompositeoperation=kompoz[n]; rajzterulet.beginpath(); rajzterulet.fillstyle="red"; rajzterulet.arc(50,50,30,0,2*math.pi); rajzterulet.fill(); document.write("</div>");} </script> </body> SVG: A Scalable Vector Grapihcs, azaz a skálázható vektor grafika, egy nyílt szabvány. Az SVG 1.1 (Second Edition) augusztus 16-án lett W3C ajánlás. Webes grafikákhoz jól alkalmazható. Előnye, hogy nagyítás és átméretezés esetén nem veszít a kép a minőségéből. Kétdimenziós vektoros grafika leírására használható XML-ben, az SVG-fájlok tiszta XML-ek. Lehet animált is. Az ilyen típusú grafikák bármilyen szövegszerkesztővel létrehozhatóak és szerkeszthetőek, de kényelmesebben szerkeszthetőek az Inkscape rajzprogrammal. A képek kereshetőek, indexelhetőek, szkriptelhetőek, és tömöríthetőek. Bármilyen felbontásban, magas minőségben nyomtathatóak. Fő versenytársa a Flash, de a Flash-el szemben, több szabványnak megfelel, például XSL és DOM, és nem támaszkodik nem nyílt forráskódú, szabadalmaztatott technológiákra.

57 Egy SVG fájl általános tartalma: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg xmlns=" version="1.1"></svg> Az első sor az XML deklarációt tartalmazza, melynek standalon tulajdonságának, no értéke meghatározza, hogy az SVG fájl nem önálló, egy külső fájlra hivatkozik, ebben az esetben a DTDre. A második és harmadik sor az SVG DTD. Ez a DTD a w3.org-on található és minden megengedett SVG elemet tartalmaz. Maga az SVG kód az svg elemben található, ami egy gyökér elem. Az xmlns tulajdonsága határozza meg az SVG névteret, a version tulajdonság pedig a használt SVG változatát. A grafikát a /svg tag zárja. Közvetve az embed, object vagy iframe elem segítségével ágyazhatóak be a HTML-be. Az embed elemet az összes főbb böngésző támogatja, és lehetővé teszi a szkirptelést. HTML4- ben és XHTML-ben elavult, de jól használható HTML5-ben. <embed src="kep.svg" type="image/svg+xml" /> Az object elemet az összes főbb böngésző támogatja és szabványos HTML4-ben, XHTML-ben és HTML5-ben, de nem teszi lehetővé a szkriptelést. <object data="kep.svg" type="image/svg+xml"></object> Az iframe elemet az összes főbb böngésző támogatja, de létrehoz egy keretet, különleges formázások nélkül, és nem támogatott a HTML4 és az XHTML szigorú strict módjában. <iframe src="kep.svg"></iframe> Közvetlenül a HTML-be is beágyazható: <body> <svg xmlns=" version="1.1"> </svg> </body> Az SVG-t az összes főbb böngésző új változata támogatja. IE8-hoz szükséges az Adobe SVG Viewer nevű bővítménye.

58 Alakzatok: Az SVG tartalmaz néhány előre meghatározott alakú elemet: téglalap <rect> kör <circle> ellipszis <ellipse> vonal <line> vonallánc <polyline> sokszög <polygon> útvonal <path> rect Egy téglalapot hozhatunk létre a segítségével. A width tulajdonsága meghatározza a téglalap szélességét, a height tulajdonsága pedig a magasságát. Az x, meghatározza pixel-ekben a bal margótól való távolságát, az y, pedig a felső margótól való távolságát. Az rx és ry tulajdonsága meghatározzák a téglalap sarkainak lekerekítését. A style tulajdonságával meghatározhatjuk CSS tulajdonságokkal a téglalap stílusát. A style-on belüli fill CSS tulajdonság meghatározza a téglalap kitöltésének színét, a stroke-width a téglalap körvonalának méretét pixel-ekben, a stroke pedig a körvonal színét. A fill-opacity CSS tulajdonság meghatároz egy 0.0 és 1.0 közötti értéket amely megadja a kitöltés átlátszóságát. A stroke-opacity amely ugyanezen módon meghatározza a körvonal átlátszóságát. Lehetőség van a teljes alakzat átlátszóságának meghatározására is az opacity stílus tulajdonsággal. <svg xmlns=" version="1.1"> <rect width="300" height="100" style="fill: rgb(0,0,255); stroke-width: 1; stroke: rgb(0,0,0)"/> </svg> <svg xmlns=" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill: blue; stroke: pink; stroke-width: 5; fill-opacity: 0.1; stroke-opacity: 0.9"/> </svg> <svg xmlns=" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill: red; stroke: black; stroke-width: 5; opacity: 0.5"/> </svg> circle Egy kört hozhatunk létre a segítségével. A cx és cy tulajdonságai határozzák meg a kör középpontját, ha ezt elhagyjuk, akkor alapértelmezésként a kör középpontja a 0,0 koordináta párra kerül. Az r tulajdonság a kör sugara. <circle cx="300" cy="300" r="40" stroke="black" stroke-width="2" fill="red" /> Ennél a példánál észrevehettük, hogy a stílus tulajdonságokat megadhatjuk másféle módon is.

59 ellipse Egy ellipszist hozhatunk létre a segítségével. Nagyon hasonlít a körre, de amíg a körnek az x és y irányú sugara azonos, azaz r, addig az ellipszisnek az rx vízszintes és ry függőleges sugara lehet különböző méretű is. <ellipse cx="300" cy="300" rx="40" ry="200" /> line Egy vonalat hozhatunk létre a segítségével. Az x1, y1 tulajdonsága meghatározza a vonal kezdőpontját, az x2, y2 tulajdonsága pedig a végpontját. <line x1="10" y1="10" x2="290" y2="290" /> polygon Egy sokszöget hozhatunk létre a segítségével, melynek legalább árom oldala van, és zártnak kell lennie. Egyenes vonalakból áll, melyek zárt formát alkotnak az összekapcsolódásukkal. A points tulajdonság az egymást követő pontok x és y koordinátáját sorolja fel, vesszővel elválasztva. <polygon points="220,10 300, , ,234" style="fill: blue; stroke: red; stroke-width:1" /> A fill-rule kitöltési szabály módosításával különböző kitöltéseket is elérhetünk a sokszögek stílusának alakítására. <polygon points="100,10 40, ,60 10,60 160,180" style="fill: blue; stroke: red; stroke-width: 5; fill-rule: nonzero;" /> <polygon points="100,10 40, ,60 10,60 160,180" style="fill: blue; stroke: red; stroke-width: 5; fill-rule: evenodd;" /> polyline Egy vonalláncot hozhatunk létre a segítségével. Egyenes vonalakból álló lánc, melynek nem szükséges egy zárt alakzatot alkotnia. A points tulajdonság az egymást követő pontok x és y koordinátáját sorolja fel, vesszővel elválasztva. <polyline points="20,20 40,25 60,40 80, , ,180" /> A vonalak metszése esetén a zárt alakzatok kitöltődnek. <polyline points="20,25 50,30 62,41 86, , ,200" />

60 path Egy útvonalat hozhatunk létre a segítségével. Bonyolultsága miatt ajánlott szerkesztőt használni az xml-es megadás helyett. külömböző parancsok állnak rendelkezésünkre a d tulajdonság használatakor. Ezeket nagybetűvel írva abszolút pozíciók alapján, kis betűkkel írva relatív pozíciók alapján hajthatjuk végre az alábbi utasításokat: a kezdő pozíció átmozgatása (M) vonal húzása a pozícióból (L) vízszintes vonal húzása a pozícióból (H) függőleges vonal húzása a pozícióból (V) görbe húzása a pozícióból (C) simított görbe húzása a pozícióból (S) másodfokú Bezier-görbe húzása a pozícióból (Q) simított másodfokú Bezier-görbe húzása a pozícióból (T) elliptikus ív húzása a pozícióból (A) útvonal lezárása (Z) <path d="m150 0 L L Z" /> Az útvonalaknak adhatunk id-kat, és a kitöltésüket megszüntethetjük, a fill tulajdonság none értékével: <path id="quadcurveabc" d="m q " stroke="blue" stroke-width="5" fill="none" /> text Egy szöveget hozhatunk létre a segítségével. Az x és y tulajdonsága meghatározza a szöveg kezdő pozícióját. A fill tulajdonság meghatározza a betű kitöltésének a színét. A szöveget a transform tulajdonsággal tetszőlegesen átalakíthatjuk. Például forgathatjuk: <text x="0" y="15" fill="red" transform="rotate(30 20,40)">HTML5</text> A szöveget egy tetszőleges útvonalra is ráilleszthetjük: <svg xmlns=" version="1.1" xmlns:xlink=" <defs> <path id="utvonal" d="m75,20 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:red;"> <textpath xlink:href="#utvonal">utvonalra illesztve</textpath> </text> </svg>

61 Több soros szöveget is írhatunk, ha a szöveget alcsoportokra tagoljuk. Ezeknek a tspan alcsoportoknak különböző lehet a pozíciója és a formázása: <text x="10" y="20" style="fill: red;">több soros szöveg: <tspan x="10" y="45">első sor...</tspan> <tspan x="10" y="70">második sor...</tspan> </text> A szövegekből hivatkozásokat is csinálhatunk: <svg xmlns=" version="1.1" xmlns:xlink=" <a xlink:href=" target="_blank"> <text x="0" y="15" fill="red">ez egy link...</text> </a> </svg> A g tag segítségével több szövegre meghatározhatunk egy formázást: <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">a</text> <text x="250" y="50" dy="-10">b</text> <text x="400" y="350" dx="30">c</text> </g> stroke tulajdonságai A körvonal tulajdonságai közül a stroke a körvonal színét határozza meg egy szövegnek, vonalnak, vagy egy alakzat körvonalának. A stroke-width tulajdonság a körvonal vastagságát határozza meg. A stroke-linecap tulajdonság (butt, road, square) a vonal végződéseinek alakját határozza meg. A stroke-dasharray tulajdonság szaggatott vonalat hoz létre, melynek értékei vesszővel elválasztva a szaggatott vonal, ismétlődő vonalainak a hosszát határozzák meg, melyek különbözőek is lehetnek akár. <path stroke="blue" stroke-width="2" stroke-linecap="round" stroke-dasharray="10,10" d="m5 40 l215 0" /> <path stroke="blue" stroke-width="2" stroke-linecap="round" stroke-dasharray="20,10,5,5,5,10" d="m5 60 l215 0" />

62 Szűrők: Az alábbi szűrők állnak rendelkezésünkre. Egyszerre több szűrőt is alkalmazhatunk: feblend - képek ötvözésének szűrője fecolormatrix - szín transzformálási szűrő fecomponenttransfer fecomposite feconvolvematrix fediffuselighting fedisplacementmap feflood fegaussianblur feimage femerge femorphology feoffset - szűrő a vetett árnyékokhoz fespecularlighting fetile feturbulence fedistantlight - szűrő a világításhoz fepointlight - szűrő a világításhoz fespotlight - szűrő a világításhoz defs és filter A def elem rövid definíciókat tartalmaz, például szűrőket. A filter elem meghatároz egy szűrőt. Minden szűrőnek kötelezően van id tulajdonsága, amire a grafika filter tulajdonságával hivatkozunk, hogy alkalmazzuk rajta a szűrőt. fegaussianblur Egy homályosító hatást határoz meg. Az in tulajdonságának SourceGraphic értéke meghatározza, hogy a szűrő az egész elemre vonatkozzon. Az stddevitation a blur összegét határozza meg. <defs> <filter id="szuro" x="0" y="0"> <fegaussianblur in="sourcegraphic" stddeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#szuro)" />

63 feoffset Egy vetett árnyékot határoz meg. <defs> <filter id="szuro" x="0" y="0" width="200%" height="200%"> <feoffset result="offout" in="sourcealpha" dx="20" dy="20" /> <fegaussianblur result="blurout" in="offout" stddeviation="10" /> <feblend in="sourcegraphic" in2="blurout" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#szuro)" /> Színátmenetek: A színátmenet egy simított átmenet egyik színből egy másikba. A grafikán egyszerre több átmenetet is lehet alkalmazni. Két fő típusa a lineáris és a sugaras. lineargradient Egy lineáris átmenetet határoz meg. Lehet vízszintes, függőleges és ferde. Vízszintes esetén az y1 és y2 koordináták azonosak, az x1 és x2 pedig különbözőek. Függőleges esetén az x1 és x2 koordináták azonosak, az y1 és y2 pedig különbözőek. Ferde esetén az x1 és x2 koordináták is, és az y1 és y2 koordináták is különbözőek. Az id tulajdonsága kötelező, ugyanis ezzel az azonosítóval hivatkozunk a grafika fill tulajdonságában a színátmenetre, hogy alkalmazzuk az elemen. A színátmenet skálája kettő vagy több színből állhat. Minden stop tag egy színt képvisel, melynek offset tulajdonsága meghatározza, hogy a szín hol kezdődik az átmenetben. A style tulajdonságának stop-color CSS tulajdonsága meghatározza az rgb színt, a stop-opacity tulajdonsága pedig az átlátszóságot az átmenetben. <defs> <lineargradient id="atmenet" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color: rgb(255,255,0); stop-opacity: 1" /> <stop offset="100%" style="stop-color: rgb(255,0,0); stop-opacity: 1" /> </lineargradient> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#atmenet)" /> </defs>

64 radialgradient Egy sugaras átmenetet határoz meg. A cx és cy tulajdonságok meghatározzák a külső kör középpontját, az r pedig a sugarát. Az fx és fy tulajdonságok meghatározzák a belső kört. Az id tulajdonsága kötelező, ugyanis ezzel az azonosítóval hivatkozunk a grafika fill tulajdonságában a színátmenetre, hogy alkalmazzuk az elemen. A színátmenet skálája kettő vagy több színből állhat. Minden stop tag egy színt képvisel, melynek offset tulajdonsága meghatározza, hogy a szín hol kezdődik az átmenetben. A style tulajdonságának stop-color CSS tulajdonsága meghatározza az rgb színt, a stop-opacity tulajdonsága pedig az átlátszóságot az átmenetben. <defs> <radialgradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color: rgb(255,255,255); stop-opacity: 0" /> <stop offset="100%" style="stop-color: rgb(0,0,255); stop-opacity: 1" /> </radialgradient> </defs> Animálás: Az elemeket egy bizonyos mértékig animálhatjuk is. Ezek az animációk jelenleg csak Firefox és Google Chrome alatt támogatottak. animate Egy animációt határoz meg. Az attributetype tulajdonságával meghatározhatjuk, hogy CSS típusú legyen. Az attributename meghatározza az animáció tárgyát, jelen esetben átlátszóság. Ennek kezdeti értékét a from, animáció utáni értékét a to tulajdonság határozza meg. A dur tulajdonság meghatározza az átmenet idejét, azaz, hogy a kezdedi állapotból mennyi idő alatt alakuljon át a végállapotba. A repeatcount tulajdonság meghatározza, hogy hányszor ismételjük meg az animációt. Ha értékét indefinite-ra állítjuk, akkor az ismétlések száma végtelen. <rect x="20" y="20" width="250" height="250" style="fill: blue"> <animate attributetype="css" attributename="opacity" from="1" to="0" dur="5s" repeatcount="indefinite" /> </rect>

65 Animálhatjuk egy grafika méretét, koordinátáit, és színét is. Ezek közül akár egyszerre többet is alkalmazhatunk. Az attributename x értéke a grafika vízszintes koordinátáját, az y értéke a grafika vízszintes koordinátáját, a width a szélességét, a height a magasságát, a fill a színét határozza meg. Az alábbi példában a fill kivételével, mindegyik attributetype tulajdonsága XML típusú. A begin tulajdonság határozza meg, hogy az animáció hány másodperc után kezdődjön. <rect id="rec" x="300" y="100" width="300" height="100" style="fill: lime"> <animate attributename="x" attributetype="xml" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> <animate attributename="y" attributetype="xml" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> <animate attributename="width" attributetype="xml" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> <animate attributename="height" attributetype="xml" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> <animatecolor attributename="fill" attributetype="css" from="lime" to="red" begin="2s" dur="4s" fill="freeze" /> </rect> Azt is meghatározhatjuk, hogy egy animáció egy másik animáció befejeztével kezdődjön csak el. Ehhez az animate elemeknek meg kell határoznunk az id tulajdonságát. Annál az animációnál, amit egy másik után közvetlenül szeretnénk elindítani, a begin tulajdonság értékét úgy kell beállítanunk, hogy a másik animáció id-ját a.end szöveggel összefűzve írjuk be az értékbe. <rect x="10" y="20" width="90" height="60"> <animatecolor id="a1" attributename="fill" from="red" to="blue" dur="3s" /> </rect> <rect x="10" y="120" width="90" height="60"> <animatecolor id="a2" attributename="fill" from="blue" to="yellow" begin="a1.end" dur="3s" /> </rect> <rect x="10" y="220" width="90" height="60"> <animatecolor id="a3" attributename="fill" from="yellow" to="green" begin="a2.end" dur="3s" /> </rect> Egy elem pozícióját úgy is animálhatjuk, hogy egy útvonalon haladjon végig. <g transform="translate(100,100)"> <text id="szoveg" x="0" y="0" style="font-family: Verdana; font-size: 24">Útvonalon halad. <animatemotion path="m 0 0 L " dur="5s" fill="freeze" /> </text> </g>

66 Ezt a szöveget az útvonalon haladás közben, például forgathatjuk és skálázhatjuk is. <g transform="translate(100,100)"> <text id="szoveg" x="0" y="0" style="font-family: Verdana; font-size: 24; visibility: hidden"> SVG szöveg <set attributename="visibility" attributetype="css" to="visible" begin="1s" dur="5s" fill="freeze" /> <animatemotion path="m 0 0 L " begin="1s" dur="5s" fill="freeze" /> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> <animatetransform attributename="transform" attributetype="xml" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> </text> </g> Ez a leírás az SVG-ről csak ismertető jellegű, több példát a w3school oldalán találhatunk: A kimaradt SVG tag-ek megtalálhatóak az alábbi linken: CANVAS VS SVG: A canvas felbontásfüggő, nem támogatja az eseménykezelőt, szegényesek a szöveges lehetőségei, míg az SVG felbonttásfüggetlen, támogatja az eseméynykezelőket. Canvas-ben a kapott képeket el lehet menteni png, vagy jpg formátumba. Az svg kiválóan alkalmas nagy renderelési területekhez, mint például a Google Maps, de minden, ami használja a DOM-ot sokkal lasabb. A canvas alkalmas nagy grafikus teljesítményt igénylő játékok készítéséhez, ahol sok tárgyat kell gyakran újrarajzoltatni, míg az SVG nem alkalmas erre. GEOLOCATION: A HTML Geolocation API a felhasználó földrajzi helyzetét határozza meg. Használható naprakész helyi információk megjelenítésére és útvonalak tervezésére is. Mivel ez veszélyezteti a felhasználó magánéletének tiszteletben tartását, csak akkor áll rendelkezésre ez a lehetőség, ha a felhasználó jáváhagyja. Egy GPS eszközön jóval pontosabb a meghatározás, mint például egy iphone-on. Első lépésben leellenőizzük, hogy a geolokációt támogatja-e a böngésző. Ha támogatott, akkor a getcurrentposition() metódus hívjuk meg, ha nem akkor megjelenítünk egy üzenetet a felhasználónak. Ha a getcurrentposition sikeres, akkor visszaad egy coordinates objektumot, amit átad, a mutasd() függvénynek, ami megjeleníti a szélességi és hosszúsági adatokat. Ez egy nagyon egyszerű geolokációs szkript, hibakezelés nélkül.

67 <p id="geo">geolokáció:</p> <button onclick="geolokacio()">geo</button> <script> var x=document.getelementbyid("geo"); function geolokacio(){ if (navigator.geolocation){ navigator.geolocation.getcurrentposition(mutasd);} else{ x.innerhtml="geolokációt nem támogatja a böngésző.";}} function mutasd(pozicio){ x.innerhtml="szélesség: "+pozicio.coords.latitude+"<br />Hosszúság:" +pozicio.coords.longitude;} </script> A getcurrentposition második paraméterének segítségével lekezelhetjük az esetleges hibákat. Akkor fut le, ha nem kapjuk meg a felhasználó helyzetét. <p id="geo">geolokáció:</p> <button onclick="geolokacio()">geo</button> <script> var x=document.getelementbyid("geo"); function geolokacio(){ if (navigator.geolocation){ navigator.geolocation.getcurrentposition(mutasd,hiba);} else{ x.innerhtml="geolokációt nem támogatja a böngésző.";}} function mutasd(pozicio){ x.innerhtml="szélesség: "+pozicio.coords.latitude+"<br />Hosszúság:" +pozicio.coords.longitude;} function hiba(error){ switch(error.code){ case error.permission_denied: x.innerhtml="a felhasználó megtagadta a geolokációs felkérést." break; case error.position_unavailable: x.innerhtml="a helyzet információk elérhetetlenek." break; case error.timeout: x.innerhtml="lejárt az idő." break; case error.unknown_error: x.innerhtml="ismeretlen hiba." break;}} </script>

68 Az eredményt megjeleníthetjük statikus térképrészletként például a Google Maps segítségével. Egyszerűen a mutasd függvény tartalmát írjuk át, és tegyünk a kódhoz egy mapholder id-jű div-et, amely majd a térképrészletet fogja tartalmazni. <div id="mapholder"></div> function mutasd(pozicio){ var latlon=pozicio.coords.latitude+","+position.coords.longitude; var img_url=" size=400x300 &sensor=false"; document.getelementbyid("mapholder").innerhtml="<img src='"+img_url+"' />";} Megjeleníthetjük dinamikus térképen is. Ehhez szintén a mutasd függvényt kell átírni, felvenni a mapholder id-jű div-et, és kibővíteni egy speciális google maps szkriptel a kódot. <script src=" function mutasd(pozicio){ lat=pozicio.coords.latitude; lon=ppozicio.coords.longitude; latlon=new google.maps.latlng(lat, lon) mapholder=document.getelementbyid('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myoptions={ center: latlon, zoom: 14, maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: false, navigationcontroloptions:{ style: google.maps.navigationcontrolstyle.small}}; var map=new google.maps.map(document.getelementbyid("mapholder"),myoptions); var marker=new google.maps.marker({position:latlon,map:map,title:"itt vagy!"});} A getcurrentposition által visszaadott objektumnak a szélességi és hosszúsági tulajdonságai mellett egyéb hasznos tulajdonságai is léteznek. szélességi fok (latitude) hosszúsági fok (longitude) a pozíció pontossága (accuracy) a tengerszint feletti magasság méterben (altitude) a magassági pozíció pontossága (altitudeaccuracy) az északi iránytól való eltérés fokban (heading) a sebesség méter per másodpercben (speed) az időbélyeg (timestamp)

69 Rendelkezésre állnak egyéb hasznos metódusok is. A watchposition, amely folyamatosan visszaadja a felhasználó aktuális helyzetét mozgás közben, ha a pozíciója frissül. A watchposition metódust a clearwatch metódus állítja meg. Ennek a lehetőségnek a kihasználására egy pontos GPS készülékre van szükség, például iphone-ra. <p id="geo">geolokáció:</p> <button onclick="geolokacio()">geo</button> <script> var x=document.getelementbyid("geo"); function geolokacio(){ if (navigator.geolocation){ navigator.geolocation.watchposition(mutasd);} else{ x.innerhtml="geolocation is not supported by this browser.";}} function showposition(position){ x.innerhtml="latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;} </script> A geolokációt az összes főbb böngésző támogatja. WEB STORAGE: A HTML5 weboldalak képesek adatok tárolására. Régebben ez cookie-kal történt, de a web storage sokkal biztonságosabb és gyorsabb. Nem tartalmazza őket a szerver összes kérése, a cookie-kal szemben, csak akkor használja, ha a szerver kéri. Ezáltal nagy mennyiségű adatot lehet benne tárolni, hogy a honlap teljesítményére negatív hatással lenne. Minden weboldal csak a saját adataihoz fér hozzá. A storage-ben az adatok kulcs - érték párban tárolódnak. Az értékek mindig string szövegként tárolódnak, ezért ne felejtsük el átalakítani másik formátumba, ha szükséges. Két új objektum van az adatok tárolására a kliens oldalon: az adatok, amelyek tárolásának nincs lejárati dátuma (localstorage) az adatok, amelyek egy munkamenet/alkalom elejéig tárolódnak (sessionstorage)

70 localstorage Ilyen típusú tárolás esetén az adatok nem törlődnek, ha bezárjuk a böngészőt, elérhetőek lesznek, a következő napban, héten, évben. Az alábbi példában leellenőrizzük, hogy támogatja-e a böngésző a web storage-t, ha igen, akkor a nev kulcsba eltároljuk a CyberZero értéket, majd az eltárolt értéket visszanyerjük és megjelenítjük. Ellenkező esetben megjelenítünk egy hibaüzenetet. <div id="ide"></div> <script> if(typeof(storage)!=="undefined"){ localstorage.nev="cyberzero"; document.getelementbyid("ide").innerhtml="név: " + localstorage.nev;} else{ document.getelementbyid("ide").innerhtml="a böngésző nem támogatja a web storaget.";} </script> A következő példa megszámolja, hogy hányszor kattintottunk a felhasználó a gombra. A szöveg értéket átalakítjuk számmá a Number metódussal, hogy növelni tudjuk az értékét. <head> <script> function szamlalo(){ if(typeof(storage)!=="undefined"){ if (localstorage.kattintasok){ localstorage.kattintasok=number(localstorage.kattintasok)+1;} else{ localstorage.kattintasok=1;} document.getelementbyid("ide").innerhtml="kattintások száma " + localstorage.kattintasok;} else{ document.getelementbyid("ide").innerhtml="a böngésző nem támogatja a web storage-t.";}} </script> </head> <body> <p><button onclick="szamlalo()" type="button">számláló</button></p> <div id="ide"></div> </body>

71 sessionstorage Ilyen típusú tárolás esetén az adatok törlődnek, a böngésző bezárásakor. <head> <script> function szamlalo(){ if(typeof(storage)!=="undefined"){ if (sessionstorage.kattintasok){ sessionstorage.kattintasok=number(sessionstorage.kattintasok)+1;} else{ sessionstorage.kattintasok=1;} document.getelementbyid("ide").innerhtml="kattintások száma " + sessionstorage.kattintasok;} else{ document.getelementbyid("ide").innerhtml="a böngésző nem támogatja a web storage-t.";}} </script> </head> <body> <p><button onclick="szamlalo()" type="button">számláló</button></p> <div id="ide"></div> </body> A web storage-t minden főbb böngésző támogat. APPLICATION CACHE: Egy webes alkalmazás gyorsítására és internetkapcsolat nélküli elérhetőségére használható. Így a felhasználó akkor is tudja használni az alkalmazást, ha nincs internetközelben, a tárolt erőforrások gyorsabban töltődnek be, és a böngésző csak a megváltoztatott erőforrásokat tölti le, így kevésbé terhelődik a szerver. A html tag manifest tulajdonsága hivatkozik egy állományra, amelyből kiolvassa a cache-elendő állományok neveit. Ebben az esetben a JavaScript fájl és a kép offline módban is elérhetőek. Fontos, hogy ha megváltoztatunk a cache-lt állományok közül valamit, akkor a mainfest állományt is változtassuk meg, különben az új tartalom nem cache-lődik be, és arégi cache-lt változat töltődik be helyette. A manifest állományok javasolt kiterjesztése appchache, MIME típusa pedig "text/cache-manifest", amelyet a szerveren kell beállítani. A weblap tartalma: <html manifest="html5.appcache"> <body> <script type="text/javascript" src="script.js"></script> <img src="kep.png" /> </body> </html>

72 A manifest fájl, egy egyszerű szöveges állomány, amely meghatározza, hogy mely állományokat kell chache-elni és melyeket nem. A fájl három részből áll: a felsorolt fájlokat az első betöltődés után cache-eli (CACHE MANIFEST) a felsorolt fájlokat soha nem cache-eli, szerverrel való kapcsolatra van szükségük (NETWORK) a felsorolt fájlok meghatároznak tartalék oldalakat, arra az esetre, ha az oldal elérhetetlen (FALLBACK) Az alábbi felsorolt fájlokat a böngésző letölti a weboldal gyökérkönyvtárából, és akkor is rendelkezésre állnak, ha a felhasználó nem csatlakozik az internethez. A html5.appcache manifest fájl tartalma: CACHE MANIFEST /style.css /script.js /kep.png Az alábbi rész meghatározza, hogy a felsorolt fájlok soha ne legyenek cache-lve, offline módban nem lesznek elérhetőek. NETWORK: login.php A network részben csillaggal lehet jelölni, hogy a CACHE MANIFEST részben felsorolt fájlok kivételével, minden egyébhez internetkapcsolat szükséges. NETWORK: * Az alábbi rész meghatározza, hogy a html5 könyvtár alatt levő összes fájl helyett az offline.html fájl kerüljön kiszolgálásra, ha nincs internetkapcsolat. Tehát az első rész az erőforrást, a második pedig a tartalék oldalt határozza meg. FALLBACK: /html5/ /offline.html Az application cache addig tárolja az állományokat, amíg a felhasználó nem törli a böngésző cache-ét, vagy a fájl nem módosul, vagy az application cache-t a programkódból direkt le nem frissítik. A # jellel kezdődő sorok a manifest fájlban megjegyzéseket határoznak meg. Ez az egyik módja, hogy szkriptből kinyerhessük, hogy mikor kell frissíteni a cache-t: # v1.0.0 Az application cache-t az IE kivételével minden főbb böngésző támogat.

73 WEB WORKERS: A web workers egy JavaScript, amely a háttérben fut, a többi szkript-től függetlenül, anélkül, hogy hatással lenne a weboldal teljesítményére. Továbbra is azt csinálhatsz, amit akarsz, kattinthatsz, kiválaszthatsz elemeket, és addig a webworkers a háttérben folyamatosan fut és teszi a dolgát. A kód elösször leellenőrzi, hogy a böngésző támogatja-e a web workers-t, ha igen, akkor létrehoz egy web workers objektumot, ami elkezdi futtatni a szkript.js nevű JavaScript kódot. A web workers objektum onmessage metódusa figyeli, hogy a szkript.js milyen üzenetet küld a számára. Ha a web workers üzenetet küld, akkor az eseményfigyelőben szereplő kód végrehajtásra kerül. Ebben az esetben az ide id-jű output elem-be írja az üzenet tartalmát. <body> <p>stopper:<output id="ide"></output></p> <button onclick="workerindit()">indítás</button> <button onclick="workerleallit()">leállítás</button><br /> <script> var w; function workerindit(){ if(typeof(worker)!=="undefined"){ if(typeof(w)=="undefined"){ w=new Worker("szkript.js");} w.onmessage = function (esemeny) { document.getelementbyid("ide").innerhtml=esemeny.data;};} else{ document.getelementbyid("ide").innerhtml="a böngésző nem támogatja a Web Workers-t.";}} function workerleallit(){ w.terminate();} </script> </body> A szkript.js ebben az esetben egy számláló, amely 500 millisecundum-onként meghívja önmagát. A timedcount függvény postmessage függvénye küldi az üzenetet a weboldalnak, amit a html kódban szereplő eseménykezelő figyel. var i=0; function timedcount(){ i=i+1; postmessage(i); settimeout("timedcount()",500);} timedcount(); Ahhoz hogy felszámoljuk a web workers objektumot, miután befejezte működését, meg kell hívnunk a terminate metódusát, hogy felszabadítsuk a böngésző és a számítógép erőforrásait. Fontos, hogy a web workers nem fér hozzá, a windows, a document és a parent objektumokhoz a DOM-ban. A web workers-t az IE kivételével minden főbb böngésző támogat.

74 SSE: Az SSE, azaz a Server-Sent Events, amikor a weblap folyamatosan frissítéseket kap a szervertől. A böngésző eddig is lekérdezhette a szervertől, hogy rendelkezésre állnak-e frissítések, azonban az SSE használatakor a szerver ezeket automatikusan elküldi, nem kell kérdéseket küldeni felé. Ez jól használható részvényárfolyamok, hírcsatornák, vagy sport eredmények frissítéséhez. Első lépésben leellenőrizzük, hogy a böngésző támogatja-e az SSE-t, ha igen, akkor készítünk egy EventSource objektumot, melynek paramétere egy url, amely egy olyan oldalra mutat, amely majd küldi a frissítéseket. Minden alkalommal, amikor az oldal egy frissítést kapott, bekövetkezik az onmessage esemény. Ekkor az onmessage eseményben található függvény kiírja a kapott adatokat az ide id-jű div-be. <div id="ide"></div> <script> if(typeof(eventsource)!=="undefined"){ var source=new EventSource("sse.php"); source.onmessage=function(esemeny){ document.getelementbyid("ide").innerhtml+=esemeny.data + "<br />";};} else{ document.getelementbyid("ide").innerhtml="a böngésződ nem támogatja az SSE-t.";} </script> Ahhoz, hogy adatokat küldhessen a szerver, szükség van egy php, vagy asp fájlra, melynek fejlécében szereplő Contetn-Type értéke "text / event-stream", és nem cache-lődik. A küldendő adatoknak mindig "data:" szöveggel kell kezdődnie. Majd a flush függvény adja vissza az adatokat a weboldalnak. Egy php példa: <?php header('content-type: text/event-stream'); header('cache-control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush();?> Egy asp példa: <% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>

75 A fenti példákban az onmessage eseményt használtuk, de egyéb események is rendelkezésünkre állnak. amikor egy kapcsolat nyílik a kiszolgálóval (onopen) amikor egy üzenet érkezik (onmessage) amikor hiba lép fel (onerror) Az SSE-t az IE kivételével minden főbb böngésző támogat. ÚJ ŰRLAPELEMEK: HTML5 input típusok: A HTML5 számos új űrlap beviteli mező típust vezet be, melyek lehetővé teszik a jobb ellenőrzést és validálást. Nem minden főbb böngésző támogatja az új beviteli mezőket. Amelyik nem támogatja, az egyszerű szöveges beviteli mezőként kezeli. color date datetime datetime-local month number range search tel time url week color Egy színválasztó mezőt határoz meg. <input type="color" name="szin" /> date Lehetővé teszi a felhasználóknak egy dátum kiválasztását. <input type="date" name="szuletesi_datum" />

76 datetime Lehetővé teszi a felhasználónak egy dátum és egy időpont kiválasztását. <input type="datetime" name="szuletesi_ido" /> datetime-local Lehetővé teszi a felhasználónak egy dátum és egy időpont kiválasztását a helyi időzónában. <input type="datetime-local" name="szuletesi_ido" /> Lehetővé teszi a felhasználónak egy cím bevitelét. Az iphone felismeri ezt a típusú mezőt, és megváltoztatja a képernyő billentyűzetét. Hozzáteszi és a.com lehetőségeket. Az űrlap elküldésekor automatikus érvényesítésen megy keresztül. <input type=" " name="level" /> month Lehetővé teszi a felhasználónak egy hónap és egy év kiválasztását. <input type="month" name="szuletesnap" /> number Lehetővé teszi a felhasználónak egy szám bevitelét. Beállíthatunk korlátozásokat a maximum (max) és minimum (min) értékeket, a lépésközt (step), és az alapértelmezett értéket (value). <input type="number" name="osztalyzat" min="1" max="5" /> range Lehetővé teszi a felhasználónak egy távolság bevitelét egy számtartományban. Beállíthatunk korlátozásokat a maximum (max) és minimum (min) értékeket, a lépésközt (step), és az alapértelmezett értéket (value). <input type="range" name="pontok" min="1" max="10" />

77 search A keresésekhez használható beviteli mező, amely úgy viselkedik, mint egy hagyományos szöveges mező. <input type="search" name="kereso" /> tel Lehetővé teszi a felhasználónak egy telefonszám bevitelét. <input type="tel" name="telefon" /> time Lehetővé teszi a felhasználónak egy időpont kiválasztását. <input type="time" name="idopont" /> url Lehetővé teszi a felhasználónak egy URL bevitelét, amely a küldés során automatikusan érvényesítésen vesz részt. Az iphone felismeri az url típusú beviteli mezőt és módosítja a képernyő billentyűzetét. Hozzáteszi a.com opciót. <input type="url" name="weblap" /> week Lehetővé teszi a felhasználónak egy hét és egy év kiválasztását. <input type="week" name="het" /> A date, datetime, datetime-local, month, number, range, time, és week típusú beviteli mezőket csak a Chrome, Safari, és az Opera támogatja. Az típusú beviteli mezőt csak a Firefox, Chrome, és Opera támogatja. A search típusú beviteli mezőt csak a Chrome és a Safari támogatja. Az url típusú beviteli mezőt csak a Firefox és a Chrome támogatja. A color típusú beviteli mezőt csak az Opera támogatja. A tel típusú mezőt jelenleg egyik fő böngésző sem támogatja.

78 A HTML5 form elemek: A HTML5 új űrlap elemeket tartalmaz. Nem minden főbb böngésző támogatja az új beviteli mezőket. Amelyik nem támogatja, az egyszerű szöveges beviteli mezőként kezeli. datalist keygen output datalist Segítségével az input mezőkhöz készíthető egy előre meghatározott lista a választható opciókkal. Az input mező list tulajdonságában hivatkozhatunk a datalist id-jára, melynek végeredményeként egy legördülő lista jön létre. <input list="gyumolcsok" /> <datalist id="gyumolcsok"> <option value="alma"> <option value="banán"> <option value="citrom"> <option value="körte"> <option value="mandarin"> </datalist> keygen Egy kulcspár generátor, amely egy biztonságos módja a felhasználók hitelesítésének. Az űrlap elküldésekor két kulcs generálódik, egy privát és egy nyilvános. A privát kulcs helyben tárolt, a nyilvános kulcsot a szerver küldi. A nyilvános kulcsot arra lehet használni, hogy egy kliens tanúsítványt készítsünk, ami a felhasználót hitelesíti a jövőben. <form action="csinald.php" method="get"> Felhasználónév: <input type="text" name="nick" /> Titkosítás: <keygen name="secure" /> <input type="submit" /> </form>

79 output Egy számítás eredményét jeleníti meg, amit egy szkript végez. <form oninput="x.value=parseint(a.value)+parseint(b.value)">0 <input type="range" name="a" value="50" />100 +<input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form> A datalist elemet csak a Firefox és az Opera támogatja. A keygen és output elemeket az IE kivételével minden főbb böngésző támogat. A HTML5 új űrlap tulajdonságai: A HTML5 számos új tulajdonságot vezetett be a form és input elemekhez. új form tulajdonságok: autocomplete novalidate új input tulajdonságok: autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

80 autocomplete Meghatározza, hogy az automatikus kiegészítés be van-e kapcsolva (on), vagy nem (off). Bekapcsolt állapotban a felhasználó által részben bevitt szavakat kiegészíti teljes alakjára. Alkalmazható a form tag-ben és az input típusok közül a text, search, url, tel, , password, dátumválasztó, range és color input mezőkkel. <form action="csinald.asp" autocomplete="on"> Vezetéknév:<input type="text" name="vnev" /><br /> Keresztnév: <input type="text" name="knev" /><br /> <input type=" " name=" " autocomplete="off" /><br /> <input type="submit" /> </form> novalidate A benne levő űrlapadatokat nem érvényesítődnek automatikusan. <form action="csinald.asp" novalidate="novalidate"> <input type=" " name="level" /> <input type="submit" /> </form> autofocus Meghatározza, hogy az elem automatikusan megkapja a fókuszt az oldal betöltődésekor. Keresztnév:<input type="text" name="knev" autofocus="autofocus" /> form Meghatározza, hogy egy külön álló űrlap mező melyik űrlaphoz tartozik. Több űrlap esetén szóközzel elválasztva kell felsorolni az űrlapokat. <form action="csinald.asp" id="urlap"> Vezetéknév: <input type="text" name="vnev" /><br /> <input type="submit" value="küldés" /> </form> Keresztnév: <input type="text" name="knev" form="urlap" />

81 formaction Meghatározza, hogy a form elküldésekor melyik fájl dolgozza fel a mezőt. Ez a tulajdonság felülbírálja a form action tulajdonságát. Csak a submit és image típusú input elemeknél alkalmazható. <form action="csinald.asp"> Név: <input type="text" name="nev" /><br /> <input type="submit" value="küldés" /><br /> <input type="submit" formaction="admin.asp" value="küldés mint Admin" /> </form> formenctype Az űrlap post küldésekor meghatározza, hogy az űrlap adatokat, hogyan kell kódolni, amikor a szerverre küldjük. <form action="csinald.asp" method="post"> Név: <input type="text" name="nev" /><br /> <input type="submit" value="küldés" /> <input type="submit" formenctype="multipart/form-data" value="küldés, mint Multipart/form-data" /> </form> fommethod Meghatározza, hogy a form elküldésekor mi a mezőt küldésének módja. Ez a tulajdonság felülbírálja a form method tulajdonságát. Csak a submit és image típusú input elemeknél alkalmazható. <form action="csinald.asp" method="get"> Név: <input type="text" name="nev" /><br /> <input type="submit" value="küldés" /> <input type="submit" formmethod="post" formaction="csinald_post.asp" value="küldés POST-al" /> </form>

82 formnovalidate Meghatározza, hogy a form elküldésekor a mezőt kell-e érvényesíteni. Ez a tulajdonság felülbírálja a form novalidate tulajdonságát. Csak a submit típusú input elemeknél alkalmazható. <form action="csinald.asp"> <input type=" " name="level" /><br /> <input type="submit" value="küldés" /><br /> <input type="submit" formnovalidate="formnovalidate" value="küldés érvényesítés nélkül" /> </form> formtarget Meghatároz egy id-t, vagy egy kulcsszót, hogy hol jelenik meg az űrlap elküldése után a válasz. Ez a tulajdonság felülbírálja, a form elem target tulajdonságát. Csak submit és image típusú elemeknél alkalmazható. <form action="csinald.asp"> Név: <input type="text" name="nev" /><br /> <input type="submit" value="küldés" /> <input type="submit" formtarget="_blank" value="küldés egy új ablakban" /> </form> width és height Meghatározza az input elem szélességét és magasságát. Csak image típusú elemeknél alkalmazható, hogy a böngésző lefoglalja a képnek a helyet és ne essen szét a weboldal elrendezése. <input type="image" src="kep.png" alt="küldés" width="48" height="48"/> list Egy datalist objektummal tölti fel a legördülö beviteli mezőt. <input list="opciok" />

83 max és min Meghatároznak egy maximális és minimális értéket a number, range, date, datetime, datetimelocal, month, week, és time típusú mezőknél. Adj meg egy utáni dátumot:<input type="date" name="datum" min=" "> multiple Meghatározza, hogy a felhasználó egynél több értéket is megadhat a mezőbe. Ez a tulajdonság, az és file típusú mezőknél alkalmazható. <input type="file" name="fajl" multiple="multiple" /> pattern A mezőbe bevitt értéknek meg kell felelnie a pattern tulajdonságban megadott regurális kifejezésnek. A text, search, url, tel, és password mezőkön alkalmazható. Az alábbi példában 3 betű adható meg, és sem szám, sem speciális karakter nem szerepelhet benne. Országkód: <input type="text" name="country_code" pattern="[a-za-z]{3}" title="országkód" /> placeholder A mezőhöz egy rövid tippet jelenít meg, hogy a mezőbe milyen értéket vár a programozó. Például milyen formátumú szöveget. Az utalás addig jelenik meg a mezőben, amég üres. Amint fókuszba kerül, eltűnik az utalás. Alkalmazható text, search, url, tel, és jelszó típusú mezőkre. <input type="text" name="nev" placeholder="add meg a neved" /> required Meghatározza, hogy a beviteli mezőt kötelezően ki kell tölteni az űrlap elküldése előtt. Alkalmazható, text, search, url, tel, , password, dátumválasztó, number, checkbox, radio, és file típusú mezőkre. <input type="text" name="felhasznalonev" required="required" />

84 step Ha a lépésköz 3, akkor a beviteli mezőbe 3-al maradék nélkül osztható egész számok kerülhetnek be. A min és max tulajdonságokkal együtt használva meghatározhatunk egy sorozatot. Alkalmazható a number, range, date, datetime, datetime-local, month, week és time típusú mezőknél. <input type="number" name="pontok" step="3" /> Az autocomplete, width és height tulajdonságokat mindegyik fő böngésző támogatja. A list tulajdonságot, csak a Firefox és az Opera támogatja. A min, max és step tulajdonságokat csak a Chrome és az Opera támogatja. A novalidate, formnovalidate, pattern, és required tulajdonságokat csak a Firefox, Chrome, és az Opera támogatja. Az autofocus, form, formaction, formenctype, formmethod, formtarget, multiple, és placeholder tulajdonságokat az IE kivételével minden fő böngésző támogat. HTML5 ELEMEK (105): <!-- megjegyzes --> A HTML kódba ennek az elemnek a segítségével lehet megjegyzéseket beszúrni. A megjegyzések nem jelennek meg a böngészőben, csak a forráskódban. Használatával ismertethetjük a kódot. Hasznos lehet, ha többen dolgozunk egy kódon, vagy ha egy későbbi időpontban szeretnénk szerkeszteni a kódot, hiszen a megjegyzések mindenki számára áttekinthetőbbé teszik azt. <!-- Ez itt egy bekezdés --> <p>hol volt, hol nem volt...</p> Továbbá az olyan böngészőkben, amelyek nem támogatják a szkripteket, illetve le vannak bennük tiltva, nagy segítséget jelenthet, hiszen ügyes használatukkal a nem értelmezett kódok elrejthetőek a böngészők elől, így nem okoznak nem várt hibát. Az alábbi kódrészletben például a böngészők, amelyek felismerik a JavaScript kódot, azok beolvassák az uzenet nevű függvényt, amelyek pedig nem, azok egyszerű megjegyzésnek veszik, így nem okoznak hibát. A // jel a JavaScript megjegyzést jelöli. Ebben az esetben a használata azért fontos, hogyha a böngésző felismeri a JavaScript kódot, akkor a HTML megjegyzést, nem veszi figyelembe, hiszen a JavaScript is megjegyzésnek veszi, és lefuthat a JavaScript kód hiba nélkül. <script type="text/javascript"> <!-- function uzenez(){alert("tiszteletem!")} //--> </script>

85 Léteznek speciális esetek arra, hogyha csak akkor szerenénk, hogy lefusson egy bizonyos kódrészlet, ha egy feltétel teljesül. Például az alábbi style formázás, ami a cim id-jű elemre vonatkozik, csak az Internet Explorer 7 előtti változatokon fut le. <!--[if lt IE 7]> <style> #cim{margin-left:0} </style> <![endif]--> A <!-- --> tag-et minden főbb böngésző támogatja. Ennek az elemnek nincs általános tulajdonsága, és nem támogatja az esemény tulajdonságokat. <! DOCTYPE> A HTML5 dokumantumban ennek az elemnek kell a legelsőnek lennie. Még a html tag előtt kell szerepelnie. Ez nem egy tag, hanem egy utasítás, hogy a böngésző milyen HTML verzióban értelmezze a kódot, így tudja, hogy milyen típusú dokumentumra számíthat, milyen nyelven írta a programozó. A HTML5-ben jóval egyszerűbb és rövidebb, mint az előző HTML verziókban. <!DOCTYPE html> <a> Egy hivatkozást határoz meg, amely az oldalunkról elmutat egy másik oldalra. Alapértelmezettként a még nem látogatott linkek kék színnel és aláhúzva jelennek meg a böngészőben. A már meglátogatott linkek lila színnel és aláhúzva jelennek meg. Az éppen aktív linkek pedig piros színnel és aláhúzva jelennek meg. Ezeket CSS-ből tetszőlegesen megváltoztathatjuk. HTML4-el szemben, HTML5-ben az <a> mindig hiperhivatkozás, nem lehet horgonyszöveg. Ha az <a> elemnek nincs href tulajdonsága, akkor a hivatkozás helytartó, nem irányít el az oldalról. <a href=" weboldalára mutat</a> A HTML4-hez képest az <a> elem tulajdonságai közül eltávolításra került a charset, coords, name, rev, és shape, valamint hozzáadták az új media és type tulajdonságokat. A href tulajdonság az <a> elem legfontosabb tulajdonsága. Meghatározza a hivatkozás URL-jét, amire a link mutat. A href értéke lehet abszolót URL, amely egy másik oldalra mutat ( valamint relatív URL, amely az aktuális weboldalon egy másik oldalra, vagy fájlra mutat (nevjegy.html). A hreflang tulajdonság meghatározza a hivatkozás végén lévő oldal, vagy dokumentum nyelvét. A tulajdonság csak akkor használható, ha a href tulajdonság értékét is meghatározzuk. A hreflang csak tájékoztató jellegű tulajdonság, nem befolyásol a megjelenésen semmit. Értéke egy két betűs ISO formátumú nyelvkód, amelyet az általános tulajdonságoknál már részleteztünk.

86 A media tulajdonság meghatározza, hogy a hivatkozott dokumentum megjelenését milyen eszközre optimalizálták. A tulajdonság csak akkor használható, ha a href tulajdonság értékét is meghatározzuk. A media tulajdonságot a source elemnél már részleteztük. A rel tulajdonság meghatározza az aktuális dokumentum és a csatolt dokumentum közötti kapcsolatot. A tulajdonság csak akkor használható, ha a href tulajdonság értékét is meghatározzuk. Lehetséges értékei: az eredeti egy alternatív változata, például nyomtatott, vagy lefordított (alternate) egy hivatkozás az irat szerzőjére (author) egy állandó könyvjelző (bookmark) hivatkozás egy segítséget nyújtó dokumentumra (help) hivatkozás a szerzői jogi információkra (license) hivatkozás a következő dokumentumra (next) meghatározza, hogy a keresőrobotok ne kövessék a linket, mert mondjuk fizetett hírdetés (nofollow) meghatározza, hogy a böngésző ne küldjön HTTP referer fejlécet, ha a felhasználó követi a hivatkozást, így az oldal amire rámutatunk nem tudja lekövetni, hogy a mi oldalunkról jutott el az övére (noreferrer) meghatározza, hogy a cél dokumentumot cache-lni kell (prefetch) hivatkozás az előző dokumentumra (prev) hivatkozás egy kereső eszközre (search) hivatkozás az aktuális dokumentum egy kulcsszavára, cimkéjére (tag) A target tulajdonság meghatározza, hogy a hivatkozott dokumentum hol nyíljon meg, ha a felhasználó rákattint. Értékének előre definiált kulcsszavakat, vagy egy frame elem name tulajdonságát adhatjuk meg. A tulajdonság csak akkor használható, ha a href tulajdonság értékét is meghatározzuk. a dokumentumot egy új ablakban, vagy egy új lapon nyitja meg (_blank) alapértelmezésként a dokumentumot ugyanabban a keretben nyitja meg, ahol rákattintottunk (_self) a dokumentumot a szülő keretében nyitja meg (_parent) a dokumentumot ugyanabban a teljes testes ablakban nyitja meg (_top) a dokumentumot a meghatározott keretben nyitja meg (egy frame neve) A type tulajdonság meghatározza, hogy a hivatkozott dokumentum MIME típusát. A tulajdonság csak tájékoztató jellegű. Az összes szabványos MIME típus elérhető a weboldalon. <abbr> Egy rövidítést, vagy mozaikszót határoz meg. A helyesírás ellenőrzők, fordító rendszerek, és kereső motorok számára nyújt hasznos információt. Az általános tulajdonságok közül célszerű a title tulajdonságot használni az <abbr> elemeknél, hogy a felhasználó is lássa a jelentését, ha fölé viszi az egeret. A <abbr title="world Wide Web">www</abbr> egy elég ismert mozaikszó.

87 <address> Meghatározza a dokumentum, vagy cikk szerzőjének az elérhetőségi adatait. Ha egyszerűen a <body> belsejében található, akkor a teljes dokumentumra vonatkozik, ha az <article> elem belsejében található, akkor csak az adott cikkre vonatkozik. A legtöbb böngészőben alapértelmezésként dőlt betűkkel jelenik meg, előtte és utána térköz található. Általában a <footer> elemben használják. Nem póstai címek jelölésére használható, hanem elérhetőségi adatok megjelenítéséere, amiben természetesen póstai cím is szerepelhet. <address> Írta <a href="mailto:[email protected]">cyberzero</a>.<br /> Látogass meg:<br /> CyberZero.tk<br /> 1221, Budapest<br /> Hungary </address> <area> Meghatároz egy kattintható területet egy képen belül. Az <area> mindig egy <map> elembe van ágyazva. <img src ="kep.png" alt="kattintható területekkel rendelkező kép" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="valami.htm" alt="valamire mutat" /> <area shape="circle" coords="90,58,3" href="valami2.htm" alt="valami 2-re mutat" /> <area shape="circle" coords="124,58,8" href="valami3.htm" alt="valami 3-ra mutat" /> </map> A HTML4-hez képest az <area> elem tulajdonságai közül eltávolításra kerül a nohref, valamint hozzáadták az új hreflang, media, rel és type tulajdonságokat. Az alt tulajdonság egy alternatív szöveget határoz meg, ami akkor jelenik meg, ha a kép valamilyen okból kifolyólag nem jeleníthető meg. Ez adódhat lassú kapcsolatból, vagy az src tulajdonság értékében félreírt URL-ből, vagy ha a felhasználó képernyő olvasót használ. A tulajdonság csak akkor használható, ha a href tulajdonság értékét is meghatározzuk. A coords tulajdonság határozza meg annak a területnek a méretét, formját, elhelyezkedését, amit kattinthatóvá szeretnénk tenni. A koordináták a bal felső sarokból 0,0-tól indulnak. Ha a shape tulajdonság értéke rect, akkor a coords tulajdonsága x1,y1,x2,y2 érték lehet, ami a bal felső sarkát és jobb alsó sarkát határozza meg egy téglalapnak. Ha a shape tulajdonság értéke circle, akkor a coords tulajdonsága x,y,r érték lehet, ahol x,y a kör középpontját, r pedig a sugarát határozza meg. Ha a shape tulajdonság értéke poly, akkor a coords tulajdonsága y1,y1,x2,y2,..,xn,yn érték lehet, ahol az egyes koordináta párok a sokszög egymás után következő csúcspontjait határozzák meg. A href, hreflang, media, és rel tulajdonságait korábban már részleteztük.

88 A shape tulajdonság megadja a kattintható terület alakját. A tulajdonság csak akkor használható, ha a coords tulajdonság értékét is meghatározzuk. Alapértelmezésként az egész régió kattintható területűvé válik. négyszö alakú lesz a terület (rect) kör alakú lesz a terület (circle) sokszög alakú lesz a terület (poly) A target és type tulajdonságait korábban már részleteztük. <article> Egy független, önálló tartalmat határoz meg. Például egy fórum bejegyzést, blogbejegyzést, egy új sztorit, vagy hozzászólást. <article> <h1>ez egy cikkh1> <p>ide kerül a cikk tartalma...</p> </article> <aside> Egy olyan tartalom, amit az őt körülvevő tartalomhoz kapcsolódik, de hozzá képest félre kell helyezni. Például egy sáv a cikkeknek. <p>idén nyáron a barátnőmmel voltam a Balatonon.</p> <aside> <h4>balaton</h4> <p>a Balaton Közép-Európa legnagyobb tava.</p> </aside> <audio> Az audio elemet korábban már részleteztük.

89 <b> Félkövér szövegstílust határoz meg. Használata helyett célszerű a CSS font-wight tuljdonságának értékét bold-ra állítani. Végső megoldásként alkalmazzuk a <b> elemet. Ha tehetjük a címeket <h1>-től <h6>-ig terjedő elemekkel, a hangsúlyos szöveget az <em> elemmel, a fontos szöveget a <strong> elemmel és a szövegkiemelővel kiemelt szöveget a <mark> elemmel jelöljük a <b> elem helyett. <p>a fű<b>zöld</b>, az ég pedig <b>kék</b>.</p> <base> A <base> elem határozza meg egy dokumetumra a relatív hivatkozásainak URL-jét, tehát, ha egy link relatívan a valami.html-re hivatkozik, akkor azt a böngésző az aktuális könyvtárban keresi, de a <base> elemmel elérhető, hogy minden ilyen hivatkozást az oldalon egy másik könyvtárban keressen. Egy dokumentumban maximum egy ilyen elem lehet, és az kötelezően a <head> elemben. Ajánlott a <base> elemet a <head> első sorába tenni, hogy minden későbbi elem hozzáférjen ehhez az információhoz. A <base> elem két tulajdonsága közül kötelező legalább egyet alkalmazni, de lehet egyszerre mindkettőt is. <head> <base href=" target="_blank" /> </head> <body> <img src="kep.png" alt="ezt a képet a kepek mappából hívjuk elő" /> </body> Két tulajdonsága a href és a target, melyeket korábban már részleteztünk. <bdi> Lehetővé teszi a az őt körülvevő szövegtől függetlenül való formázását, ami hasznos lehet, ha a felhasználók által generált tartalomról nem tudjuk, hogy milyen. Például felhasználóneveknél alkalmazható. <ul> </ul> <li><bdi>cyberzero</bdi> nevű felhasználó: 80 pontot ért el</li> ان< li><bdi > < bdi />إي nevű felhasználó: 40 pontot ért el</li> A <bdi> elemet jelenleg csak a Firefox és a Chrome támogatja.

90 <bdo> Lehetővé teszi a jelenlegi szöveg irányának megváltoztatását a körülötte levőhöz képest. <bdo dir="rtl"> Ez a szöveg balról jobbrairányú. </bdo> A dir tulajdonság határozza meg a szöveg irányát. Ennek a tulajdonságnak az értékét kötelező meghatározni a <bdo> elem használatakor. Az alapértelmezett ltr érték esetén balról jobbra, az rtl érték esetén pedig jobbról balra irányú a szöveg. <blockquote> Egy más forrásból idézett szöveget határoz meg. <blockquote cite=" For 50 years, WWF has been protecting the future of nature. The world s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. WWF's unique way of working combines global reach with a foundation in science, involves action at every level from local to global, and ensures the delivery of innovative solutions that meet the needs of both people and nature. </blockquote> A cite tulajdonsága határozza meg az idézett oldal szövegének a forrását egy URL értékben. Ez nem tesz semmi különlegeset, de egy jó szokás megadni a forrás URL-jét. <body> A <body> elem határozza meg a dokumentum testét, amely tartalmazza az összes tartalmat az oldalon. HTML5-ben az összes tulajdonságát eltávolították, mert feleslegessé váltak. <br /> Egy sortörést szúr be a szövegbe. Hasznos a szövegek tördelésénél, amikor a következő sort úgy szeretnénk új sorban kezdeni, hogy az ne egy külön bekezdés legyen, hanem a jelenlegi folytatása. <p>itt egy bekezdés, ahol van<br />sortörés.</p>

91 <button> Egy kattintható gombot határoz meg, amely az input gombtól abban különbözik, hogy itt a gomb tartalma nem csak egy szöveg, hanem kép is lehet. <button type="button" onclick="alert('rámkattintottál!')">kattints</button> Az autofocus tulajdonság határozza meg, hogy a gomb automatikusan megkapja-e a fókuszt az oldal betöltődésekor. A disabled tulajdonság letiltja a gombot, melynek során a letiltott gomb használhatatlan. Ez hasznos lehet, ha a gombra a felhasználónak addig nincs lehetősége kattintani, amég egy másik feltétel nem teljesül, például nem jelölt be egy jelölőnégyzetet. Ezután a JavaScript kód eltávolítja a disabled tulajdonságot, és a felhasználó már kattinthat a gombra. A form, formaction, formenctype, formmethod, formnovalidate, és formtarget tulajdonságait a korábbiakban már részleteztük. A name tulajdonság arra használható, hogy egy űrlap benyújtásakor a nyomtatványon szerepeljen, vagy ha JavaScript-ből hivatkozni akarunk rá, akkor ez alapján is megtehetjük. Több gomb is kaphatja ugyanazt a nevet. A type tulajdonságának megadása kötelező. Meghatározza, hogy a gomb hogy viselkedjen. a gomb egy egyszerű kattintható gomb (button) alapértelmezésként a gomb egy űrlap elküldésére használható (submit) alaphelyzetbe állítja az őt tartalmazó form összes mezőjét, a kitöltöttek értékét kitörli (reset) A value tulajdonság meghatározza egy gomb alapértelmezett értékét. <canvas> A <canvas> elemet a korábbiakban már részleteztük.

92 <caption> Egy táblázat címét határozza meg. A <caption> elemet közvetlenül a <table> elem után kell beilleszteni. Alapértelmezésként a táblázat címe középre van igazítva a táblázat felett, azonban a CSS text-align és caption-side tulajdonságokkal ezt könnyen megváltoztathatjuk. <table border="1"> <caption>havi nyeremény</caption> <tr> <th>hónap</th> <th>nyeremény</th> </tr> <tr> <td>január</td> <td>$100</td> </tr> </table> HTML5-ben a <caption> elem align tulajdonságát eltávolították, mert feleslegessé vált, így egyetlen egyedi tulajdonsággal sem rendelkezik. <cite> Meghatározza egy mű címét. Például könyvét, egy dalét, egy filmét, egy TV-show-jét, egy festményét, egy szoborét. A szerző neve nem tartozik a mű címéhez. <p><cite>the Scream</cite> melyet Edward Munch festett 1893-ban.</p> <code> Segítségével egy számítógépes kódot jelenítjetünk meg a képernyőn. <code>számítógépes kód</code>

93 <col> Egy <colgroup> elemben meghatározza egy oszlop tulajdonságait, így egy teljes oszlopra megadhatunk egy formázást, ahelyet, hogy az oszlop minden celláját formáznunk kéne. <table border="1"> <colgroup> <col span="2" style="background-color:red" /> <col style="background-color:yellow" /> </colgroup> <tr> <th>isbn</th> <th>cím</th> <th>ár</th> </tr> <tr> <td> </td> <td>my first HTML</td> <td>$53</td> </tr> </table> A HTML5-ben eltávolították az align, char, charoff, valign és width tulajdonságát, mert ezek feleslegessé váltak. A span tulajdonsága határozza meg, hogy hány oszlopra vonatkozzanak a tulajdonságok. <colgroup> Meghatározza oszlopok egy csoportosítását. A HTML5-ben eltávolították az align, char, charoff, valign és width tulajdonságát, mert ezek feleslegessé váltak. A span tulajdonsága határozza meg, hogy hány oszlopra vonatkozzanak a tulajdonságok.

94 <command> Meghatároz egy parancsot, amire a felhasználó hivatkozhat. A <command> elem része lehet egy helyi menünek, vagy egy eszköztárnak a <menu> elem segítségével, vagy elhelyezhető bárhol az oldalon, ahol gyorsbillentyű segítségével bármikor használható. <menu> <command type="command" label="mentes" onclick="mentes()">mentés</command> </menu> A checked tulajdonsága csak checkbox vagy radio type tulajdonsággal rendelkező elemeknél határozható meg. Az ilyen tulajdopnsággal rendelkező elemek előre be lesznek pipálva az oldal betöltődésekor. A disabled tulajdonságát korábban már részleteztük. Az icon tulajdonsága egy kép URL-jére mutat, amely a parancs képét határozza meg. A label tulajdonság a felhasználó számára meghatároz egy címkét a parancs mellé. A radiogroup tulajdonság csak radio type tulajdonsággal rendelkező elemeknél használható. Meghatározza a parancsok egy csoportjának a nevét, amit a parancs aktivál, vagy átbillent a másik értékére. A type tulajdonság meghatározza a <command> elem típusát. alapértelmezésként egyszerű parancs (command) a parancs egy jelölőnégyzet (checkbox) a parancs egy rádiógomb (radio) A <command> elemet és disabled és type tulajdonságát jelenleg csak az IE támogatja. A checked, icon, label, és radiogroup tulajdonságát jelenleg egyik főbb böngésző sem támogatja. <datalist> A <datalist> elemet a korábbiakban már részleteztük.

95 <dd> A definíciós listán belül egy definíció, leírását (definícióját) határozza meg. A <dd> elemen belül alkalmazhatóak bekezdések, sortörések, képek, linkek, listák, stb. <dl> </dl> <dt>kávé</dt> <dd>meleg és fekete ital</dd> <dt>tej</dt> <dd>hideg és fehér ital</dd> <del> Egy szöveget határoz meg, melyet már töröltek a dokumentumból. A böngészők általában áthúzott betűstílussal jelölik. <p>a kedvenc színem a <del>piros</del> <ins>kék</ins>!</p> A cite tulajdonsága hivatkozik egy URL-ra, ami megmagyaráza, hogy miért törölték a szöveget. A datetime tulajdonsága meghatározza a dátumot és időt, hogy mikor került törlésre a szöveg. Az érték formátuma YYYY-MM-DDThh:mm:ssTZD ( T22:55:03Z). <details> A felhasználó a <details> által tárolt szöveget, megjeleníthetik, vagy elrejtheti. <details open="open"> <summary>copyright </summary> <p> - CyberZero. Minden jog fentartva.</p> <p>minden tartalom és kép a weboldalon CyberZero tulajdonát képezi.</p> </details> Az open tulajdonság meghatározza, hogy a részleteknek láthatónak kell lennie. A <details> elemet, és az open tulajdonságát jelenleg csak a Chrome támogatja.

96 <dfn> Egy definiciós kifejezést határoz meg. <dfn>definíciós kifejezés</dfn> <div> Meghatároz egy szakaszt a dokumentumban, melynek elemeit egy csoportba szervezi, így ezek a csoportok CSS-el formázhatóak lesznek. A böngészők mindíg tesznek egy sortörést a <div> elem elé és mögé. <div style="color: #00FF00"> <h3>ez egy fejléc</h3> <p>ez egy bekezdés.</p> </div> HTML5-ben eltávolították az elem align tulajdonságát, mert elavultá vált. Helyette CSS-ben igazíthatjuk a tartalmát. <dl> A <dl> tag határozza meg a definíciós listát. <dl> </dl> <dt>kávé</dt> <dd>meleg és fekete ital</dd> <dt>tej</dt> <dd>hideg és fehér ital</dd> <dt> A <dt> tag meghatároz egy elemet a definíciós listában. <em> Egy kihangsúlyozott szöveget határozza meg. <em>kihangsúlyozott szöveg</em>

97 <embed> Egy tárolót határoz meg egy külső alkalmazás interaktív tartalma számára. <embed src="plugin.swf" /> A height tulajdonság meghatározza a tároló magasságát. Az src tulajdonság hivatkozik a külső fájl URL-jére. A type tulajdonság megadja az src által hivatkozott fájl MIME típusát, melyet korábban részleteztünk. A width tulajdonság meghatározza a tároló szélességét. <fieldset> Összekapcsolja a beviteli mezőket egy csoportba, és köréjük egy dobozt rajzol. <form> <fieldset> <legend>személyes:</legend> Név: <input type="text" /><br /> <input type="text" /><br /> Születésnap: <input type="text" /> </fieldset> </form> A disabled, form és name tulajdonságát korábban már részleteztük. <figcaption> A <figure> elem első vagy utolsó eleme lehet. A kép magyarázó szövegeként működik, mint egy képaláírás. <figure> <img src="kep.png" alt="egy kép" /> <figcaption>ez egy képaláírás</figcaption> </figure>

98 <figure> Egy önálló tartalmat határoz meg, melyhez magyarázat tartozik., például illusztrációk, ábrák, fotók, kódlisták, stb... <figure> <img src="kep.png" alt="egy kép" /> <figcaption>ez egy képaláírás</figcaption> </figure> <footer> Meghatározza a dokumentum lábléc szakaszát, mely információkat tartalmazhat az irat szerzőjéről, szerzői jogokról, elérhetőségekről, továbbá linkeket a felhasználási feltételekről. Egyszerre több <footer> elemet is tartalmazhat egy dokumentum. <footer> <p>post-olta: CyberZero</p> <p><time pubdate datetime=" "></time></p> </footer> <form> Egy űrlapot határoz meg, mely űrlapelemeket tartalmazhat: input textarea button select option optgroup fieldset datalist output label HTML5-ben eltávolították accept tulajdonságát, valamint hozzáadták az autocomplete és a novalidate tulajdonságokat.

99 <form action="csinald.php"> Vezetéknév: <input type="text" name="vnev" value="cyber" /><br /> Keresztnév: <input type="text" name="knev" value="zero" /><br /> <input type="submit" value="küldés" /> </form> Az accept-charset tulajdonsága meghatározza az űrlap karakterkódolását. Alapértelmezett értéke az "UNKNOWN" jelentése, hogy kódolása megegyezik a dokumentuméval. A tulajdonság értékeit szóközökkel elválasztva sorolhatjuk fel, így több kódolás is meghatározható. A telje listája a kódolásoknak megtalálható a következő címen: Az action tulajdonsága határozza meg azt az URL-t, ahova küldődnek az űrlap adatok. Az autocomplete, enctype, method, name, novalidate és target tulajdonságait korábban már részleteztük. <h1> - <h6> Segítségükkel meghatározhatók a fejezetek. A <h1> elem határozza meg a legfontosabb címet, a <h6> pedig a legkevésbé fontos címet. <h1>első címsor</h1> <h2>második címsor</h2> <h3>harmadik címsor</h3> <h4>negyedik címsor</h4> <h5>ötödik címsor</h5> <h6>hatodik címsor</h6> HTML5-be az align tulajdonságát eltávolították, mert feleslegessé vált. Az igazítást CSS-ben ajánlott megvalósítani. <head> A <head> elem egy konténer, a fej elemeknek, mint példáaul a cím, a stílusok, szkriptek, meta információk. A <head> elemnek kötelezően tartalmaznia kell egy <title> elemet, továbbá tartalmazhat még <style>, <base>, <link>, <meta>, <script>, <noscript>, és <command> elemeket. HTML5-ben a profile tulajdonságát eltávolították.

100 <header> Meghatároz egy fejléc szakaszt a dokumentumban. Tartalmazhatja a bevezető sorokat és a navigáció linkeket. Egy dokumentum egyszerre több <header> elemet is tartalmazhat. Egy <header> elemet nem lehet elhelyezni egy <footer>, <address>, vagy egy másik <header> elemben. <article> <header> <h1>a cikk címsora</h1> <p><time pubdate datetime=" "></time></p> </header> <p>a cikk</p> </article> <hgroup> A <hgroup> elem fejléc elemek csoportosítására használható olyankor, amikor a cím többszintű. <hgroup> <h1>az UFO-k szaporodása</h1> <h2>a Földi környezetbent</h2> </hgroup> <p>és ide jöhet a maszlag...</p> <hr /> Egy tematikus szünetet képez a dokumentumban, például támaváltáskor, így elválasztva a két tartalmat. A <hr/> elem vízszintes vonalként jelenik meg a böngészőkben, de szemantikai szempontból, és nem prezentációsból. <h1>html</h1> <p>a HTML a weboldalak leíró nyelve...</p> <hr /> <h1>css</h1> <p>a CSS meghatározza a HTML elemek kinézetét...</p> HTML5-ben az align, noshade, size és width tulajdonságát eltávolították elavultsága miatt. Használjunk helyette CSS formázást.

101 <html> A dokumentum gyökerét képviseli, mely a <! DOCTYPE> kivételével minden más elemnek a legkülső konténere. Új tulajdonsága a manifest mely megadja a Cache-léshez szükséges dokumentumot, melyet korábban már részleteztünk. Az xmlns tulajdonsága meghatározza az XML névterét. <i> Egy másfajta hangot, vagy hangulatot fejez ki. A böngészők általában dőlt betűvel jelenítik meg. Használható szakkifejezések jelzésére, egy mondatban egy másik nyelv, egy gondolat, vagy egy hajó nevének jelzésére. Az <i> elem használatáta csak akkor javasolt, ha nincs megfelelő szemantikus elem. <p>a kocsim neve <i>villám</i>, mert nagyon gyors.</p> <iframe> Egy keretet határoz meg, mely segítségével egy másik dokumentumot beágyazhatunk az aktuális dokumentumba. <iframe src=" HTML5-ben eltávolították a frameborder, longdesc, marginheight, marginwidth, és scrolling tulajdonságát, valamint hozzáadták a sandbox, seamless és srcdoc tulajdonságokat. A height és name tulajdonságát korábban már részleteztük. A sandbox tulajdonságának segítségével korlátozhatjuk a beágyazott keret tartalmát. Üres érték esetén az összes korlátozás alkalmazódik. Szóközökkel elválasztva a használható előre definiált értékeit felsorolhatjuk, melyek mindegyike megszüntet egy-egy korlátozást. Az összes korlátozás vonatkozik rá ("") Lehetővé teszi az űrlapok beküldését a keretből (allow-forms) Lehetővé teszi, hogy a keret tartalmát azonos származásúnak tekintsük, mint az őt tartalmazó dokumentumot (allow-same-origin) Lehetővé teszi a szkriptek futását a keretben (allow-scripts) Lehetővé teszi hogy a keretből navigáljuk az őt tartalmazó dokumentum tartalmát (allow-top-navigation) A seamless tulajdonság meghatározza, hogy az <iframe> elem úgy fog kinézni, mintha az őt tartalmazó dokumentum része lenne. Nem fog kerettel és görgető sávval rendelkezni. Az src tulajdonsága meghatározza a beágyazandó dokumentum URL-jét.

102 Az srcdoc tulajdonság meghatározza, hogy milyen HTML kód jelenjen meg a keretben. A srcdoc tulajdonság felülbírálja az src tulajdonság értékét. A tulajdonságot ajánlott együt használni a sandbox és seamless tulajdonságokkal. A width tulajdonságát a korábbiakban már részleteztük. A sandbox tulajdonságot csak a Chrome és Safari támogatja. A seamless és srcdoc tulajdonságát jelenleg egyik fő böngésző sem támogatja. <img> Meghatároz egy képet a dokumentumban. Kötelező tulajdonságai az src és az alt. <img src="kep.png" alt="ez egy kép" /> HTML5-ben az align, border, hspace és vspace tulajdonságai elavultá váltak, ezért eltávolították őket. Az src tulajdonsága hivatkozik a megjelenítendő kép URL-jére. Az alt tulajdonsága egy alternatív szöveget jelenít meg. A height és width tulajdonságát korábban már részleteztük. Az ismap tulajdonság meghatározza, hogy a kép része egy szerver oldali kép térképnek, ami egy kattintható terület a képen. Ha rákattintunk, akkor koordinátákat küldünk a szervernek az URL kérdés szövegében. Az ismap tulajdonság csak akkor engedélyezett, ha az <img> elem egy <a> elemnek, amelynek van érvényes href tulajdonsága. Ebben az esetben a csinald.asp, amire hivatkozunk, megkapja a kattintás koordinátáit, a képen való kattintáskor, és úgy nyílik be az ablakba, hogy már tudja azokat, csak ki kell nyernünk őket. <a href="csinald.asp"> <img src="kep.png" ismap="ismap" alt="ez egy kép" /> </a> A usemap tulajdonság meghatározza, hogy a kép része egy kliens oldali kép térképnek, ami egy kattintható terület a képen. A kép térkép egy <map> elem, melynek id tulajdonságára hivatkozhatunk az <img> elem usemap tulajdonságában.

103 <input> Egy beviteli mezőt határoz meg, ahol a felhasználó adatokat vihet be. <form action="csinald.php"> Vezetéknév: <input type="text" name="vnev" /><br /> Keresztnév: <input type="text" name="knev" /><br /> <input type="submit" value="küldés" /> </form> Az accept tulajdonsága meghatározza, hogy a beviteli mező milyen típusú fájlokat fogad el például egy fájl feltöltésekor. A tulajdonság, csak a file típusú beviteli mezőknél alkalmazható. Ez a tulajdonság ellenőrzésre nem használható, a fájl feltöltését szerver oldalon mindíg ellenőrini kell, mert veszélyforrást jelent. Egynél több érték esetén vesszővel lehet elválasztani egymástól az értékeket. audió fájlok (audio/*) videó fájlok (video/*) kép fájlok (image/*) bármilyen típusú fájl beállítható a MIME típusával (MIME típus) Az alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max tulajdonságát korábban már részleteztük. A maxlength tulajdonsága meghatározza a maximálisan engedélyezett karakterek számát, ami bevihet a felhasználó a mezőbe. A min, multiple, name, pattern, és placeholder tulajdonságát korábban már részleteztük. A readonly tulajdonság meghatározza, hogy a beviteli mező csak olvasható, a felhasználó nem tud bele gépelni, nem tudja szerkeszteni, de ki tudja jelölni és ki tudja belőle másolni a szöveget. Arra használható, ha a felhasználó számára csak egy feltétel teljesülése esetén szeretnénk engedélyezni a szerkesztést, ekkor JavaScript segítségével eltávolíthatjuk a readonly értéket. A required tulajdonságát a korábbiakban már részleteztük. A size tulajdonság segítségével megadhatjuk egy beviteli mező szélességét karakterekben, azaz, hogy egyszerre hány karakter látszódjon a képernyőn a beviteli mezőben. Alapértelmezettként ez 20 karakter. A size tulajdonság csak text, search, tel, url, , és password típusú beviteli mezőknél alkalmazható. Az src megadja a a kép url-jét ami a submit gombon látszik, de ez csak az image típusú submit gomboknál alkalmazható. A step tulajdonságát korábban már részleteztük.

104 A type tulajdonság meghatározza a beviteli mező típusát. egy kattintható gomb (button) egy jelölőnégyzet (checkbox) színválasztó (color) dátumválasztó: év, hó, nap (date) dátum és időválasztó: év, hó, nap, óra, perc, másodperc, időzóna (datetime) dátum és időválasztó: év, hó, nap, óra, perc, másodperc (datetime-local) egy cím bevitelére alkalmas mező ( ) egy fájlválasztó mező Tallózás gombbal (file) egy rejtett mező (hidden) meghatároz egy képet Küldés gombként (image) hónapválasztó: év, hónap (month) szám bevitelére alkalmas mező (number) jelszó bevitelére alkalmas mező, ahol a karakterek rejtettek (password) rádiógomb (radio) egy tartományon belül meghatároz egy számot, például csúszka segítségével(range) visszaállítja alapértelmezettre az összes mező értékét (reset) szöveg keresésére alkalmas mező (search) egy küldés gomb (submit) telefonszám bevitelére alkalmas mező (tel) egysoros szöveg beviteli mező (text) egy időpont bevitelére alkalmas mező (time) egy URL bevitelére alkalmas mező (url) hét választó: év, hét (week) A value tulajdonság a mező alapértelmezett értékének megadására használható. A width tulajdonságát a korábbiakban már részleteztük. Az accept tulajdonságát a Firefox, az Opera és Chrome támogatja. <ins> Egy szöveget határoz meg, melyet idő közben szúrtak be a dokumentumba. A böngészők általában aláhúzott betűstílussal jelölik. <p>a kedvenc színem a <del>piros</del> <ins>kék</ins>!</p> A cite és datetime tulajdonságát korábban már részleteztük.

105 <keygen> Egy kulcspárt generál, melyek közül a privát helyben tárolódik, a nyilvános elküldődik a szervernek. <form action="csinald.asp" method="get"> Felhasználónév: <input type="text" name="nick" /> Titkosítás: <keygen name="secure" /> <input type="submit" /> </form> Az autofocus tulajdonságát korábban már részleteztük. A challange tulajdonság a <keygen> elem értékének speciális kezelését határozza meg. A disabled és form tulajdonságát korábban már részleteztük. A keytype tulajdonsága meghatározza a használt algoritmust, ami lehet rsa, dsa és ec. A name tulajdonságát korábban már részleteztük. A <keygen> elemet az IE kivételével minden főbb böngésző támogat. A keytype tulajdonságát csak a Firefox, Opera és Chrome támogatja. <kdb> A billenyűzetről beolvasott adatok megjelenítésére használható. <kbd>billentyűzet bemenet</kbd>

106 <label> A beviteli mezők címkéjeként használható az űrlapokban. Ha a felhasználó rákattint ezekre a szövegekre, akkor aktívvá válik a hozzá kapcsolódó vezérlő. A for tulajdonságának meg kell egyeznie a hozzá kapcsolódó elem id-jának értékével. <form> <label for="ferfi">férfi</label> <input type="radio" name="sex" id="ferfi" /> <br /> <label for="no">nő</label> <input type="radio" name="sex" id="no" /> </form> A for tulajdonsága határozza meg, hogy a címke melyik űrlapelemhez tartozik. A form tulajdonságát korábban már részleteztük. <legend> Meghatározza egy <fieldset>, <figure> vagy <details> elem feliratát. A HTML5-ben az align tulajdonságát eltávolították, mert feleslegessé vált. És kibővítették, hogy a <fieldset> elem mellett a <figure> és <details> elemhez is használható legyen. <li> Egy listaelemet határoz meg egy rendezett <ol>, egy rendezetlen <ul>, vagy egy <menu> menülistában. <ol> </ol> <ul> </ul> <li>kávé</li> <li>tea</li> <li>tej</li> <li>kávé</li> <li>tea</li> <li>tej</li> HTML5-ben a type tulajdonsága elavult ezért eltávolították, value tulajdonsága szintén elavult, de meghagyták. A value tulajdonság a listaelem értékét határozza meg, csak <ol> listáknál használható.

107 <link> Leggyakrabban stíluslapokra való hivatkozásokhoz használjuk. A <head> részen belül alkalmazható tetszőleges számban. <head> <link rel="stylesheet" type="text/css" href="stilus.css" /> </head> HTML5-ben eltávolították belőle a charset, rev és target tulajdonságokat, valamint hozzáadták a sizes tulajdonságot. A href, hreflang, és media tulajdonságait korábban már részleteztük. A rel tulajdonsága a korábban már részletezetthez képest bővített. az eredeti egy alternatív változata, például nyomtatott, vagy lefordított (alternate) egy arhívumra mutat (archives) egy hivatkozás az irat szerzőjére (author) egy állandó könyvjelző (bookmark) egy külső tartalomra utal (external) az első dokumentumra mutat (first) hivatkozás egy segítséget nyújtó dokumentumra (help) egy ikont határoz meg(icon) az utolsó dokumentumra mutat (last) hivatkozás a szerzői jogi információkra (license) hivatkozás a következő dokumentumra (next) meghatározza, hogy a keresőrobotok ne kövessék a linket, mert mondjuk fizetett hírdetés (nofollow) meghatározza, hogy a böngésző ne küldjön HTTP referer fejlécet, ha a felhasználó követi a hivatkozást, így az oldal amire rámutatunk nem tudja lekövetni, hogy a mi oldalunkról jutott el az övére (noreferrer) (pingback) meghatározza, hogy a cél dokumentumot cache-lni kell (prefetch) hivatkozás az előző dokumentumra (prev) hivatkozás egy kereső eszközre (search) (sidebar) egy stíluslapot határoz meg (stylesheet) hivatkozás az aktuális dokumentum egy kulcsszavára, cimkéjére (tag) egyel fel mutat a dokumentum fában (up) A sizes tulajdonság megadja a magasságát és szélességét egy erőforrásnak. Ezt a tulajdonságot csak a icon értékű rel tulajdonsággal rengelkező elemeknél használható. <link rel="icon" href="ikon.gif" type="image/gif" sizes="16x16" /> A type tulajdonságát korábban már részleteztük. A sizes tulajdonságát jelenleg egyik főbb böngésző sem támogatja.

108 <map> Egy kliens oldali kép térképet határoz meg, ami egy kattintható terület a képen. <img src ="kep.png" alt="kattintható területekkel rendelkező kép" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="valami.htm" alt="valamire mutat" /> <area shape="circle" coords="90,58,3" href="valami2.htm" alt="valami 2-re mutat" /> <area shape="circle" coords="124,58,8" href="valami3.htm" alt="valami 3-ra mutat" /> </map> A name a <map> elem, kötelező tulajdonsága, melynek segítségével hivatkozhatunk a kép térképre az <img> elem usemap tulajdonságában. <mark> Egy szövegkiemelővel kiemelt szövegrészt határoz meg. <p>ne felejtsd el megvenni a <mark>tejet</mark>.</p> <menu> Meghatároz egy menüt, vagy listát parancsokkal. Használható helyi menükhöz és eszköztárakhoz valamint űrlapvezérlők, vagy parancsok listájához. <menu type="toolbar"> <li> <menu label="fájl"> <button type="button" onclick="file_new()">új...</button> <button type="button" onclick="file_open()">megnyitás...</button> <button type="button" onclick="file_save()">mentés</button> </menu> </li> <li> <menu label="szerkesztés"> <button type="button" onclick="edit_cut()">kivágás</button> <button type="button" onclick="edit_copy()">másolás</button> <button type="button" onclick="edit_paste()">beillesztés</button> </menu> </li> </menu> A label tulajdonsága egy látható szöveget határoz meg a menü szövegével, gyakran használják beágyazott menükhöz egy menüben.

109 A type tulajdonsága határozza meg a menű típusát. egy lista menüt határoz meg (list) egy helyi menüt határoz meg (context) egy eszköztár menüt határoz meg (toolbar) A <menu> elemet jelenleg egyik főbb böngésző sem támogatja. <meta> Meta adatokat határoz meg, melyek nem jelennek meg az oldalon. Megadható velük az oldal leírása, a kulcsszavak, a dokumentum szerzője, utolsó módosítása, és még sok más. A <meta> elemeket kötelezően a <head> rész tartalmazza. <head> <meta name="description" content="ide kerülhet a leírás" /> <meta name="keywords" content="kulcsszó1,kulcsszó2,kulcsszó3,..." /> <meta name="author" content="szerző neve" /> <meta charset="utf-8" /> </head> Az oldal utolsó felülvizsgálata: <meta name="revised" content="hege Refsnes, 30/03/2012" /> Az oldal frissítése 30 másodpercenként: <meta http-equiv="refresh" content="30" /> HTML5-ben eltávolították belőle a scheme tulajdonságot, valamint hozzáadták a charset tulajdonságot. A HTML5-ben a charset tulajdonság a HTML4-hez képest már átláthatóan meghatározza egy dokumentum karakterkódolását. A charset tulajdonság helyileg felülbírálható az elemek lang tulajdonságában. <meta charset="utf-8" /> A content tulajdonság adja meg a konkrét értékét a http-equiv-ben vagy name-ben meghatározott kulcsnak.

110 A http-equiv tulajdonság három értéket vehet fel. a karakterkódolás megadásánál használható (content-type) <meta http-equiv="content-type" content="text/html; charset=utf-8" /> az előnyben részesített stíluslapot használja (default-style) <Meta http-equiv = "default-style" content = "link_elem_id-ja" /> a dokumentum lefrissíti önmagát meghatározott időintervallumonként (refresh) <meta http-equiv="refresh" content="300" /> A name tulajdonságnak öt értéke lehet. megadja a webalkalmazás nevét amit a weboldal képvisel (application-name) megadja a dokumentum nevének szerzőjét (author) megadja a dokumentum leírását a keresőmotorok számára (description) meghatározza, hogy milyen szoftverrel készült a dokumentum, nem használható kézzel készített dokumentumokban (generator) megadja veszővel elválasztva, az oldalra releváns kulcsszavakat a keresőmotorok számára (keywords) Ezeken kívül a <meta> elem támogatja az általános tulajdonságokat, de az általános esemény tulajdonságokat nem. <meter> Egy skaláris tartományon belül meghatároz egy mérés eredményét. Például lemez használat. A meter nem használható folyamatjelzőnek. Alapértelmezésként egy zöld csík mutatja a mért érték nagyságát. <meter value="2" min="0" max="10">2 a 10-ből</meter><br /> <meter value="0.6">60%</meter> A form tulajdonságát korábban már részleteztük. A high tulajdonsága megadja, hogy a tartományon belül mi számít magas értéknek, az ezt meghaladó értékek narancsárga csíkkal lesznek jelölve. A low tulajdonsága megadja, hogy a tartományon belül mi számít alacsony értéknek, az ezt el nem érő értékek narancsárga csíkkal lesznek jelölve. <p>jános pontjai: <meter min="0" low="40" high="90" max="100" value="95"></meter></p> <p>kriszta pontjai: <meter min="0" low="40" high="90" max="100" value="65"></meter></p> <p>miklós pontjai: <meter min="0" low="40" high="90" max="100" value="35"></meter></p> A max tulajdonsága meghatározza a tartomány maximális értékét. A min tulajdonsága meghatározza a tartomány minimális értékét. Az optimum meghatározza a tartomány optimális értékét. <meter value="0.3" high="0.9" low="0.1" optimum="0.5"></meter>

111 A value tulajdonsága meghatározza a jelenlegi mért értéket, amit ábrázolni szeretnénk. A <meter> elemet és tulajdonságait jelenleg csak az Opera és a Chrome támogatja. <nav> A navigációs linkeket határozza meg egy nagyobb blokkban. A fogyatékkal élő felhasználók által használt képernyőolvasók számára hasznos ez a szemantikai elem. <nav> <a href="/html/">html</a> <a href="/html5/">html5</a> <a href="/css/">css</a> <a href="/css3/">css3</a> <a href="/js/">javascript</a> </nav> <noscript> Segítségével alternatív tartalmat jeleníthatünk meg azoknak a felhasználóknak a számára, amelyeknél nincsenek támogatva, vagy le vannak tiltva a kliens-oldali szkriptek. Így például, ha valakinél nem működnek a JavaScript-es tartalmak, ahelyett, hogy értetlenül nézné, hogy miért nem működik az oldal, kiirathatunk egy hibaüzenetet, vagy hasonló funkciókkal bíró lebutított felületet biztosíthatunk a számára. Ez a tartalom az olyan felhasználók számára nem jelenik meg, ahol elérhető a JavaScript, ezért nem zavaró. Azonban ahhoz, hogy az olyan böngészőkben ahol nem támogatott a JavaScript ne jelenjen meg az eredeti JavaScript-es programkód, érdemes a kommentek használata, mint például az alábbi kódrészletben: <script type="text/javascript"> <!-- document.write("éljen, működik a JavaScript!"); //--> </script> <noscript>az Ön böngészője nem támogatja a JavaScript-et!</noscript>

112 <object> Segítségével a HTML dokumentumba ágyazható egy audio, video, Java applet, ActiveX, PDF vagy Flash objektum. Illetve használható egy másik weboldal beágyazására is a HTML dokumentumunkban. Az objektumok nem jelennek meg a dokumentum <head> részében, csak a <body> részben. Fontos, hogy vagy a data, vagy a type tulajdonságát kötelezően meg kell határoznunk. <object width="400" height="400" data="flash.swf"> Az Ön böngészője nem támogatja az OBJECT elemet! </object> A data tulajdonság határozza meg azt az URL-t, amely az erőforrást tartalmazza. A form tulajdonság segítségével hozzárendelhetjük az obejektumot egy űrlaphoz. <form action="csinald.asp" method="get" id="urlap"> Név: <input type="text" name="nev" /><br /> <input type="submit" value="küldés" /> </form> <object data="flash.swf" height="400" width="400" form="urlap" name="flash_objektum"></object> A width és height tulajdonságát korábban már részleteztük. A name tulajdonságát korábban már részleteztük. A type tulajdonsága egy MYME típus, amelyeket korábban már részleteztünk. A usemap tulajdonsága segítségével egy kép térképet rendelhetünk az objektumhoz, amit korábban már részleteztünk. A form tulajdonságát jelenleg egyik főbb böngésző sem támogatja. A usemap tulajdonságát jelenleg a Chrome és Safari kivételével, minden főbb böngésző támogatja.

113 <ol> Egy rendezett listát határoz meg. <ol> </ol> <li>kávé</li> <li>tea</li> <li>tej</li> A reversed tulajdonsága meghatározza, hogy a lista számozása fordított legyen, így például egy háromelemű listánál a felsorolás számozása, nem 1-2-3, hanem lesz. <ol reversed="reversed"> <li>kávé</li> <li>tea</li> <li>tej</li> </ol> A start tulajdonsága meghatározza, hogy milyen számtól kezdődjön az elemek számozása. <ol start="50"> <li>kávé</li> <li>tea</li> <li>tej</li> </ol> A type tulajdonság éeréke meghatározza a számozás típusát: 1 - arab számok a - kis betűk A - nagy betűk i - kis római számok I - nagy római számok <ol type="i"> <li>kávé</li> <li>tea</li> <li>tej</li> </ol> A reversed tulajdonságát jelenleg egyik főbb böngésző sem támogatja.

114 <optgroup> Segítségével a legördülő listák elemeit csoportosíthatjuk, így egy hosszú lista könnyebben átlátható a felhasználók számára. <select> <optgroup label="gyümölcsök"> <option value="alma">alma</option> <option value="barack">barack</option> </optgroup> <optgroup label="zöldségek"> <option value="repa">répa</option> <option value="retek">retek</option> </optgroup> </select> A label tulajdonsága meghatározza a csoport címét, amely megjelenik a listában is. A disabled tulajdonságát korábban már részleteztük. <option> Egy <select> vagy egy <datalist> lista egy elemét határozza meg. <option value="alma">alma</option> A disabled és label tulajdonságát korábban már részleteztük. A selected tulajdonsága meghatározza, hogy az aktuális opció ki van-e választva, vagy nem. Ez a tulajdonság az oldal betöltődésekor határozza meg a kiválasztás tényét, a későbbiekben JavaScriptel megváltoztathatjuk az értékét. <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="vw">vw</option> <option selected="selected" value="audi">audi</option> </select> A value tulajdonságát korábban már részleteztük.

115 <output> Egy számítás eredményének megjelenítésére szolgál. <form oninput="x.value=parseint(a.value)+parseint(b.value)">0 <input type="range" name="a" value="50" />100 +<input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form> A for tulajdonsága határozza meg a számításhoz használt elemeket. A form és name tulajdonságát korábban már részleteztük. Az <output> elemet az IE kivételével minden főbb böngésző támogatja. <p> Egy bekezdést határoz meg, amely automatikusan rendelkezik elötte és utána levő térközzel. Ezt a CSS margin tulajdonsággal változtathatjuk. <p>ez egy bekezdés.</p> <param> Egy beágyazott objektum paraméterét határozhatjuk meg a segítségével. <object data="audio.wav"> <param name="autoplay" value="false"> </object> A name tulajdonsága határozza meg a paraméter nevét. A value tulajdonság határozza meg a paraméter értékét. <pre> Egy fix szélességű betűtípussal, általában Courier megjelenített szövegrészlet, amely megőrzi a többes szóközöket, és a sortöréseket is. Általában szokatlan formázásokhoz (például ascii artoknál), vagy számítógépes kódok megjelenítéséhez használható. <pre> Ez egy pre elem. </pre>

116 <progress> Egy folyamat előrehaladtának megjelenítésére szolgál. <progress value="22" max="100"></progress> A max tulajdonsága egy lebegőpontos szám, amely meghatározza, hogy összesen mekkora a folyamat nagysága. A value tulajdonsága egy lebegőpontos szám, amely meghatározza, hogy hol tart a folyamat. A <progress> elemet és tulajdonságait jelenleg az IE és a Safari kivételével minden főbb böngésző támogat. <q> Egy rövid idézetet határoz meg, melyet a böngészők idézőjelek között jelenítenek meg. Hosszabb idézetekhez inkább a <blockquote> elem használandó. <q>lassan járj, tovább élsz!</q> A cite tulajdonságát korábban már részleteztük. <rp> Meghatározza, hogy mit mutassanak azok a böngészők, amik nem támogatják a ruby magyarázatokat, melyeket a Kelet-ázsiai tipográfiában használnak, hogy bemutassák a karakterek kiejtését. <ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> <rt> Egy magyarázatot, vagy a karakterek kiejtését határozza meg a ruby megjegyzésben. <ruby> Egy ruby megjegyzést határoz meg, amelyeket a Kelet-ázsiai tipgráfia használ, a karakterek kiejtésének bemutatására.

117 <s> Egy már nem helytálló, pontos, vagy releváns szöveg meghatározására használható, melyet a böngészők áthúzott betűtípussal jelölnek. <p><s>az autóm kék.</s></p> <p>az új autóm fekete.</p> <samp> Egy számítógépes program kimenetének mintáját határozza meg. <samp>minta.</samp> <script> Egy kliens-oldali szkript meghatározására szolgál, például JavaScript. A mindennapokban képek szerkesztésére, formátum érvényesítésre, és a tartalom dinamikus változtatására használják. Ha az src tulajdonságot használjuk és egy szkript fájlra hivatkozunk, akkor a <script> és </script> közötti résznek üresen kell maradnia, egyébként pedig e két tag közé írhatjuk a szkriptünket. <script type="text/javascript"> document.write ("Ez egy szkript, ahol a kód a <script> elemek között található.") </script> Az async tulajdonsága meghatározza, hogy a szkript asszinkron módban fusson az oldal többi részével, azaz a szkript végrehajtódik, amíg az oldal folytatja a feldolgozást. Csak az src tulajdonsággal együtt használható. <script type="text/javascript" src="async.js" async="async"></script> A defer tulajdonsága meghatározza, hogy szkript, a lap betöltődéséig, azaz addig, amíg a feldolgozás el nem készül, nem fog futni. Csak az src tulajdonsággal együtt használható. <script type="text/javascript" src="defer.js" defer="defer"></script> Ha sem az async, sem a defer tulajdonságot nem használjuk, akkor a szkript azonnal végrehajtódik, még mielőtt tovább folytatódna az oldal feldolgozása. A type tulajdonsága egy MIME típust határoz meg, amelyet korábban már részleteztünk. A charset tulajdonsága meghatározza a külső szkript karakterkódolását, ha az eltér a HTML dokumentuk kódolásától. Csak az src tulajdonsággal együtt használható. <script type="text/javascript" charset="utf-8" src="charset.js"></script>

118 Az src tulajdonságát korábban már részleteztük. Az async tulajdonságot jelenleg az IE kivételével minden főbb böngésző támogatja. Ezeken kívül a <script> elem támogatja az általános tulajdonságokat, de az általános esemény tulajdonságokat nem. <section> A dokumentum egy szakaszát határozza meg. <section> <h1>ez egy rész</h1> <p>a dokumentum egy szakasza...</p> </section> <select> Egy legördülő listát határoz meg, amelyben a felhasználó választhat a rendelkezésre álló lehetőségek közül. <select> <option value="repa">répa</option> <option value="retek">retek</option> <option value="mogyoro">mogyoró</option> </select> Az autofocus, disabled és form tulajdonságát korábban már részleteztük. A multiple tulajdonság meghatározza, hogy egyszerre több lehetőséget is ki lehessen választani. Ehhez Windows alatt a Ctrl billentyűt, Mac alatt pedig a Command billentyűt kell nyomva tartani. Ennek használata esetén célszerű tájékoztatni a felhasználót, hogy több lehetőséget is kiválaszthat. Ez egy még inkább felhasználóbarát megoldás, mint a jelölőnégyzetek. <select multiple="multiple"> <option value="repa">répa</option> <option value="retek">retek</option> <option value="mogyoro">mogyoró</option> </select> A name tulajdonságát korábban már részleteztük.

119 A size tulajdonsága meghatározza, hogy egyszerre hány lehetőség látható a legördülő listában. Ha ennek száma 1-nél nagyobb, de a lehetőségek számánál kisebb, akkor a böngésző automatikusan hozzáad egy görgetősávot a legördülő listához. <select size="2"> <option value="repa">répa</option> <option value="retek">retek</option> <option value="mogyoro">mogyoró</option> </select> <small> Egy kisebb méretű szöveget határoz meg az általános betűmérethez képest, például megjegyzéseket. <p>cyberzero.tk - a világ bites oldala.</p> <p><small>minden jog fentartva: 2012</small></p> <source> A source elemet korábban már részleteztük. <span> Segítségével inline elemeket csoportokba rendezhetünk, hogy a szöveg vagy a dokumentum egy részét stílusokkal formázhassuk, vagy JavaScript-ekkel manipuláljuk. <p>anyukám szeme <span style="color:lightblue">világoskék</span>.</p> <strong> Egy fontos szöveget határoz meg. <strong>fontos szöveg</strong>

120 <style> Stílus információkat határoz meg a HTML dokumentumban. Egy dokumentum több <style> elemet is tartalmazhat. <head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head> <body> <h1>címsor</h1> <p>bekezdés</p> </body> A type tulajdonsága határozza meg a CSS tartalom MIME típusát. Egyenlöre az egyetlen támogatott érték a text/css, így HTML5-ben a type tulajdonságra nincs szükség, hiszen az alapértelmezett érték a "text/css". A media tulajdonságát korábban már részleteztük. A scoped tulajdonsága meghatározza, hogy a stílusok csak a <style> elemet tartalmazó szülő elemre és gyermek elemeire vonatkoznak. Ha ezt a tulajdonságot nem használjuk, akkor a <style> elemet csak a <head> részben alkalmazhatjuk, ilyenkor a formázások az egész dokumentumra vonatkoznak. <div> </div> <style type="text/css" scoped="scoped"> h1 {color:red} p {color:blue} </style> <h1>címsor</h1> <p>bekezdés</p> A scoped tulajdonságát jelenleg még egyik főbb böngésző sem támogatja. <sub> Alsó indexes szövegrészt határoz meg, melyet alkalmazni lehet például a kémiai képleteknél. <p>h<sub>2</sub>o</p>

121 <summary> Meghatározza a <details> elem címét, amelyre kattintva megjelenik, vagy elrejtődik a többi elem. A <summary> elem a <details> elem első gyermekének kell lennie. <details> <summary>kukuccs</summary> <p>ez jelenik meg, vagy rejtődik el.</p> </details> A <summary> elemet jelemleg csak a Chrome támogatja. <sup> Felső indexes szövegrészt határoz meg, melyet alkalmazni lehet például a lábjegyzeteknél, vagy a hatványozásnál. <p>www<sup>[1]</sup></p> <table> Egy táblázatot határoz meg. <table border="1"> <tr> <th>oszlopcím1</th> <th>oszlopcím2</th> </tr> <tr> <td>1.sor - 1.cella</td> <td>1.sor - 2.cella</td> </tr> <tr> <td>2.sor - 1.cella</td> <td>2.sor - 2.cella</td> </tr> </table> HTML5 ben csak egyetlen tulajdonsága van egy táblázatnak. A border tulajdonsága határozza meg, hogy legyen-e kerete a táblázatnak vagy sem. Két lehetséges értéke a "" és a "1".

122 <tbody> Segítségével elkülöníthető a táblázat test, a táblázat fejlécétől és láblécétől. Így görgethetjük a táblázat tartalmát anélkül, hogy a fejléc és lábléc elmozogna, illetve nyomtatásnál, ha több oldalon átnyúlik a táblázat, akkor minden oldalon feltüntethetjük a táblázat fejlécét és láblécét, így könyebben követhető a táblázat. <table border="1"> <thead> <tr> </tr> </thead> <tfoot> <tr> </tr> </tfoot> <tbody> <tr> </tr> <tr> </tr> </tbody> </table> <th>fejrész - 1.cella</th> <th>fejrész - 2.cella</th> <td>lábléc - 1.cella</td> <td>lábléc - 2.cella</td> <td>1.sor - 1.cella</td> <td>1.sor - 2.cella</td> <td>2.sor - 1.cella</td> <td>2.sor - 2.cella</td> <td> Egy cellát határoz meg a táblázatban. A colspan tulajdonsága határozza meg cellaegyesítésnél az összevont oszlopok számát. A 0 érték speciális jelentéssel bír, ugyanis ilyenkor az egyesítés az utolsó oszlopcsoport (<colgroup>) utolsó oszlopáig tart. <tr> </tr> <tr> </tr> <td> </td> <td> </td> <td colspan="2">egyesített</td>

123 A headers tulajdonsága a képernyőolvasót használó fogyatékkal élő felhasználók számára előnyös. <table border="1"> <tr> <th id="name">név</th> <th id=" "> </th> <th id="phone">telefon</th> <th id="addr">cím</th> </tr> <tr> <td headers="name">cyberzero</td> <td headers=" ">cyberzero@fre .hu</td> <td headers="phone"> </td> <td headers="addr">cybercity, Bit utca 1.</td> </tr> </table> A rowspan tulajdonsága határozza meg cellaegyesítésnél az összevont sorok számát. A 0 érték speciális jelentéssel bír, ugyanis ilyenkor az egyesítés a táblázat utolsó soráig tart. <tr> </tr> <tr> </tr> <td> </td> <td> </td> <td rowspan="2">egyesített</td> <td> </td> <td> </td> A colspan="0"-t jelenleg egyik főbb böngésző sem támogatja. A rowspan="0"-t jelenleg csak a Chrome támogatja.

124 <textarea> Egy több soros beviteli mező, melybe korlátlan karakter bevihető, melyeknek betűtípusa fix szélességű. <textarea rows="4" cols="50"> Extra csípős pepperónis pizzát szeretnék. </textarea> Az autofocus tulajdonságát korábban már részleteztük. A cols tulajdonsága meghatározza a szöveg látható területének szélességét karakterekben. Alapértelmezett értéke a 20. A disabled és form tulajdonságát korábban már részleteztük. A maxlength tulajdonsága meghatározza az elembe bevihető karakterek maximális számát. A name, placeholder, readonly, és required tulajdonságát korábban már részleteztük. A rows tulajdonsága meghatározza a szöveg területének magasságát karakterekben. Alapértelmezett értéke a 2. A wrap tulajdonsága meghatározza a tördelés fajtáját. Alapértelmezett értéke a "soft", mely során egy űrlap elküldésekor a szöveg nincs tördelve. A "hard" érték esetén kötelezően használni kell a cols tulajdonságot is. Ebben az esetben az űrlap elküldése során a szöveget új sorokkal tördeljük. A maxlength tulajdonságát az IE és az Opera kivételével minden főbb böngésző támogatja. <tfoot> A táblázat láblécét határozza meg. A <tbody> elem elött kell szerepelnie. <th> Egy fejléc cellát határoz meg a táblázatban, melyet a böngészők általában vastag betűtípussal és középre igazítva jelenítenek meg. A colspan, headers és rowspan tulajdonságát korábban már részleteztük. A scope tulajdonsága meghatározza, hogy a fejléc cella egy oszlop fejléce (col), vagy sor fejléce (row), vagy oszlopok csoportjának fejléce (colgroup), vagy esetleg sorok csoportjának fejléce (rowgroup).

125 <thead> A táblázat fejlécét határozza meg. A <tfoot> elem elött kell szerepelnie. <time> Meghatároz egy időpontot, vagy dátumot. <p>reggel <time>10:00</time>-kor kelek.</p> A datetime tulajdonságát akkor használjuk, ha nem egy dátum vagy időpont a <time> elem tartalma, hanem egy szöveg, amihez hozzá akarjuk fűzni a dátumot. A megfelelő formátum a "YYYY-MM-DDThh:mm:ssTZD", mint például a " T00:00:00" és a végén a TZD (Time Zone Designator), azaz Zulu, vagy másként a greenwich-i közép idő. <p><time datetime=" ">valentín nap</time> egy dátum.</p> A pubdate tulajdonság jelzi, hogy az időpont a dokumentum közzétételi időpontja, vagy a legközelebbi <article> őséjé. <article> <time datetime=" " pubdate="pubdate"></time> Ez egy cikk... </article> A <time> elemet és tulajdonságait jelenleg egyik főbb böngésző sem támogatja. <tr> Egy sort határoz meg a táblázatban. <track> A <track> elemet korábban már részleteztük. <u> A normál szövegtől stílusában eltérő szövegrészlet, például elgépelt szavak, vagy kínai tulajdonnevek, amelyeket a böngészők általában aláhúzott betűtípussal jelenítenek meg. Nem érdemes olyan helyen használni, ahol összekeverhető egy hivatkozással. <p>ez egy <u>bekezdés</u>.</p>

126 <ol> Egy rendezetlen listát határoz meg. <ul> </ul> <li>kávé</li> <li>tea</li> <li>tej</li> HTML-ben minden tulajdonsága elavult. Formázását a CSS-el lehet megoldani. <var> Egy változót határoz meg. <var>változó</var> <video> A <video> elemet korábban már részleteztük. <wbr> Ha egy szól túl hosszú, vagy attól tartunk, hogy a böngésző rossz helyen fogja törni a sorokat, akkor a <wbr> elem segítségével, megadhatunk a törési helyekre lehetőségeket. <p>ezt a sort, itt <wbr> törd el, ha szükséges.</p> A <wbr> elemet jelenleg az IE kivételével minden böngésző támogat.

Hasonló dokumentumok

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović [email protected]

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović [email protected] 1 DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt

Részletesebben

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 hang videó gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add

Részletesebben

"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell

Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell "Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell Bevezető - platform- és nyelvfüggetlen programozási interfész - tartalom-, szerkezet- és stílus-elérés/módosítás

Részletesebben

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width

Részletesebben

A feladatokat Nemes Adriána készítette. A feladatsort és a hozzávalókat letöltheted erről a címről: 1

A feladatokat Nemes Adriána készítette. A feladatsort és a hozzávalókat letöltheted erről a címről: 1 Web-fejlesztés I. kurzus, ELTE Informatikai Kar A feladatokat Nemes Adriána készítette. A feladatsort és a hozzávalókat letöltheted erről a címről: http://bit.ly/szfjsf 1 A témához kapcsolódó tananyag

Részletesebben

Multimédia 2017/2018 II.

Multimédia 2017/2018 II. Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime

Részletesebben

HTML kódok. A www jelentése World Wide Web.

HTML kódok. A www jelentése World Wide Web. HTML kódok A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. A honlap felépítése (csak

Részletesebben

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák A Portál rendszer felületének általános bemutatása Felhasználói útmutató Támogatott böngészők Internet Explorer 9+ Firefox (legújabb verzió) Chrome (legújabb verzió) Felületek felépítése Információs kártyák

Részletesebben

HTML 5 - Start. Turóczy Attila Livesoft Kft

HTML 5 - Start. Turóczy Attila Livesoft Kft HTML 5 - Start Turóczy Attila Kft. 2010.11.01. HTML története A HTML az angol HyperText Markup Language szavak rövidítése. Alapvetően egy leírónyelv, ami weboldalak készítéséhez használunk. A HTML szöveges

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán

Részletesebben

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok:

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok: HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal

Részletesebben

HTML alapok. A HTML az Internetes oldalak nyelve.

HTML alapok. A HTML az Internetes oldalak nyelve. A HTML az Internetes oldalak nyelve. HTML alapok Karakteres szövegszerkesztővel (pl. Jegyzettömb) szerkeszthető. FONTOS, hogy az elkészült oldal kiterjesztése ne txt, hanem html legyen! Felépítése: Két

Részletesebben

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk. JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: [email protected] Msn: [email protected] Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript

Részletesebben

A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség:

A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség: KRYPTON sablon Részletes leírás a sablonhoz kapcsoló új beállításokról Diavetítés a kezdőlapon A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség: Képes diavetítés Termékes diavetítés

Részletesebben

Dokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések

Dokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések Dokumentáció IT Worx Web eszközök Hír box 1. Első lépések A szöveg melletti háromszögre kattintva rendezhetjük a hír boxokat abc szerinti növekvő vagy csökkenő sorrendbe: Ha rákattintunk az egyik hír box

Részletesebben

A WiFi4EU megfelelőség-ellenőrző összetevő. Végrehajtási útmutató v1.0

A WiFi4EU megfelelőség-ellenőrző összetevő. Végrehajtási útmutató v1.0 EURÓPAI BIZOTTSÁG INFORMATIKAI FŐIGAZGATÓSÁG A WiFi4EU megfelelőség-ellenőrző összetevő Végrehajtási útmutató v1.0 Tartalomjegyzék 1. Bevezetés... 2 2. Böngészőtámogatás... 2 3. A gyűjtött adatok... 2

Részletesebben

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt. Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a

Részletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5.

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5. 8. el adás Kovács Kristóf, Pálovics Róbert Budapesti M szaki Egyetem 2013. november 5. Amit megtanulunk HTML alapok CSS alapok Amit megtanulunk HTML alapok CSS alapok A tanítottak alapján a saját honlapotokat

Részletesebben

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával A Microsoft OFFICE EXCEL táblázatkezelő program alapjai 2013-as verzió használatával A Microsoft Office programcsomag táblázatkezelő alkalmazása az EXCEL! Aktív táblázatok készítésére használjuk! Képletekkel,

Részletesebben

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML Széchenyi István Egyetem Műszaki Tudományi Kar Informatikai és Villamosmérnöki Intézet Távközlési Tanszék Villamosmérnöki szak HTML HTML segédlet számítógép hálózatok tárgy gyakorlatához A jegyzet teljes

Részletesebben

HTML. Dr. Nyéki Lajos 2016

HTML. Dr. Nyéki Lajos 2016 HTML Dr. Nyéki Lajos 2016 HTML és SGML HTML (Hypertext Markup Language) SGML (Standard Generalized Markup Language) ISO 8879:1986 A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren:.html;

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán

Részletesebben

Tisztelt Felhasználó!

Tisztelt Felhasználó! Tisztelt Felhasználó! Az alábbiakban az NB termékek 3D modelljeinek generálása, használata kerül bemutatásra. A webes felület használatához regisztráció nem szükséges! Tartalomjegyzék Belépés... 2 Szükséges

Részletesebben

FELHASZNÁLÓI KÉZIKÖNYV

FELHASZNÁLÓI KÉZIKÖNYV FELHASZNÁLÓI KÉZIKÖNYV SZEGED VÁROS KÖZLEKEDÉSE 1.00 verzió Dátum: 2012.02.29. Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...

Részletesebben

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik

Részletesebben

Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA FELHASZNÁLÓI KÉZIKÖNYV. 2015. szeptember

Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA FELHASZNÁLÓI KÉZIKÖNYV. 2015. szeptember Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA 2014 2020 2015. szeptember Készült a Miniszterelnökség Agrár Vidékfejlesztési Programokért Felelős Helyettes Államtitkárság, mint a Magyarország

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

Webshop készítése ASP.NET 3.5 ben I.

Webshop készítése ASP.NET 3.5 ben I. Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)

Részletesebben

PDF. Tartalomjegyzék 1/21

PDF. Tartalomjegyzék 1/21 PDF Napjainkban a publikálás elterjedt formája a PDF dokumentumok előállítása. A weben ez szinte szabvánnyá vált hosszú dokumentumok esetén. Akkor is nagyon hasznos lehet, ha a gondosan megformázott word

Részletesebben

Az MP3 lejátszó használata

Az MP3 lejátszó használata Használat Az MP3 lejátszó használata Az MP3-ról Személyes használaton kívüli célokra a szerzői jog tulajdonosának engedélye nélkül tilos MP3 fájlokat létrehozni olyan forrásokból, mint rádióadások, lemezek,

Részletesebben

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto [email protected] http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben

Részletesebben

Akciók, diavetítés. 1. ábra Akciógombok. A lap két regiszterfülből áll, ezek a Kattintásra és az Áthaladáskor. Nézzük meg először az elsőt!

Akciók, diavetítés. 1. ábra Akciógombok. A lap két regiszterfülből áll, ezek a Kattintásra és az Áthaladáskor. Nézzük meg először az elsőt! Akciók Az akciógombok alkalmazásával beállíthatjuk, hogy az objektumra kattintva végrehajtsa a hozzárendelt hiperhivatkozást. Jól láttuk, hogy az objektumokhoz, diákhoz rendelhettünk akciókat, de az akciógombokkal

Részletesebben

Webkezdő. A modul célja

Webkezdő. A modul célja Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie

Részletesebben

HF-DVR H.264 Hálózati Rögzítő. Felhasználói kézikönyv

HF-DVR H.264 Hálózati Rögzítő. Felhasználói kézikönyv HF-DVR H.264 Hálózati Rögzítő Felhasználói kézikönyv Bevezető Ez a felhasználói kézikönyv a HF-DVR5704T 4 csatornás H.264 tömörítésű hálózati rögzítő használatát mutatja be. Nem tér ki az eszköz telepítésére,

Részletesebben

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (TATABÁNYA VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum:

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (TATABÁNYA VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: FELHASZNÁLÓI KÉZIKÖNYV (TATABÁNYA VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2012.02.16 Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...

Részletesebben

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam Operáció rendszer ECDL tanfolyam Alapok A Windows áttekintése Asztal Tálca Start menü Lomtár használata Súgó használata Felhasználói fiókok kezelése Kijelentkezés, felhasználóváltás Fájlok és mappák Sajátgép

Részletesebben

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)

Részletesebben

Z80TAPE FELHASZNÁLÓI ÚTMUTATÓ

Z80TAPE FELHASZNÁLÓI ÚTMUTATÓ Z80TAPE FELHASZNÁLÓI ÚTMUTATÓ Tartalomjegyzék 1. A készülék ismertetése 2. Üzembe helyezés 3. Főmenü 4. COMPUTER 5. OPEN FILE 6. PLAY 7. LEVEL 8. SOUND 9. REMOTE 10. SAVE A Z80TAPE készülék 1. A készülék

Részletesebben

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté. Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté [email protected] http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján

Részletesebben

Adóhátralék kezelés egyszerűen. Használati útmutató

Adóhátralék kezelés egyszerűen. Használati útmutató Használati útmutató Program indítása: A telepítés utáni első indításkor a program a szükséges alapbeállításokat elvégzi, és automatikusan újra indul. A főképernyőn a bejelentkezéshez mindig meg kell adni

Részletesebben

NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv. programozás alapjai. Haramia László

NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv. programozás alapjai. Haramia László NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv programozás alapjai Haramia László JavaScript szerepe Netscape fejlesztette ki LiveScript Interaktív weboldalak dinamikus kezelhetősége

Részletesebben

Egzinet Partner Portál

Egzinet Partner Portál Egzinet Partner Portál Adminisztrációs felület Oktatási segédanyag 1 Készítsd el saját weboldalad! I. Bejelentkezés Minden Egzinet Partner Portál a http://admin.egzinet.hu adminisztrációs felületen keresztül

Részletesebben

1. kép. A Stílus beállítása; új színskála megadása.

1. kép. A Stílus beállítása; új színskála megadása. QGIS Gyakorló Verzió: 1.7. Wroclaw Cím: A Print composer használata és a címkézés. Minta fájl letöltése innen: http://www.box.net/shared/87p9n0csad Egyre több publikációban szerepelnek digitális térképek,

Részletesebben

Adatábrázolás. Hogyan láttassuk eredményeinket hatékonyan

Adatábrázolás. Hogyan láttassuk eredményeinket hatékonyan Adatábrázolás Hogyan láttassuk eredményeinket hatékonyan Tiszta látvány Az adat emelkedjen ki a grafikonból, kerüld el a szemetet és a zsúfoltságot Alkalmazz látható grafikai elemeket, hogy láttasd az

Részletesebben

4. Javítás és jegyzetek

4. Javítás és jegyzetek és jegyzetek Schulcz Róbert [email protected] A tananyagot kizárólag a BME hallgatói használhatják fel tanulási céllal. Minden egyéb felhasználáshoz a szerző engedélye szükséges! 1 Automatikus javítás

Részletesebben

Kövér betűk (bold) 1-es fejléc

Kövér betűk (bold) 1-es fejléc A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek

Részletesebben

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára A HONALPSZERKESZTÉS ALAPJAI 50 feladat a Debreceni Egyetem Informatikai Karának Informatikus Könyvtáros szakos hallgatói számára Készítette: Jávorszky Ferenc Debrecen 2010. 1 1. Készítsen honlapot, amelynek

Részletesebben

Internet TV Broadcaster kézikönyv

Internet TV Broadcaster kézikönyv Internet TV Broadcaster kézikönyv Rövid ismertetető: Az Internet TV broadcaster segítségével flv vagy mp4 videó fájlokat műsorlistába rendezve sugározhatunk Internetes TV adásokat. Annyi a dolgunk, hogy

Részletesebben

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 formok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!

Részletesebben

Választó lekérdezés létrehozása

Választó lekérdezés létrehozása Választó lekérdezés létrehozása A választó lekérdezés egy vagy több rekordforrásból származó adatokat jelenít meg. A választó lekérdezések a táblák, illetve az adatbázis tartalmát nem változtatják meg,

Részletesebben

HVK Adminisztrátori használati útmutató

HVK Adminisztrátori használati útmutató HVK Adminisztrátori használati útmutató Tartalom felöltés, Hírek karbantartása A www.mvfportal.hu oldalon a bejelentkezést követően a rendszer a felhasználó jogosultsági besorolásának megfelelő nyitó oldalra

Részletesebben

{LINGO} Termékleírás: - Méret: 61x18x8mm. - súly: 8,6 g. - hatótávolság: 10m. -akkumulátor-kapacitás és típus: 90mAh, polimer lítium akkumulátor

{LINGO} Termékleírás: - Méret: 61x18x8mm. - súly: 8,6 g. - hatótávolság: 10m. -akkumulátor-kapacitás és típus: 90mAh, polimer lítium akkumulátor {LINGO} Termékleírás: - Méret: 61x18x8mm - súly: 8,6 g - hatótávolság: 10m -akkumulátor-kapacitás és típus: 90mAh, polimer lítium akkumulátor - töltési idő: 2 óra - készenléti idő: 120 óra - beszélgetési

Részletesebben

Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei

Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei Az Educatio Társadalmi Szolgáltató Nonprofit Kft. a következő feltételek szerint készült bannerek elhelyezését vállalja weboldalain:

Részletesebben

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/

Részletesebben

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010.

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. május 1. BEVEZETÉS Az útmutató célja az Országos Területrendezési

Részletesebben

Memória játék. Felhasználói dokumentáció

Memória játék. Felhasználói dokumentáció Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.

Részletesebben

TABULÁTOROK TÁBLÁZATOK KÉSZÍTÉSE. A táblázatok készítésének lehetőségei:

TABULÁTOROK TÁBLÁZATOK KÉSZÍTÉSE. A táblázatok készítésének lehetőségei: TABULÁTOROK A tabulátorokat a szavak soron belüli pontos pozicionálására használjuk. A tabulátorokat valamilyen pozícióhoz kötjük. A pozíciók beállíthatók vonalzón vagy a Formátum menü Tabulátorok menüpontjának

Részletesebben

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL a., Begépelés Az adatok bevitelének legegyszerűbb módja, ha a táblázat kijelölt cellájába beírjuk őket. - számok (numerikus adatok) -

Részletesebben

Táblázatos adatok használata

Táblázatos adatok használata Táblázatos adatok használata Tartalomjegyzék 1. Az adatok rendezése...2 2. Keresés a táblázatban...2 3. A megjelenő oszlopok kiválasztása...3 4. Az oszlopok sorrendjének meghatározása...4 5. Az oszlopok

Részletesebben

6.1.1.2 Új prezentáció létrehozása az alapértelmezés szerinti sablon alapján.

6.1.1.2 Új prezentáció létrehozása az alapértelmezés szerinti sablon alapján. 6. modul Prezentáció A modul a prezentációkészítéshez szükséges ismereteket kéri számon. A sikeres vizsga követelményei: Tudni kell prezentációkat létrehozni és elmenteni különböző fájl formátumokban A

Részletesebben

ECDL Táblázatkezelés. www.nomina3p.hu 1. 4.1.1 A táblázatkezelés első lépései. 4.1.2 Beállítások elvégzése

ECDL Táblázatkezelés. www.nomina3p.hu 1. 4.1.1 A táblázatkezelés első lépései. 4.1.2 Beállítások elvégzése 4.1 Az alkalmazás 4.1.1 A táblázatkezelés első lépései 4.1.2 Beállítások elvégzése 4.1.1.1 A táblázatkezelő alkalmazás megnyitása és bezárása. 4.1.1.2 Egy és több munkafüzet (dokumentum) megnyitása. 4.1.1.3

Részletesebben

A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter 1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása,

Részletesebben

Pick Pack Pont kereső és boltválasztó alkalmazás

Pick Pack Pont kereső és boltválasztó alkalmazás Pick Pack Pont kereső és boltválasztó alkalmazás www.pickpackpont.hu online.sprinter.hu/terkep Dokumentáció V5 2018. október Sprinter Futárszolgálat Kft. 2018. Minden jog fenntartva! Tartalomjegyzék Funkciók

Részletesebben

ÖNKORMÁNYZATOK ÉS KISTÉRSÉGI TÁRSULÁSOK RÉSZÉRE

ÖNKORMÁNYZATOK ÉS KISTÉRSÉGI TÁRSULÁSOK RÉSZÉRE Helyi önkormányzatok és Többcélú Kistérségi Társulások normatív hozzájárulásainak és normatív, kötött felhasználású támogatásainak igénylési rendszere 2008. évre FELHASZNÁLÓI KÉZIKÖNYV ÖNKORMÁNYZATOK ÉS

Részletesebben

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Tartalomjegyzék 1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Géptől gépig... 11 Számok a gépeknek... 13 Nevek az embereknek... 14 Programok egymás

Részletesebben

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (DEBRECEN VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2013.09.05

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (DEBRECEN VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2013.09.05 FELHASZNÁLÓI KÉZIKÖNYV (DEBRECEN VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2013.09.05 Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...

Részletesebben

Tamás Ferenc: CSS táblázatok 2.

Tamás Ferenc: CSS táblázatok 2. Tamás Ferenc: CSS táblázatok 2. Ez az írás azoknak készült, akik már értik a HTML és a CSS nyelveket, csak használat közben kellene egy adott tulajdonság vagy érték. Kérem, hogy senki se ezzel kezdje a

Részletesebben

Bevezetés Működési elv AJAX keretrendszerek AJAX

Bevezetés Működési elv AJAX keretrendszerek AJAX AJAX Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek

Részletesebben

Szövegszerkesztés alapok WORD Formázások

Szövegszerkesztés alapok WORD Formázások Szövegszerkesztés alapok WORD Formázások A formázás sorrendje 1. Begépelem a szöveget folyamatosan 2. Helyesírást ellenőrzök 3. Entert (bekezdés) vagy Shift + Entert ütök 4. Formázok KIJELÖLÖM A FORMÁZANDÓ

Részletesebben

TEXTAREA++ a JavaScript ereje

TEXTAREA++ a JavaScript ereje TEXTAREA++ a JavaScript ereje Bártházi András email: [email protected] web: http://barthazi.hu tevékenységek: Weblabor szerkesztő NJSZT-WFSZ titkár stb. :) Fejlődő web A JavaScript a reneszánszát éli

Részletesebben

Programozás s 2 javascript

Programozás s 2 javascript Programozás s 2 javascript Az Internet programozása II. utolsó változtatás s 2008.04.27 27. Javascript Egy böngb ngészőhöz z készk szült script nyelv. Közvetlenül l a HTML kódba k kell beírni. Interaktivitást

Részletesebben

Felsőoktatási Erasmus koordinátorok (KA103) bevezető képzése

Felsőoktatási Erasmus koordinátorok (KA103) bevezető képzése Felsőoktatási Erasmus koordinátorok (KA103) bevezető képzése 2018. május 11. A beszámolás eszközei Tóth Tibor +STAFF: Yammer, E+Link, IMT, BO Reports, Dashboard IT eszközök az E+-ban EACEA Erasmus Charter

Részletesebben

Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével:

Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Alapvető szabályok Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Minden szöveges elem szövegdobozban, objektumban helyezkedik

Részletesebben

Weblap készítése. Fapados módszer

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

Szkriptnyelvek. 1. UNIX shell

Szkriptnyelvek. 1. UNIX shell Szkriptnyelvek 1. UNIX shell Szkriptek futtatása Parancsértelmez ő shell script neve paraméterek shell script neve paraméterek Ebben az esetben a szkript tartalmazza a parancsértelmezőt: #!/bin/bash Szkriptek

Részletesebben

Közoktatási Statisztika Tájékoztató 2012/2013. Használati útmutató

Közoktatási Statisztika Tájékoztató 2012/2013. Használati útmutató Közoktatási Statisztika Tájékoztató 2012/2013 Tartalomjegyzék 1. Technikai információk... 2 2. Publikus felület... 2 2.1 Bejelentkezés... 2 2.2 Összesítés... 3 2.2.1 Statisztikai tábla megtekintése...

Részletesebben

EDInet Connector telepítési segédlet

EDInet Connector telepítési segédlet EDInet Connector telepítési segédlet A cégünk által küldött e-mail-ben található linkre kattintva, a következő weboldal jelenik meg a böngészőben: Az EdinetConnectorInstall szövegre klikkelve(a képen pirossal

Részletesebben

Tájékoztató. Használható segédeszköz: -

Tájékoztató. Használható segédeszköz: - A 12/2013. (III. 29.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosítószáma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja

Részletesebben

HTML ÉS PHP ŐSZI FÉLÉV

HTML ÉS PHP ŐSZI FÉLÉV 1 HTML ÉS PHP ŐSZI FÉLÉV 2012-10-10 CSS kezdőlépések 2 A CSS és a HTML viszonya 2012-10-10 Hol található CSS kód? 3 Közvetlenül a tag-ek style paraméterében: bekezdés Ekkor a

Részletesebben

OBO TS használati útmutató. OBO TS online. használati útmutató. Verzió: 3.0. Dátum: január 16.

OBO TS használati útmutató. OBO TS online. használati útmutató. Verzió: 3.0. Dátum: január 16. www.obots.hu OBO TS online használati útmutató Verzió: 3.0 Dátum: 2018. január 16. Tartalom 1. A szoftver használata... 3 2. Belépés... 3 3. Típusmegoldások keresése... 3 4. Típusmegoldás kiválasztása...

Részletesebben

Használati utasítás Prestigio Nobile PER3562. Alapvető műveletek

Használati utasítás Prestigio Nobile PER3562. Alapvető műveletek Használati utasítás Alapvető műveletek Nyomja meg és tartsa benyomva a Power gombot a készülék bekapcsolásához. A készülék automatikusan belép a főmenübe a Kezdő képernyőn az üdvözlő képernyő után. A főmenü

Részletesebben

1/9. Sunell IP kamerák webes felületének használati útmutatója. Élő kép (Live Video)

1/9. Sunell IP kamerák webes felületének használati útmutatója. Élő kép (Live Video) felületének használati útmutatója Élő kép (Live Video) Belépés után rögtön látható a kamera élő képe, váltható a stream minősége (a beállításoktól függően), valamint a képre jobb kattintással előhozható

Részletesebben

Cikktípusok készítése a Xarayában

Cikktípusok készítése a Xarayában Cikktípusok készítése a Xarayában A Xaraya legfontosabb tulajdonsága az egyedi cikktípusok egyszerű készítésének lehetősége. Ezzel kiküszöbölhető egyedi modulok készítése, hiszen néhány kattintással tetszőleges

Részletesebben

MS ACCESS 2010 ADATBÁZIS-KEZELÉS ELMÉLET SZE INFORMATIKAI KÉPZÉS 1

MS ACCESS 2010 ADATBÁZIS-KEZELÉS ELMÉLET SZE INFORMATIKAI KÉPZÉS 1 SZE INFORMATIKAI KÉPZÉS 1 ADATBÁZIS-KEZELÉS MS ACCESS 2010 A feladat megoldása során a Microsoft Office Access 2010 használata a javasolt. Ebben a feladatban a következőket fogjuk gyakorolni: Adatok importálása

Részletesebben

WEB TECHNOLÓGIÁK 2.ELŐADÁS

WEB TECHNOLÓGIÁK 2.ELŐADÁS Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 2.ELŐADÁS 2014-2015 tavasz A HTML nyelv alapjai Mi a HTML? A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró nyelv,

Részletesebben

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:

Részletesebben

IPTV Képek és zene funkció Beállítások és tudnivalók

IPTV Képek és zene funkció Beállítások és tudnivalók IPTV Képek és zene funkció Beállítások és tudnivalók Nézegesse kedvenc képeit a fotelben ülve TV-je képernyőjén, vagy éppen hallgassa kedvenc zenéit szintén a TV-je segítségével! A Képek és zene új IPTV

Részletesebben

ConCorde FHD-1100S HD Médialejátszó

ConCorde FHD-1100S HD Médialejátszó ConCorde FHD-1100S HD Médialejátszó Felhasználói kézikönyv Bevezetõ Az Ön által megvásárolt HD media lejátszója a következõ fájl formátumokat támogatja: Video: H.264, AVI MP4 RM MPEG RMVB VOB MOV DAT,

Részletesebben

A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI)

A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI) Mgr. Námesztovszki Zsolt A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI) Eötvös Loránd Tudományegyetem, Pedagógiai és Pszichológiai Kar Oktatásinformatikai rendszerek - szöveggyűjtemény Budapest, 2013.

Részletesebben

HF-DVR 1004 H.264 Hálózati Rögzítő. Felhasználói kézikönyv

HF-DVR 1004 H.264 Hálózati Rögzítő. Felhasználói kézikönyv HF-DVR 1004 H.264 Hálózati Rögzítő Felhasználói kézikönyv Általános jellemzők Fejlett H.264 tömörítés. A továbbfejlesztett szűrőnek köszönhetően 30%-os adatmennyiség csökkenés. 4xD1 valós rögzítés. Egyidejűleg

Részletesebben

Telepítési útmutató a Solid Edge ST7-es verziójához Solid Edge

Telepítési útmutató a Solid Edge ST7-es verziójához Solid Edge Telepítési útmutató a Solid Edge ST7-es verziójához Solid Edge Tartalomjegyzék Bevezetés 2 Szükséges hardver és szoftver konfiguráció 3 Testreszabások lementése előző Solid Edge verzióból 4 Előző Solid

Részletesebben

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt>

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt> 1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen

Részletesebben

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL http://bit.ly/a1lhps Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 372-2500/8466 http://abonyita.inf.elte.hu

Részletesebben

1.1.1 Dátum és idő függvények

1.1.1 Dátum és idő függvények 1.1.1 Dátum és idő függvények Azt már tudjuk, hogy két dátum különbsége az eltelt napok számát adja meg, köszönhetően a dátum tárolási módjának az Excel-ben. Azt is tudjuk a korábbiakból, hogy a MA() függvény

Részletesebben

A HTML nyelv alapjai

A HTML nyelv alapjai A HTML nyelv alapjai Legalább mit kell ismernie egy webprogamozónak? Weblap tartalmának, szerkezetének kialakítása: HTML (HyperText Markup Language) Weblap formázása: CSS (Cascading Style Sheets) Kliensoldali

Részletesebben
2026 © DocPlayer.hu Adatvédelmi irányelvek | Szolgáltatási feltételek | Visszajelzés