4 - I tag l'identazione del codice, i commenti (all interno del codice) ecc...
- Dettagli
- Categoria: guida al html
- Data pubblicazione
- Scritto da Super User
- Visite: 21861
4 - I tag l'identazione del codice, i commenti (all interno del codice) ecc...
Ciao benvenuti nel quarto topic della nostra guida html oggi parleremo dei tag del identazione del codice per una lettura più fluida i commenti ecc...Struttura di un tag
All’interno di ogni pagina sono presenti dei marcatori detti TAG (come gia detto nell primo topic i tag possono descrivere la funzione, il colore, le dimensioni, il link, sulla posizione delle immagini all’interno della pagina, su come far scorrere il testo, e altre caratteristiche di questo genere),
a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione.
I tag vanno inseriti tra parentesi angolari (
Il contenuto va inserito tra l’apertura e la chiusura del tag medesimo, secondo questa forma:
| Codice: |
<TAG attributi>contenuto</TAG> |
Ecco un esempio di codice che dispone un testo giustificato a destra:
| Codice: |
<P align="right">testo</P> |
ecco come viene visualizzato
---------------------------------------------------------------------------------------
testo
---------------------------------------------------------------------------------------
dall’esempio è evidente che la struttura di un attributo è: attributo="valore". Quindi in definita la struttura di un tag sarà:
| Codice: |
<TAG attributo_1="valore1" attributo_2="valore2" ... >contenuto</TAG> |
Alcuni particolari tag non hanno contenuto – perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, di conseguenza questi tag non hanno neanche chiusura. La loro forma sarà dunque:
| Codice: |
<TAG attributi> |
Ecco un esempio codice per inserire un’immagine:
| Codice: |
<IMG widht="20" height="20" src="http://icons.iconarchive.com/icons/graphics-vibe/developer/128/html-icon.png" alt="alt"> |
ecco come viene visualizzato:
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
vi diro ora molto brevemente il significato degli atributi utilizzati widht e height sono atributi di grandezza mentre src indica l'url dell'immagine.
come ptete vedere il tag non viene chiuso. Questo tipo di tag viene detto “empty”, cioè “vuoto”
indentazione e annidamento del codice
Una caratteristica importante del codice HTML è che i tag possono essere annidati l’uno dentro l’altro.
Anzi molto spesso è necessario farlo.
| Codice: |
<TAG1 attributi> contenuto 1 <TAG2>contenuto 2</TAG2> </TAG1> |
potremo ad esempio:
| Codice: |
Potremmo quindi avere ad esempio: <DIV align="right"> testo 1 <P align="left">testo 2</P> </DIV> |
ecco come si visualizzerebbe
---------------------------------------------------------------------------------------
testo 1
testo 2
---------------------------------------------------------------------------------------
quindi l’annidamento ci permette di attribuire formattazioni successive al testo che stiamo inserendo.
Come abbiamo gia visto nell’esempio, è una buona norma utilizzare dei caratteri di tabulazione 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 solo 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.
Possiamo ad esempio conforontare questi due codici:
| Codice: |
<DIV align="right">testo 1<P align="left"> testo 2 </P></DIV> |
| Codice: |
<DIV align="right"> testo 1 <P align="left"> testo 2 </P> </DIV> |
per il browser i due esempi sono identici, ma per l’utente è evidente che la differenza è notevole: pensate leggere un intera pagina di un sito su un unica stringa (sarebbe del tutto illeggibile!).
I commenti
Un’altra modo molto importante, per rendere il nostro codice più leggibile è quello di inserire dei “commenti” in punti particolari: si tratta di indicazioni significative per il webmaster, ma invisibili al browser.
Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi.
Il codice è il seguente:
| Codice: |
<!– questo è un commento –> |
e ci permette di “commentare” i vari punti della pagina.
Ad esempio:
| Codice: |
<!- menu di sinistra -> <!- barra in alto -> <!- barra X BEGIN -> <!- barra X END -> <!- BEGIN -> <!- END -> <!- ecc... -> |
aprofondimento:
-Maiuscolo o minuscolo
L’HTML è “case unsensitive“, cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.
| Codice: |
<P ALIGN=”RIGHT”> |
e
| Codice: |
<p align=”right”> |
vengono letti allo stesso modo dal browser.
Fino all entrata del XHTML, per aumentare la leggibilità del codice, si scriva in maiuscolo il nome del tag (es:
) e in minuscolo gli attributi (es: align=”right”).
Quindi:
| Codice: |
<P align=”right”> |
Tuttavia oggi, per analogia con l’XHTML che è figlio dell’XML e dell’HTML ed è “case sensitive”,cioè sensibile a maiuscole/minuscole, è consigliabile scrivere tutto in minuscolo, per abituarsi già al linguaggio che verrà.
Maiuscolo e minuscolo, in ogni caso non costituiscono errore.
Fino ad ora per rendere più chiare le differenze abbiamo utilizzato quasi sempre usato la vecchia abitudine di scrivere in maiuscolo i tag e in minuscolo gli attributi, d’ora in poi invece tutto il codice HTML della guida sarà in minuscolo.
bene qui finisce questo topic quindi
ciao a tutti e ci vediamo al prossimo topic.
Aggiungi commento
commentando si dichiara di accetare la policy sui commenti.
- i dati in seriti per commentare sono gestiti dal sistema di JComments e non verranno divulgati a terzi eccetto modifiche che si possono trovare nella Privacy Policy generale del sito
Commenti
RSS feed dei commenti di questo post.