Una iniziativa DADANET.
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.
e a visitare la sua home page:
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<gtcipolle 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>.
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.
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>
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:
</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.
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:
<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:
<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:
<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:
<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...
Volendo creare delle liste con rientri, asterischi, numeri, definizioni, ecc... si possono usare le seguenti istruzioni:
<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:
<LI> Facoltà Universitarie.
</UL>
Che è visualizzato, in realtà, nel seguente modo:
Lista di Scuole:
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è:
<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:
<DT<gtSecondo termine</DT>
<DT<gtTerzo termine</DT>
........
</DL>
Che è visualizzato nel seguente modo:
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:
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:
Ma come fa il browser a trovarlo? Lo trova perché all'inizio del capitolo 1 c'è l'istruzione così composta:
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ì:
Un particolare tipo di link è quello che apre una finestra di posta:
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.
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=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:
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:
|
|
|
|
|
|
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>
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: <#60 , oppure
<amplt .
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ì: <ampegrave; con tanto di punto e virgola
in fondo. Vediamo una lista di caratteri particolari:
< si rende con: <#60 oppure <amplt
> si rende con: <#62 oppure <ampgt
< si rende con: <#38 oppure <ampamp
ß si rende con: <#223 oppure <ampszlig;
à si rende con: <#224 oppure <ampagrave;
è si rende con: <#232 oppure <ampegrave;
é si rende con: <#233 oppure <ampeacute;
ì si rende con: <#236 oppure <ampigrave;
ò si rende con: <#242 oppure <ampograve;
ù si rende con: <#249 oppure <ampugrave;
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!