Gyakorló feladatok a HTML5 és CSS3 témakörhöz

1. Gyakorló feladatok a HTML5 és CSS3 témakörhöz Abonyi-Tóth Andor, ELTE Informatikai Kar

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

3. A HTML5 legfontosabb szöveg szintű elemei témakör

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

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

6. Kitekintés a stíluslapok használatába, tipikus szövegformázások

7. Bekezdés igazítás • A feladat szövege: http://sharetext.org/VjU5 balra középre jobbra sorkizárt

8. Bekezdés betűcsalád • A feladat szövege: http://sharetext.org/VjU5 serif sans-serif cursive fantasy

9. Egyedi font • 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! • A feladat szövege: http://sharetext.org/gjs8

10. Betűméret állítás • A feladat szövege: http://sharetext.org/VjU5 100% 12px 150% 12pt

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

12. Szöveg formázás Szavak közti távolság • A feladat szövege: http://sharetext.org/VjU5 Sortávolság Csupa nagybetű

13. Szöveg árnyékok • Árnyékold a szöveget az itt látható módokon!

14. Bekezdés behúzás • A feladat szövege: http://sharetext.org/VjU5

15. Alá, fölé, áthúzás • A feladat szövege: http://sharetext.org/NzKd

16. Csoportosító elemek

17. <p>, <div> és <hr> elemek • A feladat szövege: http://sharetext.org/VjU5

18. <pre> elem használata • A vers elérhető itt: http://www.poet.hu/vers/56198

19. Listák használata • A szöveg elérhető itt: • http://sharetext.org/1zmY • http://sharetext.org/Wou6

20. Ábrák (figure, figcaption) • A szöveg elérhető itt: http://sharetext.org/jPCV

21. Ábrák (figure, figcaption) • A szöveg elérhető itt: http://sharetext.org/QY1i

22. Beágyazott elemek

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

24. Kép beszúrása • A korábbi oldalt fejlesszük tovább úgy, hogy a kép <figure> tagek közé kerüljön és a <figcaption> 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!

25. Képtérkép készítése • 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! • A koordinátákat határozzuk meg egy képszerkesztő alkalmazás segítségével (pl. GIMP).

26. Audio állomány beágyazása • A http://danosongs.com/ oldalon válasszunk ki egy mp3 állományt és töltsük le. • Alakítsuk át wav és ogg formátumra a http://www.online-convert.com/ oldalon. • 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.

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

28. Szinkronizált lejátszás • 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.

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

30. Beágyazott keret (<iframe>) • 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!

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

32. Külső tartalom beágyazása <embed> • Készíts olyan oldalt, amelybe a http://bit.ly/1b4A0s2 címen elérhető Youtubevideó van beágyazva! • A méret 240x180 legyen!

33. Vászon <canvas> • Hozz létre egy vászon objektumot és rajzolj rá egy számítógépet monitorral!

34. Oldalszerkezet elemek

35. Oldalszerkezet elemek 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)

36. Táblázatok használata

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

38. Táblázatok használata • Fejleszd tovább az oldat úgy, hogy a <thead><tfoot><tbody> elemeket is felhasználod. • A láblécbe beírhatod, hogy Forrás: Wikipedia

39. Cella összevonások • Készítsd el az alábbi táblázatot!

40. Cella összevonások • Alakítsd át a táblázatot stíluslappal, hogy így nézzen ki:

41. Űrlapok készítése

42. Esszé • Készítsd el az alábbi űrlapot! A címkét a <label> 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!

43. Esszé • Fejleszd tovább a példát úgy, hogy a <fieldset> és <legend>tageket is használod!

44. Beviteli mező • 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!

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

46. Készítsd el a regisztrációs űrlapot! A szöveg itt elérhető: http://sharetext.org/5GVG

47. Stíluslap csatolása • Illeszd be a http://webfejlesztes.inf.elte.hu/feladatsor/konfreg.css címen található stíluslapot.

48. Osztálytalálkozó • 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 • A korábbi stíluslapot helyenként módosítanod kell…

49. Vége