CSS és XHTML: szabványos weblapok tanulása lépésről lépésre

Sokáig az volt a megszokott, hogy a weboldalak elrendezését táblázatokkal rakták össze, a betűtípust és a színt pedig minden egyes bekezdésnél külön állították be. Az ilyen oldalt nehéz módosítani, lassan töltődik be, és a felolvasóprogramok számára szinte érthetetlen. A szabványos weblapkészítés lényege ezzel szemben egyszerű: az XHTML írja le, mi a tartalom, a CSS pedig azt, hogyan nézzen ki.

A jó lecke sorrendje

Tiszta szerkezet előbb. Címsorok, bekezdések, listák, hivatkozások, képek, stílus nélkül. A tanuló megtanulja, hogy egy formázatlan oldalnak is van rendje.

Szabályos XHTML. Kisbetűs elemnevek, minden elem lezárva, idézőjelben az attribútumok értéke. A validátor használatát érdemes a videóban élőben megmutatni: a néző látja, hogy a hibalista ijesztő, de gyorsan rövidül.

Kijelölők és öröklődés. Elem, osztály, azonosító, és az, hogy melyik szabály érvényesül, ha több is vonatkozik ugyanarra az elemre. Ez az a pont, ahol a legtöbb kezdő elakad.

A dobozmodell. Tartalom, belső margó, keret, külső margó. Egy jól rajzolt ábra és egy élő példa, amelyen a számok változtatásával mozognak a dobozok, többet ér egy fejezetnyi magyarázatnál.

Elrendezés lebegtetéssel. Kéthasábos, majd háromhasábos oldal táblázat nélkül. Itt érdemes megmutatni a tipikus hibákat is: a kilógó hasábot és a lebegtetés megszüntetésének szükségességét.

Böngészők közötti eltérések

Egy szabványos oldal sem néz ki pontosan ugyanúgy minden böngészőben. Ezt a tananyagnak nem eltitkolnia kell, hanem megmutatnia: ugyanazt az oldalt két-három böngészőben megnyitva a tanuló megérti, miért kell minden elrendezést kipróbálni, és hogyan lehet a különbségeket a lehető legkevesebb trükkel kezelni.

Gyakorlat

A legjobb gyakorló feladat egy meglévő, táblázatos oldal átírása szabványos szerkezetre és külső stíluslapra. A tanuló a végén ugyanazt az oldalt kapja, de a kódja feleannyi, és a színeket egyetlen fájlban tudja megváltoztatni. A folytatás a dinamikus weblapok témája.