Pular para o conteúdo
murad.guide

Referência Essencial da Web

Capítulo 1

Ambiente de trabalho

4 min de leitura 793 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 é um acervo comunitário fictício no bairro da Ribeira, Recife. Neste volume você constrói o site dela, volume a volume. Nada aqui é dado real de pessoa ou de instituição.

Abra a pasta 01-ambiente-de-trabalho. Leia o index.html, copie se quiser, mude uma coisa, preveja o que o navegador vai mostrar, recarregue e confira. Esse ciclo se repete em todos os capítulos.

O arquivo no disco não é a página. A página é o que o navegador monta. Teste local usa só 127.0.0.1. Publicação é outro passo, e estes exercícios não pedem conta paga.

O que você vai aprender

Quatro ferramentas, um trabalho

Você precisa de um editor de texto, de um lugar nas pastas, de um navegador e, de vez em quando, da linha de comando. O editor escreve o arquivo. O navegador lê o arquivo e desenha a página.

Não precisa de um programa “de site” caro. Um editor gratuito e o navegador que você já usa bastam para as primeiras capítulos.

O computador que pede a página é o cliente. O programa que entrega o arquivo é o servidor. No estudo, os dois moram na mesma máquina.

Esquema cliente e servidor: o navegador pede e o servidor local responde

Pastas do projeto

Cada capítulo tem uma pasta de exemplo. A da 01 contém só o necessário para conferir o ambiente: index.html e um README.

Não misture arquivos de capítulos diferentes no mesmo diretório. O retrato desta etapa é pequeno de propósito. O site da biblioteca cresce depois.

Pastas do volume: capítulos, exemplos e imagens no lugar certo

Crie um atalho mental: 01-ambiente-de-trabalho é o laboratório desta aula.

Editor e a extensão certa

Abra index.html no editor. Você deve ver tags, não um documento de processador de texto. Salve com o nome index.html.

No Windows, ative a exibição de extensões no Explorador. Sem isso, o sistema pode esconder o .txt extra.

Erro comum: o arquivo vira index.html.txt. O navegador então mostra o código como texto, não como página. Renomeie até a extensão final ser html.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pasta de estudo — Biblioteca da Ribeira</title>
  </head>
  <body>
    <h1>Esta pasta existe</h1>
    <p>Se você lê isto no navegador, o arquivo <code>index.html</code> está no lugar certo. Confira o nome: não pode ser <code>index.html.txt</code>.</p>
    <p>Próximo passo: capítulo 02, o primeiro site da Biblioteca da Ribeira.</p>
  </body>
</html>

Mude o título da aba para Ribeira — teste. Salve. Recarregue. A aba deve mudar; o parágrafo, não.

Linha de comando

A linha de comando é uma janela que recebe ordens por texto. Você vai usá-la para subir um servidor de estudo.

Na pasta curso deste material:

python -m http.server 8765 --bind 127.0.0.1

Abra http://127.0.0.1:8765/exemplos/01-ambiente-de-trabalho/. Encerre com Ctrl+C. Não use 0.0.0.0.

127.0.0.1 é este computador. Outra pessoa na internet não vê essa página.

Dê um duplo clique em index.html. A barra de endereço mostra um caminho de arquivo (file://). Isso é o disco, aberto direto.

Quando você usa o comando da seção 4, a barra mostra http://127.0.0.1:.... Ainda é local. Já é o protocolo da Web, sem publicação.

Publicar é copiar os arquivos para um servidor que o mundo alcança. Este volume não pede isso agora. Não envie dados reais.

Critério para avançar

Você avança se: o arquivo se chama index.html; o navegador mostra o título; o servidor em 127.0.0.1 abre a mesma página; você sabe que isso ainda não é um site público.

Se a página não abrir, volte ao nome do arquivo. Quase sempre é a extensão.

Atividades

  1. Qual é a diferença entre abrir index.html pelo Explorador e abrir o mesmo arquivo em http://127.0.0.1:8765/?
  2. O que acontece se o Windows gravar index.html.txt? Como você confere?
  3. Por que o servidor de estudo usa 127.0.0.1 e não um endereço público?

Respostas comentadas

  1. Pelo Explorador, o navegador lê o disco (file://). Em 127.0.0.1, um servidor local entrega o arquivo por HTTP. Os dois são estudo. Só o segundo imita o caminho da Web sem publicar.
  2. O navegador trata o conteúdo como texto. Ative extensões, veja se existe .txt no fim e renomeie para index.html.
  3. 127.0.0.1 é só esta máquina. Assim o teste não vaza para a internet e ninguém de fora alcança o exercício.

O arquivo completo

Referência do exemplo 01-ambiente-de-trabalho, 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>Pasta de estudo — Biblioteca da Ribeira</title>
<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>Esta pasta existe</h1>
<p>Se você lê isto no navegador, o arquivo <code>index.html</code> está no lugar certo. Confira o nome: não pode ser <code>index.html.txt</code>.</p>
<p>Próximo passo: capítulo 02, o primeiro site da Biblioteca da Ribeira.</p>
</main></body>
</html>