Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 2

Navegadores e URLs

6 min de leitura 1.104 palavras 2 gravuras

Este capítulo mostra o que o navegador faz com o arquivo e como ler uma URL. Você usa as páginas da Oficina Costeira, coletivo fictício de design em João Pessoa. O exemplo correspondente é 02-navegadores-e-urls, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

O navegador é programa, não “a Internet”

O navegador pede um documento, interpreta HTML e CSS e desenha a janela. Firefox, Chrome, Edge e Safari fazem esse papel.

Você interage com a interface: barra de endereço, voltar, abas, rolagem. Por baixo existe o motor de renderização, que transforma o código em pixels e em árvore de acessibilidade.

Motores diferentes existem. Blink no Chrome e no Edge. Gecko no Firefox. WebKit no Safari. Por isso a mesma página pode ter detalhe visual distinto. O HTML semântico continua o mesmo.

Abra exemplos/02-navegadores-e-urls/index.html em dois navegadores. Preveja: o texto da Oficina Costeira deve ser o mesmo. Recarregue. Confira.

Erro comum: culpar “a Internet” quando a página local não atualiza. O arquivo está no disco. Recarregue a aba certa.

Como a página aparece, passo a passo

O navegador não “abre um desenho”. Ele segue uma fila.

  1. Resolve o endereço (domínio vira IP, se houver rede).
  2. Baixa o HTML. Sem HTML não há página.
  3. Lê as tags e descobre CSS, imagens e scripts.
  4. CSS e JavaScript no início podem bloquear o desenho.
  5. Junta HTML e regras CSS e pinta a janela.
  6. Imagens chegam depois e ocupam o lugar.

Se você arrasta o arquivo para o navegador, o protocolo é file://. Não há servidor. Caminhos que começam com / apontam para a raiz do disco, não para a pasta do site.

Teste em 127.0.0.1 usa HTTP local. Publicação pública usa um servidor na Internet. São quatro situações distintas: disco, janela, localhost, publicação.

A barra de endereço é o mapa

A URL diz onde você está. Ela também diz a estrutura do site.

https://oficinacosteira.example/projetos.html?tema=farol#cartaz

O www quase nunca é necessário. Se o site quebra sem www, o problema é de configuração, não de regra da Web.

No Windows, Ctrl+L foca a barra. Digite o domínio direto quando souber. Buscar o nome no Google e clicar o primeiro resultado é mais lento e mistura consulta com endereço.

Resumo dos conceitos: URL, Navegador, Barra

HTTPS e o cadeado

http envia o texto quase em claro. Quem está na mesma rede pode ler.

https cifra a conversa. O cadeado (ou o nome do protocolo) indica certificado e canal protegido.

HTTPS ajuda em três pontos: privacidade do tráfego, identidade do servidor e integridade do que chega. Recursos como câmera ou geolocalização exigem HTTPS em publicação.

Nunca envie senha por http. Neste volume os formulários da Oficina Costeira não enviam dados reais. O exercício de Contato simula o envio na própria página, sem enviar dados.

Estudo em 127.0.0.1 não precisa de certificado pago. Localhost não é publicação.

Erro comum: achar que o cadeado prova que o conteúdo é verdadeiro. Ele prova o canal, não a honestidade do texto.

Relativo e absoluto

Um caminho relativo parte do arquivo atual.

<a href="projetos.html">Projetos</a>
<a href="assets/imagens/marca.svg">Marca</a>

Um caminho absoluto na Web começa pelo protocolo e pelo domínio.

<a href="https://developer.mozilla.org/pt-BR/">MDN em português</a>

Um caminho que começa só com / é relativo à raiz do domínio. Em file:// isso falha. Por isso, nos exemplos deste volume, os links internos são relativos ao arquivo.

Copie o menu abaixo para um index.html de teste. Mude só o href de Projetos para equipe.html. Preveja a página de destino. Recarregue e clique.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
  </head>
  <body>
    <header>
      <p>Oficina Costeira</p>
      <nav>
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="projetos.html">Projetos</a></li>
          <li><a href="equipe.html">Equipe</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Início</h1>
      <p>Coletivo fictício de design em João Pessoa.</p>
    </main>
  </body>
</html>

Consulta, âncora e URL hackeável

A consulta começa com ?. Pares nome=valor se separam com &.

projetos.html?tema=farol
projetos.html?tema=lagoa

A âncora começa com # e aponta para um id na mesma página.

<h2 id="agenda-setembro">Setembro</h2>
<p><a href="#agenda-setembro">Ir à agenda de setembro</a></p>

Uma URL boa dá para editar à mão. Trocar semana-01 por semana-02 no caminho deveria levar a outro documento, se o site foi desenhado assim.

Resumo dos conceitos: Barra, Navegador, URL

Abra o exemplo. Acrescente ?estudo=1 na barra depois do nome do arquivo. Preveja: a página da Oficina Costeira não muda, porque ainda não lê a consulta. Recarregue. Confira. A URL mudou; o HTML no disco não.

Disco, janela, localhost, publicação

Olhe a barra.

O README do volume mostra como servir só em 127.0.0.1. Não use 0.0.0.0.

Erro comum: copiar um link file:// para outra pessoa. No computador dela esse caminho não existe.

Para treinar a barra: abra projetos.html do exemplo. Apague o nome do arquivo na URL e deixe só a pasta. Em 127.0.0.1 o servidor procura index.html daquela pasta. Em file:// a pasta pode listar arquivos ou recusar, conforme o navegador. Preveja a diferença. Recarregue. Confira.

Fragmento: acrescente id="marca" num h2 e o link #marca. O clique não troca de arquivo. A barra ganha o #. Disco igual. Janela rola.

Atividades

  1. Quais são as quatro partes principais de https://oficinacosteira.example/agenda.html?mes=9#oficina?
  2. Por que um link que começa com / pode funcionar em 127.0.0.1 e falhar em file://?
  3. O cadeado HTTPS garante que o texto da Oficina Costeira é verdadeiro?
  4. No exemplo, mude só um href relativo. O que você previu e o que a barra mostrou depois do clique?

Respostas comentadas

  1. Protocolo https, domínio oficinacosteira.example, caminho /agenda.html, consulta mes=9 e fragmento oficina.
  2. A barra / no início aponta para a raiz do servidor. Em arquivo local não há domínio: a raiz vira o disco.
  3. Não. HTTPS protege o transporte. O conteúdo continua sendo texto fictício de estudo.
  4. A barra deve mostrar o arquivo de destino no disco ou no localhost, conforme o jeito que você abriu. Se o href estiver errado, a previsão falha: anote o caminho e corrija.

Referências

O arquivo completo

Referência do exemplo 02-navegadores-e-urls, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}