Le immagini
Nelle pagine Web è possibile inserire immagini in formato GIF o JPEG tramite
il commando
<IMG>. Questo tag,
come pure <HR> e
<BR>, non ha il
corrispondente tag di chiusura.
L'HTML fornisce una serie di parametri che permettono di impostare
la visualizzazione dell'immagine nella pagina.
Il parametro fondamentale è SRC che specifica la directory in cui
si trova l'immagine e il nome del file (per l'indicazione del percorso valgono
le stesse regole viste per i link).
Esempio:
| <IMG
SRC="gif/julia.gif">
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Con il parametro ALT è possibile specificare un testo alternativo
all'immagine. Quest'ultimo viene visualizzato quando, per velocizzare la navigazione, si
imposta nel browser l'opzione che consente di non caricare le immagini oppure quando
l'immagine specificata non esiste.
Esempio:
<IMG
SRC="/gif/nonesiste.gif"
ALT="testo alternativo">
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Gli attributi WIDTH e HEIGHT impostano le dimensioni dell'immagine in pixel.
Quando l'immagine non viene visualizzata, se si sono specificate la larghezza e
l'altezza, il browser riserva lo stesso lo spazio all'immagine, in questo modo
l'ordine della pagina non viene modificato. Questi attributi possono essere utilizzati
per specificare una dimensione dell'immagine diversa dall'originaria. In questo modo però
se l'immagine viene ingrandita si perde in risoluzione, se viene ridotta il browser
deve comunque caricare un file più grande del necessario. È quindi
sempre consigliabile eseguire gli ingrandimenti e le riduzioni con un apposito
programma di grafica.
Ecco i risultati sull'immagine visualizzata sopra in dimensioni normali (200x150):
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75">
|
| - |
Netscape: Guida HTML |
_ |
X |
|
<IMG
SRC="gif/julia.gif"
WIDTH="300"
HEIGHT="225">
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Con l'opzione BORDER si può assegnare un bordo di dimensioni
specificate (in pixel).
Esempio:
<IMG
SRC="gif/julia.gif"
BORDER="5">
<IMG
SRC="gif/julia.gif"
BORDER="10">
WIDTH="100"
HEIGHT="75">
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Per lasciare uno spazio attorno all'immagine, si possono utilizzare gli attributi
HSPACE (orizzontale) e VSPACE (verticale).
Esempio:
<IMG
SRC="gif/julia.gif"
HSPACE="20"
VSPACE="30">
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75">
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allineamento dell'immagine con il testo
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75">
Quando l'immagine viene inserita
.
.
.
come mostrano i seguenti esempi:
|
| - |
Netscape: Guida HTML |
_ |
X |
Quando l'immagine viene inserita all'interno di un paragrafo di testo, il bordo
inferiore di quest'ultimo viene allineato con il bordo inferiore dell'immagine.
Per modificare questa impostazione si può utilizzare l'opzione ALIGN
come mostrano i seguenti esempi:
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="top">
Allinea il bordo
superiore dell'immagine con il
bordo superiore della riga (può
essere la riga stessa o un'altra immagine).
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allinea il bordo
superiore dell'immagine con il
bordo superiore della riga (può
essere la riga stessa o un'altra immagine).
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="texttop">
Allinea il bordo
superiore dell'immagine con il
bordo superiore della riga di testo.
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allinea il bordo
superiore dell'immagine con il
bordo superiore della riga di testo.
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="middle">
Allinea il centro dell'immagine con il centro della riga (spesso
con la base della riga).
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allinea il centro dell'immagine con il centro della riga (spesso
con la base della riga).
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="absmiddle">
Allinea il centro dell'immagine con il centro dell'oggetto più esteso nella riga.
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allinea il centro dell'immagine con il centro dell'oggetto più esteso nella riga.
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="bottom">
Allinea il bordo inferiore dell'immagine con il bordo inferiore della riga (default).
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allinea il bordo inferiore dell'immagine con il bordo inferiore della riga (default).
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="absbottom">
Allinea il bordo inferiore dell'immagine con il
bordo inferiore dell'oggetto più basso nella riga.
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Allinea il bordo inferiore dell'immagine con il
bordo inferiore dell'oggetto più basso nella riga.
|
|
Queste opzioni però consentono di inserire solo una riga al lato dell'immagine.
L'HTML 2.0 non prevedeva dei comandi per circondare un'immagine col testo.
Questa opzione è stata inserita nell'HTML 3.2 dai due nuovi attributi per
l'opzione ALIGN "left" e "right"
Esempi:
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="left">
Posiziona l'immagine alla sinistra del testo.
<BR>
Quando il testo è sufficientemente lungo, dopo aver occupato tutto lo spazio a destra
dell'immagine, prosegue dalla riga sotto la stessa.
|
| - |
Netscape: Guida HTML |
_ |
X |
Posiziona l'immagine alla sinistra del testo.
Quando il
testo è sufficientemente lungo, dopo aver occupato tutto lo spazio a destra
dell'immagine, prosegue dalla riga sotto la stessa.
|
|
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="right">
Posiziona l'immagine alla destra del testo.
<BR>
Quando il testo è sufficientemente lungo, dopo aver occupato tutto lo spazio a sinistra
dell'immagine, prosegue dalla riga sotto la stessa.
|
| - |
Netscape: Guida HTML |
_ |
X |
Posiziona l'immagine alla destra del testo.
Quando il
testo è sufficientemente lungo, dopo aver occupato tutto lo spazio a sinistra
dell'immagine, prosegue dalla riga sotto la stessa.
|
|
Negli esempi si può osservare che il tag di fine riga
<BR>
non è sufficiente per interrompere questo tipo di allineamento.
Per far in modo che da un certo punto il testo continui sotto l'immagine
si deve aggiungere l'attributo CLEAR al tag
<BR>
con l'opzione "left",
"right" o "all"
scelta in funzione dell'allineamento che si desidera annullare.
Esempi:
<IMG
SRC="gif/julia.gif"
WIDTH="100"
HEIGHT="75"
ALIGN="left">
Posiziona l'immagine alla sinistra del testo
<BR
CLEAR="left">
e da questo punto ricomincia sotto l'immagine.
|
| - |
Netscape: Guida HTML |
_ |
X |
Posiziona l'immagine alla sinistra del testo
e da questo punto ricomincia sotto l'immagine.
|
|
Immagini e link
Come già specificato nel paragrafo sui Link,
un collegamento può essere rappresentato sulla pagina o da un testo
o da un'immagine.
In questo secondo caso è sufficiente inserire il tag
<IMG> tra i
tag di apertura e chiusura del link.
Esempio:
<A
HREF="esempi.html">
<IMG
SRC="gif/esempi.gif">
</A>
|
| - |
Netscape: Guida HTML |
_ |
X |
|
Se non si vuole visualizzare il bordo è necessario specificare l'attributo
BORDER="0"
<A
HREF="esempi.html">
<IMG
SRC="gif/esempi.gif"
BORDER="0">
</A>
|
| - |
Netscape: Guida HTML |
_ |
X |
|
