I tag e gli attributi HTML da utilizzare nella prima fase di costruzione della pagina.
Passo 1:
Il primo TAG da inserire nella costruzione di una pagina è:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
si tratta di un marcatore ereditato da SGML (Standard Generalized Markup Language), da cui HTML deriva. Indica che il documento che stiamo creando rispetta le specifiche HTML 4.01 definite dal World Wide Web Consortium (http://www.w3c.org) e ammette alcune deroghe rispetto all'implementazione (Transitional) in modo da garantire anche la compatibilità con browser non completamente aggiornati.
Passo 2:
La seconda coppia di tag da inserire è <html> e <head>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
</html>
per indicare l'inizio del documento HTML vero e proprio e della sua intestazione, obbligatoria. Quest'ultima non viene visualizzata sul browser dell'utente, ma contiene informazioni utili per i motori di ricerca e per la catalogazione delle pagine.
Passo 3
L'unico tag obbligatorio all'interno dell'instazione è <title>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una pagina vergine</title>
</head>
</html>
che viene visualizzato nella parte alta della finestra del browser e come parte del commento al link che porta alla pagina da parte di molti motori di ricerca. Il testo contenuto all'interno di questo marcatore ha dimensioni libere, tuttavia la norma è di non superare le 100 battute.
Passo 4
Un altro tag, non obbligatorio, che trova posto nell'intestazione è <meta>, fondamentale per fornire informazioni descrittive ai motori di ricerca. Tra queste le parole chiave per la ricerca, il tipo di codifica di caratteri utilizzata (alfabeto latino, ad esempio) e una descrizione generale del contenuto del documento usata da alcuni motori di ricerca in alternativa al contenuto di <title>. Può essere utilizzato per inserire qualsiasi d'informazione tra cui il nome del programma con cui è stata prodotta la pagina, l'autore, eccetera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una pagina vergine</title>
<meta name="description" content="PC Open - Corso per Webmaster professionista, esempio di costruzione di pagina vergine con impiego dei marcatori opzionali meta nella sezione d'intestazione (head)">
</head>
</html>
Qui abbiamo aggiunto il primo dei tag meta per il nostro documento. Quasi tutti i tag <meta> si presentano in coppie di name e content, dove il primo identifica il nome di ciò che si vuole specificare e il secondo ne definisce il contenuto. Non esistono specifiche per la definizione di nome e contenuto, ma nel Web si è ormai diffusa l'abitudine di usare il nome "description" per identificare una descrizione sommaria della pagina a beneficio dei motori di ricerca, descrizione che solitamente viene visualizzata dal motore a fianco del titolo e del relativo URL (indirizzo con cui raggiungere la pagina). Non esiste limite alla lunghezza del contenuto di un marcatore <meta name="description" content="">, tuttavia i motori di ricerca solitamente non vanno oltre i primi 100 o 250 caratteri.
Passo 5
Aggiungiamo il secondo tag meta <meta name="keywords" content="">. Si tratta di un altro uso ormai abituale del tag meta, destinato a specificare una serie di parole chiave (keywords) con le quali in documento possa essere indicizzato per un recupero rapido da parte di un motore di ricerca. Anche qui notate che l'attributo "content" è vuoto, in attesa che noi specifichiamo le informazioni desiderate.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una pagina vergine</title>
<meta name="description" content="PC Open - Corso per Webmaster professionista, esempio di costruzione di pagina vergine con impiego dei marcatori opzionali meta nella sezione d'intestazione (head)">
<meta name="keywords" content="web design, webmaster, progettazione siti, HTML, corsi, corso, PC Open, sito, siti, pagine HTML, pagina HTML">
</head>
</html>
Notate che abbiamo inserito singolare e plurale di quelle parole che potrebbero essere digitate indifferentemente nei due modi. Anche per keywords non c'è un limite previsto dallo standard, ma consigliamo di consultare i requisiti dei motori di ricerca a cui si vuole segnalare la pagina, poiché di solito questi ultimi definiscono un numero limitato di caratteri (ad esempio un centinaio).
Passo 6
Inseriamo in terzo dei tag meta della nostra pagina a indicarne l'autore. Questo è facoltativo e non viene usato in alcun modo dai motori di ricerca, ma può essere utile come strumento di riconoscimento e di tutela del nostro lavoro.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una pagina vergine</title>
<meta name="description" content="PC Open - Corso per Webmaster professionista, esempio di costruzione di pagina vergine con impiego dei marcatori opzionali meta nella sezione d'intestazione (head)">
<meta name="keywords" content="web design, webmaster, progettazione siti, HTML, corsi, corso, PC Open, sito, siti, pagine HTML, pagina HTML">
<meta name="author" content="Roberto Mazzoni">
</head>
</html>
Passo 7
Completiamo l'inserimento dei tag meta con il marcatore <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> che viene compilato automaticamente e per intero dai programmi di editing programma con le specifiche corrette per una pagina prodotta nel mondo Occidentale. È utile ai fini di compatibilità con il resto del Web poiché indica immediatamente a qualsiasi browser e motore di ricerca che la pagina contiene un documento HTML, codificato secondo l'alfabeto latino codificato per un PC. Se il browser funziona su un computer con un insieme di caratteri diverso (cinese, cirillico o altro) la pagina non verrà caricata e l'utente verrà avvisato prima di procedere.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una pagina vergine</title>
<meta name="description" content="PC Open - Corso per Webmaster professionista, esempio di costruzione di pagina vergine con impiego dei marcatori opzionali meta nella sezione d'intestazione (head)">
<meta name="keywords" content="web design, webmaster, progettazione siti, HTML, corsi, corso, PC Open, sito, siti, pagine HTML, pagina HTML">
<meta name="author" content="Roberto Mazzoni">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
</html>
Passo 8
La nostra intestazione adesso è completa e siamo pronti a inserire nella pagina i contenuti che saranno visti dal navigatore, a tale scopo dobbiamo inserire la coppia di tag <body> </body> che delimitano il corpo del documento, cioè l'area di contenuto visualizabile sul browser dell'utente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una pagina vergine</title>
<meta name="description" content="PC Open - Corso per Webmaster professionista, esempio di costruzione di pagina vergine con impiego dei marcatori opzionali meta nella sezione d'intestazione (head)">
<meta name="keywords" content="web design, webmaster, progettazione siti, HTML, corsi, corso, PC Open, sito, siti, pagine HTML, pagina HTML">
<meta name="author" content="Roberto Mazzoni">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
Ecco la nostra pagina vergine pronta per essere riempita di contenuti.
|