Sei sulla pagina 1di 56

HTML

Hyper Text Markup Language


Linguaggio per la marcatura degli
ipertesti

22/04/2012 Emanuela Soriani 1


UNITA’ DIDATTICHE
1. Elementi di base di HTML e CSS.
2. XML XHTML HTML5
3. Elementi di strutturazione di un documento.
4. Collegamenti ipermediali, immagini e
animazioni.
5. Moduli (form).

22/04/2012 Emanuela Soriani 2


ELEMENTI DI BASE DI HTML
• Cos’è un documento ipermediale? Un documento che contiene testi,
immagini, filmati, suoni.
• Da cosa è costituito un documento ipermediale? Da contenuto, struttura,
presentazione.
• Che cos’è l’HTML? E’ un linguaggio per la marcatura di ipertesti: è un
modo per dire ai browser web come mostrare una pagina.
• Come vengono espresse le Istruzioni HTML ? Vengono espresse tramite
codici che prendono il nome di tag. La maggior parte delle istruzioni
possiede una coppia di tali codici che serve per delimitare la parte di
documento in cui il comando ha effetto.
• Cosa occorre per visualizzare documenti HTML? Qualunque browser
attualmente in commercio.
• Cosa occorre per scrivere documenti HTML? Qualunque programma di
videoscrittura, perché una pagina HTML è un normale file di testo con
estensione .htm o .html.
22/04/2012 Emanuela Soriani 3
•Il linguaggio HTML fu sviluppato nel 1989 da alcuni ricercatori del CERN di
Ginevra che si chiedevano in che modo avrebbero potuto “linkare” differenti
servizi e documenti gli uni con gli altri.
•Tutte le pagine HTML risiedono sul computer server; ad ogni richiesta del
computer client vengono trasferite tramite Internet sul client; la visualizzazione
è a carico del client per mezzo del browser.
•Tutti i documenti HTML hanno la struttura che segue:

22/04/2012 Emanuela Soriani 4


STRUTTURA DI UNA PAGINA TIPO
<!DOCTYPE HTML PUBLIC=“//W3C// versione usata//EN”>
<HTML>
<HEAD>
<TITLE> titolo della pagina</TITLE>
<META NAME = “keywords” CONTENT= “ par1,par2,..”>
</HEAD>
<BODY>

<DIV> ………………</DIV>
<DIV> ………………</DIV>

</BODY>
</HTML>

22/04/2012 Emanuela Soriani 5


W3C
E’ un consorzio che si occupa di stabilire delle
regole per la pubblicazione dei documenti su
Web.
http://it.wikipedia.org/wiki/World_Wide_Web_Co
nsortium

22/04/2012 Emanuela Soriani 6


ELEMENTI DI UN DOCUMENTO
• Elementi semplici (BR - HR)
• Elementi contenitori (TABLE - BODY)
• Link (HREF)
• Oggetto multimediale (OBJECT)

22/04/2012 Emanuela Soriani 7


TIPI DI TAG
Ci sono vari tipi di tag:
• Tag di formattazione del testo
• Tag relativi alle liste
•Tag Anchor
•Tag per le immagini
•Tag per le tabelle
•Tag per i form
•Tag per i frame

22/04/2012 Emanuela Soriani 8


TAG DI FORMATTAZIONE TESTO
• <P> inizia un nuovo paragrafo, saltando una riga [</P>]
• <BR> inserisce un ritorno a capo, senza saltare righe
• <HR> inserisce una linea separatrice orizzontale
• <H1>……<H6> dimensione carattere (dal più grande al più piccolo)
</H1>…..</H6>
• <STRONG> <B> neretto, grassetto </STRONG> </B>
• <I> corsivo </I>
• <PRE> </PRE> non cambia dimensione testo e immagini se riduco la
finestra del browser.
• <CENTER> </CENTER> per allineare il testo
• <U> </U> testo sottolineato

22/04/2012 Emanuela Soriani 9


TAG DI FORMATTAZIONE TESTO
• <S> </S> cancellatura visibile
• <SUP> </SUP> carattere apice
• <SUB> </SUB> carattere pedice
• <STRIKE> </STRICHE> testo barrato (cancellatura visibile)
• <DIV> </DIV> crea un blocco di testo
• <EM> </EM> scrittura in corsivo
• <LEGEND> </LEGEND> crea un titolo per un FIELDSET
• <FIELDSET> </FIELDSET> crea dellemacro-aree all'interno dei form, e
grazie al tag <legend>, possiamo indicare il nome di ciascuna macro-
area.

22/04/2012 Emanuela Soriani 10


COMMENTI

I commenti aiutano a favorire la comprensione del testo. Non


tutte le istruzioni devono essere commentate, si trascurano
quelle il cui contenuto è facilmente deducibile dal testo.
Qualsiasi frase scritta fra i tag <!-- e --> viene interpretata
come commento e ignorata quindi dall’interprete dei tag.
<!-- questo è un commento -->

N.B. Poiché non tutti i browser sono in grado di interpretare


tutti i tag HTML a causa dei molti dialetti del linguaggio, un
browser che incontra un tag sconosciuto, lo ignora.

22/04/2012 Emanuela Soriani 11


CSS
Con il linguaggio HTML viene data solo una struttura ad un
documento, per poter dare anche una presentazione
occorre utilizzare le istruzioni CSS, altrimenti la
presentazione sarà quella di default del browser.
Dove è possibile inserire i comandi di stile CSS?
1. All’interno del body: fogli inline
2. All’interno dell’head: fogli di stile incorporati o interni
3. All’esterno del documento:fogli di stile esterni
La sintassi di uno stile si compone di te parti:
• Un elemento
• Una proprietà
• Un valore

22/04/2012 Emanuela Soriani 12


CSS stile inline
Uno stile di questo tipo perde molti dei vantaggi del CSS perché mischia il contenuto
da presentare con il modo di presentarlo. Questo metodo applica lo stile solo
all’elemento selezionato e non ad altri pertanto sarebbe da usare solo quando
uno stile deve essere utilizzato una sola volta. Viene utilizzata, per gli elementi,
la proprietà STYLE

ESEMPIO:
<HTML>
<HEAD>
<TITLE> esempio di stile in linea </TITLE>
</HEAD>
<BODY>
<P STYLE = “COLOR: RGB(0,0,255); FONT-SIZE:24pt”> esempio
paragrafo</P>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 13


CSS stile inline
Un altro esempio:

<HTML>
<BODY>
<H1 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:magenta”>esempioH1</H1>
<P STYLE =“COLOR:RGB(0,0,255);BACKGROUND:magenta”>esempioP </P>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 14


CSS interno
E’ suggeribile utilizzarlo quando un singolo documento ha un unico stile. Gli stili interni sono
definiti nella sezione HEAD usando il tag <STYLE>; il browser si preoccupa di formattare
il documento in base a quanto specificato nel tag stesso.
ESEMPIO:
<HTML>
<HEAD>
<TITLE> esempio di stile interno </TITLE>
<STYLE TYPE = “TEXT/CSS”>
P {COLOR: RGB(255,0,0) ;}
</STYLE>
</HEAD>
<BODY>
<P> primo paragrafo </P>
<P> secondo paragrafo </P>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 15


CSS con fogli di stile esterni
Una pagina di stile esterna è utile, per esempio, per applicare lo stesso stile a più
documenti html. Con una pagina di stile esterna si può cambiare l’aspetto di
tutto un sito web modificando un solo file. Per segnalare l’esistenza di un file
che contiene gli stili (tale file ha estensione .css) esiste il tag <LINK> che deve
essere inserito nell’intestazione:
<head>
<link rel =“stylesheet” type=“text/css” href=“nomefile.css”>
</head>

Una pagina di stile può essere scritta con qualunque editor, per esempio il blocco note
di windows, anche se esistono software particolarmente pratici per la creazione
e la modifica degli stili come, per es Top Style della BradSoft, scaricabile
gratuitamente nella versione Lite all’indirizzo www.bradsoft.com

22/04/2012 Emanuela Soriani 16


Esempio css con fogli esterni
File provastili.html
<html>
<head>
<link rel=“stylesheet” href=“foglioesterno.css” type=“text/css”>
</head>
<body>
<P> esempio di paragrafo usando un colore </P>
<P> lo sfondo ha un altro colore </P
</body>
</html>
File foglioesterno.css
P{ color:rgb(255,0,0); text-align:center; background:blue;}

22/04/2012 Emanuela Soriani 17


css : classi di elementi
E’ possibile definire stili differenti per il medesimo elemento di html utilizzando le
classi. Supponiamo di voler disporre di due tipi di paragrafo da utilizzare in un
documento, uno giustificato a destra e un altro a sinistra. Segue un esempio di un
file.css che contiene la definizione delle classi e un file.html che utilizza le classi
definite.
p.right {text-align:right}
p.left { text - align : left}
<HTML>
<HEAD>
<TITLE>classi css</TITLE>
<link rel="stylesheet" type="text/css" href="stile.css">
</HEAD>
<BODY>
<p class="right"> paragrafo allineato a destra </p>
<p class="left"> paragrafo allineato a sinistra </p>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 18


ESERCIZI DI FINE U.D.1
• Far comparire nella barra del titolo della finestra del browser il proprio
nome e cognome, visualizzare successivamente il proprio cognome e
nome, separati da una linea orizzontale, in modo che il cognome sia
scritto con il carattere più grande ed il nome con quello più piccolo.

• Inserire due paragrafi nella pagina html; il primo, scritto in neretto, deve
contenere la frase: “oggi sono contento in quanto ho iniziato il corso html”;
il secondo, scritto in corsivo, deve contenere la frase:”questa è una prova
di formattazione testo”. I due paragrafi devono essere divisi da una linea
orizzontale.

22/04/2012 Emanuela Soriani 19


•Visualizzare sulla pagina la scritta: “questo e’ un esempio di grassetto”;
“questo è un esempio di corsivo” ; “questa frase è centrata”.
•Visualizzare una pagina in cui si utilizza il tag <PRE> e verificare cosa
succede.

22/04/2012 Emanuela Soriani 20


XML
XML (sigla di eXtensible Markup Language) è un linguaggio di
markup, ovvero un linguaggio marcatore basato su un
meccanismo sintattico che consente di definire e controllare il
significato degli elementi contenuti in un documento o in un
testo.
Costituisce il tentativo di produrre una versione semplificata di Standard
Generalized Markup Language (SGML) che consenta di definire in modo
semplice nuovi linguaggi di markup da usare in ambito web. Il nome indica
quindi che si tratta di un linguaggio marcatore (markup language) estensibile
(eXtensible) in quanto permette di creare tag personalizzati.

22/04/2012 Emanuela Soriani 21


ESEMPIO XML
<?xml version="1.0" encoding="UTF-8"?>
<utenti>
<utente> <nome>Luca</nome>
<cognome>Cicci</cognome>
<indirizzo>Milano</indirizzo>
</utente>
<utente>
<nome>Max</nome>
<cognome>Rossi</cognome>
<indirizzo>Roma</indirizzo>
</utente>
</utenti>

N.B. XML E’ CASE SENSITIVE

22/04/2012 Emanuela Soriani 22


XHTML
• L'XHTML (acronimo di eXtensible HyperText Markup Language, Linguaggio di
marcatura di ipertesti estensibile) è linguaggio di marcature che associa alcune
proprietà dell‘XML con le caratteristiche dell‘HTML: un file XHTML è un pagina
HTML scritta in conformità con lo standard XML.
• Il linguaggio prevede un uso più restrittivo dei tag HTML sia in termini di validità
che in termini di sintassi per descrivere solo la struttura logica della pagina, mentre
il layout e la resa grafica sono imposti dai fogli di stile a cascata(Cascading Style
Sheets, CSS).
• L'XHTML è nato ufficialmente il 26 gennaio 2000 come standard del W3C e può
essere definito tecnicamente una riformulazione dell‘HTML 4.01 in XML 1.0; è una
sorta di "ponte" tra questi due linguaggi.

22/04/2012 Emanuela Soriani 23


HTML5
• L'HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in fase di
definizione (bozza) presso il W3C. La definizione delle specifiche iniziali del linguaggio è stata effettuata da
un gruppo di lavoro esterno al W3C. Attualmente i lavori sono seguiti sia dal gruppo esterno che dal W3C
HTML working group. L'intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi
comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o
a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i browser
esistenti, compresi quelli obsoleti.
• L'HTML5 si propone come evoluzione dell'attuale HTML4.1 ed è stato concepito in alternativa all'ormai
fallito XHTML. Il World Wide Web Consortium ha annunciato che sarà pronto per il luglio 2014.
. Le novità introdotte dall'HTML5 rispetto all'HTML 4 sono finalizzate soprattutto a migliorare il
disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori,
eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio.
Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal
browser, per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di
Gooogle o altri servizi analoghi) anche in assenza di collegamento a Internet.

22/04/2012 Emanuela Soriani 24


ELEMENTI DI STRUTTURAZIONE DI
UN DOCUMENTO
• Le tabelle
• Gli elenchi non ordinati
• Gli elenchi ordinati
• I caratteri speciali

22/04/2012 Emanuela Soriani 25


LE TABELLE
Gli elementi fondamentali per definire la struttura di una tabella sono:
•TABLE che indica l’inizio e la fine di una tabella
•TR che indica l’inizio di una nuova riga
•TD che indica l’inizio di una nuova cella all’interno di una riga

Ecco un esempio di una tabella conj due righe e tre colonne:


<HTML>
<HEAD>
<TITLE> esempio di tabella
</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> A11 </TD>
<TD> A12 </TD>
<TD> A13 </TD>
</TR>
<TR>
<TD> A21 </TD>
<TD> A22 </TD>
<TD> A23 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
22/04/2012 Emanuela Soriani 26
Ancora sulle tabelle
Oltre ai tag visti in precedenza, ne esistono altri per migliorare l’aspetto della tabella.
<TH> </TH> definisce le intestazioni della tabella.
<CAPTION> </CAPTION> assegna un titolo alla tabella
Alcuni attributi del tag TABLE:
<TABLE BORDER=intpixel CELLSPACING=intpixel CELLPADDING=intpixel ALIGN=left[center][right]>
<HTML>
<HEAD>
<TITLE> tabella-titolo </TITLE>
<BODY>
<TABLE BORDER=10 cellspacing=20 CELLPADDING=10 ALIGN=center>
<CAPTION> La divina Commedia</CAPTION>
<TH> Inferno</TH><TH> Purgatorio</TH><TH> Paradiso</TH>
<TR>
<TD ALIGN=CENTER> Canto 1</TD>
<TD ALIGN=CENTER> Canto 1</TD>
<TD ALIGN=CENTER> Canto 1</TD>
</TR>
<TR>
<TD ALIGN=CENTER> Canto 2</TD>
<TD ALIGN=CENTER> Canto 2</TD>
<TD ALIGN=CENTER> Canto 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 27


GLI ELENCHI NON ORDINATI

Sono utilizzati per elencare un insieme di voci che non necessitano di un ordine specifico. Per far questo si utilizzano i
tag:
• UL di apertura e chiusura <UL [type=circle] [type=square]>
• LI di sola apertura
Esempio:
<HTML>
<HEAD>
<TITLE> i colori del semaforo </TITLE>
</HEAD>
<BODY>
<UL>
<LI> rosso
<LI> verde
<LI> giallo
</UL>
</BODY>
22/04/2012 Emanuela Soriani 28
</HTML>
GLI ELENCHI ORDINATI
Sono utilizzati per rappresentare un insieme di voci che devono seguire un ordine specifico. Per fare questo si usano i tag:
• OL di apertura e chiusura
• LI di sola apertura
Esempio:
<HTML>
<HEAD>
<TITLE> i primi tre classificati alla gara di Paperopoli </TITLE>
</HEAD>
<BODY>
<OL> <OL[type=I] [type=i] [type=A] [type=a] >
<LI> Pippo
<LI> Pluto
<LI> Minnie
</OL>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 29


I CARATTERI SPECIALI
Durante la scrittura di un testo talvolta è necessario scrivere caratteri speciali, es :
< > - “ &. Lo spazio bianco è anch’esso un carattere speciale. Il browser riconosce
solo uno spazio bianco tra una parola ed un’altra, perciò se volessimo lasciare più
spazi bianchi useremo il carattere speciale &nbsp. La e commerciale indica
l’inizio di un carattere speciale, mentre ; ne indica la fine. Segue un esempio di
caratteri speciali, che devono essere scritti in minuscolo:
&nbsp; spazio
&lt; minore
&gt; maggiore
&amp; &
&quot; virgolette
&shy; trattino

22/04/2012 Emanuela Soriani 30


ESERCIZI DI FINE U.D.3
• Creare una tabella di 6 righe e 3 colonne che contenga
l’orario delle lezioni dei primi tre giorni della settimana
evidenziando in grassetto le ore di informatica e sistemi.
• Creare un elenco non ordinato che contenga i nomi dei colori
dell’arcobaleno.
• Creare un elenco ordinato con l’orario delle lezioni del sabato,
prescrivendo la dicitura (in caratteri grandi) “il mio orario di
sabato”.
• Provare a visualizzare i caratteri speciali elencati nella slide.

22/04/2012 Emanuela Soriani 31


COLLEGAMENTI IPERMEDIALI,
IMMAGINI, ANIMAZIONI
I collegamenti ipertestuali o link sono riferimenti ad altri documenti
o ad altri elementi HTML; sono cioè strumenti che ci permettono di
realizzare ipermedia o relazioni con altri documenti. Per fare ciò si
utilizza l’elemento A (ancora) con i tag di apertura: <A> e di
chiusura: </A>. Si possono avere i seguenti tipi di link:
•Link esterni al documento HTML
•Link interni al documento HTML
•Inserimento immagini
•Mappe sensibili
22/04/2012 Emanuela Soriani 32
LINK ESTERNI
Sono collegamenti ad altri documenti HTML o oggetti multimediali (immagini, animazioni,
suoni). Per realizzare un link occorre procedere in questo modo:
•Aprire l’ancora
•Specificare il documento a cui si fa riferimento con l’attributo HREF seguito dall’URL (Uniform
Resource Locator) terminato dal carattere >
•Aggiungere il testo che ci permetterà di collegarsi al documento
•Chiudere l’ancora

Esempio: vogliamo fare un link al sito dell’ITI Cardano


<A HREF=“http://www.cardano.pv.it”> sito dell’ITIS Cardano di Pavia </A>

22/04/2012 Emanuela Soriani 33


LINK INTERNI
E’ un collegamento ad una determinata posizione dello stesso documento HTML.
I link interni detti bookmark o segnalibri, si indicano seguendo questa sintassi:
<A HREF=“#nome”> stringa di caratteri di spiegazione </A>
Il nome verrà definito all’interno dello stesso documento con l’attributo NAME o ID
Esempio:
……………
<A HREF=“#riassunto”> riassunto del film </A>
<A NAME=“riassunto”> </A>
I links interni vengono usati, soprattutto, quando la pagina è molto lunga ed è
conveniente mettere un sommario all’inizio della pagina stessa.
Vedi esempio nella slide seguente:

22/04/2012 Emanuela Soriani 34


<HTML>
<HEAD>
<TITLE> sommario</TITLE>
</HEAD>
<BODY>
<A NAME ="sommario">
<UL>
<LI> <A HREF="#parte1"> prima parte del discorso </A>
<LI> <A HREF="#parte2"> seconda parte del discorso</A>
<LI> <A HREF="#parte3"> terza parte del discorso </A>
</UL>
</A>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR>
<A NAME="parte1"> nella prima parte del mio discorso.......</A>
<A HREF="#sommario"> vai al sommario </A>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR>
<A NAME="parte2"> nella seconda parte del mio discorso.. </A>
<A HREF="#sommario"> vai al sommario </A>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<A name="parte3"> nella terza parte del mio discorso</A>
<A HREF="#sommario"> vai al sommario </A>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

</BODY>
</HTML>

22/04/2012 Emanuela Soriani 35


IMMAGINI
Per inserire un’immagine in un documento html si utilizza l’elemento IMG, la cui sintassi è
la seguente:
<IMG SRC=“URL”>
URL è il path name (potrebbe anche essere un http)
N.B. Il file richiamato deve essere di tipo GIF o JPG.
Il tag IMG ha dei parametri:
ALIGN= top, middle,bottom,left,right (allineamento immagine)
BORDER=“num” (per inserire un bordo attorno all’immagine, 0= senza bordo)
WIDTH=“num” (definisce l’ampiezza dell’immagine)
HEIGHT=“num” (definisce l’altezza dell’immagine)

22/04/2012 Emanuela Soriani 36


E’ possibile associare ad una immagine un’ancora: supponiamo, per esempio, di
visualizzare l’immagine dell’ITIS CARDANO e fare in modo che, cliccando su di
essa, venga fatto un link al sito della nostra scuola; per ottenere tale risultato, si
procede in questo modo:

<A HREF=“http://www.cardano.pv.it> <IMG SRC=“path fotografia”> </A>

22/04/2012 Emanuela Soriani 37


MAPPE SENSIBILI
Una mappa sensibile (o cliccabile) è un’immagine che presenta aree selezionabili dette
hot-spot (punti caldi). Queste aree contengono collegamenti ad altri documenti od oggetti.
Queste mappe si definiscono usando i tag MAP e AREA, un tag MAP può contenere più
tag AREA.
Esempio:Potremmo costruire una mappa geografica della regione Lombardia e mettere un
link diverso su ogni provincia. Cliccando su ogni provincia si può andare ad un URL
specificato.

22/04/2012 Emanuela Soriani 38


PAGINA HTML GEST.MAPPE
SENSIBILI
<HTML>
<HEAD>
<TITLE>
mappe-sensibili
</TITLE>
</HEAD>
<BODY>
<IMG SRC=“regione.jpg" USEMAP="#Lombardia">
<MAP NAME=“Lombardia”>
<AREA SHAPE="RECT" COORDS="0,0,146,84" HREF“Pavia.html">
<AREA SHAPE="RECT" COORDS="148,0,297,84" HREF=“Milano.html">
<AREA SHAPE="RECT" COORDS="0,86,146,180" HREF=“Lodi.html">
<AREA SHAPE="RECT" COORDS="148,86,297,180" HREF=“Brescia.html">
</MAP>
</BODY>
</HTML>

22/04/2012 Emanuela Soriani 39


22/04/2012 Emanuela Soriani 40
Nell’esempio precedente abbiamo utilizzato una mappa sensibile formata da
quattro rettangoli. Le forme possono però essere anche altre:
•CIRCLE o CIRC (è definito dalle coordinate del centro e da quelle di un
qualunque punto sulla circonferenza).
•POLYGON o POLY (è definito dalle coordinate relative ai suoi vertici; il numero
massimo di vertici è 100).

22/04/2012 Emanuela Soriani 41


ESERCIZI DI FINE U.D.4
• Creare tre link esterni a siti di cui si conosce l’indirizzo, inserendoli in un elenco
numerato.
• Realizzare una pagina HTML con il proprio orario scolastico e l’elenco degli alunni
della classe, legando i due oggetti (orario ed elenco alunni) con link interni.
• Creare una mappa sensibile a forma di rettangolo con quattro zone idealmente
potrebbero essere 4 locali di un appartamento, in modo che cliccando su ciascuna
zona, venga descritto il locale stesso.
• Creare una lista ordinata con i nomi dei giorni della settimana, facendo in modo di
mettere un segnalibro ad ogni giorno che lo colleghi all’orario scolastico di quel
giorno. Dare la possibilità di ritornare alla lista ordinata.
• Visualizzare delle immagini, provando gli attributi di del tag IMG SRC

22/04/2012 Emanuela Soriani 42


MODULI (FORM)

I I forms (o moduli) servono per creare delle maschere utente per


l’immissione dei dati che vengono poi inviati via rete ad un
server.

22/04/2012 Emanuela Soriani 43


MODULI
I moduli o form sono contenitori di elementi HTML. Questi elementi permettono all’utente di
interagire con il sistema realizzando una GUI (graphic user interface), per mezzo della quale
l’utente può effettuare delle scelte ,fornire delle risposte e inserire dei dati. Ciascun elemento
viene individuato da un nome.
L’interazione tramite form avviene in due fasi:
•Creazione del form con gli elementi per acquisire i dati in input.
•Elaborazione dei dati; questa elaborazione può avvenire in due modi: a) direttamente sul
computer client tramite programmi di scripting (lato client), b) inviando i dati inseriti nella form
al server il quale li elaborerà mediante un programma di scripting (lato server).
I form sono definiti dai tag: <FORM> </FORM> che non possono essere nidificati.
Questa è la sintassi:
<FORM [ACTION=“URL-dello-script”] [METHOD=“GET | POST”]>
elementi di HTML
</FORM>
22/04/2012 Emanuela Soriani 44
ELEMENTO INPUT
La sintassi di questo elemento è:
<INPUT TYPE=“tipoElemento” NAME=“nomeelemento” VALUE=“valoreiniziale”>
TYPE può essere:
•“TEXT” : è un elemento grafico formato da una singola riga in cui l’utente può inserire dei valori di
tipo stringa, possiede gli attributi: NAME, SIZE, VALUE, MAXLENGHT.
Es:<INPUT TYPE=“TEXT” NAME=“UTENTE”SIZE=20 VALUE=“digita il nome”>

•“PASSWORD” : permette di inserire un testo non visibile sullo schermo perché mascherato da
caratteri *. Es.
Es:<INPUT TYPE=“PASSWORD” NAME=“codice”SIZE=8> ho come risultato: • • • • • • • •

•HIDDEN (campo nascosto): è un particolare campo di testo non visibile nel form. Questo tipo di
campo è usato per passare informazioni agli script del documento o agli script del server.
Es. <INPUT TYPE=“HIDDEN” NAME=“utente”VALUE=“Pippo”> Il nome Pippo viene passato agli
script senza essere visualizzato.
22/04/2012 Emanuela Soriani 45
I campi TEXTAREA
E’ un particolare campo di tipo testo che utilizza più righe e perciò permette di inserire
più informazioni. E’ un vero e proprio oggetto HTLM.
Es. <TEXTAREA NAME=“utente”ROWS=nrighe COLS=ncolonne>
contenuto
</TEXTAREA>
Gli attributi ROWS e COLS indicano, rispettivamente, il numero di righe e il numero di
colonne dell’area di testo. “Contenuto” è tutto ciò che verrà visualizzato all’interno
dopo che il campo sarà disegnato sullo schermo.

22/04/2012 Emanuela Soriani 46


LE caselle DI CONTROLLO

Dette anche checkbox, vengono utilizzate per registrare informazioni del tipo: si/no,
vero/falso oppure per scegliere tra più opzioni disponibili. Quando una casella è
selezionata, assume valore true, altrimenti false.Per impostare il valore true, si utilizza
l’attributo CHECKED. L’attributo NAME non visualizza alcun valore vicino alla casella, per
farlo occorre scrivere la descrizione nell’html.
Es:
Pavia<INPUT TYPE=“CHECKBOX” NAME=“cb1” CHECKED>
Milano <INPUT TYPE=“CHECKBOX” NAME=“cb2”>
Roma<INPUT TYPE=“CHECKBOX” NAME=“cb3”>
Pavia sarà impostata a true, Milano e Roma a false.

22/04/2012 Emanuela Soriani 47


Le caselle di SCELTA ALTERNATIVA

Sono dette radio box o radio button, consentono una selezione esclusiva. Per creare
un gruppo di radio box, occorre assegnare lo stesso nome a tutti. Una sola casella può
essere selezionata, se ne selezioniamo più di una, avrà effetto solo l’ultima selezionata.
Es.
Pavia <INPUT TYPE=“RADIO” NAME=“rb”>
Milano<INPUT TYPE=“RADIO” NAME=“rb”>
Roma<INPUT TYPE=“RADIO”NAME=“rb”CHECKED>

22/04/2012 Emanuela Soriani 48


Le caselle di selezione, scelte da una
lista
Select ha la forma di un elenco a discesa o di un menù di voci, la sua sintassi è:
<SELECT NAME=“NomeSelect”SIZE=NRighe[MULTIPLE]>
<OPTION VALUE=n1 [SELECTED]>stringa1
<OPTION VALUE=n2 [SELECTED]>stringa2
…………………………………………………..
<OPTION VALUE=nn [SELECTED]>stringan
</SELECT>

•OPTION definisco i singoli elementi della lista


•MULTIPLE scelta multipla possibile
•SELECTED valore di default da presentare nella visualizzazione della casella
•VALUE valore da restituire quando l’elemento è selezionato
•SIZE numero di righe della lista da visualizzare

22/04/2012 Emanuela Soriani 49


Es.1 Es.2

<SELECT NAME=“Lista1”> <SELECT NAME=“L1”SIZE=4>


<OPTION VALUE=N1>Roma
<OPTION VALUE=N1 SELECTED>Roma <OPTION VALUE=N2>Milano
<OPTION VALUE=N2>Milano <OPTION VALUE=N3>Torino
<OPTION VALUE=N4>Pescara
<OPTION VALUE=N3>Torino </SELECT>
<OPTION VALUE=N4>Pescara
In questo caso vengono visualizzati tutti i
</SELECT> valori.

In questo esempio verrà visualizzata una


casella con scritto Roma

22/04/2012 Emanuela Soriani 50


I Pulsanti
Se in un elemento INPUT si imposta l’attributo TYPE al valore BUTTON, si ottiene un
elemento pulsante.
Es.:
<INPUT TYPE=“BUTTON”NAME=“Bottone1”VALUE=“CALCOLA”>
Verrà visualizzato un bottone con la scritta “CALCOLA”
N.B. Il significato dei pulsanti è quello di essere associati ad un programma di script.

22/04/2012 Emanuela Soriani 51


Pulsanti Particolari
Utilizzando il valore SUBMIT per l’attributo TYPE, si ottiene un pulsante che, una volta premuto, invia il
contenuto degli elementi del form al server dal quale ha ottenuto la pagina html che sta visualizzando.
Es. <INPUT TYPE=“SUBMIT” VALUE=“INVIA”>
Si ottiene un pulsante che al suo interno ha la scritta “INVIA”.

Utilizzando il valore IMAGE per l’attributo TYPE, si ottiene un pulsante simile al SUBMIT, che contiene però una
immagine grafica.
Es. <INPUT TYPE=“IMAGE” SRC=”nomeimmagine.gif”>
Si ottiene un pulsante che al suo interno ha nomeimmagine.

Utilizzando il valore RESET per l’attributo TYPE, si ottiene un pulsante che, una volta premuto, riporta tutti i
valori dei campi del form al loro valore iniziale (default). Questo valore poterebbe essere utilizzato per annullare
tutti i dati inseriti.
Es. <INPUT TYPE=“RESET” VALUE=“annulla i dati immessi”>

22/04/2012 Emanuela Soriani 52


<HTML>
<HEAD>
<TITLE> Esempi di form </TITLE>
</HEAD>
<BODY>
<FORM>
<H3>Informazioni personali</h3>
password <INPUT TYPE="PASSWORD" NAME="USER" SIZE=8>
Nome <INPUT TYPE=TEXT><BR>
Cognome<INPUT TYPE=TEXT><BR>

<INPUT TYPE="RADIO"NAME="SESSO" VALUE="MASCHIO">Maschio<BR>


<INPUT TYPE="RADIO"NAME="SESSO" VALUE="FEMMINA">Femmina<BR>
sport praticati<BR>
Nuoto <INPUT NAME="N" TYPE="CHECKBOX" >
Tennis<INPUT NAME="T" TYPE="CHECKBOX" >
Calcio<INPUT NAME="C" TYPE="CHECKBOX">
Atletica<INPUT NAME="N" TYPE="CHECKBOX"><BR>
Provincia residenza
<SELECT NAME="utenti" SIZE=n MULTIPLE>
<OPTION VALUE=Nome_1 >Milano
<OPTION VALUE=Nome_2 >Pavia
<OPTION VALUE=Nome_3>Pescara
<OPTION VALUE=Nome_4>Pisa
<OPTION VALUE=Nome_5D>Roma
</SELECT>
hobby
<TEXTAREA NAME=area ROWS=4 COLS=30>
hobby
</TEXTAREA><BR>
<INPUT TYPE=SUBMIT VALUE="INVIA">
<INPUT TYPE=RESET VALUE="annulla i dati immessi"><BR>
22/04/2012 </FORM> Emanuela Soriani 53
</BODY>
</HTML>
ESERCIZI FINE U.D.5
• Realizzare un form che permetta di inserire i dati anagrafici di uno studente, più
precisamente: Il nome, il cognome, il sesso (caselle di scelta alternativa), gli sport
praticati (nuoto, tennis, calcio, atletica; mediante le caselle di controllo), la
provincia di residenza (mediante le caselle di selezione inserendo le città di Pavia,
Milano, Genova, Firenze, Roma), gli hobbies (campo di text area). Predisporre
successivamente un pulsante di invio dati ed un pulsante per reinpostare i dati.
• Impostare un form “schedina totocalcio” per segnare i risultati di una giornata di
campionato.
• Creare, tramite form, una scheda tecnica di presentazione per un’automobile.
• Creare un form per l’immissione dei dati di un prodotto di magazzino.

22/04/2012 Emanuela Soriani 54


ESERCIZI AGGIUNTIVI U.D.5
• Creare un form per acquisire i dati anagrafici degli studenti del triennio ITIS e, più precisamente: Matricola
(password), Cognome, Nome, Data di nascita, Sesso, Indirizzo del corso di studi (informatici, chimici,
elettronici, meccanici), Provincia di residenza (PV, MI, LO, AL, BS), un campo di testo in cui ogni studente
spiega cosa intende fare alla fine della scuola superiore. Prevedere un pulsante per annullare i dati
immessi ed un pulsante(con al suo interno il logo dell’ITIS) per l’invio dei dati inseriti allo script.

22/04/2012 Emanuela Soriani 55


FINE

22/04/2012 Emanuela Soriani 56