Guida ultrarapida all' HTML

Guida ultrarapida all' HTML
(Hyper Text Markup Language-Linguaggio di marcatura ipertestuale)
Da dove cominciare Il nostro intento è di creare pagine HTML direttamente in codice (o eventualmente di crearle con un programma apposito e di modificarle poi con le conoscenze acquisite con questa sezione).
Creeremo le nostre pagine con un elaboratore di testo, ma il testo che produrremo non avrà dimensioni né colori diversi di caratteri, né ci sarà testo sottolineato o in grassetto, né vedremo immagini. Tutte queste cose verranno appunto scritte come comandi nel linguaggio HTML. L' HTML non può essere considerato un vero e proprio linguaggio di programmazione perché non fa una vera e propria elaborazione, ma serve solo per visualizzare qualcosa che abbiamo deciso noi. L' HTML non dà messaggi di errore: se non capisce qualcosa, semplicemente la salta o fa cose strane.
In Windows è sufficiente usare il semplicissimo programma Blocco Note, tuttavia se il nostro file comincia ad essere troppo lungo, Blocco Note esaurisce la memoria e allora è necessario utilizzare Word Pad (forse questo inconveniente si potrebbe risolvere con qualche impostazione di Blocco Note, ma non ha importanza), però bisogna scrivere davvero tantissimo perché ciò accada, usate pure Blocco Note senza preoccuparvi (eventualmente usate Word Pad alla fine perché possiede la funzione sostituisci, può essere opportuno sostituire le lettere accentate italiane con i loro relativi codici per essere sicuri che tutti possano visualizzarle, riguardo a ciò guardate qui). Si possono utilizzare anche elaboratori di testo più complessi (come Word), ma ricordiamoci di scrivere un testo con caratteri tutti uguali in dimensione, colore, ecc. Alla fine salvate il file con estensione .htm o .html e siate coerenti nel scegliere una o l' altra opzione perché sennò quando vorrete fare i collegamenti tra le pagine non capirete più niente. Se ci sono problemi, salvate il file con estensione .txt (e se il programma vi dice che così ci sarà perdita di informazione della formattazione del testo, ignorate questo avvertimento), apritelo con un browser (un programma per navigare su Internet, ad esempio Internet Explorer o Netscape Navigator) e quindi salvatelo con l' estensione .html.
Il linguaggio HTML non è case sensitive, significa che potete scrivere i comandi indifferentemente in lettere maiuscole o minuscole, e non si cura degli spazi in più (cioè se mettete tanti spazi è come metterne uno, bisogna usare un comando) o delle interruzioni di riga (se nell' elaboratore di testo andate a nuova riga, questo non succederà nella pagina HTML, bisogna usare un comando). È meglio usare sempre le minuscole per i comandi per non premere continuamente il tasto shift. Perché scrivere spazi non necessari? Usate in modo furbo le interruzioni di riga per rendere più leggibile il vostro codice.
Quando create il vostro sito, mettete tutti i suoi files in un' unica cartella. All' interno di questa cartella si potrebbero creare altre sottocartelle, ma questo crea delle complicazioni. In questa guida spiegherò come fare un sito Internet solo nel caso che tutti i suoi files siano nella stessa cartella, al momento della pubblicazione questo si rifletterà nel fatto che quando invierete i files al server, non creerete cartelle. I files devono stare nella stessa cartella affinché le pagine si trovino tra loro e trovino le immagini o qualche altro tipo di file.
Anche se vorrete che in una pagina la stessa immagine venga visualizzata più volte o/e venga visualizzata in più pagine, sarà sufficiente salvarne una copia. I files HTML infatti non contengono le immagini nel senso letterale del termine, ma hanno solo i riferimenti ad esse. Quando guardate la dimensione (in kilobyte) di una pagina HTML, il valore comprende solo il testo in codice HTML che avete scritto, non le immagini che si possono vedere nella pagina. In pratica se voi aprite una pagina HTML sul vostro computer e vedete che contiene immagini (perché si trovano nella stessa cartella) e inviate a qualcuno via e-mail il file HTML, chi lo riceverà non vedrà le immagini (al loro posto delle crocette) se non gliele inviate a parte. Analogamente, se spostate un file HTML, le sue immagini non si sposteranno con lui. Lo stesso discorso vale anche per files che non sono immagini (files audio, video, di testo, zip).
I files che create per il vostro sito devono avere nomi che non contengono spazi o simboli troppo inusuali, diversamente non vengono accettati dal server. Rinominateli se non soddisfano queste caratteristiche e attenti che in generale ogni volta che rinominate un file deve essere modificato di conseguenza il collegamento a quel file presente nelle pagine HTML.
Il file HTML che è la pagina iniziale del vostro sito deve obbligatoriamente chiamarsi index.html oppure index.htm (diversamente il browser non saprebbe quale pagina visualizzare per prima).
Anche se uno si studia da questa pagina o da un libro i comandi dell' HTML, in molti casi non sarà chiarissimo quale sarà il risultato di ciò che si sta scrivendo nella pagina prodotta, perciò in pratica di solito si procede così: si crea la struttura essenziale della pagina, la si salva come file html (o htm), si apre la pagina col browser, si scrive un pezzo della pagina, si salva, nel browser si preme Aggiorna per vedere il risultato ottenuto fino a quel momento, poi si scrive un' altro pezzo e si prosegue nello stesso modo. Anche se si è scritto del testo o del codice, non se ne visualizzerà il risultato nella pagina finchè non lo si sarà salvato, inoltre finchè nel browser non si sarà premuto Aggiorna, non si vedranno le ultime modifiche.
Nota sulle immagini: le immagini in formato bitmap (.bmp) sono non compresse, questo si riflette nel fatto che occupano molto spazio (in kilobyte), quindi non è opportuno pubblicarle sul proprio sito (anche se si può fare). Di solito si usano immagini jpeg (.jpg o .jpeg o .jpe) o gif (.gif). Molti programmi di grafica permettono di convertire una immagine bitmap in una jpeg o gif. Il grande vantaggio è che la dimensione (in kilobyte) cala molto, ma lo svantaggio è che c'è una perdita di informazione basata sulla ridondanza psicovisuale. In pratica i bordi diventano meno definiti, si perde informazione sul colore, aree che avevano lo stesso identico colore possono diventare aree con sfumature di colori diversi (quest' ultima caratteristica in particolare è un gran problema se si vogliono modificare queste immagini: ciò chiaramente non succede col formato bitmap). Di solito si può scegliere l' intensità di compressione: più compressione usiamo, più informazione si perde. È importante notare che un file gif può non essere solo un' immagine, ma anche un' animazione. Se possedete un' animazione gif, potete inserirla nella vostra pagina HTML come se fosse un' immagine. Ci sono programmi che comprimono files (non solo immagini) senza perdita di informazione, ad esempio Win Zip, Win Rar o Win Ace. Tuttavia un' immagine compressa in questo modo non può essere visualizzata in una pagina HTML. Di solito la stessa immagine compressa con perdita di informazione è più piccola che compressa senza perdita di informazione, ma in certi casi particolari in cui l' immagine è estremamente regolare (non può accadere per una foto), compressa senza perdita di informazione diventa molto più piccola che nell' altro modo. Ciò accade ad esempio alle immagini della sezione di matematica e della spiegazione di cos' è la quarta dimensione spaziale di questo sito che perciò permetto di scaricare anche in formato zip (si possono modificare facilmente) nell' area download. Ci sono anche altri formati di immagini, ma non li conosco bene.
Struttura dei comandi Come ho già accennato, nello scrivere un file HTML insieme al nostro testo digitiamo i comandi che descrivono l' aspetto della pagina finale. I comandi sono una stringa di caratteri e vanno racchiusi tra parentesi acute, eccole: < >. Tecnicamente un tale comando racchiuso tra parentesi acute si chiama tag. Alcuni comandi richiedono di essere chiusi, altri no. Quasi sempre vale la regola che un comando deve essere chiuso quando ciò ha senso. Ad esempio è necessario chiudere il comando per la sottolineatura del testo affinché il browser sappia quando smettere di sottolineare. Per chiudere un comando è sufficiente ripeterlo con in più il simbolo di slash (/) tra la parentesi acuta aperta ed il nome del comando. Ad esempio il comando per sottolineare è <u>, quindi la corrispondente chiusura (cioè viene indicato di smettere di sottolineare) è data da </u>.
Molte volte tra le parentesi acute inseriamo solo il nome di un comando, molte altre inseriamo anche uno o più attributi dello stesso. Anche gli attributi sono costituiti da stringhe di caratteri e descrivono una caratteristica del comando a cui si riferiscono; sono quasi sempre seguiti dal simbolo = e dal loro valore (non necessariamente numerico, può essere anch' esso una stringa di caratteri) racchiuso oppure no tra i simboli di virgolette ("valore"). Francamente non so dirvi quando le virgolette siano necessarie e quando no, probabilmente dipende dal browser e dal sistema operativo di chi visualizza la pagina (forse anche dal comando), dovete fare delle prove. Quando vogliamo chiudere un comando con attributi non dobbiamo ripetere i nomi degli attributi stessi con i loro valori, dobbiamo solo scrivere il nome del comando dopo lo slash. Per lo stesso comando possiamo non scrivere alcuno, ma anche uno o più attributi, il linguaggio HTML ci lascia abbastanza liberi. Quando non specifichiamo un attributo viene automaticamente utilizzato quello predefinito.
Ci sono anche comandi non racchiusi tra parentesi acute, ma servono esclusivamente per visualizzare simboli speciali. Ciò viene spiegato alla pagina sui simboli dell' HTML.
Comandi essenziali Il comando che racchiude tutta la pagina HTML è <html>, deve essere chiuso. Al suo interno ci saranno tutti gli altri comandi. La descrizione di tutta la pagina (il corpo della pagina) verrà fatta all' interno del comando <body> (corpo), deve essere chiuso. I comandi obbligatori sono solo questi, tuttavia affinché sia più facile che un motore di ricerca trovi la nostra pagina, come vedremo più avanti, è opportuno aggiungere anche ciò che segue. All' interno del comando <html>, prima del comando <body> va scritto il comando <head> (intestazione), deve essere chiuso. Contiene l' intestazione della pagina. All' interno di esso va infine inserito il comando <title> (titolo), deve essere chiuso. Contiene il titolo della pagina che non verrà visualizzato nella pagina, ma in cima alla finestra del browser, quindi dovrete comunque riscriverlo all' interno della pagina.
La struttura fondamentale di una pagina HTML è quindi la seguente:
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
La pagina vera e propria
</body>
</html>
Comandi per il testo <br> (break rule-spezza la riga) - fa andare a capo (anche se nel codice non lo facciamo, ma è meglio farlo per avere più chiara la struttura della pagina finale)
<u> (underline-sottolinea) - testo sottolineato; esempio: <u>testo</u> produce testo
<b> (bold-grassetto) - testo in grassetto; esempio: <b>testo</b> produce testo
<i> (italic-corsivo) - testo inclinato; esempio: <i>testo</i> produce testo
<sup> (superior-superiore) - testo in apice; esempio: testo<sup>testo</sup> produce testo^testo
<sub> (sub-sotto) - testo in pedice; esempio: testo<sub>testo</sub> produce testo_testo
<s> (strike-barrare) - testo barrato; esempio: <s>testo</s> produce ~~testo~~
<big> (big-grande) - testo più grande; esempio testo<big>testo</big> produce testotesto
<small> (small-piccolo) - testo più piccolo; esempio: testo<small>testo</small> produce testotesto
Nota: invece di big e small, per scrivere un testo di grandezza desiderata, è meglio usare font con l' attributo size (vedere poco più sotto): se però vogliamo inserire solo una manciata di parole di grandezza differente, vanno benissimo.
<tt> (typewriter type-scrittura della macchina da scrivere) - testo monospaziato (ogni carattere occupa lo stesso spazio); esempio: <tt>ghijkl</tt> produce ghijkl
<pre> (non so per cosa stia pre) - testo monospaziato con invariati gli spazi e le interruzioni di riga; esempio:

<pre>
*---*                                *---*
*   *               produce          *   *
*---*</pre>                          *---*

Nota: si può usare pre per inserire un certo numero a piacere di spazi.
<p> (paragraph-paragrafo) - crea un paragrafo separato dal resto con righe vuote sopra e sotto;
un attributo di p è align (allineare) che può assumere i valori left (sinistra), right (destra) o center (centro);
esempio: <p align=center>Questo è un paragrafo.</p> produce

Questo è un paragrafo.

<hr> (horizontal rule-riga orizzontale) - crea una riga orizzontale;
un attributo di hr è size (grandezza) che può assumere valori numerici che stanno ad indicarne lo spessore, un altro attributo è color (colore) i cui valori verranno specificati poco più sotto e stanno ad indicare il colore;
esempio: <hr size=5 color=green> produce

<left> (sinistra) - allinea a sinistra ciò che sta tra <left> e </left>
<right> (destra) - allinea a destra ciò che sta tra <right> e </right>
<center> (centro) - allinea al centro ciò che sta tra <center> e </center>
<font> (font-carattere) - definisce il carattere da usare;
un attributo di font è size (grandezza) che può assumere valori numerici da 1 a 7 che stanno ad indicarne la grandezza, un altro attributo è color (colore) i cui valori verranno specificati poco più sotto e stanno ad indicare il colore, un altro attributo è face (faccia) che può assumere come valori stringhe di lettere e stanno ad indicare il tipo di carattere da usare (ad esempio Arial, Verdana, Times New Roman);
esempio: <font size=6 color=green face=Verdana>testo</font> produce testo
Attenti che se voi sul vostro computer riuscite a visualizzare un font, se chi legge la vostra pagina HTML non ce l' ha installato, non potrà visualizzarlo (ne vedrà uno predefinito), quindi non usate font troppo strani.
I comandi si possono usare anche in combinazione tra loro. Ecco un esempio.
<u>testo <b>testo</b> testo</u> produce testo testo testo
Colori Alcuni comandi hanno come attributo color (colore). Qui specificherò come va indicato il valore di questo attributo.
Ci sono 2 modi per indicare un colore: con il nome del colore in inglese oppure con un codice. È meglio usare il nome in inglese (vi darò delle indicazioni, può essere che non conosciate l' inglese) perché con il codice è difficile ottenere il colore desiderato se non si è esperti nel mescolare i colori.
Col nome in inglese
Vanno bene i nomi dei colori in inglese oppure essi stessi preceduti dai prefissi light- (chiaro) o dark- (scuro). Ad esempio red significa rosso; comunque possiamo usare come valore dell' attributo anche darkred (rosso scuro).
Esempio: <font color=darkred>testo</font> produce testo
Il punto è che ad uno potrebbe servire una specifica sfumatura di colore e magari non sa come si chiama. Perciò mi sono rotto la testa per riuscire a trovare tutti i possibili nomi di colori in inglese (quasi sicuramente mancherà qualcuno) e ne ho fatto una tabella che comprende anche tutti i rispettivi light- e dark-: potete accedervi cliccando qui. Da questa tabella mi sono accorto che quasi sempre i prefissi light- e dark- danno come risultato un colore che non ha niente a che vedere colla versione chiara o scura del colore di partenza (non so perché). Ci sono anche ripetizioni. Ritengo che questa tabella sia sufficiente a soddisfare le esigenze di un utente "normale".
Ho sentito dire che su certi computer con certi browser i nomi dei colori in inglese nell' HTML non funzionano correttamente, per sapere se il vostro sistema ha dei problemi, guardate la tabella dei colori dell' HTML. Comunque i nomi dei colori col codice dovrebbero funzionare sempre. Sono spiegati subito sotto.
Col codice
Si può definire un colore anche ponendo come valore dell' attributo # seguito da 3 numeri a 2 cifre, tutto senza spazi, questi numeri a 2 cifre (se la prima cifra è uno 0 ritroviamo i numeri ad una cifra) però devono essere scritti in base 16 (la scrittura dei numeri in base 16 è chiamata anche esadecimale). Se non avete voglia di leggervi la spiegazione matematica alla quale potete accedere col link della frase precedente, vi posso dare qualche semplice indicazione qui. Intanto potete usare una calcolatrice scientifica per convertire i numeri dalla base 10 (la nostra) alla base 16 e viceversa. Se non la possedete, ce n'è inclusa una in Windows, presumo anche negli altri sistemi operativi. Per accedervi (in Windows), scegliete Start, Programmi, Accessori, Calcolatrice. Una volta aperta, andate sul menù Visualizza e scegliete Scientifica. Il sistema in base 10 viene denotato con Dec, quello in base 16 con Hex. Così potete convertire i numeri senza problemi.
Nel sistema esadecimale ci sono i 16 simboli seguenti per le cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (corrispondono ai nostri numeri dallo 0 al 15). Il primo posto a destra (guardando separatamente i blocchi di 2 cifre nel nostro caso) rappresenta i multipli di 1, il secondo i multipli di 16. Quindi ad esempio 23 in base 16 significa 2*16+3*1=32+3=35, B4 in base 16 significa 11*16+4*1=176+4=180. Il numero più grande a 2 cifre che possiamo scrivere in base 16 è FF e significa 15*16+15*1=240+15=255. Quindi in base 16 con 2 cifre possiamo rappresentare i numeri da 0 a 255, in tutto 256 numeri. Nella codifica per il colore il primo numero (a 2 cifre) rappresenta la quantità di rosso, il secondo quella di verde, il terzo quella di blu secondo il sistema di rappresentazione cromatica RGB (red, green, blue). In pratica possiamo "costruire" il colore che vogliamo mescolando quantità diverse di rosso, verde e blu, a ciascuno dei 3 colori possiamo attribuire un' intensità da 0 a 255. Per ogni intensità di rosso possiamo avere ogni possibile intensità di verde e per ciascuna di queste combinazioni possiamo avere ogni possibile intensità di blu, quindi in totale ci sono a disposizione 256*256*256=256³=16 777 216 colori, circa 16 milioni di colori! Faccio solo notare che se mescoliamo pigmenti (pitture) i colori primari sono il rosso, il giallo e il blu, se mescoliamo fasci luminosi invece i colori primari sono appunto il rosso, il verde ed il blu.
In conclusione il rosso sarà rappresentato da #FF0000, il verde da #00FF00, il blu da #0000FF, il nero da #000000, il bianco da #FFFFFF. Ecco come dobbiamo scrivere:
<font color=#FF0000>rosso</font> produce rosso
<font color=#00FF00>verde</font> produce verde
<font color=#0000FF>blu</font> produce blu
<font color=#000000>nero</font> produce nero
<font color=#FFFFFF>bianco</font> produce bianco
Tabelle Per creare una tabella bisogna usare il comando <table> (tabella), deve essere chiuso; un attributo di table è border (bordo) che può assumere valori numerici che stanno ad indicare lo spessore della griglia (se questo attributo non viene specificato, viene preso il valore predefinito, che però è 0, quindi in questo caso i dati saranno disposti in una tabella, ma non ci sarà la griglia), un altro attributo è bgcolor (background color-colore di sfondo) che può assumere come valore un colore (guardare sopra) e definisce un colore di sfondo per la tabella, un altro attributo è background (sfondo) che può assumere come valore il nome di un file d' immagine con la relativa estensione (l' estensione è necessaria perché nella stessa cartella del sito ci possono essere files di diversi tipi (estensioni) con lo stesso nome) e definisce un' immagine di sfondo per la tabella, un altro attributo è align che può assumere i valori left, right o center che indicano rispettivamente l' allineamento della tabella a sinistra, a destra o al centro (funziona come per <p>). Vediamo ora come definire il contenuto delle celle.
In HTML si scrivono le tabelle riga per riga. Questo inizialmente può confondere perché di solito siamo abituati a scrivere le tabelle colonna per colonna (ad esempio quando scriviamo un orario scolastico). Il comando per creare una riga è <tr> (table rule-riga della tabella), deve essere chiuso. Le celle vere e proprie si creano col comando <td> (table data-dati della tabella), deve essere chiuso; 2 attributi di table sono bgcolor e background che funzionano come per il comando <table>, ma si riferiscono ad una singola cella. Vedremo altri attributi di <td> dopo alcuni esempi di tabelle.
Creiamo una tabella di 3 righe e 2 colonne.
<table border=2 bgcolor=silver align=center>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
</tr>
<tr>
<td>riga 2 colonna 1</td>
<td>riga 2 colonna 2</td>
</tr>
<tr>
<td>riga 3 colonna 1</td>
<td>riga 3 colonna 2</td>
</tr>
</table>

produce

riga 1 colonna 1	riga 1 colonna 2
riga 2 colonna 1	riga 2 colonna 2
riga 3 colonna 1	riga 3 colonna 2

Creiamo una tabella di 2 righe e 3 colonne.
<table border=4 background="babbonatale1.gif">
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td bgcolor=green>riga 1 colonna 3</td>
</tr>
<tr>
<td>riga 2 colonna 1</td>
<td>riga 2 colonna 2</td>
<td bgcolor=#0000FF>riga 2 colonna 3</td>
</tr>
</table>

produce

riga 1 colonna 1	riga 1 colonna 2	riga 1 colonna 3
riga 2 colonna 1	riga 2 colonna 2	riga 2 colonna 3

Il comando <td> può avere come attributo anche colspan (column span-estensione della colonna) che può assumere un valore numerico che indica su quante colonne si espande la cella o rowspan (row span-estensione della riga) che può assumere un valore numerico che indica su quante righe si espande la cella. Vediamone degli esempi.
<table border=6 bgcolor=lime>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td>riga 1 colonna 3</td>
</tr>
<tr>
<td>riga 2 colonna 1</td>
<td colspan=2>riga 2 colonne 2,3</td>
</tr>
<tr>
<td>riga 3 colonna 1</td>
<td>riga 3 colonna 2</td>
<td>riga 3 colonna 3</td>
</tr>
</table>

produce

riga 1 colonna 1	riga 1 colonna 2	riga 1 colonna 3
riga 2 colonna 1	riga 2 colonne 2,3
riga 3 colonna 1	riga 3 colonna 2	riga 3 colonna 3

<table border=8 bgcolor=fuchsia>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td>riga 1 colonna 3</td>
</tr>
<tr>
<td>riga 2 colonna 1</td>
<td rowspan=2>righe 2,3 colonna 2</td>
<td>riga 2 colonna 3</td>
</tr>
<tr>
<td>riga 3 colonna 1</td>
<td>riga 3 colonna 3</td>
</tr>
</table>

produce

riga 1 colonna 1	riga 1 colonna 2	riga 1 colonna 3
riga 2 colonna 1	righe 2,3 colonna 2	riga 2 colonna 3
riga 3 colonna 1	righe 2,3 colonna 2	riga 3 colonna 3

<table align=center border=1 bgcolor=#F0F0F0>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td>riga 1 colonna 3</td>
<td>riga 1 colonna 4</td>
</tr>
<tr>
<td>riga 2 colonna 1</td>
<td colspan=3 rowspan=2>righe 2,3 colonne 2,3,4</td>
</tr>
<tr>
<td>riga 3 colonna 1</td>
</tr>
<tr>
<td>riga 4 colonna 1</td>
<td>riga 4 colonna 2</td>
<td>riga 4 colonna 3</td>
<td>riga 4 colonna 4</td>
</tr>
</table>

produce

riga 1 colonna 1	riga 1 colonna 2	riga 1 colonna 3	riga 1 colonna 4
riga 2 colonna 1	righe 2,3 colonne 2,3,4
riga 3 colonna 1	righe 2,3 colonne 2,3,4
riga 4 colonna 1	riga 4 colonna 2	riga 4 colonna 3	riga 4 colonna 4

Nota: in generale si possono anche inserire intere tabelle all' interno di una singola cella.
Collegamenti Il comando per i collegamenti è <a> (non so per cosa stia a), ma senza attributi non serve a niente, deve essere chiuso.
L' attributo fondamentale è href (hypertext reference-riferimento ipertestuale, almeno immagino che significhi questo) che può assumere come valore il nome di un file con la relativa estensione (l' estensione è necessaria perché nella stessa cartella del sito ci possono essere files di diversi tipi (estensioni) con lo stesso nome) e crea un collegamento a questo file; se questo file è una pagina HTML, il browser passa dalla pagina attuale a quella a cui deve collegarsi; se questo file è un' immagine, di solito (almeno per certi tipi di immagini) il browser passa dalla pagina attuale all' immagine in questione (cioè l' immagine da sola viene visualizzata nel browser), per gli altri tipi di files di solito si apre una finestra che chiede se aprire il file con un programma installato sul proprio computer o se salvarlo su disco. Quanto appena detto non basta per creare un collegamento. Per collegarci a qualcosa, dobbiamo cliccare su di un testo o su un' immagine. Ebbene questo testo o questa immagine vanno posti tra <a href=...> ed </a>. Vediamo degli esempi.
<a href="index.html">collegamento all' indice</a> produce collegamento all' indice
<a href="index.html"><img src="babbonatale1.gif"></a> produce

dove <img src="babbonatale1.gif"> è il comando (che vedremo poco più avanti) per visualizzare l' immagine (animazione) di nome babbonatale1.gif
Nel caso che ci colleghiamo ad una pagina HTML, possiamo collegarci ad un suo specifico punto. Per farlo dobbiamo innanzitutto "segnare" quel punto agendo sulla pagina che deve essere raggiunta. Si usa sempre il comando <a>, questa volta però con attributo name (nome). Nella pagina dove viene scritto non fa vedere nulla, ma permette ad altre pagine di collegarsi a questa esattamente nel punto dove c'è questo comando.
Adesso faccio un riferimento con il comando <a name=segno></a> proprio qui. Voi non lo vedete, ma il riferimento c'è e si chiama segno.
Per creare un collegamento ad un punto specifico di una pagina si scrive il comando come per collegarsi alla pagina che lo contiene, ma il nome del file deve essere seguito (prima delle virgolette chiuse, se presenti) dal simbolo # seguito dal nome del riferimento. Colleghiamoci al riferimento fatto poco sopra.
<a href="html.html#segno">collegamento alla pagina html.html nel punto segno</a> produce collegamento alla pagina html.html nel punto segno
Nel caso che il riferimento si trovi nella stessa pagina dalla quale ci colleghiamo, possiamo omettere il nome della pagina con l' estensione .html. Quindi poco fa avrei anche potuto scrivere (non sarebbe cambiato niente) il comando seguente.
<a href="#segno">collegamento alla pagina html.html nel punto segno</a> produce collegamento alla pagina html.html nel punto segno
Per collegarsi ad un indirizzo di posta elettronica (e-mail) si usa sempre l' attributo href con valore mailto: seguito dall' indirizzo di posta elettronica. Ecco un esempio.
<a href="mailto:mariorossi@stupidweb.org">indirizzo e-mail di Mario Rossi</a> produce indirizzo e-mail di Mario Rossi
Per collegarsi ad una pagina di un' altro sito si usa sempre l' attributo href con valore l' indirizzo esatto della pagina che si vuole raggiungere. Ecco un esempio.
<a href="http://www.stupidweb.org/best/granstupidaggini.html">una pagina da leggere</a> produce una pagina da leggere
Immagini Il comando per le immagini è <im> (image-immagine), ma senza attributi non serve a niente, deve essere chiuso.
L' attributo fondamentale è src (source-sorgente, almeno immagino che significhi questo) che può assumere come valore il nome di un file d' immagine con la relativa estensione (l' estensione è necessaria perché nella stessa cartella del sito ci possono essere files di diversi tipi (estensioni) con lo stesso nome) e fa visualizzare l' immagine stessa. Le animazioni gif vengono considerate immagini e quindi si inseriscono allo stesso modo. Ecco degli esempi.
<img src="sfondomat.jpg"> produce

<img src="babbonatale1.gif"> produce

Se vi manca un simbolo nonostante tutti i simboli dell' HTML, potete creare una piccolissima immagine (nel senso dell' area) che raffigurerà il vostro simbolo ed inserirla nel testo come se fosse una parola. L' ho fatto più volte nella sezione di matematica. Il problema di questa tecnica è che se modificate la dimensione od il colore del testo, la picola immagine che rappresenta il simbolo rimarrà uguale e perciò dovrete modificarla adeguatamente separatamente. Ecco un esempio.
2<img src="div.jpg">3 produce 2

3
Informazioni generali sulle immagini si trovano sopra.
Sfondi visivi e musicali Per impostare un colore di sfondo per una pagina HTML si deve usare l' attributo bgcolor nel comando <body> (riguardo a questo comando guardare qui) che può assumere come valore un colore (riguardo ai colori guardare sopra). Per impostare un' immagine di sfondo per una pagina HTML invece si deve usare l' attributo background sempre nel comando <body> che può assumere come valore il nome di un file d' immagine (sono concesse anche le animazioni gif).
Per impostare un sottofondo musicale per una pagina HTML si deve usare il comando <bgsound> (background sound-suono di sottofondo), un attributo di <bgsound> è src (come per le immagini) che può assumere come valore il nome di un file audio con la relativa estensione e definisce il suono da riprodurre, un altro attributo è loop (anello) e indica il numero di volte che il suono deve essere riprodotto, assume un valore numerico che indica il numero di volte oppure indifferentemente i valori infinite o -1 per indicare di riprodurlo all' infinito. Purtroppo il sottofondo musicale funziona solo col browser Internet Explorer.
Scrivere simboli speciali Alla pagina sui simboli dell' HTML viene spiegato come scrivere simboli speciali (attenzione: può servire anche per le lettere accentate, guardate appunto questa pagina).
Rendersi visibili in Internet Per facilitare l' individuazione di una pagina HTML da parte di un motore di ricerca si usa il comando <meta> (non so per cosa stia meta), esso va inserito tra <head> e </head> (per <head> guardare sopra), tutte le informazioni che vengono scritte in quest' area non si vedono all' interno della pagina (ma solo leggendo il codice). Un attributo di <meta> è content (contenuto) che può assumere i valori description (descrizione) o keywords (parole chiave), serve a definire se si vuole definire una descrizione del sito o l' elenco delle parole chiave, un' altro attributo è content (contenuto) e come valore può assumere una descrizione del sito se il valore di name era description oppure un elenco di parole (chiave) separate da virgole se il valore di name era keywords.
Per un sito di culinaria bisognerà scrivere qualcosa del genere:
<meta name="description"
content="Tutte le ricette che avete sempre sognato finalmente gratis">
<meta name="keywords"
content="pasta, pizza, sughi, dolci, torte, pasticcini, babà, creme, frullati, arrosti, maiale, tacchino, bovino, pollo, polpette, pesce, merluzzo, aragosta, caviale, desserts, ricette, chef, cucina, pranzo, cena, forchetta, forchette, cucchiaio, cucchiai, coltello, coltelli, tavolo, fame, ospiti, champagne, vino">
I motori di ricerca analizzano anche il titolo presente nel comando <title> (per <title> guardare sopra), quindi sceglietelo opportunamente.
Inoltre se le parole chiave introdotte da un utente quando cerca un' informazione su Internet sono contenute tra le prime parole della pagina e si ripetono spesso al suo interno, si ha più possibilità di essere ai primi posti nell' elenco dei risultati della ricerca.
Per farsi trovare più facilmente di solito i siti con argomenti affini inseriscono al loro interno collegamenti che li connettono tra loro, quindi è utile accordarsi via e-mail per fare qualcosa del genere.
Molti motori di ricerca permettono di segnalare il proprio sito.
Consigli pratici Ho creato tutto questo sito scrivendolo direttamente in codice e sono quasi certo di non aver usato cose non spiegate qui, quindi il codice ha una struttura non troppo complicata. Per imparare di più sull' HTML, leggete quindi il codice sorgente delle pagine del mio sito! In Internet Explorer lo si fa aprendo la pagina, cliccando col tasto destro su di essa (non dove si trova un' immagine o un collegamento) e scegliendo HTML o qualcosa come Visualizza HTML.
Quando scrivete un comando che deve essere chiuso, chiudetelo subito e poi andate a scrivere tra il comando aperto e quello chiuso, perché c'è il rischio che vi dimentichiate di chiudere. Questo causa grandi disastri nell' HTML.
Non mettete troppe immagini (e state anche attenti alle dimensioni in kilobyte) in un' unica pagina: impiegherebbe troppo tempo a caricarsi e il visitatore potrebbe abbandonarla prima di cominciare ad esaminarla perché stufo.
Rendete chiara la struttura del sito nella pagina iniziale, diversamente un visitatore frettoloso e disattento potrebbe abbandonarlo anche se contiene ciò che gli interessa perché gli sembrerebbe che non sia così.
Mettete bene in vista (nella pagina iniziale) la data dell' ultimo aggiornamento del sito: se è recente invoglierà un visitatore a leggerlo indipendentemente dal contenuto.
Non inserite parole chiave che non hanno a che vedere col vostro sito e, indipendentemente da quali siano, non ripetetele nell' elenco: i motori di ricerca potrebbero arrabbiarsi (dopo aver fatto dei controlli) ed escludervi di proposito.
In Windows usate pure il semplicissimo Blocco Note per scrivere le vostre pagine HTML; potete accedervi anche (una volta che la pagina esiste già) cliccando col tasto destro del mouse sulla pagina aperta in questione all' interno di Internet Explorer e scegliendo HTML. Solo se Blocco Note dice che non c'è memoria sufficiente, allora passate a Word Pad (è anch' esso un programma semplice).
Per creare immagini per il vostro sito in Windows potete usare il semplice programma Paint. Di solito viene sottovalutato, ma è un buon programma. Con esso ho creato tutte le immagini bitmap di questo sito che poi ho convertito in jpeg (per alcune ho prima usato dei programmi in Turbo Pascal creati da me per creare certe immagini e poi le ho elaborate con Paint). Potete trovare (e modificare) queste immagini bitmap compresse in un' unico file zip (molto piccolo perché queste immagini hanno grande regolarità) nell' area download. Altre informazioni sulle immagini in generale si trovano sopra.
Pubblicare il proprio sito in Internet Per prima cosa create il vostro sito sul vostro computer, escludendo il contatore del numero dei visitatori ed il guestbook (si tratta di una zona dove i visitatori possono lasciare le proprie osservazioni e che tutti possono visualizzare), ammesso che vogliate inserirli, comunque se li volete, intanto decidete dove andranno messi esattamente. Il contatore è un informazione per i visitatori, di solito si mette solo sulla pagina iniziale (index.html o index.htm), chi vi offre lo spazio web di solito vi dà un sacco di informazioni su quanto è frequentato il vostro sito, vi dicono quanto e quando è stata visitata ogni singola pagina, addirittura da che pagina il visitatore si è collegato alla vostra.
Molti motori di ricerca offrono spazio web gratuito, visitatene alcuni e troverete ciò che fa per voi. Il problema di uno spazio web gratuito è che fornisce poco spazio (in megabyte), quindi non aspettatevi di fare siti con una quantità di materiale enorme in questo modo, anche se per le foto (che occupano enormemente più spazio delle pagine HTML) si può usare un trucchetto. Su Internet infatti si trovano servizi gratuiti che permettono di pubblicare vostre foto, se caricate le foto in questo modo, risparmierete spazio destinato al sito e magari riuscirete ad inserire qualche file audio o video che diversamente avreste dovuto omettere per mancanza di spazio. Chiaramente dovete scoprire da chi vi dà lo spazio per le foto qual' è l' indirizzo esatto per accedervi. Il problema è che a volte non è possibile accedere direttamente ad una singola foto, ma ad interi album. Quindi se ci sono immagini che vorreste inserire singolarmente all' interno di una pagina, bisognerebbe caricarle nello spazio del proprio sito, se invece volete fare un collegamento ad un album di foto, non ci sono problemi.
Dopo aver trovato il fornitore di spazio web gratuito, dovete registrarvi, quindi otterrete un nome utente e una password coi quali potrete accedere per poter creare e modificare il vostro sito (attenzione: scegliete bene il vostro nome utente perché di solito diverrà parte dell' indirizzo del vostro sito e di solito non potrà più essere modificato). Nota: se possedete già un servizio e-mail gratuito offerto da un motore di ricerca, probabilmente è gia incluso anche uno spazio web gratuito; andate sul motore di ricerca in questione e cercate se ci sono da scegliere servizi gratuiti, se c'è anche spazio web gratuito, provate ad accedere con gli stessi nome utente e password che usate per la posta elettronica.
Quando avete i vostri nome utente e password, accedete allo spazio web e selezionate qualcosa come file manager o upload. Troverete una pagina che permette di selezionare files presenti sul vostro computer per poter inviarli alla cartella del proprio sito (se avete creato sul vostro computer un sito con più sottocartelle, dovete creare queste cartelle su Internet (sempre dalla stessa schermata per caricare i files) e poi caricare i files nelle cartelle giuste, comunque in questa guida non ho spiegato come creare un sito con sottocartelle). Una volta caricati i files, il sito diverrà visibile scrivendo il suo indirizzo, fornitovi da chi dà lo spazio web, nella barra degli indirizzi di un browser, a volte bisognerà aspettare qualche ora perché ciò accada. Per fare in modo che il sito venga visto anche senza conoscerne l' indirizzo esatto, trovate qualche indicazione sopra.
Una volta caricati i files, potrete creare il contatore ed il guestbook. Per farlo dovete accedere al vostro servizio di spazio web e poi cercare appunto rispettivamente contatore e guestbook; scegliendo uno o l' altro verrete indirizzati a pagine dove si possono impostare le caratteristiche degli stessi, dopodichè vi verra fornito un pezzetto di codice HTML (separatamente per il contatore ed il guestbook) da inserire nelle vostre pagine nei punti dove volete che compaiano il contatore ed il guestbook. Una possibilità è modificare i files HTML dove volete che compaiano e poi caricarli di nuovo, un' altra è modificare le pagine online; di solito chi offre il servizio di spazio web permette anche di modificare (addirittura creare) le pagine online, quindi potete copiarci direttamente i codici ottenuti.

Nota: l' elenco di comandi e attributi riportato in questa sezione non ha l' intenzione di essere esaustivo, ci sono molti altri comandi e attributi, ma questi sono quasi sicuramente tutti quelli che ho usato per creare questo intero sito.

Mappa del sito