Szakmai vizsga - Webfejlesztés

Jackie Stewart

A következő feladatban egy egyszerű weblapot fog készíteni, ami Jackie Stewartről, a legendásból 16 Formula 1-es világbajnokról szól.

Forrásállományok letöltése.

A következő feladatban egy egyszerű weblapot fog készíteni, ami Jackie Stewartról, a legidősebb élő Formula l-es világbajnokról szól. A feladat megoldása során a következő állományokat kell felhasználnia: index.html, styles.css, css/bootstrap. min.ecss, js/jquery.min.js, url.txt. Nagyobb felbontású, színes mintát a kész weboldalról a minta.png állományban talál, melyet tilos a megoldásában felhasználni!

1. Nyissa meg az index.html állományt! Helyezzen el HTML5-ös dokumentumtípus definíciót az első sorba!
2. Az index.html állományba helyezzen el hivatkozást a styles.css és a css/bootstrap.min.css stíluslapokra!
3. Állítsa be az oldal kódolását UTF-8-ra, a nyelvet magyarra!
4. A böngésző címsorában megjelenő cím „Jackie Stewart" legyen!
5. Hozzon létre fejlécet (header) az oldaltörzs elején, ami az oldal címét és a Bootstrap navigációs sávot tartalmazza!
6. A szakaszokat tartalmazó div-hez rendelje a container osztályazonosítót (class)!
7. Hozza létre a hl, h2-es címsorszintű címeket és a bekezdéseket a mintának megfelelően!
8. A meglévő három menüpont mintájára hozzon létre a megfelelő helyen egy új menüpontot „Képek" szöveggel! Az új menüpont a kepek azonosítójú szakaszra mutasson!
9. Alakítsa ki a táblázatot a mintának megfelelően! Az első oszlopba fejléctípusú cellák kerüljenek!
10. A táblázat harmadik sorában vonja össze a cellákat minta szerint, és Bootstrap stílusosztály segítségével igazítsa középre az összevont cellák tartalmát!
11. Bootstrap stílusosztályok és a szükséges html elemek segítségével rendezze négyes oszlopba a képeket! A képeket lássa el img-thumbnail osztályazonosítóval!
12. A weboldal végén (footer) készítse el értelemszerűen a forrás URL-ekhez tartozó hivatkozást a minta szerint! Az URL címet az url.txt állományban találja. Oldja meg, hogy a forrás hivatkozás minden esetben új oldalon nyíljon meg!
13. Helyezzen el hivatkozást a js/jquery.min.js állományra a weboldal törzsének végén, úgy, hogy az oldal betöltődésekor a modem böngészőkben (Google Chrome, Firefox, Edge stb.) ne legyen csatolási hiba a JavaScript állományoknál!

A következő beállításokat a styles.css stíluslapon végezze új szelektorok létrehozásával vagy a meglévők bővítésével!

1. A teljes weblapon Verdana betűstílussal jelenjenek meg a szövegek, amennyiben Verdana nem áll rendelkezésre, helyette Arial betűtípust használjon a böngésző a megjelenítéshez.
2. A teljes weblap maximális szélessége 1280 képpont, felső margója 0 legyen, és vízszintesen a weblap középén helyezkedjen el!
3. A container osztályazonosítójú elem, valamint a fejléc és a lábléc háttérszíne bézs (beise) legyen!
4. A bekezdések ígazitása legyen sorkizárt!