A HTML div elem használata
A HTML div eleme egy szakaszt, vagy részt határoz meg a HTML dokumentumban. Ezt a szakaszt arra használják, hogy feltöltsék HTML elemekkel. Bármilyen HTML elem elhelyezhető a div-ben, amely a HTML dokumentumban is elhelyezhető.
Mire használják a div elemet?
A HTML div elemét arra használják, hogy a weboldalon egy jól elkülöníthető egységet elkülönítsenek. Általában egymáshoz szorosan kapcsolódó elemek mennek bele. Úgy kell ezt érteni, hogy ha van a weboldalunkon jobb oldalt egy menü, akkor a menü összes elemét belehelyezhetjük. Míg a tartalom egy másik div-be kerül. Így egymástól elkülönítettük a tartalmat és a menüt, amelyet könnyedén egységesen formázhatunk stílusokkal.
Szintaktika
<div>TARTALOM</div>
Code language: HTML, XML (xml)Alapvetően a fenti kóddal már létrehozhatunk egy div-et, ha a formázást a kezdőcímkén belül oldjuk meg. Bár a tapasztaltabbak nem így szokták, hanem így:
<div class="NÉV">TARTALOM</div>
VAGY
<div id="NÉV">TARTALOM</div>
Code language: HTML, XML (xml)Ez a megoldás már sokkal elegánsabb és hasznosabb, mert így a dokumentum head részében vagy egy külső fájlban határozhatjuk meg a stílusbeállításokat, amelyeket később sokkal egyszerűbb módosítani.
Példa HTML div használatára
HTML kód
<html>
<head>
<style>
.felso
{background-color:red;
height:50px;}
.tartalom
{background-color:green;
height:150px;}
.lablec
{background-color:yellow;
height:50px;}
</style>
</head>
<body>
<div class="felso">
Felső Menüsor
</div>
<div class="tartalom">
Tartalom
</div>
<div class="lablec">
Lábléc
</div>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
A fenti példában három div-et hoztam létre, mindegyiknek adtam egy osztálynevet, ami alapján a <style>-ban formázni tudtam őket.
