DIV - Általános tárolóelem

Az oldalak elrendezését általános tárolóelemek segítségével fogjuk kialakítani.

A DIV elem

Név	Angol eredete	Hatás	Jellemzők
<div>	Division	A weboldal egy logikailag összetartozó részének kijelölésére és blokkszíntű formázásra használhatjuk. Páros címke..	Általános ; Események

A következő böngészők támogatják:

Az általános tároló elemek formázását stíluslapok segítségével szokás megoldani. A következő oldalakon azonban az egyszerűség (és a példa) kedvéért a style jellemzőt fogjuk erre a célra használni.

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 tulajdonságai egy lépésbe beállíthatóak.

Az id és class jellemzők értékeit használják a JavaScript-ek is az egyes elemek azonosítására.

Az általános tárolóelemek egymásba ágyazhatók, és tartalmazhatnak a HTML oldalon megjeleníthető bármely elemet.

Példa:

Forráskód


<h2>Div-ek használata.</h2>
<div id="piros_1" style="background-color:#ff0000;height:200px;width:200px;float:left;"> 
  Piros 1 
</div>
<div id="kek_1" style="background-color:#0000ff;height:200px;width:200px;float:left;">
  Kék 1 
  <div id="zold_1" style="background-color:#00ff00;height:100px;width:100px;float:left;">
    Zold 1
  </div>
</div>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_div1.html