HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

HTML5 weboldalak készítése

HTML5 weboldalak kialakítása


    Megismerjük a weboldalak egy és két oszlopos kialakításának módjait HTML5 elemek segítségével. Formázásuk már a CSS3 fejezet tárgya lesz.                         

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.