IL LINGUAGGIO HTML
1/69
Definizioni
SITO WEB: Insieme di informazioni (testuali, grafiche o sonore) consultabili
telematicamente, che l’autore organizza, struttura e rende visibilmente attraenti allo scopo
di offrire ad una grande quantità di persone una forma di comunicazione.
PROGETTARE UN SITO: Raccogliere il materiale, individuare i contenuti da presentare,
organizzare i dati definendone la struttura delle relazioni, definire il tipo di architettura ed
individuare la tipologia di utenza.
BUON SITO: Se è USABILE (soddisfa i bisogni dell’utente – è facile l’accesso e la
navigazione), se riesce a COMUNICARE EFFICACEMENTE, se le INFORMAZIONI
sono COMPRENSIBILI e i CONTENUTI risultano COMPLETI.
IPERTESTO: Testo costituito da segmenti autonomi di informazioni legati tra loro da
“link”, ossia Nodi Associativi che permettono al lettore di navigare liberamente da una
pagina all’altra.
ARCHITETTURA: Il modo in cui un sito organizza le proprie pagine.
2/69
Definizioni
MODELLO CLIENT-SERVER: un Server è un software che risiede su di un computer
collegato in rete e che eroga un particolare servizio. Gli utenti per usufruire dei servizi
offerti da un Server devono utilizzare un particolare software, il Client (i Client WWW
sono detti browser), che è in grado di inoltrare le richieste al Server
BROWSER: programma usato per la navigazione sul Web e che svolge principalmente due
compiti:
- scaricare i vari files che si trovano su un computer remoto (il server) e che fanno
riferimento a un certo indirizzo
- leggere i documenti scritti in html, e a seconda delle indicazioni ivi contenute,
visualizzare la pagina in un modo, piuttosto che in un altro
URL: Uniform Resource Locator - si intende un luogo (o indirizzo Internet) in cui si trova
una determinata risorsa che si vuole utilizzare.
Formato: protocollo://nome del dominio/cammino/nome del file
3/69
Definizioni
PROTOCOLLO: indica il tipo di risorse a cui si sta accedendo (ftp, http..)
Es. protocollo ftp (ftp://ftp.sci.univr.it/index.html) permette di copiare il file index.html dal
dominio specificato al computer locale.
Es. protocollo http (http://www.scienze.univr.it/index.html ) permette di ricercare e
visualizzare in locale il documento index.html dall'indirizzo specificato.
DOMINIO: specifica la posizione fisica dove si trova la risorsa che si vuole recuperare. Si
può rappresentare o con indirizzo IP (Internet Protocol) o utilizzando un nome che
corrisponde all'indirizzo IP.
HTML: HyperText Markup Language - Linguaggio per pubblicare informazioni sul
WWW
4/69
Linguaggi di programmazione per la
creazione di siti web
Html: (Hyper text markup language) Linguaggio di impaginazione per la creazione di
documenti ipertestuali contenenti testo, immagini, suoni ed altri oggetti multimediali. I
documenti creati con questa sintassi hanno estensione .html o .htm
ASP: (Active Server Pages) Tecnologia sviluppata da Microsoft per la creazione di pagine
web dinamiche e l'integrazione di database relazionali. Le pagine create con le Active
server pages hanno estensione .asp
Php: (Hypertext preprocessor). Utilizzato per rendere le pagine Web più dinamiche ed
interagire con i database My Sql. I documenti diffusi con questa tecnologia dovranno avere
estensione .php
5/69
Linguaggio HTML
HTML: Linguaggio di programmazione per la creazione di pagine Web
HTML (acronimo di Hypertext Markup Language - Linguaggio di contrassegno per gli
Ipertesti):
- non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++,
il Pascal, il Java, e sono linguaggi di scripting il PHP, l'ASP, il PERL, il JavaScript).
- è 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".
- non ha meccanismi che consentono di prendere delle decisioni e non è in grado di
compiere delle iterazioni, né ha altri costrutti propri della programmazione.
- pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile
dei linguaggi di programmazione.
6/69
Linguaggio HTML
Per creare pagine web occorre avere a disposizione:
- uno o più browser per visualizzare le pagine
- un editor testuale per scrivere il codice HTML (Es. Blocco Note di Windows)
Estensione del file: il file potrà avere estensione “html“ o “htm”.
Un documento scritto in html è costituito da 2 elementi:
1. il TESTO (che si vuole pubblicare)
2. una serie di COMANDI (“tag”) per la formattazione del testo, l’inserimento
di link ipertestuali e di grafica
7/69
Linguaggio HTML – I TAG
I TAG:
-Possiedono nomi diversi a seconda della loro funzione
- Possono assumere diverse forme:
Tag Semplici o vuoti: servono a formattare le pagine
<ISTRUZIONE>
Tag ad apertura/chiusura detti contenitori: utilizzati per
manipolare i dati posti al loro interno.
<ISTRUZIONE>xxxxx</ISTRUZIONE>
8/69
I TAG
TAG VUOTO : Es: <hr height="5px">
inserisce una linea orizzontale nel punto in cui viene inserito;
l'attributo height="5px" determina lo spessore della linea,
"5px“ indica 5 pixel (1 pixel=dimensione di un punto dello
schermo).
TAG CONTENITORI costituiti da:
tag iniziale (che ha lo stesso formato di un tag vuoto) <istruzione>,
un testo (su cui agisce il tag)
tag finale (che segna la fine dell'effetto dei tag). </istruzione>
9/69
Esempi di TAG
<html>
indica l’inizio del documento Html; non obbligatorio ma consigliato
<title>Il Mio
Documento</title>
Definisce il titolo (“Il Mio Documento”) del documento che stiamo per
creare.
<body>
Definisce l’inizio del corpo vero e proprio del documento.
Verrà chiuso da un tag </body>
<H1> testo </H1>
Definisce un livello di intestazione. Esistono 6 livelli di intestazione diversi,
da H1 ad H6, associati a fonti di larghezza decrescente (H1 = fonte più larga,
H6=fonte più piccola)
<P> testo </P>
Definisce l’apertura e la chiusura di un paragrafo. Il tag di chiusura </P> può
essere omesso.
<br>
causa un ritorno a capo (Break).
<I> testo </I>
Il testo compreso tra questi tag verrà visualizzato in corsivo (Italic)
10/69
Esempi di TAG
<B> testo </B>
Il testo compreso tra questi tags verrà visualizzato in “grassetto” (Bold)
<A href=”(Url)”>
click here</A>
Definisce un link ipertestuale ad un documento esterno, ad esempio:
<A href=”documento.html”>click here</A>
(facendo “click” su “click here” il browser “punterà” al documento
“documento.html”)
<IMG
src=”immagine.gif”>
Inserisce nel testo l’immagine contenuta nel file “immagine.gif”
&(vocale)grave;
&(vocale)acute;
una vocale con l’accento grave, ad es.: “è”: &egrave; “ì”: &igrave;
una vocale con l’accento acuto; ad es.: “ú”: &uacute; “è”: &eacute;
</body>
Definisce la chiusura del corpo del messaggio
</html>
Definisce la chiusura del documento
11/69
HTML: struttura del documento
Un documento HTML è normalmente diviso in due sezioni:
<HTML>
<HEAD>
xxxxxxxxxxxxx
</HEAD>
<BODY>
bla bla bla bla bla
</BODY>
</HTML>
12/69
HTML: struttura del documento
- <head> contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento
deve essere letto e interpretato.
Due tag presenti in questa sezione:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).
<title>Nome del sito</title>
Il title è il titolo della pagina e compare in alto sulla barra del browser.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Corso su HTML</title>
</head>
<body>
<!-- Scriveremo qui -->
Qui il nostro contenuto
</body>
</html>
13/69
HTML: struttura del documento
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body>
<p>La mia prima pagina web</p>
</body>
</html>
I tag contenuti all'interno del tag 'head' servono per definire le proprietà del
documento.
14/69
I TAG - commenti
 Utilizzati per rendere il codice più leggibile, possono essere inseriti nei punti più
significativi:
 Si tratta di indicazioni significative per il webmaster, ma invisibili al browser.
 Consentono di mantenere l’orientamento anche in file molto complessi e lunghi. La
sintassi è la seguente:
<!-- questo è un commento -->
e ci permette di "commentare" i vari punti della pagina. Ad esempio:
<!-- menu di sinistra -->
15/69
Esempio
Di tutto il codice scritto i browser visualizzeranno
solo ciò che è presente nel corpo (body) del listato;
quindi fra gli elementi <body> e </body>,
<html>
<title>Il mio documento</title>
<body>
<h1>Il mio documento di prova</h1>
<p>Cos&iacute; questo &egrave; il mio primo testo di prova. Premendo in
<A href="http://www.unile.it/">questo punto</A> potete visitare
l'Universit&agrave; di Lecce.
<br>
<b>Questo testo viene visualizzato in neretto</b> mentre il testo che segue <i>viene
visualizzato in corsivo</i>.
<br><br>
In questo punto <IMG src="immagini/disegno.gif"> viene visualizzato un disegno.
</P>
</body>
</html>
16/69
I TAG - Allineamento e indentazione
 I tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario
farlo.
Esempio:
<TAG1 attributi>
contenuto 1
<TAG2>
contenuto 2
</TAG2>
</TAG1>
Potremmo quindi avere:
<P align="right">
testo 1
<P align="left">
testo 2
</P>
</P>
17/69
I TAG - Allineamento e indentazione
 E’ una buona norma utilizzare dei caratteri di tabulazione per far rientrare il
testo ogni volta che ci troviamo in presenza di un annidamento e man mano che
entriamo più in profondità nel documento. Questa procedura si chiama
indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti
ad esempio:
<P align="right">testo 1<P align="left">testo 2</P></P> con:
<P align="right">
testo 1
<P align="left">
testo 2
</P>
</P>
18/69
Allineamento del testo
L'attributo 'align' , consente l’allineamento del testo a sinistra, a destra o al centro della
pagina
Allineamento
Sintassi
Testo allineato a sinistra
<p align="left">testo</p>
Testo allineato a destra
<p align="right">testo</p>
Testo giustificato
<p align="justify">testo</p>
19/69
Le liste
Esistono tre tipi di liste:
 Elenchi ordinati
 Elenchi non ordinati
 Elenchi di definizioni
In tutti e tre i casi la sintassi ha questa forma:
<elenco>
<elemento>nome del primo elemento
<elemento>nome del secondo elemento
</elenco>
20/69
Gli elenchi ordinati
Le liste ordinate richiedono due tag HTML:
- contenitore <ol> che delimita la lista
- contenitore <li> che introduce ogni elemento della lista.
Molti browser numerano automaticamente gli elementi della lista; per default, i
numeri sono quelli arabi e la numerazione inizia da 1.
Esempio:
<div>Elenco elementi
<ol>
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ol>testo che segue la lista
</div>
21/69
Gli elenchi ordinati
Lo stile di enumerazione visualizzata di default dal browser è quello numerico, ma
è possibile indicare uno stile differente specificandolo per mezzo dell’attributo
type.
Esempio:
<ol type="a">
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ol>
22/69
Gli elenchi ordinati: stili consentiti
Valore dell’attributo type
Stile di numerazione
type=“1”
(default)
Numeri
arabi
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol>
type=“a”
Alfabeto
minuscolo
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol>
type=“A”
Alfabeto
maiuscolo
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol>
23/69
Gli elenchi ordinati: stili consentiti
Valore dell’attributo type
Stile di numerazione
type=“i”
Numeri
romani
minuscoli
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol>
type=“I”
Numeri
romani
maiuscoli
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol>
24/69
Liste
L'attributo “start” consente di indicare l'inizio della numerazione quando questo è diverso
da uno. Esempio:
<ol start="10">
<li>Primo elemento della lista</li>
<li>Secondo elemento della lista</li>
</ol>
10. Primo elemento della lista
11. Secondo elemento della lista
25/69
Gli elenchi non ordinati
<ul>: “unordered list” è il tag da usare per aprire un elenco ordinato
<li>: “list item” individua gli elementi
Esempio:
<ul>
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ul>
26/69
Gli elenchi non ordinati
Il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco di default
dipende dal browser.
E’ possibile scegliere un altro tipo di segno:
Valore dell’attributo type
Stile di numerazione
type=“disc”
(default)
Visualizza un
punto pieno
<ul type=“disc">
<li>primo
<li>secondo
<li>terzo
</ul>
type=“circle”
Visualizza un
cerchio vuoto
<ul type=“circle">
<li>primo
<li>secondo
<li>terzo
</ul>
type=“square”
Visualizza un
quadrato
pieno
<ul type=“square">
<li>primo
<li>secondo
<li>terzo
</ul>
27/69
Gli elenchi di definizioni
<dl>: individua gli elenchi di definizioni
<dt>: “definition term” indica il termine da definire
<dd>: “definition description” è la definizione vera e propria del termine
Esempio:
<p>Ecco i principali tag per delimitare il testo:
<dl>
<dt>Il tag p
<dd>individua l'apertura di un nuovo paragrafo
<dt>Il tag div
<dd>individua l'apertura di un nuovo blocco di
testo
<dt>Il tag span
<dd>individua l'apertura di un elemento inline, cui
attribuire una formattazione atraverso gli stili
</dl>
ci sono poi altri tag che...
</p>
28/69
Liste annidate
<ul>
<li>Primo elemento della lista esterna </li>
<li>Secondo elemento della lista esterna </li>
<li>Terzo elemento con lista
<ol>
<li>Primo elemento della lista interna</li>
<li>Secondo elemento della lista interna</li>
</ol>
</li>
</ul>
•
•
•
Primo elemento della lista esterna
Secondo elemento della lista esterna
Terzo elemento con lista
1. Primo elemento della lista interna
2. Secondo elemento della lista interna
29/69
Attributo bgcolor
Per definire il colore di sfondo di una pagina Web è sufficiente quindi impostare:
<body bgcolor="cyan">
oppure
<body bgcolor="#ff0000">
ff0000
codice esadecimale del colore azzurro. Il simbolo # fa parte del codice del colore ed
indica al browser che il valore che segue è un numero esadecimale che rappresenta il colore.
Attributo background
Consente di inserire un'immagine nello sfondo di una pagina Web.
I browser visualizzano l'immagine a partire dall'angolo superiore sinistro della finestra e la ripetono
fino a riempire tutto lo sfondo della pagina (effetto mattonella o tiling).
<body background=“imgSfondo.gif”>
E’ anche possibile combinare i due attributi in modo che, mentre l’immagine di sfondo viene caricata,
venga comunque visualizzata una colorazione della pagina:
<body bgcolor="#ff0000“ background=“imgSfondo.gif”>
30/69
Codici esadecimali dei colori
Black (nero) =
"#000000"
Green (verde) = "#008000"
Silver (argento) =
"#C0C0C0"
Lime (verde limone/tiglio) =
"#00FF00"
Gray (grigio) =
"#808080"
Olive (verde oliva) =
"#808000"
White (bianco) =
"#FFFFFF"
Yellow (giallo) = "#FFFF00"
Maroon (marron) =
"#800000"
Navy (blu marino) =
"#000080"
Red (rosso) =
"#FF0000"
Blue (blu) = "#0000FF"
Purple (viola) =
"#800080"
Teal = "#008080"
Fuchsia (fucsia) =
"#FF00FF"
Aqua (acqua marina) =
"#00FFFF"
31/69
Tag di formattazione
All'interno del tag 'body' è possibile individuare blocchi di testo per i quali si vuole imporre
una formattazione particolare per poter evidenziare una parte del testo che si ritiene
importante.
<br>: Indica al browser di eseguire un “a capo”. Viene utilizzato per formattare i testi o
per inserire delle righe vuote in un documento.
<hr>: Visualizza una linea orizzontale (filetto). Possiede alcuni attributi di
personalizzazione:
'align‘: determina la posizione orizzontale (allineamento) della linea all'interno della
pagina.
'size‘: determina lo spessore della linea.
'width‘: determina la lunghezza della linea (espresso sia in numero di pixel sia come %
della larghezza dello schermo)
<b>Espressione</b>: specifica che “Espressione” dovrà essere in grassetto
<i>Espressione</i>: specifica che “Espressione” dovrà essere in corsivo
<u>Espressione</u>: specifica che “Espressione” dovrà essere sottolienato
<strike>Espressione</strike>: specifica che “Espressione” dovrà essere sbarrato
32/69
Modifica del font
Esempio:
Specifica il colore
Specifica il tipo di carattere
<font color=red size=5 face=“Courier”>CIAO</font>
Tag per la definizione del font
Specifica la dimensione del carattere
33/69
Titoli, paragrafi, blocchi di testo e contenitori
Nome tag
Descrizione
<h1></h1>
…
<h6></h6>
H sta per “heading”, ossia titolo. E’ formattato in grassetto e
lascia una riga vuota prima e dopo di sé.
<p></p>
Il paragrafo è l’unità di base entro cui suddividere un testo. Il
tag <P> lascia una riga vuota prima della sua apertura e dopo la
sua chiusura.
<div></div>
Il blocco di testo va a capo, ma - a differenza del paragrafo –
non lascia spazi prima e dopo la sua apertura.
<span></span>
Lo span è un contenitore generico che può essere annidato (ad
es.) all’interno dei DIV.
Si tratta di un elemento inline, che cioè non va a capo e
continua sulla stessa linea del tag che lo include.
34/69
Link
Costituiscono il ponte che consente di passare da un testo
all’altro.
Sono formati da due elelmenti:

il contenuto che “nasconde” il collegamento

la risorsa verso cui il collegamento punta
I link possono avere lo scopo di:
 Raggiungere un'altra parte del documento.
 Aprire un altro documento nello stesso sito Web.
 Aprire un documento che si trova in qualche altro sito del
WWW
35/69
Link
Uno schema di link (storyboard) è un diagramma che illustra come sono
collegate due o più pagine Web.
36/69
I link interni o ancore
Per creare un indice interno alla pagina si procede in due fasi distinte:
• creazione dell’ancora a cui puntare (<a name=”mioNome”>)
• creazione del collegamento all’ancora appena creata e riferimento
attraverso il cancelletto (<a href=”#mioNome”>)
Ciascuna ancora può avere un nome:
Es:
<a name=”primo”>Stiamo
Eccetera…</a>
per
esaminare
la
struttura….
In un ipotetico indice è allora possibile far riferimento all’ancora presente
all’interno
del documento attraverso un link che punti ad essa:
Es:
<a href=”#primo”>vai al primo paragrafo</a>
37/69
Link a documenti esterni
Per creare un riferimento ipertestuale si usa l'attributo 'href' che specifica il percorso
delle directory ed il nome del file da raggiungere
<a href="indice.html">Indice</a>
l'indirizzo URL è locale o relativo
<a href="http://arena.sci.univr.it/pippo.html">Home page di Pippo</a>
l’indirizzo URL è assoluto
Link: indirizzi e-mail
<a href="mailto:[email protected]">Invia i tuoi commenti a [email protected]!</a>
il browser attiverà un programma di posta elettronica (quale particolare programma dipende
dalla configurazione del browser) per proporre una finestra per inviare un messaggio di posta
elettronica con l'indirizzo già scritto e pari a quello specificato nell'attributo 'href' dopo la
stringa 'mailto:'.
38/69
Link: attributi
Target: consente di specificare in quale finestra la pagina linkata deve essere aperta:
di default infatti la pagina viene aperta all’interno del documento stesso, ma è possibile
specificare che la pagina sia aperta in una nuova finestra:
Es.
<a target=”_blank” href=”http://www.google.it”>visita GOOGLE</a>
Title: serve per specificare un testo esplicativo per l’elemento a cui l’attributo è riferito (il title
si può infatti utilizzare anche per elementi differenti dalle ancore).
Es.
<a title=“in GOOGLE puoi trovare qualsiasi riferimento” href=http://www.google.it/”
target=”_blank” >Visita GOOGLE</a>
Hreflang: indica la lingua del documento
Es.
Nel sito del <a href=http://www.w3c.org/” hreflang=”eng” target=”_blank” >Word Wide
Web Consortium</a>puoi trovare le specifiche dell’HTML in lingua inglese
39/69
Link: attributi
Modificare il colore
E’ possibile colorare i link all’interno della pagina annidando il tag <font> all’interno del link:
Es.
<a href="http://www.google.it/” target=”_blank” >
<font color=”red” size=”2” face=”Verdana, Arial, Helvetica, sans-serif”>Torna alla
home page di www.google.it
</font>
</a>
Il tag BASE
I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che
stiamo scrivendo. Se tuttavia vogliamo far riferimento a un differente percorso per tutti i
percorsi relativi, possiamo farlo specificandolo grazie al tag base, che va incluso nella
head del documento. Ad esempio con:
<base href=”http://www.mioSitoWeb.com/miaCartella”>
E poi nel documento si scriverà:
<a href=”mioFile.html”>collegamento al mio file</a>
che farà riferimento a:
http://www.mioSitoWeb.com/miaCartella/mioFile.html
40/69
Link: possibili stati



Collegamento normale: link
Collegamento visitato: visited
Collegamento attivo: active
Per modificare il colore del link
<body link="red">
Per modificare il colore ai link visitati
<body vlink="green">
Per modificare il colore dei link attivi
<body alink="yellow">
La sintassi completa per impostare i link è, quindi:
<body link="red" alink="yellow" vlink="green">
41/69
Le immagini
Il formato grafico da utilizzare per inserimento di immagini è: GIF e JPG
Sarebbe opportuno inserire tutte le immagini utilizzate in un’unica cartella “IMMAGINI”
42/69
Le immagini
Ecco come appariranno i tags <img> all’interno del documento ELENCO.HTML (contenuto nella
cartella "immagini"):
Esempi:
<IMG src=”logo.gif”>
<IMG src=”ponti/brooklyn.gif”>
<IMG src=”ponti/londra.jpg”>
<IMG src=”pianeti/marte.gif”>
<IMG src=”pianeti/venere.jpg”>
<IMG src=”../banner.gif”>
<IMG
src=”http://www.netscape.com/logo.gif”>
43/69
Le immagini: attributi
align
Influenza la disposizione dell'immagine rispetto al testo
che
precede e la segue. Può assumere uno dei seguenti valori: left,
right, top, bottom, middle
la
alt
Inserisce una descrizione dell'immagine. Tale descrizione viene
visualizzata dai browser mentre l'immagine viene prelevata; si
sostituisce alle immagini se il browser ne ha disabilitato il prelievo
automatico e, infine, appare sullo schermo ogni qualvolta il puntatore
del mouse si porta sull'immagine.
Esempio: <img src=“cartina.gif" alt=“Mappa topografica">
border
Quando un’immagine è associata a un altro documento appare
circondata da una cornice. L'attributo 'border' ne determina lo
spessore in pixel. È possibile fare in modo che tale cornice non
venga visualizzata: basta assegnare il valore zero all'attributo 'border‘.
Esempio <img src="tigre.gif" border="0">
44/69
Tabelle
I tag per creare una tabella sono i seguenti:
<table>
<tr>
<td>
apre la tabella
“table row”: indica l’apertura di una riga
“table data”: indica una cella all’interno di una riga
Esempio:
<table border="1>
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
45/69
Tabelle: attributi
border
width
permette di specificare di quanti pixel deve essere il bordo delle
tabelle.
definisce la larghezza della tabella relativamente allo schermo,
espressa con i valori percentuali, oppure in assoluto, in pixel.
Esempio:
<table width="100%"> oppure
<table width="250">
bgcolor determina il colore di sfondo della tabella.
Esempio:
<table bgcolor="#FF0000"> oppure
< table bgcolor="red">)
46/69
Tabelle
E’ possibile specificare larghezza ed altezza delle tabelle mediante gli attributi width ed height
che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>).
Esempio:
<table width="300" height="200" border="1>
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
47/69
Tabelle
Esempio:
<table width="75%" border="1>
<tr>
<td width="25%">prima cella</td>
<td width="75%">seconda cella</td>
</tr>
<tr>
<td width="25%">terza cella</td>
<td width="75%">quarta cella</td>
</tr>
</table>
48/69
Tabelle: tag opzionali
<caption> è l’intestazione, il titolo con un commento esplicativo sulla tabella
<thead>
è la testa, la parte iniziale della tabella in cui sono contenute le indicazioni
sul contenuto delle celle
<tfoot>
è il piede, la conclusione della tabella, quella che consente ad esempio di
tirare le somme
<tbody>
è il corpo, la parte centrale con il contenuto vero e proprio della tabella
<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe
49/69
Tabelle
Esempio
<table border="1" >
<caption>Esempio di tabella</caption>
<thead>
<tr>
<td>n.</td>
<td>Prodotti</td>
Esempio di
tabella
</tr>
</thead>
n. Prodotti
<tbody>
1
Caffè
<tr>
2
Tè
<td>1</td>
<td>Caffè</td>
</tr>
<tr>
<td>2</td>
<td>Tè</td>
</tr>
</tbody>
</table>
50/69
Tabelle: raggruppamento celle
<colspan>: Consente di raggruppare le celle all’interno delle colonne
Esempio:
<table width="430" border="1" bordercolor="#000000">
<tr>
<td width="30%"> <br> <br> <br> </td>
<td width="30%">&nbsp;</td>
<td width="30%">&nbsp;</td>
</tr>
<tr>
<td><br> <br> <br> </td>
<td colspan="2">&nbsp;</td>
</tr>
</table>
51/69
Tabelle: raggruppamento celle
<rowspan>: Consente di raggruppare le celle all’interno delle righe
Esempio:
<table width="430" border="1" bordercolor="#000000">
<tr>
<td width="30%"> <br> <br> <br> </td>
<td width="30%" rowspan="2">&nbsp;</td>
<td width="30%">&nbsp;</td>
</tr>
<tr>
<td><br> <br> <br> </td>
<td>&nbsp;</td>
</tr>
</table>
52/69
Tabelle: annidamento
E’ possibile annidare le tabelle le une dentro le altre. Esempio:
<table width="430" border="1">
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td height="24">&nbsp;</td>
<td><table width="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
53/69
I Suoni
<a href="esempi/start.wav"> Kde start (file WAV 278 kb) </a>
• I più comuni file audio utilizzabili in rete sono quelli WAVE
I Video Digitali
<a href="esempi/clock.avi">breve filmato (formato avi 81 KB)</a>
Impostare la lingua del documento
<body lang=“it”>
• Questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua,
ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata.
54/69
Testo scorrevole
<marquee>…….</marquee>
Questo tag consente di rendere scorrevoli sia le scritte
che le immagini
Esempio
<font color=red size=5 face=“Courier”>
<marquee loop=-1> CIAO </marquee></font>
Esempio
<marquee loop=-1> <img src=“sign1.gif”></marquee>
Attributi
Loop=n numero di iterazioni
(-1 scorrimento continuo)
Behavior= funzionamento
scroll
slide
alternate (il testo
rimbalza da una parte all’altra
dello schermo)
Direction= verso di scorrimento
left
right
Up
down
55/69
I Frame
Il tag frame permette di suddividere una finestra di un browser in sotto finestre ciascuna delle quali può
visualizzare un documento HTML indipendente dagli altri.
<html>
<head>
<title>Esempio di frame</title>
</head>
<frameset rows="15%,*">
<frame src="file1.html">
<frame src="file2.html">
</frameset></html>
L'attributo scr serve per poter indicare quali file
html devono essere caricati nei vari frame.
56/69
I Frame
Sebbene i documenti che riempiono i frame siano normali documenti HTML, il documento che contiene
i frame non ha il tag <body> all'interno del codice HTML. Il tag <frameset> sostituisce il tag <body> nel
documento con i frame.
<html>
<head>
<title>Esempio di frame annidati</title> </head>
<frameset cols="40%,*">
<frame src="file1.html">
<frameset rows="40%,33%,*">
<frame src="file2.html">
<frame src="file3.html">
<frame src="file4.html">
</frameset>
</frameset>
</html>
Il tag <frameset> ha sostanzialmente due importanti attributi:
-Rows, permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso,
significa che ci troviamo di fronte a una struttura a colonne.
-Cols, permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso
significa che ci troviamo di fronte una struttura a righe
57/69
I Frame: sistemi di misura della grandezza dei riquadri
dimensione fissa
percentuale
proporzionale
Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per
un totale di 6 riquadri:
<frameset rows="150,*" cols="100,200,*">
L’altezza della 1a riga è di 150 pixel, mentre la seconda si adatta al
resto della pagina. Le tre colonne sono larghe rispettivamente: 100
pixel, 200 pixel, e la terza colonna si adatta al resto della pagina
Questa sintassi crea un frameset che si adatta alla risoluzione. La
grandezza dei riquadri è espressa in percentuale:
<frameset rows="20%,80%" cols="25%,25%,50%">
In questo caso la ripartizione è proporzionale:
<frameset rows="1*,3*" cols="3*,2*,1*">
 per quel che riguarda le righe: l’altezza viene suddivisa in 4 parti
(1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3
 per quel che riguarda le colonne: l’altezza viene suddivisa in 6 parti
(3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2
e la terza 1
58/69
Frameset: attributi
<frameset
frameborder="no"
cols="25%,75%">
L’attributo frameborder (di default impostato a “yes”)
permette di specificare se nel frameset devono essere
presenti i bordi.
<frameset
framespacing="20"
border=”20”
cols="25%,75%">
framespacing funziona solo con Internet Explorer e
permette di impostare lo spazio tra un frame e l’altro. Di
fatto equivale all’attributo border, che permette di
specificare
lo
spessore
dei
bordi
in
pixel.
Per mantenere la compatibilità con Internet Explorer 4 (che
non legge l’attributo border), di solito si specificano sia il
framespacing, sia il border.
<frameset border="10"
framespacing="10"
bordercolor=”#FF0000”
cols="25%,75%">
bordercolor permette di specificare il colore dei bordi del
frameset.
59/69
Frame: attributi
<frame
src=”nomefile.html”
scrolling=”no”>
<frame
src=”nomefile.html”
scrolling=”auto”>
L’attributo scrolling (di default impostato a
“yes”) specifica se si vuol consentire o meno
all’utente di poter scorrere il frame. Nel caso sia
impostato a “no”, il frame non ha la barra di
scorrimento anche nel caso in cui il contenuto
della pagina HTML vado oltre la cornice.
“scrolling” può anche essere impostato ad
“auto”.In questo caso la barra di scorrimento
compare in automatico, ma solo se necessario.
<frame
src=”nomefile.html”
scrolling=”no”>
<frame
src=”nomefile.html”
scrolling=”no”
noresize>
noresize impedisce al singolo frame di essere
ridimensionato.
Se
usato
insieme
a
scrolling=”no”, di fatto “blocca” il contenuto
del frame.
Un uso maldestro di questa tecnica potrebbe
però
impedire
all'utente
la
corretta
visualizzazione dei contenuti.
60/69
Frame: attributi
<frame
src=”nomefile.html”
frameborder=”0”>
frameborder consente di far apparire o meno i
bordi del frame (i valori ammessi sono "0" e "1",
ovvero
"no"
e
"yes").
Questo attributo permette di specificare un
valore differente da quello impostato nel
frameborder del <frameset>
<frame
marginwidth="50"
marginheight="50"
src=“nomefile.html">
marginheight e marginwidth permettono di
impostare la distanza verticale (marginheigth)
e orizzontale (marginwidth) tra i bordi del
frame e il suo contenuto.
61/69
Frameset: il target dei link
L’attributo target consente di specificare qual è la destinazione del link; con questa
sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel
riquadro che riteniamo più opportuno:
<a href=”paginaDaLinkare.html” target=”nomeDelFrame”>
Esistono, poi, delle parole chiave che consentono di ricaricare i link in destinazioni
predefinite:
target=”_blank”
Apre il link in una nuova finestra, senza nome
target=”_self”
Apre il link nel frame stesso (è così di default)
target=”_parent”
Il documento viene caricato nel frameset precedente a quello
corrente
(più
esattamente
nel
frame
genitore).
Il
comportamento di “_parent” è particolarmente evidente in una
struttura annidata in cui alcune pagine HTML contengono a loro
volta dei frameset: in questo caso viene caricato il contenuto
del link nel frameset immediatamente precedente alla pagina
del link.
target=”_top”
Il documento viene caricato nella finestra originale, cancellando
ogni struttura a frame. Più esattamente il documento viene
carictao nella parte più alta ("top") della struttura, ed è questo
il motivo per cui il frameset stesso viene annullato e sostituito
dal contenuto del link.
62/69
HTML: separare il layout dal contenuto
Problema: Se avessimo tutti i titoli del nostro documento in rosso e in grassetto e decidessimo di
trasformarli in verde e in corsivo, con l’HTML classico (cioè l’HTML 3.2) dovremmo
modificare a mano ogni tag contente le indicazioni della formattazione.
Fogli di stile: consentono di separare il contenuto dalla formattazione
<p>
<font color="green">
<i>
titolo 1
</i>
</font>
<p class="formattaTitoli">
titolo 1
</p>
</p>
63/69
HTML: MAIUSCOLO O MINUSCOLO?
 L’HTML è “case unsensitive”, cioè indipendente dal formato.
Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in
minuscolo.
<P ALIGN=”RIGHT”>
e
<p align=”right”>
vengono letti allo stesso modo dal browser.
- Per aumentare la leggibilità del codice è consigliabile scrivere in maiuscolo il nome
del tag
(es: <P>)
e in minuscolo gli attributi (es: align=”right”). Quindi:
<P align=”right”>
64/69
Esercitazione: riprodurre le seguenti due pagine
HomePage.htm
Biografia.htm
65/69
Index.htm
<html>
<head>
<title>Benvenuti nella mia pagina personale</title>
</head>
<body bgcolor="#0000FF">
<p><b><font face="Arial" size="4" color="#FF1000">Benvenuti
nella mia pagina
personale!</font></b></p>
<p><font face="Arial">Esplorando questo sito potrete consultare la
mia biografia</font></p>
<p>&nbsp;</p>
<p><img border="0" src="FPTutor001.jpg" width="216"
height="140"></p>
</body>
</html>
66/69
Biografia.htm …
<html>
<head>
<title>La mia biografia</title>
</head>
<body>
<p><b><font color="#0000FF" size="4">La mia biografia</font></b></p>
<table border="1" width="55%" id="table1">
<tr>
<td width="194" bgcolor="#FF00FF"><b>Data di nascita</b></td>
<td>03/09/1980</td>
</tr>
<tr>
<td width="194" bgcolor="#FF00FF"><b>Luogo di nascita</b></td>
<td>Lecce</td>
</tr>
<tr>
<td width="194" bgcolor="#FF00FF"><b>Studi effettuati</b></td>
<td>Laurea in Biologia</td>
</tr>
67/69
… Biografia.htm
<tr>
<td width="194" bgcolor="#FF00FF"><b>Esperienze
lavorative</b></td>
<td>Collaborazione presso laboratorio di analisi</td>
</tr>
</table>
</body>
</html>
68/69
IL LINGUAGGIO HTML
Riferimenti: http://www.w3.org/TR/REC-html40/index/list.html
69/69