terça-feira, 9 de dezembro de 2008

Como criar links

Atualizado dia 31/05/2015.
Link da Zelda
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.

Editar HTML

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='http://1.bp.blogspot.com/_HlIyV_enpD8/SRiRa5pXP3I/AAAAAAAAA-Q/bnnawAK41mQ/s400/feed-natal.png' />

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

Feed HTMHelen
<a href='http://feeds.feedburner.com/htmhelen' target='_blank' title='Assine o nosso feed'><img alt='Feed HTMHelen' src='http://1.bp.blogspot.com/_HlIyV_enpD8/SRiRa5pXP3I/AAAAAAAAA-Q/bnnawAK41mQ/s400/feed-natal.png' /></a>

Outro exemplo de código:

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

5 comentários:

  1. So comente pq gosto do jogo Zelda !

    uhauhauhauha

    ResponderExcluir
  2. Vc hj realizou um sonho me cm esse teu tutorial! Já postei e tudo e ficou do jeitinho que eu queria, obrigada!

    ResponderExcluir
  3. Olá Helen,

    Parabéns pelo blog e pelas dicas, hoje em dia na net é difícil encontrar dicas sérias e de qualidade, porém, seu blog tem oferecido isto...

    God bless

    ResponderExcluir
  4. Muito obrigada pelo tutorial, ajudou muito. :D

    ResponderExcluir
  5. Parabéns, essa é a maneira de ensinar de quem realmente sabe, gosta do que faz e tem prazer de passar conhecimentos. A-do-re-i.
    Um abraço.

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.