Atalhos e editor

Este capítulo coloca o teclado e o editor no centro do ofício. Você escreve HTML da Oficina Costeira, coletivo fictício de design em João Pessoa, no Visual Studio Code ou no Cursor. O exemplo correspondente é 04-atalhos-e-editor, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Salvar sempre com Ctrl+S antes de recarregar.
• Usar VS Code ou Cursor, não Bloco de Notas como ferramenta principal.
• Mostrar extensões de arquivo no Windows.
• Distinguir index.html de index.html.txt.
• Ligar atalhos de texto, pasta e navegador.
• Conferir que o arquivo no disco é o mesmo da página.

O teclado reduz a ida ao rato

O código se escreve no teclado. Cada vez que a mão vai ao rato, o foco quebra.

Você não precisa decorar tudo no primeiro dia. Precisa de um núcleo: salvar, copiar, colar, desfazer, buscar, recarregar a página.

No Windows deste volume:

• Ctrl+S — salva o arquivo ativo.
• Ctrl+C / Ctrl+V / Ctrl+X — copia, cola, recorta.
• Ctrl+Z / Ctrl+Y — desfaz e refaz.
• Ctrl+F — busca no arquivo.
• Alt+Tab — troca de programa (editor ↔ navegador).
• Ctrl+L — foca a barra de endereço.
• F5 ou Ctrl+R — recarrega a página.

Pratique o ciclo completo: edite uma linha, Ctrl+S, Alt+Tab, recarregue. Preveja o parágrafo novo da Oficina Costeira. Confira.

Erro comum: recarregar sem salvar. A janela mostra a versão antiga. O disco ainda não mudou.

Por que um editor de código

O Bloco de Notas grava texto. Falta numeração de linha, cor de sintaxe, guia de indentação e vários arquivos na lateral.

Visual Studio Code e Cursor são editores livres de custo para este estudo. Instale um. Abra a pasta do exemplo, não um arquivo solto. A árvore à esquerda mostra index.html e assets.

Ajustes úteis:

• Mostrar números de linha.
• Usar espaços (soft tabs) com largura 2.
• Codificação UTF-8, para acentos de João Pessoa.
• Mostrar caracteres invisíveis, para caçar espaço no fim do nome.
• Tema claro ou escuro, à sua escolha.

Não use processador de texto (Word) para HTML. Ele mete formatação extra e estraga as tags.

Extensões visíveis

No Explorador de Arquivos do Windows, mostre as extensões.

1. Abra o Explorador.
2. Aba Exibir.
3. Marque “Extensões de nome de arquivo”.

Sem isso, index.html.txt aparece como index.html. O navegador trata o conteúdo como texto, não como página.

A página da Oficina Costeira precisa terminar em .html. CSS em .css. Imagem em .svg, .png ou .jpg.

Copie o documento abaixo. Salve como index.html. Confira a extensão no Explorador, não só no editor.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design em João Pessoa.</p>
  </body>
</html>

Mude só o title. Salve com Ctrl+S. Recarregue. A aba deve mudar. Se a aba continuar “index.html” sem o nome do coletivo, você provavelmente salvou .txt ou abriu outro arquivo.

index.html é o arquivo padrão

Servidores procuram index.html na pasta. Por isso a home da Oficina Costeira usa esse nome, sempre em minúsculas.

Index.HTML no Windows pode parecer igual. No servidor Linux da publicação (quando houver) são arquivos diferentes. Padronize: index.html.

Nunca: inicio.html.txt, página 1.html, Index.Html.

Erro comum: o editor “Salvar como” escolhe “Documentos de texto” e acrescenta .txt. Em Salvar como, tipo de arquivo = Todos os arquivos, e o nome já traz .html.

Atalhos no navegador e nas pastas

No navegador, além de recarregar:

• Ctrl+T — nova aba.
• Ctrl+W — fecha aba.
• Ctrl+Shift+T — reabre aba fechada.
• Ctrl+1, Ctrl+2 — pula para a aba pelo número.
• Tab — anda pelos links e controles. Enter ativa.

Nas pastas: F2 renomeia. Confira a extensão depois de renomear. Espaço no fim do nome é invisível e quebra o caminho.

O editor e o navegador precisam apontar para o mesmo caminho no disco. Clique o título da aba no VS Code ou no Cursor e compare com a barra file:// ou 127.0.0.1.

Disco, janela, localhost

O editor grava o arquivo no disco. O navegador lê esse arquivo e monta a página. Se você servir a pasta em 127.0.0.1, a barra muda, o conteúdo deve ser o mesmo.

Publicação pública não entra neste capítulo. Não envie a pasta da Oficina Costeira para a Internet.

Abra exemplos/04-atalhos-e-editor/index.html no editor. Mude uma palavra do parágrafo. Não salve. Recarregue. A página antiga permanece. Agora Ctrl+S e recarregue de novo. A previsão da segunda recarga é o texto novo.

UTF-8 e acentos

João Pessoa precisa de UTF-8. O meta charset="utf-8" no head avisa o navegador.

Se o editor gravar outra codificação, a página mostra caracteres quebrados. No canto do VS Code ou do Cursor, confira “UTF-8”. Regrave se estiver “Windows 1252”.

Isso é arquivo no disco. A janela só obedece depois do recarregar.

No Cursor ou no VS Code, Ctrl+P abre o arquivo pelo nome. Digite index e Enter. Confira se a pasta à esquerda é 04-atalhos-e-editor, não o capítulo 01.

Ctrl+F busca “Oficina”. Troque uma ocorrência. Salve. Recarregue. Uma busca no editor não muda a página até o disco gravar.

Se o recarregar falhar no teclado, clique o ícone de recarregar uma vez. Depois volte ao Ctrl+R. O músculo precisa do atalho, não do rato eterno.

Crie um arquivo de propósito errado: teste.html.txt. Abra no navegador. Preveja texto cru, com as tags visíveis. Confira. Apague esse arquivo. O da Oficina Costeira permanece index.html.

Não instale dezenas de extensões no editor no primeiro dia. Numeração, UTF-8 e 2 espaços bastam. Extensão de navegador desconhecida também atrapalha: se a página local “ganhar propaganda”, limpe extensões (capítulo 02 no espírito: o problema raramente é vírus).

Atalhos macOS equivalentes, se o teclado for da Apple: Cmd no lugar de Ctrl para salvar, copiar e recarregar. Este material cita Windows porque o workspace do volume está em Windows.

No VS Code e no Cursor, Ctrl+B mostra ou esconde a árvore de pastas. Ctrl+\`` (Control e acento grave) abre o terminal na pasta do projeto. Sirva 127.0.0.1` dali, se já tiver Python. Ainda assim, Ctrl+S no HTML vem primeiro.

Evite “minificação” e plugins de live preview no primeiro mês. Recarregar na aba ensina o ciclo. Preview mágico esconde o save.

Se o arquivo abrir no Word ao dar dois cliques, a associação de .html está errada. Abra pelo editor: Arquivo → Abrir pasta → pasta do exemplo. Depois arraste o index.html para o navegador, ou use “Open with Live Preview” só se você entender que isso ainda é local.

Digite este arquivo de novo, sem colar, para gravar o atalho Ctrl+S:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atalhos — Oficina Costeira</title>
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Salve antes de recarregar. Extensão html, não txt.</p>
  </body>
</html>

Salve. Confira a extensão no Explorador. Abra. Mude uma palavra. Ctrl+S. Recarregue. Confira.

Atividades

1. O que acontece se você recarregar a página da Oficina Costeira sem Ctrl+S?
2. Como o Windows esconde o problema de index.html.txt?
3. Por que a home se chama index.html e não inicio.html?
4. No exemplo, mude só o title, salve e recarregue. O que a aba mostrou?

Respostas comentadas

1. A janela continua com a versão anterior. O disco ainda tem o texto velho. Salvar é o passo que liga o editor à página.
2. Sem “extensões de nome de arquivo”, o Explorador omite .txt. O ícone pode até parecer de página. O navegador, porém, lê texto puro.
3. Porque o servidor, inclusive o de 127.0.0.1, procura index.html quando a URL termina na pasta. É o arquivo padrão da home.
4. A aba deve trazer o novo título. Se não trouxe, o arquivo aberto no navegador não é o que você salvou, ou a extensão não é .html.

Referências

• Começando na Web: arquivos
• Configurar um ambiente básico
• Elemento meta
• UTF-8

O arquivo completo

Referência do exemplo 04-atalhos-e-editor, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}