Como a Web Funciona

No Starter, todo o seu código rodava em um único lugar: o terminal. Você escrevia TypeScript, o Node.js executava, e o resultado aparecia como texto no console.log. Era um ambiente previsível — sem telas, sem cliques, sem cores, sem layout. Agora isso muda. A partir deste módulo, seu código vai rodar dentro de um navegador, e o resultado não é mais uma linha de texto no terminal: é uma página inteira, visual, com a qual uma pessoa real vai interagir.

Antes de escrever a primeira tag HTML, vale entender o quadro geral: o que exatamente é uma página web, quais linguagens a compõem e o que o navegador faz, de fato, entre o momento em que ele recebe um arquivo e o momento em que você vê algo na tela. Esse entendimento vai te acompanhar durante todo o curso — inclusive quando, mais adiante, você estiver depurando um layout quebrado ou um componente React que não renderiza como esperado.

As três linguagens da web, e por que elas são separadas

Toda página web "tradicional" é construída com três linguagens, cada uma com uma responsabilidade bem definida:

• HTML (HyperText Markup Language) define a estrutura e o conteúdo da página: quais textos existem, onde estão os títulos, onde estão as imagens, onde existe um formulário. É o esqueleto.
• CSS (Cascading Style Sheets) define a apresentação: cores, espaçamentos, tamanhos, posicionamento, fontes. É a aparência.
• JavaScript define o comportamento: o que acontece quando alguém clica em um botão, o que acontece depois que os dados chegam de um servidor, o que muda na tela sem a página inteira recarregar. É a interatividade.

Essa separação não é acidental — é um princípio de design chamado separação de responsabilidades (separation of concerns), e ele existe por um motivo muito prático: cada uma dessas camadas pode mudar sem quebrar as outras. Você pode trocar completamente a paleta de cores de um site (CSS) sem tocar em uma linha do texto (HTML) ou da lógica (JavaScript). Pode reescrever a lógica de um formulário (JavaScript) sem mexer no visual. Pode reorganizar o conteúdo (HTML) sem que o site perca o estilo.

Pense em construir uma casa: o HTML é a planta e a alvenaria — paredes, cômodos, portas, onde cada coisa fica. O CSS é a pintura, o piso, a decoração — o que faz a casa parecer acolhedora ou moderna. O JavaScript é a parte elétrica e hidráulica — o que faz interruptores acenderem luzes e torneiras liberarem água. As três são necessárias, mas ninguém pinta a parede antes de erguê-la, e ninguém espera que a fiação elétrica defina onde fica a porta da cozinha.

Neste módulo, você vai focar nas duas primeiras camadas: HTML (estrutura) e CSS (apresentação). A terceira, JavaScript rodando no navegador, é o assunto do próximo módulo do curso.

De um arquivo de texto a pixels na tela

Um arquivo HTML é, no fundo, só texto puro — o mesmo tipo de arquivo que um .ts ou um .txt. Não existe mágica dentro dele. A mágica está no programa que o lê: o navegador. Quando você abre uma página, o navegador passa por um processo em várias etapas para transformar aquele texto em algo visível e interativo. Entender essas etapas, mesmo que de forma resumida, ajuda muito a entender por que certas coisas acontecem do jeito que acontecem (por que um CSS não carregado deixa a página "feia", por que um script no topo da página pode atrasar o carregamento, etc.).

De forma simplificada, o navegador faz o seguinte:

1. Recebe o HTML (baixado da internet ou lido do disco) e começa a interpretá-lo (parse), de cima para baixo.
2. Enquanto interpreta o HTML, constrói uma estrutura de dados na memória chamada DOM (Document Object Model) — uma representação em árvore de cada elemento da página.
3. Ao encontrar um <link rel="stylesheet"> ou uma tag <style>, o navegador interpreta o CSS e constrói uma estrutura parecida, chamada CSSOM (CSS Object Model).
4. O navegador combina DOM e CSSOM para calcular exatamente onde cada elemento vai ficar e qual tamanho vai ter — essa etapa se chama layout (ou reflow).
5. Por fim, o navegador pinta (paint) cada elemento na tela, na ordem e posição calculadas, respeitando cores, bordas, sombras e tudo mais.
6. Se houver JavaScript, ele é executado e pode alterar o DOM em tempo real — o que faz o navegador refazer partes desse processo (recalcular layout, repintar a tela) automaticamente.

Nenhuma dessas etapas exige que você escreva código para "mandar o navegador fazer isso" — ele faz isso sozinho, sempre, para qualquer página. O seu trabalho como desenvolvedor(a) é escrever um HTML e um CSS corretos, e o navegador se encarrega do resto.

A árvore DOM: o navegador enxerga estrutura, não texto solto

Um detalhe importante: o navegador não vê o HTML como uma sequência de caracteres — ele o interpreta como uma hierarquia, uma árvore de elementos aninhados uns dentro dos outros. Cada tag vira um nó dessa árvore, e tags dentro de outras tags viram nós "filhos".

Veja este HTML simples:

<body>
  <header>
    <h1>Meu Painel Financeiro</h1>
  </header>
  <main>
    <p>Saldo atual: R$ 1.240,00</p>
  </main>
</body>

O navegador enxerga isso, conceitualmente, como a árvore abaixo:

body
├── header
│   └── h1 ("Meu Painel Financeiro")
└── main
    └── p ("Saldo atual: R$ 1.240,00")

Essa árvore é exatamente o que o CSS usa para decidir onde aplicar cada estilo (por exemplo, uma regra que diz "todo p dentro de main") e é exatamente o que o JavaScript manipula quando precisa adicionar, remover ou alterar algo na página em tempo real — assunto que você vai explorar a fundo no próximo módulo. Por ora, o importante é internalizar essa ideia: HTML bem escrito gera uma árvore bem organizada, e uma árvore bem organizada é mais fácil de estilizar, de tornar acessível e, futuramente, de manipular com código.

O que vem a seguir neste módulo

Este módulo tem quatro capítulos, construídos um sobre o outro:

1. HTML semântico e acessível — como estruturar o conteúdo de uma página com as tags corretas, incluindo textos, listas, links, imagens e formulários — e por que a escolha certa de tag importa tanto quanto o resultado visual.
2. Fundamentos de CSS — como vincular estilos ao HTML, como o navegador decide qual regra aplicar quando há conflito, e como cada elemento é medido na tela (o box model).
3. Layout com CSS — como posicionar múltiplos elementos juntos de forma organizada, usando Flexbox e Grid, e como fazer uma página se adaptar a diferentes tamanhos de tela.
4. Bibliotecas e frameworks CSS — um panorama de ferramentas como Bootstrap e Tailwind, que resolvem boa parte do trabalho repetitivo de estilização — incluindo a própria que constrói o site que você está usando agora.

Ao final deste módulo, você vai conseguir montar, sozinho(a), o esqueleto visual completo do projeto que vai atravessar todo este curso: o Dashboard de Finanças Pessoais, a evolução web do Rastreador de Gastos que você construiu em TypeScript no Starter. Ainda sem interatividade — isso vem no módulo seguinte — mas já com estrutura semântica, estilo e layout responsivo de verdade.

Vamos começar pela base de tudo: a estrutura de um documento HTML.