Questa è una parte abbastanza difficile e dovete leggerla attentamente!
V° Lezione : Struttura di un tag
Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i
TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (
<tag>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi:
</tag>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
CODICE
<i><TAG attributi>contenuto</TAG> </i>
Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:
CODICE
<i><P align="right">testo</P></i>
dall'esempio è evidente che la struttura di un attributo è:
attributo="valore"Quindi in definita la struttura di un tag sarà:
CODICE
<i><TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG> </i>
Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:
CODICE
<i><TAG attributi></i>
Ecco un esempio di immagine:
CODICE
<i><IMG widht="20" height="20" src="miaImmagine.gif" alt="alt"></i>
come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".
Annidamento e indentazioneUna caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo.
CODICE
<i><TAG1 attributi>
contenuto 1
<TAG2>
contenuto 2
</TAG2>
</TAG1></i>
Potremmo quindi avere ad esempio:
CODICE
<i><P align="right">
testo 1
<P align="left">
testo 2
</P>
</P></i>
L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo.
Come si può vedere già nell'esempio, è una buona norma utilizzare dei
caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore.
Questa procedura si chiama
indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio:
CODICE
<i><P align="right">testo 1<P align="left"> testo 2 </P></P></i>
con:
CODICE
<i><P align="right">
testo 1
<P align="left">
testo 2
</P>
</P></i>
per il browser i due esempi sono equivalenti, ma per l'utente umano è evidente che la differenza è notevole: pensate ad una pagina complessa visualizzata in un unico blocco di testo: sarebbe del tutto illeggibile!
Fonte :
HTML.IT