Webfejlesztés alapjai előadás
Nappali tagozat
2025/2026 I. félév

Alapadatok

• Kurzus kódok: IBNa1014E, ITNA2714e
• A kurzussal a következő tárgyak teljesíthetők:
  • IB714e Web tervezés ea.
  • ITN714E Web tervezés ea.
  • ITNA2714e Webtervezés alapjai ea.
  • IBNa1014E Webfejlesztés alapjai ea.
  • IN1014EA Webfejlesztés alapjai ea.
• Heti óraszám: 1.
• A tantárgy típusa és értékelés módja: előadás, beszámoló (ötfokozatú).
• A kurzus felvételének nincs előfeltétele.
• Felelős oktató: Dr. Holló Csaba, egyetemi adjunktus, Szoftverfejlesztés Tanszék.

A kurzus célja

• A hallgató képes legyen jó minőségű statikus weboldalakat készíteni.
• A hallgató ismerje a webtervezés alapjait és megértéssel viszonyuljon a weboldalakat különböző körülmények között vagy nehézségekkel kezelő felhasználókhoz.

Tematika

1. HTML és CSS szintaxis.
2. Oldalszerkezet elemek.
3. Stílusok elhelyezése.
4. Kijelölések (alapvető kijelölők, állapot, kapcsolat, tulajdonság alapján). Rangsor és hatás. Mértékegységek.
5. Szövegek jellemzői, strukturális egységei és azok formázása. Hivatkozások elhelyezése és formázása.
6. Objektumok általános formázása (dobozmodell, háttér, margó, belső margó, szegély, körvonal, túlcsordulás). Helyzetmegadás.
7. Felsorolások. Menük elhelyezése és formázása.
8. Táblázatok.
9. Űrlapok.
10. Beágyazott elemek.
11. Médialekérdezések. Nyomtatási stíluslap. Reszponzív design alapjai. Folyékony rács. Rácsszerkezet.
12. A HTML oldalak akadálymentes kialakításának alapvető technikái.
13. A HTML és CSS további lehetőségei.

Ajánlott irodalom

1. Abonyi-Tóth Andor, ELTE IK: A weblapkészítés technikája (HTML5, CSS3) és ergonómiája.
2. Cservenák Bence., Gercsó Márk: Webfejlesztés alapjai gyakorlati jegyzet és régebbi videók.
3. Vancsics Béla által gondozott régebbbi gyakorlati jegyzet.
4. HTML5 weboldalak készítése - webfejlesztes.gtportal.eu
5. Virginia DeBolt: HTML és CSS. Webszerkesztés stílusosan. Kiskapu Kft, 2005.
6. (angol) HTML5 - MDN web docs (Mozilla)
7. (angol) W3Schools HTML5 Tutorial
8. (angol) W3Schools CSS Tutorial

A foglalkozásokon való részvétel követelményei és a távolmaradás pótlásának lehetősége

• Az előadások látogatása nem kötelező, azonban az előadásokon elhangzottakat ismerteknek, az esetleges megállapodásokat elfogadottaknak tekintjük, és a hallgató semmilyen célból nem hivatkozhat arra, hogy hiányzása következtében ezekről nem szerzett tudomást. Igazolás nem szükséges, pótlás nem lehetséges.

A félévközi ellenőrzések (beszámolók, zárthelyik) száma, témaköre és időpontja, pótlásuk és javításuk lehetősége

• Az 5. héttől a 14. hétig minden héten kitöltendő egy teszt. Ez összesen 10 teszt lesz, amiből legalább 8-at kell kitölteni. Az adott heti teszt azon a héten akárhányszor kitölthető. A végén a tesztekben elért százalékokat átlagoljuk a következőképpen:
  • A 10 darab lehetséges tesztből 2 kitöltetlen teszt nem számít bele az átlagba, a többi kitöltetlen teszt 0%-os eredménynek számít.
  • Ha valaki 8-nál több tesztet tölt ki, akkor a kitöltött tesztek mind beleszámítanak az átlagba.
• Mivel 2 kitöltetlen teszttel is lehet maxmális eredményt elérni, és folyamatos számonkérés zajlik, ezért további javításra nincs lehetőség. Igazolás nem szükséges és nem lehetséges.

A vizsgára jelentkezés feltétele

• Nem lesz vizsga.

A kurzus értékelése

• A tesztekben elért százalék függvényében az osztályzat a következőképpen kerül megállapításra:
  • [0, 60) % : elégtelen (1),
  • [60, 70) %: elégséges (2),
  • [70, 80) %: közepes (3),
  • [80, 90) %: jó (4),
  • [90, 100) %: jeles (5).

Kapcsolat

• Közérdekű kérdéseket és információkat a CooSpace színtér fórumaiba lehet írni.
• Az előadónak szánt privát írásbeli megkeresések a kurzus CooSpace színterében a Privát kérdés, visszajelzés az oktatónak felületen küldendők, csak ezekre garantált a válasz.
• Az előadóval személyes megbeszélés egyeztetett időpontban, esetleg óratartás után lehetséges.

A kurzus elvárt kimeneti követelményei (a kurzussal kialakítandó konkrét tanulási eredmények)

A kurzus végére a hallgató az osztályzatának megfelelő mértékben rendelkezik az alábbi témakörökben felsorolt kompetenciákkal.

• Azonosítja a HTML5, XHTML és CSS3 szabványok, illetve a jól formált kód legfontosabb előírásait és célját, és a szabványosság ellenőrzési lehetőségeit. Ismeri a HTML és CSS szerepét, a HTML objektumok szintaktikáját, egymásba ágyazási lehetőségeit, a blokkszintű és sorszintű objektumok jellegzetességeit. Felismeri a HTML5 dokumentum kötelező részeit és leírja azok megvalósítását. Összehasonlítja a webes szabványokat. Szabványos és jól formált weboldalakat ír. Összehasonlítja és felismeri a legfontosaabb sorszintű és blokkszintű objektumokat. Fontosabb azonosítók, fogalmak: üres típusú objektum, html, head, body, title, meta charset, div, span.
• Felsorolja a listák típusait, azok tulajdonságait, formázási lehetőségeit, felismeri az ezek megvalósítására szolgáló parancsokat, és érti azok működését. Fontosabb azonosítók: ul, li, list-style-type, disc, circle, square, list-style-image, url(kep), list-style-position, outside, inside, ol, value, reversed, start, type, list-style-type, none, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, dl, dt, dd.
• Megnevezi a táblázatok strukturális kialakítására, a cellák fejlécekhez történő társítására, használható parancsokat, és érti azok működését. Ismeri a táblázatos megjelenítés parancsait és működését. Fontosabb azonosítók: table, tr, td, th, rowspan, colspan, headers, table, table-row, table-cell, display, table-header-group, table-footer-group, table-row-group, table-caption, table-column-group, table-column.
• Felsorolja az űrlapok működéséhez tartozó funkciókat, felismeri az azokat megvalósító tulajdonságokat és értékeket, és érti azok működését. Fontosabb azonosítók: form, action, method, get, post, enctype, text/plain, multipart/form-data, application/x-www-form-urlencoded, autocomplete, on, off, novalidate, target, _self, _blank, _parent, _top.
• Tudja, hogy milyen űrlapmezőtípusok és azoknak milyen tulajdonságai vannak, felismeri az azokat megvalósító parancsokat. Fontosabb azonosítók: input, name, size, maxlength, value, min, max, step, placeholder, autofocus, required, pattern, autocomplete, on, off, form, readOnly, disabled, type, hidden, text, search, password, number, range, tel, url, email, multiple, color, datetime, datetime-local, date, month, time, week, file, textarea, name, rows, cols, radio, checkbox, select, size, selected, reset, submit, image, button.
• Érti a címke-elemek (elemfeliratok) használatának célját és megvalósítását. Fontosabb azonosítók: label, for.
• Megnevezi az űrlapmezők csoportosításához használható parancsokat. Fontosabb azonosítók: fieldset, legend.
• Leírja a képek beágyazására szolgáló parancsot, annak paramétereit, és azok célját. Fontosabb azonosítók: img, src, width, height, alt, longdesc, usemap, ismap.
• Leírja a szövegek nyelvének, karakterkódolásának, illetve speciális karakterek megadásának módját. Fontosabb azonosítók, jelölések: lang, meta charset, &#kód, &#név.
• Felsorolja a szövegek tagolásának lehetőségeit és parancsait. Fontosabb azonosítók, jelölések: p, br, wbr, pre.
• Leírja a hivatkozások megadásának szintaxisát. Felsorolja a hivatkozások formázásához használt kijelöléseket és azok megvalósítását. Fontosabb azonosítók, jelölések: a, href, #, base, a:link, a:visited, a:hover, a:active.
• Érti a dokumentumfa felépítési logikáját és kapcsolatát a HTML megvalósítással. Elkészíti a dokumentumfa alapján a HTML kódot, illetve a HTML kódhoz tartozó dokumentumfát.
• Megnevezi a táblázatok tagolására, az oszlopok csoportosítására, a táblázat formázására használható parancsokat, és érti azok működését. Fontosabb azonosítók, jelölések: caption, thead, tbody, tfoot, colgroup, col, border-collapse, separate, collapse, border-spacing, table-layout, auto, fixed, caption-side, top, bottom, vertical-align, middle.
• Tudja, hogy hang- és videóállományok beágyazásánál milyen tulajdonságok adhatók meg, felismeri az azokat megvalósító parancsokat. Fontosabb azonosítók, jelölések: audio, video, source, controls, autoplay, loop, muted, preload, mediagroup, width, height, poster, src, type.
• Felsorolja a legfontosabb oldalszerkezet elemeket, azok parancsait, érti azok célját és használatát. Fontosabb azonosítók, jelölések: main, article, section, figure, figcaption, aside, nav, header, footer, h1 - h6.
• Tudja, hogy szövegek megadásakor milyen kiemeléseket, szerkesztéseket lehet használni, érti ezek jelentését, és felismeri az ezeket megvalósító parancsokat. Fontosabb azonosítók, jelölések: em, strong, b, mark, i, del, ins.
• Megadja, hogy egy hivatkozás céloldala hol jelenjen meg. Fontosabb azonosítók, jelölések: target, _parent, _top, _self, _blank.
• Ismeri az űrlapok automatikus kiegészítésének működését és annak parancsait. Fontosabb azonosítók, jelölések: datalist, option, value, list, label.
• Felismeri a kliensoldali képtérképek készítéséhez használható parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: map, name, area, shape, coords, href, rect, poly, circle.
• Felsorolja a multimédiás feliratokra vonatkozó legfontosabb elvárásokat. Tudja, hogy multimédiás tartalmakhoz milyen jellegű feliratokat lehet megadni, ismeri a csatolást végző parancsot, helyesen értelmezi a feliratok jellegének megadására szolgáló tulajdonságokat. Fontosabb azonosítók, jelölések: track, default, kind, captions, descriptions, subtitles, chapters, metadata, src, srclang, label.
• Multimédia (képek, hang- és videóállományok) és más tartalmak beágyazása. Felsorolja (nem feltétlen multimédiás) külső tartalmak beágyazásának és beillesztésének parancsait és azok legfontosabb tulajdonságait. Fontosabb azonosítók, jelölések: embed, object, param, type, src, width, height, data, name, value.
• Tudja, hogy szövegek megadásához milyen szemantikus tartalmakat, funkcionális elemeket lehet használni, érti ezek jelentését, és felismeri az ezeket megvalósító parancsokat. Fontosabb azonosítók, jelölések: cite, blockquote, q, dfn, abbr, small, sub, sup, code, var, time, datetime, s, samp, kbd.
• Tudja, hogy egy hivatkozás milyen módokon kapcsolódhat annak céljához, felismeri és értelmezi a kapcsolatot leíró tulajdonságot és annak értékeit. Fontosabb azonosítók, jelölések: download, hreflang, type, rel, alternate, author, external, help, license, noreferrer, noopener.
• Ismeri a CSS szabályok részeit és általános szintaktikáját, a stílusok elhelyezésének lehetőségeit és alkalmazási szempontjait. A stílusokat céljuknak megfelelően adja meg. Kiválasztja a használni kívánt stílusok HTML tartalmakkal történő legjobb összekötési lehetőségeit. Fontosabb azonosítók, jelölések: style, link, rel, href, @import.
• Felsorolja az objektumok egyedi, illetve csoportos azonosításának, és kijelölésének lehetőségeit, ismerteti azokhoz CSS szabályok megadásának módját. Érti az öröklés működését. Fontosabb azonosítók, jelölések: id, class, ., #.
• Listázza a formázáshoz használt legfontosabb mértékegységeket. Fontosabb azonosítók, jelölések: mm, cm, in, pt, pc, %, em, px, ex, vw, vh, deg, rad, grad, url.
• Leírja a színek megadásának lehetőségeit névvel és kóddal, érti azok logikáját. Fontosabb azonosítók, jelölések: rgb, hsl.
• Szemlélteti az objektumok részeinek (tartalom, belső térköz, margó, szegély, körvonal) elhelyezkedését, megvalósítását, és speciális formázásait. Fontosabb azonosítók, jelölések: width, height, min-width, max-width, min-height, max-height, padding, –top, -right, -bottom, -left, margin, border, border-width, border-style, border-color, border-radius, outline, outline-color, outline-width, outline-style, outline-offset.
• Ismeri a háttérszín és háttérkép elvi megadási lehetőségeit, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: background-color, background-image, url(képnév), none.
• Ismeri az objektumok pozícionálásának megadási lehetőségeit, szintaxisát, érti azok működését. Fontosabb azonosítók, jelölések: position, static, fixed, top, bottom, left, right, relative, absolute, inherit, float, clear, z-index.
• Szövegek formázására vonatkozóan felsorolja a különböző jellegű távolságok megadására szolgáló tulajdonságokat, helyesen értelmezi a white-space tulajdonság értékeit. Fontosabb azonosítók, jelölések: letter-spacing, word-spacing, line-height, white-space.
• Felsorolja a font-jellemzők megadására szolgáló tulajdonságokat, és helyesen értelmezi azok értékeit. Fontosabb azonosítók, jelölések: font-family, font-size, font-style, oblique, italic, font-weight: bold.
• Ismeri a CSS hozzárendelési feltételek (médiakérések) megadásának módját, azokat céljuknak megfelelően adja meg. Fontosabb azonosítók, jelölések: @media, not, only, print, screen, speech, all, min-width, max-width, min-height, max-height, orientation, portrait, landscape, min-resolution, max-resolution.
• Ismeri a háttér ismétlésének, pozícionálásának, rögzítésének, átméretezésének, szélek levágásának elvi megadási lehetőségeit, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: background-repeat, no-repeat, repeat, repeat-x, repeat-y, space, round, background-position, left, right, top, bottom, center, background-origin, border-box, padding-box, content-box, background-attachment, scroll, fixed, local, background-size, auto, contain, cover, background-clip, border-box, padding-box, content-box.
• Ismeri a túlcsordulás és megjelenítés szabályozását, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: overflow, overflow-x, overflow-y, visible, hidden, scroll, auto, display, inline, block, inline-block, run-in, none.
• Bármilyen weboldalon kiválasztja azokat az objektumokat, melyekre egy tetszőleges kijelölő érvényes, illetve hatékonyan kijelöli azokat az objektumokat, melyeket formázni kell. Fontosabb azonosítók, jelölések: *, :active, :hover, ::selection, , >, +, ~, , , :root, :empty, :only-child, :only-of-type, :first-child, :first-of-type, :nth-child(n), :nth-of-type(n), :nth-last-child(n), :nth-last-of-type(n), :last-child, :last-of-type, :first-letter, :first-line, :before, :after, k[tul], k[tul="ertek"], k[tul*="ertek"], k[tul~="ertek"], k[tul^="ertek"], k[tul$="ertek"], k[tul|="ertek"], :lang(ertek), :not(szelektor).
• Felsorolja a szövegek igazítására szolgáló tulajdonságokat, helyesen értelmezi azok értékeit. Fontosabb azonosítók, jelölések: text-align, left, right, center, justify, start, end, vertical-align, super, sub, baseline, text-top, top, text-bottom, bottom, middle, text-indent.
• Érti a CSS rangsor működését. A CSS rangsor szabályainak ismeretében meghatározza, hogy adott objektumra vonatkozóan mi lesz az egymást kiegészítő, illetve egymásnak ellentmondó stílusok hatása. Fontosabb azonosítók, jelölések: !important.
• Ismeri a szegélykép megadási lehetőségeit, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat.
• Űrlapok. Tudja, hogy milyen speciális álosztályokat használhat adott tulajdonsággal rendelkező mezők kijelölésére, felismeri az azokat megvalósító parancsokat. Fontosabb azonosítók, jelölések: :required, :optional, :valid, :invalid, :in-range, :out-of-range, :focus, :checked, :enabled, :disabled, :read-only, :read-write.
• Felismeri és helyesen értelmezi a szövegátalakításokat, szövegdekorációt és szövegárnyékot megadó tulajdonságokat és azok értékeit. Fontosabb azonosítók, jelölések: text-transform, uppercase, lowercase, none, capitalize, font-variant: small-caps, text-decoration-line, underline, overline, line-through, text-decoration-style, solid, double, dotted, dashed, wavy, text-decoration-color, text-shadow.
• Ismeri a reszponzivitás megvalósításának alapvető technikáit, a fluid és grid módszereket.
• Példát mond az átmeneti siketség, vakság, gyengénlátás, színvakság, színtévesztés, mozgáskorlátozottság, értelmi akadályozottság, technikai problémák eseteire. Felsorolja az akadálymentesítés történetének legfontosabb mérföldköveit, elmondja a jelenleg érvényes akadálymentesítésre vonatkozó 2018. évi LXXV. törvény lényegét, a benne foglalt határidőket. Megfogalmazza, hogy miért érdemes akadálymentesíteni. Felsorolja az akadálymentesítésben érintett felhasználói csoportokat és alapvető jellemzőiket. Felsorolja a böngészők akadálymentesség szempontjából mérvadó kiegészítő szolgáltatásait. Felsorolja a WCAG szabvány irányelveit, alapvető előírásait, az egyes HTML objektumok akadálymentesítéséhez szükséges legfontosabb technikákat.