Due elementi html da conoscere: link e immagini

Un po’ di storia geek: i collegamenti ipertestuali sono stati uno dei concetti più rivoluzionari introdotti dalla navigazione internet. Fino all’avvento del web, infatti,  i testi potevano essere letti solo in maniera lineare, pagina dopo pagina, mentre grazie ai link, i documenti diventano iper-testi, che si possono leggere in maniera non sequenziale e sono collegati tra di loro da una rete di collegamenti.

Anatomia di un link

Il link ha:

• un’origine (parola o immagine da cui parte)
• una destinazione (l’indirizzo al quale vogliamo arrivare)

Nella sua forma più semplice si scrive cosi:

<a href="http://puntodarrivo.com">Eccovi un link</a>

L’origine (Eccovi un link) è racchiusa tra i tag di apertura <a> e chiusura </a> mentre con l’attributo href indico al browser il punto di arrivo.

Notate le virgolette FON-DA-MEN-TA-LI (ebbene sì, merita il tutto maiuscolo e la sillabazione!) all’inizio e alla fine dell’indirizzo di destinazione. Sappiate che se non li mettete, verrà fuori un gran paciugo, quindi se dopo aver creato il link il risultato non è quello che vi aspettavate, tornate indietro a vedere che le virgolette siano a posto!

I programmi di blogging rendono questo processo molto semplice: scrivo un testo, lo evidenzio, clicco sul pulsante “link” (di solito sembra una catena) e via.

Ma c’è un caso in cui dovete scrivere questo codice a mano.

Inserimento nella barra laterale o in un widget di un’immagine con link

Per fortuna in WordPress non è più così: ci sono dei widget predefiniti che vi fanno inserire le immagini agevolmente

Eh sì, sia in Blogger che in WordPress se volete inserire un’immagine nella barra laterale e volete farla puntare a qualcosa dovete usare due elementi html: <a> e <img>.

Il formato è esattamente quello di cui sopra, solo che invece di mettere una parola tra <a> e </a> mettete un’immagine come segue:

<a href="http://puntodarrivo.com"> <img src="https://miosito.com/cartella-immagini/immagine01.jpg" /></a>

Quello che mettete tra le virgolette (fate sempre attenzione) dopo src è il posto in cui avete salvato l’immagine.

Trucchetto risparmia tempo

Nella colonna laterale non esistono funzioni automatiche di inserimento (ok non è vero, ci sono dei plugin di WordPress per farlo, ma oggi siamo qui per imparare le basi!) quindi se non avete voglia di scrivere il codice fate così

• aprite una pagina
• inserite un’immagine con la funzione automatica del vostro programma di blogging
• selezionate l’immagine e inserite un link in modo automatico
• andate nella visualizzazione codice (in WordPress si chiama Testo, in Blogger HTML), copiate tutta ‘sta spatafiata e incollate nel widget di testo della barra laterale in cui volete far apparire l’immagine linkata.

Poi, se proprio volete fare contenti me, Google e i signori del Web Standard aggiungete:

• Alle immagini e ai link: title=”Titolo del link o dell’immagine” – testo aggiuntivo
• Alle immagini: alt=”Brevissima descrizione dell’immagine” – se per un motivo qualsiasi l’immagine non può essere visualizzata (esempio browser testuale) questo testo alternativo viene usato.

Complimenti, avete superato indenni la scrittura delle vostre prime linee di codice!