Qual é a diferença entre um URL relativo e um URL absoluto?
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.
Todo site precisa fazer referência a determinados recursos, sejam imagens, arquivos ou outras páginas da web. Decidir como vincular outros arquivos é extremamente importante para garantir que os navegadores os localizem corretamente.
Você pode vincular recursos usando uma URL relativa ou absoluta. Isso se aplica tanto a arquivos locais em um computador quanto a 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 os arquivos em seu computador:
- arquivo:///C:/Users/Sharl/Desktop/test.html
- arquivo:///C:/Users/John/Documents/Work/Q4Summary.docx
- arquivo:///C:/Users/Mark/Documents/Music/Recording.mp3
Outro exemplo inclui uma URL de protocolo completa, que você pode usar para identificar um recurso a ser enviado pela Internet. Mais comumente, 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 vinculando a um site externo.
- Crie um site simples em HTML criando uma nova pasta e adicionando dois novos arquivos chamados index.html e styles.css.
Em index.html, adicione algum código HTML para criar um site básico:
<!DOCTYPE html> <html lang="en"> <head> <title> My Website </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" > <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="container"> <h1> My Website </h1> <p> Welcome to my website. </p> </div> </body> </html>Emstyles.css, adicione algum estilo à página da web.
body { font-family: Arial, Helvetica, sans-serif; } .container { display: flex; flex-direction: column; align-items: center; } .mb28 { margin-bottom: 28px; }Em index.html, adicione uma tag dentro do div do contêiner e adicione o URL absoluto do site principal do Google (https://www.google.com).
<a href="https://www.google.com" class="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 à sua página HTML.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600">Clique no arquivo index.html 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 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 arquivo CuteBird.jpg 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 e adicionar uma barra extra antes da letra da unidade, por exemplo:
<img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">Clique no arquivo index.html 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
- Imagens/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:
- /sobre
- /contato
- /projetos/clientes locais
Você pode usar um URL relativo para criar links ou imagens de referência dentro de sua página 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.
Preencha Bird1.html com código HTML para criar a página.
<!DOCTYPE html> <html lang="en"> <head> <title> Bird 1 </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" > <link rel="stylesheet" href="../styles.css" /> </head> <body> <div class="container"> <h1> Coffee </h1> <p> Coffee is a sweet bird who loves to game! </p> </div> </body> </html>-
Dentro do div do contêiner, adicione uma tag de imagem e use uma URL relativa para vincular à imagem CuteBird.jpg.
<img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700"> No arquivo index.html , remova o conteúdo existente dentro da div do contêiner. Substitua-a por uma única tag a que use um link relativo para abrir o arquivo Bird1.html.
<div class="container"> <h1> My Website </h1> <p> Welcome to my website. </p> <a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a> </div>Clique no arquivo index.html para abri-lo em um navegador e clique no novo link para navegar até Bird1.html.
Acessando arquivos usando links de URL absolutos ou relativos
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 podem acessar sejam seguros.