Um site é uma coleção de páginas da web. e essas páginas precisam estar vinculadas ou conectadas por algo. E, para isso, precisamos usar uma tag fornecida pelo HTML: o a
tag. Ele define um hiperlink, que é usado para vincular de uma página para outra. E o atributo mais importante do a
elemento é o href
atributo, que indica o destino do link.
Neste guia, mostrarei como criar hiperlinks HTML usando o método href
atributo no a
tag.
O que é um link?
Um link é um texto clicável que permite navegar de uma página para outra ou em uma parte diferente da mesma página. E no desenvolvimento da Web, existem várias maneiras de criar links, mas o mais comum é usar o a
tag e o href
atributo. Este último é o local onde especificamos o endereço de destino do link.
o a
A tag nos ajuda a criar três tipos principais de links: um link interno, um link externo e um link âncora. Dito isto, agora podemos descobrir como criar um link interno na próxima seção.
Como criar links internos
Quando se trata de criar um site, faz sentido ter uma conexão entre as páginas. E desde que esses links permitam navegar da página A para a página B, é chamado de link interno, pois está sempre no mesmo nome de domínio ou no mesmo site para ser mais preciso. Portanto, um link interno é um link que permite navegar para outra página em um site.
Agora, considerando nossa pasta está estruturada da seguinte maneira
├── folder1| └── page2.html├── page1.html├── index.html
Aqui temos três casos de uso e, para cada um, criaremos um exemplo.
Navegue para páginas no mesmo nível
Browse to Page 1
Como você pode ver, a página page1.html
está no mesmo nível, portanto, o caminho da href
O atributo é apenas o nome da página.
Navegue para páginas localizadas em outra pasta
Browse to Page 2
Aqui, temos um caso de uso diferente, pois a página que queremos visitar agora não está no mesmo nível. E para poder navegar para essa página, devemos especificar o caminho completo do arquivo, incluindo a pasta.
Ótimo! Vamos agora mergulhar no último caso de uso.
Navegue de uma página localizada em uma pasta para a raiz
Browse to the Home Page
Agora, aqui para navegar para o index.html
página, devemos primeiro subir um nível antes de poder navegar para essa página.
Dito isto, agora cobrimos links internos, vamos seguir em frente e apresentar como navegar para links externos.
Como criar links externos
É sempre ótimo e útil ter a capacidade de não apenas navegar entre as páginas de um site, mas também navegar para sites externos.
Browse to Google
Como você pode ver aqui, para navegar para o Google, precisamos especificar seu URL para o href
atributo.
Links externos e internos são usados para navegar da página A para a página B. No entanto, às vezes queremos permanecer na mesma página e navegar para uma parte específica. E para fazer isso, temos que usar algo chamado link âncora, vamos mergulhar nele na próxima seção.
Como criar links âncora
Um link de âncora é um pouco específico, pois permite navegar de um ponto A para um ponto B enquanto permanece na mesma página. Também pode ser usado para ir para uma parte em outra página.
Navegue na mesma página
Go to the anchor
Comparando com os outros, este é um pouco diferente. Na verdade, é, no entanto, funciona da mesma maneira.
Aqui, em vez de um link de página, temos uma referência a um elemento e, quando clicamos no link, ele procurará um elemento com o mesmo nome sem a hashtag (about
) e se encontrar esse ID, ele navegará para essa parte.
Navegue em outra página
Go to the anchor
É praticamente o mesmo que o anterior, exceto que temos que definir a página na qual queremos navegar e adicionar a âncora a ela.
Conclusão
o href
é o atributo mais importante do a
tag. Ele nos permite navegar entre as páginas ou apenas uma parte específica de uma página. Felizmente, este guia o ajudará a criar um site com muitos links.
Obrigado pela leitura.
Sinta-se à vontade para me procurar!
TWITTER BLOG BOLETIM DE NOTÍCIAS GITHUB LINKEDIN CODEPEN DEV