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:

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/AAAAAAAACA
c/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!
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/AAAAAAAACA
c/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!