Il Sito per imparare gratuitamente a fare pagine Web

Oggi: Martedì 24 Novembre 2009   Ore: 13:11
 
Home · XHTML con Style · Primi Passi · Guida HTML · Guida CSS · Guida PHP · F.A.Q. · Scripting · Applets · Grafica Web · Forum · Comunicazioni Scrivimi
 
  Web-Link


Libera Donazione
 Guida XHTML
web-link
·Prefazione
·Gli Strumenti
·La Struttura base
·Il Testo
·Le Liste
·Le Immagini
·Immagini e Testo
·I links
·Links e CSS
·Caratteri speciali
·Colori e Sfondi
·Head e MetaTags
·Box Model
·Posizionare il Box
·Box liquido
·Il Layout
·Le Tabelle -Struttura
·Le Tabelle -Attributi
·I Moduli o Forms
·I Frames o Cornici
·Iframe
·Multimedia Audio
·Multimedia Applet
·Multimedia Script
·On line con FTP
·Alcuni Esempi
·Conclusioni
·Download Guida
web-link
  Fare Web
web-link
·Applets
·Banners
·Blog
·Chat
·Contatori
·DHTML
·E-Commerce
·Editors CSS
·Editors HTML
·Flash
·Forum
·F.T.P.
·Guestbooks
·Grafica
·Iscriz.Mot.Ricerca
·Java Applets
·Java Script
·Mailling List
·Mappe Cliccabili
·Meta Tags
·Mot.ricerca interno
·Scripting
·Sondaggi on-line
·Spazi Web
·Tag Boards
·URL forwarding
·Validatori HTML
·W3C Specifiche
·Web Designer
·Web Master
web-link
Guida XHTML con Style - Ver. 1.1.7 - Ottobre 2006 - By Web-Link
web-link
XHTML e CSS



 
 

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:


<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" />

Si adopera per dare ulteriori informazioni sull'argomento trattato, spesso si adoperano parole diverse che hanno però lo stesso significato cercando di interpretare ed 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 1000 e dovranno semplicemente essere separate da una virgola e da uno spazio vuoto. Ritengo questo meta tag il più importante in assoluto 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 le parole chiave possono essere inserite adoperando anche maiuscole.



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

Si adopera per la codifica del set di caratteri adoperato, in questo caso windows-1252.



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">
<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 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 momento.

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

  
Andrea Bianchi 
  Sito di riferimento: www.Web-Link.it
Forum di riferimento: www.ilmioforum.com




Valid CSS!

Valid XHTML 1.0 Transitional




per stampare questa pagina




  Potete fare domande e discutere l'argomento sul Forum



  Risorse
· Forum
· F.A.Q.
· Frames
· Scripting
· Applets
· Grafica Web
· Banner Exchange
· Novitànews
weblink
  Servizi
· Sondaggio
· I Files Scaricati
· Segnala il sito
· Leggi Guestbook
· Firma Guestbook
· Banners
weblink
  Linguaggi
· A.J.A.X.
· A.S.P.
· C.G.I.
· C.S.S.
· Flash
· H.T.M.L.
· X.H.T.M.L.
· Java
· JavaScript
· P.E.R.L.
· P.H.P.
· X.M.L.
weblink
  Download
· Primi Passi
· Guida HTML
· Guida CSS
· Guida XHTML
weblink
 
· Home Page Home Page · Aggiungi ai preferiti Aggiungi ai preferiti · Segnala ad un amico Segnala il sito ai tuoi amici ·
 
 

Questa pagina è esclusiva proprietà di © Web-Link © Andrea Bianchi 1997 ~ 2008
Vietata la copia e la distribuzione, anche parziale, senza la previa autorizzazione scritta di Web-Link