logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.

HTML5 weboldalak kialakítása

Programozott tananyag:


HTML oldalak szerkezete
Elrendezés kialakítása általános tároló elemekkel (div) és stíluslapokkal (css), vagy táblázattal.

DIV - Általános tárolóelem
Az egyes tárolóelemeket id (egyedi azonosító) jellemzőjük értékével azonosíthatjuk. Ha a weboldalon több tárolóelem class (osztály )jellemzőjének azonos értéket adunk, akkor az azonos nevű osztályba tartozó tárolóelemeket egyes tula

Egyoszlopos elrendezés
A weboldalunk fő szerkezeti elemei: Fejléc, Menüsor, Tartalom, Lábléc.

Kétoszlopos HTML elrendezés
A weboldalunk fő szerkezeti elemei: Fejléc, Menüsor, Menüsáv, Tartalom, Lábléc.

HTML5 tárolóelemek
A HTML5 tartalomfüggő tárolóelemek használata.

Kétoszlopos HTML5 elrendezés
Példánkban szereplő kód csupán annyiban tér el a kétoszlopos HTML elrendezésnél megismerttől, hogy a HTML5-ben bevezetett új elemeket használjuk a szerkezeti elemek megvalósításához.

Átlátható kétoszlopos elrendezés
Nézzük meg a korábban tárgyalt kétoszlopos HTML5 elrendezést külső CSS használata esetén.

HTML5 - Tárolóelem ábrákhoz
HTML5 Speciális tárolóelem ábrákhoz: Figure.

HTML5 - Címsor csoport
Speciális tároló elem, amely jelzi a különböző szintű címsorok összetartozását.

HTML5 - Elrejthető részletek
A felhasználó az összefoglalásra kattintva rejtheti illetve jelenítheti meg a részletes tartalmat.