Una iniziativa DADANET.
IL MANUALE ITALIANO PER IL PRINCIPIANTE HTML
Dedicato a tutti coloro che affrontano il linguaggio HTML per la prima volta
Credo che molti saluteranno con grande entusiasmo l'iniziativa di un semplice corso di programmazione HTML che risponda, non ad esigenze professionistiche avanzate, ma alle esigenze amatoriali del semplice dilettante.
Purtroppo molti non conoscono il linguaggio HTML necessario
per redigere tali pagine e, comunque, non hanno molta intenzione di affrontare il pesante studio di uno dei complicati e costosi manuali che si trovano in libreria.
In questa sede noi vorremmo risolvere il problema, offrendo una semplicissima guida che sia competitiva coi
libri e offra, anche ai semplici
dilettanti, la soddisfazione di creare bellissime pagine Web.
Il corso che proponiamo ha un carattere di base e da esso sono escluse le funzioni più avanzate del linguaggio HTML, perché pensiamo che non rientrino nell'interesse dei non professionisti.
David Donnini, autore di questo manuale, realizza a distanza pagine Web per chiunque lo desideri. Ti invita per questo a scrivergli:
mailto:donnini@dada.it
e a visitare la sua home page:
http://www.dada.it/donnini
1 - COS'E' UN FILE HTML.
2 - COSA SONO LE ISTRUZIONI HTML.
3 - LA STRUTTURA DI UN FILE HTML E LE ISTRUZIONI STRUTTURALI.
4 - LE ISTRUZIONI CHE OPERANO SUI CARATTERI.
5 - LE ISTRUZIONI CHE OPERANO SUL LAYOUT DI PAGINA (IMPAGINAZIONE).
6 - LE OPERAZIONI PIU' AVANZATE SUL LAYOUT DI PAGINA (CREAZIONE DI
LISTE).
7 - LE "ANCORE" O LINKS IPERTESTUALI.
8 - LE IMMAGINI ON LINE.
9 - LE TABELLE.
10 - I CARATTERI SPECIALI.
11 - CONCLUSIONI.
Il file "html" (semplicemente "htm" per quelli che operano su
un PC MS-DOS, nel quale non sono ammesse estensioni di file di
quattro lettere), sono dei semplici FILE DI TESTO (cioè contenenti
solo caratteri ASCII) che, per questo motivo sono facili da
gestire, nel senso della trasmissione telematica. Essi però
differiscono da testi destinati ad essere semplicemente letti,
perché contengono delle ISTRUZIONI PROGRAMMATICHE, inframezzate al
testo che dovrà essere realmente letto, scritte secondo un
linguaggio che è, appunto, l'HTML (=HyperText Markup Language).
Il browser con cui il cybersurfista esplora il WWW (Mosaic,
Netscape, I.Explorer...) è fatto apposta per interpretare le
istruzioni presenti nel file html e per trasformarle nelle
caratteristiche grafiche (caratteri, colori, impaginazioni,
immagini, links...) di ciò che appare sullo schermo. Pertanto
redigere un file html è un piccolo lavoro di programmazione.
Facciamo subito un esempio per non abusare troppo della
pazienza di coloro che non sono dei guru informatici. La seguente
frase: <B>cipolle rosse</B> verrà rappresentata sullo schermo da
una scritta in grassetto (= cipolle rosse), perché il browser realizza in
grassetto tutto ciò che sta fra <B> e </B>.
Torna all'INDICE
Con questo abbiamo già capito alcune cose: le istruzioni
(tags) sono sempre contenute fra < e > , e possono essere
accoppiate, ovverosia sono costituite da un'istruzione iniziale
(<B> = da qui in poi grassetto!) e da un'istruzione finale (</B> =
da qui in poi basta grassetto!). In realtà non tutte le istruzioni
sono accoppiate, ce ne sono una minoranza che non necessitano di
una fine; per esempio l'"a capo" che si indica così: <BR> .
Le istruzioni possono contenere NOMI o ELEMENTI, ATTRIBUTI,
VALORI. Che significa? Per quanto riguarda il nome o elemento
l'abbiamo già visto: BR è il nome o elemento dell'istruzione di "a
capo". Gli attributi e i valori li vedremo meglio in seguito, per
ora ci limitiamo ad un esempio: <IMG SRC="image.gif"> significa
che, a quel punto, deve comparire un'immagine che è il file
image.gif . IMG (che significa immagine) è il nome o elemento, SRC
(che significa sorgente) è l'attributo, "image.gif" è il valore
dell'attributo.
Torna all'INDICE
Al browser bisogna sempre dire dove comincia e dove finisce il
file html, e questo si ottiene con le semplici istruzioni: <HTML>
e </HTML> . Inoltre il file html contiene due parti. la testa
(head) e il corpo (body) e, naturalmente, bisogna dire al browser
dove iniziano e dove finiscono queste parti. Si fa così: <HEAD>
</HEAD> e <BODY> </BODY> . Pertanto un file html contiene
sempre, obbligatoriamente queste istruzioni:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Cosa c'è nella testa del file? Normalmente ci si mette il
titolo della pagina, che comparirà in quella striscia in alto
nello schermo, al di sopra dei vari menù e tasti cliccabili. Come
si fa? Semplice, si usano i seguenti tags: <TITLE> </TITLE> .
Esempio:
IL MANUALE ITALIANO PER IL PRINCIPIANTE HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Che altro ci può essere nella testa? Beh, a dire la verità ci
sarebbero altre funzioni come ISINDEX, BASE, LINK, META... che ora
non considereremo. Non sono necessarie per il livello medio che ci
basta raggiungere.
E nel body? Nel body c'è tutto il resto... Ora lo vedremo.
Torna all'INDICE
Se vogliamo aggiungere nel file html un commento che ci serve
da promemoria, ma che non vogliamo che sia visualizzato sullo
schermo, dobbiamo sostituirlo ai puntini in questa istruzione
<!...> . Esempio: <!le prossime tre righe sono state aggiunte da
mio cugino> è una frase che non sarà visualizzata a schermo dal
browser. Pertanto le istruzioni che operano sui caratteri sono
sostanzialmente queste:
<STRONG> </STRONG> oppure <B> </B> che generano il
grassetto,
<EM> </EM> oppure <i> </i> che generano il corsivo
inclinato (italic),
<TT> </TT> che generano un carattere monospazio tipo
"macchina da scrivere".
<BLINK> </BLINK> che rendono la
scritta compresa.
<FONT COLOR="999900"> </FONT> che determinano la particolare
colorazione dei caratteri compresi nell'istruzione (il colore è
stabilito dalla sigla numerica o letterale fra virgolette).
Esempi di colori:
- 00FFFF,
- FF0000,
- 00FF00,
- FFF000,
- 0000FF,
- FFFFFF,
- FF00FF,
- FFFF00,
- ABCDEF,
- 000000,
- 990000,
- 009900,
- 000099,
- 999900,
- 990099,
- 009999.
Torna all'INDICE
<BR> istruzione non accoppiata che manda a capo (altrimenti
il browser riproduce il testo scritto tutto di fila, senza mai
andare a capo).
<P> ( </P> ) istruzione che, se non accoppiata, manda a capo
lasciando lo spazio di una riga vuota (come a voler separare un paragrafo), invece, se accoppiata,
delimita un paragrafo a sé stante,
<HR> istruzione non accoppiata che crea una barra orizzontale
di separazione fra un paragrafo e l'altro,
<CENTER> </CENTER> istruzione che centra la scritta nella
pagina:
come un titolo,
<Hn> </Hn> dove n può assumere i valori 1, 2, 3, 4, 5, 6
(es.: <H3> </H3>), istruzione che crea dei caratteri da
intestazione (generalmente adatti ai titoli), in neretto, e
variabili da una dimensione molto grande (n=1) a una dimensione
piccola (n=6). Esempio:
Questo è H1
Questo è H2
Questo è H3
Questo è H4
Questo è H5
Questo è H6
<BLOCKQUOTE> </BLOCKQUOTE> che genera un paragrafo rientrato
verso destra (rientro a sinistra),
<PRE> </PRE> (preformatted) che riproduce il testo
esattamente con la stessa formattazione che ha nel file html (cioè
con le stesse andate a capo, gli stessi spazi, gli stessi rientri,
ecc...); serve per semplici tabelle, effetti grafici particolari,
disegnini in caratteri ASCII...
Torna all'INDICE
Volendo creare delle liste con rientri, asterischi, numeri,
definizioni, ecc... si possono usare le seguenti istruzioni:
<UL> </UL> (unordered list) che racchiude le voci della
lista facendole rientrare a sinistra,
<LI> che fa precedere ogni voce della "unordered list" da un
pallino o quadratino nero, Inoltre manda automaticamente a capo,
Esempio, con una lista nidificata dentro un'altra lista:
Lista di Scuole:
<UL>
<LI> Scuole Medie inferiori,
<LI> Scuole Medie Superiori:
<UL>
- Licei Classici
- Licei Scientifici,
- Istituti Tecnici,
- Istituti Professionali,
- Istituti Magistrali.
</UL>
<LI> Facoltà Universitarie.
</UL>
Che è visualizzato, in realtà, nel seguente modo:
Lista di Scuole:
- Scuole Medie inferiori,
- Scuole Medie Superiori:
- Licei Classici
- Licei Scientifici,
- Istituti Tecnici,
- Istituti Professionali,
- Istituti Magistrali.
- Facoltà Universitarie.
Attenzione! Volendo, in tutte le liste il pallino nero può
essere sostituito con un disegnino a piacere, basta prima
prepararlo e salvarlo in formato GIF o JPG, e poi aggiungere un
attributo all'istruzione <LI>, e cioè:
<LI SRC=image.gif> in cui image.gif è l'immagine da
visualizzare, sistemata nella stessa directory in cui si trova il
file html.
<OL> <LI>... <LI>... <LI>... ... </OL> (ordered list) che
genera la lista con gli opportuni rientri a sinistra (come la
unordered list), con la differenza che <LI> non crea un pallino
nero ma un numero progressivo (tanti quanti sono gli elementi
della lista).
<DL> </DL> (definition list) che genera una lista
particolare in cui ogni elemento della lista compare come
titoletto, seguito da una definizione (un discorsetto più lungo
ulteriormente rientrato a sinistra),
<DT> </DT> racchiude gli elementi della definition list,
<DD> indica l'inizio della definizione, cioè del piccolo
paragrafo che spiega nei dettagli in cosa consiste l'elemento
principale della lista.
Esempio:
<DL>
<DT>Primo termine</DT>
<DD>Qui si spiega cos'è il primo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla...
<DT>Secondo termine</DT>
<DD>Qui si spiega cos'è il secondo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla...
<DT>Terzo termine</DT>
<DD>Qui si spiega cos'è il terzo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla...
........
</DL>
Che è visualizzato nel seguente modo:
- Primo termine
- Qui si spiega cos'è il primo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla...
- Secondo termine
- Qui si spiega cos'è il secondo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla...
- Terzo termine
- Qui si spiega cos'è il terzo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla...
........
Torna all'INDICE
Eccoci al dunque: i links! Come tutti sanno i links sono lo
strumento che fa del Web una potentissima biblioteca mondiale in
cui tutti i lettori possono saltare, al semplice suono di un
"click", dall'America, all'Europa, all'Australia, ecc...
I links sono dovuti ad una istruzione html che si chiama
"anchor" ed è rappresentata da questi simboli: <A>> </A> . Per la
verità questa istruzione, scritta così come l'abbiamo presentata,
non produce nessun effetto, infatti ha obbligatoriamente bisogno
di un attributo e di un valore per l'attributo. L'attributo
comunemente può essere HREF o NAME. Vediamone il significato:
<A HREF="http://www.dada.it/donnini/history.htm">Le origini storiche del
Cristianesimo</A> E' l'istruzione completa in grado di
funzionare. La frase Le origini storiche del Cristianesimo è
quella che comparirà sul browser, generalmente in colore blu e
sottolineata, su di essa la freccia del mouse si trasforma in una
manina e, cliccando, viene chiamata la pagina '
http://www.dada.it/donnini/ ' che, compatibilmente con le velocità
di trasmissione dei dati in rete in quel preciso momento, arriverà
subito e comparirà visualizzata sullo schermo. Questo è un link,
non è difficile.
Il link che abbiamo visto conduce ad una pagina diversa da
quella di partenza, magari terribilmente lontana nel mondo, però,
volendo, si possono costruire dei link interni, ovverosia dei link
che portano ad un punto voluto nella stessa pagina in cui ci
troviamo. Occorrono ben quattro istruzioni: due accoppiate (con
l'attributo HREF), in cui compare il simbolo #, per poter creare
il link di partenza, e due accoppiate (con l'attributo NAME), in
cui non compare il simbolo #, per definire il punto di
destinazione. Vediamo come sono fatte:
<A HREF="#punto1">Capitolo I</A> E' l'istruzione accoppiata
che fa comparire sullo schermo un link con scritto ' Capitolo I ',
cliccando sul quale si può raggiungere il vero e proprio capitolo
1.
Ma come fa il browser a trovarlo? Lo trova perché all'inizio
del capitolo 1 c'è l'istruzione così composta:
<A NAME="punto1">CAPITOLO I</A> Che fa comparire sullo
schermo la scritta CAPITOLO I, la quale, se è un titolo in
evidenza al centro della pagina, potrebbe essere combinata con
altre istruzioni come: <center><H2><A NAME="punto1">CAPITOLO
I</A></H2></center> . In questa pagina, sono links di questo tipo quelli in cui c'è scritto : "Torna all'INDICE".
Adesso, addentrandoci nelle virtù dell'html, possiamo dire che
si può anche creare un link esterno (cioè verso un'altra pagina),
nel quale però non si vuole arrivare alla semplice intestazione,
ma si vuole subito raggiungere un punto particolare della pagina
in questione, in cui c'è scritto qualcosa che interessa. Il link,
contenente il simbolo #, sarà fatto così:
<A HREF="nome.del.server/percorso/nomefile.html#puntox>Bla,
bla, bla...</A> In cui ' nome.del.server/percorso/nomefile.html '
sono tutte le specificazioni per ottenere la pagina desiderata e '
puntox ' è il punto da raggiungere. Ma, naturalmente, in quella
pagina, da qualche parte, ci dovrà essere per forza l'istruzione
di destinazione <A NAME="puntox">Bla, bla, bla...</A> altrimenti,
come farà il programma ad individuare il punto?
Un particolare tipo di link è quello che apre una finestra di
posta:
<A HREF="mailto:donnini@dada.it">David Donnini</A> che
serve, appunto, per spedire eventuali messaggi alla persona
indicata nell'argomento dell'istruzione (David Donnini).
Torna all'INDICE
Finora abbiamo parlato di solo testo. Ora, finalmente, ecco
arrivare le immagini. Chiariamo subito un concetto importante: le
immagini non si trovano nel file html, si trovano a parte e sono
dei file indipendenti di tipo GIF o JPG. Il file html contiene
solo una istruzione che indica al browser di visualizzare la
figura sullo schermo. Ora tutti capiscono subito che, per potere
trovare questa figurina, il browser deve sapere dove si trova.
<IMG SRC=image.jpg> E' l'istruzione (singola) necessaria per
far comparire la figurina image.jpg . IMG significa immagine e SRC
significa sorgente (source). Attenzione! L'immagine deve trovarsi
nella stessa directory in cui si trova il file html, altrimenti
come la può trovare il browser? Se l'immagine si trova in un'altra
directory l'istruzione deve contenere l'informazione su tutto il
percorso necessario: <IMG SRC=/percorso/image.jpg> .
Se vogliamo l'immagine al centro della pagina scriveremo:
<center><IMG SRC=/percorso/image.jpg></center> .
Se vogliamo una scritta (per esempio: "Fotografia di ...") a fianco dell'immagine, dobbiamo aggiungere un altro
attributo: ALIGN con, rispettivamente, i seguenti valori: bottom,
middle, top.
<IMG SRC=image.jpg ALIGN=bottom> Fotografia di ... immagine
con scritta a fianco in basso
<IMG SRC=image.jpg ALIGN=middle> Fotografia di ... immagine
con scritta a fianco a metà altezza
<IMG SRC=image.jpg ALIGN=top> Fotografia di ... immagine
con scritta a fianco in alto
Le immagini possono essere links ipertestuali? Certamente. Si
osservi questa istruzione accoppiata:
<A HREF="nome.del.server/percorso/file.html"><IMG
SRC="image.gif"></A> Si tratta, appunto, di un link effettuato
non con una stringa di testo, ma con una figurina.
E le immagini che costituiscono uno sfondo per la intera
pagina web? A proposito di questo bisogna dire che lo sfondo,
generalmente, è costituito da un disegnino piccolo piccolo che
viene automaticamente ripetuto molte volte, a tutto schermo, dal
browser. L'istruzione deve essere messa al posto della scritta
<BODY>, all'inizio del corpo dell file html, ed è fatta così:
<BODY background=backgr.gif> che prende il file backgr.gif e
lo moltiplica a tutto schermo, creando lo sfondo desiderato.
Torna all'INDICE
Si osservi la seguente tabella:
| PRIMA CASELLA |
SECONDA CASELLA |
| TERZA CASELLA |
QUARTA CASELLA |
essa è stata realizzata scrivendo queste istruzioni:
| Istruzioni | Significato |
| <CENTER> | |
| <table border> | inizio della tabella, con bordo visibile |
| <tr> | inizio di una riga |
| <td>PRIMA CASELLA</td> | inizio e fine di una casella |
| <td>SECONDA CASELLA</td> | inizio e fine di una casella |
| </tr> | fine di una riga |
| <tr> | inizio di una riga |
| <td>TERZA CASELLA</td> | inizio e fine di una casella |
| <td>QUARTA CASELLA</td> | inizio e fine di una casella |
| </tr> | fine di una riga |
| </table> | fine della tabella |
| </CENTER> | |
In questo caso la tabella è senza bordo, perché nella istruzione
iniziale è stata omessa la parola border.
Naturalmente si possono mettere tutte le righe che si vuole, basta
semplicemente aggiungere, ogni volta, l'istruzione <tr>.
Si può anche creare una tabella che genera delle colonne di
larghezza diversa, stabilendo fin da principio quale sarà
la percentuale di ciascuna colonna rispetto alla larghezza della pagina:
| più stretta |
più larga |
| più stretta |
più larga |
che è stata realizzata con le seguenti istruzioni:
<table border width=100%>
<tr>
<td width=20%> più stretta </td>
<td width=80%> più larga </td>
</tr>
<tr>
<td width=20%> più stretta </td>
<td width=80%> più larga </td>
</tr>
</table>
Torna all'INDICE
Alcuni caratteri devono essere scritti, nel file html,
mediante simboli particolari. Per esempio, com'è facile intuire,
il segno < viene normalmente interpretato dal browser come
inizio di una istruzione e, pertanto, non visualizzato a schermo.
Come si fa se si vuole visualizzare proprio questo simbolo?
Occorre scriverlo in questo modo: < , oppure < .
Ci sono poi altri caratteri che devono essere scritti in un
modo particolare, affinché tutti i browser siano in grado di
visualizzarli, per esempio le lettere accentate, come la voce del
verbo essere " è " che si scrive così: è con tanto di
punto e virgola in fondo.
Vediamo una lista di caratteri particolari:
< si rende con: < oppure <
> si rende con: > oppure >
& si rende con: & oppure &
ß si rende con: ß oppure ß
à si rende con: à oppure à
è si rende con: è oppure è
é si rende con: é oppure é
ì si rende con: ì oppure ì
ò si rende con: ò oppure ò
ù si rende con: ù oppure ù
Torna all'INDICE
Questo breve manualetto finisce qui. Ci sono innumerevoli
altre questioni che rimangono da spiegare, come i moduli, le
cornici (frames), le animazioni, le mappe cliccabili... Ma noi
crediamo che, in alcuni casi, voler fare troppo significa non
combinare niente e, poiché questo manualetto è destinato a
soggetti non professionisti, dilettanti, semplici profani che
desiderano non essere completamente tali (e ne hanno perfettamente
diritto), ci è sembrato opportuno limitarci a queste nozioni base
della programmazione html.
Una cosa è certa: una persona di buon gusto e con grande
fantasia, anche con queste semplici nozioni, può costruire delle
pagine a dir poco meravigliose. Buon lavoro dunque!
Torna all'INDICE
Realizzato mese di Agosto 1996.
David Donnini, autore di questo manuale, realizza pagine Web per Ditte, Compagnie, Aziende...
Naturalmente, grazie a Internet, non importa essere vicini!
Per contatti:
mailto:donnini@dada.it