Links e imagens são dois dos recursos mais comuns que você adicionará às suas páginas da Web, portanto, saber como abordá-los corretamente é fundamental.
Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.
Todo site precisa fazer referência a determinados recursos, sejam eles imagens, arquivos ou outras páginas da web. Decidir como vincular a outros arquivos é extremamente importante para garantir que os navegadores os localizem corretamente.
Você pode vincular a recursos usando um URL relativo ou absoluto. Isso se aplica a arquivos locais em um computador e URLs baseados em protocolo acessados pela web.
Como usar um caminho de URL absoluto
Um URL absoluto contém o caminho completo para um local de arquivo específico. Exemplos disso incluem o caminho completo para arquivos em seu computador:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Outro exemplo inclui um URL de protocolo completo, que você pode usar para identificar um recurso a ser enviado pela Internet. Mais comumente, eles começam com "https" ou "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
A URL absoluta contém todas as informações necessárias para localizar o arquivo ou recurso que você está tentando acessar. Isso é necessário se você estiver criando um link para um site externo.
- Crie um site simples em HTML criando uma nova pasta e adicionando dois novos arquivos chamados index.html e estilos.css.
- Em index.html, adicione algum código HTML para criar um site básico:
<!DOCTYPE html>
<html idioma ="pt">
<cabeça>
<título> Meu website </title>
<meta charset ="UTF-8">
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1">
<link rel ="folha de estilo" href="estilos.css" />
</head>
<corpo>
<classe div ="recipiente">
<h1> Meu website </h1>
<p> Bem-vindo ao meu site. </p>
</div>
</body>
</html> - Em estilos.css, adicione um pouco de estilo à página da web.
corpo {
família de fontes: Arial, Helvetica, sans-serif;
}.recipiente {
exibição: flexível;
flex-direction: coluna;
itens de alinhamento: centro;
}.mb28 {
margem inferior: 28px;
} - Em index.html, adicione um tag dentro do contêiner div e adicione o URL absoluto ao site principal do Google ( https://www.google.com).
<a href="https://www.google.com" turma="mb28">Google.com</a> - Você também pode acessar imagens online usando o caminho absoluto completo para o arquivo armazenado. Você também pode executar etapas extras para garantir que adicionou imagens responsivas ao seu HTML página da Internet.
<img src ="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formato&ajuste=corte&w=3870&q=80" alt="foto de pássaro fofo" turma="mb28" largura="900" altura="600"> - Clique no index.html arquivo para abri-lo em um navegador e visualizar a imagem recuperada de seu local externo.
- Na pasta raiz do seu site, crie uma nova pasta para armazenar as imagens, chamada Imagens. Dentro da pasta, adicione uma nova imagem e dê um nome a ela, como CuteBird.jpg.
- Identifique o caminho absoluto para o arquivo de imagem que você acabou de adicionar. Você pode fazer isso encontrando-o no caminho de navegação do aplicativo gerenciador de arquivos do seu sistema operacional. Você também precisará adicionar o nome do arquivo ao final do caminho. Por exemplo, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- Em index.html, substitua sua tag de imagem por uma nova imagem que use o caminho absoluto apontando para o CuteBird.jpg arquivo armazenado em seu computador. Lembre-se de adicionar o prefixo file:// para indicar um recurso do sistema de arquivos local. No Unix e no macOS, você pode anexar o caminho absoluto identificado na etapa anterior. No Windows, você precisará substituir as barras invertidas por barras normais e adicionar uma barra extra antes da letra da unidade, por exemplo:
- Clique no index.html arquivo para abri-lo em um navegador e visualizar a imagem armazenada em seu computador.
Como usar um caminho de URL relativo
Um URL relativo armazena apenas parte do URL ou caminho e geralmente é relativo ao local do arquivo ou seção atual de um site.
No exemplo acima, para acessar Logo.ico de index.html usando uma URL relativa, você usaria o caminho "Images/Icons/Logo.ico". Outros exemplos incluem:
- Páginas/Bird1.html
- Images/CuteBird.jpg
- estilos.css
Quando você usa a mesma estrutura de pastas em outro computador, o site ainda poderá recuperar o arquivo. Ao rotear pela Web, em vez de usar o link completo, como " https://example.com/about", você pode usar o roteamento relativo:
- /about
- /contact
- /projects/local-clients
Você pode usar um URL relativo para criar links ou imagens de referência dentro de sua página da Web em HTML.
- Dentro da raiz do diretório do seu site, crie uma nova pasta chamada Páginas.
- Dentro da nova pasta Pages, crie um novo arquivo chamado Bird1.html.
- Preencher Bird1.html com código HTML para criar a página.
<!DOCTYPE html>
<html idioma ="pt">
<cabeça>
<título> pássaro 1 </title>
<meta charset ="UTF-8">
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1">
<link rel ="folha de estilo" href="../estilos.css" />
</head>
<corpo>
<classe div ="recipiente">
<h1> Café </h1>
<p> O café é um doce pássaro que adora brincar! </p>
</div>
</body>
</html> - Dentro do contêiner div, adicione uma tag de imagem e use um URL relativo para vincular ao CuteBird.jpg imagem.
<img src ="../Images/CuteBird.jpg" alt="foto de pássaro fofo" turma="mb28" largura="900" altura="700"> - No index.html arquivo, remova o conteúdo existente dentro do contêiner div. Substitua-o por um único a tag que usa um link relativo para abrir o Bird1.html arquivo.
<classe div ="recipiente">
<h1> Meu website </h1>
<p> Bem-vindo ao meu site. </p>
<a href="Páginas/Bird1.html" turma="mb28">Pássaro 1: Café</a>
</div> - Clique no index.html arquivo para abri-lo em um navegador e clique no novo link para navegar para Bird1.html.
Agora você pode determinar a diferença entre URLs absolutos e relativos. Agora você pode tomar cuidado extra para garantir que seus recursos sejam sempre recuperados.
Você também deve sempre garantir que todos os links que seus usuários possam acessar sejam seguros e protegidos.
