Como Adicionar um Hiperlink com HTML

Tem quem ache difícil criar um link em HTML. É o seu caso? Este tutorial o ajudará a entender que não é tão difícil assim. E o melhor: você aprenderá rapidinho.

Passos

Baixe em PDF

Se você estiver usando o Windows, pode ser o Bloco de Notas ou o Notepad++, por exemplo. Para quem usa o Mac OS, o TextEdit é uma boa sugestão. Em outras palavras, dá para criar um código HTML em praticamente qualquer editor de textos, em qualquer sistema operacional (até no Android).
2
Crie a estrutura HTML do documento. Insira tag por tag até o ponto em que só fique faltando acrescentar o link. E, já que todo link precisa ser visto pelo usuário, ele deve ser colocado entre as tags <body> e </body>.
- Escreva cada tag da estrutura em uma linha diferente, lembrando que a estrutura básica de qualquer página HTML segue este padrão:
  - <html>
  - <head>
  - </head>
  - <body>
  - </body>
  - </html>
Digite as tags de abertura e de finalização do link. A tag de abertura é: <a href=" "> e a tag de finalização é </a>. Aliás, para sempre se lembrar de qual é a tag certa para criar um link, basta entender que o “a” significa âncora, que é o nome técnico do link.
Seja preciso, porque o link só funcionará se a URL de destino estiver escrita corretamente, como ela aparece na barra de endereços do navegador.
5
Dê um título ao link. O título é exatamente o que o usuário da página verá e onde ele clicará antes de ser levado para o endereço de destino. Digite o texto entre a tag de inicialização e a tag de finalização (depois do sinal de maior da primeira tag “>” e antes do sinal de menor “<” da segunda tag).
- Se quiser, em vez de colocar um título, é possível substituí-lo por uma imagem. Dê uma olhada aqui para aprender e lembre-se de que a única novidade no processo será a inserção da tag <img> entre as tags do link: <a href=""> e </a>. Ou seja, o raciocínio continuará sendo o mesmo.
6
Salve o arquivo com a extensão “.html” e abra-o no navegador para ver o resultado. A maioria dos editores de texto não permite a visualização de uma página web, por isso o código deve ser salvo primeiro e depois aberto no navegador.
- Na verdade, existiam alguns editores que possibilitavam visualizar e testar a página em tempo real, sem a necessidade de salvá-la primeiro e depois abri-la no navegador. Um deles era o Microsoft FrontPage. Hoje, existem programas similares e muito mais completos que fazem o mesmo: o Dreamweaver é um exemplo – ele é disponibilizado dentro do pacote CC da Adobe, que também inclui o famoso Photoshop.
Visualize a página. Não basta conferir o código e presumir que não haverá nenhum erro na página. Será muito desagradável descobrir o erro através do usuário que não conseguiu chegar ao destino devido a um link quebrado. Portanto, comece conferindo o código do link, que deve ficar mais ou menos assim: <a href="http://www.apaginadedestinoaqui.com.br">Clique aqui</a>.
Publicidade

Dicas

Não se esqueça de salvar o arquivo como “.html”. No Bloco de Notas, quando estiver salvando, mude a caixa de seleção “Tipo” da opção “Texto” para a opção “Todos os arquivos”.
É possível criar âncoras para seções dentro de uma mesma página web, algo que se faz muito quando é necessário criar índices de manuais e livros, além de seções de ajuda e perguntas frequentes. Dê uma olhada aqui para aprender. Esse é um recurso tão versátil que, atualmente, os sites chamados de “single page” o têm adotado nos menus principais.
Se quiser mudar um pouco o visual do link, use o parâmetro “style” ou crie um CSS.