Abonyi-Tóth Andor, ELTE Informatikai Kar 1.  A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!

Az előadások a következő témára: "Abonyi-Tóth Andor, ELTE Informatikai Kar 1.  A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!"— Előadás másolata:

1 Abonyi-Tóth Andor, ELTE Informatikai Kar 1

2  A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj! 2

3 3

4  A feladatban szereplő link: http://hu.wikipedia.org/wiki/Boris_Becker http://hu.wikipedia.org/wiki/Boris_Becker  A feladat szövege: http://sharetext.org/23mZ http://sharetext.org/23mZ 4

5  A feladat szövege: http://sharetext.org/TeGQ http://sharetext.org/TeGQ 5

6 6

7  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 7 balra középre jobbra sorkizárt

8  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 8 serif sans-serif cursive fantasy

9  A http://www.google.com/fonts oldalon keress Neked tetsző betűcsaládot, amely támogatja a magyar ékezeteket is. Írd ki ezzel a verset!http://www.google.com/fonts  A feladat szövege: http://sharetext.org/gjs8 http://sharetext.org/gjs8 9

10  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 10 100% 12px 150% 12pt

11  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 11 dőlt vastag kiskapitális Ritkított betűköz

12  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 12 Szavak közti távolság Sortávolság Csupa nagybetű

13  Árnyékold a szöveget az itt látható módokon! 13

14  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 14

15  A feladat szövege: http://sharetext.org/NzKd http://sharetext.org/NzKd 15

16 16

17  A feladat szövege: http://sharetext.org/VjU5 http://sharetext.org/VjU5 17

18 18  A vers elérhető itt: http://www.poet.hu/vers/56198 http://www.poet.hu/vers/56198

19 19  A szöveg elérhető itt:  http://sharetext.org/1zmY http://sharetext.org/1zmY  http://sharetext.org/Wou6 http://sharetext.org/Wou6

20 20  A szöveg elérhető itt: http://sharetext.org/jPCV http://sharetext.org/jPCV

21 21  A szöveg elérhető itt: http://sharetext.org/QY1i http://sharetext.org/QY1i

22 22

23  Helyezzük el az oldalon a http://bit.ly/londonig címen elérhető képet.http://bit.ly/londonig  Töltsük ki hozzá az alt attribútumot is és írjuk le a hosszú leírást is (longdesc). 23

24  A korábbi oldalt fejlesszük tovább úgy, hogy a kép tagek közé kerüljön és a paraméterrel adjuk meg a képaláírást is.  Alapból a kép 50%-os kicsinyítésben legyen látható, és ha rákattintunk, akkor jelenjen meg a kép új ablakban! 24

25  A http://bit.ly/1gXgL4C címen elérhető képet illesszük be egy oldalra és készítsük el hozzá a kliens oldali térképet! http://bit.ly/1gXgL4C  A koordinátákat határozzuk meg egy képszerkesztő alkalmazás segítségével (pl. GIMP). 25

26  A http://danosongs.com/ oldalon válasszunk ki egy mp3 állományt és töltsük le.http://danosongs.com/  Alakítsuk át wav és ogg formátumra a http://www.online-convert.com/ oldalon. http://www.online-convert.com/  Ezek után ágyazzuk be az audio állományokat az oldalunkra úgy, hogy a hangállomány lejátszása automatikusan elinduljon és látszódjon a vezérlő eszköztár is. 26

27  A http://bit.ly/16oOwg5 címen található csomagot töltsd le és a benne lévő videókat ágyazd be az oldalra.http://bit.ly/16oOwg5  Az eszköztár legyen megjelenítve a video alatt! 27

28  Az előbbi példákban szereplő videó- és audió állományt illeszd be úgy, hogy a videó legyen elnémítva, és a hangállománnyal szinkronizált módon legyen lejátszva. 28

29  Készíts egy olyan oldalt, amelyben beágyazott keretben helyezed el a http://weblabor.hu/ oldalt! http://weblabor.hu/  A keret mérete 800x600 legyen! 29

30  Készíts egy olyan oldalt, amelyben egy olyan beágyazott keretet használsz, amelynek tartalma az srcdoc paraméterrel van megadva.  A keret tartalma egy link legyen, ami a webfejlesztes.elte.hu oldalra mutat.  Állítsd be, hogy a link ne a keretbe, hanem a szülő ablakba nyíljon meg! 30

31  Készíts olyan oldalt, amelybe a http://bit.ly/1b4zslW címen elérhető SVG állomány van beágyazva! http://bit.ly/1b4zslW  A méret 300x200-as legyen! 31

32  Készíts olyan oldalt, amelybe a http://bit.ly/1b4A0s2 címen elérhető Youtube videó van beágyazva! http://bit.ly/1b4A0s2  A méret 240x180 legyen! 32

33  Hozz létre egy vászon objektumot és rajzolj rá egy számítógépet monitorral! 33

34 34

35 Valósítsd meg az itt látható oldalt a megfelelő oldal- szerkezet elemek használatával! (Main, article, section, aside, nav, header, footer, address) 35 http://sharetext.org/J0ql

36 36

37  Készítsd el az alábbi táblázatot! Használd a scope paramétert is a fejlécek megadásánál! 37

38  Fejleszd tovább az oldat úgy, hogy a elemeket is felhasználod.  A láblécbe beírhatod, hogy Forrás: Wikipedia 38

39  Készítsd el az alábbi táblázatot! 39

40  Alakítsd át a táblázatot stíluslappal, hogy így nézzen ki: 40

41 41

42  Készítsd el az alábbi űrlapot! A címkét a taggel add meg és a szövegterület kitöltése kötelező legyen!  Az űrlap post metódussal a saját e-mail címedre továbbítódjon! 42

43  Fejleszd tovább a példát úgy, hogy a és tageket is használod! 43

44  Fejleszd tovább a példát úgy, hogy egyszerű szöveges mezőben a Neptun kódot is meg kelljen adni. Ez a mező 10 karakter széles legyen, de csak 6 karaktert lehessen begépelni! 44

45  Fejleszd tovább a példát úgy, hogy a Neptun kód mező csak alfanumerikus karakterekből álló, 6 karakter hosszú stringet fogadjon el, speciális karaktereket ne!  Ehhez a pattern paramétert kell használnod a megfelelően megfogalmazott reguláris kifejezéssel. 45

46 46 A szöveg itt elérhető: http://sharetext.org/5GVG

47  Illeszd be a http://webfejlesztes.inf.elte.hu/feladatsor/konfreg.css ( http://bit.ly/1rIvQ59 ) címen található stíluslapot.http://webfejlesztes.inf.elte.hu/feladatsor/konfreg.css http://bit.ly/1rIvQ59 47

48  Készítsd el az alábbi űrlapot! A melyik étterembe étkezzünk kérdésnél az alábbi szövegek legyenek választási lehetőségként felajánlva (datalist):Vén diófa, Borostyán, Szegedi, Grillterasz  A szöveg itt elérhető: http://sharetext.org/9yLF http://sharetext.org/9yLF  A korábbi stíluslapot helyenként módosítanod kell… 48

49 49