WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

DIV - Általános tárolóelem



Az oldalak elrendezését általános tárolóelemek segytsé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ínktű 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