Algoritmusleíró eszközök (2026. október)

HTML, CSS emelt szintű digitális kultúra érettségi feladat · 2026. október · Webszerkesztés

Feladat leírása

Algoritmusleíró eszközök (2026. október) – HTML, CSS érettségi feladat

Sok feladat megoldása egymást követő lépésekből áll. Ezek megfelelő sorrendben történő végrehajtása vezet el a kiinduló helyzettől a kívánt végeredményig. A matematika és informatika feladatok megoldásához is sok esetben ilyen lépéssorozat szükséges, amit algoritmusnak hívunk. Az informatikai algoritmusok leírására többféle módszer alakult ki. Ebben a feladatban weboldalt és vektorgrafikus képet kell készítenie a minta és a leírás alapján, amely bemutat néhány algoritmusleíró módszert!

Az algoritmus.html fájl már tartalmazza a weboldal szövegének forrását. Ebben a fájlban kell kialakítania a dokumentum szerkezetét HTML elemek segítségével.
A weboldal formázását biztosítja a stilus.css állomány, amely már tartalmaz CSS elemeket. A továbbiakban ezt a fájlt kell módosítania és bővítenie a kért formázások megadásához.
A weboldalon el kell helyezni a folyamat.svg vektorgrafikus képet, amely részben van kész. A megoldás során ezt a képet is módosítania kell.

A weboldalt csak stílusokkal formázza a stilus.css stíluslap módosításával, maga a weboldal ne tartalmazzon CSS stíluselemeket vagy a HTML elemek paraméterekkel történő formázását!

Az algoritmus.html oldal szerkesztése:

Részfeladatok

1. Az algoritmus.html oldalhoz csatolja stíluslapként a stilus.css állományt!
2. Állítsa be, hogy a böngésző címsorában az „Algoritmusleíró eszközök” szöveg jelenjen meg!
3. A weboldal szövegének szerkezetét alakítsa ki a minta és az alábbi leírás szerint:
- a) Legyen az „Algoritmusleíró eszközök” szövegrész első szintű címsor, míg „A programfejlesztés lépései”, a „Folyamatábra”, a „Struktogram”, valamint a „Mondatszerű leírás” szövegrész kettes szintű címsor!
- b) A további szövegek egy-egy bekezdésben szerepeljenek, kivéve azokat a részeket, amelyek sorszámozott listában vagy felsorolásban találhatók, valamint a mondatszerű leírás fejezet végén szereplő algoritmus sorai! Alakítsa ki a megfelelő szövegrészekből a bekezdéseket!
- c) A sorszámozott listát és a felsorolást alakítsa ki a minta alapján!
- d) Illessze be képként a folyamatábráról szóló fejezet végére a folyamat.svg vektorgrafikus állományt! A képhez állítsa be a „Folyamatábra” helyettesítő szöveget!
- e) Hozzon létre egy 2 oszlopos és 7 soros táblázatot a struktogramról szóló szövegrész végére!
- f) Az 1-3. és a 7. sor celláit vonja össze!
- g) A 4-6. sor első cellájában a   (nem törhető szóköz) legyen!
- h) A többi cellába a minta szerinti tartalmat írja be vagy a mondatszerű leírásból másolja be!
- i) Az első alcím utolsó bekezdésében szereplő „Euklideszi algoritmus” szövegrész legyen hivatkozás, amely az Euklideszi algoritmus Wikipédia oldalára mutat. A hivatkozást a HTML állomány végén találja. Másolja ide majd onnan törölje azt!
4. A stilus.css állomány elkészítése
A weboldal formázását a CSS állomány módosításával és a stíluselemek HTML állományban való alkalmazásával végezze el a következő feladatokban leírtak szerint!

A bekezdésekben szereplő szövegek legyenek sorkizárt igazításúak!
5. A beillesztett folyamat.svg képet igazítsa vízszintesen közepre!
6. A struktogramot bemutató táblázat formázásához több kijelölőt is kell készítenie, illetve módosítania. A táblázatra vonatkozó struktogram osztálykijelölőt egészítse ki úgy, hogy a táblázat szövege Open Sans betűtípusú legyen 12 pontos betűmérettel! A táblázatot szegélyezze 2 pixel vastagságú folytonos fekete vonallal a mintának megfelelően!
7. A táblázat celláinak formázását a struktogram osztálykijelölő módosításával állítsa be: a belső margó legyen 0.5 em méretű és a szegély 2 pixel vastagságú folytonos fekete vonal!
8. A 4-6. sor első celláinak formázására hozzon létre egy osztálykijelölőt balsav néven! Állítsa be a segítségével, hogy a cella szélessége 1.5 em legyen, és a cellának ne legyen szegélye!
9. A <pre> elem stílusát egészítse ki a következőképpen:
- a) a blokk szélessége legyen 12 em;
- b) a blokk vízszintesen középre igazítva jelenjen meg;
- c) a blokk háttérszíne legyen világosszürke színű (RGB kód: #D3D3D3);
- d) a blokk előtt és után 2 em nagyságú külső margó legyen!
10. A CSS lapon szereplő osztálykijelölőkre történő hivatkozásokat helyezze el a HTML oldal megfelelő elemeinél! A táblázatot rendelje a struktogram osztályhoz, a ciklusfeltételt tartalmazó cellát a ciklus osztályhoz, a bal oldali, szöveg nélküli (nem törhető szóközt tartalmazó) cellákat a balsav osztályhoz!
11. A kép elkészítése

A weboldalon megjelenő kép részben már elkészült. Nyissa meg az ön által használt vektorgrafikus szerkesztő programmal a folyamat.svg vagy folyamat.odg képet! Végezze el rajta a következő feladatokban leírt módosításokat, majd mentse el változatlan állománytípussal! Az ODG formátumú képet exportálja .SVG-be is!
12. A beolvasást követő, m változónak értéket adó utasítás hiányos. Egészítse ki az utasítás szövegét! Formázza a téglalapot és a benne lévő szöveget az alábbiak szerint:
- a) A téglalap szélességét állítsa be úgy, hogy a szöveg még elférjen (a szöveg torzítása nélkül), de feleslegesen nagy üres hely ne maradjon!
- b) A téglalapot és a benne lévő szöveget igazítsa vízszintesen és függőlegesen egymáshoz képest középre!
- c) Igazítsa az utasítást tartalmazó téglalapot a felette lévő nyílhoz képest vízszintesen középre!
13. Az m változónak értéket adó utasítás a ciklus végéről hiányzik. Másolja le az előbb elkészített utasítást és helyezze el úgy, hogy a már ott lévő nyíl a téglalap felső vonalának közepéhez csatlakozzon!
14. Az értékadó utasításokat tartalmazó négy téglalap kitöltését állítsa be 50%-os átlátszatlanság mellett RGB(0,255,0) kódú zöld színre!
15. A feltételt tartalmazó rombusz fölötti nyílra helyezzen el egy 0,15 cm átmérőjű, keretvonal nélküli, kitöltött kört! A kitöltésének színe egyezzen meg a többi alakzat keretvonalának színével! A kört vízszintesen igazítsa a nyílhoz képest középre!
16. Készítse el az utolsó utasítás téglalapjának aljáról induló minta szerinti nyilat, amely a feltétel fölötti körhöz csatlakozik! A törött vonal a téglalap aljának közepéről induljon! A törött vonal szakaszai legyenek a többi folyamatjelző szakasszal párhuzamosak vagy merőlegesek, a felső végén legyen nyíl! A törött vonal legyen a többi nyíl alakzat formátumával megegyező színű és vonalvastagságú!