Il computer e le prof
Consiglietti pratici per sopravvivere
a scuola
Seconda parte
testo e immagini: Paola Musarra
Version française: 
al sommario
Il linguaggio HTML
Allora, dove eravamo rimaste?
Ah, sì: avevate fatto clic prima su Visualizza e poi su HTML. E si era aperta una finestra, quella del Blocco note di Windows ®, con dentro il codice utilizzato per creare la pagina Web che stavate guardando.
Ma come è fatto questo benedetto codice?
Semplice: è fatto di testo e di tag.
Nei tag ci sono le istruzioni, tra "forchette": il segno minore (<) e maggiore (>). Cercateli sulla vostra tastiera.
Queste istruzioni servono per "dar forma" al testo. Quando il file viene lanciato, il vostro browser interpreta le istruzioni, le traduce, e visualizza il documento sotto forma di pagina Web.
Ehilà, che succede? Troppa roba tecnica? Forza, venite fuori da lì!
Tranquille: vi basterà imparare solo dieci (sì, ho detto "dieci") di queste istruzioni per creare una paginetta semplice, ma completa, con una o più immagini, con uno o più link verso una o più pagine... insomma, una cellula, diciamo un embrione di ipertesto, piccolino, ma già pronto a lanciarsi nel cyberspazio!
Siete incredule?
Seguitemi!
Prendete un dischetto ben pulito e inseritelo in a:.
Create una cartella in a: e battezzatela "atelier" :
Utilizzando il Blocco note di Windows ®, create una pagina vuota in "atelier" e chiamatela "code.htm" (mi raccomando, senza virgolette...).
Di solito le pagine Web hanno l'estensione ".htm" oppure ".html". Scegliamo ".htm", così, risparmieremo una lettera!
Alla fine di questa operazione, la situazione sul vostro dischetto sarà questa:
Arrivate a questo punto farete clic sul file "code" (ma no, topolini, non adesso! Dopo, con calma! Bisogna sapere sempre dove siamo e che cosa stiamo facendo... per ora dovete solo seguire il filo del discorso e "capire"). Quando si aprirà la finestra del Blocco note, vi copierete queste istruzioni:
Guardiamoli un po' da vicino, questi tag, che costituiscono la struttura portante, o meglio, il "contenitore" (ancora vuoto) della vostra futura pagina Web.
- <html> ... </html>
Il tag <html> apre la pagina Web e ne costituisce l'indispensabile introduzione; il tag di chiusura </html> è identico, ma comporta una barra obliqua dopo il segno "inferiore a".
Due osservazioni importanti:
- non tutte le istruzioni comportano un tag di chiusura con la barra obliqua;
- le istruzioni sono annidate, "la prima aperta si chiude per ultima". Non fate quella faccia, pensate alle parentesi in matematica, o meglio, ai petali di una rosa: il codice HTML è come un fiore...
Fra <html> e </html> sono contenuti tutti gli altri tag. Potete aggiungerne altri, moltiplicare le istruzioni, però... attenzione agli annidamenti!.
- <head> ... </head>
Dopo il tag introduttivo (<html>), c'è una specie di intestazione ("header"), che racchiude informazioni generali sul file (utili per segnalarlo ai motori di ricerca). Tra queste, c'è
- <title> ... </title>
che contiene il "titolo" della pagina. Questo titolo verrà visualizzato nella linea blu in alto (la barra del titolo) del vostro browser, quando verrà lanciato il file.
- <body ... > ... </body>
Questa è la parte più importante della vostra pagina Web. Fra questi due tag sono contenute tutte le informazioni che il browser visualizzerà nella sua finestra: titoli, testi, immagini, link...
Avete notato i puntini di sospensione all'interno del tag di apertura? Ciò significa che questa istruzione può essere completata con altri parametri, che riguardano i colori o l'immagine dello sfondo, il colore dei link... Per difetto, (cioè, se non date nessuna indicazione), lo sfondo è bianco.
- <font ... > ... </font>
Questo tag definisce il colore, la dimensione e il tipo (Arial, Helvetica...) dei caratteri del testo. Deve essere completato con altri attributi ("color", "size", "face"), che dovranno a loro volta essere definiti. Per difetto, i caratteri saranno neri, Times New Roman.
- <h1> ... </h1>
Per definire la grandezza delle intestazioni, utilizzate questo tag e le sue possibilità: ce ne sono sei, da <h1> (la più grande) a <h6> (la più piccola). Potrete sbizzarrirvi con titoli e sottotitoli dei vari paragrafi...
- <p ...> ... </p>
E a proposito di paragrafi... Questa istruzione determina l'inizio e la fine di un paragrafo con l'inserimento di una riga vuota. E' un tag molto importante perché vi offre la possibilità di "alleggerire" la presentazione di un testo: vi prego, andate spesso a capo (a ragion veduta, naturalmente), evitate per quanto è possibile quei tremendi blocchi di testo così difficili da digerire...
Il tag <p ...> può essere completato con attributi di allineamento del paragrafo (a destra, a sinistra, al centro, giustificato). Per difetto, i paragrafi vengono allineati a sinistra.
- <img src="..." .... >
Questo tag (che non ha il corrispondente tag di chiusura) vi permette di aggiungere un'immagine al vostro file. Naturalmente dovrete completarlo con il nome esatto dell'immagine, completo di estensione (bisogna sempre dire al computer che cosa deve andare a prendere, e dove: lui poveraccio non lo sa!). Si possono anche aggiungere una serie di parametri che riguardano la grandezza dell'immagine, il suo allineamento e la distanza nei confronti del testo o delle altre immagini che la circondano.
C'è anche un'altra possibilità, l'attributo "alt" che permette di inserire fra virgolette delle informazioni supplementari sull'immagine oppure un commento o una piccola descrizione dell'immagine per coloro che non la vedono.
I due formati di immagini più usati sul Web hanno l'estensione ".gif" o ".jpg".
Il formato GIF (Graphics Interchange Format), limitato a 256 colori, può essere reso in parte trasparente e permette di creare piccole animazioni.
Il formato JPEG (Joint Photographic Expert Group) può rappresentare fino a 16,7 millions di colori, ma non consente la creazione di animazioni.
- <br>
Questa istruzione (senza tag di chiusura) introduce nel testo una interruzione di riga. Il browser ignora il tasto "Invio", quindi, quando scrivete il vostro testo nel Blocco note, non dimenticate di inserire <br> per andare a capo.
- <a href=" ... . ... "> ... </a>
Con il suo tag di chiusura ( non lo dimenticate!), è l'istruzione base dell'ipertesto: Vi consente di attivare un link verso un altro file HTML o verso un'immagine (in entrambi i casi dovrete specificare nome e percorso). Tutto quello che verrà inserito tra il tag di apertura e il tag di chiusura sarà "cliccabile" e attiverà il link.
Potete anche creare un link verso una messaggeria elettronica; in questo caso l'utente potrà inviare direttamente una e-mail all'indirizzo indicato.
Ecco fatto! Ve lo avevo promesso: solo dieci istruzioni.
Potrete salvare il file "code.htm", che vi servirà come modello.
E' solo un contenitore vuoto, come abbiamo detto. Per riempirlo, provate a completarlo con queste istruzioni, che ho proposto ai professori di francese al convegno di Fiuggi, di cui vi ho parlato la volta scorsa (coraggio, un po' di francese non vi farà male!):
Facciamo qualche osservazione:
- per semplificare, i colori sono stati indicati con il loro nome in inglese. Possono anche essere definiti con sei cifre esadecimali che rappresentano le proporzioni dei tre colori luminosi di base (rosso, verde, blu). Chi si interessa di colori noterà che in questo modello il verde sostituisce il giallo dei colori fondamentali (rosso, giallo, blu);
- il link "page suivante" ("pagina successiva") va verso un file "page2.htm" che dovrete creare voi;
- l'immagine "chat.jpg"" è un acquerello di Paola Rosati e rappresenta un gatto. Ringrazio Paola che mi ha permesso di utilizzarlo (bisogna sempre chiedere il permesso prima di visualizzare immagini che non abbiamo creato noi) per rallegrare questa vostra prima pagina Web, questa piccola "home page" ("page d'accueil").
Potrete registrare questa pagina nella vostra cartella "atelier". Sceglierete l'opzione "Salva con nome" a partire dal menu "File" e battezzerete la vostra pagina : "accueil.htm" (senza virgolette!!).
Ah, dimenticavo: dovete procurarvi il gatto... eccolo qua!
Potrete usare il tasto destro del mouse per catturarlo (pensate un po', un "mouse" che cattura un gatto...) e rinchiuderlo nella cartella "atelier".
E' tutto!
Se avrete lavorato bene, facendo clic su "accueil" otterrete questa pagina video:
A partire da quel momento, toccherà a voi giocare ("il faut remplir cette page" significa "bisogna riempire questa pagina"): visualizzate il codice, cambiate i titoli, i colori, il nome delle pagine, procuratevi altre immagini, cambiate i parametri, scrivete testi, poesie, lettere d'amore... Se volete dei consigli, scrivetemi!
Cosa? Come dite? I contenuti???
Beh, questa è un'altra storia: ne riparleremo...
Biblio
Un solo testo recente, molto visivo, con un CD che crea una classe virtuale:
- Robert Fuller, Virtual Classroom. Impara il linguaggio HTML passo per passo, McGraw-Hill, Milano 2002, 30 euro.
Un buon investimento.
