HTML - Tutta La Lezione Base

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
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
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
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
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
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
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
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

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.
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.
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.
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>
</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).
ordinato <ul> (dallinglese unordered list")
ed ogni elemento di esso individuato anche
qui dal tag <li>.
Le pagine HTML
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).
ordinato <ul> (dallinglese unordered list")
ed ogni elemento di esso individuato anche
qui dal tag <li>.
Le pagine HTML
La sintassi di un elenco non ordinato quindi

la seguente:
<ul>
</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>
</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

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
elementi del
<li>secondo della 2a lista
secondo elenco
<ul>
</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

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
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
align="right">
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

align=left">
Il linguaggio HTML
Gestire le immagini Lallineamento con il testo Allineamento MIDDLE

align=middle">
Il linguaggio HTML
Gestire le immagini Lallineamento con il testo Allineamento TOP

align=top">
Il linguaggio HTML
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>
</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>
</tr>
<tr align="center">
<td colspan="2" bgcolor="yellow"> Cella 2 3 Riga 2</td>
</tr>
</table>
Il risultato di tale codice sar il seguente:
Il linguaggio HTML
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

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 rowspan= "2" bgcolor="yellow">Cella 2 Riga 1 e 2</td>
</tr>
<tr align="center">
</tr>
</table>
Il risultato di tale codice sar il seguente:
Il linguaggio HTML
Come possibile notare le celle connotate

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

HTML - Tutta La Lezione Base

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML - Tutta La Lezione Base

Caricato da

Copyright:

Formati disponibili

Il linguaggio HTML

Cosa il linguaggio HTML

Cosa il linguaggio HTML

Gli editor testuali

Gli editor WYSIWYG

Gli editor HTML

Il linguaggio HTML I TAG

Abbiamo detto che all'interno di ogni pagina presente

Ad alcuni tag poi possibile assegnare degli

Anche in HTML possibile inserire dei

Un documento HTML si divide in due parti fondamentali:

Indicazioni preliminari Il tag <HTML>

Tutti gli elementi ed il contenuto di un

che hanno il compito di aprire e chiudere il file.

I tag relativi allintestazione del documento Il tag HEAD

I tag relativi allintestazione del documento Il tag TITLE

I tag relativi allintestazione del documento Il tag TITLE

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

I tag relativi al corpo del documento Il tag BODY

L'elemento <BODY> posto in posizione

I tag relativi al corpo del documento Il tag BODY

Tra i tag <BODY> e </BODY>

Riepilogando quanto visto finora la struttura base di una

E appena il caso di sottolineare che i tag HTML

E possibile utilizzare il tag BODY per

Gli attributi del tag BODY Lattributo BGCOLOR

Lattributo BGCOLOR viene utilizzato per

Gli attributi del tag BODY Lattributo BGCOLOR

Molti colori sono disponibili utilizzando le corrispondenti

Gli attributi del tag BODY Lattributo BGCOLOR

La corrispondenza tra i colori, le loro parole chiave

Gli attributi del tag BODY Lattributo BACKGROUND

Lattributo BACKGROUND viene utilizzato

Gli attributi del tag BODY Lattributo BACKGROUND

Il nome dellimmagine da utilizzare va inserito

Gli attributi del tag BODY Lattributo BACKGROUND

Se invece la stessa immagine si trovasse in una

Gli attributi del tag BODY Lattributo TEXT

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

Gli attributi del tag BODY Lattributo LINK

Sappiamo tutti che con il termine LINK si

Gli attributi del tag BODY Lattributo LINK

Il collegamento normale (link)

Gli attributi del tag BODY Lattributo LINK

Il collegamento visitato (visited)

Gli attributi del tag BODY Lattributo LINK

Il collegamento attivo (active)

Gli attributi del tag BODY Lattributo LINK

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

Abbiamo visto che il tag BODY apre e chiude il

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

Il tag HX usato per i titoli (H sta per

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

I TAG di layout della pagina Il tag P

Il paragrafo lunit di base entro cui

I TAG di layout della pagina Il tag DIV

Il tag DIV permette di realizzare allinterno della

Tutti i "tag-contenitori" che abbiamo appena

Esempio di utilizzo dellattributo ALIGN

I TAG di layout della pagina Il tag BR

Il tag BR permette di andare a capo in qualunque

I TAG di layout della pagina Il tag PRE

Il tag PRE serve a forzare il browser a

I TAG di layout della pagina Il tag BLOCKQUOTE