Web Tervezés - 3. Fejezet

HTML alapok III.

HTML5 elemek

Teljes HTML5 lista

CSS szelektorok II

CSS alapok II.

Táblázat design

Alapértelmezetten a táblázatnak nincs se háttérszíne se keretje. Testre lehet szabni: A cellák a táblázat mérete alapján automatikusan méreteződnek, valamint egy-egy oszlopban minden cella azonos szélességet vesz fel.
A cellák méretét meghatározza továbbá a cellák tartalmának szélessége is. Ha egy cellába hosszabb szöveg van, akkor az egész oszlopa szélesebb lesz.
A táblázat thead és tbody része több oldalas táblázat nyomtatás esetén minden oldalon megjelenik.
CSS selector-ok segítségével elérhető, hogy pl a 3. oszlop más szabályokat kapjon mint a többi.
CSS szelektor-okról bővebben

Box-model

A szélesség/magasság (width, height) megadásának több értelmezése is lehet. A méret tartalmazhatja a keret vastagságát és a belső margót is (padding).
Ennek a megadására szolgál a box-sizing css szabály.
Ha a méreteket %-ban adjuk meg, akkor fontos szerepe van, hogy a padding és a border is beletartozzon ebbe a méretbe.
Pl: 100%-os width esetén ha margin-t adunk meg, akkor az minden esetben ki fog lógni. Border-box esetén a padding és a border is bele fog tartozni a 100%-ba, így nem csúszik szét.
Érdekesség a külső margóval kapcsolatban.

Pozícionálás

Gyakran előfordul, hogy a statikus elrendezés nem felel meg az igényeinknek. Lehet, hogy lebegő div-eket akarunk használni, akár design, akár funkcionalitás céljából.
Erre az esetre szolgálnak a pozícionálást meghatározó szabályok.
Abszolút pozícionálásnál a kiindulási pont az első nem static szülő elem.
Példa use case: Facebook chat

Úsztatás

Úsztatás segítségével folyó szövegben tudunk képeket/html elemeket elhelyezni.
Gyakran weboldal elrendezés megadására is használják.

Layout

Feladat 1

Az előző órai feladatot egészítsd ki CSS-sel ( HTML kód ).

Feladat 2

HTML5 tag-ek segítségével készítsd el a következő elrendezést:
          *****************************
          *           Fejléc          *
          *****************************
          *           Menü            *
          *****************************
          *        *                  *
          *        *                  *
          *Oldalsáv*                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *****************************
          *           Lábléc          *
          *****************************
        
Az oldal 1024px széles legyen, legyen középre igazítva, és az oldalsáv méretét %-ban add meg.

Feladat 3

Rajzolj ki egy sakktáblát