Aula 63 - Links Entre Arquivos

Introdução

Em um site é comum possuir vários arquivos HTML. Para que o usuário consiga navegar entre eles, utilizamos links entre arquivos.

Esses links permitem criar menus, sistemas de navegação e conectar páginas relacionadas.

📌 A navegação entre páginas é feita utilizando caminhos relativos ou absolutos.

São links que conectam um arquivo HTML a outro arquivo dentro do mesmo projeto.

Exemplo de navegação:

site/
│
├─ index.html
├─ sobre.html
└─ contato.html

Como todos os arquivos estão na mesma pasta, a navegação é simples.

<a href="sobre.html">
  Sobre
</a>

O navegador abrirá o arquivo sobre.html localizado na mesma pasta.

<nav>
  <a href="index.html">Início</a>
  <a href="sobre.html">Sobre</a>
  <a href="contato.html">Contato</a>
</nav>

Essa estrutura é muito utilizada em menus de navegação.

site/
│
├─ index.html
│
└─ paginas/
   ├─ sobre.html
   └─ contato.html

Quando os arquivos estão em subpastas, o caminho deve indicar a pasta.

<a href="paginas/sobre.html">
  Sobre
</a>

O símbolo ../ significa voltar um nível na estrutura de diretórios.

<a href="../index.html">
  Início
</a>

Exemplo:

site/
│
├─ index.html
│
└─ paginas/
   └─ sobre.html

site/
│
├─ index.html
├─ produtos.html
│
├─ paginas/
│   ├─ contato.html
│   └─ sobre.html
│
├─ css/
│   └─ style.css
│
└─ imagens/
    └─ logo.png

Projetos profissionais costumam utilizar diversas pastas organizadas.

⚠️ Sempre revise os caminhos após reorganizar as pastas do projeto.

📌 Dominar caminhos relativos é fundamental para criar sites com várias páginas interligadas.