Html3

Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
1
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
Per rendere una pagina HTML più gradevole o utile si possono inserire
delle immagini usando il tag <img> (che non possiede un tag di
chiusura).
Se, per esempio, l’immagine è memorizzata nel file peter.jpg,
presente nella stessa cartella del file HTML corrente, il suo inserimento
nel file corrente avviene con il tag:
<img src=”peter.jpg”>
In questo caso l’elemento img ha utilizzato l’attributo src, obbligatorio,
per identificare il file che contiene l'immagine da inserire. All’attributo
src viene assegnato il valore peter.jpg nel solito modo (segno di
uguale e i doppi apici).
2
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
Naturalmente il file contenente l’immagine si potrebbe trovare
anche in una diversa cartella, o addirittura in un documento
presente su un altro host.
Se, per esempio, il documento ha come indirizzo Web completo (o
URL) http://host/dir/file.gif, esso può essere inserito con il
seguente tag:
<img src="http://host/dir/file.gif">
3
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
Tuttavia, nel caso in cui non fosse possibile visualizzare l’immagine, è
opportuno prevederne una descrizione.
Ciò si può ottenere aggiungendo nel tag una breve descrizione
mediante l’attributo alt:
<img src=”peter.jpg” alt=”Foto di Peter”>
Il valore dell’attributo alt viene anche visualizzato in una finestra
quando il mouse passa vicino all’immagine.
Se è necessaria una descrizione più lunga, si può scriverla, per
esempio, nel file “peter.html” e inserirla nel documento corrente
usando l’attributo longdesc:
<img src=”peter.jpg” longdesc=”peter.html”>
4
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
Un altro attributo di <img> è align, che consente di allineare
rispetto all’immagine la riga di testo successiva.
align accetta i seguenti valori:
bottom
allinea il testo al bordo inferiore del grafico
middle
allinea il testo al centro del grafico
top
allinea il testo al bordo superiore del grafico
Esempio:
<img src=“peter.jpg" align=“middle">
5
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
Le dimensioni di una immagine possono essere variate con i due
attributi width e height, che indicano rispettivamente la
larghezza e l’altezza che l’immagine avrà nella pagina Web.
I valori di width e height possono essere espressi in modo
relativo, indicando le dimensioni come percentuali di quelle dello
schermo, oppure
assoluto, indicando le dimensioni come numero di pixel.
6
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
Come esempio si consideri il seguente listato HTML: Busta.html
<html>
<head></head>
<body>
busta normale <img src="busta.gif">
busta al 25%
<img src="busta.gif" width=25% height=25%>
busta 80x80
<img src="busta.gif" width=80 height=80>
</body>
</html>
che produce la seguente videata:
7
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Inserimento di immagini
8
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
9
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
La principale utilità delle pagine Web è costituita dalla possibilità di
definire dei collegamenti (link) ipertestuali da un punto a un altro
dello stesso oppure di un altro documento, e di attivare tali link con
un click del mouse.
I link sono definiti con il tag <a> (da àncora).
10
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
Per definire un link a un altro punto del documento
corrente, si eseguono i seguenti passaggi:
1. nel punto di partenza del link si scrive una linea del tipo:
Vai all’<a href=”#arrivolink”>Indice</a>
(ovviamente il valore “arrivolink” può essere sostituito da qualsiasi
altra stringa di caratteri).
2. nel punto di arrivo del link si scrive un tag del tipo:
<a name=”arrivolink”>
11
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
12
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
Il cancelletto (#) indica che si tratta di un link interno allo stesso
documento.
Il testo racchiuso tra i tag <a> e </a> viene usato come
denominazione del link, e di solito viene visualizzato in colore blu
e sottolineato.
Anziché da un testo, la denominazione del link può essere costituita
da una immagine, se si inserisce il suo riferimento tra i tag <a> e
</a>.
Per esempio, il listato di Figura consente di leggere l’indice di un
libro se si clicca sulla immagine della sua copertina.
13
14
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
Per definire un link a un altro documento, per esempio al file
peter.html, si scrive una linea del tipo:
Vai alla<a href=”peter.html”>pagina di Peter</a>
Se è possibile inserire un punto di arrivo in un documento esterno, è
possibile combinare le due possibilità precedenti, raggiungendo un
punto preciso di un documento esterno.
Ad esempio, per andare direttamente al curriculum di Peter, presente
nel file peter.html, si può scrivere:
Vai al<a href=”peter.html#arrivolink”>
Curriculum di Peter</a>
15
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
Naturalmente il link può avere come punto di arrivo anche una
pagina presente su un altro host di Internet, indicandone l’indirizzo
Web completo. Per esempio, per collegarsi a un documento di
indirizzo www.w3.org, si scriverà:
Vai alla home page di
<a href=”http://www.w3.org/”>W3C</a>
Un altro valore molto diffuso per href è mailto:, che consente di
inviare direttamente una messaggio di posta elettronica da una
pagina Web.
16
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
Nel seguente esempio:
scrivete a <a href="mailto:[email protected]">
angelo gallippi</a>
l’attivazione del link richiama la finestra di dialogo di posta elettronica
del browser o (in sua assenza) il programma di posta installato nel
sistema, consentendo all’utente di inviare messaggi postali alla
persona il cui indirizzo segue l’attributo mailto:.
17
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
I link non ancora visitati hanno come colore preimpostato il blu, che
può essere modificato assegnando un valore diverso all'attributo
link nel tag <body>. Esempio:
<body link="red">
Quando un link viene cliccato, esso assume un colore diverso da
quello impostato con l’attributo link (o dal blu preimpostato).
Il colore di un link cliccato può essere modificato con l'attributo
alink:
<body alink="maroon">
18
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Link ipertestuali
Quando un URL associato a un link viene visitato, quest'ultimo assume
un colore diverso da quello impostato con link (o dal blu
preimpostato).
Il colore di un link visitato può essere modificato con l'attributo
vlink:
<body vlink="red">
19
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Elenchi
20
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Elenchi
HTML supporta tre tipi di elenchi.
Il primo è l'elenco puntato o non ordinato (unordered list), che
va racchiuso fra i tag <ul> e </ul>, e i cui elementi sono
preceduti dal tag <li>. Esempio:
<ul>
<li> Prima voce puntata
<li> Seconda voce puntata
</ul>
Prima voce puntata
Seconda voce puntata
<ul> accetta l’attributo type, che definisce il simbolo visualizzato
all’inizio di ogni riga dell’elenco. I valori sono:
21
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Elenchi
valore
simbolo
disc (predefinito)

circle

square

22
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Elenchi
Il secondo è l'elenco numerato o ordinato (ordered list), che va
racchiuso fra i tag <ol> e </ol>, e i cui elementi sono preceduti
dal tag <li>. Esempio:
<ol>
<li> Prima voce numerata
<li> Seconda voce numerata
</ol>
1. Prima voce numerata
2. Seconda voce numerata
La numerazione può patire da un numero diverso da 1, assegnando
tale numero come valore all’attributo start.
23
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Elenchi
Il tipo di numerazione può essere variato con l’attributo type, che
accetta uno dei seguenti 5 valori:
valore
visualizzazione
1
1, 2, 3, 4, ...
A
A, B, C, D, ...
a
a, b, c, d, ...
I
I, II, III, IV, ...
i
i, ii iii, iv, ...
24
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Elenchi
Il terzo è l'elenco di definizioni (definition list), che consente di
elencare dei termini seguiti dalle rispettive definizioni.
Esso va racchiuso fra i tag <dl> e </dl>, i termini vanno preceduti
dal tag <dt> e le definizioni dal tag <dd>. Esempio:
<dl>
<dt> Primo termine
<dd> Definizione 1° t.
<dt> Secondo termine
<dd> Definizione 2° t.
</dl>
Primo termine
Definizione 1° t.
Secondo termine
Definizione 2° t.
25