sâmbătă, 30 august 2014

Cum ataşezi un link spre o pagina de internet unei imagini pe un site/blog

Cod html pentru imagine cu link catre o pagina de internet





 când vei dori să ataşezi un link unei imagini pe un site/blog -  adresa generică a acestei acţiuni va arăta întotdeauna cam aşa:

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>

Acum, câteva explicaţii esenţiale:

1) URL este adresa unde vrei să ajungă cei care dau click pe imagine.

2) Foloseşti atributul "target="_blank" numai dacă doreşti ca adresa de destinaţie să se deschidă într-o fereastră nouă. Dacă nu, scoţi acest atribut pur şi simplu.

3) TITLE este ceea ce se va putea citi atunci când cursorul mouse-ului va fi deasupra imaginii, printr-un efect de pop-up. Este citit de către motoarele de căutare şi e bine să conţină cuvinte cheie. În general, TITLE coincide cu Description.

4) În ceea ce priveşte Image URL, este clar că e vorba despre adresa pe care a furnizat-o serverul care face hostingul imaginii, aşa cum am arătat mai sus. Mnoa, şi acum purcedem la o probă practică:

o ţeavă mare şi urâtă îndreptată în sus

Dacă doreşti să vezi imaginea pe centrul paginii, şi nu la dreapta, adaugi înaintea codului <center>iar la final închizi cu </center>.

Exercitiul meu:

Imaginea din blogger fara link spre o pagina de internet:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKi_MB83TCO6XoSCMwCGuv8CVxKU7-h0dIQ-b4BqOI1dkxIi2-VSwLgTLDvSbqfr3611ShZ4VxInNF0ciTChtUnQCw5xj1-DQeXNpOKlOiq8knVadhsvmZpRPS9kxt8ihg-GmUwmOKEEX/s1600/banner-new-20-pantofi-mocasini-balerini.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKi_MB83TCO6XoSCMwCGuv8CVxKU7-h0dIQ-b4BqOI1dkxIi2-VSwLgTLDvSbqfr3611ShZ4VxInNF0ciTChtUnQCw5xj1-DQeXNpOKlOiq8knVadhsvmZpRPS9kxt8ihg-GmUwmOKEEX/s1600/banner-new-20-pantofi-mocasini-balerini.png" height="111" width="320" /></a></div>

si imaginea va fi ca mai jos:

Dupa pa ce atasez link spre un site, respectand asezarea linkului din tutorialul de mai sus, in plus, am pus si atributul  "target="_blank" imediat dupa link - ca sa se deschida in alta fereastra, va arata asa:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://event.2parale.ro/events/click?ad_type=quicklink&aff_code=d471d7870&unique=6f77641d1&redirect_to=https%253A%252F%252Fwww.miniprix.ro%252Ftarget="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKi_MB83TCO6XoSCMwCGuv8CVxKU7-h0dIQ-b4BqOI1dkxIi2-VSwLgTLDvSbqfr3611ShZ4VxInNF0ciTChtUnQCw5xj1-DQeXNpOKlOiq8knVadhsvmZpRPS9kxt8ihg-GmUwmOKEEX/s1600/banner-new-20-pantofi-mocasini-balerini.png" height="111" width="320" /></a></div>

si imaginea se deschide astfel:


Lectia am luat-o de aici: http://cumsablog.blogspot.ro/2008/05/cum-s-asociezi-unei-imagini-de-pe-blog.html