Caminhos de arquivo HTML

O objetivo deste artigo é apresentar a você os caminhos de arquivos HTML e os diferentes tipos de caminhos de arquivos que você pode usar em suas páginas da web.

Caminhos de arquivo HTML são as rotas de arquivos na estrutura de pastas de um site que exibe onde os arquivos estão localizados.

Exemplos de Caminhos de Arquivo Html

Caminho	Visão geral
<img src=”../picture.jpg”>	“picture.jpg” aparece um nível acima da pasta atual.
<img src=”../picture.jpg”>	“picture.jpg” aparece um nível acima da pasta atual.
<img src=”images/picture.jpg”>	Você pode encontrar “picture.jpg” na pasta de imagens do diretório atual.
<img src=”/images/picture.jpg”>	Existe um arquivo chamado “picture.jpg” na pasta de imagens na raiz do site.

Índice-

Caminhos de arquivo HTML:

Caminhos de arquivo HTML

Os caminhos indicam os locais dos arquivos na estrutura de pastas de um site .

Arquivos externos são vinculados usando caminhos de arquivo, como:

Imagens
Paginas web
Java-Scripts
folhas de estilo

Caminhos de Arquivo Absolutos

A URL completa para um arquivo é um caminho de arquivo absoluto:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lembrete: em Imagens HTML , abordamos o elemento <img> em detalhes.

Caminhos de Arquivo Relativos

Caminhos de arquivo relativos referem-se a arquivos próximos à página atual.

A seguir está um exemplo de um caminho de arquivo para um arquivo na pasta de imagens na raiz do site existente:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conforme mostrado no exemplo a seguir, o caminho do arquivo aponta para um arquivo na pasta de imagens na pasta atual:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Abaixo está um exemplo. Este caminho aponta para um arquivo descoberto um nível acima da pasta atual na pasta de imagens:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Caminhos de Ficheiros Html Externos

Os caminhos de arquivos HTML também podem ser um link externo onde o código foi escrito e só o aplicamos aos caminhos.

Um exemplo de caminho de arquivo externo de imagens:

Example:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<div>
<img src="https://gowebp.com/wp-content/uploads/2022/03/wordpress-delete-theme-1.png" alt="Mountain">
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um exemplo de caminho de arquivo externo CSS:

Example:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

</body>

</html>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um exemplo de caminho de arquivo externo JavaScript:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
 <p id="mrx-example"></p>
<script>
 window.onload = function() {
    if (window.jQuery) {
    document.getElementById("mrx-example").innerHTML="JavaScript has been loaded";
    } else {
    document.getElementById("mrx-example").innerHTML="JavaScript has not been loaded";
    }
   };
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Melhor prática

Em geral, é uma boa ideia usar caminhos de arquivo relativos (se possível) quando se trata de caminhos de arquivos HTML .

Ao empregar caminhos de arquivo relativos, suas páginas da Web não serão vinculadas ao seu URL base atual.

Você poderá usar todos os links em sua máquina local (localhost) e seu domínio público no futuro.

Benefícios do caminho do arquivo HTML

Os caminhos de arquivo HTML desempenham um papel crucial na criação de páginas da Web e na vinculação de diferentes tipos de recursos. O uso de caminhos de arquivo HTML no desenvolvimento web oferece várias vantagens, que podem ser categorizadas da seguinte forma:

Organização aprimorada: os caminhos de arquivo HTML permitem que os desenvolvedores da Web organizem arquivos e recursos do site em uma estrutura de diretório lógica. Isso ajuda a aprimorar a manutenção e as atualizações do site ao longo do tempo.

Melhor navegação no site: usando caminhos de arquivo HTML, os desenvolvedores da web podem criar links entre diferentes páginas da web em seu site. Isso permite que os usuários naveguem facilmente pelo site e encontrem rapidamente o conteúdo que procuram.

Carregamento de página mais rápido: os caminhos de arquivo relativos permitem que os desenvolvedores da Web carreguem recursos mais rapidamente sem que o navegador precise fazer uma nova solicitação ao servidor.

Melhor SEO: os caminhos de arquivo HTML podem ser usados para estruturar o conteúdo do site de uma maneira que seja facilmente compreensível pelos rastreadores do mecanismo de pesquisa, levando a uma melhor visibilidade do site e classificação do mecanismo de pesquisa.

Compatibilidade entre plataformas: os caminhos de arquivo HTML funcionam em todos os principais navegadores da Web e sistemas operacionais, fornecendo um método confiável e consistente para vincular recursos do site.

Se você achou este artigo informativo, por favor, deixe sua reação abaixo como uma fonte de agradecimento ou sugestão para trazer melhorias para o aprimoramento deste site.

Nós valorizamos o seu feedback.

Caminhos de arquivo HTML

Exemplos de Caminhos de Arquivo Html

Caminhos de arquivo HTML

Caminhos de Arquivo Absolutos

Example

Caminhos de Arquivo Relativos

Example

Example

Example

Caminhos de Ficheiros Html Externos

Example:

Example:

Example:

Melhor prática

Benefícios do caminho do arquivo HTML

Sentindo entediado?