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

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: Chrome logó Firefox logó Safari logó Opera logó IE logó


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

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.