Pular para o conteúdo
murad.guide

Referência Essencial da Web

Capítulo 3

Padroes da Web

4 min de leitura 727 palavras 2 gravuras

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira já tem uma página. Agora você vê como o navegador a monta: um pedido HTTP, três linguagens e uma ordem de leitura. O conteúdo continua fictício.

O exemplo deste capítulo é 03-padroes-da-web, no pacote que acompanha o volume. Leia o HTML e o CSS, mude uma coisa (a fonte ou o texto do botão), preveja, recarregue e confira.

O arquivo no disco é só o estoque. A página na janela é o resultado. 127.0.0.1 testa o pedido HTTP nesta máquina. Publicação seria o mesmo tipo de pedido, feito a um servidor público.

O que você vai aprender

A Web é conversa

O navegador pede um endereço. O servidor responde com um arquivo (ou um erro). Essa conversa se chama HTTP.

No estudo, o servidor é o Python na sua máquina, preso a 127.0.0.1. O pedido não sai para a rua.

Um endereço público faria o mesmo tipo de conversa com outro computador. Por isso testar em 127.0.0.1 não é publicar.

Três camadas

HTML marca o significado: título, parágrafo, botão. CSS escolhe a aparência: fonte, cor, espaço. JavaScript, nesta pasta, só reage a um clique e escreve um horário fictício.

As três camadas podem viver em arquivos separados. Isso facilita mudar uma sem bagunçar as outras.

HTML estrutura, CSS aparência e JavaScript comportamento em três camadas

Não precisa decorar JavaScript agora. Basta ver que o botão não envia nada para a internet.

Como o navegador monta a página

O navegador pede o HTML primeiro. Enquanto lê, encontra link para o CSS e script para o JavaScript. Aí pede esses arquivos também.

Ordem de carregamento: HTML, depois CSS e scripts citados no documento

Se o CSS atrasar, o texto ainda pode aparecer sem estilo. Se o caminho do CSS estiver errado, a página fica com a cara padrão do navegador.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Três camadas — Biblioteca da Ribeira</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Três camadas desta página</h1>
    <p>HTML marca o texto. CSS, neste arquivo <code>estilos.css</code>, escolhe a fonte. O botão abaixo usa JavaScript só nesta máquina.</p>
    <button type="button" id="hora">Mostrar horário de exemplo</button>
    <p id="saida"></p>
    <script>
      document.getElementById("hora").addEventListener("click", function () {
        document.getElementById("saida").textContent = "Terça a sábado, 9h às 17h. Conteúdo fictício.";
      });
    </script>
  </body>
</html>

O CSS desta pasta é uma regra só:

body { font-family: Arial, sans-serif; max-width: 40rem; margin: 1.5rem auto; }

Padrões e não “o jeito do meu navegador”

HTML, CSS e HTTP são padrões. Vários navegadores tentam seguir as mesmas regras. Por isso o mesmo arquivo deve parecer próximo no Firefox, no Chrome e no Edge.

Diferenças pequenas existem. Por isso você confere no navegador que vai usar para estudar, não só no editor.

Não use atalhos de playgrounds online nesta etapa. O hábito certo é arquivo no disco e recarregar.

Erro comum: CSS que não entra

Erro comum: o href do link aponta para css/estilos.css quando o arquivo está na mesma pasta, chamado estilos.css. O HTML abre; o estilo não.

Confira o nome e a pasta. Recarregue com o cache em mente: às vezes o navegador guarda o CSS antigo. Um recarregar forçado resolve.

Disco, local e publicação

file:// não treina o pedido HTTP completo. http://127.0.0.1:8765/exemplos/03-padroes-da-web/ treina, sem expor a pasta.

Publicar copiaria HTML, CSS e scripts para um servidor alcançável. O botão desta página continuaria sendo só um texto na tela. Nada de cadastro.

Atividades

  1. Qual arquivo o navegador pede primeiro nesta pasta: HTML, CSS ou o script?
  2. Se estilos.css for renomeado e o link não mudar, o que você vê?
  3. Clicar no botão desta página publica o horário da biblioteca?

Respostas comentadas

  1. O HTML. Só depois o navegador segue o link e o script citados no documento.
  2. O conteúdo HTML continua. A fonte e a largura do body voltam ao padrão do navegador, porque a folha não foi encontrada.
  3. Não. O script só escreve um parágrafo nesta janela. Não há envio a um servidor público.

O arquivo completo

Referência do exemplo 03-padroes-da-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 content="width=device-width, initial-scale=1" name="viewport"/>
<title>Três camadas — Biblioteca da Ribeira</title>
<link href="estilos.css" rel="stylesheet"/>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Três camadas desta página</h1>
<p>HTML marca o texto. CSS, neste arquivo <code>estilos.css</code>, escolhe a fonte. O botão abaixo usa JavaScript só nesta máquina.</p>
<button id="hora" type="button">Mostrar horário de exemplo</button>
<p id="saida"></p>

</main><script>
      document.getElementById("hora").addEventListener("click", function () {
        document.getElementById("saida").textContent = "Terça a sábado, 9h às 17h. Conteúdo fictício.";
      });
    </script></body>
</html>

estilos.css

body { font-family: Arial, sans-serif; max-width: 40rem; margin: 1.5rem auto; }