Está montando o próprio site, mas não sabe como colocar um link no HTML? Fique tranquilo, pois vamos tirar todas as suas dúvidas sobre esse tema e, ainda, mostrar a importância de aprender esse código.
Aliás, o HTML (HyperText Markup Language) é uma linguagem de marcação no desenvolvimento web. É por meio dela que o desenvolvedor cria a estrutura do site e posiciona cada um dos elementos no seu devido lugar.
Essa linguagem de programação geralmente é utilizada de forma complementar ao CSS (Cascade Style Sheets), que é um código de estilização para tornar a página mais bonita e atrativa.
Em conjunto, essas duas linguagens são utilizadas por cerca de 52,97% de todos os programadores espalhados pelo mundo afora, segundo o Statista.
Sabe a planta de um apartamento? Então, o HTML é basicamente é a reprodução deste documento que norteia a estrutura do site. Por sua vez, o CSS são os objetos decorativos que dão forma, estilo, dinâmica e vida para o apartamento, quer dizer, seu site!
Com essa analogia, ficou fácil de entender, não é mesmo? O fato é que, dentre as diversas funções da linguagem HTML, é com ela que criamos os links, ou as famosas âncoras, para que um usuário consiga conectar as páginas diversas de um site sem dificuldade.
Nesse conteúdo, vamos te explicar como colocar um link no HTML, tanto para abrir um conteúdo na mesma aba do navegador quanto para direcionar o usuário para outra aba.
Confira o artigo até o fim e veja como isso funciona!
Leia também!
Como colocar um link no HTML?
Então, vamos lá: como colocar o link no HTML em um item? O item, no caso, é o que chamamos de ícone ou botão de ação em que o link será incluído. Em geral, ele diz respeito ao nome da página para qual o usuário será redirecionado.
Em outros casos, ele funciona como um botão de ação, ou CTA (call-to-action) , ferramenta digital em que o ícone chama o usuário a tomar uma decisão que o leve a uma conversão, seja em leads ou em vendas. Por exemplo: “Clique aqui para fechar negócio!”.
Enfim, o caminho para adição de um link em linguagem de código HTML tem como elemento principal a tag <a>. Essa letra vem da palavra âncora (ou anchor), termo muito utilizado na linguagem de programação para se referir a links de hipertexto.
Abaixo, segue um exemplo genérico de como colocar um link no HTML para outra página do site. Confira:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.outrapagina.com">
<button>Clique para Ir para Outra Página</button>
</a>
</body>
</html>
Perceba que a tag <a> engloba a parte do texto em que a URL da página e o texto que deve estampar o botão de ação do link estão escritos. Para fechar o código, a / é inserida no final: </a>.
Como colocar o sublinhado em um link no HTML?
E como colocar o sublinhado em um link no HTML? Essa é a maneira mais tradicional de destacar um link em linguagem HTML e, não por acaso, é o modelo padrão que esse tipo de código utiliza em qualquer situação genérica.
Entretanto, é possível estilizar esse sublinhado de acordo com a identidade visual do site da sua marca. Nesse momento, precisaremos da ajuda do CSS para adicionar ao modelo original.
O modelo padrão de sublinha simples do CSS é o seguinte:
a {
text-decoration: underline;
}
Para personalizar ainda mais esse link você pode usar diversas outras funções do CSS, como mudança de cor, contorno, movimento, etc. Basta adicionar e a tag padrão <style> e ajustá-la de acordo com as possibilidades dessa linguagem de programação.
Como colocar um link no meio da página HTML?
Lembra quando falamos do CTA lá em cima? A maioria dos web designers gostam de utilizar esse botão de ação de forma centralizada e destacada em um item no centro da página para chamar a atenção do usuário.
Como esse é um link estratégico para chamar o usuário para conversão, nada mais natural que ele receba o destaque esperado na página, concorda?
Mas, afinal, como colocar um link no meio da página HTML? Confira o código genérico abaixo para você utilizar como base:
<html>
<head>
<style>
/* Estilo para centralizar o link */
.link-centralizado {
text-align: center;
}
</style>
</head>
<body>
<div class="link-centralizado">
<p>Texto do no ícone do link <a href="https://www.exemplo.com">link no meio da página</a>.</p>
</div>
</body>
</html>
O texto .link-centralizado é uma das classes do CSS para dar o comando de centralização do link. Repare que novamente a tag <a> aparece para sinalizar a URL do site para o qual os usuários serão redirecionados.
Como colocar um link no HTML que leve para outra aba?
Existem dois atributos que devem ser adicionados ao código HTML para que o link redirecione o usuário para a nova página a partir de uma nova aba. Esses atributos são o “target”, que deve ser adicionado à tag <a>, e o “_blank”, que transmite o comando ao navegador para a nova aba em branco.
Veja como ele fica:
<a href="https://www.exemplo.com" target="_blank">Abrir em Nova Aba</a>
Viu como é simples?
Como colocar um link no site com a GoDaddy?
Aprendeu como colocar um link no HTML? Esperamos que sim! Para completar, você sabia que é possível fazer não só isso, mas criar toda a interface de um site do zero, sem ter conhecimentos em linguagem de programação?
O Criador de Sites da GoDaddy é uma ferramenta completa que conta com uma enorme biblioteca de templates, fontes tipográficas e banco de imagens para que você consiga customizar as páginas do site de forma simples e intuitiva.
E o melhor de tudo é que você facilmente chega a um resultado profissional para transmitir a máxima credibilidade a qualquer um que navegue pelo seu site!
Experimente gratuitamente o Criador de Sites da GoDaddy e tenha resultados incríveis!
Para entender melhor essa dinâmica, confira o vídeo abaixo do canal da GoDaddy para criar um site profissional do ZERO com nossa ferramenta:
