2. 2
GLI ATTRIBUTI DELLE IMMAGINI
All’interno del TAG <IMG SRC>
si possono inserire diversi attributi: align, title,
height, width
align: permette di allineare l’immagine alla sinistra
o alla destra di un testo
<img src="tartaruga.jpg" align="left"> testo di prova
testo di prova
<img src="tartaruga.jpg" align=“right"> testo di prova
testo di prova
3. 3
L'attributo title, inserisce un testo per descrivere
l'immagine, il testo è visibile nel momento in cui si porta
il cursore del mouse sull'immagine.
<img src="tartaruga.jpg" title="Ciao sono una tartaruga">
height, width permettono di modificare le dimensioni
dell’immagine. Ad esempio, per ridurre l’immagine a 60
pixel di larghezza e 35 pixel di altezza, scriverò:
<img src="tartaruga.jpg" width="60" height="35">
NB: fare attenzione a non assegnare valori sproporzionati
Ad esempio, <img src="tarta.jpg" width="50" height="100">
deformerà l’immagine nel seguente modo:
4. 4
LISTE PREFORMATTATE
In HTML è possibile predisporre
delle liste:
LISTE ORDINATE
LISTE NON ORDINATE
1, 2
LISTE ORDINATEA, B
5. 5
LISTA ORDINATA
La lista ordinata è un insieme di voci numerate
in modo progressivo.
La TAG d’inizio è <OL> (Ordered List)
mentre </OL> chiude la lista.
Ogni voce della lista deve essere preceduta
dall’istruzione <LI>.
6. 6
LISTA NON ORDINATA
La lista non ordinata è composta da un insieme
di voci indicate da pallini.
La TAG d’inizio è <UL> (Unordered List)
mentre </UL> chiude la lista.
Ogni voce della lista deve essere preceduta
dall’istruzione <LI>.
7. 7
<HTML>
<HEAD>
<TITLE>Esempio di LISTE</TITLE>
</HEAD>
<BODY>
<FONT SIZE="3" COLOR="GREEN"><P>lista ordinata<BR>
<OL>
<LI> MELA
<LI> BANANA
</OL>
<FONT SIZE="3" COLOR="BROWN">
<P>lista NON ordinata<BR>
<UL><LI> MELA <LI> BANANA</UL>
<FONT SIZE="3" COLOR="BLUE"><P>lista ordinata<BR>
<OL TYPE=A><LI> MELA <LI> BANANA</OL><P>
</BODY>
</HTML>
PAGINA DI PROVA LISTE (1)
9. 9
LE TABELLELE TABELLE (1)(1)
Le tabelle permettono di visualizzare le
informazioni all’interno di una pagina in
modo strutturato, ordinato e compatto.
Per predisporre una tabella occorre
utilizzare diverse TAG:
<TABLE> </TABLE><TABLE> </TABLE>
10. 10
Per definire una nuova cella della tabella
è necessario utilizzare il TAG <TD><TD>
(Table Data).
Per definire una nuova riga della tabella
è necessario utilizzare il TAG <TR><TR>
(Table Row).
Entrambe le TAG non richiedono il
comando di fine TAG.
LE TABELLELE TABELLE (2)(2)
15. 15
Il tag <caption> permette inserire una didascalia centrata
su di una tabella, questo tag deve essere inserito subito
dopo il tag <table>
Esempio:
…..
<table border="1">
<caption> Alunni della 3D AFM </caption>
<tr> <td><b> Cognome</b><td><b> Nome</b>
<tr> <td> Rossi<td> Mario
<tr> <td> Neri<td> Luca
</table>
……
IL TAG <caption>… </caption>
16. 16
I moduli (o form) permettono di raccogliere dei dati
dal web. L'invio dei dati è organizzato in:
•una pagina principalepagina principale che contiene i vari campi
dei form, che consentono all'utente di effettuare
delle scelte e scrivere del testo
•una pagina secondariapagina secondaria che effettua il lavoro di
raccogliere i dati sul server. Oppure i dati possono
essere inviati ad un indirizzo emailindirizzo email indicato nella
pagina principale
FORM (1)FORM (1)
18. 18
<FORM METHOD=POST enctype="text/plain"
action="mailto:email@dominio.it?subject=Questionario">
L’attributo ‘method’ ammette due possibili valori: ‘get’
e ‘post’.
Nel metodo “get” i dati sono visibili nell’indirizzo del
browser, quindi questo metodo non è adatto per inviare
password o altre informazioni riservate, inoltre i dati
inviati sono vincolati alla lunghezza massima dell’URL
(256 caratteri)
Nel metodo “post” i dati spediti non sono visibili sul
browser, inoltre non ci sono limiti sulla quantità di
dati inviata.
FORM (3)FORM (3)
19. 19
I CAMPI DI TESTO:
TEXT è il tipo di input cioè testo
SIZE=40 è la grandezza del campo
NAME=Cognome è l'etichetta da associare
all'informazione
Cognome<BR><INPUT TYPE=text SIZE=40 NAME=Cognome><P>
Nome<BR><INPUT TYPE=text SIZE=40 NAME=Nome><P>
Indirizzo<BR><INPUT TYPE=text SIZE=40 NAME=Indirizzo><P>
Telefono<BR><INPUT TYPE=text SIZE=20 NAME=telefono><P>
Data e ora di consegna<BR><INPUT TYPE=text SIZE=20
NAME=Data_ora><P>
FORM (4)FORM (4)
20. 20
Istruzioni relative ai pulsantiIstruzioni relative ai pulsanti
<H3><H3>
INVIA IL MESSAGGIO O RICOMPILA LA SCHEDAINVIA IL MESSAGGIO O RICOMPILA LA SCHEDA
</H3></H3>
<input type=submit value="INVIO L'ORDINE"><input type=submit value="INVIO L'ORDINE">
<input type=Reset<input type=Reset
value="Annulla">value="Annulla">
</FORM></FORM>
INVIA - ANNULLAINVIA - ANNULLA
