Ágazati alap vizsga (WEB)

1.) Cirtusfélék webszerkesztés 40 pont

Weboldalak kódolása – Citrusfélék

    A forrásban található egy befejezetlen reszponzív oldal, amely részletesebben bemutatja a citrusféle gyümölcsöket. A mintának és a leírásnak megfelelően módosításokat kell elvégeznie a weboldalakon és a hozzátartozó CSS stíluslapon!

Nyissa meg az index.html, mandarin.html és style.css állományokat és a feladatleírásnak megfelelően végezze el a módosításokat! 

1. A weboldalak karakterkódolása utf-8 legyen és állítsa be az oldalak nyelvezetét magyarra!

A böngésző fülön megjelenő cím egyezzen meg az oldal főcímével!

2. A Bootstrap stíluslap hozzá lett csatolva a weboldalakhoz, de sajnos a style.css stíluslap nem. A weboldalak fejrészében helyezzen el hivatkozást a css mappában található style.css stíluslapra a már meglévő Bootstrap stíluslap hivatkozása alá!

3. A header HTML elemhez tartozó elemkijelölőt módosítsa úgy, hogy a fejléc magassága legyen 350 pixel nagyságú! A fejléc háttérképének állítsa be a bg2.jpg képfájlt!

4. A főcím elemkijelölőjében állítsa be a következőket:

a.       A háttérszín beállítását módosítsa úgy, hogy a szín 25%-ban legyen áttetsző!

b.       A főcím betűtípusa legyen Verdana, betű színe pedig zöld (#416618)!

c.       A cím legyen félkövér stílusú!

5. Készítsen egy navbar nevű osztálykijelölőt, amely segítségével állítsa be a menü háttérszínét narancssárgára (#fd8800)!

6. A weboldalak menüjét egészítse ki egy új „További információ” menüponttal, amely https://hu.wikipedia.org/wiki/Citrusform%C3%A1k oldalra mutat! Állítsa be, hogy a linkre kattintva az oldal új lapon jelenjen meg a böngészőben!

7. A 2-es szintű címsorokra a következő formázásokat állítsa be a stíluslapon:

a.       A betű színe és szegély színe egyezzen meg a főcím betűszínével!

b.       Az alcím bal oldalára helyezzen el egy 3 pixel vastag pontozott stílusú szegélyt!

c.       Az alcím legyen kiskapitális stílusú!

d.       Az alcím belső margóját állítsa függőleges irányba 5 pixel nagyságúra, míg vízszintes irányba 15 pixelre!

8. A leggyakoribb citrusféle gyümölcsök jelenleg 2 oszlopos elrendezésben jelennek meg kisméretű, valamint nagyméretű eszközöktől felfele is (wireframe_2oszlopos.png). Módosítsa úgy a rácsszerkezetet, hogy nagyméretű eszközöktől felfele 3 oszlopos elrendezésben jelenjenek meg a gyümölcsök (wireframe_3oszlopos.png)!

9. Mindkét oldalon megjelenő képek legyenek reszponzívak! Továbbá alkalmazza az img-thumbnail osztálykijelölőt is a képekre!

10. A mandarin kimaradt sajnos a gyümölcsök közül, ezért készítse el a többi gyümölcs oszlopához hasonlóan a mandarin oszlopát is, amelyet illesszen be a citrom

11. és pamelo gyümölcsök közé! A kimaradtgyumolcs.txt fájlban találja a szükséges szöveges forrást, a képet pedig az img mappában találja mandarin.jpg néven!

12. A „Részletesen a mandarinról” szöveg részletet helyezze el egy külön bekezdésbe, amelyet Bootstrap stílussal igazítson jobb oldalra! A szövegből készítsen egy hivatkozást, amely a mandarin.html fájlra mutat! A hivatkozásra alkalmazza a btn és a btn-outline-success Bootstrap osztálykijelölőket!

13. HTML tag segítségével mindkét oldalon a „Mandarin” alcímhez tartozó első bekezdésben emelje ki a „mandarin” első előfordulását félkövéren, míg a hozzátartozó, zárójelben található latin kifejezését dőlt stílussal!

14. A 3-as szintű alcímeket igazítsa középre és betűmérete az alapértelmezett betűmérethez képest 30%-kal legyen nagyobb! Az alcímek betűritkításának mértékét állítsa be 1 pixel nagyságúra!

15. Készítsen egy elemkijelölőt a bekezdésekhez! A bekezdések sorkizárt igazításúak legyenek, és első sor behúzásának mértékét állítsa be 15 pixel nagyságúra!

16. Az index.html oldal „Különleges citrusok” alcímhez tartozó gyümölcsökből készítsen egy számozatlan felsorolást!

17. A lista elemekhez tartozó elemkijelölőt módosítsa úgy, hogy az elemeket úsztassa balra! A lista elemek bal oldali margóját állítsa be 40 pixel nagyságúra!

18. A mandarin.html oldalon található táblázatban módosítsa a következőket:

a.       A táblázat fejlécében az adatcellákat cserélje le fejléccellákra!

b.       A táblázat fejlécének első sorában lévő cellákat egyesítse!

c.       A table HTML elemre alkalmazza a table és table-striped Bootstrap stílusokat!

d.       A stíluslapban a táblázat elsősorához tartozó stílusdefiníciót bővítse ki úgy, hogy a betűk nagybetűsek legyenek!

19. Ellenőrizze munkáját!

a.       A két HTML oldalt validálja a https://validator.w3.org/ oldalon! Az eredményről készítsen pillanatképeket, amelyeket mentsen el indexValidalas és mandarinValidalas néven!

b.       A stíluslapot ellenőrizze https://jigsaw.w3.org/css-validator/ oldalon! Az eredményről készítsen pillanatképet és mentse el styleValidalas néven!

2.) Voyager webszerkesztés

Voyager

A következő feladatban egy weboldalt kell készítenie a Voyager küldetés rövid bemutatására a feladatleírás és a minta szerint! Ahol a feladat másként nem kéri, a formázási beállításokat a style.css stílusállományban végezze el úgy, hogy az új szelektorokat az állomány végén helyezze el! 

Nagyobb felbontású, színes mintát a kész weboldalról a minta.jpg állományban talál, melyet tilos     a megoldásában             felhasználni!   A         forrás   weboldal         szerkezeti        ábrája a kiinduló szerkezeti ábra.png,     a          kész     weboldal         ábrája a kész szerkezeti ábra.png állományban található meg.

Az elkészült oldalt HTML-validáló eszközzel ellenőrizni kell!

Nyissa meg a voyager.html állományt és szerkessze annak tartalmát az alábbiak szerint:

1.        A weboldal karakterkódolása utf-8, a weboldal nyelve magyar legyen!

2.        A böngésző címsorában megjelenő cím „Voyager küldetés” legyen! 

3.        A weboldal fejrészében helyezzen el hivatkozást a style.css és a bootstrap.min.css stíluslapokra!

4.        A bevezető szekcióban a „Voyager-1” szöveget alakítsa 1-es szintű címsorrá!

5.        A bevezető szekcióban a mintán látható szövegrészt inline stílus alkalmazásával alakítsa félkövérré!

6.        A küldetés szekcióban alakítsa ki a 2. sorban található részt (két oszlop) az alábbi leírás, az első sor kialakítása és a minta alapján! A szükséges szövegek a forrás.txt állományban találhatóak.

a.    A szövegrész bekezdéseit a minta alapján alakítsa ki!

b.    Alakítsa dőltté a „10 milliárd bit” szövegrészt inline stílus alkalmazásával!

c.    Helyezze el a képeket (v1-szaturnusz.jpg, v1-csillagkozi.jpg) a megfelelő helyre!

d.    Ha a kép nem jelenik meg, vagy ha a kép fölé visszük az egér kurzort, akkor az első kép esetében a „Szaturnusz”, a második kép esetében a „Csillagközi tér” szöveg jelenjen meg!

e.    A képaláírások szövege legyen a minta szerinti!

f.     A képaláírásoknál (5 helyen) alkalmazza a BootStrap font-weight-bold osztálykijelölőjét!

7.        A weboldalon készítsen egy új menüpontot az alábbi leírás és a minta alapján:

a.    Az új menüpont a „Jelenlegi helyzete” menüpont után helyezkedjen el, és „Aranylemez” legyen a neve! Az új menüpont az oldalon belül az arany azonosítójú keretre hivatkozzon!

b.    Az aranylemez szekcióban levő keretbe másolja be az UTF-8 kódolású aranylemez.txt állomány tartalmát! A beillesztett szövegben a minta szerinti 2-

es szintű címsort, a bekezdést és a felsorolást alakítsa ki! A felsorolás elemeit formázza meg a BootStrap my-2 osztálykijelölőjének használatával!

c.    Szúrja be az előző pontban kialakított felsorolás mögé az aranylemez.jpg képet! Formázza a képet a BootStrap my-3 és w-100 osztálykijelölőinek használatával! Ha a kép nem jelenik meg, vagy ha a kép fölé visszük az egér kurzort, akkor a „Golden Record” szöveg jelenjen meg!

d.    A kép alatti szövegrészt helyezze egy bekezdésbe!

8.        Módosítsa a lábléc beállításait az alábbi leírás és a minta alapján:

a.    Készítsen hivatkozást az alábbi weboldalra: https://voyager.jpl.nasa.gov!

b.    A hivatkozás szövege „Voyager küldetés” legyen!

c.    A hivatkozás új oldalon nyíljon meg!

9.        A következő beállításokat, módosításokat a style.css külső stíluslap állományon végezze el:

a.    Az info osztályazonosítójú elem a háttérszíne 250,250,210 RGB kódú legyen, 2 képpont vastag, folytonos, 105,105,105 RGB színű vonal szegélyezze! A szegély lekerekítése 10 képpontos legyen!

b.    A láblécben lévő hivatkozáshoz készítsen stílusbeállítást úgy, hogy a hivatkozás szövege fekete színű, félkövér legyen aláhúzás nélkül! Ha a hivatkozás fölé visszük az egér kurzort, akkor a szöveg legyen dőlt és a színe piros! 

A megfelelő szelektor alkalmazásával a dokumentum összes bekezdésének igazítása legyen sorkizárt!