Como criar links

Atualizado dia 31/05/2015.

Descobri hoje que Link também é o personagem de um jogo chamado Zelda.

Pelo título vocês já sabem que é um tutorial para quem está começando a aprender HTML. Entender como funcionam os links é um dos aprendizados mais divertidos dessa linguagem.

Para testar este e todos os demais tutoriais de código em seu blog, você tem que escrever seu post no modo HTML. No Blogger basta você clicar na aba Editar HTML. Para visualizar o resultado clique Visualizar. Jamais clique em Escrever, essa função “avacalha tudo”, evite-a fervorosamente.

• Links de texto
• Link de voltar ao topo
• Imagens que são links

Links de texto

Veja e teste o código abaixo:

Hoje eu aprendi a criar links no blog <a href='http://www.meutedio.com.br' target='_blank' title='HTML, CSS e afins…'>HTMHelen</a>.

Hoje eu aprendi a criar links no blog HTMHelen.

O código de link começa com a tag <a> e termina com </a>, sendo que:

href='http://www.meutedio.com.br'

Este é o destino do link e único atributo obrigatório para o link funcionar. Você tem que colocar entre as aspas o endereço exato do seu destino, que pode ser uma página externa http://, um e-mail mailto:, um arquivo para download via FTP ftp://, dentre outros.

target='_blank'

Aqui você define onde a página apontada vai abrir. Neste exemplo utilizei target='_blank', que faz a página abrir em uma nova janela ou aba, como expliquei neste post.
Para abrir na mesma janela não coloque “target” ou coloque target='_top'.
Se o site utiliza “frame” ou “iframe” e você quer abra na mesma moldura, utilize target='_self'. Para abrir no “frameset-pai”, utiliza-se target='_parent'.

title='HTML, CSS e afins…'

Nesse atributo você coloca o texto que deve aparecer quando a pessoa coloca o cursor do mouse sobre o link. Utilize title para explicar o conteúdo da página “linkada” (como no meu exemplo) ou para dizer a onde o link leva.
Outros exemplos:

<a href='http://www.ufg.br' target='_blank' title='Universidade Federal de Goiás'>UFG</a>

<a href='http://sacoleira.helenfernanda.com' target='_blank' title='Visite meu blog sobre cosméticos'>Sacoleira</a>

<a target='_blank' href='http://pt.wikipedia.org/wiki/Html' title='HTML segundo a Wikipédia'>HTML</a>.

>HTMHelen</a>

Tudo que está entre > e </a> é o texto que vai aparecer em forma de link.

Para aprender a customizar os links com CSS, visite o post Links e sublinhados.

Link de voltar ao topo

Um recurso muito útil em blogs é um link voltar ao topo no final de cada uma das colunas para facilitar a navegação.

1. Entre em Layout » Elementos da página » Adicionar um Gadget.
2. Escolha a opção HTML/JavaScript.
3. Deixe o título em branco e no conteúdo cole o seguinte código:
   <a href='#'>voltar ao topo</a>
4. Salve. Reposicione o gadget recém-criado no final da coluna desejada e salve novamente.
5. Repita o mesmo em cada uma das colunas de seu blog.

Para que esse link apareça em cada post, vá até Configurações » Formatação, cole o código em Modelo de Postagem e salve. Sempre que for criar um novo post o código estará lá. Você pode deixá-lo no início ou no final do post, como preferir.

Imagens que são links

Para inserir uma imagem, o código é algo parecido com:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56NIsex_P2AqaOsXhpLMADlbBMbGg37LWJO0NhciIbcJOSS5mUcybVjfB9xLOOo4HXt75vG-hu16ZqqRjhSi0OtqD4hc7xS95LTLu7F8oCjAkYwUzmZiboaRPWwKIMl695norvpLDcMM7/s400/feed-natal.png' />

Para transformar a imagem acima em um link, basta abrir e fechar um link “em volta” dela:

<a href='http://feeds.feedburner.com/htmhelen' target='_blank' title='Assine o nosso feed'><img alt='Feed HTMHelen' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56NIsex_P2AqaOsXhpLMADlbBMbGg37LWJO0NhciIbcJOSS5mUcybVjfB9xLOOo4HXt75vG-hu16ZqqRjhSi0OtqD4hc7xS95LTLu7F8oCjAkYwUzmZiboaRPWwKIMl695norvpLDcMM7/s400/feed-natal.png' /></a>

Outro exemplo de código:

<a href='http://www.meutedio.com.br' target='_blank' title='HTMHelen'><img src='http://web.htmhelen.com/favicon.gif' alt='HTMHelen' /></a>