Webfejlesztés alapjai előadás és gyakorlat
Levelező tagozat
2024/2025 I. félév
Coursera-s teljesítés

Alapadatok

• Kurzus kódok: IBLa1014E-Coursera és IBLa1014L-Coursera
• A kurzussal a következő tárgyak teljesíthetők:
  • ITLA2714e L Webtervezés alapjai ea. és ITLA2714g L Webtervezés alapjai gy.
  • IBLqa1014E L Webfejlesztés alapjai ea. és IBLqa1014L L Webfejlesztés alapjai gy.
  • IBLa1014E L Webfejlesztés alapjai ea. és IBLa1014L L Webfejlesztés alapjai gy.
  • IBL714E L Web tervezés ea. és IBL714L L Web tervezés lab. gyak.
  • ITL714E L Web tervezés ea. és ITL714G L Web tervezés gyak.
  • IBL714BCsE L Web tervezés ea., IBL714BCsG L Web tervezés lab.
  • IBL714E-00001 L Web tervezés ea.
• 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. Általános formázások. Stílusok elhelyezése. Hozzárendelési feltételek. Kijelölések. Értékek, mértékegységek (hosszúság, URL, szög, színek). Objektumok általános formázása (háttér, margó, belső margó, szegély). Rangsor és hatás.
3. Helyzetmegadás.
4. Weboldalak strukturálása. Beágyazott keretek (lebegőkeretek).
5. Szövegek jellemzői, strukturális egységei és azok formázása. Hivatkozások elhelyezése és formázása.
6. Felsorolások. Menük elhelyezése és formázása.
7. Táblázatok készítése.
8. Űrlapok készítése. Űrlapelemek, elemfeliratok, működési jellemzők.
9. Multimédiás elemek beágyazása.
10. Reszponzivitás alapjai.
11. Animációk.
12. A HTML és CSS további lehetőségei.
13. Webes akadálymentesítés alapismeretek.

Ajánlott irodalom

1. Abonyi-Tóth Andor, ELTE IK: A weblapkészítés technikája (HTML5, CSS3) és ergonómiája, elte.hu, tankonyvtar.hu.
2. Cservenák Bence gyakorlati jegyzete. és a hozzá tartozó videók.
3. Vancsics Béla által gondozott 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) HTML5 Tutorial - w3schools.com

Kurzusfelvétel

• A Coursera-s teljesítéshez az IBLa1014E-Coursera L Webfejlesztés alapjai ea. előadást és az IBLa1014L-Coursera L Webfejlesztés alapjai gy. gyakorlatot kell felvenni.
• Mivel a kijelölt Coursera-s kurzusok elméletet és gyakorlatot is tartalmaznak, a Coursera-s teljesítéssel a hallgató az előadást és a gyakorlatot is teljesíti, és ugyanazt a jegyet fogja kapni előadásra és gyakorlatra is, amit a Coursera-s teljesítésnél előírtak alapján megszerez.
• Aki a fenti Coursera-s előadás és gyakorlat kurzusok közül csak az egyiket veszi fel, azt teljesítheti, de azonos feltételekkel, mint amivel az előadásra és a gyakorlatra is megkapná a jegyet.

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

• A kurzus keretében sem előadás, sem gyakorlat nem lesz tartva, ugyanakkor a hallgató segítséghet kaphat az előírt Coursera kurzusokkal kapcsolatban.

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

• A Coursera kurzusok mappában található a kurzus teljesítéséhez elvégzendő kurzusok listája. A kötelező kurzusok mind teljesítendők, a választhatókból annyit kell teljesíteni, amennyi szükséges a kívánt osztályzathoz tartozó pontszám eléréséhez.
• A kurzusokat Coursera for SZTE-s bejelentkezéssel kell elvégezni az egyetemi belső ellenőrizhetőség érdekében. Ennek érdekében a kurzusok elvégzése előtt a Coursera for SZTE oldalon leírtaknak megfelelően be kell jelentkezni. A 2024.09.14. előtt elvégzett kurzusok teljesítését kivételesen lehet igazolni korábbi felhasználói azonosítóval megszerzett tanúsítvánnyal is.
• A kurzusokat a megjelölt határidőkre teljesíteni kell. Kötelező kurzusok esetén ennek elmulasztása elégtelen osztályzatot eredményez.
• Csak a kurzusok teljesítése az elvárás, a teljesítés százaléka nem lesz figyelembe véve.
• A kurzusok teljesítését a megfelelő Coursera tanúsítványokkal kell igazolni. A tanúsítványok beadásának módja a beadási határidők előtt a kurzus CooSpace színterében lesz kihirdetve.

A vizsgára jelentkezés feltétele

• Nem lesz vizsga.

A kurzus értékelése

• Az elvégzett Coursera kurzusokra kapott összpontszám függvényében az osztályzat a következőképpen kerül megállapításra:
  • [0, 69) pont : elégtelen (1),
  • [69, 79) pont: elégséges (2),
  • [79, 90) pont: közepes (3),
  • [90, 100) pont: jó (4),
  • [100, 140) pont: 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 az 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 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, az egyes osztályzatokat elérő hallgató, az egyes témakörökben az ott megjelölt kompetenciákkal rendelkezik, melyek részben kiválthatók a nagyobb jegyeknél megjelölt kompeetenciá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.