Passo 8
Per controllare se il nostro documento contiene caratteri non voluti, come ad esempio ritorni a capo forzati, possiamo chiedere al programma di visualizzare i caratteri nascosti. Torniamo alla finestra Editor e selezioniamo Edit > Preferences > Editor e selezionare la voce Show hidden characters.

Passo 9
Torniamo adesso alla finestra Edit e osserviamo cosa è cambiato. Ogni termine di riga forzato è identificato da un simbolo speciale "¶" e lo stesso discorso vale per gli spazi. Selezioniamo il simbolo "¶" che viene appena prima della parola "Esercizio" e togliamo il ritorno a capo forzato. Aggiungiamo una riga vuota dopo </title> e inseriamo un marcatore opzionale <meta> che renderà la nostra pagina più facile da rintracciare da parte dei motori di ricerca.
Notiamo come il programma colora in modo diverso tag e attributi dal resto del testo (contenuto).

Passo 10
Per aggiungere il marcatore selezioniamo Document nella barra delle icone appena sopra la finestra di lavoro e troviamo l'icona META. Clicchiamo sul triangolino che compare alla sua destra e apriamo un menu a tendina che elenca le possibili varianti del tag meta. Selezioniamo META description, nella finestra sarà inserito il marcatore <meta name="description" content="">.
Quasi tutti i marcatori <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).

Passo 11
Portiamo il cursore tra le coppie di virgolette che vengono dopo l'attributo "content" e inseriamo una descrizione sommaria della nostra pagina: "PC Open - Corso per Webmaster professionista, esempio di costruzione di pagina vergine con impiego dei marcatori opzionali meta nella sezione d'intestazione (head)". Notate che, grazie al ritorno a capo automatico (soft) il testo è interamente visibile nella finestra anche se non può essere contenuto in una sola riga di visualizzazione. Notate anche come sono diversi i simboli di ritorno a capo forzato rispetto a quelli del soft-wrap (freccia ripiegata).
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 12
Portiamoci con il cursore all'inizio del campo meta appena inserito e aggiungiamo un a capo forzato per portarci a una nuova riga. Per inciso questo non è indispensabile perché HMTL riconosce i marcatori anche se questi sono scritti tutti di seguito, tuttavia l'uso di ritorni a capo forzato alla fine di un marcatore aiutano a tenere ordine nella pagina.
Portiamoci di nuovo sull'icona META e selezionamo il prossimo marcatore: <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.

Passo 13
Portiamo il cursore tra le doppie virgolette dell'attributo "content" e digitiamo le nostre parole chiave. Ogni parola chiave è solitamente separata dalle altre per mezzo di una virgola. Perciò il nostro marcatore potrebbe diventare: <meta name="keywords" content="web design, webmaster, progettazione siti, HTML, corsi, corso, PC Open, sito, siti, pagine HTML, pagina HTML">
Notate che abbiamo inserito singolare e plurale di quelle parole che potrebbero essere digitate indifferentemente nei due modi.

Passo 14
Inseriamo un altro marcatore meta selezionandolo da quelli offerti come esempio dal menu dell'icona META. Questa volta aggiungiamo il marcatore <meta name="author" content=""> usato solitamente nel Web per indicare l'autore della pagina. Compiliamo il solito attributo "content" nel seguente modo <meta name="author" content="Roberto Mazzoni">

Passo 15
L'ultimo marcatore meta che val la pena di considerare è <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> che viene compilato automaticamente e per intero dal 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.

Passo 16
A questo punto la nostra intestazione contiene parecchie informazioni che saranno utili per la corretta indicizzazione e riconoscimento della pagina all'esterno del nostro sito, ma che non saranno mai visibili all'utente. Siamo pronti a codificare il documento vero e proprio che sarà contenuto tra i tag <body> e </body>. Se provate a caricare il documento "nuova_pagina_html-kit.htm" all'interno di un browser noterete che è completamente vuoto e che l'unico indizio viene dal titolo visualizzato in cima alla finestra del browser.

Passo 17
Se tuttavia selezioniamo Visualizza > HTML si aprirà il programma Blocco Note che ci mostrerà tutti i marcatori presenti nella pagina. Notate che le righe sono più difficili da leggere perché Blocco Note non esegue il ritorno a capo dinamico (soft wrap) delle parole.

Versione finale della pagina creata durante l'esercizio:
nuova_pagina_html-kit.htm
|