520 likes | 891 Views
Gyakorló feladatok a HTML5 és CSS3 témakörhöz. Abonyi-Tóth Andor, ELTE Informatikai Kar. Feladatok megoldása. A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!. A HTML5 legfontosabb szöveg szintű elemei témakör. Feladat.
E N D
Gyakorló feladatok a HTML5 és CSS3 témakörhöz Abonyi-Tóth Andor, ELTE Informatikai Kar
Feladatok megoldása • A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!
Feladat • A feladatban szereplő link: http://hu.wikipedia.org/wiki/Boris_Becker • A feladat szövege: http://sharetext.org/23mZ
Feladat • A feladat szövege: http://sharetext.org/TeGQ
Kitekintés a stíluslapok használatába, tipikus szövegformázások
Bekezdés igazítás • A feladat szövege: http://sharetext.org/VjU5 balra középre jobbra sorkizárt
Bekezdés betűcsalád • A feladat szövege: http://sharetext.org/VjU5 serif sans-serif cursive fantasy
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
Betűméret állítás • A feladat szövege: http://sharetext.org/VjU5 100% 12px 150% 12pt
Betű formázás • A feladat szövege: http://sharetext.org/VjU5 dőlt vastag kiskapitális Ritkított betűköz
Szöveg formázás Szavak közti távolság • A feladat szövege: http://sharetext.org/VjU5 Sortávolság Csupa nagybetű
Szöveg árnyékok • Árnyékold a szöveget az itt látható módokon!
Bekezdés behúzás • A feladat szövege: http://sharetext.org/VjU5
Alá, fölé, áthúzás • A feladat szövege: http://sharetext.org/NzKd
<p>, <div> és <hr> elemek • A feladat szövege: http://sharetext.org/VjU5
<pre> elem használata • A vers elérhető itt: http://www.poet.hu/vers/56198
Listák használata • A szöveg elérhető itt: • http://sharetext.org/1zmY • http://sharetext.org/Wou6
Ábrák (figure, figcaption) • A szöveg elérhető itt: http://sharetext.org/jPCV
Ábrák (figure, figcaption) • A szöveg elérhető itt: http://sharetext.org/QY1i
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).
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!
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).
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.
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!
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.
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!
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!
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!
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!
Vászon <canvas> • Hozz létre egy vászon objektumot és rajzolj rá egy számítógépet monitorral!
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)
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!
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
Cella összevonások • Készítsd el az alábbi táblázatot!
Cella összevonások • Alakítsd át a táblázatot stíluslappal, hogy így nézzen ki:
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!
Esszé • Fejleszd tovább a példát úgy, hogy a <fieldset> és <legend>tageket is használod!
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!
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.
Készítsd el a regisztrációs űrlapot! A szöveg itt elérhető: http://sharetext.org/5GVG
Stíluslap csatolása • Illeszd be a http://webfejlesztes.inf.elte.hu/feladatsor/konfreg.css címen található stíluslapot.
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…