Tutorial HTML Básico: Como Linkar Imagens!

Uma das maiores dificuldades de quem está começando a blogar é lidar com imagens.

Seja editando, seja linkando, imagens se tornam um problema até o dia em que vem como que por encanto a descoberta de como funciona o tal do link!

Imagem: stock.xchng

Já falamos aqui sobre como criar um link e até no mesmo tutorial falamos do básico sobre imagens.

Mas hoje vamos nos aprofundar no assunto e aprender o básico para lidar com imagens com segurança daqui pra frente!

Basicamente, tudo o que precisamos para linkar uma imagem é um código assim:

<a href=”endereço”><img src=”endereço da imagem” alt=”Descrição da imagem”/></a>

Onde:

• endereço: é o endereço do site ou página que você quer que se abra ao clicar na imagem.
• endereço da imagem: é a url da imagem.

E é daqui que vamos partir!

Para começar, o que você precisa entender é que para que possamos usar uma imagem ela precisa estar armazenada, hospedada em algum lugar.

Para isso, podemos usar serviços gratuitos ou pagos, essa escolha é de cada um, mas é necessário que essa imagem esteja on-line para poder ser utilizada.

Entendido isso, você precisa agora conhecer o código e o que controla o que na hora de usar uma imagem.

Para fazer com que uma imagem apareça no seu blog, você precisa apenas de um código assim:

<img src=”endereço da imagem”/>

Simples assim!

Agora, para criar um link, você precisa de um código assim:

<a href=”endereço”>Link</a>

Onde a palavra link representa o que irá de fato aparecer on-line.

Então, para linkar uma imagem, o que precisamos fazer é juntar o código do link ao código da imagem. Assim:

<a href=”endereço”><img src=”endereço da imagem”/></a>

E pronto, temos uma imagem linkada!

Isso é o básico e a base para toda e qualquer imagem linkada que você encontra pela rede.

Agora vamos conhecer os detalhes que fazem com que o link fique mais “apresentável”.

Para mostrar um texto quando o mouse fica parado por alguns segundos sobre a imagem use a tag title. Fica assim:

<a href=”endereço” title=”texto que você quer que apareça”><img src=”endereço da imagem”/></a>

Para fazer com que o link abra em outra página, use a tag target=”_blank”. Fica assim:

<a href=”endereço” target=”_blank”><img src=”endereço da imagem”/></a>

E para garantir que o link irá aparecer mesmo que a imagem não apareça na tela, usamos a tag alt. Fica assim:

<a href=”endereço”><img src=”endereço da imagem” alt=”Um texto qualquer”></a>

Agora vamos ver um exemplo com tudo o que aprendemos:

Como você pode ver na imagem acima, eu criei um link para a primeira página do blog baseado no logotipo do blog. Aqui está o código:

<a href=”http://ikaro.net.br/” target=”_blank” title=”Ikaro Brasil”><img src=”http://1.bp.blogspot.com/_NiOrby0FW3k/SosVz0roVhI/AAAAAAAACAc/J5VBZivDyHg/S1600-R/IkaroBrasilLogo.PNG” alt=”Ikaro Brasil”/></a>

É isso! Espero que agora você não tenha mais dificuldades na hora de linkar uma imagem!

Até o próximo tutorial!