HTML-szerkesztés kezdőknek!!!
-
#7011
A <div> csak egy HTML elem, ugyanúgy használandó, mint bármelyik többi.
Nincs benne semmi ördöngösség, <div> taggel nyitunk, és </div>-vel zárunk - közé meg a kívánt tartalom kerül.
Fel lehet ruházni id, és class attribútumokkal (mint az összes HTML elemet), így remekül lehet használni logikai csoportosító elemként.
Például egy oldalt fel akarunk bontani fejlécre, navigációs menüre, tartalomra és láblécre, akkor az így fog manifesztálódni (a <body> és </body> tagek közti rész):
<div id="fejlec"><h1><span>Ez itt a kispista oldala, itt lesz a banner...</span></h1></div>
<div id="menu">
<ul>
<li><a href="#">Menüpont</a></li>
<li><a href="#">Menüpont</a></li>
<li><a href="#">Menüpont</a></li>
<li><a href="#">Menüpont</a></li>
</ul>
</div>
<div id="tartalom">Helló üdvözöllek oldalamon, blablabla, képet is szúrhatok be: <img src="kep.jpg" alt="Ezen vagyok én a kispista" /></div>
<div id="lablec">Copyright, impresszum,...</div>
Mivel ezeket a blokkokat elláttuk azonosítókkal CSS-ből hivatkozhatunk rá: megadhatjuk, hogy mekkorák legyenek, milyen háttérszínük háttérképük legyen, legyenek-e egymás mellé lebegtetve vagy sem, stb...
body {
text-align: center;
}
#fejlec {
width: 780px;
height: 128px;
margin: 0px auto;
}
#fejlec h1 span {
display: none;
visibility: hidden;
}
#fejlec h1 {
width: 780px;
height: 128px;
background-image: url(fejlec.png);
background-position: center top;
background-repeat: no-repeat;
}
és így tovább...
Szóval HTML részről a <div> "nem annyira izgi" (száraz, logikai csoportosításra szolgáló elem), inkább az az érdekesebb, amikor CSS-ből az azonosítójára hivatkozunk, és azzal alakítjuk ki az oldal kinézetét.
http://weblabor.hu/cikkek/csstablazatnelkuli
http://nagygusztav.hu/?q=web_programozas_jegyzet