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. <fine geek alert />

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 di un’immagine con link

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=”http://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!

By Francesca Marano

WordPress Core team lead at Yoast. Prima ero la WordPress Community e Partnership manager SiteGround. Ho creato C+B, contribuisco a WordPress full-time. Ho un gatto, un figlio, un fidanzato e un ex-marito bellissimi e che mi hanno aiutata ad arrivare fin qui.

4 comments

  1. Ciao Francesca, prima di tutto complimenti per l’aiuto che dai a noi poveri neofiti. Ho un problema sul link widget di testo di wordpress. Come da te sopra detto il codice per il link è Eccovi un link e qui niente di nuovo. In Pratica nominando il titolo COMUNICAZIONI, inserisco poi nell’area messaggio il citato link conformemente a quello da te indicato (naturalmente modificandolo secondo le mie esigenze). Nella visualizzazione, nella pagina, comparirà il titolo COMUNICAZIONI e al di sotto un testo cliccabile. GIUSTO?
    Io invece vorrei che sotto il titolo non appaia alcun testo ma che sia lo stesso titolo ad essere cliccabile verso un link prestabilito. Inserendo il link della pagina Eccovi un link senza in questo caso Eccovi il link, il titolo non è cliccabile. Spero di essere stato chiaro nell’esposizione.
    Come posso fare? Grazie.

  2. Payday Loans

    emergency loans bad credit loans
    top payday loans 1 hour loans
    fast cash emergency loans
    money lender 1 hour payday loan
    need cash now payday direct lenders

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.