AirVisual
COVID-19
Facebook
Outlook
Gmail
Instagram
Google
Google News
martedì 26 Maggio 2020

Download in corso

Softwareone.it

10-01-2019

Html Contenitori, tag 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.

Pubblicità

Entrambi contengono un nome dichiarato con il parametro id=” ” o class=” ” 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

questa e' <span style="font-weight : bold;">una riga</span> di prova.
questa e’ una riga di prova.
questa e' <b>una riga</b> di prova.
questa e’ una riga 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.

Quindi per chi si chiede cosa siano meglio i div o le tabelle senza dubbio utilizzate div e span per il testo.

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 div sono utilizzati con i CSS per la costruzione del box model, ossia un sito strutturato utilizzando soltanto 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.

Pubblicità

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

Parametri

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; text-align:center; color:#0080C0;font-size:10px; font-style:italic; font-weight:bold;">ciao ciao ciao ciao</div>
ciao ciao ciao ciao

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

#prova{
             border:1px solid black;
             margin:15px;
            padding:5px;
           width:300px;
            text-align:center;
           color:#0080C0;
           font-size:10px;
          font-style:italic;
         font-weight:bold;
}
ciao ciao ciao ciao

Esempio span

ciao <span class="esempio"> ciao</span> ciao

Lo stile

.esempio{border:1px solid black; color:#0080C0; font-size:10px; font-style:italic; font-weight:bold;}
ciao ciao ciao
Pubblicità

Form – HTML

https://developer.mozilla.org/it/docs/Web/HTML/Element/span

I commenti sono chiusi.

10-01-2019
Pubblicità