Índice:
Vídeo: Curso de HTML e CSS - Camadas da Web - HTML, CSS e JS: como funciona? [Aula - 00] 2025
Hiperlinks, ou simplesmente links, conecte páginas HTML e outros recursos na web. Você pode vincular seu site ou páginas no seu site a uma variedade de recursos on-line:
-
Outras páginas HTML (em seu site ou em outro site)
-
Localizações diferentes na mesma página HTML
-
Recursos que nem sequer são páginas HTML, como endereços de e-mail, imagens e arquivos de texto ou downloads para visitantes
Os locais, legendas e destinos do link exercem uma enorme influência sobre a forma como os visitantes do site percebem os links. O tipo de link que você cria é determinado pelo que você vincula e como você formula sua marcação de link.
Links absolutos
Um link absoluto usa um URL completo para conectar navegadores a uma página da Web ou recurso on-line.
Os links que usam um URL completo para apontar para um recurso são chamados absoluto porque eles fornecem um caminho completo e autônomo para outro recurso da Web. Quando você liga a uma página no site de outra pessoa, o navegador da Web precisa de cada bit de informações no URL para encontrar essa página. O navegador começa com o domínio no URL e funciona através do caminho para um arquivo específico.
Quando você liga a arquivos no site de outra pessoa, você sempre deve usar URLs absolutas no atributo href do elemento âncora. Aqui está um exemplo:
// www. site . com / diretório / página . html
Relative links
A link relativo usa um tipo de abreviatura para especificar um URL para um recurso ao qual você está apontando.
Use as seguintes diretrizes com links relativos em suas páginas HTML:
-
Crie ligações relativas entre recursos no mesmo domínio.
-
Como ambos os recursos estão no mesmo domínio, você pode omitir informações de domínio do URL.
A relativa URL usa a localização do recurso que você liga de para identificar a localização do recurso que você liga a (por exemplo, página. Html).
Um link relativo é semelhante a dizer a alguém que ele ou ela precisa ir ao Mall Eastside. Se a pessoa já sabe onde é o Eastside Mall, ele ou ela não precisa de instruções adicionais. Os navegadores da Web se comportam da mesma maneira.
Se você usa links relativos em seu site, seus links ainda funcionam se você alterar
-
Servidores.
-
Nomes de domínio.
Links simples
Você pode aproveitar os URLs relativos quando você cria um link entre as páginas no mesmo site. Se você quiser fazer um link de // www. meu site. com / home. html para // www. meu site. com / about. html, você pode usar esse URL relativo simplificado em um elemento âncora em casa.html:
Saiba mais sobre nossa empresa.
Quando um navegador vê um link sem um nome de domínio, o navegador assume que o link é relativo e usa o domínio e o caminho da página de vinculação para encontrar a página vinculada. O exemplo anterior funciona apenas se estiver em casa. html e aproximadamente. html estão no mesmo diretório, no entanto.
Links do site
À medida que o seu site se torna mais complexo e você organiza seus arquivos em várias pastas, você ainda pode usar links relativos. No entanto, você deve fornecer informações adicionais no URL relativo para ajudar o navegador a encontrar arquivos que não residam no mesmo diretório que o arquivo do qual você está vinculando.
Use … / (dois períodos e uma barra) antes do nome do arquivo para indicar que o navegador deve mover um nível na estrutura do diretório.
A marcação para este processo de navegação do diretório parece assim:
Documentação home
A notação neste elemento âncora instrui o navegador para que siga estas etapas:
-
Mover para cima uma pasta da pasta em que o documento de ligação é armazenado em
-
Encontre uma pasta chamada docs.
-
Dentro dessa pasta, encontre um arquivo chamado casa. html.
Quando você cria um link relativo, a localização do arquivo a que você liga é sempre relativa ao arquivo de que você vincula. À medida que você cria um URL relativo, traça o caminho que um navegador leva se ele começar na página da qual você está ligando para chegar à página para a qual você está ligando. Esse caminho define o URL que você precisa.