HTML HiperText Markup Language

Transcript

HTML
HyperText Markup Language
Linguaggio base per produrre documenti per World Wide Web
(WWW o WEB)
Documenti WEB
pagine ipermediali che contengono
•
testo
•
immagini
•
suoni
•
legami ipertestuali a
altre pagine
programmi
immagini, suoni, ...
Pagine localizzate su server web e visualizzate da un client
(browser)
HTML
Per visualizzare le pagine HTML si usano programmi chiamati
Web browser (Microsoft Internet Explorer, Mozilla Firefox, Google
Chrome, Opera, Safari…)
Le pagine WWW sono trasferite attraverso la rete Internet usando
un protocollo particolare HTTP (HyperText Transfer Protocol)
costruito al di sopra di TCP/IP (base di Internet)
Localizzate mediante un ben preciso sistema di indirizzamento:
URL (Uniform Resource Locator)
HTML
Caratteristiche
HTML è un linguaggio di formattazione di documenti
Un documento HTML è un file di testo (file ASCII) contenente dei
comandi per
•
formattazione
•
inserimento parti multimediali
•
link ipertestuali
I comandi (TAGS) hanno una forma sintattica particolare
<NOME-COMANDO>
informazioni
</NOME-COMANDO>
I comandi (tags) hanno nomi mnemonici
HTML
GLI EDITOR
• Editor di puro testo aiutano a creare file
richiamando i tag e gestendo link.
• Editor WYSIWYG (Frontpage -Dreamweaver)
• Usare tutti gli strumenti, ma può essere
necessario utilizzare il linguaggio HTML
direttamente usando gli editor di tag.
HTML
•
•
•
•
•
WYSIWYG
What you see is what you get
La capacità di un programma grafico di
visualizzare esattamente sullo schermo la
pagina una volta stampata (pubblicata).
Ciò che si vede è ciò che si ottiene.
DREAMWEAVER
FRONTPAGE
• NVU
HTML
Un documento HTML è costituito da due parti
<HTML>
<HEAD>
descrizione delle caratteristiche del documento
</HEAD>
<BODY>
documento vero e proprio
</BODY>
</HTML>
HTML
HEAD
la parte fondamentale è il titolo del documento che verrà
visualizzato nella finestra del browser.
ATTENZIONE: poiché il titolo viene usato anche per costruire gli
indici automatici usati dai motori di ricerca è importante che esso
sia significativo.
<HEAD>
<TITLE>
Sistemi - prova di HTML
</TITLE>
</HEAD>
HTML
IL TAG META
<HEAD>
<TITLE>
Sistemi - prova di HTML
</TITLE>
<meta name="keywords" content=“sistemi, HTML, ITI,
Medi">
<meta name="description" content=“Prova di HTML per la
classe … dell’ITI Medi">
<meta name=“author" content=“Mario Catalano">
</HEAD>
HTML
Il tag <Doctype>
Seguendo le indicazioni del W3C (consorzio internazionale che si occupa di
armonizzare l'utilizzo dell'HTML) Doctype deve essere il primo elemento ad
aprire il documento. Questo vuol dire che andrebbe posto prima di <HTML>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Questa riga fornisce alcune informazioni sul documento:
•
•
•
•
HTML PUBLIC: il documento è pubblico
W3C: il tipo di HTML pubblico è gestito dal W3C
DTD HTML 4.01: la versione di HTML supportata è la 4.01
EN: la lingua del documento è l'inglese
L'uso di DOCTYPE non è obbligatorio e può essere omesso. Certamente un suo
utilizzo aiuta il server Web ad interpretare correttamente il documento, ma la sua
assenza non è condizionante ai fini della corretta visualizzazione.
HTML
BODY
Contiene il documento (pagina) vero e proprio
Il testo può essere inserito liberamente nella parte BODY e verrà
visualizzato secondo le direttive di formattazione.
<BODY> corpo della pagina </BODY>
Più avanti vedremo vari attributi di Body
HTML
HEADERS
<H1> titolo1 </H1>
...
<H6> titolo6 </H6>
permettono di indicare quali parti di testo vengono usate come
titoli.
H1, ..., H6 sono usati anche per controllare le dimensioni dei
caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri
piccoli.
HTML
COMANDI PER ANDARE A CAPO
<BR> a capo
<P> a capo e inizio nuovo paragrafo (salta una linea)
• HTML non è sensibile ai caratteri maiuscoli e minuscoli nei
comandi
• HTML non è sensibile ai blank e alle linee vuote
HTML
ATTRIBUTI DI BODY
Il comando BODY ha attributi che permettono di stabilire lo stile
dei caratteri
<BODY bgcolor="colore sfondo"
text="colore testo"
background="pathname del file con immagine per lo sfondo"
link="colore link da visitare"
vlink="colore link visitati"
alink=”colore link attivo (sul quale è stato premuto
ma non rilasciato il pulsante del mouse)>.
HTML
Il colore può essere specificato con:
• red, yellow, ...
• codice esadecimale
00 00 00 (rosso verde blu vengono combinati numericamente
per formare tutti i colori)
Di default si ha sfondo bianco, testo nero, link da visitare blu, link
visitati rossi.
– Es: <body Bgcolor =“#00000” text=“#FFFFFF”
link=“#9805ff”> Crea uno sfondo nero, testo bianco e link non visitati di
colore viola.
HTML
DIMENSIONI CARATTERI
<BASEFONT> e <FONT>
Dimensioni dei caratteri da 1 (piccolo) a 7 (grande)
<BASEFONT size=4>
<FONT size=3> testo a dimensione 3 </FONT>
... si ritorna a basefont
<FONT size=+1> dim+1 del precedente </FONT>
HTML
Il comando FONT ha in realtà tre attributi
•
size per cambiare la dimensione
•
color per cambiare il colore
•
face per cambiare il font
<FONT size=“5” color="red" face=“Courier”>
Questo testo viene visualizzato in rosso, ha dimensione 5 e font
Courier
</FONT>
HTML
CARATTERI SPECIALI
• I file html sono ASCII puri.
• Vengono definiti un set di caratteri speciali chiamati entità
per aggirare il problema dei caratteri speciali.
• Possono avere due forme:
• Entità con nome ed iniziano con la & e terminano con il ;
• es : " « ©
• Le entità con numero iniziano con la & aggiunte con il # e
termina con il ;
• es:  õ
• Per scrivere la parola poiché: poiché oppure
poiché
HTML
Spazi
• Gli spazi in HTML vengono considerati diversamente da
come siamo abituati
Se scrivo <body>Spazio1 Spazio2</body>
o
<body>Spazio1 Spazio2</body>
Il browser dopo la parola Spazio1 in entrambi
i casi aggiungerà solamente uno spazio.
Come aggiungere gli spazi? Grazie ad un carattere speciale:
 
HTML
Caratteri Speciali
• Oltre a   usato per lo spazio ci sono altri
metacaratteri alcuni dei quali devono essere usati
obbligatoriamente in HTML
<
>
[
]
&
Vedi:
< <
> >
[
]
& &
#
@
{
}
%
http://www.asciitable.com/
#
@
{
}
%
£
à
é
©
“
£ £
à à
é é
© ©
"
"
HTML
ALLINEAMENTO
Il comando <P> ha un'opzione align per l'allineamento del testo
nel paragrafo
<P align=“left”> testo allineato a sinistra </P>
<P align=“right”> testo allineato a destra </P>
<P align=“center”> testo allineato al centro </P>
<P align=“justify”> testo giustificato </P>
La centratura del testo si può ottenere anche con il comando
<CENTER>
testo da centrare
</CENTER>
HTML
FORMATO
Esistono vari modi per cambiare il formato dei caratteri
• Stili fisici
• Stili Logici
• STILI FISICI
<B> testo </B>
testo in grassetto
<I> testo </I>
testo in corsivo
<TT> testo </TT>
testo typewriter
<U> testo </U>
testo sottolineato
<STRIKE>testo </STRIKE> testo sbarrato (testo)
HTML
•
STILI LOGICI
<EM> testo </EM>
{emphasized (di solito corsivo)}
<CITE> testo </CITE>
{per citazioni, ad esempio titoli libri (di solito in corsivo)}
<CODE> testo </CODE>
{per codici di programmi (font con caratteri a
grandezza fissa)}
<STRONG> testo </STRONG>
{bold}
HTML
Tabella colori in esadecimale
I colori in HTML si specificano utilizzando il sistema RGB (Red,
Green, Blu), scrivendoli in esadecimale (eventualmente preceduti
da #).
Miscelando questi valori è possibile ottenere una scala cromatica.
Esistono in Internet Le TABELLE ESADECIMALI dei colori.
HTML
Liste di elementi
Può essere utile poter costruire liste di elementi come
quella seguente:
Il menu prevede due primi
•
penne all’arrabbiata
•
lasagne al forno
HTML fornisce vari comandi per creare le liste
LISTE NON NUMERATE <UL>
LISTE NUMERATE <OL>
HTML
1) Liste non numerate:
<UL>
<LI> penne all’arrabbiata
<LI> lasagne al forno
</UL>
<UL> ha l'opzione type
<UL type=disc>
<UL type=circle>
<UL type=square>
<UL>
HTML
2) Liste numerate:
<OL>
</OL>
Produce
1.
2.
lasagne al forno <OL>
HTML
Opzioni
type={1,A,a,I,i}
start=numero ES:
<OL type=i start=3>
</OL>
Produce:
iii
iv
lasagne al forno
HTML
Si possono annidare liste, non necessariamente dello stesso
tipo.
<UL>
<LI> primo elemento
<OL> <LI> prima sottolista
<LI> seconda sottolista
</OL>
<LI> secondo elemento
<UL>
HTML
Testo preformattato
È possibile dare disposizioni affinché una parte di testo non
venga formattata
<PRE>
questo testo sarà lasciato come scritto
</PRE>
HTML
Citazioni
Per inserire citazioni nel testo si usa il comando
<BLOCKQUOTE>
citazione
</BLOCKQUOTE>
HTML
Linee orizzontali
Per separare parti di testo si può usare il comando <HR> che produce
_____________________________________________
Questo comando ha tre opzioni:
<HR size=numero {spessore in pixel}
width=numero | numero% {lunghezza in pixel o in percentuale}
align={left | right} {default centro}
color=“codice esadecimale/nome colore”
noshade (definisce se la riga deve essere “solida” o con un
effetto di ombreggiatura).
HTML
Testo lampeggiante (SOLO CON alcuni browser!!!)
Testo, in qualunque forma, che lampeggia in fase di
visualizzazione
<BLINK> questo testo lampeggia </BLINK>
Testo scorrevole (SOLO CON alcuni browser!!!)
<MARQUEE> testo che scorre </MARQUEE>
HTML
TESTI SCORREVOLI (MARQUEE)
• <MARQUEE> QUESTO TESTO SCORRE </MARQUEE>
• L’attributo behavior può assumere i valori : scroll,slide e alternate
• scroll e standard, slide si ferma quando raggiunge il margine,
alternate fa rimbalzare il testo da sinistra verso destra.
• Direction : right o left determina il verso.
• Scrollmount determinana la velocità di spostamento del testo e il
valore numerico ad esso assiciato corrisponde al numero di pixel per
ogno movimento del testo.
• Scrolldelay, determina la durata del passo espressa in millisecondi.
• Per cambiare l’aspetto del testo usare bgcolor.
• Heiht e width determina le dimensioni del riquadro che circonda il
testo scorrevole. Hspace e vspace, lo spazio compreso tra i bordi e il
testo
HTML
Commenti
Può essere utile mettere dei commenti nel documento che
non sono visualizzati dal browser

HTML
Immagini
Fino ad ora abbiamo visto come si può formattare il testo;
HTML permette di inserire immagini usando il comando
<IMG>
•
l'immagine deve essere su un file a parte
i browser supportano formati quali GIF, JPEG
TIFF, PNG
•
il comando IMG ha vari attributi
HTML
<IMG
src=pathname o URL dell'immagine
align=left | right {piu’ allineamenti particolari con il testo}
alt=text
{testo alternativo all'immagine}
border=numero
height=numero
width=numero
hspace=numero
vspace=numero
{larghezza in pixel del bordo}
{altezza in pixel}
{larghezza in pixel}
{spazio in pixel a destra e sinistra
dell'immagine}
{spazio in pixel sopra e sotto
l'immagine} >
HTML
Attributi del tag <IMG>
ALIGN definisce la posizione dell’immagine
rispetto al testo prima e dopo essa. Esistono
varie opzioni:
ALIGN=“top” testo sulla sommità dell’immagine
ALIGN=“middle” testo al centro
ALIGN=“bottom” testo nella parte più bassa
dell’immagine
ALIGN=“left” immagine a sinistra
ALIGN=“right” immagine a destra
<IMG src=“img.jpg” align=“...”>
HTML
GIF e JPG
• Gif
– Utilizza solo 256 colori e quindi le foto tendono ad essere
sgranate e poco definite.
• JPEG
– Può avere qualsiasi numero di colori e l’algoritmo di
compressione funzione bene per le immagini fotografiche.
Però è poco adatto per le immagini in bianco e nero o per
immagini con blocchi estesi di colore uniforme.
HTML
URL assoluti e relativi
Per ogni file che intendiamo usare dobbiamo specificarne
l’URL (che rimanda ad una zona dell’hard disk o ad un
luogo esterno):
– pippo.html (nella stessa cartella)
– immagini/sfondo.jpg (la cartella immagini all’interno
della cartella corrente)
– ../cartella/pluto.html (la cartella superiore rispetto a
quella del file html di partenza)
– http://www.itimedi.it (url assoluto)
HTML
ATTENZIONE!
Per centrare l’immagine usate il tag <CENTER> in questo
modo:
<CENTER>
<IMG scr=“sole.jpg”>
</CENTER>
HTML
Suoni
È possibile associare suoni alla presentazione di una
pagina usando il comando <BGSOUND>
Anche i suoni devono essere memorizzati su file a parte;
esistono vari formati
•
.AU, .WAV .AIFF
•
MIDI (.mid)
HTML
<BGSOUND
src="pathname del suono" |
"URL del suono"
loop="numero" | "infinite"
>
Il parametro LOOP serve per stabilire quante volte si deve
ripetere il suono. Se assume valore infinite si ripete il
suono fino a quando non si esce dalla pagina
ES:
<BGSOUND src="suoni/pippo.wav" loop="3">
HTML
GLI APPLET
• Sono programmi java interpretati dal browser e richiamati dal
file HTML
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title> class ciaoancora </title>
</head>
<body>
<applet code="ciaoancora.class" width=220 heigth=50
align="left" vspace=50 hspace=50>
</applet>
ciao da questo applet
<br> mentre vspace e hspace sono stati usati per inserire spazi
verticali ed orizzontali.
</body>
</html>
HTML
LEGAMI IPERTESTUALI
Vediamo ora come creare link ipertestuali in una pagina
HTML
Primo passo:
Definizione precisa di URL standard
URL è costituita da tre parti
protocollo:// indirizzo internet [:porta]/pathname#label
Il PROTOCOLLO descrive il tipo di collegamento da
realizzare
HTML
file:
{per file locali senza indirizzo Internet}
http:
{per file remoti da trasferire con http}
ftp:
{attiva trasferimento dati con ftp}
news:
{attiva collegamento a server news}
telnet:
{attiva sessione di collegamento remoto}
mailto:
{attiva spedizione di mail}
Il protocollo più importante per i legami ipertestuali è
http
HTML
ES:
file:HTML/pippo.html
{file pippo.html in directory HTML locale}
http://www.itimedi.it/home.html
{file home.html su server www.itimedi.it}
HTML
•mailto:[email protected]
{attiva il programma di invio mail}
• ftp://ftp.itimedi.it/pippo.htm
{attiva trasferimento del file pippo dal
server ftp.itimedi.it}
HTML
FTP (File Transfer Protocol) è un protocollo di
comunicazione studiato per la copia di file o di testo
tra due computer collegati alla rete. Esso è stato
sviluppato prima dell'HTTP, che svolge funzioni
relativamente simili anche se mirate al World Wide
Web
HTTP è essenzialmente centrato sul trasferimento di
iperoggetti e sulla loro visualizzazione
FTP permette di leggere le directory e il loro contenuto
sul computer remoto, e di muoversi al loro interno; in
pratica,
l'hard
disk
del
sito
FTP
viene
momentaneamente collegato al proprio, ed è possibile
compiere tutte le operazioni che normalmente si
compiono con i file presenti sul proprio hard disk
HTML
CREAZIONE DEL LEGAME
2 aspetti
• il testo (immagine) che si comporta come hotword o
bottone
• il servizio da attivare
comando ANCHOR: <A> </A>
<A href="URL servizio da attivare">
testo o immagine che funge da link
</A>
HTML
ES:
<A href="http://www.itimedi.it/index.html">
questo testo funge da hotword </A>
<A href="mailto:[email protected]">
spedisci una mail a Pippo </A>
<A href="http://www.itimedi.it/index.html">
<IMG src="pippo.jpg"> </A>
<A href="file:C:\pippo.html">
collegamento al file pippo</A>
HTML
ETICHETTE (LABEL) E SALTI A SEZIONI Con il comando <A> è anche possibile etichettare un
punto di un documento con un nome (una label) e
quindi saltare direttamente a quel punto grazie ad un
link
<A name="nome label"> testo a cui saltare </A>
HTML
ES:
Nel documento relazione.html
....
<H1><A name="cap1"> Capitolo 1 </A> <H1>
...
In un altro punto dello stesso file relazione.html si avrà
<A href="#cap1"> vai al capitolo 1 </A>
HTML
In un altro file sullo stesso server si avrà
<A href="relazione.html#cap1">
vai al capitolo 1 </A>
In un file su un altro server si avrà
<A href="http://www.di.unito.it/relazione.html#cap1">
vai al capitolo 1 </A>
HTML
LINK A IMMAGINI SUONI E ANIMAZIONI ESTERNE
Si possono visualizzare immagini, suoni, animazioni
specificando nella URL il nome di un file corrispondente
I formati riconosciuti sono:
 immagini: GIF, TIFF, JPEG, BITMAP
suoni: AIFF, AU, WAV
 animazioni: .MOV (QuickTime) .AVI .MPEG
HTML
<A href="pippo.jpg">
fa partire visore con immagine </A>
<A href="pippo.mpeg">
fa partire visore con animazione </A>
<A href="suono.aiff">
fa partire suono </A>
HTML
<A href=“pippo.html” target=“_blank” title=“”>
Target: _top, _parent, _self,  nella stessa pagina
_blank  una nuova pagina
HTML
Creare un “target”
L’attributo “target” consente l’apertura di un
collegamento in una pagina specificata
(generalmente utilizzato nei frame per
specificare in quale di essi deve aprirsi il link):
<A href=“file.html” target=“_new”>
(al posto di _new si può usare _blank)
consente di aprire il collegamento in una pagina
nuova; è utile per mantenere aperta la pagina di
partenza e non far perdere il visitatore
HTML
Testo di commento di un link
TITLE. Come per le immagini, anche per i
link è possibile specificare un testo di
commento che si attiva quando il mouse ci
passa sopra:
<A href=“Sistemi.html” title=“la pagina
dedicata a Sistemi”>
HTML
Tabelle
Per creare una tabella si usa il comando
<TABLE>
tabella
</TABLE>
<TABLE> ha vari attributi che servono per stabilire le
caratteristiche della tabella
HTML
<TABLE
border=numero
{larghezza in pixel dei bordi}
align=left | right | center
{allineamento della tabella nella pagina}
cellspacing=numero
{spazio in pixel tra le celle}
cellpadding=numero
{spazio tra bordo e contenuto delle celle}
width=numero | percentuale
{larghezza della tabella in pixel o in %}
summary= descrizione del contenuto>
HTML
COMANDI PER LA FORMATTAZIONE:
<TR> (table row) per creare righe della tabella
<TR> nuova riga </TR>
<TR
align=left | right | center
{allineamento nella tabella}
valign=top | middle | bottom |baseline
{allineamento del testo rispetto alle celle}
background = “file name”
bgcolor = “colore”
bordercolor = “colore”
bordercolordark = “colore” ( per le ombre dei bordi) >
HTML
Righe e colonne
<TR> “table row” per ogni riga
<TD> “table data” per ogni cella della riga
Esempio: tabella a 2 righe e 3 colonne:
<TABLE>
<TR>
<TD>testo della cella</TD>
</TR>
<TR>
</TR>
</TABLE>
HTML
ES:
<table>
<tr><td>Questa è la prima riga.</td></tr>
<tr><td>Questa è la seconda riga.</td></tr>
</table>
Questa è la prima riga
Questa è la seconda riga
HTML
<TD> per inserire dati
<TD> inserimento di una dato </TD>
<TH> per il titolo delle colonne
<TH> titolo della colonna (bold e centrato) </TH>
<CAPTION> titolo tabella
<CAPTION align=top | bottom>
titolo della tabella
</CAPTION>
HTML
ESEMPIO
prima
seconda
terza
1
2
3
a
b
i
c
ii
una tabella
iii
HTML
I comandi TD e TH hanno vari attributi:
<TD (TH)
width=numero | percentuale
{larghezza della cella in pixel o in %}
colspan=numero
{numero di colonne nella cella}
rowspan= numero
{numero di righe nella cella}
nowrap
{non andare a capo nelle celle}
>
HTML
ESEMPIO COLSPAN
Permette di raggruppare le delle all'interno delle colonne in modo
da avere ad esempio una riga da 2 colonne e un’altra da 3.
<table border="1" >
<tr><td >prima colonna</td>
<td >seconda colonna</td>
<td> terza colonna</td>
</tr>
<tr>
<td> </td>
<td colspan="2">cella che occupa 2 colonne</td>
</tr>
</table>
HTML
Prima colonna
Seconda colonna Terza colonna
Cella che occupa 2 colonne
HTML
ESEMPIO COLSPAN
<table border="1" >
<tr>
<td > </td>
<td rowspan="2"> cella che occupa 2 righe</td>
<td> </td>
</tr>
Nella seconda riga devo
<tr>
definire solo 2 celle, perché
<td></td>
la terza è già occupata da
<td></td>
quella definita con rowspan
</tr>
</table>
Permette di creare celle che occupino più di una riga.
HTML
Cella che
occupa due
righe
HTML
OSS:
• le tabelle possono essere annidate
• se non sono annidate allora </TD> </TR>
possono essere omessi
</TH>
HTML
Image maps
In un documento può essere utile rendere attive delle porzioni di
immagini, ossia realizzare con delle parti di immagini dei link ipertestuali.
Esistono due tipi di image maps
•
client-side
(interpretate dal browser)
•
server-side
(richiedono che l'utente abbia accesso al server e sono
praticamente in disuso)
HTML
Un’image map è un’immagine suddivisa in “aree sensibili”
che, al click del mouse, si comportano come link. Per es,
consideriamo l’immagine contenuta nel file SigAnelli.jpg
Clicca qui
per aprire
frodo.html
Clicca qui per
aprire
legolass.html
Clicca qui per
aprire
aragorn.html
HTML
Per creare le image maps è necessario avere:
1.
l'immagine
2.
una specifica di quali parti sono attive e di quali azioni
devono essere svolte quando si clicca su di esse
L'immagine viene caricata con il comando <IMG> ma usando
gli attributi ISMAP o USEMAP
HTML
CLIENT SIDE IMAGE MAPS
Questo tipo di mappa è contraddistinto dall’attributo usemap del tag img:
<img src=”miaImmagine.gif” usemap=”nomeMappa”>
come valore dell’attributo usemap bisogna specificare il nome della mappa a
cui l'immagine fa riferimento.
A questo punto non ci resta che creare la mappa in 2 modi possibili:
A) Creare un file con estensione .map che contiente la mappatura
dell’img (POCO USATO)
<map name=”nomeMappa”>…</map>
E poi richiamare all’interno di <IMG USEMAP=“…”> il file .map
HTML
B) Usare una label (attraverso USEMAP) per far riferimento alla
mappatura e scrivere la specifica della mappatura al fondo del
documento, alla fine del body (per la mappatura si usa il tag MAP)
1) RIFERIMENTO ALLA MAPPATURA
<IMG src="pathname immagine“
USEMAP="#miamappa">
2) e di seguito o prima della chiusura di body specifico
LA MAPPATURA
<MAP NAME=“miamappa”>
ATTENZIONE!
Il nome del file .map, il name dentro il comando <MAP> e il valore di
USEMAP devono coincidere
HTML
Comandi di mappatura del tag <MAP>
:
<AREA>
Si specificano delle aree dell'immagine e ad ogni area si associa la URL
corrispondente
<AREA
shape="rect" | "circle" | "polygon"
coord="left-x, top-y, right-x, bottom-y " | {per i rect, in alto a sin e in
basso a destra}
"center-x, center-y, radius " {per i circle, coordinate del
centro da sinistra e in alto, e raggio}
"x1, y1, x2, y2, ..., xN, yN " {coordinate di tutti i vertici}
href="URL"
{URL associata all'area}
nohref
{per aree non attive}
alt = “Testo alternativo all’immagine”
target =“_blank” {apre il link in un’altra pagina}
HTML
ESEMPIO DI IMAGE MAP
Si dichiara che, in corrispondenza di una certa immagine, verrà
usata una certa "mappa" (con l'attributo USEMAP)
<IMG SRC="SigAnelli.jpg" USEMAP="#mappalord">
Si definisce la "mappa" (con il tag MAP)
<MAP NAME=”mappalord">
<AREA SHAPE="rect" COORDS="320,20,200,90"
HREF=“frodo.html">
HREF=”legolas.html">
HREF=”aragorn.html">
</MAP>
HTML
Come si possono scoprire le coordinate??
Si può caricare l'immagine con l'opzione ISMAP
<IMG src="pathname" ISMAP>
e, muovendosi con il mouse, leggere le coordinate visualizzate dal
browser
(funziona solo dal lato server!)
OSS: l'origine delle coordinate è in alto a sinistra sullo schermo.
HTML
Per il resto, il tag <area> si comporta esattamente come il tag <a>,
con la possibilità di specificare ad esempio il target in cui aprire i
link.
In realtà non è difficile disegnare le mappe, perché ci sono già
software che lo fanno al posto nostro.
Se utilizzate un editor visuale (ad esempio Dreamwever MX) potete
trovare degli strumenti integrati nell’ambiente di sviluppo. che vi
consentono di disegnare le mappe in tutta tranquillità.
Trovate un esempio di image map sul sito www.scidecom.unito.it/infogenHTML
HTML
SERVER SIDE IMAGE MAPS
•l'immagine viene caricata con l'opzione ISMAP
<IMG src="pathname immagine" .... ISMAP>
•l'immagine deve essere all'interno di un comando <A> che
contiene l'indirizzo del file della image map
<A href="pathname image map (.map)">
<IMG src="pathname" .... ISMAP>
</A>
HTML
•Il
file .map è come quello del caso precedente ma senza i
comandi AREA. È costituito da un insieme di righe come quella
seguente
shape URL coordinate
OSS: è meglio usare sempre mappe di tipo client-side con
mappatura in fondo al file HTML in quanto oggi tutti i browser più
diffusi sono in grado di interpretarle
HTML
Con Internet Explorer le mappe a volte lasciano un fastidioso
tratteggio sull'area che è stata appena cliccata. Per eliminarlo è
sufficiente utilizzare la seguente sintassi:
onFocus='this.blur()'
da applicare al tag <AREA> in questo modo:
<area shape="circle" coords="45,100"
href="http://ilsignoredeglianelli"
target="_blank"
alt=“LordOfRings"
onFocus=“this.blur()”>
HTML
Frames
In molti casi può essere utile dividere un documento
HTML in più parti, ognuna delle quali può a sua volta
contenere un documento HTML gestibile in modo
separato
ATTN: non tutti i browser supportano i frame (Nescape a
partire dalla versione 2.0; MS Explorer a partire da 3.0)
Si devono usare i comandi
<FRAMESET>
e
<FRAME>
HTML
Il documento frame.html
----------> non ha il comando <BODY> ... </BODY> che è
rimpiazzato dai comandi
<FRAMESET> ... </FRAMESET>
-----------> ha una parte finale
<NOFRAMES> ... </NOFRAMES>
che viene visualizzata nel caso in cui il browser
non supporti i frame
Il comando FRAMESET permette di partizionare un
documento attraverso una suddivisione in righe e colonne
HTML
<FRAMESET
rows="numero1, ..., numeroN" |
{altezze in pixel delle righe}
"percent1, ..., percentN" |
{altezza in % (somma<100%!!)}
*
{indica il resto della pagina o la
grandezza relativa}
cols="numero1, ..., numeroN" | "percent1, ...,
percentN" | *
>
ATTENZIONE!!
ogni frameset può usare solo uno tra i due parametri
rows o cols
HTML
<FRAMESET rows="50,50,80">
<FRAMESET rows="20%,50%,30%">
<FRAMESET rows="30,*,20,20">
{il resto nella seconda riga}
<FRAMESET rows="2*,*">
{la prima riga deve essere il doppio della
seconda}
HTML
Il comando <FRAME> si usa per indicare i frame creati
con FRAMESET
<FRAME
src="URL" {URL associata al frame}
name="nome della finestra"
{usato per riferimenti}
scrolling="yes" | "no" | "auto"
{scrollbar associate al frame}
noresize
{impedito resize da parte dell'utente}
marginwidth="numero"
{larghezza dei margini in pixel}
marginheight="numero"
{altezza dei margini in pixel }
>
HTML
<FRAMESET cols="40%,60%” >
<FRAME src="frodo.html"
name="finestra1"
scrolling="yes" noresize>
<FRAME src="http://www.ilsignoredeglianelli.it"
name="finestra2"
scrolling="yes" noresize >
</FRAMESET>
<NOFRAMES>
Il tuo browser non supporta i frame; cliccare
<A href="frodo.html"> qui </A> per vedere la pagina senza
frame
</NOFRAMES>
<FRAMESET rows="50%,50%">
<FRAMESET cols="*,2*,*">
<FRAME src="legolas.html"
name="finestra1”scrolling="yes" noresize>
<FRAME src="http://www.scidecom.unito.it/infogenhtml"
name="finestra2” scrolling="auto" noresize>
<FRAME src="aragorn.html"
name="finestra3” scrolling="yes" noresize>
</FRAMESET>
<FRAMESET cols="50%,50%">
<FRAME src="http://www.ilsignoredeglianelli.it"
name="finestra4"
scrolling="no">
<FRAME src="http://www.di.unito.it" name="finestra5"
scrolling="auto" noresize>
</FRAMESET>
</FRAMESET>
<NOFRAMES> Mi spiace </NOFRAMES>
HTML
Se da un documento in una pagina si passa ad un altro
documento attraverso un link, questo per default viene
aperto nello stesso frame
ES:
in aragorn.html aperto in finestra3
<A href="frodo.html”> APRI LA PAGINA DI FRODO </A>
....
cliccando APRI LA PAGINA DI FRODO si apre il nuovo
documento
ancora nel frame finestra3
HTML
Si può scegliere in quale finestra aprire un
documento usando i nomi delle finestre e
l'attributo target all'interno di <A>
in aragorn.html aperto in finestra3
<A target="finestra5"
href="frodo.html”> APRI LA PAGINA DI
FRODO </A>
....
Cliccando APRI LA PAGINA DI FRODO si apre il
nuovo documento nel frame finestra5
HTML
In target si possono usare alcuni nomi speciali
•
target="_self"
{la finestra stessa: default}
•
target="_top"
{nella finestra intera}
•
target="_blank"
{nuova finestra}
•
target="_parent"
frame}
{nel frameset in cui è il
HTML
FORMS
In alcuni documenti HTML può essere utile creare dei
moduli che possono essere riempiti da chi consulta le
pagine stesse.
Le informazioni inserite possono poi essere spedite per
e-mail
Si deve usare il comando
<FORM>
modulo
</FORM>
CREAZIONE DI UNA SCHEDA
• E’ costituita da due operazioni indipendenti:
– la creazione degli elementi della scheda
– la realizzazione del programma script che dovrà essere richiamato dal
server ( chiamato script CGI o script) e che si occupa di elaborare le
informazioni che l’ utente invia utilizzando la scheda.
• La scheda si crea con il tag <FORM> e chiusura </FORM>
– Il form include due argomenti:
• METHOD
• ACTION
– METHOD = a GET o POST e determinano il modo in cui le
informazioni verranno inviate allo script (sul server) che si deve occupare
della loro elaborazione.
– ACTION : Indica lo script sul server che deve essere richiamato nel
momento in cui viene inoltrata questa scheda.
HTML
<FORM
action="mailto:indirizzo internet a cui inviare
la form/indirizzo di una pagina dinamica”
method="post/get“ name=“form”>
qui la form testo, immagini + comandi per input che vedremo
...
<INPUT type=“text">
<INPUT type="submit">
<INPUT type="reset">
</FORM>
HTML
I due comandi di input "submit" e "reset" devono essere
presenti. Restituiscono due bottoni:
•
"submit" quando cliccato spedisce la form
•
"reset" quando cliccato cancella la form
HTML
È necessario creare degli spazi per l'input dell'utente
Ogni spazio deve avere un nome che viene usato nella
mail creata dalla form per spedire le informazioni
•
testo libero
•
check box (caselle a selezione multipla)
•
radio box (caselle a selezione singola)
•
menù a selezione singola o multipla
HTML
COMANDI DENTRO <FORM>
Il comando TEXTAREA
lascia una zona libera per il testo in input dell'utente
<TEXTAREA
name="nome"
{nome usato nella risposta}
rows=numero
{numero di righe per scrivere}
cols=numero
{numero di colonne per scrivere}
>
testo di default
</TEXTAREA>
HTML
HTML
Comando <INPUT>
<INPUT
type= "text"
"radio"
{input di testo}
{crea radio box}
"checkbox" {crea checkbox}
"password" {spazio per la password}
"submit"
"reset"
>
Il comando INPUT ha altri attributi che dipendono dal type
HTML
1)
type=“text”
<INPUT
type="text"
name="nome del campo di input"
size=numero {numero caratteri}
value="testo"{testo di default}
maxlength="45”
>
ES:
<INPUT type="text" name="nazionalita"
size=20 value="italiana">
HTML
2)
type="radio"
<INPUT
type="radio"
name="nome del gruppo di bottoni"
value="valore di risposta del bottone"
{valore che viene restituito quando
il bottone viene selezionato}
checked
{il bottone è selezionato di default}
>
testo {questo è il testo che appare sul bottone}
HTML
HTML
3)
type="checkbox"
simile a radio ma permette selezione multipla
<INPUT type="checkbox"
name="nome del gruppo di checkbox"
value="valore di risposta del box"
{valore restituito quando si seleziona il bottone}
checked {bottone selezionato per default}
>
HTML
HTML
4)
type="password"
<INPUT type="password"
name="nome dell'input"
size=numero
{spazio che viene lasciato}
value="testo"
{il testo è la password}>
HTML
5)
type=“hidden”
type="submit"
type="reset"
value="testo"
{il testo permette di personalizzare le
scritte sui bottoni}
HTML
HTML
Creazione di menù
L'ultima possibilità importante permette di creare dei menù popup a selezione singola o multipla.
Per racchiudere il menù si usa il comando
<SELECT>
</SELECT>
Per ogni riga del menù si usa il comando
<OPTION> elemento del menu </OPTION>
HTML
<SELECT
name="nome del menù“
size=numero
{quante righe del menù devono essere
visualizzate}
multiple
{permette la selezione multipla;
altrimenti si ha selezione singola}
>
HTML
<OPTION
value="valore restituito"
{valore restituito quando viene
selezionata la riga}
selected
{riga selezionata di default}
>
testo che compare nel menù
</OPTION>
HTML
Esempio scelta singola
HTML
Esempio Scelta Multipla
HTML
<textarea name="testoLungo" cols="40" rows="20" >
Prova
</textarea>
Se volete che non sia editabile dovete aggiungere
readonly
HTML
HTML
Al comando "submit" l'utente [email protected] si vedrà arrivare
una mail simile a quella seguente:
anno="2"
ind="I"
commenti="mio commento"
Queste informazioni possono essere usate da altri programmi. Ad
esempio, le form sono utili in combinazione con i database: ogni
form produce un record che viene memorizato in un database per
elaborazioni successive.
HTML
E' possibile incolonnare le aree di testo per avere un effetto
più ordinato attraverso l'uso del comando <TABLE>
La form sarà quindi inserita in una tabella.
<table>
<tr>
<td>
<font size=7> Come ti chiami? </font>
</td>
<td>
<form>
<input type="text" name=nome size=20 value="elena" checked>
</form>
</td>
</tr>
<tr>
etc....

HTML HiperText Markup Language

Transcript

Documenti analoghi

formato PDF

...

...

...

Il markup di documenti (I parte)

html_base - WordPress.com

img world - presentazione finale

copa la vecia! - Treviso Eventi

Inserimento di suoni, immagini e filmati

Inserimento di elementi multimediali

Saluzzoturistica.it

Specifics of CANopen protocol implementation

HTML - Università degli Studi di Firenze

cross country - Speed Bikes

2-Strumenti di base