Por 
Quando você abre um site, várias etapas acontecem em poucos instantes. Entender esse caminho ajuda a tirar a web da categoria de “mágica” e transforma erros em problemas mais fáceis de investigar.
Você não precisa decorar protocolos para começar. O objetivo aqui é construir um modelo mental simples do que acontece entre digitar um endereço e ver uma página pronta.
Começa pelo endereço
Ao digitar um endereço como dejotacode.com.br, o navegador precisa descobrir onde aquele site está disponível.
O nome que você digita é fácil para pessoas lembrarem. A rede, porém, precisa localizar um serviço usando informações técnicas de endereço.
É aí que entra o DNS.
O que o DNS faz
DNS é o sistema que ajuda a relacionar nomes de domínio com endereços usados na rede.
Uma analogia simples é pensar em uma agenda: você procura pelo nome de uma pessoa e encontra o número necessário para entrar em contato.
Na web, o navegador consulta informações de DNS para descobrir para onde deve enviar a próxima etapa da comunicação.
Isso não significa que DNS “baixa o site”. Ele apenas ajuda a localizar o destino.
O navegador faz uma requisição
Depois de localizar o serviço, o navegador envia uma requisição usando HTTP ou HTTPS.
Uma requisição pode ser entendida como um pedido:
“Servidor, envie este recurso para mim.”
O servidor recebe esse pedido, processa o que for necessário e responde.
Essa resposta pode incluir:
- um código de status;
- cabeçalhos;
- conteúdo, como HTML;
- ou uma indicação de erro.
O que significam códigos como 200 e 404
Os códigos HTTP resumem o resultado da requisição.
Alguns exemplos comuns:
200: a requisição foi atendida com sucesso;301ou302: existe um redirecionamento;404: o recurso solicitado não foi encontrado;500: ocorreu um erro no lado do servidor.
Você não precisa memorizar todos. Saber que eles representam estados da comunicação já ajuda muito na hora de investigar um problema.
A página não é um único arquivo
Uma página pode começar com HTML, mas normalmente depende de vários recursos.
Os mais comuns são:
- HTML para estruturar o conteúdo;
- CSS para controlar apresentação e layout;
- JavaScript para comportamento e interatividade;
- imagens;
- fontes;
- dados recebidos de APIs.
O navegador recebe esses recursos, interpreta cada um e monta a interface que aparece na tela.
HTML, CSS e JavaScript trabalham juntos
Imagine uma casa:
- HTML é a estrutura;
- CSS é a aparência;
- JavaScript é parte do comportamento.
Essa comparação não é perfeita, mas ajuda a lembrar que cada tecnologia resolve um tipo diferente de problema.
No próximo artigo da trilha vamos separar melhor essas responsabilidades.
Frontend e backend
O frontend é a parte que roda no navegador e forma a experiência visível para a pessoa.
O backend normalmente fica em um servidor. Ele pode:
- receber requisições;
- validar dados;
- aplicar regras;
- consultar um banco de dados;
- devolver respostas para o frontend.
Nem toda página precisa conversar com um backend o tempo todo. Um site pode ter páginas estáticas e usar uma API apenas para tarefas específicas, como formulários ou autenticação.
O que acontece quando você clica em um link
Ao clicar em um link, o navegador pode repetir parte desse processo:
- identifica o novo endereço;
- localiza o serviço, se necessário;
- faz uma nova requisição;
- recebe uma resposta;
- interpreta o conteúdo;
- atualiza o que aparece na tela.
Aplicações modernas também podem buscar apenas novos dados e atualizar parte da página sem recarregar tudo.
Um modelo mental para guardar
Quando você se perder, lembre desta sequência:
- você informa um endereço;
- o DNS ajuda a localizar o serviço;
- o navegador envia uma requisição HTTP ou HTTPS;
- o servidor responde;
- o navegador interpreta os recursos;
- a interface é exibida;
- novas ações podem gerar novas requisições.
Esse modelo já é suficiente para começar a entender hospedagem, APIs e ferramentas de desenvolvimento.
Pequeno exercício
Abra um site no navegador e pense nas perguntas abaixo:
- qual endereço você digitou?
- o navegador recebeu uma página ou foi redirecionado?
- a página usa apenas texto ou também imagens, estilos e scripts?
- ao clicar em outro link, uma nova navegação acontece?
Você não precisa abrir ferramentas técnicas ainda. O exercício é apenas começar a enxergar etapas onde antes parecia existir uma única ação.
Próximo passo
Agora que o caminho básico da web faz sentido, veja HTML, CSS e JavaScript: entenda a diferença.
Se quiser acompanhar toda a sequência organizada, use a trilha Primeiros passos na programação.
