Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Web-fejlesztés I. kurzus, ELTE Informatikai Kar A feladatokat Nemes Adriána készítette. 1.

Hasonló előadás


Az előadások a következő témára: "Web-fejlesztés I. kurzus, ELTE Informatikai Kar A feladatokat Nemes Adriána készítette. 1."— Előadás másolata:

1 Web-fejlesztés I. kurzus, ELTE Informatikai Kar A feladatokat Nemes Adriána készítette. 1

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

3  A feladatsort és a hozzávalókat letöltheted erről a címről: 3

4 4

5  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! 5 HTML5 validátor:

6 6

7  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..) A HTML5 szabvány Oldalszerkezet bemutatása A HTML5 szabvány Oldalszerkezet bemutatása A HTML5 szabvány Oldalszerkezet bemutatása 7

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

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

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

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

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

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

14 Oldalszerkezet elemek 14

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

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

17 17

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

19 19

20 Csoportosító elemek 20

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

22 22

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

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

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

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

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

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

29 Szöveg-szintű elemek 29

30  Í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. 30

31  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! 31

32 32

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

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

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

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

37 A böngésző nem támogatja a videóállomány lejátszását. Az állomány letölthető mp4 formátumban A böngésző nem támogatja a videóállomány lejátszását. Az állomány letölthető mp4 formátumban Böngésző támogatottság

38

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

40 A böngésző nem támogatja a hangállomány lejátszását. Az állomány letölthető mp3 formátumban A böngésző nem támogatja a hangállomány lejátszását. Az állomány letölthető mp3 formátumban Böngésző támogatottság

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

42 42

43 Beágyazható elemek 43

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

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

46 46

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

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

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

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

51 Űrlap elemek 51

52  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! 52

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

54 54

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

56 Interaktív elemek 56

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

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

59 59


Letölteni ppt "Web-fejlesztés I. kurzus, ELTE Informatikai Kar A feladatokat Nemes Adriána készítette. 1."

Hasonló előadás


Google Hirdetések