I tag sono i marcatori della pagina web. Ricordiamo che HTML significa linguaggio di marcatura delle pagine web (ipertesti) . Ecco, il modo in cui viene fatta questa marcatura è utilizzando delle etichette specifiche: i tag.

Esistono molti tag, ognuno con un suo nome. Ci sarà un tag per marcare i paragrafi, uno per marcare  i titoli e sottotitoli della pagina, uno per le immagini, per i link, per la suddivisione in riquadri della pagina e così via.
I tag servono a marcare la struttura della pagina web in modo che poi venga visualizzata dal browser.

Oh.. ma cos’è il browser, cos’è un link.. ? Non preoccupatevi. Abbiamo anche queste risposte. Potete leggerle subito o proseguire con la lezione sui tag. Per adesso non sapere cos’è un browser non compromette la vostra lettura.

I tag vanno inseriti tra i segni di minore e maggiore (<TAG>) che dovreste trovare sulla tastiera in basso a sinistra (uso il condizionale perchè le tastiere non sempre sono tutte uguali).
Un tag va chiuso con uno slash, ossia il tasto “/”  che dovreste trovare in alto sulla tastiera. Quindi: </TAG>).

Un tag va sempre chiuso perchè altrimenti viene compromessa la visualizzazione della pagina web. Se ad esempio io marco un titolo e non indico la chiusura del titolo, sembrerà che tutta la mia pagina web sia un titolo continuo e verrà visualizzata a caratteri cubitali (bhè, in realtà non cubitali, ma è per darvi un’idea).

Esistono però dei tag che non necessitano di chiusura, come il capo riga <br> e il tag per le immagini <img>.

I tag possono essere scritti in maiuscolo o minuscolo perchè HTML è un linguaggio insensibile al maiuscolo/minuscolo.

Vediamo ora i tag più comuni:
Titolo Principale <h1>Titolo1</h1>
Sottotitolo<h2>Sottotitolo</h2>
Titolo Paragrafo<h3>Titolo Paragrafo</h3>
Paragrafo <p></p>

I tag possono avere delle proprietà, degli attributi che specificano meglio come deve essere la pagina web.
Ad esempio quanto grande può essere un testo (attributo SIZE), quanto largo può essere un blocco di testo o un’immagine (attributo WIDTH),  che colore può avere il testo (attributo COLOR) e ancora il tipo di carattere utilizzato (FONT).

Esistono delle regole di scrittura ben precise per tag e attributi dei tag: è la sintassi del linguaggio, proprio come in grammatica. Se sbagliamo la sintassi, la visualizzazione non sarà corretta. Ricordiamo che gli attributi e i nomi dei tag sono in inglese e se sbagliamo l’ortografia non avremo l’effetto desiderato. Anche a me (haimè!) capita delle volte di scrivere widht anziche width.. e la larghezza non viene impostata.

Impostiamo il testo di un paragrafo: giustificato, arial, colore nero. L’allineamento è una proprietà di tutto il paragrafo mentre invece il resto è proprietà del carattere del testo (font)

<p align=”justify” >
<font family=”Arial” size=”12px” color=”#000000″>Questo è il testo</font>
</p>

Abbiamo usato tre attributi per il font. La dimensione del carattere (size) è espressa in pixel (px).

Una pagina web viene organizzata in blocchi: il blocco dell’intestazione, un’eventuale colonna a destra e sinistra, contenuto centrale e un conenuto alla base (footer o anche piè-pagina). Questi blocchi si chiamano DIV e hanno le dimensioni specificate dagli attributi di altezza e larghezza.

Un blocco può essere posizionato a destra o a sinistra, può contenere paragrafi e immagini e può essere dimensionato a piacere. Le proprietà del div sono scritte all’interno dell’attributo “style” in cui ho specificato le dimensioni, il colore di sfondo (background-color) e quello del testo

<div> Contenuto del blocco</div>

Ad esempio inserisco un paragrafo all’interno del blocco quadrato 200×200 pixel:

<div style=” 200px; height=200px “>
<p>Paragrafo</p>
</div>

Per poter vedere bene il blocco, lo coloriamo di nero con testo bianco:

<div style=” width: 200px; height: 200px; background-color: #000000; color: #FFFFFF “>
<p>Paragrafo</p>
</div>

All’interno della parola “style” la sintassi corretta è una sucessione di proprietà separate da un punto e virgola (;) e ciascuna delle quali ha il valore espresso dopo i due punti (:)

style=” proprieta1: valore1; proprietà2: valore2; proprietà3: valore3 “

Il colore è espresso mediante un codice numerico (esadecimale) che può essere ricavato da apposite tabelle che si trovano un po’ ovunque nel web. 

Ora prendiamo il programmino Blocco note e facciamo un’esercitazione.
Esercitazione