Inserire un'immagine con link

Seconda MiniGuida tutta per voi…Dopo esserci occupati dell’inserimento di un contatore sul blog (spero vi sia stato utile), mi accingo a spiegarvi un altro semplice gruppo di istruzioni in HTML che vi permetterà d’inserire un’immagine con link.

Ad esempio, potrete inserire un immagine che vi permette, cliccandoci sopra, di inviare una e-mail lanciando automaticamente il software da voi usato, oppure semplicemente riportarvi ad un altro sito o blog (per capirci è un po’ quello che fanno i banner)...

Ma bando alle ciance e passiamo alla pratica…

Innanzi tutto scegliamo l’immagine che vogliamo usare:

io ho scelto l’immagine del logo del sito di cui tra poco vi parlerò…

Scelta l’immagine, dobbiamo caricarla su un sito che la ospiti e che ci restituisca un URL a lei associato. In questa operazione, più semplice a farsi che a dirsi, ci dà una mano il sito di cui ho scelto l’immagine, ImageShack.

Nella pagina principale di ImageShack in upload selezioniamo “image”, poi clicchiamo su sfoglia e selezioniamo la nostra immagine (se vogliamo il sito permette anche di ridimensionare la nostra immagine a seconda della nostra necessità). Fatto questo non ci resta ora che cliccare su “host it!”

Nella nuova pagina troveremo un po’ di codici HTML con accanto la loro funzione, a noi interessa soltanto l’ultimo di tutti, quello con accanto scritto “Direct link to image” che si presenta in questo modo:

http://img152.imageshack.us/img152/2023/headerwhitenj2.jpg

Questo non è altro che l’URL che ci rimanda alla nostra immagine (nel nostro esempio all’immagine del logo del sito).

Adesso che abbiamo l’URL, per inserire la nostra immagine con link nel blog, non ci resta che cliccare su “Personalizza” (in alto a destra nella vostra pagina principale del blog) e in "Elementi pagina" su "Aggiungi un elemento pagina". Vi si aprirà una pagina con tante aggiunzioni che potete fare al vostro blog, scegliete "HTML/JavaScript", date se volete un titolo (potete anche lasciarlo vuoto), e nello spazio sottostante "Sezioni del sito" incollate il codice HTML seguente:

<a href="URL_X"><img src="URL_IMG" alt="URL_X" /></a>

Dove dovrete sostituire URL_X con l’url del sito a cui volete andare cliccando sull’immagine e URL_IMG con l’url fornitovi da ImageShack.

Nel nostro esempio avremo quindi:

URL_X: http://imageshack.us/ (URL del sito fornitore del servizio);

URL_IMG: http://img152.imageshack.us/img152/2023/headerwhitenj2.jpg (URL dell’immagine)

Codice risultante:

<a href="http://imageshack.us/"><img src="http://img152.imageshack.us/img152/2023/headerwhitenj2.jpg" alt=" http://imageshack.us/" /></a>

A questo punto non vi resta che cliccare su SALVA MODIFICHE, posizionare il vostro nuovo elemento nella pagina come meglio credete e in fine salvare tutto con l'apposito tasto SALVA.

Ciò che otterrete sarà qualcosa di simile:





ATTENZIONE: Se volessimo che la nostra immagine avvii in automatico il software per inviare e-mail, nell’URL_X dovremmo andare a sostituire “mailto:proprio_indirizzo_email”.

Un’altra piccola precisazione và fatta nel caso in cui si volesse inserire un’immagine con link, ma il codice HTML fosse disattivato e attivato il codice BB, questo capita spesso nei Forum. In tal caso le istruzioni da inserire sono:

[URL=URL_X][IMG]URL_IMG[/IMG][/URL]

Che ne nostro esempio diventerebbero:

[URL= http://imageshack.us/][IMG] http://img152.imageshack.us/img152/2023/headerwhitenj2.jpg [/IMG][/URL]

Siamo quindi giunti alla fine di questa seconda MiniGuida, a voi l’ardua sentenza se sia chiara o meno, comunque spero utile…Salutandovi alla prossima vi lascio con un piccolo Dizionario dei Tag HTML usati in questa guida per una maggiore comprensione…Alla prox!!


DIZIONARIO DEI TAG HTML USATI:


<a>…</a>

Descrizione

Questo tag, può essere utilizzato per definire un link o un’ancora (detta anche “segnalibro”), oppure per definire contemporaneamente entrambi.

Attributi

href

Indica l’url al quale punta il collegamento ipertestuale. Per esempio:

<a href="http://ilblogdisnoopy.blogspot.com/"> Il Blog di Snoopy</a>

Crea un collegamento ipertestuale all’url del mio blog.

*** *** ***

<img>

Descrizione

Questo tag è utilizzato per inserire un’immagine all’interno di un documento ipertestuale.

Attributi

src

src significa source, cioè origine e accetta un URL. Serve per specificare quale immagine dovrà essere caricata.

alt

Il valore che si assegna a questo attributo rappresenta il testo che viene fornito in alternativa all’immagine per i browser testuali o per quelli in cui si sia optato per una disabilitazione delle immagini. In alternativa, alcuni browser, visualizzano il testo inserito come valore per l’attributo alt al passaggio del mouse sull’immagine per fornire un’ulteriore informazione all’utente.

*** *** ***

NOTA:

Un Uniform Resource Locator o URL è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet, come un documento o un'immagine.

Ad esempio, l'URL di questa pagina è http://ilblogdisnoopy.blogspot.com/