A webszerkesztés az ágazati informatika alapvizsga gyakorlati részének egyik 40 pontos feladata. A vizsgázónak a kapott vázlat, forrásszövegek, képek és formai előírások alapján egy egyszerű, reszponzív weboldalt kell elkészítenie HTML5 és CSS3 használatával, majd az oldalt HTML-validáló eszközzel is ellenőriznie kell.

A weboldalak készítésének alapjaival minden informatikai és távközlési ágazatban tanuló diáknak foglalkoznia kell. A webszerkesztési feladat követelményei az ágazat szakjain egységesek, ezért nemcsak a szoftverfejlesztő és -tesztelő szak tanulóinak kell HTML-ből és CSS-ből felkészülniük.

Hol jelenik meg a webszerkesztés az alapvizsgán?

A hivatalos elnevezés „Weboldalak kódolása”. Ez a 180 perces gyakorlati vizsgatevékenység három feladatának egyike:

Gyakorlati feladat Pontszám
Weboldalak kódolása 40 pont
Programozás Pythonban 40 pont
Otthoni és kisvállalati hálózatok kialakítása 40 pont

A három feladatra ajánlott időbeosztás 60–60–60 perc, de a vizsgázó maga döntheti el, hogy a teljes 180 percből mennyit fordít az egyes feladatokra. A weboldal elkészítésére így körülbelül 60 percet érdemes tervezni.

A gyakorlati vizsgatevékenység akkor eredményes, ha a vizsgázó a teljes 120 pont legalább 40 százalékát, vagyis 48 pontot megszerez. Ez a határ a gyakorlati rész egészére vonatkozik, nem külön a webszerkesztési feladatra. Mivel azonban ez a feladat a gyakorlati pontszám egyharmadát adja, kihagyása jelentősen csökkentené a siker esélyét.

Milyen anyagokat kap a vizsgázó?

A feladat nem pusztán annyit kér, hogy a vizsgázó készítsen egy tetszőleges weboldalt. A kialakítandó oldalhoz többféle segédanyagot kap:

  • vázszerkezeti rajzot, vagyis wireframe-et, amely megmutatja az oldal felépítését;
  • az oldalon elhelyezendő forrásszövegeket;
  • a felhasználandó képeket és más forrásállományokat;
  • a formai kialakításra és formázásra vonatkozó elváráslistát;
  • egy csatolt CSS-fájlt, amelynek segítségével a formázásokat el kell végezni.

A munka során tehát egyszerre kell követni a látványtervet és a szöveges utasításokat. A cél nem egy saját ízlés szerint megtervezett oldal, hanem a megadott követelmények pontos megvalósítása.

Milyen HTML-oldalszerkezetet kell ismerni?

A weboldalnak szabályos HTML5-dokumentumnak kell lennie. A vizsgázónak tudnia kell használni az oldal alapvető szerkezeti elemeit:

  • <!DOCTYPE html> – a HTML5 dokumentumtípus megadása;
  • <html> – a teljes HTML-dokumentum gyökéreleme;
  • <head> – a dokumentum beállításainak és metaadatainak helye;
  • <body> – a böngészőben megjelenő tartalom;
  • <meta> – például a karakterkódolás és a reszponzív megjelenítés beállítása.

Elvárás a szemantikus elemek megfelelő használata is. Ilyen a <header>, a <nav>, a <main>, a <section> és a <footer>. Ezek nem csupán a megjelenést segítik: jelentést adnak az oldal egyes részeinek, és áttekinthetőbbé teszik a dokumentum szerkezetét.

A legfontosabb HTML-elemek

A követelményben név szerint szereplő strukturális és tartalmi elemeket érdemes önállóan, segítség nélkül használni:

Feladat HTML-elemek
Oldalcím és címsorok title, h1–h6
Bekezdések és kiemelések p, strong, em
Hivatkozások és képek a, img, link
Kép és képaláírás figure, figcaption
Általános tárolóelemek div, span
Listák ul, ol, li
Táblázatok table, tr, td, th, caption

A tagek ismerete önmagában nem elegendő: azok legfontosabb attribútumait is helyesen kell alkalmazni. A követelmény többek között a href, target, src, alt, lang, charset és style attribútumokat nevezi meg.

Hivatkozások, képek, listák és táblázatok

A vizsgán előfordulhat, hogy egy szövegrészből hivatkozást kell készíteni, a linket új böngészőlapon kell megnyitni, vagy egy helyi képet kell az oldalba illeszteni. Képeknél különösen fontos a helyes elérési út és az értelmes alt szöveg.

Ismerni kell a számozott és számozatlan listák kialakítását, valamint szabályos táblázat készítését fejléc- és adatcellákkal. Figyelni kell arra is, hogy az elemek egymásba ágyazása helyes legyen, mert a hibás szerkezet a validálás során is megjelenhet.

CSS használata a vizsgán

A formázásokat a feladathoz csatolt CSS-fájl segítségével kell elvégezni. A vizsgázónak ugyanakkor ismernie kell a stílusok három alkalmazási módját:

  • inline CSS – közvetlenül egy HTML-elem style attribútumában;
  • internal CSS – a HTML-dokumentumban elhelyezett <style> elemben;
  • external CSS – külön stíluslapban, amelyet a HTML-oldalhoz kapcsolunk.

A feladat megoldásakor pontosan követni kell az utasítást: ha a formázást a csatolt külső stíluslapban kérik, akkor nem célszerű ugyanazt inline stílussal felülírni.

CSS-szelektorok

A megfelelő elemek kiválasztásához ismerni kell a legfontosabb szelektorokat:

  • univerzális szelektor: *;
  • elemszelektor: például p vagy h1;
  • azonosító-szelektor: például #fejlec;
  • osztályszelektor: például .kiemelt.

A tananyag pszeudo- és összetettebb szelektorokat is tartalmaz. A vizsgán különösen arra kell figyelni, hogy a megadott HTML-elemhez a megfelelő szabály kapcsolódjon, és a szelektor ne formázzon át nem kívánt elemeket.

Milyen CSS-tulajdonságokat kérhetnek?

A követelmény sokféle CSS-jellemző alkalmazását teszi lehetővé. Ezeket nem érdemes elszigetelt parancslistaként tanulni; inkább azt kell begyakorolni, hogyan lehet velük a látványtervhez hasonló elrendezést létrehozni.

Terület Jellemző példák
Színek és hátterek color, opacity, background
Dobozmodell border, margin, padding, box-sizing, box-shadow
Méretek width, height, valamint ezek minimum- és maximumértékei
Elrendezés és pozicionálás display, float, position, top, bottom, left, right, z-index
Szövegformázás font-family, font-size, font-style, line-height, text-align, text-decoration, letter-spacing
Listák és túlcsordulás list-style, overflow, white-space

A CSS-függvények közül a hivatalos vizsgakövetelmény a url(), rgb(), rgba() és calc() alkalmazását emeli ki.

Mit jelent a reszponzív weboldal?

A kész oldalnak különböző kijelzőméreteken is használhatónak kell maradnia. A reszponzív weboldal elrendezése alkalmazkodik például a telefon, a táblagép és az asztali számítógép képernyőjéhez.

Ehhez a vizsgázónak ismernie és alkalmaznia kell:

  • a viewport megfelelő beállítását;
  • a médialekérdezéseket, vagyis a @media szabályokat;
  • a törési pontokat;
  • a relatív hosszmértékegységeket, például az em, rem, százalék, vw és vh egységeket;
  • a rugalmasan méreteződő képeket és tartalmi elemeket.

A feladat megoldását nem elég egyetlen böngészőablak-méretben ellenőrizni. Érdemes a fejlesztői eszközök segítségével és az ablak átméretezésével is kipróbálni, hogy az oldal kisebb szélességen sem csúszik-e szét.

Bootstrap az alapvizsgán

A Bootstrap keretrendszer alapszintű használata szintén része a vizsgakövetelménynek. A feladat kérheti például:

  • konténerek létrehozását;
  • reszponzív rácsrendszer használatát;
  • szövegek, listák és táblázatok formázását;
  • képek reszponzív megjelenítését;
  • tartalmi egységek elkülönítését;
  • gombok kialakítását és formázását.

Nem a teljes Bootstrap dokumentáció bemagolása a cél. A vizsgázónak az alapvető osztályokat kell felismernie és a megadott feladatban célszerűen alkalmaznia.

Kell JavaScriptet írni?

A programozási alapok tananyagában rövid JavaScript-bevezetés is szerepel, így a tanulóknak érteniük kell a JavaScript szerepét és a weboldalba történő beágyazás alapját. A jelenlegi ágazati alapvizsga Weboldalak kódolása feladatának tételes követelménye azonban a HTML5-, CSS3-, reszponzív webdizájn- és Bootstrap-ismeretekre helyezi a hangsúlyt, és nem nevez meg önálló JavaScript-programozási követelményt.

Ezért a vizsgafelkészülésben először a szabályos HTML-szerkezetet, a CSS-formázást és a reszponzív kialakítást kell biztos szintre hozni.

HTML-validálás és hibakeresés

Az elkészült oldalt a vizsgázónak HTML-validáló eszközzel kell ellenőriznie. A validátor segít megtalálni például:

  • a hiányzó vagy rossz helyen lezárt tageket;
  • a hibás egymásba ágyazást;
  • a hiányzó kötelező attribútumokat;
  • a dokumentumszerkezet egyes hibáit;
  • az elgépeléseket és szabványtalan megoldásokat.

A validálás mellett a böngésző fejlesztői eszköze is sokat segíthet. Az Elemvizsgálóban ellenőrizhető, hogy egy CSS-szabály valóban érvényesül-e, mi írja felül, és milyen méretű vagy térközű az adott elem.

Hogyan pontozzák a webszerkesztési feladatot?

A feladatra összesen 40 pont szerezhető. Ezt legalább 25 külön értékelési elemre kell felosztani, és egy értékelési elem legfeljebb 2 pontot érhet.

Ez azt jelenti, hogy sok kisebb részletért jár pont: például egy megfelelő címsorért, helyes képbeillesztésért, jól beállított hivatkozásért, pontos színért, térközért vagy reszponzív viselkedésért. Ha az oldal nem készül el teljesen, a helyesen megoldott részek akkor is értékesek lehetnek.

Vizsga közben ezért célszerű először minden biztosan teljesíthető követelményt megvalósítani, majd a hátralévő időben finomítani a nehezebb elrendezési és reszponzív részleteket.

Gyakori hibák, amelyek pontvesztést okozhatnak

  • A CSS-fájl vagy valamelyik kép hibás elérési úttal szerepel.
  • Kimásoláskor lemarad egy szövegrész, kép vagy listaelem.
  • A megadott osztály- vagy azonosítónév eltér a CSS-ben használt névtől.
  • A képhez nem készül megfelelő alt attribútum.
  • A címsorok sorrendje vagy az oldal szemantikus szerkezete hibás.
  • A formázás csak egyetlen képernyőméreten működik.
  • A Bootstrap rács osztályai hibásan vagy hiányosan szerepelnek.
  • A vizsgázó nem futtatja le a HTML-validálást.
  • Az elkészült fájlok nem a feladatban előírt mappába vagy néven kerülnek.

Javasolt munkamenet a vizsgán

  1. Olvasd végig a teljes feladatot, és nézd meg a wireframe-et.
  2. Ellenőrizd a kapott fájlokat, képeket és szövegeket.
  3. Készítsd el vagy egészítsd ki a szabályos HTML5-oldalszerkezetet.
  4. Helyezd el az összes tartalmi elemet: szöveget, képet, listát, táblázatot és hivatkozást.
  5. Kapcsold megfelelően az oldalhoz a CSS- és szükség esetén a Bootstrap-fájlokat.
  6. Valósítsd meg a kért formázásokat az elváráslista sorrendjében.
  7. Ellenőrizd az oldalt többféle ablakszélességen.
  8. Futtasd le a HTML-validálást, és javítsd a jelzett hibákat.
  9. A beadás előtt ellenőrizd a fájlneveket, a mappaszerkezetet és a hivatkozott állományok elérési útját.

Hogyan érdemes felkészülni?

A leghasznosabb gyakorlás az, ha a tanuló egy egyszerű képernyőterv alapján, időre készít el teljes oldalakat. Érdemes külön gyakorolni a HTML-váz gyors felépítését, a képek és hivatkozások elérési útjait, a dobozmodellt, a pozicionálást, a médialekérdezéseket és a Bootstrap rácsrendszerét.

A gyakorlóoldalakat minden alkalommal validálni kell. Így a hibajelzések értelmezése már a vizsga előtt rutinná válik, és kevesebb időt vesz igénybe az ellenőrzés.