Come abbiamo detto ogni pagina web scritta in HTML può essere idealmente suddivisa in due aree: una sezione d’intestazione (header) ed il corpo effettivo della pagina.
In questa lezione soffermeremo la nostra attenzione sulla prima di queste aree dando una sbirciata a quello che succede tra i tag <head> e </head>.
Come detto il contenuto di questa porzione di pagina non è visibile agli utenti. All’interno dei tag <head> e </head> vengono inseriti, infatti, degli elementi particolari della pagina. Vediamo di elencare i più importanti:
Il tag <title>
Con il tag <title> si definisce il titolo dell’intero documento:
<title>Mr.Webmaster - Il portale dei webmaster italiani</title>Come già anticipato questo tag è molto importate soprattutto dal punto di vista dell’ottimizzazione dei contenuti per i motori di ricerca.
Il tag <base>
Con questo tag viene definito il percorso di base o il target di default per tutti i link presenti nella pagina:
<base href="http://www.mrwebmaster.it">
<base>Appartiene alla stessa famiglia il tag basefont (supportato solo da MSIE) col quale è possibile definire una stilizzazione di default per il testo nella pagina.
<basefont color="#FF0000" size="3">Per maggiori info su questo tag suggerisco la lettura di questo articolo.
Il tag <link>
Questo tag definisce una relazione tra il documento HTML ed una risorsa esterna; normalmente è utilizzato per includere nella pagina un foglio di stile CSS:
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css">Il tag <style>
Con il tag style è possibile definire una stilizzazione CSS all’interno della pagina. Vediamo un esempio:
<style type="text/css">
body { background: #FFFFFF; color: #000000; }
</style>Il tag <script>
Con il tag script è possibile eseguire all’interno della pagina degli script lato client (normalmente si tratta di codici di programmi scritti in Javascript). Con questo tag è possibile importare script esterni:
<script type="text/javascript" src="script.js"></script>oppure inserire porzioni di codice:
<script type="text/javascript">
alert('Benvenuto su Mr.Webmaster!');
</script>I tag <meta> (o meta-tag)
Con la famiglia dei meta-tag è possibile definire dei meta-dati per la pagina web. I meta-tag più conosciuti sono description e keywords utilizzati per l’indicizzazione della pagina sui motori di ricerca.
<meta name="description" content="Portale per Webmaster">
<meta name="keywords" content="HTML,CSS,JavaScript,PHP,ASP">Oltre a questi due ne esistono molti altri, tra cui:
- author – col quale si definisce l’autore della pagina web;
- robots – col quale si definiscono delle regole per i motori di ricerca;
- generator – dichiara il software e/o CMS che gestisce la pagina web;
- revised – indica la data dell’ukltima revisione;
- …
Per tutti questi la struttra del tag meta prevede i due attributi name e content.
Altro attributo possibile per il tag meta è http-equiv attraverso il quale è possibile definire il tipo di contenuto ed il charset della pagina
<meta http-equiv="content-type" content="text/html;charset=UTF-8">oppure impostare un refresh automatico:
<meta http-equiv="refresh" content="10;url=/">che in questo caso si ripeterà ogni 10 secondi.
Un esempio completo
Di seguito il codice completo di un ipotetico header:
<head>
<title>Mr.Webmaster - Il portale dei webmaster italiani</title>
<meta name="description" content="Portale per Webmaster">
<meta name="keywords" content="HTML,CSS,JavaScript,PHP,ASP">
<style type="text/css">
body { background: #FFFFFF; color: #000000; }
</style>
<script type="text/javascript">
alert('Benvenuto su Mr.Webmaster!');
</script>
</head>
