Originariamente pubblicato in data 21/06/1998
A
C
C
O
M
A
Z
Z
I
Chi ben comincia...
Chi ben comincia...
...è a metà dell’HTML. Per scrivere una pagina Web, infatti, non servono applicazioni costose. Basta imparare a conoscere i tag, i folletti dell’HTML.
...è a metà dell’HTML. Per scrivere una pagina Web, infatti, non servono applicazioni costose. Basta imparare a conoscere i tag, i folletti dell’HTML.
Non avete mai creato una pagina Web? Cominciate ora: aprite una copia di SimpleText e trascrivete queste poche righe:
<HTML>
<HEAD>
</HEAD>
<BODY>
La mia prima pagina web!
</BODY>
</HTML>
Salvate il documento, dandogli un nome che finisce con “.html”. Per esempio, “La mia prima pagina.html”. Poi trascinate l’icona del documento sopra all’icona del vostro programma per la navigazione di Internet preferito (un browser come, per esempio, Netscape Navigator oppure Internet Explorer). Se osserviamo con attenzione la nostra prima pagina Web scopriremo tutti i (pochi) concetti base dello HTML. Una pagina HTML è un file di testo che contiene le parole che vediamo dentro alla finestra del browser più i comandi indirizzati al browser stesso. Questi comandi vengono solitamente chiamati tag. I tag dello HTML sono sempre circondati dai segni di minore e maggiore (per esempio, <CENTER> è un tag). Quasi tutti i tag vanno a coppie e funzionano come interruttori: il primo attiva un comando e il secondo lo disattiva. Per esempio, per far apparire un testo in grassetto scriveremmo:
<B>Proviamo!</B>
In ogni coppia il tag di chiusura è identico al tag di apertura ma preceduto dal carattere sbarra “/”, come si vede nell’esempio poco sopra.
Tutte le pagine Web cominciano con il tag <HTML> e finiscono con </HTML>. Tutte le pagine contengono una sezione di intestazione etichettata <HEAD> e un corpo etichettato <BODY>. Nel body vengono inserite tutte le frasi, le immagini, le animazioni e i suoni che noi troveremo dentro la finestra del browser.
In questo primo articolo noi ci soffermeremo sulla intestazione, la head, della pagina Web. Molti autori la sottovalutano; tutte le applicazioni che promettono di creare il codice HTML per noi la trascurano; eppure una intestazione ben studiata può fare molto per migliorare l’efficacia di una pagina.
Se siete abituati a creare pagine Web con una applicazione come GoLive, PageMill, FrontPage, DreamWeaver o Home Page vi consigliamo, quando sono pronte, di aprire le vostre pagine con SimpleText e di intervenire a mano nella sezione Head, aggiungendo i tag che presentiamo in questo articolo. All’interno della sezione Head dobbiamo innanzitutto collocare il titolo della nostra pagina. Il titolo verrà mostrato dal browser (cioè da Navigator o Explorer) in alto, nella barra che usiamo per trascinare la finestra. Il tag che usiamo per identificare il titolo è, prevedibilmente per chi conosce l’inglese, <TITLE>.
Per fare una prova riapriamo il documento HTML che abbiamo creato in precedenza e aggiungiamo tre righe subito sotto alla scritta <HEAD>, così:
<TITLE>
Pagina home di L. Accomazzi
</TITLE>
Anche stavolta possiamo verificare che la pagina funzioni caricandola in un browser. Un suggerimento: nel titolo è bene evitare l’uso delle vocali accentate. Il motivo verrà spiegato tra un attimo, insieme con la soluzione. Purtroppo, però, con i browser più vecchi questa soluzione non è sempre efficace. Per evitare pasticci è meglio limitarsi a titoli semplici che evitano i caratteri tipici della lingua italiana. In caso di incertezza possiamo usare il pannello di controllo “Scelta tastiera” per selezionare la tastiera americana e l’accessorio di scrivania “Tastiera” (nel menu mela) per trovare un elenco dei caratteri che possiamo usare con sicurezza.
Conviene, dunque, che siamo noi a scegliere le parole chiave che descrivano la nostra pagina web. Ci basta inserire una riga all’interno della sezione Head, come nell’esempio qui sotto:
<META name="keywords" content="corso HTML,tag,pagina web,head">
Che si legge: questa è una meta-informazione, e dunque descrive il documento in modo astratto senza alterarne il contenuto; la meta-informazione riguarda le parole chiave, che sono le seguenti.
I tag di tipo meta sono molto importanti: introduciamone subito un altro.
Tutti i computer usano lo stesso codice per lavorare con le lettere dell’alfabeto. Si chiama codice ASCII e permette ai nostri calcolatori di manipolare le lettere con la stessa facilità con cui essi trattano i numeri. Purtroppo, il codice ASCII non ha posto al suo interno per le lettere che non fanno parte dell’alfabeto inglese, come le vocali accentate àèìòù. Per fare spazio a queste ed altre lettere, ogni piattaforma usa codici diversi e non standard: quelli che usiamo su Mac sono differenti da quelli del PC, che a loro volta sono diversi da quelli Unix. Lo HTML, nato per funzionare su qualsiasi computer, per risolvere il problema della compatibilità usa codici speciali (vedere “niente virgolette”). Ma poiché l’HTML è uno standard mondiale, si può anche scrivere una pagina Web in arabo, cirillico o giapponese. Introducete nella sezione Head della vostra pagina di prova questa riga:
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Questa riga informa il browser che vorremo usare l’alfabeto latino e i codici della tabella che accompagna questo articolo. All’interno della sezione Body, sotto alla riga “La mia prima pagina web”, possiamo scrivere:
Questa è una prova.
La parola HTML “è” significa “e minuscola con accento grave”. Se apriamo il nostro documento dentro al browser, la frase che abbiamo appena scritto verrà interpretata e visualizzata come “questa è una prova”.
Qualcuno, a questo punto, potrebbe chiedersi perché abbiamo consigliato di evitare le vocali accentate nel titolo. La risposta: purtroppo alcuni browser applicano la direttiva “charset=iso-8859-1” soltanto alla sezione Body. Il titolo della pagina, però, come abbiamo visto sta nella sezione Head... Un altro tag di tipo meta che vale la pena di inserire è la nostra firma. Possiamo associare il nostro nome alle pagine web che scriviamo, così:
<META name="generator" content="Luca Accomazzi">
I programmi come Home Page o DreamWeaver ci mettono il loro nome: molto meglio sostituirlo col nostro. Prima di chiudere, un altro trucchetto utile. Quando incontriamo un link, ovvero le parole in blu sottolineato, e lo clicchiamo, il browser carica un’altra pagina. Avrete forse incontrato, su internet, alcuni link speciali: quando li cliccate il browser apre una nuova finestra e carica la pagina linkata dentro ad essa. Come si fa? Semplice: basta aggiungere nella sezione Head questa direttiva:
<BASE target="_new">