ALLWEB free linguaggio html. I tag DIV e SPAN per ottimizzare il sito. Spiegazioni ed esempi.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 24 Apr 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Contenitori Div e Span:

Sia il tag Div che il tag Span sono contenitori. Tutto quello che è incluso fra il tag iniziale e quello di chiusura reagisce secondo gli stili o comandi che gli sono stati associati.
Nel caso contengano stili css possono essere ereditari.

I tag div e span possono anche essere associati a delle funzioni javascript, e tutto ciò che contengono reagisce di conseguenza allo script.

Entrambi contengono un nome dichiarato con il parametro id="". tale parametro NON è obbligatorio. Il nome che associamo a tale parametro servirà al browser per far riconoscere i tag ai css o agli script.

Sia DIV che SPAN sono tag neutri, ossia non danno alcun peso alle parole o tag che contengono.

In pratica:
sono una <span style="font-weight : bold;">riga</span> di prova.
sono una <b>riga</b> di prova.
Sono due metodi diversi per lo stesso risultato a video.
A favore dei tag HTML è il fatto che un motore di ricerca capisce che un dato tipo di scrittura dà maggiore importanza al testo, a favore dei tag DIV e SPAN sta il fatto che è sempre più utilizzato il linguaggio XHTML, dove i tag HTML perdono sempre più valore rispetto ai CSS.


Mentre il tag SPAN solitamente è utilizzato per variare parti di testo (con associazioni di colore e tipo), il tag DIV è utilizzato per racchiudere blocchi di tag, che possono essere elenchi, il testo stesso, o perfino parti intere della pagina come i menù, l'intestazione ed il contenuto.
Proprio per questo motivo i tag DIV sono utilizzati con i CSS per la costruzione del box model, ossia un sito strutturato utilizzando soltanto i tag DIV ed escludendo le tabelle.
Per la composizione di tali pagine (solitamente in XHTML) è molto importante testare il sito su più versioni browser, perché non sempre si visualizza nello stesso modo.

Dobbiamo tenere presente che un sito compilato in HTML può essere convertito in XHTML modificando (in parte) il codice HTML. A tale proposito suggeriamo di scrivere TUTTI i tag HTML in minuscolo, racchiudere tutti i parametri numerici fra apici doppi, e di non associare lo stesso nome id a più contenitori nella stessa pagina (Ogni div un nome diverso). tale comportamento vi consentirà di convertire il sito in minor tempo.



Sintassi:
<div id="nome">
</div>
<div class="nome">
</div>
<div style="">
</div>

Equivalente per il tag SPAN.


Parametri:

I tag DIV e SPAN possono contenere tutti gli attributi css che caratterizzano la posizione ed il testo.
Esempio div:
<div style="border:1px solid black; margin:15px; padding:5px; width:300px; float:right; text-align:center; color:#0080C0; font-size:10px; font-style:italic; font-weight:bold;">
ciao ciao ciao ciao
</div>

Esempio span:
ciao <span style="border:1px solid black; margin:15px; padding:5px; text-align:center; color:#0080C0; font-size:10px; font-style:italic; font-weight:bold;"> ciao</span> ciao

In entrambi i casi non abbiamo inserito classi o id, ma è molto conveniente utilizzarli per il semplice motivo che un richiamo ad un foglio esterno di CSS consente la variazione degli stili senza dover necessariamente modificare ogni pagina del sito.
Esempio div:
<div id="prova">
ciao ciao ciao ciao
</div>
Nel foglio di style avremo:
div#prova{border:1px solid black; margin:15px; padding:5px; width:300px; float:right; text-align:center; color:#0080C0; font-size:10px; font-style:italic; font-weight:bold;}


Esempio span:
ciao <span class="esempio"> ciao</span> ciao
Nel foglio di style avremo:
.esempio{border:1px solid black; color:#0080C0; font-size:10px; font-style:italic; font-weight:bold;}