O que são e como criar links?
No post passado aprendemos a estrutura básica do HTML. Hoje vamos aprender sobre os links!
Links são como cordas que ligam janelas. Confuso? Sim. Vou recorrer ao winkpédia. [...] É uma referência num documento em hipertexto a outras partes deste documento ou a outro documento. Saiba mais...
A estrutura básica do código que forma o link é essa:
<a href="http://seulink.com.br">Texto Link</a>
Nós podemos incrementar mais o código, fazendo com que ele abra em uma nova janela adicionando o código target=”_blank”.
O código completo ficaria assim:
<a href="http://seulink.com.br" target="_blank">Texto Link</a>
Podemos também colocar um nome no link, quando colocarmos o mouse em cima do link vai apacer o texto digitado (também é bom para os buscadores como o Google), como na imagem:
O código vai ficar assim:
<a href="http://seulink.com.br" title="Nome do seu link">Texto Link</a>
Mas, e como eu coloco link em imagens?
Não se preocupe, vou ensinar. O código basico das imagens é esse:
<img src="http://dominio.com.br/imagem.jpg"/>
Nos códigos de links que coloquei acima o “Texto Link” é a área clicavel, agora é só substituir o “Texto Link” pelo código da imagem. Além disso eu recomendo acrescentar mais um código que retira a borda da imagem: border=”0″.
O Código completo para linkar imagens ficaria assim:
<a href="http://seulink.com.br" title="Nome do seu link/imagem"><img src="http://dominio.com.br/imagem.jpg" border="0" /></a>
Para fazer o link abrir em uma nova pagina é só seguir o passo citado acima, basta acrescentar target=”_blank” dentro do código do link, não acrescente no código da imagem!
Fácil? Sim. Agora, você já viu aqueles link para e-mail? É diferente dos citados acima. O básico é esse:
<a href="mailto:seuemail@dominio.com.br" title="Nome do seu link">Entre em contato comigo.</a>
Você também pode colocar uma imagem no lugar do “Entre em contato comigo.”, é só colocar o código que coloquei acima.
Gostou? Você aprendeu a linkar, coisa que todo o blogueiro adora. Use para indicar blogs que você gosta e para linkar a fonte de pesquisa de seus posts ou até mesmo linkar os créditos.
Terminamos essa aula aqui. Na próxima vou trazer as formatação de texto.
Outros artigos:
- Coloque efeitos de CSS nos links.
- Como abrir links em nova aba ou janela.
