Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida stampabile in modo agevole dalla versione off-line scaricabile dal men laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

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 o metatags che a differenza di tutto quello visto fino ad ora non vanno inseriti nel body ma nella parte head del documento web.

Questi metacomandi sono molti e servono per i pi svariati utilizzi, possibile vederli raccolti su questa pagina: Meta Tags, credo che soltanto alcuni siano veramente importanti ed utili per 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 da voi creata non potrebbe elencarla insieme a tutte le altre che trattano lo stesso argomento ricercato.

Per questo motivo è opportuno specificare nella pagina iniziale (di solito index.html) almeno quel minimo di informazioni relative al contenuto del vostro sito, lo si fa con questi metatags 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 metatag, cos come <br /> <hr /> <img /> non ha il relativo tag di chiusura ed allora vale la stessa 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 che cosa servono:

<meta http-equiv="title" content="Mio Titolo" />

Si adopera per il titolo del documento, al posto di "Mio Titolo" mettete il titolo della vostra pagina o del vostro sito.


<meta name="description" content="La descrizione del sito o della pagina" />

Si adopera per la descrizione, è questo che vi identifica realmente, siate precisi nel descrivere cosa tratta il vostro sito.


<meta name="keywords" content=" parole, chiave, separate, da, virgole, e , spazio, vuoto" />

Si adopera per dare ulteriori informazioni sull'argomento trattato, spesso si adoperano parole diverse che hanno però lo stesso significato cercando di interpretare o intuire quello che il visitatore digiterà per effettuare la ricerca, faccio un esempio: chi cerca web-link potrebbe cercarlo facendo uso della parola "weblink" ma anche con "web_link" oppure con "web link". Tutte queste varianti possono essere inserite come keywords (parole chiave) e quindi aiutare nella ricerca. Se ne possono inserire fino a 1.000 e dovranno semplicemente essere separate da una virgola e da uno spazio vuoto. Ritengo questo meta tag molto importante, specialmente per certi motori di ricerca.

Per chiarire meglio ed ulteriormente questo concetto vi riporto alcune keywords inserite nei mie metacomandi: XHTML, CSS, XML, html, dhtml, DTD

A differenza dei tags che devono essere scritti con le sole lettere minuscole il contenuto, in questo caso le parole chiave, possono essere inserite adoperando anche maiuscole.

<meta http-equiv="Content-type" content="text/html; charset=windows-1252" />

Si adopera per specificare al browser la codifica del set di caratteri usato nei testi, in questo caso windows-1252.


Questi metacomandi dovranno essere inseriti soltanto nella prima parte della struttura e precisamente fra i tags <head> e </head>, mai nel body, contrariamente a quanto fatto fino ad ora con tutti gli altri tags. Rivediamo adesso lo schema base completo di tutto quello che abbiamo trattato per la costgruzione della nostra prima pagina web in xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<meta .... />
<meta .... />
<meta .... />
<meta .... />
<meta .... />
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>
<p>Questa la mia prima pagina web in xhtml</p>
<img src="webl-ink.gif" />
<a href="http://www.web-link.it"> clicca qui </a>
</body>
</html>

All'interno della sezione head trovano posto anche altri elementi (tags) relativi per esempio al codice di programmazione sotto forma di script , non ritengo il caso di parlarne adesso, pi avanti saranno accennati, 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 personalizzata 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 momento.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi