Guia: como mexer neste site

Respira. Você não vai quebrar nada que não dê pra desfazer com Ctrl + Z. Esta página explica tudo do começo, sem enrolação. (Depois que aprender, pode apagar este arquivo.)

1. O que é cada arquivo

2. Como editar

Abra o arquivo .html em qualquer editor de texto simples: Bloco de Notas, VS Code, Notepad++, ou até o editor do próprio Neocities. Não use Word — ele estraga o arquivo.

Pra ver o resultado, dê dois cliques no arquivo index.html: ele abre no navegador direto do seu computador, sem precisar de internet.

3. O básico do HTML em 2 minutos

HTML são etiquetas que abrem e fecham em volta do texto. A que abre é <p>, a que fecha tem uma barra: </p>. Só isso. Olha:

<h1>Título grande</h1>
<h2>Título médio</h2>

<p>Um parágrafo de texto normal.</p>

<p>Texto com uma palavra em <strong>negrito</strong>
e outra em <em>itálico</em>.</p>

<ul>
  <li>item de uma lista</li>
  <li>outro item</li>
</ul>

<hr>  (uma linha divisória)
<br>  (uma quebra de linha)

Importante: apertar Enter no editor não cria parágrafo novo na página. Quem faz isso é o <p>.

Comentários

Nas páginas você vai ver coisas assim:

<!-- ESCREVA AQUI: fale de você -->

Isso é um recado só pra você: não aparece no site. Pode apagar quando não precisar mais.

4. Links

<a href="sobre.html">ir pra minha página Sobre</a>

<a href="https://neocities.org" target="_blank" rel="noopener">
  abrir um site de fora em outra aba
</a>

<a href="mailto:seuemail@exemplo.com">me mandar um e-mail</a>

5. Imagens

Coloque o arquivo na pasta images e escreva:

<img src="images/gatinho.png" alt="meu gato dormindo">

O alt é a descrição — importante pra quem não enxerga e pra quando a imagem não carrega.

Já existem uns atalhos de tamanho e posição prontos pra você:

<img src="images/foto.png" alt="" class="img-esquerda">  <!-- texto contorna pela direita -->
<img src="images/foto.png" alt="" class="img-direita">   <!-- texto contorna pela esquerda -->
<img src="images/foto.png" alt="" class="img-pequena">   <!-- miniatura -->
<img src="images/foto.png" alt="" class="img-grande">    <!-- grandona -->
<img src="images/foto.png" alt="" class="moldura">       <!-- com borda branca -->

Pode juntar dois: class="img-pequena moldura".

6. Criar uma página nova

1. Copie o arquivo MODELO.html e cole na mesma pasta.
2. Renomeie pra o que quiser, tudo minúsculo: receitas.html.
3. Abra e troque o <title> e o texto.
4. Abra js/menu.js e acrescente a linha:

   { texto: "Receitas", link: "receitas.html" },

5. Acrescente também na lista do mapa.html.

7. Mudar as cores

Abra css/estilo.css. Logo no começo tem um bloco assim:

:root {
  --fundo-da-tela:  #3A6EA5;
  --fundo-janela:   #D8D4CC;
  --barra-inicio:   #14235E;
  --barra-fim:      #8FB6E0;
  ...
}

Troque o código da cor e o site inteiro muda junto. Códigos de cor você acha procurando por "color picker" — é sempre um # seguido de 6 caracteres.

Combinações prontas, se quiser experimentar

8. Caixinhas prontas

Coisas que já estão no estilo, é só copiar:

<div class="aviso">Um aviso em destaque verde.</div>

<div class="caixa">Uma caixinha discreta, boa pra dicas.</div>

<blockquote>Uma citação em itálico com barra na lateral.</blockquote>

<article class="post">
  <h2>Título do post</h2>
  <span class="data">14 de agosto de 2026</span>
  <p>O texto do post.</p>
</article>

Tabela

<table>
  <thead>
    <tr><th>Coluna 1</th><th>Coluna 2</th></tr>
  </thead>
  <tbody>
    <tr><td>linha 1</td><td>valor</td></tr>
    <tr><td>linha 2</td><td>valor</td></tr>
  </tbody>
</table>

Galeria de imagens

<div class="galeria">
  <figure>
    <img src="images/foto1.png" alt="descrição">
    <figcaption>Legenda</figcaption>
  </figure>
  <!-- copie o bloco figure pra cada imagem -->
</div>

9. Colocar o site no ar

1. Crie uma conta grátis no Neocities.
2. Apague os arquivos de exemplo que vêm com a conta nova.
3. Envie todos os arquivos e as pastas css, js e images mantendo a mesma organização.
4. Pronto: seu site fica em seunome.neocities.org.

Depois, é só editar direto por lá ou reenviar o arquivo alterado.

10. Quando algo dá errado

Feito por mim, com carinho · mapa do site