Web e o navegador

Este capítulo abre o volume MarkSheet. Antes de escrever a primeira tag, você precisa saber o que é a Internet, o que é a Web e o que o navegador faz com um arquivo HTML. O projeto de todos os capítulos é o site fictício Oficina da Lia, um ateliê de papelaria em Olinda.

O volume tem 14 volumes. Estude na ordem numérica. Cada volume tem um exemplo em pacote de exemplos. O ciclo é sempre o mesmo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

Há também um site local em website/, com as 50 lições em português. Use o site para folhear e o capítulo para praticar.

O que você vai aprender

• Distinguir Internet, Web, página e site.
• Ler um endereço (URL) em três partes.
• Criar um arquivo .html no editor e abri-lo no navegador.
• Mostrar a extensão do arquivo no Windows, para não salvar index.html.txt.

Internet não é a mesma coisa que Web

A Internet é a rede grande: cabos, antenas e computadores falando uns com os outros. A Web é só a parte dessa rede que troca páginas HTML usando o protocolo HTTP (hoje, na prática, HTTPS).

E-mail, mensagem instantânea e transferência de arquivo também usam a Internet. Só não são a Web.

Numa conexão típica há dois papéis:

• o servidor guarda o arquivo e o envia;
• o cliente pede o arquivo. O navegador é um cliente.

O seu computador, neste volume, quase sempre é cliente. Quando você abre um arquivo direto do disco, o navegador nem precisa da rede: ele lê o arquivo local.

Pare e experimente. Copie no editor o aviso “Este arquivo está no disco”. Mude só “disco” para “servidor local”; antes de recarregar, diga se o endereço da aba também mudará. Confira e restaure: alterar texto não muda a forma de abrir a página.

Endereço IP, domínio e URL

Cada aparelho na rede ganha um endereço IP, uma sequência de números. Humanos lembram mal números, então existe o domínio: um nome como oficina.exemplo que aponta para um IP.

Um URL junta três pedaços:

Neste volume você vai testar em http://127.0.0.1, que é o próprio computador. Isso não é publicação. Ninguém na internet vê essa pasta.

Pare e experimente. Copie o endereço local apresentado no volume. Mude só o caminho para /nao-existe.html. Preveja a falha, confira no navegador e devolva o caminho. Não tente o domínio fictício na Internet.

O navegador interpreta, o editor cria

Um arquivo HTML é texto. A extensão é .html. O navegador (Firefox, Chrome, Edge, Safari) lê as tags e desenha a página. O editor (VS Code, Cursor, Bloco de Notas, Notepad++) é o programa em que você escreve.

O navegador não mostra as tags. Ele as usa. Se você abrir o mesmo arquivo no editor, as tags aparecem.

Erro comum: o Windows esconde extensões e o arquivo vira index.html.txt. O navegador então mostra o código cru. Ative “Extensões de nome de arquivo” no Explorador e confira.

Navegadores atuais bastam. Internet Explorer entra só como nota histórica: não use como ferramenta deste volume.

Pare e experimente. Abra o mesmo index.html no editor e no navegador. Copie o parágrafo, mude só Olinda para Recife, preveja qual janela mostrará tags, salve e recarregue. Confira ambas e restaure Olinda.

Primeiro arquivo da Oficina da Lia

Abra o editor, cole o trecho e salve como index.html dentro de 01-web.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Oficina da Lia</title>
  </head>
  <body>
    <h1>Oficina da Lia</h1>
    <p>Papelaria e encadernação em Olinda. Este arquivo ainda mora só no seu disco.</p>
  </body>
</html>

lang="pt-BR" avisa o idioma. charset="utf-8" preserva acentos. O viewport impede o celular de tratar a página como um cartaz minúsculo.

Abra o arquivo no navegador. Depois mude a palavra Olinda para Recife, salve e recarregue. Se a tela não mudar, você editou outro arquivo ou o navegador está com cache de uma aba antiga.

Para testar em HTTP local, na pasta 01-web:

python -m http.server 8766 --bind 127.0.0.1

Abra http://127.0.0.1:8766/. Encerre com Ctrl+C. Não use 0.0.0.0.

Pare e experimente. Digite o arquivo completo mostrado. Mude só o title, preveja a aba e o h1, recarregue e confira os dois lugares. Restaure a referência.

Atividades

1. Escreva com suas palavras a diferença entre Internet e Web.
2. Separe o URL https://oficina.exemplo/sobre.html em protocolo, domínio e caminho.
3. Crie index.html, abra no navegador e no editor. O que muda entre as duas janelas?
4. Renomeie de propósito para index.html.txt, abra de novo e descreva o que aparece. Depois corrija.

Respostas comentadas

1. Internet é a rede. Web é o conjunto de páginas HTML trocadas por HTTP/HTTPS. Mensagem e e-mail usam a Internet sem serem Web.
2. Protocolo https://, domínio oficina.exemplo, caminho /sobre.html.
3. No editor você vê tags. No navegador você vê o título e o parágrafo; as tags sumiram porque foram interpretadas.
4. Com .txt, o navegador mostra o código. Com .html, ele desenha a página. Por isso a extensão precisa estar visível.

O arquivo completo

Referência do exemplo 01-web, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Oficina da Lia</title>
<style>img,input,select,textarea{max-width:100%;height:auto}fieldset{min-width:0}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}body{overflow-wrap:anywhere}</style></head>
<body><a href="#conteudo">Saltar para o conteudo</a><main id="conteudo" tabindex="-1">
  <h1>Oficina da Lia</h1>
  <p>Papelaria e encadernação em Olinda. Este arquivo ainda mora só no seu disco.</p>
</main><footer>Conteudo ficticio para estudo.</footer></body>
</html>