Editor de código

Crie sua primeira página

1. 01

   Abra index.html nas abas de arquivos.

2. 02

   Cole o HTML abaixo no editor.

3. 03

   O título Hello aparece em “Prévia”. A prévia é atualizada pouco depois que você para de digitar.

4. 04

   Abra style.css e adicione o CSS abaixo. O título ficará azul.

5. 05

   Abra script.js e adicione o JavaScript abaixo. O título mudará para It works.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <script src="script.js"></script>
</body>
</html>

h1 { color: blue; }

document.querySelector("h1").textContent = "It works";

O projeto inicial contém index.html, style.css e script.js. O HTML precisa referenciar os arquivos CSS e JavaScript, como neste exemplo. Criar esses arquivos não basta para que o navegador os use.

Confira a prévia e o console

A área “Prévia” mostra a página criada com seus arquivos. Ela usa index.html quando disponível ou o primeiro arquivo HTML do projeto. As referências locais a CSS e JavaScript são resolvidas a partir das pastas do projeto.

Abra “Console” para ler as mensagens e os erros da prévia. Você pode escrever console.log("Preview ready") no JavaScript para exibir uma mensagem. Digite 2 + 3 no campo do console e pressione Enter para avaliar a expressão na prévia.

A prévia executa JavaScript para o navegador. Ela não inicia servidores, instala pacotes nem executa Python, PHP, Java ou outras linguagens de servidor. Escolher um tipo de arquivo permite escrever seu conteúdo, mas não significa que o navegador possa executá-lo.

O código é executado em um quadro de prévia separado, sujeito às restrições do navegador. Mesmo assim, scripts externos, imagens e requisições de rede no seu código podem acessar outros sites. Execute apenas código cujos efeitos você entenda.

Adicione, renomeie e exclua arquivos

Clique em “Adicionar arquivo”, escolha o tipo de arquivo e digite um nome. A extensão escolhida é adicionada automaticamente. Se o nome já existir, um número será acrescentado para não sobrescrever o arquivo anterior.

Abra um arquivo pela aba ou pelo nome em “Pastas e arquivos”. As abas mostram os arquivos da pasta selecionada. O botão de mais ao lado de uma pasta permite criar um arquivo ou uma subpasta dentro dela.

Use o lápis ao lado do arquivo para renomeá-lo. Enter ou um clique fora do campo salva o nome, e Escape cancela a alteração. Mantenha a extensão, como .css.

O botão de fechar na aba exclui o arquivo após a confirmação. Ele não apenas oculta a aba aberta. Baixe uma cópia de segurança antes de excluir um trabalho que possa precisar depois.

Renomear ou mover arquivos não altera as referências no HTML. Se mover style.css para uma pasta assets, atualize a referência para assets/style.css. Uma referência incorreta pode deixar a prévia sem os estilos ou o script.

Organize os arquivos em pastas

Abra o navegador de pastas para explorar o projeto. Expanda uma pasta para ver o conteúdo e selecione-a para mostrar as abas dos arquivos. “Nova pasta” cria uma pasta dentro da pasta selecionada.

Arraste um arquivo ou uma pasta sobre outra pasta para movê-lo. Em telas sensíveis ao toque, mantenha o item pressionado antes de arrastar. Uma pasta não pode ser movida para dentro de si mesma ou de uma de suas subpastas.

Há duas formas de excluir uma pasta. “Excluir pasta” remove a pasta e move seu conteúdo para a raiz do projeto. “Excluir pasta e conteúdo” exclui também os arquivos e as subpastas, e exige digitar DELETE. A pasta raiz não pode ser excluída.

Em telas maiores, “Fixar como janela flutuante” mantém o navegador de pastas disponível durante a edição. O controle de minimizar recolhe a janela, e “Fechar” a fecha.

Trabalhe em projetos separados

“Projetos” abre os projetos salvos. Selecione um para continuar ou escolha “Criar projeto” e digite um nome. Use o lápis para renomear um projeto e a ação de excluir para removê-lo após confirmar.

Os projetos ficam salvos neste navegador e neste dispositivo. O indicador de salvamento mostra se as alterações mais recentes foram salvas. Isso não envia o projeto para uma conta nem cria um arquivo de backup no computador.

“Exportar como ZIP” baixa o projeto atual com seus arquivos e pastas. Guarde uma cópia antes de limpar os dados do navegador, trocar de dispositivo ou fazer alterações que talvez queira desfazer. O editor atual não permite restaurar um projeto a partir de um ZIP.

Comece com um exemplo funcional

No computador, “Modelos” oferece os exemplos “Jogo da cobrinha”, “Calculadora” e “Aplicativo de desenho”. Escolher um modelo cria um projeto separado com seus próprios arquivos HTML, CSS e JavaScript. Seus projetos anteriores permanecem na lista.

Teste a prévia, altere um pequeno trecho do código e confira o resultado. Isso ajuda a entender qual arquivo controla cada parte da página.

Dê mais espaço ao editor

No computador, “Layout” permite escolher a disposição. Arraste os divisores disponíveis para redimensionar os painéis ou use os controles de minimizar e maximizar. O celular usa uma disposição compacta do editor e da prévia, sem o seletor de layout do computador.

“Modo de foco” faz parte da disposição do editor. Escape fecha as caixas de diálogo, mas não sai desse modo. Para sair, use o mesmo botão novamente.

Melhore a leitura do código

Em “Configurações”, você pode configurar o tema do editor, os números de linha, a quebra de linha, o fechamento automático de tags e parênteses e o destaque da linha ativa. “Sistema” segue a configuração do dispositivo. “Escuro” e “Claro” definem o tema do editor diretamente.

Em “Fonte”, você pode escolher a fonte e um tamanho de 12 a 24 pixels. “Recuo” define a largura da tabulação como dois, quatro ou oito espaços. Essas preferências ficam salvas no navegador.

“Excluir todos os dados do editor” é uma ação separada em “Configurações”. Ela remove todos os projetos, arquivos, dados salvos, estatísticas e preferências. Para confirmar, você precisa digitar DELETE. Exporte antes os projetos que deseja manter.

Use o teclado

Se o resultado não aparecer

Se a prévia estiver vazia, confira se o projeto contém um arquivo HTML com conteúdo visível. Se a página aparecer sem estilos ou sem as interações esperadas, verifique os nomes e os caminhos dos arquivos referenciados, inclusive possíveis erros de digitação.

Abra “Console” para consultar os erros de JavaScript. Um erro pode impedir a execução das instruções restantes do script. O editor não corrige o código automaticamente.

Se o indicador de salvamento não voltar a “Salvo”, mantenha a página aberta e exporte o projeto antes de recarregar. A navegação privada, as restrições de armazenamento ou a limpeza dos dados do site podem fazer com que os projetos salvos deixem de ficar disponíveis.