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' pagina dello stesso sito la sintassi è: altra

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>

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

1

LINGUAGGIO HTML Titolo: Link e immagini

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">
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

2

LINGUAGGIO HTML Titolo: Link e immagini
</a> Vai al titolo 2

</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………………… </p> </body> </html> </a>

Immagini
Per inserire un' immagine in una pagina HTML basta utilizzare il tag img. <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> <title> Esempio 23 </title> </head> <body> <p> Lorem Ipsum is simply dummy text of the printing and 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>
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

3

LINGUAGGIO HTML Titolo: Link e immagini
</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
L’immagine può essere allineata rispetto al testo circostante mediante l' attributo align. <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> <title> Esempio 24 </title> </head> <body> <p> Lorem Ipsum is simply dummy text of the printing and 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. IMMAGINE ORIGINALE CON ALLINEAMENTO DI DEFAULT <img src="..\Immagini\dali01.jpg"> 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.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

4

LINGUAGGIO HTML Titolo: Link e immagini
Why do we use it? </p> <p> Lorem Ipsum is simply dummy text of the printing and 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. IMMAGINE ORIGINALE CON ALLINEAMENTO MIDDLE <img src="..\Immagini\dali01.jpg" align="middle"> 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? </p> <p> Lorem Ipsum is simply dummy text of the printing and 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. IMMAGINE RIDOTTA CON ALLINEAMENTO RIGHT <img src="..\Immagini\dali01.jpg" align="right" width="400" height="280"> 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? </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' immagine tramite l' attributo border che deve essere espresso in pixel secondo la sintassi:
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

5

LINGUAGGIO HTML Titolo: Link e immagini <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.

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

6

Sign up to vote on this title
UsefulNot useful