Nume Tutorial:DIV si SPAN
Descriere:DIV si SPAN
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial): Propria parere:Util.
Tutorialul:
Tag-urile <div></div> şi <span></span> nu au efecte importante dacă sunt folosite singure.
- Tag-ul DIV crează secţiuni de blocuri în pagină, al 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 SPAN crează posibilitatea modificării separate a unei porţiunii dintr-un context, putând fi folosit şi ca o "clasa" cu CSS. Singur nu are nici un efect vizual propriu şi nu foloseşte nici un atribut HTML special.
Chiar dacă folosite singure, DIV şi SPAN nu au nici un efect major, în combinaţie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu proprietăţi CSS) ori atributele id sau class ca identificator pentru stiluri CSS.

1. Tag-ul DIV

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 un formular iar celălalt o listă "<ul></ul>", fiecare DIV cu propria culoare de fundal, dimensiuni stabilite şi margini diferite.

Cod:
- În atributul "style" sunt specificate proprietăţile CSS care stabilesc aspectul grafic al fiecărui DIV (lungime în pixeli, fundal şi bordură).
Un alt aspect important este şi faptul că putem poziţiona conţinutul din interiorul tag-ului <div> </div> oriunde în pagină, folosind proprietăţi CSS precum:

position - care poate lua valorile: static, relative, fixed sau absolute (pt. mai multe detalii vezi Poziţionare CSS).
margin - care stabileşte distanţa dintre marginea cadrului secţiunii (blocul) DIV şi elementele din jurul lui (pt. mai multe detalii vezi Margini şi chenare CSS).
Iată un exemplu în care, prin folosirea mai multor DIV-uri poziţionate suprapus, putem afişa în pagină un titlu cu aspect grafic deosebit. Codul este următorul:

Cod:
În acest exemplu avem un prim DIV cu atributul "style" în care avem o proprietate de poziţionare relativă (pt. a poziţiona toate celelalte elemente pe care el le încadrează după contextul scris anterior) şi o altă proprietate pentru mărimea textului. În interiorul acestui DIV avem alte 3 div-uri, poziţionate absolut şi care încadrează fiecare câte un text identic. Prin poziţionarea absolută div-urile se suprapun, la o distanţă stabilită de proprietăţile "margin-top" şi "margin-left".

- Pentru a folosi tag-urile DIV eficient şi cu rezultate deosebite este necesar să cunoaşteţi proprietăţile CSS de bază (pentru fonturi, poziţionare, margini, borduri, background) pe care le puteţi învăţa citind tutorialele de css din acest site.

2. Tag-ul SPAN

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" în interiorul etichetei "<span>" (sau în foi de stil).
Pentru a înţelege mai bine, iată un exemplu în care se scoate î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.

Aceasta este o lecţie din <span style="background:#88fe88; font-weight:bold;">Cursul HTML</span> de pe Tutoriale WEB.

- Am adăugat porţiunea din context (aici textul "Curs HTML") într-un tag SPAN pentru a-i putea aplica proprietăţile grafice dorite şi care nu afectează restul conţinutului.
- Astfel, prin proprietăţile adăugate în "style" (background:#88fe88; şi font-weight:bold;), în pagina web va fi afişat textul în felul următor:

Aceasta este o lecţie din Cursul HTML de pe Tutoriale WEB.

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

Cod: - 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.

3. Diferenţa dintre DIV şi SPAN

- 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 forma de linii.
Iată un exemplu din care se poate înţelege mai bine, atribuim aceeaşi proprietate grafică (bordură rosie) unui tag DIV şi unui tag SPAN.

Cod: - În pagina web va apare

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

- Acum cu SPAN:
Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

- Observaţi diferenţa, modul în care este afişată bordura. Pentru DIV aceasta încadrează exteriorul secţiunii (blocul) div-ului, iar pentru SPAN bordura este afişată pe fiecare linie.
- De aceea este indicată folosirea tag-ului "<span></span>" pentru conţinut din interiorul unei linii.
- Când aveţi mai multe elemente <div></div> şi <span></span> în pagină, este indicat folosirea atributului "id" sau "class". Acestora le acordaţi proprietăţi CSS o singură data în secţiunea HEAD sau într-un fişier CSS extern. Este mai eficient decât să scrieţi în fiecare "<div>" şi "<span>" câte un atribut "style".