6 - Link e Immagini

LINGUAGGIO HTML
Titolo: Link e immagini
Linguaggio HTML – Link e immagini

Argomenti trattati
Collegamenti ipertestuali
Collegamento a una risorsa esterna
Collegamento interno al documento html
Aprire un collegamento in una specifica finestra: TARGET
o Esempio 22: Creare link a risorse esterne o interne alla pagina html
Immagini
o Esempio 23: Inserire una immagine in una pagina html
Dimensionamento delle immagini
Allineamento delle immagini
o Esempio 24: Impostare le dimensioni e l’allineamento di immagini
Spazi e bordi delle immagini
Accessibilità e didascalie delle immagini
Immagini cliccabili
Elementi deprecati
Tag: a, img
Collegamenti ipertestuali
I collegamenti ipertestuali si creano associando l' indirizzo (percorso/nome file) del nodo di
destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o
un'immagine. Questa associazione è basata sull' utilizzo del tag a dove a sta per ancoraggio (anchor)
ed HREF è l' abbreviazione di Hypertext-Reference (riferimento ipertestuale). Per creare un
collegamento verso un'altra pagina dello stesso sito la sintassi è:
Collegamento a una risorsa esterna

• A un file (documento, immagine, filmato, pagina web)
<a href= “pathname del file o URL della pagina”>
nome del link
</a>
• A un indirizzo di posta elettronica

<a href= “mailto: indirizzo di e-mail”>
nome del link
</a>
1
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Collegamento interno al documento html

Per prima cosa si definiscono le ancore dei collegamenti (segnalibri in Windows).
<a name= “nome ancora”>

Qui inizia l’argomento 1
</a>
Successivamente si impostano i collegamenti.
<a href= “#nome ancora”>

Vai all’argomento 1
</a>
Si possono anche combinare collegamenti esterni e interni.
<a href= “#pagin2a.html#nome ancora”>

Vai all’argomento 1 della pagina 2
</a>
Aprire un collegamento in una specifica finestra: TARGET

<a href= “indirizzo della risorsa” target= ”indicazione della finestra destinazione”>
nome del link
</a>
L’attributo target consente di specificare come aprire la risorsa indirizzata da href. l’unico valore
dell’attributo target che ritengo utile segnalare è_blank (oppure _new), che apre la risorsa in una
nuova finestra. Se target non viene specificato, la risorsa si apre nella finestra corrente.
Esempio 22: Creare link a risorse esterne o interne alla pagina html
esempio22.html
<html>
<head>
<title> Esempio 22 </title>
</head>
<body>
<p>
Link ad una risorsa esterna. L'apertura avviene in una
nuova finestra:
<a href="http://www.wordreference.com/it/"
target="_new">
Dizionario Italiano Inglese
</a>
</p>
<p>
Link ad un'ancora interna:
<a href="#titolo2">
2
LINGUAGGIO HTML
Vai al titolo 2
</a>
</p>
<h1> Titolo 1 </h1>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry………………
</p>
<h1> Titolo 2 </h1>
<p>
<a name="titolo2">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry…………………
</a>
</p>
</body>
</html>
Immagini
immagine in una pagina HTML basta utilizzare il tag img.
Per inserire un'
<img src= “URI dell’immagine”>
Il tag img non necessita di essere chiuso.

L' immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e
mantiene le sue dimensioni assolute.
Esempio 23: Inserire una immagine in una pagina html

esempio23.html
<html>
<head>
</head>
<body>
<p>
typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
Why do we use it?
<img src="..\Immagini\dali01.jpg">
</p>
3
LINGUAGGIO HTML
</body>
</html>
Dimensionamento delle immagini

Gli attributi width e height permettono di specificare rispettivamente la larghezza e l’altezza in
pixel.
<img src= “URI dell’immagine” width= ”larghezza in pixel” height=”altezza in pixel”>
Quando si specificano le dimensioni di un' immagine è necessario conoscerne le dimensioni effettive
per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'
immagine. Anche
se si vuole visualizzare l'
immagine a grandezza naturale è sempre preferibile specificare i valori di
width e height perché così il browser ha maggiori informazioni per collocare l' immagine ed il
caricamento della pagina risulta molto più rapido.
Allineamento delle immagini

attributo align.
L’immagine può essere allineata rispetto al testo circostante mediante l'
<img src= “URI dell’immagine” align= ”allineamento”>
I valori di align ammessi sono:
Bottom: il lato inferiore dell'
immagine appare allineato alla base della riga di testo (valore
predefinito).
Middle: il punto mediano dell' altezza dell'
immagine si allinea alla base della riga di testo; il
testo si spezza e prosegue sotto l'immagine.
Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato
destro.
Right: l' immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato
sinistro.
Esempio 24: Impostare le dimensioni e l’allineamento di immagini

esempio24.html
<html>
<head>
</head>
<body>
<p>
IMMAGINE ORIGINALE CON ALLINEAMENTO DI DEFAULT
<img src="..\Immagini\dali01.jpg">
4
LINGUAGGIO HTML
Why do we use it?

</p>
<p>
IMMAGINE ORIGINALE CON ALLINEAMENTO MIDDLE
<img src="..\Immagini\dali01.jpg" align="middle">
Why do we use it?
</p>
<p>
IMMAGINE RIDOTTA CON ALLINEAMENTO RIGHT
<img src="..\Immagini\dali01.jpg" align="right" width="400"
height="280">
Why do we use it?
</p>
</body>
</html>
Spazi e bordi delle immagini

Nel caso in cui si voglia allontanare l'
immagine dal testo si può aumentare lo spazio vuoto che
circonda l'immagine attraverso gli attributi vspace (spazio verticale, in pixel) e hspace (spazio
orizzontale, in pixel).
<img src= “URI dell’immagine” vspace= ”spazio verticale” hspace=”spazio orizzontale”>
Ad esempio scrivendo:
<img src="image.jpg" vspace ="10" hspace ="20">
oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l' immagine devono
rimanere 10 pixel vuoti, e a destra e sinistra dell'
immagine devono rimanere 20 pixel vuoti.
Si può anche aggiungere un bordo intorno all' attributo border che deve essere
immagine tramite l'
espresso in pixel secondo la sintassi:
5
LINGUAGGIO HTML
<img src= “URI dell’immagine” border= ”spessore bordo”>
Accessibilità e didascalie delle immagini

Un attributo fondamentale del tag img è alt (testo alternativo). Grazie a tale attributo si può
definire una didascalia associata all'
immagine. La sintassi corretta è:
<img src= “URI dell’immagine” alt= ”breve descrizione testuale”>
Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si
passa con il mouse sopra l'
immagine. I vantaggi principali dell'
usare l'attributo alt sono:
− i visitatori possono capire prima del caricamento completo il contenuto delle immagini;
− i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina;
− diversi motori di ricerca tengono conto del valore dell' attributo ALT delle immagini di una
pagina per catalogarla con precisione.
Immagini cliccabili
Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag img all'
interno
della coppia di tag a secondo la sintassi:
<a href= ”pagina.html”><img src= “URI dell’immagine”></a>
Associare un collegamento ipertestuale ad un' immagine è molto utile quando si vuole creare ad
esempio un menù grafico di navigazione per un sito web. Creando immagini ad hoc come icone o
pulsanti il visitatore ne intuirà la funzione a colpo d'
occhio.
Tuttavia, quando un' immagine è cliccabile, appare generalmente circondata da un bordo di colore
blu che risulta anti-estetico. In questo caso basta indicare all' interno del tag img l' attributo
border="0" per fare in modo che il bordo resti invisibile.
Elementi deprecati (specifica HTML 4.01 del W3C)

Attributi del tag img
align
vspace
hspace
border
Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della
licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second
Street, Suite 300, San Francisco, California, 94105, USA.
6

6 - Link e Immagini

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

6 - Link e Immagini

Caricato da

Copyright:

Formati disponibili

LINGUAGGIO HTML

Titolo: Link e immagini

Linguaggio HTML – Link e immagini

Collegamento a una risorsa esterna

• A un indirizzo di posta elettronica

Collegamento interno al documento html

<a name= “nome ancora”>

Successivamente si impostano i collegamenti.

<a href= “#nome ancora”>

Si possono anche combinare collegamenti esterni e interni.

<a href= “#pagin2a.html#nome ancora”>

Aprire un collegamento in una specifica finestra: TARGET

Il tag img non necessita di essere chiuso.

Esempio 23: Inserire una immagine in una pagina html

Dimensionamento delle immagini

Allineamento delle immagini

Esempio 24: Impostare le dimensioni e l’allineamento di immagini

Why do we use it?

Spazi e bordi delle immagini

<img src= “URI dell’immagine” border= ”spessore bordo”>

Accessibilità e didascalie delle immagini

Elementi deprecati (specifica HTML 4.01 del W3C)

Potrebbero piacerti anche