Este é o terceiro post da nossa série de tutoriais que vai te ajudar a criar a sua primeira pagina web com HTML e CSS. Neste artigo vamos mostrar como pode criar links HTML CSS, além de dicas para tornar seus links mais atraentes e eficazes em seu site.
Antes de começar esse tutorial você já deve ter um conhecimento básico em HTML e CSS, se ainda não tem, indicamos fortemente que acesse os tutoriais abaixo:
Conteúdo
Como criar links com HTML e CSS
Essa é uma parte essencial de todos os sites, pois os links permitem que os usuários naveguem entre as diferentes páginas e locais do próprio conteúdos. Por isso também é importante garantir que eles sejam estilizados de maneira atraente, para poderem ser identificados facilmente, e é aqui onde o HTML e CSS entram no jogo.
Tag para link no HTML
Para criar um link no HTML, você deve usar a tag <a> juntamente do atributo href, para especificar a URL do link. Por exemplo, se você quiser criar um link para o nosso incrível blog, o código HTML seria: <a href=”https://blog.marcusoliveiradev.com.br”> Blog Dev </a>. Isso iria exibir na tela um link para nosso blog com o texto “Blog Dev”.
Também pode abrir o link em uma nova guia, para isso siga o artigo, aprenda a abrir link em uma nova aba com HTML.
É mesmo muito simples, não é mesmo? Mas agora você verá como pode estilizar o link em seus quatro estados diferentes, e torná-lo mais atrativo.
<!-- tag link HTML -->
<a href="https://blog.marcusoliveiradev.com.br"> Blog Dev </a>
Como estilizar links com CSS
Usando o CSS, você pode estilizar esse link de diversas maneiras. Exemplificando, você pode mudar a cor do texto do link, adicionar uma borda inferior ao link quando o usuário passa o mouse sobre ele, entre outras coisas. Isso permite que você faça com que eles se destaquem na página e sejam facilmente identificados.
Além disso, você também pode usar o CSS para criar diferentes estilos para diferentes estados dos links, como para links normais, um para interação com o mouse, outro para links que já foram clicados e outro para links que estão sendo acessados no momento. Isso ajuda a melhorar a navegação do usuário e a tornar a página mais intuitiva.
Siga abaixa as instruções para cada uma das pseudo-classes (é uma palavra adicionada ao seletor que especifica um estado especial do elemento) no CSS:
- Link: atribuído quando não há nenhum tipo de interação com o link, ou seja, ele em seu estado inicial;
- Hover: especifica quando o usuário está interagindo com o mouse, mas ainda não clicou;
- Visited: esta é quando já tinha visitado essa mesma página anteriormente;
- Active: é referente a ativação do elemento, isso nada mais é do que um clique efetivado.
Exemplos de links HTML CSS
É claro que com esses termos que acabou de aprender você pode estilizar links de infinitas maneiras. Mas é importante citar que não existem regras, desde que fique bom para a experiência do usuário, dito isso veja agora alguns exemplos de links HTML CSS:
/*sem interação*/
a:link{
color:blue;
}
/*interação mouse*/
a:hover{
color:black;
}
/*página visitada*/
a:visited{
color:green;
}
/*interação clique*/
a:active{
color:red;
}
Resultado, links HTML CSS:
Blog DevDúvidas frequentes
A sintaxe correta para criar um link em HTML é a seguinte:
<a href=”URL de destino”>texto do link</a>
A tag <a> é usada para definir o link e o atributo “href” é usado para especificar a URL de destino. O texto que aparecerá como link deve ser colocado entre as tags <a> e </a>. É importante fechar a tag <a> corretamente para evitar erros de marcação.
ara criar um link em HTML, use a tag <a> e defina o atributo “href” para a URL de destino. Por exemplo: <a href=”https://marcusoliveiradev.com.br”>Link de exemplo</a>. O texto entre as tags <a> e </a> será exibido como o texto do link.
Para criar um link externo em HTML, é necessário definir o atributo “href” com a URL completa do site que deseja linkar. Por exemplo:
<a href=”URL de destino”>texto do link</a>
O código acima criará um link para o site “exemplo.com”. É importante incluir o protocolo “http://” ou “https://” no início da URL para indicar que se trata de um link externo. Isso garante que o navegador possa reconhecer o destino do link corretamente.
Como se tornar um Desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
