Gyakorló feladatsor (HTML5)

1. Web-fejlesztés I. kurzus, ELTE Informatikai Kar Gyakorló feladatsor (HTML5) • A feladatokat Nemes Adriána készítette.

2. Tananyag • A témához kapcsolódó tananyag a http://webfejlesztes.inf.elte.hu/lesson/show/46oldalon érhető el!

3. Feladatsor letöltése • A feladatsort és a hozzávalókat letöltheted erről a címről: http://bit.ly/szFJsf

4. Validálás

5. Feladatok • 1. feladat: Validáld a t1-f1-feladat.html fájlban lévő HTML kódot és javítsd ki a hibákat! • 2. feladat: validáld a t1-f2-feladat.html fájlban lévő HTML kódot és javítsd ki a hibákat! HTML5 validátor: http://validator.nu/

6. Oldalszerkezet elemek

7. <header>     <h1>A HTML5 szabvány</h1>     <p>Oldalszerkezet bemutatása</p> </header> <header>     <h1>A HTML5 szabvány</h1>     <p>Oldalszerkezet bemutatása</p> </header> <header>     <h1>A HTML5 szabvány</h1>     <p>Oldalszerkezet bemutatása</p> </header> A <header> tag • A headertaggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről (pl. <section>.)

8. A <nav> tag • A nav elem az oldal azon részének van fenntartva, amely más oldalakra, vagy az adott lap egy bizonyos területére mutató linkeket tartalmaz.

9. A <section> tag • A section elem az oldal egy nagyobb részét foglalja magába. Azonos témához tartozó elemek összecsoportosítására való, melynek közös címe van. Az azonos témakörbe tartozó elemeket foglalja egy csoportba.

10. Az <aside> tag • Az aside tag tartalma kapcsolatban áll az oldal fő részével, érintőlegesen kapcsolódik a körülötte levő tartalomhoz. Általában oldalsáv formájában jelenik meg, ami olyan elemeket tartalmaz, mint kapcsolódó kommentek/linkek vagy tag felhők.

11. Az <article> tag • Az articletagben található az oldal lényegi része. Ez lehet egy fórum bejegyzés, egy újságcikk, blog bejegyzés, vagy bármilyen más független tartalom. • Lehet saját fejléce és lábléce. Egy cikk fejléce tartalmazhatja például a cikk címét, alcímét, publikálás dátumát headertagek között. A láblécbe meg kerülhet például szerző footertagek közé.

12. A <footer> tag • A footeraheader elemhez hasonló elem, a lábléc jelölésére alkalmas tag. Nem csak az oldal egészére, de akár egy különálló részre vonatkozóan is. Ebből kifolyólag akár többször is használható egy oldalon belül. • A lábléc általában az oldallal kapcsolatos információkat tartalmazza, mint például a készítő neve, kapcsolódó dokumentumok linkjei, szerzői jogi információk.

13. A <hgroup> tag • A hgroup tag a címsor elemek (h1 - h6) csoportosítására való tag. Akkor szükséges a használata, amikor több szintű címsor van, mint például ha egy cikknek van alcíme. Ez esetben a h1 - h6 tageket csoportosítani kell egy hgrouptagbe.

14. Feladatok Oldalszerkezet elemek

15. 1. feladat • Készítsd el a t2-f1-feladat.png képen szereplő oldalszerkezetet a tanult HTML5 elemek használatával! Segítségül használd a t2-f1-style.css stílusfájlt.

16. 2. feladat • Készítsd el a t2-f2-feladat.png képen szereplő oldalszerkezetet a tanult HTML5 elemek használatával! Segítségül használd a t2-f2-style.css stílusfájlt.

17. Csoportosító elemek

18. A <figure> tag • A figure ábrák, fényképek, illusztrációk, diagramok jelölésére szolgál. A megjelenítendő tartalom lehet valamilyen kép, melyet az img tag segítségével lehet a figuretagbe illeszteni. • Viszont lehet multimédiaelem is, vagy akár forráskód is. Az utóbbi esetben a codetaget lehet használni. • Opcionálisan tartalmazhat egy ábrához tartozó feliratot. Ezt a feliratot figcaptiontagek közé kell tenni.

19. A <figure> és <figcaption> tag

20. Feladatok Csoportosító elemek

21. Feladat • Helyezd bele a három képet a cikkbe a figure és figcaptiontagek használatával! Kiindulásnak használd a t3-f1-feladat.html állományt. • A meglévő kep1, kep2 és kep3 osztályokat rendeld hozzá a figuretagekhez! • Így nézzen ki: t3-f1-feladat.png.

22. Szöveg-szintű elemek

23. A <time> tag • A time tag idő vagy dátum értéket jelöl. Plusz szemantikai információt hordoz, hiszen az eddigi módon megjelenített dátumokat a weblap látogatója el tudta olvasni és értelmezni, mindegy milyen formátumban volt megadva, viszont a time tag használatával az automaták/keresők/forráskód olvasók is értelmezni tudják a dátum értéket.

24. A <time> tag • Amennyiben a time tag tartalma nem egy konkrét dátum vagy időpont, akkor használni kell a datetime attribútumot. A datetime attribútumba kerül a konkrét dátum vagy időpont megfelelő formátumban. • A datetime attribútum értékét a következő formátumban kell megadni: YYYY-MM-DDThh:mm:ssTZD, ahol a betűk a következőket jelentik: • YYYY - év négy karakteren (például 2011) • MM - hónap két karakteren, számmal (például 04) • DD - nap két karakteren (például 01) • T - elválasztójel • hh - óra (például 22) • mm - perc (például 53) • ss - másodperc (például 06) • TZD - időzóna

25. A <time> tag • A pubdate attribútum egy logikai változó. Ha meg van adva, akkor azt jelzi, hogy a time tagban szereplő dátum a közzététel idejét jelöli.

26. A <mark> tag • A marktaggel jelzett szöveg valamilyen különleges tulajdonsággal bír. Hasonló a strongtaghez, viszont a mark taggel jelölt szövegnek nincs kiemelt fontossága. Egyszerű szövegkiemelés.

27. A <ruby>, <rp>, <rt> tagek • Ez a három tag együttesen a kelet-ázsiai kanjik olvashatóságát elősegítő "felülírás". A ruby karakterek kicsi megjegyzések, melyeket például a kínai vagy japán jellegű karakterek fölé írnak, hogy megmutassák a helyes kiejtést.

28. A <wbr> tag • A wbr tag hosszabb szavak új sorba törésére való. Hasonlít a brtaghez. A br tag sortörésre való, a wbrtaggel viszont a lehetséges szótörés helyét lehet megjelölni.

29. Feladatok Szöveg-szintű elemek

30. 1. feladat • Írd fel egy weboldalra, hogy „A múlt héten HTML5 konferencia volt”. A múlt héten szavak legyenek idő taggal ellátva és tartalmazzon egy pontos dátumot. • Alatta pedig ez a szöveg legyen: „Most feladatot oldok meg”. A most szó legyen idő taggel ellátva és jelölje az aktuális dátumot és időpontot, illetve jelöljön publikálás dátumot.

31. 2. feladat • A t4-f2-feladat.html állományban egészítsd ki értelemszerűen a szöveget. A keresett szó „teknős”. Jelölj meg minden szót!

32. Beágyazható elemek

33. Az <embed> tag • Az embed külső tartalom beágyazására szolgáló tag. Lehet flash vagy valamilyen interaktív tartalom.

34. A <source> tag • A source tag segítségével egy médiaforrásnak több alternatívája is megadható. • Például a video és az audiotegekben használható.

35. A <video> tag • A videotaggel videót lehet betenni az oldalba. Az autoplay attribútummal beállítható, hogy a videó fájl az oldal betöltése után automatikusan elinduljon. A hangot elvileg le lehet tiltani, ha muted attribútumot szerepeltetjük.

36. A <video> tag • A poster attribútum segítségével beállítható, hogy mi legyen a kezdő kép. • A loop attribútummal az automatikus ismétlődés állítható be. Ha jelen van a preload logikai attribútum, akkor a videó automatikusan betöltődik az oldal betöltése után, kivéve akkor, ha az autoplay attribútum is jelen van.

37. HTML5 video tag <video controlsposter="braille_iranytu.jpg"> <sourcesrc="braille_iranytu.mp4" type="video/mp4"> <sourcesrc="braille_iranytu.ogv" type="video/ogg"> <p>A böngésző nem támogatja a videóállomány lejátszását. </p> <p><a href="braille_iranytu.mp4">Az állomány letölthető mp4 formátumban</a></p> </video> Böngésző támogatottság

38. On-line átalakító • http://www.online-convert.com/

39. Az <audio> tag • Az audiotaggel hangfájlt lehet beszúrni az oldalba. Ha a böngésző nem ismeri az audiotaget, akkor a tag tartalma fog megjelenni a böngészőben.

40. HTML5 audio tag <audiocontrols>  <sourcesrc="pelda.ogg" type="audio/ogg">   <sourcesrc="pelda.mp3" type="audio/mpeg"> <p>A böngésző nem támogatja a hangállomány lejátszását. </p> <p><a href="pelda.mp3">Az állomány letölthető mp3 formátumban</a></p> </audio> Böngésző támogatottság

41. A <canvas> tag • A canvas tag segítségével egy rajzvásznat lehet beilleszteni az oldalba. A rajzvászon felülete script segítségével módosítható. Ezáltal dinamikusan jeleníthető meg rajta bármilyen kép, vagy grafika. Ez az elem veheti át a Flash helyét. Rá lehet másolni akár egy videó aktuális képét, vagy webes játékokat, animációkat készíteni.

42. A <canvas> tag

43. Feladatok Beágyazható elemek

44. 1. és 2. feladat • 1. feladat: Kedvenc Youtube videódat szúrd be egy weboldalba! • 2. feladat: A t5-f2-hangyaboj.avi állományt (megfelelő konvertálás után) szúrd bele egy weboldalba. Induljon el automatikusan és legyen kezelőfelülete. A videó kezdőképe a t5-f2-hangyaboj.jpg kép legyen és ha a böngésző nem támogatja a video taget, akkor ugyanerre a képre kattintva le lehessen tölteni a videofájlt.

45. 3. feladat • Rajzvászonra rajzolj két félig áttetsző négyzetet, melyek részben fedik egymást a mintának megfelelően. Szín értékének megadása: rgba(50,50,50,0.5).

46. Űrlap elemek

47. A <datalist> tag • A datalist tag segítségével lenyíló listát, adatlistát lehet készíteni. Hasonló a már megszokott select elemhez, a datalisttagek közé option elemekkel lehet megadni a listaelemeket. • Egy input elem list attribútumához lehet csatolni és akkor az input a datalist lenyíló listából veszi az adatokat.

48. Az <output> tag • Az output tag tartalma valamilyen számítás eredménye. Például ha van egy form, amely kiszámít valamit, akkor az eredményt az output tagbe írja. • A for attribútum kapcsolatot teremt az eredmény és a bemeneti értékek között.

49. A <progress> tag • A progresstag mutatja, hogy egy folyamat éppen hol tart. Például egy másolás vagy feltöltés során jelzi a másolás vagy feltöltést töltés állapotát. • Két attribútuma van: a value azt jelzi, hogy mennyi van kész a feladatból, a max pedig azt, hogy mennyi az egész feladat.

50. A <meter> tag • A metertag valamilyen mérési eredmény kijelzésére szolgáló elem. Egy ismert tartományon belüli skalár érték megmutatására. • A min és max attribútumokkal mondható meg, hogy a mért értéknek milyen tartomány közé kell esnie.