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 necessarioper 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 coilibri e offra, anche
ai semplicidilettanti, 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.
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 DILISTE).
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 suun PC MS-DOS, nel quale non sono ammesse estensioni di file diquattro lettere), sono dei semplici FILE DI TESTO (cioè contenentisolo caratteri ASCII) che, per questo motivo sono facili dagestire, nel senso della trasmissione telematica. Essi peròdifferiscono da testi destinati ad essere semplicemente letti,perché contengono delle ISTRUZIONI PROGRAMMATICHE, inframezzate altesto che dovrà essere realmente letto, scritte secondo unlinguaggio che è, appunto, l'HTML (=HyperText Markup Language). Il browser con cui il cybersurfista esplora il WWW (Mosaic,Netscape, I.Explorer...) è fatto apposta per interpretare leistruzioni presenti nel file html e per trasformarle nellecaratteristiche grafiche (caratteri, colori, impaginazioni,immagini, links...) di ciò che appare sullo schermo. Pertantoredigere un file html è un piccolo lavoro di programmazione. Facciamo subito un esempio per non abusare troppo dellapazienza di coloro che non sono dei guru informatici. La seguentefrase: <B>cipolle rosse</B> verrà rappresentata sullo schermo dauna scritta in grassetto (= cipolle rosse), perché il browser realizza ingrassetto 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 essereaccoppiate, 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 istruzionisono accoppiate, ce ne sono una minoranza che non necessitano diuna 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 elementol'abbiamo già visto: BR è il nome o elemento dell'istruzione di "acapo". Gli attributi e i valori li vedremo meglio in seguito, perora ci limitiamo ad un esempio: <IMG SRC="image.gif"> significache, a quel punto, deve comparire un'immagine che è il fileimage.gif . IMG (che significa immagine) è il nome o elemento, SRC(che significa sorgente) è l'attributo, "image.gif" è il valoredell'attributo.
Al browser bisogna sempre dire dove comincia e dove finisce ilfile 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 browserdove iniziano e dove finiscono queste parti. Si fa così: <HEAD></HEAD> e <BODY> </BODY> . Pertanto un file html contienesempre, obbligatoriamente queste istruzioni:
</HTML>
Cosa c'è nella testa del file? Normalmente ci si mette iltitolo della pagina, che comparirà in quella striscia in altonello schermo, al di sopra dei vari menù e tasti cliccabili. Comesi 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à
cisarebbero altre funzioni come ISINDEX, BASE, LINK, META... che
oranon considereremo. Non sono necessarie per il livello medio
che cibasta raggiungere.
E nel body? Nel body c'è tutto il resto... Ora lo vedremo.
Se vogliamo aggiungere nel file html un commento che ci serveda promemoria, ma che non vogliamo che sia visualizzato sulloschermo, dobbiamo sostituirlo ai puntini in questa istruzione<!...> . Esempio: <!le prossime tre righe sono state aggiunte damio cugino> è una frase che non sarà visualizzata a schermo dalbrowser. Pertanto le istruzioni che operano sui caratteri sonosostanzialmente queste:
<EM> </EM> oppure <i> </i> che generano il corsivoinclinato (italic),
<TT> </TT> che generano un carattere monospazio tipo"macchina da scrivere".
<BLINK> </BLINK> che rendono lascritta compresa.
<FONT COLOR="999900"> </FONT>
che determinano la particolarecolorazione 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 capolasciando 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 orizzontaledi separazione fra un paragrafo e l'altro,
<CENTER> </CENTER> istruzione
che centra la scritta nellapagina:
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 daintestazione (generalmente adatti ai titoli), in neretto, evariabili da una dimensione molto grande (n=1) a una dimensionepiccola (n=6). Esempio:
<BLOCKQUOTE> </BLOCKQUOTE> che genera un paragrafo rientratoverso destra (rientro a sinistra),
<PRE> </PRE> (preformatted) che riproduce il testoesattamente 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 unpallino 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 primaprepararlo e salvarlo in formato GIF o JPG, e poi aggiungere unattributo all'istruzione <LI>, e cioè:
<OL> <LI>... <LI>... <LI>... ... </OL> (ordered list) chegenera la lista con gli opportuni rientri a sinistra (come launordered list), con la differenza che <LI> non crea un pallinonero ma un numero progressivo (tanti quanti sono gli elementidella lista).
<DL> </DL> (definition list) che genera una listaparticolare in cui ogni elemento della lista compare cometitoletto, seguito da una definizione (un discorsetto più lungoulteriormente rientrato a sinistra),
<DT> </DT> racchiude gli elementi della definition list,
<DD> indica l'inizio della definizione, cioè del piccoloparagrafo che spiega nei dettagli in cosa consiste l'elementoprincipale della lista.
Esempio:
<DT>Secondo termine</DT>
<DT>Terzo termine</DT>
........
</DL>
Che è visualizzato nel seguente modo:
Eccoci al dunque: i links! Come tutti sanno i links sono
lostrumento che fa del Web una potentissima biblioteca mondiale
incui 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 laverità questa istruzione, scritta così come l'abbiamo
presentata,non produce nessun effetto, infatti ha
obbligatoriamente bisognodi un attributo e di un valore per l'attributo.
L'attributocomunemente può essere HREF o NAME.
Vediamone il significato:
Il link che abbiamo visto conduce ad una pagina diversa daquella di partenza, magari terribilmente lontana nel mondo, però,volendo, si possono costruire dei link interni, ovverosia dei linkche portano ad un punto voluto nella stessa pagina in cui citroviamo. Occorrono ben quattro istruzioni: due accoppiate (conl'attributo HREF), in cui compare il simbolo #, per poter creareil link di partenza, e due accoppiate (con l'attributo NAME), incui non compare il simbolo #, per definire il punto didestinazione. Vediamo come sono fatte:
Ma come fa il browser a trovarlo? Lo trova perché all'iniziodel capitolo 1 c'è l'istruzione così composta:
Adesso, addentrandoci nelle virtù dell'html, possiamo dire chesi 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 paginain 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 diposta:
Finora abbiamo parlato di solo testo. Ora, finalmente, eccoarrivare le immagini. Chiariamo subito un concetto importante: leimmagini non si trovano nel file html, si trovano a parte e sonodei file indipendenti di tipo GIF o JPG. Il file html contienesolo una istruzione che indica al browser di visualizzare lafigura sullo schermo. Ora tutti capiscono subito che, per poteretrovare 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 altroattributo: ALIGN con, rispettivamente, i seguenti valori: bottom,middle, top.
<IMG SRC=image.jpg ALIGN=middle> Fotografia di ... immaginecon scritta a fianco a metà altezza
<IMG SRC=image.jpg ALIGN=top> Fotografia di ... immaginecon scritta a fianco in alto
Le immagini possono essere links ipertestuali? Certamente. Siosservi questa istruzione accoppiata:
E le immagini che costituiscono uno sfondo per la interapagina web? A proposito di questo bisogna dire che lo sfondo,generalmente, è costituito da un disegnino piccolo piccolo cheviene automaticamente ripetuto molte volte, a tutto schermo, dalbrowser. L'istruzione deve essere messa al posto della scritta<BODY>, all'inizio del corpo dell file html, ed è fatta così:
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
<tdPRIMA CASELLA</td
inizio e fine di una casella
<tdSECONDA CASELLA</td
inizio e fine di una casella
</tr
fine di una riga
<tr
inizio di una riga
<tdTERZA CASELLA</td
inizio e fine di una casella
<tdQUARTA CASELLA</td
inizio e fine di una casella
</tr
fine di una riga
</table
fine della tabella
</CENTER
all'interno della tabella si può disporre nel modo preferito epiù fantasioso qualsiasi elemento della pagina: testo, disegni, links,altre tabelle, come si può notare qui sotto:
 |
 |
|
|
In questo caso la tabella è senza bordo, perché
nella istruzioneiniziale è stata omessa la parola border.
Naturalmente si possono mettere tutte le righe che si vuole,
bastasemplicemente 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
Alcuni caratteri devono essere scritti, nel
file html,mediante simboli particolari. Per esempio, com'è
facile intuire,il segno < viene normalmente interpretato dal
browser comeinizio 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 &lt .
Ci sono poi altri caratteri che devono essere scritti in unmodo
particolare, affinché tutti i browser siano in grado
divisualizzarli, per esempio le lettere accentate, come la voce
delverbo essere " è " che si scrive così: &egrave;
con tanto dipunto e virgola in fondo. Vediamo una lista di
caratteri particolari:
Questo breve manualetto finisce qui. Ci sono
innumerevolialtre questioni che rimangono da spiegare, come i
moduli, lecornici (frames), le animazioni, le mappe cliccabili...
Ma noicrediamo che, in alcuni casi, voler fare troppo significa
noncombinare niente e, poiché questo manualetto è destinato
asoggetti non professionisti, dilettanti, semplici profani
chedesiderano non essere completamente tali (e ne hanno
perfettamentediritto), ci è sembrato opportuno limitarci a
queste nozioni basedella programmazione html.
Una cosa è certa: una persona di buon gusto e con
grandefantasia, anche con queste semplici nozioni, può costruire
dellepagine a dir poco meravigliose. Buon lavoro dunque!