1 / 59

Gyakorló feladatsor (HTML5)

Web-fejlesztés I. kurzus, ELTE Informatikai Kar. Gyakorló feladatsor (HTML5). A feladatokat Nemes Adriána készítette. Tananyag. A témához kapcsolódó tananyag a http://webfejlesztes.inf.elte.hu/lesson/show/46 oldalon érhető el!. Feladatsor letöltése.

noel
Download Presentation

Gyakorló feladatsor (HTML5)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related