20. Gyakorlati projekt - Receptoldal készítése

Ebben a gyakorlati feladatban egy komplett receptoldalt készítesz el önállóan, a megadott forrásszöveg és utasítások alapján. A feladat az összes eddig tanult emelt szintű érettségi anyagot gyakoroltatja.

A feladat leírása EMELT SZINT

Készíts egy receptoldalt a mellékelt forrásszöveg (forrasszoveg.txt) alapján! A forrásfájlokat töltsd le, és a megadott utasítások szerint alakítsd ki a weboldalt.

Feladatok EMELT SZINT

Készítsd el a receptoldalt az alábbi utasítások alapján! Minden feladathoz megtalálod a szükséges segítséget a korábbi leckékben.

HTML feladatok

1. A forrasszoveg.txt első sorában található szöveget helyezd el egyes szintű címsorként az oldalon. Ugyanezt a szöveget állítsd be a böngészőfülön megjelenő oldalcímnek is.
2. Csatold a style.css külső stíluslapot a HTML dokumentumhoz.
3. A forrásszöveg 4. és 6. sorában található bekezdéseket helyezd el az oldalon. Az első bekezdésben a „palacsinta" szót emeld ki félkövérrel, a „számtalan ízesítéssel" kifejezést pedig dőlt betűvel.
4. Helyezd el a palacsinta.jpg képet (alternatív szöveg: „Házi palacsinta tányéron") a bekezdések elé, egy kep-doboz osztályú dobozba. A kép alá írd: „Házi palacsinta töltelékkel". Használj sortörést a mintán szereplő módon.
5. Az „Elkészítési idő:" részt (8-11. sorok) helyezd el egy dobozban. A doboznak adj elkeszitesi-ido azonosítót! A címet helyezd el kettes szintű címsorként, az időket pedig felsorolásban.
6. A „Hozzávalók (8 darabhoz):" szöveget helyezd el kettes szintű címsorként. Alatta a hozzávalókat (14-20. sorok) helyezd el felsorolásban. Adj a listának hozzavalok osztálynevet.
7. Az „Elkészítés:" szöveget helyezd el kettes szintű címsorként. Az elkészítési lépéseket (23-31. sorok) helyezd el számozott felsorolásban. Adj a listának elkeszites osztálynevet.
8. A „Tápérték" szöveget helyezd el kettes szintű címsorként. Hozz létre alatta egy táblázatot a tápérték adatokhoz (33-38. sorok)! A táblázat első sorában a „Tápérték (1 adag)" szöveg két oszlopot foglaljon el. Az „Energia" cella két sort foglaljon el, mert két értéke van: kJ és kcal. Adj a táblázatnak tapertek osztálynevet.
9. A 40. sorban található tippet helyezd el az oldalon. A „Tipp:" szót emeld ki félkövérrel.
10. A tipp és a Nosalty hivatkozás közé helyezz el egy vízszintes vonalat.
11. A 42. sorban található szöveget helyezd el az oldalon. A Nosalty weboldalára mutató hivatkozás új lapon nyíljon meg.
12. A 44. sorban található szöveget helyezd el az oldalon. Az e-mail címre hozz létre email hivatkozást.

CSS feladatok

13. Az oldal alapértelmezett betűtípusa legyen Arial, a betűméret 16 pixel, a szöveg színe #333333.
14. Az egyes szintű címsor háttérszíne legyen #1976d2, a szöveg színe fehér, belső margója 20 pixel, és a szöveg legyen középre igazítva.
15. A kettes szintű címsorok színe legyen #1565c0. Az alsó szegély legyen 2 pixel vastag, #1976d2 színű.
16. A .kep-doboz osztályú doboz bal oldalon lebegjen, szélessége legyen 200 pixel, jobb külső margója 15 pixel. A doboz jobb oldalán legyen 2 pixel vastag, #1976d2 színű szegély. A képaláírás szövege legyen középre igazítva, dőlt betűvel, sortávolsága 1.2.
17. Az #elkeszitesi-ido azonosítójú doboz háttérszíne legyen #e8f5e9 (halvány zöld), belső margója 20 pixel, szegélye 2 pixel vastag, #4caf50 színű.
18. A .hozzavalok osztályú lista háttérszíne legyen #fff3e0, belső margója 15 pixel, bal oldali szegélye 4 pixel vastag, #ff9800 színű.
19. Az .elkeszites osztályú lista háttérszíne legyen #e3f2fd, belső margója 15 pixel, bal oldali szegélye 4 pixel vastag, #1976d2 színű.
20. A .tapertek osztályú táblázat szegélyei legyenek összevonva, szélessége 100%, háttérszíne fehér. A cellák szegélye 1 pixel vastag, #dddddd színű, belső margójuk 10 pixel.
21. A táblázat fejléc celláinak háttérszíne legyen #1976d2, szövegszíne fehér.
22. A linkek színe legyen #1976d2, aláhúzás nélkül.
23. Az oldal háttérszíne legyen #fafafa, belső margója 20 pixel.
24. A vízszintes vonal legyen 2 pixel vastag, #cccccc (világosszürke) színű.

Mintamegoldás EMELT SZINT

Ha minden feladatot helyesen oldottál meg, az oldalad a következőhöz hasonlóan fog kinézni:

Házi palacsinta recept

Házi palacsinta
töltelékkel

A palacsinta a magyar konyha egyik legkedveltebb édessége. Gyorsan elkészíthető, és számtalan ízesítéssel variálható. Az alaptészta elkészítése egyszerű, de néhány trükkel igazán tökéletes lesz az eredmény.

A palacsinta története egészen az ókori Görögországig nyúlik vissza, ahol hasonló tésztákat sütöttek forró köveken. Magyarországon a 18. századtól vált népszerűvé, és azóta is a családi összejövetelek kedvenc desszertje. A hagyományos töltelékek közé tartozik a túró, a lekvár és a darált dió, de ma már modern változatokban is készítik Nutellával, gyümölcsökkel vagy akár sós töltelékekkel is.

Elkészítési idő

• Előkészítés: 10 perc
• Sütés: 20 perc
• Összesen: 30 perc

Hozzávalók (8 darabhoz)

• 250 g finomliszt
• 2 db tojás
• 400 ml tej
• 1 csipet só
• 2 evőkanál étolaj
• 1 evőkanál cukor
• kevés szénsavas víz

Elkészítés

1. A lisztet szitáld egy tálba, majd adj hozzá egy csipet sót és a cukrot.
2. Üss bele a tojásokat, és kezdd el keverni.
3. Fokozatosan öntsd hozzá a tejet, miközben folyamatosan kevered.
4. Add hozzá az olajat és a szénsavas vizet, majd keverd simára a masszát.
5. Hagyd pihenni a tésztát legalább 30 percig.
6. Hevíts fel egy serpenyőt közepes lángon, és vékonyan kend ki olajjal.
7. Önts egy merőkanál tésztát a serpenyőbe, és forgasd szét vékony rétegben.
8. Süsd körülbelül 1-2 percig, majd óvatosan fordítsd meg.
9. A kész palacsintát töltsd meg kedved szerint lekvárral, túróval, vagy szórd meg kakaóval.

Tápérték

Tápérték (1 adag)
Energia	950 kJ
	227 kcal
Fehérje	6,5 g
Szénhidrát	28 g
Zsír	9,8 g

Tipp: A tökéletes palacsintához fontos, hogy a tészta pihenjen! Így a glutén „ellazul", és puhább, könnyebb lesz a végeredmény.

---

További receptekért látogass el a Nosalty weboldalára!

Kérdésed van? Írj nekünk: info@receptoldal.hu

Ellenőrző lista EMELT SZINT

Mielőtt beadod a házi feladatot, ellenőrizd, hogy minden feladatot megoldottál-e:

Extra feladatok (szorgalmi) EMELT SZINT

Ha elkészültél az alapfeladattal, próbáld ki ezeket a bónusz feladatokat is:

25. Beágyazott lista: A hozzávalóknál csoportosítsd az összetevőket két alcsoportba (pl. „Tésztához" és „Töltelékhez"). Használj beágyazott listát!
26. Rowspan: Bővítsd a tápérték táblázatot egy „Makrotápanyagok" cellával, ami 3 sort foglal el (rowspan="3"), és fogja össze a Fehérje, Szénhidrát és Zsír sorokat!
27. Tartalomjegyzék: Adj hozzá egy tartalomjegyzéket az oldal tetejére, ami anchor linkekkel (#hozzavalok, #elkeszites, stb.) az egyes szekciókra ugrik!
28. Lábléc: Készíts egy láblécet az oldal aljára, ami tartalmazza a szerzői jogokat és az aktuális évet!
29. Hover effekt: A linkeknél egér fölé vitelkor jelenjen meg az aláhúzás, és az egérmutató változzon kézzé! (Tipp: használd az a:hover pszeudo-osztályt és a cursor: pointer tulajdonságot!)
30. Inline lista: Az „Elkészítési idő" dobozban a lista elemei jelenjenek meg egymás mellett, vízszintesen! (Tipp: használd a display: inline tulajdonságot a listaelemekre!)