Como a Web funciona

Uma página web na sua tela é resultado de trabalho em dois lugares. Seu navegador solicita recursos, e um servidor envia respostas. Essas funções explicam tanto um site pessoal simples quanto uma página montada a partir de vários serviços.

Quem solicita e quem responde

Um cliente é um dispositivo e um programa que solicitam algo. Chrome, Edge, Firefox e Safari são clientes do tipo navegador. Um servidor é um computador que executa software capaz de aceitar requisições e enviar arquivos armazenados ou conteúdo que ele produz. Apache e nginx são exemplos de software de servidor web. A palavra “servidor” pode designar o computador ou esse software.

Em uma troca HTTP, o cliente envia uma requisição indicando o que deseja. O servidor envia uma resposta a essa requisição. Imagine pedir comida em um balcão: a comanda solicita algo, e a bandeja é a resposta. O navegador inicia a troca; uma resposta comum de página atende a uma requisição.

Cliente e servidor são funções, não tipos fixos de máquina. Um notebook pode executar tanto seu navegador quanto um servidor de teste. Um site está hospedado quando um servidor acessível disponibiliza seus recursos. Um servidor acessado por localhost é executado no seu próprio computador; esse endereço não leva o navegador de outra pessoa ao seu notebook.

Uma página é uma coleção de recursos

Um recurso é algo que um endereço pode identificar: uma página, folha de estilo, script, imagem, fonte, vídeo ou dado. A primeira requisição da página geralmente obtém o HTML. O navegador lê esse HTML para descobrir os outros recursos necessários e solicita cada um separadamente.

Por exemplo, um artigo indica duas folhas de estilo, um script e cinco imagens. Conte também o HTML:

• Um recurso HTML inicia a página.
• Dois recursos CSS fornecem seus estilos.
• Um recurso JavaScript fornece comportamento.
• Cinco recursos de imagem fornecem figuras.

Isso totaliza nove recursos e, com o cache do navegador vazio, nove requisições HTTP para esses recursos. Um cache armazena cópias baixadas para reutilização. Arquivos ainda válidos no cache podem reduzir as requisições que trafegam pela rede em outra visita.

Os recursos não precisam estar no mesmo servidor. O HTML pode vir de www.example.com, as imagens de images.example.net e um vídeo de outro serviço. O endereço de cada recurso informa ao navegador onde solicitá-lo. Portanto, uma requisição HTML bem-sucedida não garante que todas as imagens ou scripts também foram carregados.

Arquivos armazenados e respostas geradas

Em ambos os casos, o navegador recebe recursos que pode ler ou exibir. Uma página HTML gerada continua sendo HTML quando chega ao navegador. O navegador guarda cópias baixadas, enquanto o servidor mantém os arquivos originais do site ou o programa que os produz.

A Web funciona sobre a Internet

A Internet é a rede mundial que transporta dados entre computadores. A Web é um serviço que usa essa rede: recursos conectados, endereçados por URLs e trocados por HTTP. E-mail, jogos online e videochamadas também usam a Internet. A Web é um uso da rede, não o nome de todas as atividades nela.

Pressionar Enter após digitar um endereço web inicia várias tarefas. Cada uma tem uma função diferente, portanto uma falha em uma etapa deixa indícios diferentes de uma falha em outra.

Leia o endereço e encontre o servidor

Considere https://www.example.com/news.html. O navegador lê https como o esquema, www.example.com como o hospedeiro e /news.html como o caminho solicitado. Um texto como “previsão do tempo para amanhã” normalmente é tratado como uma pesquisa e enviado ao mecanismo de busca padrão.

O navegador precisa de um endereço IP, um endereço numérico de rede como 203.0.113.10 ou o exemplo IPv6 2001:db8::1. O DNS, o Sistema de nomes de domínio, encontra endereços associados a nomes de domínio. O navegador e o sistema operacional podem reutilizar uma resposta DNS recente do cache, portanto nem toda visita a uma página exige uma nova consulta.

Conecte-se e proteja a troca

O navegador se conecta ao servidor. Para HTTPS, ele estabelece uma conexão criptografada usando TLS. O servidor apresenta um certificado digital que permite ao navegador verificar sua identidade para o domínio solicitado. A criptografia protege as mensagens contra leitura ou alteração por outras pessoas na rede. Um indicador de conexão segura descreve essa proteção; um site fraudulento também pode ter um certificado válido.

Os dados trafegam pela rede em pequenas partes chamadas pacotes, passando por dispositivos chamados roteadores, e são reunidos no destino. O navegador e o sistema operacional cuidam desse transporte enquanto o navegador trabalha com as mensagens HTTP.

Solicite, receba e construa

1. O navegador envia uma requisição HTTP para /news.html.
2. O servidor responde com um código de status, cabeçalhos que descrevem a resposta e geralmente um corpo contendo o HTML.
3. O navegador lê o HTML e solicita as folhas de estilo, os scripts, as imagens e os outros recursos nele indicados.
4. Ele constrói a página, aplica estilos, executa scripts e desenha o conteúdo na tela.

Várias requisições de recursos podem ocorrer ao mesmo tempo. O navegador pode mostrar texto antes de todas as imagens terminarem de baixar; a página é montada progressivamente.

Para uma pequena página em https://example.org/, suponha que o HTML indique apenas style.css e logo.png, ambos no mesmo hospedeiro. Sem entradas relevantes em cache, um hospedeiro precisa de uma consulta DNS e os três recursos precisam de três requisições HTTP. Em uma visita posterior, uma resposta DNS em cache evita essa consulta. Cópias de recursos ainda válidas podem ser reutilizadas, e cópias mais antigas podem ser verificadas com o servidor. Uma resposta 304 Not Modified significa que uma cópia armazenada ainda está atualizada e que o corpo do arquivo não precisa ser enviado novamente.

Identifique uma falha pelos indícios

Uma falha de DNS não tem código de status HTTP porque nenhuma resposta HTTP chegou. Um 404 é diferente: o servidor respondeu. O Chrome pode mostrar um erro de nome como DNS_PROBE_FINISHED_NXDOMAIN, mas a mensagem é do navegador, não uma resposta do servidor.

Uma URL, ou localizador uniforme de recursos, endereça um recurso. O nome de domínio é apenas uma parte desse endereço. O padrão completo é scheme://host:port/path?query#fragment, embora muitos endereços omitam partes opcionais.

Divida um endereço em partes

Leia este endereço por partes:

https://shop.example.com:8443/products/shoes.html?color=blue&size=42#reviews

A pontuação separa as partes: : vem depois do esquema, ? inicia a consulta e # inicia o fragmento. Os separadores não fazem parte dos valores da consulta ou do fragmento.

Esquema, hospedeiro e porta

O esquema seleciona como o endereço é tratado. http usa HTTP sem criptografia; https usa HTTP criptografado. mailto:info@example.com pede a um programa de e-mail que redija uma mensagem, enquanto file:/// endereça um arquivo local.

A porta seleciona um serviço no hospedeiro. Se for omitida, HTTP usa a porta 80 e HTTPS usa a 443. Assim, https://example.com/ e https://example.com:443/ identificam o mesmo destino e caminho. Servidores locais de teste frequentemente usam as portas 3000, 5500 ou 8080; http://localhost:5500/ inclui sua porta porque ela não é o padrão do HTTP.

O esquema e o hospedeiro não diferenciam maiúsculas de minúsculas. O hospedeiro www.example.com é um nome diferente de example.com; ambos só levam a um site quando seu proprietário os configurou dessa forma.

Caminho, consulta e fragmento

Em um site estático simples, um caminho segue as pastas e os arquivos do servidor. Em outros sites, o software do servidor decide o que um caminho retorna, portanto ele não precisa nomear um arquivo no disco. Um endereço de pasta terminado em / frequentemente disponibiliza uma página padrão, como index.html.

Uma string de consulta transporta dados após ?. Em /search?q=web+basics&page=2, & separa dois campos: as palavras de pesquisa e o número da página. Esses campos chegam ao servidor como parte do alvo da requisição.

Um fragmento permanece no navegador. O sufixo #reviews geralmente rola a página até um elemento com id="reviews". O navegador solicita o caminho e a consulta sem o fragmento. Alterar apenas #top para #reviews não solicita ao servidor um arquivo diferente.

Preserve os caracteres exatos

Caminhos web usam barras /. Um espaço pode ser codificado com porcentagem como %20. A codificação de formulário usa + para um espaço e %40 para @; um caminho ou consulta comum de URL pode conter um @ literal, portanto a codificação de formulário e a escrita geral de URLs não seguem regras idênticas.

Caminhos podem diferenciar maiúsculas de minúsculas, embora hospedeiros não diferenciem. /Images/Logo.png pode ser diferente de /images/logo.png. Copiar o hospedeiro corretamente, mas alterar as maiúsculas do caminho, ainda pode solicitar o recurso errado.

Um nome de domínio oferece às pessoas um nome legível para usar no lugar de um endereço IP numérico. Suas partes separadas por pontos também mostram como o nome é organizado. Ler essas partes corretamente é importante quando dois endereços contêm palavras semelhantes.

Comece pela extremidade direita

Cada parte entre pontos é um rótulo de domínio. Em blog.example.org, o rótulo mais à direita, org, é o domínio de nível superior, ou TLD. O domínio registrado é example.org, e blog é um subdomínio controlado por meio desse domínio.

Os TLDs genéricos incluem .com, .org, .net, .dev e .shop. Os TLDs de código de país têm duas letras, como .nl, .de, .jp, .br e .ca. Alguns têm regras de elegibilidade: .gov é restrito a organizações governamentais verificadas dos Estados Unidos. Novos registros institucionais .edu geralmente exigem instituições de ensino pós-secundário dos Estados Unidos que sejam elegíveis e tenham credenciamento institucional; algumas organizações se qualificam por outras políticas, e registros antigos podem ter exceções. A ICANN coordena os nomes de nível superior do sistema de nomes de domínio.

Um nome registrado nem sempre consiste apenas nos dois últimos rótulos. Sob .co.uk, por exemplo, o nome registrado em news.example.co.uk é example.co.uk. Leia primeiro a terminação pública e depois identifique o nome registrado abaixo dela.

Palavras familiares podem estar dentro do nome de outra pessoa

Compare estes hospedeiros:

No segundo hospedeiro, as palavras example.com são rótulos à esquerda de example.net. Elas não dão ao proprietário de example.com controle sobre o endereço. Identifique o hospedeiro antes de lê-lo a partir da direita; um nome familiar em um caminho também não é o hospedeiro.

www é um rótulo de subdomínio comum. O proprietário de um site pode usá-lo, omiti-lo ou redirecionar entre nomes. Sua presença não é exigida pela Web.

Registro e hospedagem são coisas distintas

Um registrador de domínios cuida dos registros de domínio para clientes. Um operador de registro de domínios mantém os registros de um TLD. Registrar um domínio dá a você o direito de usar esse nome por um prazo, geralmente de um ou mais anos. Você o renova para manter esse direito; um nome expirado pode acabar ficando disponível para outra pessoa.

O proprietário então configura registros DNS para associar o nome ao endereço de um servidor de hospedagem. O domínio não é o conjunto de arquivos do site. O mesmo nome pode ser apontado para outro servidor, e um servidor pode disponibilizar vários domínios. Respostas DNS em cache explicam por que uma alteração de endereço pode levar minutos ou horas para ser vista em todos os lugares.

Regras de nomes e nomes locais

Rótulos de hospedeiro comuns usam letras, algarismos e hífens, sem hífen em nenhuma das extremidades. Cada rótulo pode ter até 63 caracteres, e um nome completo comum pode ter até 253 caracteres. Os nomes não diferenciam maiúsculas de minúsculas. Nomes de domínio internacionalizados permitem outros sistemas de escrita; seus rótulos codificados em ASCII começam com xn--.

O nome especial localhost significa o computador que faz a requisição. Seus endereços de loopback incluem 127.0.0.1 e ::1. Se um estudante abre http://localhost:3000/, o navegador procura um serviço no próprio computador desse estudante.

Um link pode conter um endereço completo ou instruções para encontrar um recurso a partir da página atual. Para prever aonde ele leva, comece pelo endereço da página e siga o caminho uma parte de cada vez.

Escolha o ponto de partida

Uma URL absoluta identifica seu próprio hospedeiro e funciona a partir de qualquer página. Ela é útil para outro site. Uma URL relativa omite o início e é completada a partir do endereço da página. Para arquivos dentro de um site, isso ajuda a mover a pasta inteira de um notebook para um servidor.

Percorra uma árvore de pastas

Suponha que um site contenha estes arquivos:

my-site/
  index.html
  about.html
  images/logo.png
  styles/main.css
  blog/first-post.html

A partir de index.html, about.html permanece na mesma pasta. images/logo.png entra na subpasta images, e styles/main.css entra em styles.

A partir de blog/first-post.html, a pasta inicial é blog. Para chegar ao logotipo, use ../images/logo.png: primeiro suba até a pasta do site e depois entre em images. O link images/logo.png procuraria dentro de blog/images, onde essa árvore não tem logotipo. Para chegar à página inicial a partir desse artigo, use ../index.html.

Acompanhe endereços aninhados

Em https://example.com/blog/2026/post.html:

• photo.jpg se torna https://example.com/blog/2026/photo.jpg.
• ../index.html se torna https://example.com/blog/index.html.
• /about.html se torna https://example.com/about.html.
• #comments permanece nesse documento e identifica seu elemento comments.

Um / inicial substitui o caminho atual a partir da raiz do site. Ele não significa “uma pasta acima”. Repetir ../ sobe vários níveis de pastas: ../../about.html a partir do artigo aninhado sobe por 2026 e blog antes de encontrar about.html.

Visualize links no ambiente adequado

Um caminho relativo à raiz funciona com um servidor HTTP, inclusive um servidor local. Em uma página file:///, / aponta para a raiz do sistema de arquivos do computador, não para a pasta do projeto. Use um servidor local ao testar esse tipo de link.

Um caminho como C:\Users\sam\site\logo.png ou file:///Users/sam/site/logo.png identifica um local em um computador. Outros visitantes não têm essa pasta. Crie o link com um caminho web que permaneça dentro da estrutura do site.

Use nomes exatamente iguais

Use nomes em letras minúsculas, hífens em vez de espaços e extensões corretas: contact-form.html facilita a criação de links confiáveis em comparação com Contact Form.HTML. Windows e macOS geralmente não diferenciam maiúsculas de minúsculas em nomes de arquivos, enquanto muitos servidores web diferenciam. Um link local para Logo.png pode falhar online quando o nome real é logo.png.

Uma página inicial chamada index.html é um padrão comum em servidores. Solicitar uma pasta como /blog/ geralmente disponibiliza seu index.html quando o servidor está configurado com esse padrão.

HTTP, o protocolo de transferência de hipertexto, define como clientes web solicitam recursos e como servidores respondem. HTTPS transporta essas mensagens por uma conexão criptografada. Ler uma requisição mostra o que o navegador pediu ao servidor para fazer.

Leia a mensagem em ordem

Esta é uma requisição apresentada na forma textual do HTTP/1.1:

GET /products/shoes.html?color=blue HTTP/1.1
Host: shop.example.com
Accept: text/html
Accept-Language: en-US,en;q=0.9

A primeira linha contém o método, o alvo da requisição e a versão do HTTP. GET solicita a obtenção de um recurso. O alvo inclui o caminho e a consulta; ele exclui qualquer fragmento. O hospedeiro aparece no cabeçalho Host, que permite a um servidor distinguir os sites que disponibiliza.

Um cabeçalho é um campo nomeado, como Accept: text/html, que transporta informações sobre a requisição ou seu conteúdo. Uma linha vazia encerra os cabeçalhos. Algumas requisições então transportam um corpo, os dados enviados. Este exemplo de GET não tem corpo.

HTTP/2 e HTTP/3 codificam mensagens de maneira diferente, mas mantêm métodos, alvos, cabeçalhos e corpos. As DevTools os apresentam de forma legível, portanto essas partes da mensagem continuam úteis nas diferentes versões.

Escolha um método para a ação

Seguir um link normal ou digitar um endereço HTTP faz uma requisição GET. Um formulário HTML usa GET por padrão e POST quando especifica method="post".

Em um formulário GET, os campos vão para a consulta da URL. Isso é adequado para uma pesquisa cujos resultados você deseja salvar nos favoritos ou compartilhar. POST coloca os campos enviados no corpo da requisição e é adequado para ações como criar uma conta ou publicar um comentário.

POST, por si só, não criptografa nada. Em HTTP sem criptografia, tanto os dados da consulta quanto os do corpo podem ser lidos em trânsito. HTTPS protege ambos. Senhas devem ficar em corpos de requisições POST por HTTPS porque URLs também aparecem no histórico do navegador e podem ser armazenadas em registros.

Leia o envio de um formulário

POST /signup HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 38

name=Ana+Silva&email=ana%40example.com

O alvo é /signup. Content-Type identifica a codificação de formulário do corpo. O corpo contém o nome “Ana Silva” e o e-mail “ana@example.com”: + é decodificado como um espaço e %40 como @. Há 38 bytes aqui, correspondendo a Content-Length.

Leitura, repetição e identificação de requisições

Um método seguro destina-se à leitura sem alterar o estado do servidor; GET, HEAD e OPTIONS são seguros. Um método idempotente tem o mesmo efeito pretendido se for repetido. Métodos seguros, PUT e DELETE são idempotentes. POST não tem essa garantia: repetir um envio pode criar um segundo comentário ou pedido.

Outros cabeçalhos de requisição incluem User-Agent para informações sobre o cliente, Accept para formatos aceitos e Accept-Language para preferências de idioma. Cookie devolve valores de cookies armazenados. Referer, com sua grafia histórica, pode identificar a página de origem; os navegadores podem omiti-lo ou reduzir suas informações conforme a política adotada.

A resposta é o retorno do servidor a uma requisição. Seu código informa o resultado, seus cabeçalhos descrevem a resposta e seu corpo transporta o conteúdo retornado quando um corpo é permitido.

Separe as partes

Uma resposta na forma textual do HTTP/1.1 pode começar assim:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1534
Cache-Control: max-age=600

<!DOCTYPE html>
<html lang="en">
...

A linha de status informa a versão, o código 200 e a frase de motivo OK, legível por pessoas. Os programas usam o número. HTTP/2 e HTTP/3 não transportam essa frase de motivo. Depois dos cabeçalhos e de uma linha vazia, o corpo começa com o HTML.

Content-Length informa uma contagem de bytes, não uma contagem de caracteres ou o tamanho visível de uma página. Para uma resposta de imagem com Content-Length: 24576, o corpo tem 24.576 bytes: 24,576 kB, ou cerca de 24,6 kB usando 1 kB = 1.000 bytes.

Identifique o corpo pelo tipo de mídia

O tipo de mídia, também chamado de tipo MIME, é enviado em Content-Type.

O cabeçalho informa ao navegador como tratar o corpo; a extensão do arquivo, por si só, não basta. Se a URL de uma folha de estilo retornar uma página de erro HTML com Content-Type: text/html, o navegador a rejeitará como CSS. Isso frequentemente explica uma página com texto, mas sem a formatação pretendida.

Os corpos podem conter texto ou bytes binários. Uma resposta a HEAD não tem corpo, mesmo quando seus cabeçalhos descrevem o recurso que um GET retornaria. 204 No Content e 304 Not Modified também não têm corpo.

Mantenha a identidade entre requisições separadas

HTTP é sem estado: uma troca não se lembra automaticamente de uma anterior. Um cookie fornece informações que conectam requisições a uma sessão em andamento.

1. O servidor responde com Set-Cookie: session=abc123.
2. O navegador armazena o cookie.
3. Em requisições posteriores correspondentes, ele envia Cookie: session=abc123.
4. O servidor pode usar esse valor para localizar a sessão, como a autenticação ou o carrinho do estudante.

O escopo do cookie e as regras do navegador controlam quais requisições o recebem.

Reutilize conteúdo sem baixá-lo novamente

Cache-Control: max-age=600 permite que o navegador trate uma resposta armazenada como válida por 600 segundos, ou 10 minutos. Durante esse período, ele pode reutilizar a cópia sem contatar o servidor. Depois que ela deixa de ser válida, o navegador pode perguntar se mudou. Um 304 indica que o corpo em cache deve ser reutilizado; um 200 pode fornecer um substituto.

Se alterações salvas no CSS não aparecerem, verifique se o navegador reutilizou uma cópia. Um recarregamento forçado, geralmente Ctrl+Shift+R no Windows/Linux ou Cmd+Shift+R no macOS, ou a opção Desativar cache das DevTools ajuda a obter recursos atualizados. Essa caixa de seleção se aplica enquanto as DevTools estão abertas.

Outros cabeçalhos de resposta úteis incluem Location para o destino de um redirecionamento, Date para a data da resposta e Server para informações sobre o software do servidor, quando fornecidas.

Um código de status é o resultado de três algarismos em uma resposta HTTP. O número descreve uma requisição, portanto uma página pode ter um HTML recebido com sucesso, uma imagem ausente e um script redirecionado ao mesmo tempo.

Comece pelo primeiro algarismo

200 OK é a resposta usual de sucesso para GET. 201 Created informa a criação de um novo recurso, frequentemente após um POST. 204 No Content informa sucesso sem corpo de resposta.

Siga um redirecionamento sem confundi-lo com uma falha

301 Moved Permanently e 308 Permanent Redirect fornecem um novo endereço permanente. 302 Found e 307 Temporary Redirect fornecem um endereço temporário. O cabeçalho Location da resposta identifica o próximo endereço.

Por exemplo, uma requisição a http://example.com/ pode retornar 301 com Location: https://example.com/. O navegador então envia uma nova requisição ao endereço HTTPS, que retorna 200. São duas trocas, não uma única resposta com dois códigos.

307 e 308 preservam o método quando o navegador repete a requisição. Após 301 ou 302, um navegador pode mudar POST para GET. 304 Not Modified é outro tipo de resultado 3xx: ele valida uma cópia em cache e não envia um corpo substituto.

Associe o código à próxima verificação útil

Um 503 pode incluir Retry-After para indicar quando tentar novamente. A diferença entre 401 e 403 é especialmente útil: autenticação ausente ou inválida é diferente de uma recusa de permissão. Um código 4xx indica que o lado da requisição deve ser investigado, mas um site ainda pode ter um link quebrado ou um problema de configuração que o cause.

Diagnostique o recurso específico

Suponha que HTML e CSS retornem 200, enquanto images/Logo.PNG retorna 404. O arquivo real no servidor é images/logo.png. Corrigir as maiúsculas e minúsculas do link faz com que ele identifique o arquivo armazenado. Um servidor respondeu à requisição malsucedida; o site inteiro não estava inacessível.

Para uma resposta 5xx, a falha está no processamento do lado do servidor. Um estudante que acessa o site de outra pessoa pode tentar novamente mais tarde ou relatar o problema. Um desenvolvedor responsável por esse servidor investiga seu código ou o serviço de origem.

Leia a resposta, não apenas a tela

Uma mensagem de erro dentro do HTML não determina o status. Um site pode retornar 200 com uma mensagem de “não encontrado”, chamada de erro soft 404. Por outro lado, um 404 real pode incluir uma página HTML de erro bem elaborada. Use o painel Rede para ler o código real.

Quando o DNS ou a conexão falha, pode não existir nenhuma resposta HTTP. Nesse caso, um erro gerado pelo navegador não tem status de servidor para inspecionar. Um 404 isolado para /favicon.ico, o pequeno ícone de aba que os navegadores podem solicitar, muitas vezes não impede o funcionamento do conteúdo da página.

Uma página combina conteúdo, apresentação e comportamento. Reconhecer essas funções ajuda você a escolher qual arquivo inspecionar quando quiser alterar algo.

O HTML descreve o que é o conteúdo

HTML, linguagem de marcação de hipertexto, dá estrutura e significado ao conteúdo: títulos, parágrafos, listas, links, imagens, tabelas e formulários. É uma linguagem de marcação. Ela descreve elementos em vez de fazer cálculos ou executar laços de repetição.

Em <a href="about.html">About us</a>, a tag de abertura é <a href="about.html">. O atributo href informa o destino. “About us” é o conteúdo, e </a> fecha o elemento. Os atributos ficam dentro da tag de abertura.

Alguns elementos são vazios e não têm conteúdo nem tag de fechamento. Por exemplo, <img src="logo.png" alt="Company logo"> fornece um endereço de imagem e uma alternativa textual. <br>, <link> e <meta> são outros elementos vazios.

Escolha elementos pelo significado. Use um título porque o texto introduz uma seção; use CSS quando quiser texto maior ou mais espaçamento. Vários elementos <br> não substituem adequadamente as regras de espaçamento.

O CSS controla a aparência do conteúdo

CSS, folhas de estilo em cascata, define cores, fontes, espaçamento, layout e adaptação a diferentes larguras de tela. Leia esta regra:

h1 {
  color: navy;
  font-size: 2rem;
}

O seletor, h1, identifica os elementos a estilizar. Cada declaração associa uma propriedade a um valor. color: navy; define a propriedade color como navy. Os dois-pontos separam a propriedade do valor; o ponto e vírgula encerra a declaração.

O JavaScript responde a ações

JavaScript é uma linguagem de programação. Ele responde a cliques e à digitação, altera a página em execução, verifica dados de formulário e solicita mais dados sem recarregar a página inteira. É uma linguagem diferente de Java.

Para um botão de tema, um script pode encontrar o botão, ouvir cliques e alternar uma classe CSS:

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

O script altera a presença da classe dark no corpo; o CSS define a aparência dessa classe. Uma página informativa estática pode funcionar apenas com HTML e CSS.

Conecte os arquivos no HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" defer></script>
  </head>
  <body>
    <h1>Hello, web</h1>
    <p>This text is structured by HTML and styled by CSS.</p>
    <button>Switch theme</button>
  </body>
</html>

O <head> contém informações da página e links para arquivos. O <body> contém o conteúdo exibido. O navegador solicita styles/main.css e scripts/app.js separadamente do HTML. Os três são arquivos de texto simples que você pode abrir em um editor de código.

A separação de responsabilidades mantém o conteúdo no HTML, a aparência no CSS e o comportamento no JavaScript. Uma folha de estilo pode estilizar muitas páginas. Um título com significado e um link comum continuam funcionando se a estilização ou o script falhar, enquanto recursos que dependem de JavaScript precisam que seu script funcione.

O navegador não exibe HTML como uma imagem de um arquivo de texto. Ele transforma o arquivo em objetos, determina seus estilos e posições e desenha o resultado. O JavaScript pode então alterar esses objetos.

Construa uma árvore a partir do HTML

O DOM, ou modelo de objetos do documento, é a árvore de elementos e texto em execução no navegador. Considere:

<body><h1>News</h1><p>Hi <a href="/">home</a></p></body>

O body tem dois elementos filhos, h1 e p. O título contém “News”. O parágrafo contém o texto “Hi ” e um elemento a, que contém “home”. O link está dentro do parágrafo, não diretamente dentro do corpo.

Ao ler o HTML, o navegador descobre recursos em elementos como <link>, <script> e <img>. Ele solicita esses recursos e lê o CSS para calcular os estilos finais de cada elemento. O layout calcula tamanhos e posições. A pintura desenha os pixels. Essas tarefas podem ser repetidas quando o conteúdo ou os estilos mudam.

Permita que scripts sejam executados quando seus elementos existirem

Um script externo clássico sem defer ou async pausa a análise sintática do HTML enquanto é baixado e executado. Se ele estiver no cabeçalho e tentar encontrar um botão mais adiante no corpo, esse botão ainda não terá sido construído. document.querySelector("button") retorna null, portanto chamar addEventListener nesse resultado produz um erro.

Adicione defer para permitir que um script seja baixado enquanto a análise sintática do HTML continua e executado quando essa análise estiver concluída. Mover um script simples para logo antes de </body> também permite que os elementos anteriores existam primeiro. async não garante que um botão posterior exista; seu download pode terminar cedo.

O HTML de origem e o DOM em execução podem ser diferentes

Exibir código-fonte da página mostra o HTML recebido. O painel Elementos, chamado Inspetor no Firefox, mostra o DOM em execução. O JavaScript pode ter adicionado conteúdo, alterado texto ou removido elementos. O navegador também pode ter corrigido HTML malformado, por exemplo, fechando um elemento.

Se um título mudar após um clique, o painel Elementos mostrará o texto alterado. O código-fonte ainda mostrará o HTML recebido originalmente. Uma alteração no DOM pode desencadear a atualização de estilos, layout e pintura sem obter um novo documento HTML.

Erros diferentes têm efeitos diferentes

Os navegadores corrigem HTML usando regras definidas e ignoram declarações CSS que não entendem. Um erro de sintaxe em JavaScript, como uma expressão incompleta, impede que o arquivo ou bloco de script comece a ser executado. Um erro em tempo de execução não capturado encerra a execução atual, ignorando as linhas posteriores nessa execução. Outros scripts e manipuladores de eventos já registrados ainda podem funcionar. Isso explica uma página cujo conteúdo e estilo permanecem visíveis enquanto um recurso falha.

Os motores de renderização implementam padrões comuns: Blink no Chrome e Edge, Gecko no Firefox e WebKit no Safari. Pequenas diferenças de implementação tornam útil o teste em mais de um navegador. Os navegadores também constroem uma árvore de acessibilidade a partir da estrutura da página para que leitores de tela possam apresentar elementos e relações com significado.

Um projeto web começa como arquivos em uma pasta. Um editor de código ajuda você a escrever esses arquivos, e um navegador permite visualizar o que eles produzem. Manter o editor e o navegador apontados para a mesma cópia do projeto evita muitos resultados confusos.

Escolha um editor de código para texto simples

Um editor de código salva arquivos de texto simples e acrescenta realce de sintaxe, preenchimento automático, indicações de erro, uma árvore de arquivos e outros recursos para programar. Processadores de texto armazenam formatação do documento e podem substituir aspas retas por aspas curvas, portanto não são adequados para código-fonte.

O Visual Studio Code é uma opção gratuita para Windows, macOS e Linux. Outros editores incluem Sublime Text, Zed e WebStorm. Um ambiente online como o CodePen serve para experimentos curtos; as habilidades com arquivos e caminhos se aplicam a diferentes ferramentas.

Crie e abra um projeto

Para um primeiro projeto no VS Code:

1. Baixe e instale o editor pelo site oficial, https://code.visualstudio.com/.
2. Crie uma pasta como web-projects/my-first-site.
3. Escolha Arquivo → Abrir Pasta e abra my-first-site para que a árvore de arquivos mostre o projeto inteiro.
4. Crie index.html. No modo HTML, digite ! e escolha a sugestão do Emmet para uma estrutura básica de HTML.
5. Salve com Ctrl+S no Windows/Linux ou Cmd+S no macOS.

Use uma estrutura de pastas que corresponda às funções dos seus arquivos:

my-first-site/
  index.html
  styles/main.css
  scripts/app.js
  images/logo.png

Use nomes em letras minúsculas e hífens, sem espaços. Mantenha as extensões visíveis para que index.html não se torne index.html.txt sem que você perceba. Salve o texto em UTF-8 e inclua <meta charset="utf-8"> no cabeçalho do HTML para que textos como nomes acentuados sejam interpretados corretamente.

Escolha um método de pré-visualização

Um servidor web local disponibiliza uma pasta no seu próprio computador. Ele pode usar http://localhost:5500/ ou http://127.0.0.1:3000/; use o endereço fornecido pela ferramenta de pré-visualização. Caminhos relativos à raiz precisam de um servidor para começar na raiz do seu site. Recursos como módulos JavaScript ou busca de dados também precisam de pré-visualização por HTTP porque os navegadores restringem seu uso em páginas de arquivos locais.

No VS Code, a extensão Live Preview da Microsoft ou uma extensão Live Server pode iniciar um servidor e atualizar a pré-visualização após salvar. Verifique o fornecedor antes de instalar extensões, pois elas executam código no seu computador. Formatação ao salvar, quebra automática de linha e salvamento automático podem facilitar a edição; um formatador como o Prettier mantém a formatação consistente.

Siga o ciclo de edição e verificação

Edite, salve, recarregue ou deixe a pré-visualização recarregar, inspecione o resultado e corrija o arquivo. Se o navegador ainda mostrar conteúdo antigo, verifique o indicador de arquivo não salvo do editor e compare o caminho da pré-visualização com o projeto que você abriu. Você pode ter duas pastas com o mesmo nome de página. Verifique também o nome exato do arquivo e a extensão; um sufixo de arquivo de texto pode impedir que o navegador trate um arquivo como uma página HTML.

As ferramentas do desenvolvedor do navegador mostram a página que você está realmente executando. Use-as para testar um estilo, ler um erro ou comparar a página em execução com o arquivo no editor.

Abra as ferramentas e escolha um painel

Clique com o botão direito em uma parte de uma página no computador e escolha Inspecionar. Atalhos comuns são F12 ou Ctrl+Shift+I no Windows/Linux e Cmd+Option+I no macOS. No Safari, primeiro é necessário ativar os recursos para desenvolvedores em Ajustes → Avançado; o texto da opção varia conforme a versão do Safari.

Encontre o estilo que prevalece

Inspecione um título. Selecionar seu nó destaca sua caixa na página, incluindo conteúdo, preenchimento interno, borda e margem. O painel Estilos lista regras e seus locais de origem, como main.css:12. Uma declaração riscada não está produzindo efeito ali: outra regra pode substituí-la, ou a declaração pode ser inválida. Declarações inválidas também podem ter um indicador de aviso.

Abra Computado para ver os valores finais. Se duas regras especificarem cores de texto diferentes, a cor computada mostrará o resultado. Você pode alterar temporariamente um valor, desativar uma declaração ou editar texto e atributos para testar uma ideia.

Edições comuns em tempo real afetam o DOM ou os estilos da sua aba. Recarregar substitui essas alterações pelos arquivos carregados. Para manter uma melhoria, faça a mesma edição no arquivo-fonte, salve e recarregue. Alterar um preço exibido em Elementos muda a exibição local; isso não altera o preço armazenado no servidor.

Leia um erro do console como uma pista

Um erro inclui uma mensagem e geralmente um arquivo e uma linha. Por exemplo:

Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener') at app.js:3

Leia app.js:3 como o local no código-fonte a inspecionar. O código tentou usar um objeto ausente. Se um seletor procurou um botão, verifique se sua grafia corresponde a um elemento e se o elemento existia quando o script foi executado. A mensagem, por si só, não distingue essas causas.

O Console também mostra falhas no carregamento de recursos, como um GET que termina em 404, e mensagens impressas por console.log(). Um erro de script pode explicar um botão que não funciona mesmo quando o arquivo foi baixado com sucesso.

Experimente uma pequena expressão e uma tela estreita

O Console pode avaliar JavaScript. Digitar 2 + 3 retorna 5; document.title retorna o título atual. A atribuição document.body.style.background = "lightyellow" altera o fundo da página na aba. Não cole no Console código de alguém em quem você não confia; ele é executado com acesso à página e pode usar uma conta indevidamente.

Use o ícone de celular e tablet para o modo responsivo. Escolha uma largura estreita, como 375 pixels CSS, para ver como o layout se ajusta. Isso simula uma área de visualização, não todos os comportamentos de um celular real; uma verificação em um dispositivo real acrescenta informações que o redimensionamento não fornece.

O painel Rede mostra as trocas separadas por trás de uma página. Ele pode revelar por que uma imagem está ausente, por que a formatação falhou ou por que um recarregamento transferiu menos dados do que o esperado.

Registre antes de recarregar

Abra as DevTools, escolha Rede, verifique se o registro está ativo e recarregue a página. O painel não consegue reconstruir requisições concluídas antes de ser aberto. Se a lista estiver vazia, verifique o registro e os filtros e recarregue novamente.

As linhas mostram o nome ou a URL, o método, o status, o tipo, o tamanho e o tempo de cada requisição. O gráfico em cascata mostra quando as requisições começaram e como seus tempos se sobrepõem. Ele ajuda você a ver o carregamento de uma página como a obtenção de vários recursos, em vez de uma única ação indivisível.

Abra uma linha para ver todos os indícios

Selecione uma requisição. Cabeçalhos mostra a URL e o método solicitados, o status da resposta e os cabeçalhos da requisição e da resposta. Prévia exibe uma visualização útil do conteúdo de resposta compatível. Resposta mostra o conteúdo retornado de maneira mais direta, enquanto Tempo detalha o tempo gasto nas fases da requisição.

Para uma imagem ausente, compare o endereço completo solicitado com a localização real da imagem. Um nome de arquivo isolado pode ocultar uma pasta pai incorreta.

Diagnostique um exemplo de carregamento

Cinco requisições transferiram 31,8 kB no total. A requisição de Hero.jpg falhou. Seu pequeno corpo HTML é a página de erro do servidor, o que explica o tipo de mídia text/html em uma requisição de imagem. Se o arquivo real for images/hero.jpg, altere src="images/Hero.jpg" para src="images/hero.jpg" e recarregue para testar a correção.

Filtre por Img para focar nas imagens, por CSS para folhas de estilo ou por um nome para encontrar um recurso específico. Quando uma folha de estilo falhar, inspecione tanto seu status quanto seu Content-Type. Mesmo um 200 não transforma uma resposta HTML em CSS utilizável.

Mantenha redirecionamentos e respostas em cache visíveis

Ative Preservar registro, chamado Persist Logs no Firefox, antes de acompanhar uma navegação que você deseja investigar. Um redirecionamento de HTTP para HTTPS pode então mostrar uma linha 301 e seu cabeçalho Location, seguidos de uma nova requisição 200.

Uma linha marcada como “(memory cache)” ou “(disk cache)” significa que o navegador reutilizou conteúdo armazenado. Um 304 ainda envolveu uma resposta do servidor, mas apenas cabeçalhos foram recebidos, evitando uma nova transferência do corpo. As colunas Tamanho e Transferido, portanto, respondem a perguntas diferentes do tamanho do arquivo isoladamente.

Use Desativar cache enquanto as DevTools estiverem abertas para comparar com novas obtenções. A limitação de velocidade simula uma conexão mais lenta para que você observe qual conteúdo aparece primeiro. Os nomes das velocidades predefinidas variam conforme a versão do navegador.

Uma linha malsucedida sem status de resposta pode indicar uma falha de DNS ou de conexão; o Chrome pode mostrar net::ERR_NAME_NOT_RESOLVED. Fora do navegador, curl -I https://example.com envia HEAD e imprime o status e os cabeçalhos para uma verificação rápida da resposta.