Come inserire immagini e link

Se volete inserire immagini o link nella vostra colonna di navigazione (o in una qualsiasi pagina web),
dovete usare dei codici del linguaggio HTML detti tag (marcatori).

Vediamo quindi questi tag e i loro principali attributi, cioè quei comandi che si occupano di definire
alcune caratteristiche.

 

INSERIRE IMMAGINI

 

Per inserire un’immagine dovete scrivere questo codice:

<img src=”indirizzo_immagine” />

Attenzione! L’immagine non dovrà essere sul vostro computer, ma caricata in rete.

Se non avete uno spazio web, potete usare uno dei siti di hosting immagini gratuiti che trovate elencati
nella sezione Siti Utili.

Scrivendo semplicemente in questo modo, è possibile che attorno all’immagine compaia un bordo. Per eliminarlo non dovete fare altro che aggiungere un piccolo attributo:

<img src=”indirizzo_immagine” border=”0″ />

Come potrete immaginare dal nome stesso, border si occupa di specificare le dimensioni del bordo; se lo mettete a zero il bordo scomparirà, se usate valori come 1, 2, 3 eccetera il bordo diventerà via via più grande.

Volendo scrivere un codice migliore, ci sono altri tre attributi da inserire nel codice del’immagine:
quelli riferiti a larghezza e altezza dell’immagine (width e height) e
l’attributo alt, nel quale viene fornita una brevissima descrizione dell’immagine.

<img src=”indirizzo_dell’immagine” border=”0″ width=”xxx” height=”yyy” alt=”descrizione dell’immagine” />

Al posto di xxx e yyy dovete naturalmente scrivere la larghezza e l’altezza in pixel dell’immagine (se non le conoscete, basta cliccare col tasto destro del mouse sull’immagine in questione, e poi cliccare su ‘proprietà’)

Questi tre attributi hanno uno scopo ben preciso.

Per quanto riguarda le dimensioni, se le fornite il vostro browser (cioè il programma con cui navigate) saprà già quanto spazio lasciare per l’immagine anche prima che questa venga caricata. In questo modo si evita di vedere quello “spostamento” del testo che si nota talvolta, quando il testo “scorre” sullo schermo man mano che le immagini vengono caricate e inserite al loro posto.

L’attributo alt fornisce invece del testo alternativo: nel momento in cui per qualche motivo l’immagine non dovesse visualizzarsi, comparirebbe al suo posto il testo con la descrizione.
Ha anche un’altra funzione: fornire ai browser per non vedenti qualcosa da leggere, che permetta di capire il contenuto delle immagini. Senza l’attributo alt la navigazione con questo tipo di browser diventa molto difficile, se non impossibile.

INSERIRE LINK

Per inserire un link il codice da scrivere è questo:

<a href=”indirizzo_del_link”>testo del link</a>

In questo modo la pagina web che avete linkato si aprirà nella stessa finestra.
Se volete invece che si apra in un’altra finestra, dovete inserire l’attributo target:

<a href=”indirizzo_del_link” target=”_blank”>testo del link</a>

Infine se volete che passando il mouse sul link compaia del testo con una brevissima descrizione del collegamento o il titolo della pagina web che state linkando, dovete usare l’attributo title:

<a href=”indirizzo_del_link” target=”_blank” title=”testo da visualizzare”>testo del link</a>

INSERIRE IMMAGINI E LINK

A questo punto possiamo combinare i comandi visti sopra per ottenere un’immagine che sia anche un link.

Diciamo ad esempio che volete inserire un banner che faccia da collegamento per il blog/sito di un vostro amico.

Tutto quello che dovete fare è mettere insieme i tag <img> e <a href>, in questo modo:

<a href=”indirizzo_del_blog” target=”_blank”><img src=”indirizzo_del_banner” border=”0″ width=”xxx” height=”yyy” alt=”il blog di …” /></a>

 

Torna all’indice dei tutorialsVai alla discussione sul forum