Tag-urile DIV si SPAN

Tag-urile <div></div> si <span></span> nu au efecte importante daca sunt folosite singure.

- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi manipulate pentru fiecare separat. Nu are un atribut special; sec folosesc atributele generale (id, class, style) prin care se face referire la Div in CSS si scripturi.

- Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context, putand fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu si nu foloseste nici un atribut HTML special.

Daca sunt folosite simplu, DIV si SPAN nu au nici un efect major, dar in combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS.

Tag-ul DIV

Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si margini cu diferite linii.

- Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite.

<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
 Nume: <input type="text"></input><br>
 E-mail:<input type="text"></input><br>
 <input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
 <li>Linie 1</li>
 <li>Linie 2</li>
 <li>Linie 3</li>
</ul>
</div>

- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).

Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:

position - care poate lua valorile: static, relative, fixed sau absolute (pt. mai multe detalii vezi Pozitionare CSS).

margin - care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din jurul lui (pt. mai multe detalii vezi Margini si chenare CSS).
- Cu proprietatea css "margin" se poate face alinierea DIV-ului pe orizontala. Pentru a centra un <div> se aplica valoarea "auto" la marginile stanga si dreapta.
Exemplu:

<div style="background:#abcdef; margin:1px auto; padding:2px; width:200px;">Div centrat:<br />
margin:1px auto;</div>

<div style="background:#efcdab; margin-left:1px; margin-right:auto; padding:2px; width:250px;">Div aliniat stanga:<br />
margin-left:1px; margin-right:auto;</div>

<div style="background:#abefcd; margin-left:auto; margin-right:1px; padding:2px; width:250px;">Div aliniat dreapta:<br />
margin-left:auto; margin-right:1px;</div>

- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi, pozitionare, margini, borduri, background) pe care le puteti invata la Cursul CSS din acest site.

Tag-ul SPAN

Cu tag-ul <span></span> puteti adauga stiluri grafice unei anumite portiuni dintr-un context. Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un atribut "style" in interiorul etichetei "<span>" (sau in stil css).
Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite cuvinte dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii adaugam proprietatile dorite, ca in exemplul urmator.

Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">Cursul HTML</span> de pe MarPlo.net.

- Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul continutului.
- Astfel, prin proprietatile adaugate in "style" (background:#88fe88; si font-weight:bold; se defines anumite stiluri acelei portiuni de text.

Tag-ul SPAN poate fi folosit si ca un selector in CSS. Astfel, proprietatile adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate in tag-uri "<span></span>".
Iata un exemplu:

<!DOCTYPE html> 
<html>
<head>
<title>Titlul</title>
<style>
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<h4>Exemplu de <span>text cu element 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><

- Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile "<span></span>" din pagina si le transmite acele proprietati.

Diferenta dintre DIV si SPAN

- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV si unui tag SPAN.'

<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>

- Veti observa diferenta, modul in care este afisata bordura. Pentru DIV aceasta incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este afisata pe fiecare linie.

Este indicata folosirea tag-ului "<span></span>" pentru continut din interiorul unei linii.

- Cand aveti mai multe elemente <div></div> si <span></span> in pagina, este indicat folosirea atributului "id" sau "class". Acestora le acordati proprietati CSS o singura data in sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in fiecare "<div>" si "<span>" cate un atribut "style".

Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, puteti studia prima lectie de la Cursul CSS, Scriere cod CSS.

<<-Lucrul cu stiluri CSS -- Tutorial HTML5->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag adauga imagine in pagina web?

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Care din aceste coduri CSS afiseaza textul inclinat?

font-style: italic; text-decoration: underline; font-weight: 500;

#id {
  font-style: italic;
}

Clic pe functia jQuery care ascunde animat un element HTML.

click() hide() show()

$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});

Clic pe functia definita corect in PHP.

fname function() {} function fname() {} function $fname() {};

function fname($a, $b) {
  echo $a * $b;
}

Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).

have walked have been walking be walking

I have been walking for 5 hours.
- Merg pe jos de 5 ore.

Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.

será sería fui

Yo fui entrenador.
- Am fost antrenor.