sursa: http://www.marplo.net/
Tag-ul DIV crează secţiuni de blocuri în pagină, a căror formă şi grafică de conţinut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe orizontală) care poate avea următoarele valori: left (stânga), right (dreapta), center(centru), justify (distanţa textului faţă de margini egală).
Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece în combinaţie cu proprietăţi CSS poate crea efecte grafice deosebite, iar în interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul în care acestea sunt adăugate poate avea propriul fundal (background), lungime, înălţime şi margini cu diferite linii.
Iată un exemplu în care avem 2 div-uri, unul conţine o listă ordonată, iar celalalt o lista neordonată "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite şi margini diferite.
Exemplul 1:
<center><div style="width:250px; background:#aaee88; border:1px solid blue;">
<ol>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ol>
</div>
</center>
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Londra</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
</div>
Cu tag-ul <span></span> puteţi adăuga stiluri grafice unei anumite porţiuni dintr-un context. Pentru aceasta trebuie folosit împreună cu proprietăţi CSS care pot fi adăugate printr-un atribut "style" in interiorul etichetei "<span>" (sau în foi de stil).
Iată un exemplu în care se scot în evidenţă anumite cuvinte dintr-un text. Pentru aceasta încadrăm cuvintele respective într-un tag SPAN căruia îi adăugăm proprietăţile dorite, ca în exemplul următor.
Exemplul 2:
Aceasta este un exemplu de utilizare a<span style="background:#88fe88; font-weight:bold;"> tag-ului SPAN </span> într-o pagină HTML .
Tag-ul SPAN poate fi folosit şi ca o clasă pentru CSS. Astfel, proprietăţile adăugate elementului "span" într-o foaie de stil vor fi transferate tuturor elementelor din pagină care sunt încadrate în tag-uri "<span></span>".
Iată un exemplu:
Exemplul 3:
<html>
<head>
<title>Titlul</title>
<style type="text/css">
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>
- Observaţi cum a fost adăugat elementul "span" în tag-ul "<style> </style>" din secţiunea HEAD a codului HTML. Acest element face referire la toate tag-urile "<span></span>" din document şi le transmite aceleaşi proprietăţi.
- Diferenţa dintre DIV şi SPAN este faptul că DIV încadrează o secţiune din document sub forma unui bloc iar SPAN încadrează o porţiune din context sub formă de linii.
Iată un exemplu din care se poate întelege mai bine, atribuim aceeaşi proprietate grafică (bordură roşie) unui tag DIV şi unui tag SPAN.
Exemplul 4:
<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
- Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</span>
