502TAG HTML | Principali tag di formattazione
3 min
Abbiamo detto nel precedente articolo che all’interno di ogni pagina è presente una serie di marcatori, i cosiddetti 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>) e la chiusura del tag viene indicata con una “/”, ossia lo “slash” (</TAG>).
Il contenuto va ovviamente inserito all’interno del tag medesimo.
<b attributi>contenuto</b>
Gli attributi dei TAG sono svariati. La loro struttura è attributo=”valore”. Quindi la struttura del tag diviene la seguente.
<b attributo_1="valore1" attributo_2="valore2" attributo_3="valore3">contenuto</b>
Volendo fare un esempio pratico, giustifichiamo un paragrafo al centro.
<P align="center">testo</p>
Alcuni tag, come quello per inserire un’immagine (img) non hanno contenuto, e di conseguenza non hanno neanche la chiusura.
Indice dei contenuti
Maiuscolo o minuscolo?
L’HTML è “case unsensitive“, cioè indipendente dal formato maiuscolo o minuscolo.
Tempo fa era buona norma scrivere il nome del tag in maiuscolo e gli attributi in minuscono, oggi invece è consigliabile scrivere tutto in minuscolo.
Principali tag di impostazione per un documento html
<html> <!-- racchiude tutti i tag in un documento HTML e lo definisce come un documento HTML --> <head> <!-- racchiude i tag titolo e contiene titoli del documento ed informazioni di progettazione per il documento --> <title> <!-- racchiude il titolo per il documento --> </title> <!-- chiude il title --> </head> <!-- chiude l'head --> <body> <!-- racchiude tutti i tag che formano un documento --> </body> <!-- chiude il body --> </html> <!-- chiude l'html -->
Principali tag di formattazione del documento
<H1> </H1> è un tag di testata che crea il testo di dimensioni più grande. Il numero di tag di testata può variare da 1 a 6. Incrementando il numero rende più piccolo il testo
<P> </P> crea paragrafi
<BR> </BR> crea una interruzione di linea
<B> </B> rende il testo in grassetto
<STRONG> </STRONG> rende il testo in grassetto
<I> </I> rende il testo in corsivo
<U> </U> sottolinea il testo
<CENTER> </CENTER> centra il testo
<FONTCOLOR=”nome del colore”> </FONT> assegna al testo un colore
Collegamenti
<A HREF=”indirizzo da linkare”> </A> inserisce un collegamento
Tabelle
<TABLE> </TABLE> crea tabelle. Questo paio di tag racchiude tutti gli elenchi di tag per ognuno degli elementi nell’elenco
<TR> </TR> crea la riga di una tabella. Questo paio di tag racchiude tutti i tag di celle nella tabella
<TD> </TD> crea celle in una tabella
Elenchi ordinati
<OL> </OL> crea un elenco ordinato. Questo paio di tag racchiude tutti i tag di celle nell’elenco
<LI> </LI> racchiude l’elenco degli elementi
Elenchi
<UL> </UL> crea un elenco non ordinato. Questo paio di tag racchiude tutti i tag di celle nell’elenco
<LI> </LI> racchiude l’elenco degli elementi
Commenti
Una strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei “commenti” nei punti più significativi: si tratta di indicazioni significative per i webmaster, ma invisibili al browser.
Inserire i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi.
[HTML][/HTML]
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.
Se questo articolo ti è piaciuto, ti chiedo solo di condividerlo sui social.