Urban Street Food Fesztivál
Kategória: Webfejlesztés - emelt szint
Feladat leírása
A városi parkban idén is megrendezésre kerül a népszerű Street Food Fesztivál. A szervezők téged kértek fel, hogy készítsd el az esemény weboldalát, ahol a látogatók informálódhatnak a programokról és az árakról.
A rendelkezésedre álló állományok:
-
index.html(a főoldal vázlata) -
kinalat.html(az ételek és árak listája) -
stilusburger.css(a formázást tartalmazó stíluslap) -
banner.jpg(fejléckép) -
burger.jpg(illusztráció)
A feladatod, hogy a leírás alapján módosítsd a HTML fájlokat és a CSS stíluslapot. A képeket nem kell szerkesztened, azok készen állnak.
Tudnivalók
-
A weblapokat UTF-8 kódolással kell mentened.
-
A formázást a
stilus.cssfájlban végezd el, ne használj szövegközi (inline) stílusokat! -
A megoldás mappájában a képek (
banner.jpg,burger.jpg) rendelkezésre állnak. -
Ügyelj a szemantikus elemek (címsorok, bekezdések, listák) és a dobozmodell (margók, keretek) helyes használatára a forrásdokumentum alapján.
Részfeladatok
1. Nyisd meg szerkesztésre az index.html, kinalat.html és stilusburger.css fájlokat.
2. Állítsd be, hogy a böngésző címsorában (fülén) mindkét oldalon az „Urban Food Fest” felirat jelenjen meg.
3. A HTML fájlok fejrészében helyezz el hivatkozást a stilusburger.css stíluslapra. Ügyelj arra, hogy inline (soron belüli) stílusokat ne használj, mindent a CSS fájlban rögzíts!
4. Az index.html oldalon a „Street Food Fesztivál” szöveget állítsd be egyes szintű címsornak (h1).
5. Az index.html oldalon a „Helyszín és Időpont” és a „Programok” szövegeket állítsd be kettes szintű címsornak (h2).
6. Illeszd be a banner.jpg képet közvetlenül a h1 címsor alá mindkét oldalon. A kép alternatív szövege (alt) legyen: „Fesztivál hangulat”.
a) Add a képhez az alábbi azonosítókijelölőt: "banner"
b) CSS segítségével állítsd be a kép szélességét 100%-ra
7. A CSS fájlban hozz létre egy keret nevű osztályt. Állítsd be, hogy az ebbe tartozó elemek szélessége 1000 képpont legyen, és vízszintesen középre igazodjanak az oldalon (margin: auto). A két HTML oldalon a teljes tartalmat (a h1-től a láblécig) foglald egy ilyen osztályú div elembe.
8. A stíluslapon állítsd be, hogy az oldalon minden szöveg Arial betűtípussal jelenjen meg, amennyiben nem áll rendelkezésre, akkor az alapértelmezett talp nélküli (sans-serif) betűtípussal.
9. Az index.html oldalon a „Regisztráció” bekezdésnek add az info egyedi azonosítót (id). A CSS-ben formázd meg ezt az azonosítót: a háttérszín legyen világosszürke (#EEEEEE), a szövegszín sötétkék (#002060), és legyen félkövér a betűstílus.
10. Az index.html szövegében található „ingyenes” szót emeld ki félkövér stílussal és piros színnel (#CC0000). Ehhez használj egy kiemelt nevű osztályt a CSS-ben.
11. Készíts navigációs menüt a két oldal között. A „Főoldal” szöveg mutasson az index.html-re, a „Kínálat és Árak” szöveg a kinalat.html-re. A linkek színe minden állapotban legyen fekete, és ne legyen aláhúzásuk.
12. Az index.html oldalon illeszd be a burger.jpg képet a „Mit kóstolhatsz?” bekezdés elé. A kép alternatív szövege „Gourmet Burger” legyen.
13. A CSS fájlban a burger.jpg képre (használhatsz osztályt vagy a kép attribútumait szeleltorként) állítsd be a következőket: szélessége 300 képpont legyen, ússzon a szöveg jobb oldalán (float: right), és a szövegtől való távolsága balról és alulról legyen 15-15 képpont.
14. A kinalat.html oldalon hozz létre egy táblázatot a minta szerint. A táblázatnak legyen 1 képpontos, fekete szegélye. Az első sorban (fejléc) a „Kategória”, „Étel neve” és „Ár” feliratok szerepeljenek félkövéren, középre igazítva.
15. A táblázatban a „Burgerek” kategória vonja össze a hozzá tartozó 3 sort (rowspan). A táblázat celláinak belső margója (padding) legyen 5 képpont.
16. A lábléc szövegét („Minden jog fenntartva...”) helyezd el egy új bekezdésben, és igazítsd középre egy kozepre nevű osztály segítségével.
17. A kinalat.html oldalon a „Térkép megtekintése” szövegre helyezz el egy linket, amely a „https://maps.google.com” címre mutat, és új böngészőfülön nyílik meg.
