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

Átírás

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

2 A témához kapcsolódó tananyag a oldalon érhető el! 2

3 3

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

5 5

6 <header> <h1>a HTML5 szabvány</h1> <p>oldalszerkezet bemutatása</p> </header> 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>.) 6

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

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

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

10 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é. 10

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

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

13 Oldalszerkezet elemek 13

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

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

16 16

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

18 18

19 Csoportosító elemek 19

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

21 21

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

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

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

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

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

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

28 Szöveg-szintű elemek 28

29 Í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 tartalmazza a pontos dátumot: 2011 május 7. 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. 29

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

31 31

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

33 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ó. 33

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

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

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

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

38 38

39 Beágyazható elemek 39

40 1. feladat: Kedvenc Youtube videódat szúrd be egy weboldalba! 2. feladat: A t5-f2-hangyaboj.avi állományt szúr 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. 40

41 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). 41

42 42

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

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

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

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

47 Űrlap elemek 47

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

49 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). 49

50 50

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

52 Interaktív elemek 52

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

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

55 55