Passo 1 de 7
Reconhecer uma URL absoluta
Reconheça um endereço completo na web e identifique protocolo, domínio e caminho.
Trilha de aprendizado · Nível 2 · Tutorial 5
Determine como localizar páginas e arquivos a partir de uma estrutura de pastas fornecida, distinguindo caminhos relativos de endereços completos na web.
Reconhecer uma URL absoluta
Reconheça um endereço completo na web e identifique protocolo, domínio e caminho. 2 min
Encontrar o ponto de partida de um caminho relativo
Leia uma estrutura de pastas, identifique a origem e diferencie caminhos relativos de endereços completos. 2 min
Apontar para arquivos na mesma pasta
Escreva caminhos para arquivos na mesma pasta e reconheça quando usar o nome do arquivo com ou sem ./. 2 min
Entrar em subpastas
Construa e siga caminhos relativos que entram em uma ou mais subpastas até chegar ao arquivo desejado. 2 min
Subir pastas com ../
Use ../ para subir um ou mais níveis e combine subida e descida para alcançar arquivos em outras pastas. 3 min
Conferir origem, nomes e extensões
Corrija referências conferindo o percurso, os nomes dos arquivos e a localização do documento de origem. 2 min
Aplicação final: localizar páginas e arquivos
Combine o que aprendeu para reconhecer endereços, escrever caminhos e conferir destinos a partir de diferentes origens. 3 min
Passo 1 de 7
Reconheça um endereço completo na web e identifique protocolo, domínio e caminho.
Uma URL é o endereço de uma página ou de outro recurso na web, como uma imagem.
Uma URL absoluta HTTP ou HTTPS é um endereço completo: começa com http:// ou https:// e informa o site e o recurso. Ela não depende da pasta do documento em que é usada.
Exemplo
https://example.org/guias/inicio.html
Esse endereço identifica uma página no site example.org, independentemente da pasta de onde você parte.
Qual opção apresenta uma URL absoluta HTTP ou HTTPS escrita por completo?
Exemplo
Observe: https://example.org/guias/inicio.html
https — a parte antes de ://. Nos exemplos deste tutorial, será http ou https.example.org — o nome que identifica o site, entre :// e a próxima /./guias/inicio.html — a parte depois do domínio, incluindo a primeira /, que indica o recurso dentro do site.Dica
O caminho indica o recurso dentro do site, mas não precisa corresponder a pastas físicas. Não é possível deduzir a organização real dos arquivos apenas olhando a URL.
Na URL https://example.org/imagens/capa.png, associe cada componente ao trecho correspondente.
Toque em um item e depois no par correspondente.
Passo 2 de 7
Leia uma estrutura de pastas, identifique a origem e diferencie caminhos relativos de endereços completos.
Esta árvore mostra quais arquivos estão dentro de cada pasta. No desenho, as pastas aparecem com uma barra no final; os nomes terminados em .html são arquivos. cursos e suporte são subpastas de site.
site/
├── inicio.html
├── cursos/
│ ├── aula.html
│ └── ajuda.html
└── suporte/
├── contato.html
└── ajuda.htmlO documento de origem é o arquivo que contém a referência. O arquivo de destino é o recurso que queremos localizar.
Um caminho relativo usa como ponto de partida a pasta que contém o documento de origem.
site/
├── inicio.html
├── cursos/
│ ├── aula.html
│ └── ajuda.html
└── suporte/
├── contato.html
└── ajuda.htmlO documento de origem é contato.html. Qual pasta serve de ponto de partida para interpretar um caminho relativo presente nesse documento?
ajuda.html é um caminho relativo: depende da pasta do documento de origem.https://exemplo.com/suporte/ajuda.html é uma URL absoluta: informa o endereço completo.Uma URL absoluta continua absoluta mesmo quando aponta para uma página do mesmo site. O que determina essa classificação é a forma do endereço.
Exemplo
Na árvore do exemplo, há um arquivo ajuda.html em cada subpasta:
aula.html, na pasta cursos, a referência ajuda.html aponta para o arquivo de cursos.contato.html, na pasta suporte, a mesma referência aponta para o arquivo de suporte.A referência não mudou; a pasta de origem, sim. Por isso, saber apenas o caminho relativo não basta para determinar o destino.
O documento de origem é contato.html, na pasta suporte, do site exemplo.com. Ele contém as duas referências abaixo. Faça as associações.
Toque em um item e depois no par correspondente.
Passo 3 de 7
Escreva caminhos para arquivos na mesma pasta e reconheça quando usar o nome do arquivo com ou sem ./.
Quando o documento de origem e o arquivo de destino estão na mesma pasta, o caminho relativo pode ser apenas o nome do arquivo de destino, incluindo sua extensão.
Exemplo
site/
├── index.html
├── contato.html
└── guia.pdfOrigem: index.html
Destino: contato.html
Caminho relativo: contato.html
Dica
O ponto de partida é a pasta site, que contém index.html. Não coloque o nome do documento de origem antes do nome do destino.
Os arquivos contato.html e guia.pdf estão na mesma pasta, site.
Partindo de contato.html, complete o caminho até guia.pdf usando apenas o nome do arquivo com a extensão:
Caminho: ____
O trecho ./ significa pasta atual. No início do caminho relativo, ele indica explicitamente a pasta que contém o documento de origem.
Exemplo
Com contato.html e guia.pdf na mesma pasta, estas referências escritas a partir de contato.html são equivalentes:
guia.pdf./guia.pdfAs duas localizam o mesmo PDF. O ./ apenas deixa explícito que a busca começa na pasta atual.
A pasta site contém index.html e contato.html.
A partir de index.html, você usa os caminhos contato.html e ./contato.html. Qual é o resultado?
Passo 4 de 7
Construa e siga caminhos relativos que entram em uma ou mais subpastas até chegar ao arquivo desejado.
Para entrar em uma subpasta, escreva o nome dela seguido de /. Termine com o nome do arquivo. Se houver mais subpastas no percurso, encadeie seus nomes na ordem da árvore, da esquerda para a direita.
site/
├── index.html
└── paginas/
└── contato.htmlExemplo
O caminho é paginas/contato.html: partindo da pasta site, entre em paginas e localize contato.html.
Dica
Nos caminhos para a web, use / para separar os segmentos, não a barra invertida \ usada em alguns sistemas operacionais.
site/
├── index.html
└── materiais/
└── guias/
└── instalacao.pdfPartindo de index.html, ordene os segmentos para chegar a instalacao.pdf. As barras serão colocadas entre eles.
site/
└── paginas/
├── catalogo.html
└── imagens/
├── produtos/
│ └── caneca.jpg
└── banners/
└── oferta.pngExemplo
Comece em paginas, onde está a origem.
imagens: entre nessa subpasta.produtos: dentro de imagens, entre em produtos.caneca.jpg: localize o arquivo nessa última pasta.Cada segmento continua o percurso de onde o anterior parou.
site/
└── paginas/
├── catalogo.html
└── imagens/
├── produtos/
│ └── caneca.jpg
└── banners/
└── oferta.pngComplete com o caminho relativo inteiro: ____
Passo 5 de 7
Use ../ para subir um ou mais níveis e combine subida e descida para alcançar arquivos em outras pastas.
O segmento ../ significa subir um nível: ir para a pasta que contém a pasta atual do percurso.
site/
├── inicio.html
├── paginas/
│ ├── sobre.html
│ └── guias/
│ └── ajuda.html
└── imagens/
└── mapa.pngExemplo
A origem é site/paginas/sobre.html.
Use ../inicio.html: partindo de paginas, o trecho ../ sobe para site. Em seguida, inicio.html indica o arquivo nessa pasta.
Dica
./ permanece na pasta atual; ../ sobe um nível. Nessa origem, ./inicio.html procuraria o arquivo dentro de paginas, não em site.
site/
└── paginas/
├── sobre.html
└── guias/
└── ajuda.htmlA origem é site/paginas/guias/ajuda.html. Ordene os blocos para alcançar sobre.html, na pasta paginas. Os blocos formam um único caminho, sem espaços.
Sua frase
Palavras disponíveis
Para subir dois níveis, repita: ../../. Cada ../ parte da pasta alcançada no trecho anterior. Depois de subir, você pode entrar em outra subpasta.
site/
├── inicio.html
├── paginas/
│ ├── sobre.html
│ └── guias/
│ └── ajuda.html
└── imagens/
└── mapa.pngExemplo
Origem: site/paginas/guias/ajuda.html
Caminho: ../../inicio.html
O primeiro ../ leva de guias para paginas. O segundo leva de paginas para site. Então, o percurso chega a inicio.html.
Exemplo
Origem: site/paginas/sobre.html
Caminho: ../imagens/mapa.png
Suba de paginas para site, entre em imagens e alcance mapa.png. As pastas paginas e imagens são irmãs: ambas estão diretamente dentro de site.
site/
├── inicio.html
├── paginas/
│ ├── sobre.html
│ └── guias/
│ └── ajuda.html
└── imagens/
└── mapa.pngPartindo de site/paginas/guias/ajuda.html, escreva um caminho relativo para mapa.png. Depois, descreva o percurso e indique a pasta de destino.
Escreva pelo menos 10 caracteres (0/10).
Passo 6 de 7
Corrija referências conferindo o percurso, os nomes dos arquivos e a localização do documento de origem.
Atenção
Guia.pdf e Guia.txt são nomes diferentes: a extensão faz parte do nome. Preserve também maiúsculas e minúsculas, pois alguns ambientes diferenciam Guia.pdf de guia.pdf. Esse cuidado vale para os nomes das pastas também.
site/
├── paginas/
│ └── ajuda.html
└── arquivos/
└── Guia.pdfEm ajuda.html, foi escrita a referência arquivo/guia.txt. Substitua essa referência pelo caminho relativo correto para chegar a Guia.pdf.
Mover apenas o documento de origem pode exigir outro caminho relativo, mesmo que o destino continue no mesmo lugar. Refaça o percurso a partir da nova pasta de origem.
Exemplo
Destino fixo: site/arquivos/Guia.pdf.
site/index.html, use arquivos/Guia.pdf.site/paginas/index.html, use ../arquivos/Guia.pdf.O nome do documento de origem não mudou, mas sua pasta mudou.
site/
├── paginas/
│ └── guias/
│ └── ajuda.html
└── arquivos/
└── Guia.pdfajuda.html saiu de paginas/ e foi para paginas/guias/, mas manteve a referência ../arquivos/Guia.pdf. Escreva o caminho corrigido e explique por que o anterior não chega mais ao destino.
Escreva pelo menos 20 caracteres (0/20).
Passo 7 de 7
Combine o que aprendeu para reconhecer endereços, escrever caminhos e conferir destinos a partir de diferentes origens.
Agora você vai combinar as regras para localizar páginas e arquivos, ainda sem escrever links em HTML.
Use https://example.org/guias/inicio.html como URL de referência. Diferencie os endereços completos dos trechos dessa URL.
Toque em um item e depois no par correspondente.
O documento de origem é site/guias/inicio.html.
site/
├── index.html
├── imagens/
│ └── Capa.png
└── guias/
├── inicio.html
├── contato.html
└── imagens/
└── Capa.pngPartindo de site/guias/inicio.html, escreva um caminho relativo para cada destino, um por linha:
Confira os nomes, as maiúsculas e as extensões antes de responder.
Cada pasta imagens contém seu próprio arquivo Capa.png.
site/
├── index.html
├── imagens/
│ └── Capa.png
└── guias/
├── inicio.html
├── contato.html
└── imagens/
└── Capa.pngA referência imagens/Capa.png é usada por dois documentos:
Quais arquivos são alcançados, nessa ordem?
Resumo
Antes de usar uma referência, confira:
Parabéns! Você concluiu: Caminhos relativos e URLs absolutas
Você praticou como reconhecer endereços e localizar recursos a partir de uma estrutura de pastas. No próximo tutorial, usará esses endereços em links entre páginas com textos claros.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
