Il sito per imparare gratuitamente a fare pagine Web

Head in HTML

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



© www.web-link.it  Primi Passi in HTML con Style - Ver. 1.3.6

 

<head>

Nelle lezioni precedenti abbiamo spiegato come inserire testo, immagini e links, adesso vediamo di aggiungere qualcosa che non vedremo noi a video ma sarà "vista" perchè letta dal browser e dai motori di ricerca i quali, grazie anche a queste informazioni, sapranno indicare la nostra pagina a chi farà ricerche per un argomento da noi trattato.

PS: per essere presenti su un motore di ricerca non bastano da soli i metatags, serve anche la vostra iscrizione che deve essere fatta manualmente, a meno chè non vogliate aspettare di essere trovati casualmente dal motore di ricerca stesso.

Il Tag <title> trova la sua collocazione in head, magari mettetelo come primo tag.

<title>Primi Passi HTML con Style di Web-Link</title>

I metacomandi subito sotto, sono diversi e per svariati utilizzi, potete vederne molti raccolti su questa pagina: - I MetaTags - dove a fondo di quella pagina trovate un piccolo modulo per generare automaticamente i metacomandi che servono al vostro sito, personalizzandoli in base ai vostri contenuti. Io credo che soltanto alcuni siano veramente importanti ed utili per essere rintracciati al meglio dai motori di ricerca. Voi potete valutare gli altri presenti in quella pagina ed inserire tutti quelli che preferite.

Che cosa sono i motori di ricerca?
Quando andate sulla rete internet 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 vostra pagina web non potrebbe elencarla insieme a tutte le altre che trattano lo stesso argomento ricercato.

Per questo motivo è opportuno specificare nella pagina iniziale, quella dal nome index.html, almeno un minimo di informazioni relative al suo contenuto, lo si fa con meta comandi che hanno una sintassi simile a quella degli altri tags adoperati fino ad ora e cioè fra le parentesi angolari inseriremo il metacomando con la seguente sintassi:

<meta name="xxx" content="yyy">

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

Come dicevo sopra, i metacomandi veramente importanti (a mio avviso) sono pochi: titolo (title), descrizione (description), parole chiave (key words), codifica caratteri (charset).

Vediamo la loro sintassi e a che cosa servono nello specifico:

<meta name="DC.Title" content="Mio Titolo">

Si adopera per il titolo del documento, al posto di "Mio Titolo" mettete il titolo della vostra pagina. Non sostituisce il tag title visto sopra ma lo integra.



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

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



<meta name="keywords" content=" le, parole, chiave, separate, da, virgole">

Si adopera per dare ulteriori informazioni sull'argomento trattato nella pagina, spesso si adoperano parole diverse che hanno però lo stesso significato, cercando così di interpretare ed intuire quello che il visitatore digiterà sul motore di ricerca. Faccio un esempio: chi cerca javascript potrebbe cercarlo facendo uso della parola "Javascript" ma anche con "JS" oppure con "Script Java". 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 Metatag il più importante in assoluto e per certi motori addirittura indispensabile.

Per chiarire ancora meglio questo concetto vi riporto alcune keywords inserite nei miei metacomandi: editor, pagine, html, css, corsi, principianti, web.

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

Si adopera per specificare il set di caratteri usato all'interno della pagina. In questo esempio quello di windows-1252, molto adoperato il charset=iso-8859-1. Con questo tipo di charset si possono scrivere le vocali accentate senza bisogno di fare ricorso ai codici visti per la cosmesi del testo.

ATTENZIONE Questi metacomandi dovranno essere inseriti soltanto nella prima parte della struttura, e precisamente fra i tags <head> e </head>, e mai nel body come avete fatto fino ad ora. Riprendendo lo schema della prima lezione:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  qui i comandi meta
  </head>
  <body>
qui immagini, testi, links
  </body>
</html>

Concluderei la sezione Head dicendo che al suo interno trovano posto anche altri elementi (tags) quali i richiami o le dichiarazioni per i fogli di style e codice di programmazione sotto forma di script , non ritengo sia il caso di approfondire questo argomento adesso, non in questa rubrica almeno, ma se visitate i due links sopra troverete comunque tutte le informazioni necessarie al loro utilizzo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
<title> il titolo della pagina</title>
<meta name="DC.Title" content="Il titolo">
<meta name="description" content="La descrizione della pagina">
<meta name="keywords" content=" le parole chiave separate da virgole">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  </head>
  <body>
qui immagini, testi, links
  </body>
</html>

Con questa lezione ci avviciniamo alla fine, nella prossima non resta che vedere alcuni attributi per il body, la zona dove avete inserito immagini e testo, e sarete finalmente pronti per trasferire il sito sul server, cioè on-line e di conseguenza visibile a tutti.

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



Web-Link.it