HTML feladatok (77 feladat)

Az oldal folyamatos fejlesztés alatt áll. Ha észrevételed van, örülnénk, ha megosztanád velünk: info @ tanit . hu
Az érettségi feladatokat a mellékletekkel, megoldásokkal együtt az Oktatási Hivatal weboldaláról vettük át. És van Online HTML editor is :)

Tartalomjegyzék


97 Teszt feladatok URL


97-17 Nemzeti parkok URL

Feladat leírás:
Készítsen reszponzív weboldalt a minta és a leírás alapján a magyar nemzeti parkokról.
Nyissa meg a nemzetiparkok.html fájlt és egészítse ki a megadottak szerint:
[1 p] 1. A weboldal nyelve magyar a kódolása pedig UTF-8 legyen!

[2 p] 2. A weboldal fejrészében helyezzen el hivatkozásokat a nemzetiparkok.css stíluslapra, valamint a nemzetiparkok.js JavaScript állományra a meglévő hivatkozások után!

[1 p] 3. A böngésző címsorában megjelenő felirat "Nemzeti parkok Magyarországon" legyen!

[1 p] 4. A weboldal menüjében javítsa a második menüpontnál megjelenítendő menüszöveget "Röviden"-ről "Nemzeti parkjainkról röviden"-re!

[2 p] 5. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
MenüpontCélazonosító
Nemzeti parkjainkparkjaink
Nemzeti parkjainkról rövidenroviden
Növény- és állatvilágnoveny-allatvilag
Az első nemzeti parkokelso-parkok

[2 p] 6. A park-adatok azonosítójú HTML elem (keret/konténer) bootstrap blokk második oszlopában helyezze el az images mappában található igazgatosagok-nevek.png képet. Ha a kép nem tölthető be, akkor a "Nemzeti Park területek" szöveg jelenjen meg. A képet lássa el a terkep stílus azonosítóval!

[2 p] 7. A "Nemzeti parkjaink" szekcióban lévő táblázatba szúrja be az alábbi hiányzó sort úgy, hogy illeszkedjen a többi sorhoz:
Balaton-felvidéki Nemzeti Park1997570190Csopak

[2 p] 8. A "Nemzeti parkjainkról röviden" szekcióban található képek mindegyikét formázza park-logo stílus osztállyal és állítsa be, hogy a képekre kattintva az adott oldalak új lapon jelenjenek meg!

[2 p] 9. Ugyanebben a szekcióban a "Balaton-felvidéki Nemzeti Park" részt javítsa ki úgy, hogy a formázása illeszkedjen a többi nemzeti park leírásához!

[1 p] 10. A "Növény- és állatvilág” szekcióban lévő bootstrap blokk oszlopainak 6:6-os arányát módosítsa 8:4-re, a minta szerint!

[2 p] 11. Ugyanitt, a "Növény- és állatvilág" szekcióban lévő képek mindegyikénél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint az állat vagy növény képe fölé kerül az egérkurzor!

[2 p] 12. Az "Az első nemzeti parkok a kontinenseken" rész alatt található megjegyzésben lévő szöveget alakítsa át számozatlan felsorolássá a mintának megfelelően!


Nyissa meg a nemzetiparkok.css állományt, majd egészítse ki illetve módosítsa a következők szerint:

[1 p] 1. A dokumentum alapértelmezett betűmérete 14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!

[2 p] 2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1000px felett pedig egymás mellett, egy sorban!

[3 p] 3. A body háttérképe az images/logo mappában található termeszetvedelem-hatter.png legyen. A háttérkép ne ismétlődjön, vízszintesen középre, függőlegesen fentre helyezze el! Görgetéskor a háttérkép ne mozduljon el!

[1 p] 4. A body szélességét állítsa a kijelző teljes szélességére!

[2 p] 5. A tablazat azonosítójú táblázatnak legyen 1px széles, folytonos vonalú, sötétszürke (darkgray) külső szegélye a minta szerint!

[1 p] 6. A bekezdések szövege legyen sorkizárt!

[1 p] 7. A kepek stílusosztállyal formázott képek sarkai legyenek 1rem értékkel lekerekítve!

[2 p] 8. A toTop azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!

[2 p] 9. Az egyes, kettes és hármas címsor szövegek színe legyen sötétzöld (darkgreen)!

[2 p] 10. A kiemelt-kep azonosítójú konténer szélessége legyen 100%, magassága pedig 300px!

[2 p] 11. A kiemelt-nev azonosítójú szöveg mérete legyen az alapértelmezett betűméret kétszerese és vastagított!

[1 p] 12. Az iucn azonosítójú logó legyen balra igazítva a mintának megfelelően!


A szövegek és képek forrásai:
http://magyarnemzetiparkok.hu/
https://csodasmagyarorszag.hu/cikkek/nemzeti-parkok
https://tudasbazis.sulinet.hu/
https://vadonleső.hu/
https://hu.wikipedia.org/wiki/Nemzeti_park
https://www.yosemite.com/

Végeredmény minta (részlet):
97-17 Nemzeti parkok.png


97-18 Nemzeti parkok a Dunántúlon URL

Feladat leírás:
Készítsen reszponzív weboldalt a minta és a leírás alapján a magyar nemzeti parkokról.
Nyissa meg a nemzetiparkok-dunantul.html fájlt és egészítse ki a megadottak szerint:

1. A weboldal nyelve magyar a kódolása pedig UTF-8 legyen!

2. A weboldal fejrészében helyezzen el hivatkozásokat a nemzetiparkok-dunantul.css stíluslapra, valamint a nemzetiparkok-dunantul.js JavaScript állományra a meglévő hivatkozások után!

3. A böngésző címsorában megjelenő felirat "Nemzeti parkok a Dunántúlon" legyen!

4. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
MenüpontCélazonosító
Dunántúli nemzeti parkjainkparkjaink
A parkokról rövidenroviden
Növény- és állatvilágnoveny-allatvilag
Az első nemzeti parkokelso-parkok

5. A park-adatok azonosítójú HTML elem (keret/konténer) bootstrap blokk második oszlopában helyezze el az images mappában található igazgatosagok-nevek.png képet. Ha a kép nem tölthető be, akkor a "Nemzeti Park területek" szöveg jelenjen meg. A képet lássa el a terkep azonosítóval!

6. A "parkjaink" szekcióban lévő táblázatba szúrja be az alábbi hiányzó sort úgy, hogy illeszkedjen a többi sorhoz:
Balaton-felvidéki Nemzeti Park1997570190Csopak

7. A "roviden" szekcióban található hivatkozások mindegyikét állítsa be, hogy a képekre kattintva az adott oldalak új lapon jelenjenek meg!
8. A "noveny-allatvilag” szekcióban lévő bootstrap blokk oszlopainak 6:6-os arányát módosítsa 8:4-re, a minta szerint!
9. Ugyanitt, a "noveny-allatvilag" szekcióban lévő képek mindegyikénél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint az állat vagy növény képe fölé kerül az egérkurzor!
10. Az "Az első nemzeti parkok a kontinenseken" rész alatt található megjegyzésben lévő szöveget alakítsa át számozatlan felsorolássá a mintának megfelelően!

Nyissa meg a nemzetiparkok-dunantul.css állományt, majd egészítse ki illetve módosítsa a következők szerint:

1. A dokumentum alapértelmezett betűmérete 14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!

2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1000px felett pedig egymás mellett, egy sorban!

3. A body háttérképe az images/logo mappában található termeszetvedelem-hatter.png legyen. A háttérkép ne ismétlődjön, vízszintesen középre, függőlegesen fentre helyezze el! Görgetéskor a háttérkép ne mozduljon el!

4. A body szélességét állítsa a kijelző teljes szélességére!

5. A tablazat azonosítójú táblázatnak legyen 1px széles, folytonos vonalú, sötétszürke (darkgray) külső szegélye a minta szerint!

6. A bekezdések szövege legyen sorkizárt!

7. A kepek stílusosztállyal formázott képek sarkai legyenek 1rem értékkel lekerekítve!

8. A toTop azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!

9. Az egyes, kettes és hármas címsor szövegek színe legyen sötétzöld (darkgreen)!

10. A kiemelt-kep azonosítójú konténer szélessége legyen 100%, magassága pedig 300px!

A szövegek és képek forrásai:
http://magyarnemzetiparkok.hu/
https://csodasmagyarorszag.hu/cikkek/nemzeti-parkok
https://tudasbazis.sulinet.hu/
https://vadonleső.hu/
https://hu.wikipedia.org/wiki/Nemzeti_park
https://www.yosemite.com/


Végeredmény minta (részlet):
97-18 Nemzeti parkok a Dunantulon.png


97-19 Kimi Räikkönen URL

Feladat leírás:
Készítsen reszponzív weboldalt a minta és a leírás alapján Kimi Räikönnen autóversenyzőről.
Nyissa meg a kimmi_raikonnen.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve magyar legyen!

2. A weboldal kódolása UTF-8 legyen!

3. A weboldal fejrészébe helyezzen el hivatkozást a kimmi.css fájlra!

4. A böngésző címsorában megjelenő felirat „Kimi Räikkönen” legyen!

5. A footer-ben megadott hivatkozás kódját bővítse, hogy az új oldalon nyíljon meg!

6. A teljes weboldalt tartalmazó HTML elemnek (keret/konténer, mely tartalmazza a head és content HTML elemeket) adjon profile-card azonosítót!

7. A profile-image HTML elembe (keretbe/konténerbe) helyezze el Kimi Räikönnen foto.jpg fotóját! Amennyiben a beillesztett fotó valamiért nem jeleníthető meg, vagy az egérkurzort rávisszük a fotóra, úgy a „Kimmi Räikönnen” felirat jelenjen meg! A képet lássa el „kimi” azonosítóval!

8. A name-headline HTML elem (keret/konténer) szövegeiből alakítsa ki a minta szerint az 1-es, a 2-es és a 3-as címsorokat!

9. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintás-kor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
MenüpontCélazonosító
Pályafutásapalyafutasa
Csapatvezetői tevékenységecsapat
Becenevekbecenevek
Eredményeieredmenyei
Fotókfotok
Formula-1-es rekordjairekordok
Külső hivatkozásokhivatkozasok

10. A táblázat részt alakítsa ki a minta szerint! A táblázat szövegét megtalálja a forráskódban kommentként a táblázat helyén!

11. A row osztályjelölővel jelölt konténerbe helyezze el az images mappából a számozott képét: 1.jpg, 2.jpg, …, 5.jpg. A képeket sorolja a „w-50” stílusosztályba!

12. A Formula–1-es rekordok felsorolásához alakítson ki a minta szerint számozott felsorolást!

Nyissa meg a kimmi.css fájlt, egészítse ki a leírás és a minta szerint
1. A dokumentum alapértelmezett betűmérete 14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani! Amennyiben az oldal szélessége 768px-nél szélesebb lesz, úgy az alapértelmezett betűméret 20px legyen!

2. A body szélességét állítsa a kijelző teljes szélességére!

3. A kettes címsorok szövege legyen dőlt stílusú!

4. Kimmi Raikönnen fotóján alkalmazzon 50%-os lekerekítést!

5. A body háttérképe az images mappában található hatterkep.jpg legyen. A háttérkép ne ismétlődjön, mindkét irányból középre helyezze el! Görgetéskor a háttérkép ne mozduljon el!

6. A bekezdések sortávolságát a dokumentum alapértelmezett betűméretének 1.5-szerese legyen!

7. A head szélessége a rendelkezésre álló hely 90%-a, magassága a rendelkezésre álló hely 20%-a legyen! A content szélessége a rendelkezésre álló hely 90%-a, magassága a rendelkezésre álló hely 80%-a legyen!

8. A nav szövegének a betűmérete a dokumentum alapértelmezett betűméretének 1.2-szerese legyen! A hármas szintű címsor szövegének betűmérete a dokumentum alapértelmezett betűméretével egyezzen meg! Ne használjon abszolút mértékegységet!

9. A hivatkozások betűszíne: (255,34,71) színkódú RGB szín legyen! Amennyiben a hivatkozásra rávisszük a kurzort, úgy a betűszín váltson fehérre, a háttér pedig feketére!

10. Állítsa a képek bal és jobb oldali margóját automatikusra!

11. Az oldalon 1200px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1200px felett pedig egymás mellett, egy sorban!

12. A content kapjon 1 képpontos, hsla(0,0%,30%,0.8) színű folytonos felső szegélyt!
Végeredmény minta (részlet):
97-19 Kimi Raikkonen.png


97-20 Hősök tere URL

Feladat leírás:
Készítsen reszponzív weboldalt a minta és a leírás alapján a Hősök teréről.
Nyissa meg a hosoktere.html fájlt és egészítse ki a megadottak szerint:

1. A weboldal nyelve magyar a kódolása pedig UTF-8 legyen!

2. A weboldal fejrészében helyezzen el hivatkozásokat a hosoktere.css stíluslapra, valamint a hosoktere.js JavaScript állományra a meglévő hivatkozások után!

3. A böngésző címsorában megjelenő felirat "Hősök tere" legyen!

4. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
MenüpontCélazonosító
Hősök tere történetetortenet
Látnivalóklatnivalok
Szobrokszobrok
Érdekességekerdekessegek

5. "tortenet" szekció

 a) A szövegben található, félkövér "Gloriette" szót formázza úgy, hogy dőlt is legyen.

 b) A bootstrap blokk első sorában a figure elemen belül helyezze el az images mappában található gloriette-1890.jpg képet. Ha a kép nem tölthető be, akkor a "Gloriette, 1890" szöveg jelenjen meg. A képet formázza a kepek stílusosztállyal.
 A figure tag-et lássa el a gloriette azonosítóval! A képhez tartozzon "Gloriette, 1890" képaláírás is, ehhez használja a figcaption elemet.

 c) A két hivatkozást állítsa be, hogy a szövegre kattintva az adott oldalak új lapon jelenjenek meg! (Ybl Miklós, Zsigmondy Vilmos)

6. A "szobrok" szekció

 a) A bootstrap blokk oszlopainak 4:8-os arányát módosítsa 3:9-re, a minta szerint!

 b) Mindegyik képnél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint a kis kép fölé kerül az egérkurzor!

7. Az "erdekessegek" szekcióban található három article első mondatait alakítsa át hármas címsorrá a mintának megfelelően: "A Hősök tere Kínában", "Gloriette", "Gábriel oszlopa"


Nyissa meg a hosoktere.css állományt, majd egészítse ki illetve módosítsa a következők szerint:

1. A dokumentum alapértelmezett betűmérete 14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!

2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1001px és a felett pedig egymás mellett, egy sorban!

3. body elem
 a) A háttérképe az images mappában található hosok-tere-halvany.png legyen. A háttérképet vízszintesen középre, függőlegesen fentre helyezze el. A héttérkép ne ismétlődjön! Görgetéskor a háttérkép ne mozduljon el!

 b) A szélességét állítsa a kijelző teljes szélességére!

 c) A hátterének a színe lightcyan legyen, a szöveg színe pedig darkblue!

4. A kepek stílusosztállyal formázott képek sarkai és a figure elemek legyenek 1rem értékkel lekerekítve!

5. Az elejere azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!

6. A kettes címsor szövegek legyenek félkövérek és a háttérszínük legyen rgba(255, 198, 123, 0.4)!

7. A bekezdések szövege legyen sorkizárt!

8. A kiemelt-kep azonosítójú konténer szélessége legyen 100%, magassága pedig 300px!

A szövegek és képek forrásai:
https://hu.wikipedia.org/wiki/H%C5%91s%C3%B6k_tere
https://www.erdekesvilag.hu/a-hosok-tere-kinaban/
https://www.szeretlekmagyarorszag.hu/multunk/5-erdekesseg-a-hosok-tere-multjarol/

Végeredmény minta (részlet):
97-20 Hosok tere.png


97-21 Budapest URL

Feladat leírás:
Készítsen reszponzív weboldalt a minta és a leírás alapján Budapest nevezetességeiről.
Nyissa meg a budapest.html fájlt és egészítse ki a megadottak szerint:

1. A weboldal nyelve magyar a kódolása pedig UTF-8 legyen!

2. A weboldal fejrészében helyezzen el hivatkozásokat a budapest.css stíluslapra, valamint a budapest.js JavaScript állományra a meglévő hivatkozások után!

3. A böngésző címsorában megjelenő felirat "Budapest" legyen!

4. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
MenüpontCélazonosító
Budapest történetetortenet
Budapest címerecimer
Kultúrakultura
Galériagaleria
Közlekedéskozlekedes

5. A "tortenet" szekció bootstrap blokkjának második oszlopában helyezze el az images mappában található budavari-palota.jpg képet. Ha a kép nem tölthető be, akkor a "Budavári palota" szöveg jelenjen meg. A képet formázza a kepek stílusosztállyal.
A képet figure csoportosító elemben helyezze el és a figure tag-et lássa el a palota azonosítóval! A képhez tartozzon "Budavári palota" képaláírás is, ehhez használja a figcaption elemet.

6. A "nepesseg" konténerben lévő táblázatba szúrja be az alábbi hiányzó sort a megfelelő helyre úgy, hogy illeszkedjen a többi sorhoz:
19802 059 226


7. A "tortenet" szekcióban található két hivatkozást állítsa be, hogy a szövegre kattintva az adott oldalak új lapon jelenjenek meg! (Aquincum, Osztrák–Magyar Monarchia)

8. A "galeria" szekcióban lévő bootstrap blokk oszlopainak 6:6-os arányát módosítsa 3:9-re, a minta szerint!

9. Ugyanitt, a "galeria" szekcióban lévő képek mindegyikénél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint a kis kép fölé kerül az egérkurzor!

10. A "kozlekedes" szekcióban található megjegyzésben lévő szöveget alakítsa át számozott felsorolássá a mintának megfelelően!

Nyissa meg a budapest.css állományt, majd egészítse ki illetve módosítsa a következők szerint:

1. A dokumentum alapértelmezett betűmérete 14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!

2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1000px felett pedig egymás mellett, egy sorban!

3. A body háttérképe az images mappában található budapest-cimer-halvany.png legyen. A háttérkép ne ismétlődjön, vízszintesen középre, függőlegesen fentre helyezze el! Görgetéskor a háttérkép ne mozduljon el!

4. A body szélességét állítsa a kijelző teljes szélességére!

5. A nepesseg-tablazat azonosítójú táblázatnak legyen 1px széles, folytonos vonalú, sötétszürke (darkgray) külső szegélye a minta szerint!

6. A bekezdések szövege legyen sorkizárt!

7. A kepek stílusosztállyal formázott képek sarkai és a figure elemek legyenek 1rem értékkel lekerekítve!

8. Az elejere azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!

9. A kettes címsor szövegek legyenek félkövérek és a háttérszínük legyen rgba(255, 198, 123, 0.4)!

10. A kiemelt-kep azonosítójú konténer szélessége legyen 100%, magassága pedig 300px!

A szövegek és képek forrásai:
https://hu.wikipedia.org/wiki/Budapest

Végeredmény minta (részlet):
97-21 Budapest.png


97-22 Balaton URL

Feladat leírás:
A forrásként kiadott weboldalon kell módosításokat végeznie a Balaton rövid bemutatására a feladatleírás és a minta szerint.
Nyissa meg a balaton.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve magyar a kódolása pedig UTF-8 legyen!
2. A weboldal fejrészében helyezzen el hivatkozásokat a balaton.css stíluslapra, valamint a balaton.js JavaScript állományra a meglévő hivatkozások után!
3. A böngésző címsorában megjelenő felirat Balaton legyen!
4. Állítsa be, hogy amikor a böngésző beolvassa az oldalt, automatikusan futtassa le a keprejt() JS függvényt!
5. A header és foldrajz szakaszok container stílusosztállyal formázott konténerét módosítsa úgy, hogy container helyett container-fluid legyen a stílusosztályuk!
6. A fejleckepek azonosítójú konténerbe illessze be a kepek/fej3.jpg képet úgy, hogy az megjelenjen a slideshow-ban harmadik elemként. A beszúrt képnél állítsa be, hogy a Tavirózsák felirat jelenjen meg ha a kép valami miatt nem tölthető be, vagy ha az egeret a kép fölé viszik.
7. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
MenüpontCélazonosító
Földrajzfoldrajz
Turizmusturizmus
Növényvilágnovenyvilag
Állatvilágallatvilag

8. A foldrajz azonosítójú bootstrap rács oszlopainak 6:6-os arányát módosítsa 8:4‑re, a minta szerint!
9. A "A Balaton földrajza" 2-es címsort követő négy szövegrészt alakítsa általános bekezdésekké!
10. A domborzat azonosítójú figure elemen belül készítsen egy figcaption feliratot az alábbi szöveggel: "A Balaton medrének domborzata"
11. A foldrajz azonosítójú konténerben található táblázat utolsó sorába szúrja be az alábbi adatot:
Part hossza235 km

12. A turizmus azonosítójú konténerben található Turisztikai célpontok táblázat mindegyik soránál állítsa be, hogy a kapcsolódó kép ne kattintásra jelenjen meg, hanem azonnal, amint az állat vagy növény képe fölé kerül az egérkurzor!
13. A turizmusszovegkeret konténerben levő öt hivatkozás mindegyikét állítsa be, hogy a városok nevére kattintva az adott oldalak új lapon jelenjenek meg!
14. A novenyvilag konténerben lévő bootstrap rács mindhárom blokkjához adjon hozzá pluszban novenykep stílusosztályt is a meglevők után!
15. Az oldal legalján a footer szakaszban helyezzen el egy vízszintes vonalat és a vonal alatt közvetlenül legyen az Ugrás az elejére szöveg hivatkozás, amelyre kattintva a böngésző az oldal legelejére ugrik.

Nyissa meg a balaton.css állományt, majd egészítse ki illetve módosítsa a következők szerint:
1. A dokumentum háttérszíne rgba(150, 255, 255, 0.2) legyen!
2. Ha a menüpontok fölé viszik az egeret, akkor az adott menüpont betűszíne váltson át erre a színre: rgb(50, 50, 255)
3. A h1 címsor legyen pozícionálva fentről -75px, balról pedig -30px értékkel! Figyelem, mindkét érték negatív!
4. A h2 címsorok legyenek félkövérek!
5. A h1, h2, h3 és h4 címsorok mindegyikének a betűtávolsága 2px legyen!
6. A panorama stílusazonosítójú elem töltse ki vízszintesen a rendelkezésre álló helyet!
7. A novenykep stílusosztály szövege legyen középre igazítva!
8. A novenykep stílusosztállyal formázott elemeken belüli képek legyenek lekerekítve 20px-el és a belső margójuk is legyen 20px!
9. Az allatkep stílusosztály szelektorában található cursor bejegyzést hatástalanítsa a kódsor törlése nélkül!
10. Az allatkep stílusosztállyal formázott képek szélessége legyen 250px!
11. Az általános bekezdések legyenek sorkizártak!
12. A latin stílusosztály betűmérete legyen 1rem, és dőlt!

A szövegek és képek forrásai (2022.05.10):
https://hu.wikipedia.org/wiki/Balaton
https://hungarytoday.hu/
https://www.mme.hu/magyarorszag-madarai
Végeredmény minta (részlet):
Balaton.png