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

2025. november 23. • 45 perc gyakorlat • Házi feladat

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.

#### Érettségi stílusú gyakorlófeladat

Ez a feladat az informatika érettségi webfejlesztési feladatainak stílusában készült.

A feladatban gyakorolt technikák:

- HTML: dokumentum struktúra, címsorok, bekezdések, listák (ul, ol), táblázat (colspan), linkek, kép
- CSS: külső stíluslap, szelektorok, színek (HEX), betűtípusok, box model, float

Oldd meg a feladatot önállóan, csak a korábbi leckéket használd segítségül!

## 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.

#### Szükséges fájlok letöltése

Hozz létre egy mappát `hazi-recept` néven, és töltsd le bele a következő fájlokat:

- `index.html` - a HTML dokumentum sablon
- `style.css` - a CSS stíluslap sablon
- `forrasszoveg.txt` - a feldolgozandó forrásszöveg

Kép: `palacsinta.jpg` - a recepthez tartozó kép

## 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:

Feladat | Leírás | Kész? | Segítség
--- | --- | --- | ---
1. | h1 címsor és title beállítása | ☐ | 1. lecke, 2. lecke
2. | Külső CSS fájl csatolása (link) | ☐ | 10. lecke
3. | Bekezdés, strong és em elemek | ☐ | 2. lecke
4. | Kép doboz (div), kép, képaláírás (p), sortörés (br) | ☐ | 2. lecke, 6. lecke
5. | Elkészítési idő div doboz (id attribútum), h2 címsor, lista | ☐ | 2. lecke, 3. lecke
6. | Hozzávalók h2 címsor és lista (ul) | ☐ | 2. lecke, 3. lecke
7. | Elkészítés h2 címsor és számozott lista (ol) | ☐ | 2. lecke, 3. lecke
8. | Tápérték h2 címsor és táblázat (colspan, rowspan) | ☐ | 2. lecke, 5. lecke
9. | Tipp bekezdés, félkövér kiemelés | ☐ | 2. lecke
10. | Vízszintes vonal (hr) | ☐ | 2. lecke
11. | Külső hivatkozás (target="_blank") | ☐ | 4. lecke
12. | Email hivatkozás (mailto:) | ☐ | 4. lecke
13. | Oldal: betűtípus, méret, szín | ☐ | 12. lecke
14. | h1: háttér, szín, padding, text-align | ☐ | 11. lecke, 13. lecke
15. | h2: szín, border-bottom | ☐ | 11. lecke, 13. lecke
16. | Kép doboz: float, width, margin, border-right, képaláírás stílus | ☐ | 12. lecke, 13. lecke, 14. lecke
17. | #elkeszitesi-ido: háttér, padding, szegély (ID szelektor) | ☐ | 10. lecke, 13. lecke
18. | Hozzávalók lista: háttér, padding, border-left | ☐ | 11. lecke, 13. lecke
19. | Elkészítés lista: háttér, padding, border-left | ☐ | 11. lecke, 13. lecke
20. | Táblázat: border-collapse, cellák formázása | ☐ | 5. lecke, 13. lecke
21. | Táblázat fejléc: háttér és szín | ☐ | 11. lecke
22. | Linkek: szín, text-decoration | ☐ | 11. lecke, 12. lecke
23. | Oldal: háttérszín, padding | ☐ | 11. lecke, 13. lecke
24. | Vízszintes vonal (hr): vastagság, szín | ☐ | 11. lecke, 13. lecke

## 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!)

#### Gratulálunk!

Ha sikeresen elkészítetted ezt a projektet, akkor az összes fontos emelt szintű HTML és CSS technikát gyakoroltad, ami az érettségin előfordulhat.

Következő cikk: JavaScript alapok - Ismerkedj meg a JavaScript programozási nyelvvel (bónusz lecke)!