Gyakorló feladatsor (HTML5)

1

Gyakorló feladatsor (HTML5)

Web-fejlesztés I. kurzus, ELTE Informatikai Kar

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/46 oldalon é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

A <header> tag

A header taggel 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>.)

<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>

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 article tagben 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 header tagek között. A láblécbe meg kerülhet például szerző footer tagek közé.

12

A <footer> tag A footer a header 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 hgroup tagbe.

14

FeladatokOldalszerkezet 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 figure tagbe illeszteni.

Viszont lehet multimédiaelem is, vagy akár forráskód is. Az utóbbi esetben a code taget lehet használni.

Opcionálisan tartalmazhat egy ábrához tartozó feliratot. Ezt a feliratot figcaption tagek közé kell tenni.

19

A <figure> és <figcaption> tag

20

FeladatokCsoportosító elemek

21

Feladat

Helyezd bele a három képet a cikkbe a figure és figcaption tagek 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 figure tagekhez!

Í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 mark taggel jelzett szöveg valamilyen különleges tulajdonsággal bír. Hasonló a strong taghez, 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 br taghez. A br tag sortörésre való, a wbr taggel viszont a lehetséges szótörés helyét lehet megjelölni.

29

FeladatokSzö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 audio tegekben használható.

35

A <video> tag

A video taggel 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.

HTML5 video tag<video controls poster="braille_iranytu.jpg"> <source src="braille_iranytu.mp4" type="video/mp4"> <source src="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

On-line átalakító

http://www.online-convert.com/

39

Az <audio> tag

Az audio taggel hangfájlt lehet beszúrni az oldalba. Ha a böngésző nem ismeri az audio taget, akkor a tag tartalma fog megjelenni a böngészőben.

HTML5 audio tag<audio controls>  <source src="pelda.ogg" type="audio/ogg">   <source src="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

FeladatokBeá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 datalist tagek 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 progress tag 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 meter tag 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.

51

FeladatokŰrlap elemek

52

1. feladat Készíts adatlistát a „gyumolcsok”

azonosítóval rendelkező formhoz. Az elemi legyenek az alábbi gyümölcsök és amikor a felhasználó ki szeretné tölteni a mezőt, akkor ebből az adathalmazból választhasson. Gyümölcsök: eper, narancs, alma, barack, citrom.

Ezt az adathalmazt rendeld hozzá egy beviteli mezőhöz. Teszteld a működését!

53

2. feladat

Készíts egy mutató (meter) értéket, amely intervalluma 40-től 100-ig terjedhet.

Készíts példát olyan mutatóra, amikor piros, sárga és zöld színt vesz fel (Google Chrome-ban érdemes tesztelni).

54

Interaktív elemek

55

A <details> és a <summary> tagek A details és a summary tagek

további részletes leírás megjelenítésére szolgálnak. A summary tag tartalma úgy viselkedik, mintha egy link volna. Rákattintás után a details tag többi tartalma láthatóvá válik a felhasználó számára, illetve újrakattintás után eltűnik.

56

FeladatokInteraktív elemek

57

1. feladat

A t7-f1-feladat.txt állományban található városokat és leírásukat tedd egy weboldalra úgy, hogy először csak a város neve jelenjen meg, majd az arra való kattintás után jelenjen meg a részletes adat.

58

2. feladat

Készíts el egy (fiktív) csoportnévsort az alábbi módon: ábécé sorrendben az első három hallgató legyen mindig látható, alattuk legyen egy „A teljes listához kattints ide” felirat, amire kattintva megjelenik a kurzus hallgatóinak teljes listája.

59

Vége