Por Sharlene Khan

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
instagram viewer

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.

  1. Crie um site simples em HTML criando uma nova pasta e adicionando dois novos arquivos chamados index.html e estilos.css.
  2. 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>
  3. 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;
    }

  4. 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>
  5. 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">
  6. Clique no index.html arquivo para abri-lo em um navegador e visualizar a imagem recuperada de seu local externo.
  7. 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.
  8. 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"
  9. 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:
    foto de pássaro fofo
  10. 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.

  1. Dentro da raiz do diretório do seu site, crie uma nova pasta chamada Páginas.
  2. Dentro da nova pasta Pages, crie um novo arquivo chamado Bird1.html.
  3. 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>
  4. 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">
  5. 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>
  6. 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.

CompartilharTweetarCompartilharCompartilharCompartilhar
cópia de
E-mail
Compartilhe este artigo
CompartilharTweetarCompartilharCompartilharCompartilhar
cópia de
E-mail

Link copiado para a área de transferência

Tópicos relacionados

  • Programação
  • Desenvolvimento web
  • HTML
  • Sistema de arquivo

Sobre o autor

Sharlene Khan (60 Artigos Publicados)

Shay trabalha em tempo integral como desenvolvedor de software e gosta de escrever guias para ajudar outras pessoas. Ela é bacharel em TI e tem experiência anterior em Garantia de Qualidade e tutoria. Shay adora jogar e tocar piano.

Mais de Sharlene Khan

Conversação

Ler ou postar comentários ()

Assine a nossa newsletter

Junte-se à nossa newsletter para obter dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!

Clique aqui para se inscrever