Head e Body in XHTML e CSS di Web-Link.it

head & Meta Tags

Dopo aver visto come si adoperano i colori e le immagini grafiche di sfondo, siamo praticamente in grado di produrre un documento completo in xhtml ma dal momento che questo deve essere messo in rete necessita di alcune informazioni che non cambieranno il suo aspetto estetico ma contribuiranno a renderlo più facilmente reperibile dai motori di ricerca.

Si tratta dei meta comandi che a differenza di tutto quello visto fino ad ora non vanno inseriti nel body ma nella parte head del documento.

Questi metacomandi sono diversi e servono per svariati utilizzi, è possibile vederli raccolti su questa pagina: Meta Tags, credo che soltanto alcuni siano veramente importanti ed utili ai fini di essere rintracciati ed indicizzati al meglio dai motori di ricerca.

Cosa sono i motori di ricerca ?
Quando siete in rete e cercate qualche argomento neppure vi rendete conto che lo fate consultando proprio un motore di ricerca, se questo non sapesse che esiste anche la pagina web che state cercando non potrebbe elencarla insieme a tutte le altre che trattano lo stesso argomento da ricercare.

Per questo motivo è opportuno specificare nella pagina iniziale (di solito index.html) almeno quel minimo di informazioni relative al contenuto del nostro sito, lo si fa con questi comandi che hanno una sintassi simile a quella degli altri tags adoperati fino ad ora e cioè fra le parentesi angolari viene inserito il metacomando con la seguente sintassi:

<meta name="xxxxxx" content="yyyyyy" />

Dove al posto di xxxxxx andrà messo il nome del metacomando ed al posto di yyyyyy il suo contenuto o descrizione.

Questo tag, come <br /> <hr /> <img /> non ha il relativo tag di chiusura ed allora vale la regola di chiuderlo prima della sua parentesi angolare finale />.

Come detto in precedenza a mio parere i metacomandi realmente utili ed importanti sono pochi: titolo (title), descrizione (description), parole chiave (key words), codifica caratteri (charset).

Vediamo la loro sintassi e a cosa servono:

Questi metacomandi dovranno essere inseriti soltanto nella prima parte della struttura e precisamente fra i tags <head> e </head>, e non nel body come è stato fatto fino ad ora. Rivediamo adesso lo schema base completo di tutto quello fino a questo momento trattato e relativo alla nostra pagina web in xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> Titolo della mia pagina Web</title>

</head>

<body>

<p>Questa è la mia prima pagina web in xhtml</p>

<a href="http://www.web-link.it"> clicca qui </a>

</body>

</html>

All'interno della sezione head trovano posto anche altri elementi (tags) relativi al codice di programmazione sotto forma di scripting , non ritengo il caso di parlarne adesso, non in questa rubrica almeno, ma se visitate il link relativo troverete comunque tutte le informazioni necessarie al loro utilizzo.

Concluderei la sezione head col tag che permette di visualizzare un'icona nella barra degli indirizzi del browser, non c'entra molto con xhtml ma so che prima o poi vi chiederete come fare, questo il tag per ottenerla:

<link rel="shortcut icon" href="/favicon.ico" />

Ovviamente dovrete avere un file grafico in formato icona che rappresenti il vostro simbolo e dovrà chiamarsi esattamente favicon.ico ed essere depositato sul server insieme alla pagina che lo richiama.

Con questa lezione avete imparato ad introdurre i meta comandi utili per essere visti da molti motori di ricerca, nella prossima lezione vedremo il box model per gestire blocchi di testo ed immagini, praticamente la struttura portante per impaginare tutto quello che è stato spiegato fino a questo momemto.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.