Conoscere HTML
1 Il linguaggio HTML
Abbiamo visto come le informazioni che si trovano in Internet siano memorizzate in pagine web. Queste sono raggiungibili quando se ne conosce l’indirizzo o tramite col-legamenti ipertestuali. Le pagine possono essere scritte utilizzando differenti linguag-gi. Il primo a essere stato utilizzato, il più diffuso e anche il più semplice è HTML (HyperText Markup Language). Si tratta di un linguaggio che permette la scrittura di pa-gine per il WWW interpretabili dai principali browser presenti sul mercato (ad esem-pio Internet Explorer o Mozilla Firefox).
Un file HTML non è nient’altro che un file di testo in cui sono contenute delle istruzio-ni dette tag. Il browser legge le istruzioistruzio-ni e modifica le caratteristiche grafiche della pagina che appare sullo schermo, cambiando ad esempio colore allo sfondo, creando una lista, visualizzando un’immagine. Nel file vi saranno quindi parti di testo che an-dranno visualizzate e alcune istruzioni che indicano come andrà visualizzato il testo. Ad esempio, le istruzioni seguenti:
<CENTER>
Questo è un titolo </CENTER>
andranno interpretate come: La frase “Questo è un titolo” andrà centrata nella riga e il risultato sarà:
Questo è un titolo
I componenti di una pagina web in HTML sono detti elementi. Tra gli elementi HTML vi sono: titoli di diverso livello, frasi in grassetto o corsivo, immagini, paragrafi comu-ni e link ipertestuali ad altre risorse.
2 I tag HTML
I tag HTML sono racchiusi tra un segno di minore < e un segno di maggiore >. Un elemento HTML è formato da uno o due tag. Quando, per definire un elemento, sono necessari due tag e il contenuto informativo (ad esempio il testo da visualizzare) è racchiuso tra di essi (come se fossero parentesi), i due tag vengono detti rispettiva-mente tag di apertura e tag di chiusura dell’elemento.
Il tag di apertura e quello di chiusura contengono la stessa parola chiave, ma il tag di chiusura le antepone un carattere slash (/ ).
Nel tag di apertura possono essere specificati attributi (con la sintassi
nome_attribu-to=“valore_attributo”) che servono a fornire informazioni aggiuntive sulla natura
del-l’elemento, su stili di rappresentazione o su collegamenti ad altri oggetti.
Quando un elemento contiene solo un tag, questo sarà in tutto e per tutto un tag di apertura (eventualmente dotato di attributi) e l’elemento viene allora detto vuoto, os-sia privo di contenuto.
3 Un documento HTML
Un documento HTML comincia sempre con il tag <HTML> e finisce con il tag </HTML>. Il file HTML è diviso in due parti: la prima di intestazione, la seconda con il contenuto vero e proprio.
Elementi HTML
particolari
In un documento HTML si possono in-serire elementi con funzionalità parti-colari quali:
form per richiedere informazioni al-l’utente;
tabelle per organizzare in celle (an-che con strutture complesse) lo spazio della pagina;
oggetti vari, come applet Java o al-tri componenti eseguibili da appo-siti plug-in;
immagini grafiche interattive (dette mappe);
frame per suddividere la pagina in finestre autonomamente scorribili.
Blocco note
Per creare una pagina web in HTML devi utilizzare il programma Blocco note incluso tra gli accessori di Windows.
Estensione
dei file HTML
Il file da salvare deve avere l’esten-sione HTM o HTML.
<HTML> <HEAD> ... ... </HEAD> <BODY> ... ... </BODY> </HTML>
HEAD (TESTA)
Contiene informazioni descrittive generali come il titolo del documento e meta co-mandi. È la parte compresa tra i TAG <HEAD> e </HEAD>.
BODY (CORPO)
Contiene tutto ciò che il browser visualizzerà. È la parte compresa tra i TAG <BODY> e </BODY>.
All’interno della TESTA è molto importante posizionare il TITOLO, che comparirà nel-la barra del titolo del browser. È nel-la parte compresa tra i TAG <TITLE> e </TITLE>.
4 La tua prima pagina web
Crea una pagina tramite Blocco note. Inserisci solo il testo “Prima pagina” e il titolo. Il codice HTML potrà essere il seguente:
<HTML> <HEAD> <TITLE> Sito di prova </TITLE> </HEAD> <BODY> Prima Pagina </BODY> </HTML>
Salva il file con estensione HTM. Se lo apri nel browser, il risultato sarà il seguente:
Aprire i file HTML
Per aprire un file HTML basta un dop-pio clic sulla sua icona da Windows.
Test 1
Prova a creare una pagina HTML con un titolo diverso.
Test 2
Prova a creare una pagina HTML che contenga una frase diversa.
Formattare
un documento HTML
1 Il linguaggio HTML
Esiste una serie di comandi utilizzabili per modificare la modalità di visualizzazione del testo all’interno della pagina, operando prevalentemente sulle dimensioni, i for-mati e i colori.
<H1></H1> ….<H6></H6>
Serve a stabilire la dimensione del carattere; il numero associato alla lettera H indica il livello di dimensione (1 è il più grande, 6 è il più piccolo).
<FONT SIZE=n></FONT> (n = 1,2,3,4,5,6,7)
Indica la dimensione del testo, n indica il livello di dimensione (1 è il più piccolo, 7 è il più grande).
<B></B>
Formatta il testo in grassetto.
<I></I>
Formatta il testo in corsivo (italic).
<U></U>
Formatta il testo in sottolineato.
<CENTER></CENTER>
Centra nella pagina il testo e le eventuali immagini.
<BLINK></BLINK>
Fa lampeggiare il testo.
<FONT COLOR=#xxyyzz></FONT>
Indica il colore da applicare ai caratteri (viene utilizzato il codice RGB esadecimale).
<BR>
Porta a capo il testo che segue (tag non accoppiato).
<P></P>
Porta a capo lasciando lo spazio di una riga vuota.
<BODY BGCOLOR=“#xxyyzz”>
Permette di colorare lo sfondo della pagina (viene utilizzato il codice RGB alfanumeri-co).
<BODY TEXT=“#xxyyzz”>
Permette di colorare il testo (viene utilizzato il codice RGB alfanumerico).
2 La tua seconda pagina web
Ora creiamo una pagina HTML per mostrare come si usano tutti i tag che abbiamo ap-pena descritto. Crea una pagina tramite l’editor Blocco note.Dovrai creare una pagina con il titolo (“Sito di prova”). Sotto il titolo è inserita una semplice scritta (“Prima Pagina”) centrata, in grassetto e sottolineata. Seguono poi due righe nelle quali com-paiono caratteri di dimensioni, colori, tipi differenti.
I colori
Ecco una tabella con la notazione di alcuni dei principali colori e la loro nu-merazione esadecimale. È comunque possibile utilizzare, per i principali co-lori, anche la parola chiave corrispon-dente.
Il numero di colori che l’utente ha a disposizione dipende dalla scheda vi-deo del computer. Oggi si va da una ri-soluzione minima di 256 colori a sva-riati milioni di colori.
Colore Parola Notazione
chiave esadecimale arancione orange #FFA500
blu blue #0000FF
bianco white #FFFFFF
giallo yellow #FFFF00
grigio gray #808080
marrone brown #A52A2A
nero black #000000
rosso red #FF0000
verde green #008000
viola violet #EE82EE
Estensione
dei file HTML
Il file da salvare deve avere l’esten-sione HTM o HTML.
3 Centrare il titolo
Cominciamo centrando il titolo e formattandolo in neretto sottolineato. Aggiungiamo anche un commento che descriva meglio che cosa stiamo facendo. Il codice HTML potrà essere il seguente:
<HTML> <HEAD> <TITLE> Sito di prova </TITLE> </HEAD> <BODY> <CENTER> <font size=”5”> <b><u> Seconda Pagina </b></u></font> </CENTER> </BODY> </HTML>
Salva il file con estensione HTM. Aprendolo nel browser vedrai quanto mostrato nella figura.
4 Modificare i caratteri
Adesso scriviamo delle parole con dimensioni di caratteri differenti. Il codice HTML potrà essere il seguente:
<HTML> <HEAD> <TITLE> Sito di prova </TITLE> </HEAD> <BODY> <!-- centriamo il titolo --> <CENTER> <font size=”5”> <b><u> Seconda Pagina </b></u></font> </CENTER>
<!-- Scrivo parole che hanno caratteri di dimensione diversa considerandole come titoli --> <H6>Sto</H6> <H5>imparando</H5> <H4>qualcosa di</H4> <H3>molto</H3> <H2>molto</H2> <H1><font color=”BLUE”>divertente</H1></font>
<!-- Ora scrivo una riga con parole che hanno caratteri di dimensione diver-sa -->
<font size=”1”>Sto</font> <font size=”2”>imparando</font> <font size=”3”>qualcosa di</font> <font size=”4”>molto</font> <font size=”5”>molto</font>
<font size=”6” color=”BLUE”>divertente</font> </BODY>
</HTML>
Aprire
un file HTML
Per far aprire dal browser un file HTML basta fare doppio clic sull’ico-na del file in Windows.
Test 1
Prova a creare una pagina HTML con un titolo e i tuoi pensieri su Internet.
Test 2
Scrivi alcuni pensieri su questo corso utilizzando diversi titoli.
Pagine web multimediali
ed elenchi
1 Colorare lo sfondo
Per fare in modo che lo sfondo sia colorato, basta definire il BODY della pagina speci-ficando un colore di sfondo. Ricorda che per indicare il colore puoi usare la codifica esadecimale oppure il nome corrispondente in inglese.
Il codice HTML potrà essere il seguente: <HTML> <HEAD> <TITLE> Sito di prova </TITLE> </HEAD>
<BODY BGCOLOR = “orange”>
<!-- Centriamo il titolo e tutte le scritte --> <CENTER> <font size=”5”> <b><u> Terza Pagina </b></u></font> <br>
ABBIAMO COLORATO LO SFONDO DELLA PAGINA </CENTER>
</BODY> </HTML>
Copyright
Quando si utilizza un’immagine da in-serire su Internet, occorre assicurarsi che non vi siano problemi di copyrigth (diritti di autore).
2 Pagine con immagini
Il linguaggio HTML permette la gestione delle immagini all’interno della pagina. Nel seguito, con l’indicazione “immagine.gif” si intende l’indirizzo del file che contiene l’immagine. Bisogna fare attenzione al formato dell’immagine, poiché alcuni formati non sono supportati da tutti i browser. I formati più diffusi sono GIF e JPG.
<IMG SRC=“immagine.gif”>
Permette di inserire un’immagine nella pagina.
<IMG SRC=“immagine.gif” ALIGN=top|bottom|middle>
Permette di inserire un’immagine nella pagina, disposta secondo il parametro ALIGN (in alto, in basso o al centro).
Permette di visualizzare il valore di ALT se l’immagine non viene visualizzata o quan-do si passa sull’immagine con il mouse.
<BODY BACKGROUND=“immagine.gif”></BODY>
Permette di utilizzare un’immagine come sfondo di tutta la pagina.
3 Inserire immagini
Creiamo ora una pagina HTML in cui inseriamo un’immagine al centro con un legge-ro bordo. Inseriamo anche un’immagine come sfondo.
Crea una pagina tramite l’editor Blocco note, con il titolo (“Pagina con sfondo”), nella quale è definita un’immagine come sfondo. Al centro del video è visualizzata un’im-magine che ha un leggero bordo (border="1"). Per l’imun’im-magine sono state definite le dimensioni in altezza e in larghezza. È necessario avere le due immagini disponibili nella stessa directory in cui si salva il sorgente.
Ecco il codice HTML: <html>
<head>
<title>Pagina con sfondo</title> </head>
<!-- Inserisco uno sfondo --> <body background="Backgrnd.gif">
<p align="center"><font size="5"><b><u>sito di prova</u></b> </≤font></p>
<p><font size="2">Sto </font><font size="3">imparando</font> <font size="4">qualcosa di</font>
<font color="#FF0000" size="5">divertente</font></p> <!-- Inserisco un'immagine impostandone le dimensioni --> <p align="center">
<img src="immagine.gif" width="173" height="144" border="1" > </p>
</body> </html>
Salva il file con estensione HTM. Se lo apri nel browser, il risultato sarà il seguente:
Dimensioni
delle immagini
Non inserire mai immagini che siano troppo pesanti, cioè che occupino troppi byte, perché richiedono parec-chio tempo per il trasferimento. Un’immagine che occupi circa 100 Kbyte è già di buona qualità per la pubblicazione su un sito.
Immagini
come sfondo
L’immagine usata come sfondo viene trattata ciclicamente, nel senso che, se è più piccola dello spazio disponi-bile, viene ripetuta fino a riempire completamente lo sfondo.
Altezza
e profondità
delle immagini
Anche se questi parametri non sono obbligatori, è comunque bene inserirli perché in questo modo il browser pre-dispone lo spazio necessario a ospi-tare l’immagine rendendo più veloce il trasferimento della pagina.
Puoi verificare il risultato del tuo lavoro scaricando dal sito del libro il file
4 Link ipertestuali
I link permettono il collegamento di una pagina con un’altra di cui è indicato l’indiriz-zo (URL). Questo può corrispondere a una pagina WWW o a un file presente nello stesso computer.
“<A HREF=“http://www.prova.it/pagina.htm”>Collegamento</A>
Permette di inserire un collegamento con la pagina di cui viene indicato l’indirizzo, e questo verrà attivato premendo la parola indicata come “Collegamento”.
<A HREF=“http://www.prova.it/pagina.htm #xxx”>Collegamento</A>
Permette di inserire un collegamento (ancora esterna) con l’etichetta presente nella pagina di cui viene indicato l’indirizzo, e questo verrà attivato premendo la parola in-dicata come “Collegamento”.
<A HREF=“#xxx”>Collegamento</A>
Permette di inserire un collegamento (ancora interna) con l’etichetta presente nella stessa pagina attualmente visualizzata, e questo verrà attivato premendo la parola in-dicata come “Collegamento”.
<A HREF=“http://www.prova.it/pagina.htm”><IMG SRC=“immagine.gif”></A>
In questo caso il collegamento viene attivato con un clic sull’immagine “immagine.gif”.
<A NAME=“xxx”></A>
Definisce un’etichetta a cui i collegamenti specificati in HREF possono fare riferimento.
5 Una pagina con dei link
Crea ora una pagina HTML in cui inserirai un link a un sito esterno e un link al fondo della pagina stessa.
Per il collegamento al fondo della pagina devi creare un’ancora a cui darai un nome (in questo caso “fondo”).Il riferimento sarà a questo nome.
Per il collegamento a un sito esterno basta indicare come riferimento l’URL del sito stesso.
La pagina da creare tramite l’editor Blocco note è la seguente: <html>
<head>
<title>Pagina con link interni ed esterni </title> </head>
<body>
<p align=”center”><font size=”10”>USO I COLLEGAMENTI</font></p> <ul>
<li><A HREF=”#fondo”>Vado subito al fondo della pagina </A></li>
<li><A HREF=”http://www.iacobelli.eu/”>Collegamento a un sito </A></li> </ul>
<img src=”funtoys.jpg” style=”width: 420px; height: 480px”> <br>
<A NAME=”fondo”></A> FONDO PAGINA
<p align=”left”><font size=”5”>
<img src=”funtoys2.jpg” style=”width: 420px; height: 480px”> </body>
</html>
Puoi scaricare dal sito del libro il file COLLEGAMENTI.HTMe provare ad aprirlo.
Verifica dei link
Prima di inserire un link, occorre verifi-care sempre che esista e che non vi siano problemi ad accedervi.
6 Utilizzare le liste
Esiste la possibilità di creare degli elenchi (liste) numerati e non, anche su più livelli.
<UL></UL>
Racchiude le voci della lista (non numerata) facendole rientrare a sinistra.
<LI></LI>
Fa precedere ogni voce della lista da un pallino o da un numero. Se non è indicato il fi-ne tag </LI>della voce della lista, viefi-ne inviato mandando automaticamente a capo il testo.
<OL></OL>
Simile a <UL>, ma gli elementi <LI> interni generano un numero progressivo.
<DL></DL>
Racchiude gli elementi di una Definition List.
<DD>
Indica l’inizio di una definizione, cioè un piccolo paragrafo che spiega il significato del-l’elemento della lista.
Una pagina con una lista
Crea ora una pagina HTML in cui inserirai una lista con l’elenco dei regali che deside-ri per il tuo compleanno. Utilizza l’editor Blocco note. La pagina ha il titolo (“Per il mio compleanno”) e come colore di sfondo il giallo chiaro (identificato con il codice RGB esadecimale "#FFFFC0"). Inserisci una lista ordinata per elencare i regali desiderati: per ogni elemento della lista definisci il colore e la dimensione del carattere.
Ecco il codice HTML: <head>
<title>Per il mio compleanno</title> </head>
<!-- Imposto un colore di sfondo --> <body bgcolor=”#FFFFC0”>
<p align=”center”><font size=”5”><b><u>Sito di prova</u></b></font></p> <p>Cosa desidero per il mio <u>compleanno</u></p>
<!-- Imposto la lista ordinata --> <ul>
<li>un libro di Ken Follet</li> <li>un CD di Vasco Rossi</li> <li>una chitarra</li>
</ul>
</body></html>
Salva il file con estensione HTM. Se lo apri nel browser, il risultato sarà il seguente:
Liste numerate
e non
L’unica differenza nell’usare una lista numerata oppure non numerata è nel tag iniziale: <UL> (lista non numera-ta) oppure <OL> (lista numeranumera-ta).
7 Lista numerata
Se vuoi che la lista sia numerata basterà sostituire il tag <UL> con il tag <OL>. Prova a modificare l’esempio precedente inserendo una lista numerata. Per rendere originale la pagina, modifica anche il tipo di carattere. Puoi esaminare un esempio di pagina con lista numerata scaricando dal sito del libro il file COMPLEANNO2.HTM.
Test 1
Prova a rifare l’esercizio del “Sito di prova” inserendo immagini diverse in posizioni diverse.
Test 2
Crea una pagina HTML con l’immagine della tua scuola e il link al suo sito.
Test 3
Crea una pagina HTML con l’elenco dei tuoi compagni di classe.
Test 4
Crea una pagina HTML con l’elenco numerato dei tuoi amici.
