07 maggio 2010

24-link su una immagine

E se volessi linkare il mio blog a un piccolo banner?
Prenderò il 5° link per fare ciò usando img e scr e alt.
Mi creo un banner, oppure lo prendo dal web, di misure 88 x 31 (è piccolino, carino)
Lo carico su un servizio di hosting per immagini (Flickr, Picasa, Imageshack, Altervista ...) che mi dia un hot link (cioè il link diretto alla mia immagine hostata). Prelevo l'hot link copiandolo negli appunti o in un file di servizio (usare notepad, un editor di testo semplice).

Questo è il codice di partenza:
Ad esso aggiungerò:
<a href="http://fos-ilaron.blogspot.com/" >la strada, la vita... cta</a><br />

  • alt (visualizza il testo alternativo, descrittivo dell'immagine)
  • img (sta per image, immagine)
  • src (significa source, cioè origine)
  • ci aggiungo anche title perchè questo modello fa le bizze...
  • border (il bordo dell'immagine, e può essere 0 [senza bordo] o 1 [con bordo])
  • height (la larghezza dell'immagine, è utile al browser)
  • width (l'altezza dell'immagine, è utile al browser)
Ecco il codice finale:
Senza addentrarci troppo nel linguaggio HTML, possiamo capire che:
<a href="http://fos-ilaron.blogspot.com/"
<img alt="la strada, la vita... cta" title="
la strada, la vita... cta" border="0" height="31" width="88" src="http://mdwxmw.bay.livefilestore.com/y1p9ugN1SRmnFYUBPFl0yl9Nw9GzxwXJiyFOFHTZe15gtW3eTzvlfwzxG1ovl0lRhiD59OzT5nuPSnge1S0HfU8pA/bot_am_cta1.bmp" /></a>

a href indica il link alla pagina dove andremo.
img indica le proprietà dell'immagine che stiamo per caricare: larghezza, altezza, bordo, titolo, testo alternativo.
src indica il link in cui è ospitata l'immagine che qui vogliamo richiamare, qui va incollato l'hot link di cui ho parlato sopra.
Non spaventarti per la lunghezza di questo link: è windows skydrive che dà link così complicati (altri servizi danno link più brebi e semplici) ma, dovendolo semplicemente incollare, non può complicare la vita...
Il risultato è in sidebar.
newbie ;)

Nessun commento: