Tananyag megnyitása új ablakbanVissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (nem elérhető funkció)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája

Szerző

Abonyi-Tóth Andor, ELTE IK (Lektorálta: Tömösközi Péter, EKTF)

Vissza a tartalomjegyzékhez

A modul célja és tartalma

Tananyagunk célja, hogy a weblapkészítés technikájába és módszertanába komplex módon vezesse be az olvasót, ügyelve a webes szabványokban, ajánlásokban megfogalmazott irányelvekre. A dokumentum struktúráját, tartalmát leíró HTML5 nyelv ismertetése mellett kitérünk az eredmény vizuális formázását lehetővé tévő CSS3-as szabványra, illetve az elemek használatával kapcsolatos legfontosabb ergonómiai (köztük akadálymentességi) irányelvekre.

Akit a webergonómia témaköre érdekel részletesebben, érdemes elolvasnia a Webergonómia Jakob Nielsen nyomán (Szerkesztő: Leiszter Attila, Typotex, 2011) című könyvet, amely szép sorjában, különböző témakörök szerint mutatja be az egyes elveket. Ezen elveket mi nem ismételjük meg ebben a tananyagban (nem is tehetnénk), de ha van olyan elv, amelyet egy adott tag, paraméter stb. használatánál érdemes tudnunk, arra igyekszünk felhívni a figyelmet.

Tananyagunkban a legfontosabb és leggyakrabban használt elemek bemutatására helyezzük a hangsúlyt. A leckéket úgy építettük fel, hogy az akár kezdők számára is követhető legyen, az interaktív, azonnal átírható példák pedig segítik a megértést, a kódok azonnali kipróbálását, a kísérletezést.

A HTML5-tananyagunkban a tartalom leírására szolgáló ismereteket próbáljuk átadni, a stíluslapokról szóló fejezetben viszont a tartalom megjelenítésére vonatkozókat. Ezt a két területet viszont már a tanulás során sem érdemes teljesen kettéválasztani. Érthető az igény arra, hogy amikor megismerkedünk egy tartalmi elemmel, mindjárt a hozzá kapcsolódó formázásokat is ki lehessen próbálni. És fordítva is igaz: addig nem tudjuk a stíluslapokban rejlő lehetőségeket bemutatni, míg nem értjük, hogyan kell a tartalmat leírnunk a HTML nyelven. Ezért a tananyagban ez a két terület egymásba fonódik, már a HTML-tagek tanulása során megismerkedünk az alapvető, tipikus formázásokkal, az önálló CSS-fejezetben pedig tovább mélyítjük a tudásunkat.

Mivel a tananyag írásának pillanatában a HTML5 és CSS3 szabvány még fejlesztés alatt áll, ezért elképzelhető, hogy a tananyagban szereplő tagek, paraméterek megváltoznak a végső szabványban. Azon elemeket, amelyek ugyan a tervekben benne vannak, de jelenleg nincs (és nem is várható) böngészőtámogatottságuk, egyelőre kihagytuk a tananyagból. Amint döntés születik ezen tagekről, illetve paraméterekről, a tananyagot továbbfejlesztjük, kiegészítjük, aktualizáljuk. Szintén később várható az, hogy a tananyag létrehozására használt keretrendszerünk a HTML5 lehetőségeit is támogassa, ezért a tananyagot a későbbiekben többször is újra fogjuk generálni, korszerűsíteni fogjuk.

Forrás

Az egyes elemek és tulajdonságok bemutatásánál felhasználtuk és továbbfejlesztettük Tárnok Tamás Attila – CSS3 Tutoriál (ELTE IK, 2010), valamint Nemes Adriána A HTML5 szabvány lehetőségeinek bemutatása (ELTE IK, 2011), című diplomamunkájának részleteit. A témavezető mindkét esetben Abonyi-Tóth Andor volt.

Vissza a tartalomjegyzékhez

A modul leckéi, a megértéshez szükséges előismeretek, tárgyi feltételek

Leckék

  1. Bevezető
  2. HTML-bevezető
  3. A HTML5 legfontosabb szöveg szintű elemei
  4. Kitekintés a stíluslapok használatába, tipikus szövegformázások
  5. Csoportosító elemek
  6. Beágyazott elemek
  7. Oldalszerkezet-elemek
  8. Táblázatok használata
  9. Űrlapok használata
  10. Interaktív elemek
  11. Bevezetés a stíluslapok használatába
  12. CSS kiértékelési sorrend (rangsorolás)
  13. Ismerkedés a CSS dobozmodelljével
  14. Szín- és háttérbeállítás stíluslappal
  15. Vizuálisformázásmodell
  16. Transzformációk és átmenetek
  17. Médiatípusok használata
  18. Úton a reszponzív arculat felé

Előismeretek

Tárgyi feltételek

Vissza a tartalomjegyzékhez

A modul irodalomjegyzéke

Ajánlott irodalom

Vissza a tartalomjegyzékhez

Kulcsszavak

Web-fejlesztés, HTML5, CSS3

Fel a lap tetejére Ugrás a tananyag következő oldalára (V)
Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.