Sei sulla pagina 1di 113

Il linguaggio HTML

Lezione 1

Cosa il linguaggio HTML


HTML l'acronimo di HyperText Markup Language ("Linguaggio di
contrassegno per gli Ipertesti") e non un linguaggio di
programmazione.
Si tratta di un linguaggio di contrassegno (o 'di marcatura'), che
permette di indicare come disporre gli elementi all'interno di una
pagina: le indicazioni vengono date attraverso degli appositi
marcatori, detti "tag".
Ci significa che l'HTML non ha meccanismi che consentono di
prendere delle decisioni ("in questa situazione fai questo, in
quest'altra fai quest'altro"), e non in grado di compiere delle
iterazioni ("ripeti questa cosa, finch non succede questo"), n ha
altri costrutti propri della programmazione.
Il linguaggio HTML, pur essendo dotato di una sua sintassi, non
presuppone la logica ferrea e inappuntabile dei linguaggi di
programmazione: se si dimentica di chiudere un tag, non verranno
prodotti dei messaggi di errore; se non rispettate la sintassi
probabilmente non otterrete la visualizzazione della pagina che
desiderate, ma nient'altro.

Cosa il linguaggio HTML


Esistono diversi software specializzati nella
creazione di pagine HTML: i cosiddetti editor
HTML. In particolare si possono distintuire due
tipi di editor HTML:
- gli EDITOR TESTUALI;
- gli EDITOR cosiddetti WYSIWYG (acronimo di
What You See Is What You Get, ovvero ci che
vedi ci che ottieni)

Gli editor testuali


Editor testuali
Si tratta di programmi che propongono modifiche dirette sul
codice HTML puro con possibilit di preview del risultato.
Per facilitare la scrittura del codice mettono a
disposizione comandi preconfezionati attivabili con
semplici click. L'utilit maggiore di questi strumenti la
padronanza del codice HTML puro che riescono a
comunicare agli utilizzatori. Il difetto maggiore
nell'apprendimento pi difficile rispetto agli editor
WYSIWYG.

Gli editor WYSIWYG


Editor WYSIWYG
Questi editor (un esempio concreto il MS Front Page) non
visualizzano il codice HTML ma esclusivamente gli oggetti, le
immagini ed il testo. In questo modo lo sviluppatore non si trova a
lavorare su codice HTML ma sulla pagina cos come verr
visualizzata dal browser: spostando oggetti con il semplice
trascinamento del mouse, sfruttando layout predefiniti ecc.
Il vantaggio di questo tipo di editor evidente: lo sforzo di
comprensione delle specifiche HTML ridotto al minimo e il tempo
di apprendimento brevissimo.
Questo tipo di editor, tuttavia, non d la possibilit di comprendere
l'HTML e personalizzarne l'uso e, in presenza di errori che l'editor
non riesce a risolvere, di non riuscire ad andare oltre ci che il
programma prevede.

Gli editor HTML


In ogni caso possibile scrivere nuovo
codice HTML o modificare del codice
esistente tramite lutilizzo di un
qualsiasi editor di testo, compreso il
Blocco Note (o Notepad).
Per comodit utilizzeremo leditor
avanzato Notepad++ che permette di
evidenziare i tag HTML e di semplificare
lattivit di redazione del codice.

Il linguaggio HTML I TAG


Per essere visualizzati su Internet, i documenti vengono
salvati in formato testo e contengono i tag necessari ad
informare il browser (Firefox, Opera, Internet Explorer o
altri) sulla visualizzazione della stessa. In altri termini un
documento contenente testo, salvato in formato .htm
senza alcun tag HTML viene comunque visualizzato dal
browser, ma privo di qualsiasi formattazione:
senza ritorni a capo, paragrafi, testo centrato, grassetto,
corsivo ecc.
Lo scopo dell'HTML quello di fornire, attraverso comandi
chiamati TAG , una formattazione al documento, oltre
all'inserimento di immagini ed altri elementi multimediali
(filmati, applet ecc.). Il lavoro che uno sviluppatore Web
produce all'interno di un documento HTML indirizzato a
fornire tutte le informazioni necessarie al browser per
interpretare correttamente la pagina

Il linguaggio HTML
Struttura di un tag

Abbiamo detto che all'interno di ogni pagina presente


una serie di marcatori (i TAG), a cui viene affidata la
visualizzazione e che hanno differenti nomi a seconda
della loro funzione.
I tag contenuti in un documento HTML sono contenuti
allinterno dei simboli < (minore) e > (maggiore).
La maggior parte di tali tag necessitano di apertura (che
si realizza con <NOMETAG>) e chiusura (che si realizza
con </NOMETAG>).
Esistono delle eccezioni a tale regola che verranno
illustrate in seguito.
<TAG attributi>contenuto</TAG>

Il linguaggio HTML
Struttura di un tag

Ad alcuni tag poi possibile assegnare degli


attributi che vanno inseriti allinterno del tag di
apertura subito dopo il nome del tag. La
struttura base di un tag dunque la seguente:
<NOMETAG attributo1 attributo2 ecc> contenuto </NOMETAG>

Il linguaggio HTML
I commenti

Anche in HTML possibile inserire dei


"commenti" nei punti pi significativi, per
rendere il nostro codice pi leggibile : tali
commenti non vengono visualizzati dal
browser.
La sintassi dei commenti la seguente:
<! testo del commento -->

Le pagine HTML
Le parti che la compongono

Un documento HTML si divide in due parti fondamentali:


- l'intestazione
- il corpo del documento.
Lintestazione contiene una serie di informazioni necessarie al
browser per una corretta interpretazione del documento, ma non
visualizzate all'interno dello stesso. Elementi forniti dall'intestazione
sono: il titolo della pagina, i termini chiave per i motori di ricerca, il
tipo di HTML supportato.
Il corpo del documento contiene invece tutti gli elementi della
pagina: il testo, le immagini, le applet Java, il codice ASP e
quant'altro viene materialmente visualizzato dal browser.

Le pagine HTML

Indicazioni preliminari Il tag <HTML>

Tutti gli elementi ed il contenuto di un


documento HTML sono compresi all'interno dei
marcatori
<HTML>
</HTML>

(tag di apertura)
(tag di chiusura)

che hanno il compito di aprire e chiudere il file.


Questi tag indicano al browser che il documento
marcato in HTML.

Le pagine HTML

I tag relativi allintestazione del documento Il tag HEAD


I tag
<HEAD>
</HEAD>
sono posti immediatamente dopo l'apertura del tag
<HTML> e racchiudono l'intestazione vera e propria del
documento.
Tutte le informazioni necessarie al browser, al
Webserver ed ai motori di ricerca verranno racchiusi tra
tali tag, compresa lintestazione della pagina.
Si tratta del primo elemento letto dal browser.

Le pagine HTML

I tag relativi allintestazione del documento Il tag TITLE


L'elemento
<TITLE>
</TITLE>
viene perlopi sempre utilizzato all'interno del tag
<HEAD>, in quanto fornisce il titolo alla pagina.
Tale titolo viene solitamente visualizzato dai browser nella
barra del titolo.
Es.

Le pagine HTML

I tag relativi allintestazione del documento Il tag TITLE

Il contenuto riportato tra i tag <TITLE></TITLE>


anche utilizzato da alcuni motori di ricerca per
indicizzare la pagina e trovare parole chiave.
Per questo bene fornire nel TITLE una
descrizione dettagliata ma sintetica della pagina,
con tutte le parole chiave che i motori possono
indicizzare.
La sintassi per il tag TITLE la seguente:
<TITLE> Titolo della pagina </TITLE>

Le pagine HTML

I tag relativi al corpo del documento Il tag BODY

L'elemento <BODY> posto in posizione


immediatamente successiva alla chiusura del
tag </HEAD> e comunque all'interno degli
elementi <HTML></HTML>; ha un tag di
apertura e uno di chiusura, ed all'interno di esso
si sviluppa il corpo del documento.
La sintassi corretta per l'elemento <BODY> la
seguente:
<BODY>
Contenuto del documento
</BODY>

Le pagine HTML

I tag relativi al corpo del documento Il tag BODY

Tra i tag <BODY> e </BODY>


andranno inseriti tutti i tag che ci
permetteranno di formattare il testo,
inserire paragrafi ed oggetti multimediali
che verranno visualizzati nella pagina
HTML dal browser

Le pagine HTML
Riepilogo

Riepilogando quanto visto finora la struttura base di una


pagina HTML risulta essere questa:
<HTML>
<HEAD>
<TITLE> Titolo della pagina </TITLE>
</HEAD>
<BODY>
Corpo del documento
</BODY>
</HTML>

Le pagine HTML
Precisazione

E appena il caso di sottolineare che i tag HTML


sono CASE UNSENSITIVE, cio sono
riconosciuti dal browser sia che siano scritti in
maiuscolo che in minuscolo.
Nota: per una maggiore leggibilit del codice comunque buona
abitudine scrivere il tutto in minuscolo.

Le pagine HTML
Gli attributi del tag BODY

E possibile utilizzare il tag BODY per


stabilire alcune propriet della pagina.
Questo risultato si ottiene tramite lutilizzo
degli attributi di tale tag. In particolare
utilizzeremo i seguenti:
- BGCOLOR
- BACKGROUND
- TEXT
- LINK

Le pagine HTML

Gli attributi del tag BODY Lattributo BGCOLOR

Lattributo BGCOLOR viene utilizzato per


attribuire un colore di sfondo della nostra
pagina HTML.
Esempio:
<body bgcolor=blue>
Tale tag ci permetter di ottenere una
pagina web con sfondo blu.

Le pagine HTML

Gli attributi del tag BODY Lattributo BGCOLOR

Molti colori sono disponibili utilizzando le corrispondenti


parole chiave in inglese.
Tuttavia non consigliabile inserire la notazione del colore
facendo riferimento a questo tipo di sintassi.
preferibile in molti casi utilizzare la corrispondente
codifica esadecimale del colore, che ci permette tra le
altre cose di scegliere anche tonalit di colore non
standard. Con la notazione esadecimale il nostro
esempio diventa:
<body bgcolor="#0000FF">

Le pagine HTML

Gli attributi del tag BODY Lattributo BGCOLOR

La corrispondenza tra i colori, le loro parole chiave


ed il codice esadecimale esemplificato nella
seguente tabella:

Le pagine HTML

Gli attributi del tag BODY Lattributo BACKGROUND

Lattributo BACKGROUND viene utilizzato


per inserire unimmagine di sfondo nella
pagina HTML. La sintassi di tale attributo
prevede lassegnamento allo stesso del
percorso dellimmagine da utilizzare.
Esempio:
<body background=nomeimmagine.est>

Le pagine HTML

Gli attributi del tag BODY Lattributo BACKGROUND

Il nome dellimmagine da utilizzare va inserito


come percorso relativo dellimmagine rispetto al
documento HTML.
Se ad esempio volessimo utilizzare limmagine
che si chiama IMMAGINE.GIF e questa
immagine si trova nella stessa cartella del
documento HTML interessato la sintassi del
nostro tag sar:
<body background=immagine.gif>

Le pagine HTML

Gli attributi del tag BODY Lattributo BACKGROUND

Se invece la stessa immagine si trovasse in una


sottocartella IMMAGINI la sintassi del nostro
tag sar:
<body background=/immagini/immagine.gif>

Le pagine HTML

Gli attributi del tag BODY Lattributo TEXT

Il tag TEXT ci permette di assegnare un colore per il testo


di tutta la pagina. Questo colore verr utilizzato in tutta la
pagina ad esclusione di quel testo per il quale non si
prevede espressamente un colore specifico.
Esempio :
<body text="red">
Oppure
<body text="#ffffff">
Anche per il testo possibile utilizzare sia la parola chiave
che il codice esadecimale del colore.

Le pagine HTML

Gli attributi del tag BODY Lattributo LINK

Sappiamo tutti che con il termine LINK si


indicano i collegamenti tra una pagina
HTML e unaltre.
I link testuali (cio la porzione di testo alla
quale assegnata la funzione di
collegamento) possono assumere diversi
stati, e cio:
- Collegamento normale;
- Collegamento visitato;
- Collegamento attivo.

Le pagine HTML

Gli attributi del tag BODY Lattributo LINK

Il collegamento normale (link)


Normalmente il link quando si trova "a
riposo" viene evidenziato in qualche
maniera allinterno della pagina HTML, in
modo che sia facile per lutente
individuarlo.
NellHTML tradizionale il link sempre
sottolineato.
Di default i link sono colorati in blu

Le pagine HTML

Gli attributi del tag BODY Lattributo LINK

Il collegamento visitato (visited)


Un link visitato, quando lURL della
pagina compare nella cronologia
dellutente.
Di default i link visitati sono di color viola

Le pagine HTML

Gli attributi del tag BODY Lattributo LINK

Il collegamento attivo (active)


Il collegamento attivo nel momento in cui il link
stato cliccato e sta avvenendo il passaggio da
una pagina allaltra.
Con Internet Explorer possibile vedere anche
una linea tratteggiata attorno al collegamento
attivo.
Un ulteriore condizione in cui un link si rileva
"attivo" quando si utilizza il tasto destro del
mouse su di lui. Insomma un link attivo
quando "ha il focus".

Le pagine HTML

Gli attributi del tag BODY Lattributo LINK


I link secondo le impostazioni predefinite sono blu. Per cambiare il colore dei link
occorre aggiungere al tag BODY lattributo:
LINK=colore"
Per cambiare colore ai link visitati (di default viola):
VLINK=colore
Per cambiare colore ai link attivi:
ALINK=colore"
La sintassi completa del tag body per impostare i link dunque:

<body link=colore" alink=" colore " vlink=" colore ">

Le pagine HTML
Il tag BODY - Riepilogo

Abbiamo visto che il tag BODY apre e chiude il


corpo della pagina HTML e nel tag di
apertura possibile impostare alcuni attributi
che influiranno sulla visualizzazione di tutta la
pagina, come il colore di sfondo o il colore
del testo o dei link.
Un esempio di come pu presentarsi un
comune tag BODY il seguente:
<body bgcolor=blue background=/images/sfondo.jpg
text=yellow link="red" alink="yellow" vlink="green">

Il linguaggio HTML

Lezione 2

Le pagine HTML
I TAG di layout della pagina

Allinterno dei tag BODY possibile gi inserire del testo che verr
immediatamente visualizzato dal browser secondo la formattazione
impostata nel tag stesso o, in mancanza, secondo quanto impostato nel
sistema.
Risulta per pi pratico racchiudere il testo in appositi tag a seconda
della funzione che il testo sta svolgendo. La nostra pagina risulter pi
semplice da leggere, quando dovremo modificarla, e inoltre potremo
ottenere la formattazione che desideriamo.
I principali tag-contenitori da utilizzare per impostare il layout della
pagina sono:
HX
(dove X un numero compreso tra 1 e 6 che indica la
grandezza del carattere);
P
(individua i paragrafi);
DIV
(individua dei blocchi di testo);
BR
(andare a capo)
Vediamoli singolarmente in dettaglio.

Le pagine HTML

I TAG di layout della pagina Il tag H(X)

Il tag HX usato per i titoli (H sta per


linglese HEADING, ovvero, appunto, titolo).
Le grandezze che possibile assegnare al
titolo sono sei. Dall<h1>, che il titolo pi
importante, si va via via degradando fino all
<h6>.
Il tag <hx> (sia esso h1 o h6) risulta
formattato in grassetto e lascia una riga
vuota prima e dopo di s.

Le pagine HTML

I TAG di layout della pagina Il tag H(X)


La sintassi del tag H il seguente:
<HX> Testo da visualizzare come titolo </HX>
dove ovviamente X un numero compreso tra 1 e 6.

Esempio:
Il codice HTML in basso generer, una volta
visualizzato nel browser i titoli che si vedono a destra

Le pagine HTML

I TAG di layout della pagina Il tag P

Il paragrafo lunit di base entro cui


suddividere un testo. Il tag <P> lascia una
riga vuota prima della sua apertura e dopo la
sua chiusura.
La sintassi del tag P :
<p>
Contenuto del paragrafo
</p>

Le pagine HTML

I TAG di layout della pagina Il tag DIV

Il tag DIV permette di realizzare allinterno della


pagina un blocco di testo simile al paragrafo che
differisce da questo per il fatto che non lascia spazi
prima e dopo la sua apertura.
La sintassi del tag DIV :
<div>
Contenuto del blocco di testo
</div>

Le pagine HTML
I TAG di allineamento del testo

Tutti i "tag-contenitori" che abbiamo appena


visto permettono di allineare il testo
utilizzando semplicemente lattributo align.
Tale attributo pu assumere i seguenti valori:
LEFT
allineamento a SINISTRA
RIGHT allineamento a DESTRA
CENTER allineamento al centro del testo
JUSTIFY allineamento giustificato

Le pagine HTML
I TAG di allineamento del testo

Esempio di utilizzo dellattributo ALIGN


<p align=left> Ciao </p>
<h2 align=center> Ciao </h2>
<div align=right> Ciao </div>

Le pagine HTML

I TAG di layout della pagina Il tag BR

Il tag BR permette di andare a capo in qualunque


punto del testo esso venga posizionato.
Il tag BR il primo esempio di tag che non
necessita di chiusura. Basta inserire <br> nel
codice HTML nel punto in cui si vuole portare a
capo il testo.
Riga di testo numero 1<br>
Riga di testo numero 2

Le pagine HTML

I TAG di layout della pagina Il tag PRE

Il tag PRE serve a forzare il browser a


visualizzare una porzione di testo
esattamente come viene scritta nel file
sorgente, con gli stessi spazi e gli stessi
ritorni a capo che si trovano nel file sorgente.
Per ottenere questo risultato basta inserire il
testo che si vuole nella pagina tra il tag di
apertura <pre> e il tag di chiusura </pre>.

Le pagine HTML

I TAG di layout della pagina Il tag BLOCKQUOTE

Il tag BLOCKQUOTE consente di separare


uno o pi paragrafi dal testo, spostandoli
leggermente a sinistra, rispetto al testo
principale. Si pu usare, ad esempio per fare
una citazione o un esempio.
Il testo che si vuole utilizzare come nota o
esempio nella pagina va inserito tra il tag di
apertura <blockquote> e il tag di chiusura
</blockquote>.

Le pagine HTML
I TAG di stile del testo

Per approfondire maggiormente


laspetto della formattazione delle pagine
HTML e del testo in esse contenuto occorre
analizzare i tag relativi allo stile del testo.

Le pagine HTML

I TAG di stile del testo Il tag B (dallinglese BOLD)

Il primo tag utile per la formattazione dello


stile del testo il tag B che si utilizza per
formattare il testo in grassetto.
Per utilizzare tale tag sufficiente inserire il
testo da visualizzare in grassetto tra il tag di
apertura <b> e il tag di chiusura </b>
Esempio:
testo normale <b> testo in grassetto </b> testo normale

Le pagine HTML

I TAG di stile del testo Il tag I (dallinglese ITALIC)

Il tag I si utilizza invece per formattare il testo


in corsivo.
Per utilizzare tale tag sufficiente inserire il
testo da visualizzare in corsivo tra il tag di
apertura <i> e il tag di chiusura </i>
Esempio:
testo normale <i> testo in corsivo </i> testo normale

Le pagine HTML

I TAG di stile del testo Il tag U (dallinglese UNDERLINE)

Il tag U si utilizza per formattare il testo in


sottolineato.
Per utilizzare tale tag sufficiente inserire il
testo da sottolineare tra il tag di apertura <u>
e il tag di chiusura </u>
Esempio:
testo normale <u> testo sottolineato </u> testo normale

Le pagine HTML

I TAG di stile del testo Il tag STRIKE

Il tag STRIKE si utilizza per formattare il


testo barrato.
Per utilizzare tale tag sufficiente inserire il
testo da barrare tra il tag di apertura <strike>
e il tag di chiusura </strike>
Esempio:
testo normale <strike> barrato </strike> testo normale

Le pagine HTML

I TAG di stile del testo I tag SUP e SUB

I tag SUP e SUB si utilizzano per formattare il testo


rispettivamente come apice o come pedice ( apice,
pedice).
Anche questi tag si utilizzano, come ormai
consueto, inserendo il testo da formattare tra il tag
di apertura (<sup> o <sub>) e il tag di chiusura
(</sup> o </sub>)

Esempio:
testo normale <sup> apice </sup> testo normale
testo normale <sub> pedice </sub> testo normale

Le pagine HTML

I TAG di stile del testo I tag BIG e SMALL

I tag BIG e SMALL si utilizzano per formattare il


testo, rispettivamente , in maniera enfatizzata
(quindi ingrandita) o rimpicciolita.
Anche questi tag si utilizzano inserendo il testo da
formattare tra il tag di apertura (<big> o <small>) e
il tag di chiusura (</big> o </small>)

Esempio:
normale <big> enfatizzato </big> normale
normale <small> rimpicciolito </small> normale

Le pagine HTML

I TAG di stile del testo Il tag BLINK

Infine il tag BLINK si utilizza per formattare il


testo in modo che lampeggi.
Al solito, per ottenere leffetto lampeggiante
basta inserire il testo da formattare tra il tag
di apertura (<blink>) e il tag di chiusura
(</blink>)

Esempio:
normale <blink> lampeggiante </big> normale

Le pagine HTML

I TAG di stile del testo Precisazione

Ovviamente i tag di stile del testo possono


essere combinati tra loro per ottenere
leffetto voluto. Si potr quindi, ad esempio,
ottenere del testo grassetto e sottolineato
semplicemente inserendolo tra i tag di
apertura e chiusura B e U.
Occorre solo aver cura di chiudere tutti i tag
aperti altrimenti qualsiasi altro testo inserito
rimarr formattato secondo lultimo tag di
stile aperto e non chiuso.

Le pagine HTML
I TAG per la scelta del FONT

Tramite lutilizzo del tag FONT accoppiato ad alcuni suoi


attributi possibile scegliere il font (ovvero il tipo di
carattere) utilizzato per formattare il teso della nostra pagina
web, o la sua dimensione.
Tuttavia, riguardo a tale possibilit sono opportune alcune
precisazioni.
Infatti lutente che naviga su Internet pu visualizzare solo i
caratteri che sono installati nel suo sistema.
Se quindi decidiamo di formattare il testo della nostra pagina
utilizzando un font particolare che non si trova installato nel
sistema del visitatore del sito questultimo vedr il testo della
pagina formattato secondo il carattere base del sistema (di
solito il font Times).

Le pagine HTML
I TAG per la scelta del FONT

Per questo motivo bene tener conto di due


accorgimenti:

scegliere caratteri "sicuri" , che siano cio

senzaltro presenti sul pc dellutente


non indicare un solo carattere, ma una serie di
caratteri che gradualmente si allontanano dal
risultato che vorremmo ottenere. In questo modo il
browser dellutente cercher di trovare nella propria
cartella dei fonts il primo carattere indicato, se non
lo trova passer al secondo, e solo come ultima
spiaggia sceglier si utilizzare il carattere
predefinito.

Le pagine HTML

I TAG per la scelta del FONT Lattributo FACE

Veniamo adesso alla sintassi del tag FONT e


del suo attributo FACE utilizzato, appunto,
per la scelta del font. La sintassi la
seguente:
<font face=nomefont>TESTO</font>
Tutto il testo contenuto tra il tag di apertura
<font> e il relativo tag di chiusura </font>
sar formattato utilizzando il font scelto.

Le pagine HTML

I TAG per la scelta del FONT Lattributo FACE

Nel caso in cui, per utilizzare la tecnica di cui si


parlava prima, si volessero indicare pi font, questi
andranno inseriti tra le virgolette () separati tra
loro da una virgola, in questo modo:
<font face=font1,font2,font3,[]>TESTO</font>
Come visto prima il browser passer in rassegna i
font del sistema assegnando al testo il primo che
sar in grado di reperire.

Le pagine HTML

I TAG per la scelta del FONT Lattributo COLOR

Lattributo COLOR, come si pu facilmente


immaginare, viene utilizzato per cambiare il
colore del testo, anche in maniera
occasionale. Per tale attributo sono valide le
osservazioni fatte riguardo al colore del testo
della pagina attribuito nel tag BODY. La
sintassi di tale attributo :
<font color=colore>TESTO</font>

Le pagine HTML

I TAG per la scelta del FONT Lattributo SIZE

Lattributo SIZE viene invece utilizzato per


determinare la dimensione del testo nella
pagina. Tale attributo pu assumere valori
compresi tra 1 e 7 e la sua sintassi :
<font size=valore>TESTO</font>

Le pagine HTML

I TAG per la scelta del FONT Conclusione

Possiamo concludere il discorso sul tag


FONT specificando che allinterno del
documento HTML esso liberamente
utilizzabile per formattare il testo in maniera
diversa in qualsiasi punto.
Come sottolineato per gli altri attributi
occorre solo aver cura di chiudere il tag
desiderato ogni qual volta non vogliamo pi
avere leffetto sul nostro testo.

Il linguaggio HTML

Lezione 3

Le pagine HTML

I TAG di elenco Definizione e sintassi generica


Durante la redazione di una pagina HTML pu sorgere la necessit di
inserire un elenco di termini. In questo caso possiamo utilizzare le "liste",
o elenchi, che sono sostanzialmente di due tipi:

Elenchi ordinati
Elenchi non ordinati
Tutti e due i tipi di elenchi funzionano nel medesimo modo: si apre
lapposito tag, si elencano i vari elementi della lista (ciascuno con il
proprio tag), si chiude il tag dellelenco. La sintassi ha quindi questa
forma:
<tipodielenco>
<elemento>nome del primo elemento
<elemento>nome del secondo elemento
</tipodielenco>
Come si pu vedere, il tag che individua ogni elemento della lista un
altro esempio di tag che non ha bisogno di chiusura

Le pagine HTML

I TAG di elenco Gli elenchi ordinati

Gli elenchi ordinati sono contraddistinti


dallenumerazione degli elementi che
compongono la lista. Avremo quindi una serie
progressiva ordinata e individuata da lettere
o numeri (in un programma di videoscrittura,
questi elenchi sono chiamati elenchi
numerati).
Il tag da utilizzare per aprire un elenco
ordinato <ol> (dallinglese "ordered list") ed
ogni elemento di esso individuato dal tag
<li> (dallinglese "list item").

Le pagine HTML

I TAG di elenco Gli elenchi ordinati

La sintassi di un elenco ordinato quindi la


seguente:
<ol>
<li>Primo elemento dellelenco
<li>Secondo elemento dellelenco
<li>Terzo elemento dellelenco
</ol>

Le pagine HTML

I TAG di elenco Gli elenchi ordinati Lattributo TYPE

Lo stile di enumerazione visualizzata di


default dal browser quello numerico, ma
possibile indicare uno stile differente
specificandolo per mezzo dellattributo TYPE.
Tale attributo pu assumere i seguenti valori:
- a
per numerazioni con caratteri alfabetici minuscoli;
- A
per numerazioni con caratteri alfabetici maiuscoli;
- i
per i numeri romani minuscoli;
- I
per i numeri romani maiuscoli.

Le pagine HTML

I TAG di elenco Gli elenchi ordinati Lattributo TYPE

Esempio dellutilizzo dellattributo TYPE il


seguente:
<ol type=A>
<li>Primo elemento dellelenco
<li>Secondo elemento dellelenco
<li>Terzo elemento dellelenco
</ol>

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati

Gli elenchi non ordinati invece non


attribuiscono alcuna enumerazione agli
elementi che compongono la lista (in un
programma di videoscrittura, questi elenchi
sono chiamati elenchi puntati).
Il tag da utilizzare per aprire un elenco
ordinato <ul> (dallinglese unordered list")
ed ogni elemento di esso individuato anche
qui dal tag <li>.

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati

Gli elenchi non ordinati invece non


attribuiscono alcuna enumerazione agli
elementi che compongono la lista (in un
programma di videoscrittura, questi elenchi
sono chiamati elenchi puntati).
Il tag da utilizzare per aprire un elenco
ordinato <ul> (dallinglese unordered list")
ed ogni elemento di esso individuato anche
qui dal tag <li>.

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati

La sintassi di un elenco non ordinato quindi


la seguente:
<ul>
<li>Primo elemento dellelenco
<li>Secondo elemento dellelenco
<li>Terzo elemento dellelenco
</ul>

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati Lattributo TYPE

Il simbolo grafico utilizzato di default per identificare


i singoli elementi dellelenco un piccolo cerchio
pieno (). Anche in questo caso per possibile
indicare un simbolo differente specificandolo per
mezzo dellattributo TYPE. In caso di elenchi non
ordinati TYPE pu assumere i seguenti valori:

();

- circle

per lutilizzo di un piccolo cerchio vuoto ( );

- square

per lutilizzo di un quadrato pieno

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati Lattributo TYPE

Esempio dellutilizzo dellattributo TYPE il


seguente:
<ol type=circle>
<li>Primo elemento dellelenco
<li>Secondo elemento dellelenco
<li>Terzo elemento dellelenco
</ol>

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati Lannidamento

E possibile annidare gli elenchi non ordinati


uno nellaltro, aprendo un tag <ul> prima
della chiusura del precedente.
In questo caso il browser modificher in
maniera automatica il simbolo utilizzato per
la distinzione degli elementi dellelenco.
Esempio

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati Lannidamento


Esempio di annidamento di elenchi non ordinati
Codice HTML
<ul>

apre il primo elenco

<li>primo della 1a lista

elementi del

<li>secondo della 1a lista

primo elenco

<ul>

apre il secondo elenco

<li>primo della 2a lista

elementi del

<li>secondo della 2a lista

secondo elenco

<ul>
<li>primo della 3a lista
</ul>
</ul>
<li>terzo della 1a lista
</ul>

apre il terzo elenco


elemento del terzo elenco
chiude il terzo elenco
chiude il secondo elenco
elemento del primo elenco
chiude il primo elenco

Le pagine HTML

I TAG di elenco Gli elenchi non ordinati Lannidamento


Esempio di annidamento di elenchi non ordinati
Ci che appare sul browser

Le pagine HTML
I LINK

Come abbiamo gi detto, i link sono il ponte che consente


di passare da un testo allaltro.
In quanto tali, i link sono formati da due componenti:

il contenuto che nasconde il collegamento (pu trattarsi di

testo o di una immagine). Questa la parte visibile del link, e


proprio per questo lutente deve essere sempre in grado di
capire quali sono i collegamenti da cliccare allinterno della
pagina

la risorsa verso cui il collegamento punta. Pu trattarsi di un


collegamento ad unaltra pagina web (sullo stesso server o
su un server diverso), oppure di un collegamento interno ad
un altro punto della stessa pagina in cui si trova.

Le pagine HTML

I link esterni Il tag A con lattributo HREF

Per la creazione di un link esterno alla pagina


che lo contiene necessario utilizzare il tag
<a> associato al suo attributo href che
assume il valore della risorsa cui il
collegamento punta. La sintassi di tale tag e
del suo attributo la seguente:
<a href=indirizzo_risorsa>Testo</a>

Le pagine HTML

I link esterni Il tag A con lattributo HREF

Esempio
Se nella nostra pagina volessimo creare un
link esterno al sito www.google.it
evidenziando il link con la scritta Collegati a
google il codice HTML da inserire sarebbe:
<a href=http://www.google.it>Collegati a Google</a>

Sul browser il risultato del codice sar:


Collegati a Google

Le pagine HTML

I link interni La creazione delle ancore con lattributo NAME

Per la creazione di un link interno alla pagina che lo


contiene necessario procedere preliminarmente
alla creazione delle cosiddette ANCORE. Le ancore
non sono altro che dei punti di riferimento creati in
una pagina HTML a cui puntare nella realizzazione
del collegamento. Per realizzare tali ancore occorre
utilizzare il tag <a> associato al suo attributo name
che assume il nome dato allancora stessa. La
sintassi di tale attributo la seguente:
<a name=nome_ancora>Testo</a>

Le pagine HTML

I link interni Il puntamento alle ancore con lattributo HREF

Una volta create tutte le ancore nel nostro


documento possibile puntare ad esse
utilizzando il tag <a> associato al suo
attributo href che assume il nome dato
allancora cui ci interessa puntare preceduta
dal simbolo # (cancelletto). La sintassi
quindi la seguente:
<a href=#nome_ancora>Testo</a>

Le pagine HTML

I link Scegliere la pagina di apertura

I link (interni o esterni) creati nei modi visti in


precedenza, sono, di default, richiamati dal
browser nella stessa pagina attiva, con il
risultato che la pagina in cui si trova il link
viene abbandonata per passare a quella
puntata.
Se, per esigenze particolari volessimo aprire la
pagina puntata dal link in una nuova finestra
del browser, utilizzando lattributo TARGET
del tag <a>.

Le pagine HTML

I link Uso dellattributo TARGET

Per ottenere tale risultato a tale attributo


dovremo assegnare il valore _blank
nellormai consueto modo con cui si
assegnano i valori agli attributi. Il link
generato dal seguente codice:
<a target=_blank href=http://www.google.it>Collegati a Google</a>

sar allapparenza identico rispetto a quello


creato precedentemente, ma aprir la pagina
puntata in una nuova finestra del browser.

Le pagine HTML
I link Lattributo TITLE

Lattributo TITLE serve a specificare un testo


esplicativo per lelemento cui si riferisce
(TITLE si pu infatti utilizzare anche per
elementi differenti dai link; ne parleremo in
seguito).
Utilizzando tale attributo, nel caso attuale, con
il tag <a> si otterr lapparizione di una
etichetta, contenente il testo da noi
specificato, al soffermarsi del mouse sul
collegamento in oggetto.

Le pagine HTML

I link Utilizzo dellattributo TITLE

Ad esempio la seguente riga di codice HTML:


<a title="Cerca in rete con Google!!!"
href="http://www.google.it">Collegati a Google</a>

otterr nel browser il seguente effetto

al soffermarsi del mouse sul collegamento.

Il linguaggio HTML

Lezione 4

Il linguaggio HTML
Gestire le immagini

Finora abbiamo visto come inserire e formattare il testo


allinterno delle nostre pagine Web e in che modo gestire.
Naturalmente possibile gestire anche delle immagini
utilizzando gli appositi tag e i relativi attributi.
I formati di immagine pi diffusi e generalmente compatibili con
i pi diffusi browser sono sostanzialmente tre e cio GIF,
JPG (o JPEG) e PNG.
E importante ricordare che il codice HTML fornisce delle
indicazioni al browser su come visualizzare il testo e le
immagini allinterno della pagina: il testo (come abbiamo
visto) scritto direttamente nel file HTML, le immagini invece
vengono caricate insieme alla pagina, essendo contenuto
nel codice HTML, solo lindirizzo dellimmagine stessa.

Il linguaggio HTML

Gestire le immagini Il tag IMG e lattributo SRC

Il tag utilizzato per linserimento di una immagine nella nostra


pagina web il tag IMG, che va utilizzato insieme al suo
attributo fondamentale SRC che assume il valore
dellindirizzo relativo dellimmagine (il nome dellimmagine
richiamata deve essere completo della sua estensione).
Esempio:
<img src=immagine.gif>
Anche il tag IMG un tag cosiddetto vuoto, ovvero un tag
che non necessita di chiusura.

Il linguaggio HTML

Gestire le immagini Gli attributi WIDTH ed HEIGHT

Se utilizzato semplicemente, come nellesempio precedente,


limmagine viene caricata nelle sue dimensioni originali.
Utilizzando gli attributi WIDTH (larghezza) ed HEIGHT
(altezza) per possibile scegliere autonomamente le
dimensioni di visualizzazione dellimmagine, avendo per
attenzione alle proporzioni. Se infatti si inseriscono dei
valori proporzionalmente non corretti limmagine risulta
deformata.
Esempio:
<img src=immagine.gif width="224" height="69">

Il linguaggio HTML

Gestire le immagini Lattributo TITLE

Anche per le immagini, come abbiamo visto per i link,


possibile visualizzare, al soffermarsi del mouse su
di esse, un breve testo esplicativo utilizzando anche
qui lattributo TITLE, con la medesima sintassi
usata per il tag LINK.
Esempio:
<img src=immagine.gif title=La mia foto!!!>

Il linguaggio HTML

Utilizzare un immagine come segnaposto per un link

Abbiamo gi anticipato che il contenuto della pagina


che nasconde un collegamento pu essere sia testo
(che abbiamo fino ad ora esaminato) che una
immagine. Per utilizzare una immagine come
segnaposto di un collegamento sufficiente inserire
il tag IMG (con i suoi eventuali attributi) tra il tag di
apertura <a> e il tag di chiusura </a>.
Esempio:
<a href=http://www.google.it><img src=google.gif
title=Ricerca con Google!!!></a>

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo

Se inserita semplicemente (come negli esempi


precedenti), limmagine si inserisce tra il testo che la
precede e il testo che la segue.

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo

E possibile modificare questa impostazione di default


utilizzando lattributo ALIGN che pu assumere i
seguenti valori:

- RIGHT
- LEFT
- MIDDLE
- TOP

Allineamento dellimmagine a destra


Allineamento dellimmagine a sinistra
Allineamento del testo dal centro
dellimmagine
Allineamento del testo dalla parte
alta dellimmagine

- Vediamone i diversi effetti

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo Allineamento RIGHT


Il codice HTML che segue:
<img src="immagine.gif"
Testo Testo Testo Testo
Testo Testo Testo Testo
Testo Testo Testo Testo

align="right">
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo

Generer nel browser leffetto visualizzato in basso:

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo Allineamento LEFT


Il codice HTML che segue:
<img src="immagine.gif"
Testo Testo Testo Testo
Testo Testo Testo Testo
Testo Testo Testo Testo

align=left">
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo

Generer nel browser leffetto visualizzato in basso:

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo Allineamento MIDDLE


Il codice HTML che segue:
<img src="immagine.gif"
Testo Testo Testo Testo
Testo Testo Testo Testo
Testo Testo Testo Testo

align=middle">
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo

Generer nel browser leffetto visualizzato in basso:

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo Allineamento TOP


Il codice HTML che segue:
<img src="immagine.gif"
Testo Testo Testo Testo
Testo Testo Testo Testo
Testo Testo Testo Testo

align=top">
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo

Generer nel browser leffetto visualizzato in basso:

Il linguaggio HTML

Gestire le immagini Lallineamento con il testo

Per concludere il discorso intrapreso sulle immagini un


cenno agli attributi HSPACE e VSPACE che,
rispettivamente, servono a stabilire la distanza
orizzontale (horizontal space) e la distanza verticale
(vertical space) del testo dallimmagine, o dellimmagine
da unaltra immagine

Il linguaggio HTML
Le tabelle

Le tabelle sono una delle parti pi importanti di tutto il codice


HTML: nate sin dagli inizi del Web per impaginare dati
aggregati, si sono poi trasformate in uno strumento
indispensabile per gestire i layout grafici.
Il concetto di tabella molto semplice. Si tratta di una
normalissima struttura composta da righe e colonne nella
quale ogni spazio elementare definito CELLA.
Per lavorare con le tabelle occorre ricordare che, nel loro
sviluppo in HTML, si procede in senso orizzontale,
realizzando la tabella stessa riga per riga e, solo dopo aver
completato la progettazione di una riga si potr passare a
quella successiva.

Il linguaggio HTML
Le tabelle I tag fondamentali

I tag fondamentali per la realizzazione di una tabella in HTML


sono i seguenti:
- <TABLE> Apre la tabella
- <TR>
(Table Row) Apre una nuova riga della tabella
- <TD>
(Table Data) Apre una nuova cella nella riga
Ognuno di questi tag richiede la relativa chiusura.

Il linguaggio HTML
Le tabelle Lattributo BORDER

Prima di passare alla realizzazione della prima semplice tabella


occorre analizzare il primo attributo del tag TABLE, ovvero il
tag BORDER. Questultimo attributo usato per definire, in
pixel, la dimensione del bordo esterno della tabella e la sua
sintassi quella ormai sufficientemente acquisita:
<table border=5> [] </table>
Possiamo passare adesso a realizzare la nostra prima semplice
tabella, composta da due righe e due colonne.

Il linguaggio HTML

Le tabelle Realizzazione di una semplice tabella


Analizziamo il seguente codice HTML:
<table border=5>
<tr>
<td>Cella1 Riga 1</td>
<td>Cella2 Riga 1</td>
</tr>
<tr>
<td>Cella 1 Riga 2</td>
<td>Cella 2 Riga 2</td>
</tr>
</table>

Apertura della tabella


Apertura della prima riga
Prima cella della prima riga
Seconda cella della prima riga
Chiusura della prima riga
Apertura della seconda riga
Prima cella della seconda riga
Seconda cella della seconda riga
Chiusura della seconda riga
Chiusura della tabella

Questo codice generer la tabella che vediamo nella pagina seguente:

Il linguaggio HTML

Le tabelle Realizzazione di una semplice tabella

Il linguaggio HTML

Le tabelle Gli attributi WIDTH ed HEIGHT

Possiamo specificare la larghezza e l'altezza delle


tabelle tramite gli attributi WIDTH e HEIGHT che
possono essere riferiti a tutti e tre i tag visti
precedentemente.
Il valore di questi attributi pu essere specificato con
una larghezza fissa (in pixel: in questo caso basta
indicare un numero intero), oppure in percentuale (il
numero deve essere allora seguito dal simbolo %):
in questultimo caso la tabella si adatta (appunto in
percentuale) allo spazio a disposizione.

Il linguaggio HTML

Le tabelle Gli attributi WIDTH ed HEIGHT

Ad esempio, modificando
la tabella precedente
sostituendo la prima
con la seguente:
<table border=5 width=300 height=300>

otterremo il risultato a fianco:

Il linguaggio HTML
Le tabelle Lattributo ALIGN

Anche per le tabelle, come per alcuni degli elementi


visti finora, possibile utilizzare lattributo ALIGN
per definire lallineamento dei contenuti nella
tabella. Tale attributo pu essere riferito al tag <TR>
(si riferir quindi allintera riga) o al tag <TD> (sar
allora applicato alla sola cella cui si riferisce).
Anche in questi casi tale attributo pu assumere i
valori LEFT, RIGHT o CENTER.

Il linguaggio HTML
Le tabelle Lattributo VALIGN

Per gli elementi contenuti nelle tabelle possibile


impostare anche lallineamento verticale utilizzando
lattributo VALIGN che va utilizzato con il tag <TD>.
Tale attributo pu assumere i valori TOP, MIDDLE
(calore di default) o BOTTOM che definiscono,
rispettivamente, lallineamento in alto, al centro o
alla base della cella.

Il linguaggio HTML
Le tabelle Lattributo BGCOLOR

Anche per le tabelle possibile utilizzare lattributo


BGCOLOR per definire il colore di sfondo. Riguardo
alle tabelle tale attributo pu riferirsi sia al tag
<TABLE> che al tag <TR> che al tag <TD> e
consente di definire il colore di sfondo,
rispettivamente, dellintera tabella, di una sola riga
o di una sola cella.
Per quello che riguarda i valori che tale attributo pu
assumere valgono le stesse considerazioni fatte
per lo stesso attributo riferito al tag <BODY>.

Il linguaggio HTML

Le tabelle Lattributo BACKGROUND

Anche per le tabelle possibile utilizzare lattributo


BACKGROUND per definire unimmagine di sfondo.
Riguardo alle tabelle tale attributo pu riferirsi sia al
tag <TABLE> che al tag <TR> che al tag <TD> e
consente di definire unimmagine di sfondo,
rispettivamente, dellintera tabella, di una sola riga
o di una sola cella.
Per quello che riguarda i valori che tale attributo pu
assumere valgono le stesse considerazioni fatte
per lo stesso attributo riferito al tag <BODY>.

Il linguaggio HTML
Le tabelle Lattributo COLSPAN

Finora abbiamo immaginato le tabelle come griglie


rigide, in cui il numero delle colonne era dato come
costante e non modificabile.
In realt possibile raggruppare le celle all'interno
delle colonne in modo da avere ad esempio una
riga da 2 colonne e unaltra da 3. Per ottenere
questo risultato necessario specificare che una
cella deve occupare il posto di 2 (o pi colonne). In
questo caso si utilizza lattributo COLSPAN sul tag
<TD>, specificando come valore il numero di celle
che devono essere occupate.

Il linguaggio HTML

Le tabelle Esempio delluso di COLSPAN


Consideriamo, a titolo di esempio, il seguente codice, nel quale sono stati
utilizzati anche i nuovi attributi visti, cio ALIGN e BGCOLOR:
<table width="430" border="1">
<tr align="center">
<td width="30%">Cella 1 Riga 1</td>
<td width="30%">Cella 2 Riga 1</td>
<td width="30%">Cella 3 Riga 1</td>
</tr>
<tr align="center">
<td>Cella 1 Riga 2</td>
<td colspan="2" bgcolor="yellow"> Cella 2 3 Riga 2</td>
</tr>
</table>

Il risultato di tale codice sar il seguente:

Il linguaggio HTML

Le tabelle Esempio delluso di COLSPAN

Come possibile notare le celle connotate


dallattributo COLSPAN con valore 2
occupano lo spazio di due colonne invece
che di una.

Il linguaggio HTML
Le tabelle Lattributo ROWSPAN

La stessa operazione di raggruppamento celle pu


essere effettuata, oltre che in senso orizzontale,
anche in senso verticale, ovvero raggruppando due
celle che si trovano una sopra laltra.
Tale risultato si ottiene utilizzando lattributo
ROWSPAN sul tag <TD>, specificando come valore
anche qui il numero di celle che devono essere
occupate.

Il linguaggio HTML

Le tabelle Esempio delluso di COLSPAN


Consideriamo, a titolo di esempio, il seguente codice, nel quale sono stati
utilizzati anche i nuovi attributi visti, cio ALIGN e BGCOLOR:
<table width="430" border="1">
<tr align="center">
<td>Cella 1 Riga 1</td>
<td rowspan= "2" bgcolor="yellow">Cella 2 Riga 1 e 2</td>
<td>Cella 3 Riga 1</td>
</tr>
<tr align="center">
<td>Cella 1 Riga 2</td>
<td>Cella 3 Riga 2</td>
</tr>
</table>

Il risultato di tale codice sar il seguente:

Il linguaggio HTML

Le tabelle Esempio delluso di COLSPAN

Come possibile notare le celle connotate


dallattributo ROWSPAN con valore 2
occupano lo spazio di due righe invece che
di una.