Um site com estilo

Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e sem estilo.

O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página.

No mundo do HTML, a gente só se preocupa com o que as coisas são — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir como as coisas parecem, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento.

Um jeito de incluir CSS é usar a tag <style> e colocar o código CSS direto nela. Por exemplo, olhe isto:

<style>
  body {
    font-family: 'Gill Sans', sans-serif;
  }
</style>

Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag <body> — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.”

Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como styles.css. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag <style> em cada página que criar.

CSS é uma linguagem poderosa. Todo site que você vê está usando ela. Todos aqueles desenhos detalhados, boa parte da animação e o posicionamento de imagens e tipografia — isso é CSS.

Mesmo assim, CSS também tem uma curva de aprendizado. E embora eu te incentive de verdade a explorar CSS, este livro é HTML e Pessoas — eu quero manter o foco no HTML. Mas tudo bem! A gente ainda pode usar CSS para deixar o site bonito sem escrever tudo na mão.

Frameworks CSS

Até quem desenvolve sites profissionalmente e já sabe CSS usa CSS pronto como ponto de partida. A gente vai fazer algo parecido. Alguns frameworks CSS são feitos para quem desenvolve — eles vêm com um monte de recurso extra e pedem que você escreva o HTML de um jeito específico. Outros frameworks, porém, são pensados para sites mais simples. Eles deixam o seu HTML bonito sem você ter que fazer muito trabalho a mais. São chamados de frameworks CSS classless.

Para o nosso caso, isso é perfeito. Vamos usar um chamado Simple.css. Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes.

Eles vão deixar o seu HTML bonito e te dar um ótimo ponto de partida para um site básico. Fique à vontade para usar coisas que outras pessoas já fizeram. Tem muita coisa boa por aí!

Simple.css

Eu te animo a dar uma olhada no site do Simple.css, principalmente na página de demonstração. Ela mostra como usar diferentes elementos HTML e como eles ficam com o Simple. Vamos baixar o Simple.css.

A documentação do Simple.css dá algumas formas de começar, mas, pelo bem da simplicidade (viu o que eu fiz?), eu vou te passar o URL do arquivo CSS:

https://cdn.simplecss.org/simple.css

Não se intimide com todo o código que tem lá! Você não precisa entender isso agora (nem nunca, de verdade). É só ir em File > Save Page As no navegador (Command-S no macOS e Control-S no Windows) e salvar este arquivo na pasta do projeto do seu site, onde está o index.html.

Pronto, você salvou. A gente vai adicionar isso à página daqui a pouco. Mas, primeiro, vamos organizar a casa.

Organizando nossos arquivos

Até agora, a gente só tem três arquivos — a nossa página, um arquivo de imagem e o simple.css que acabamos de baixar. Mas logo vamos adicionar mais arquivos. Vamos criar um par de pastas e mover as coisas. A gente quer que a nova estrutura de arquivos fique assim:

pasta css
- simple.css
pasta images
- space.jpg
index.html

Limpo e organizado. No Visual Studio Code, você pode criar arquivos e pastas direto na barra lateral. Passe o mouse sobre os seus arquivos e você vai ver estes botões.

Captura de tela da janela do VS Code com uma pasta chamada 'MY-SITE' em destaque. Dentro da pasta há dois arquivos: 'index.html' e 'space.jpg.' Uma seta vermelha grande aponta para o botão 'New Folder' no canto superior direito do editor.

Depois que você fizer as mudanças, se recarregar a página no navegador, vai notar que a nossa imagem não funciona mais. Perceba como o navegador recorre ao texto alt que a gente colocou, no lugar da imagem.

Captura de tela da “Blake's Homepage.” Ela inclui seções: uma frase breve sobre o autor, jogos de tabuleiro favoritos e um guia de como fazer um site. A página tem texto preto simples sobre fundo branco. Há uma imagem, mas ela não está funcionando direito — no lugar aparece o texto alternativo, “Photograph of space with stars and stardust.”

Isso acontece porque a gente moveu o arquivo de imagem space.jpg em relação à página inicial. Agora ele está numa pasta chamada images. A gente conserta isso atualizando o valor src da imagem. Coloque o nome da pasta e uma barra antes do nome do arquivo.

<img src="images/space.jpg" alt="Photograph of space with stars and stardust.">

Adicionando o Simple.css à página

A gente pode adicionar uma folha de estilo à página de um jeito parecido com o da imagem. Vamos usar uma tag <link> para apontar para o arquivo CSS. Vamos colocá-la na tag <head> do site.

<head>
  <title>Blake's Homepage</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css/simple.css">
</head>

A tag <link> é self-closing — ela não tem tag de fechamento. A gente precisa dar dois atributos. O rel diz qual é a relação do arquivo que estamos ligando com a nossa página. Arquivos CSS são chamados de stylesheets (folhas de estilo), então a gente informa isso como a relação (no singular). O href é onde a gente indica o arquivo, incluindo o caminho da pasta.

Assim, de uma vez, o nosso site se transforma. Agora a gente vê uma página centralizada, texto maior e uma fonte sans-serif.

Adicionando um header, um footer e o conteúdo principal

A gente vê que o arquivo Simple.css fez efeito na hora. Mas as coisas ficam ainda melhores quando a gente adiciona algumas seções que o Simple.css espera — um <header> para o título do site e um <main> para a área de conteúdo principal. A gente não usou isso antes — não é obrigatório — mas usar é uma boa prática.

E isto é totalmente opcional, mas já que estamos nisso, vale adicionar um <footer> também. Às vezes as pessoas colocam informação de copyright aqui. Às vezes têm rodapés grandes, com uns montes de links. Às vezes é só o nome. Eu vou manter simples, mas você pode colocar o que quiser.

Então a gente coloca o nome do site numa tag <header> e o conteúdo principal na tag <main>. Depois, adiciona um <footer> com um pouco de informação.

<body>
  <header>
    <h1>Blake's Homepage</h1>
  </header>

  <main>PAGE CONTENT GOES HERE</main>

  <footer>
    <p>Made with ❤️ and ☕️ by Blake Watson.</p>
  </footer>
</body>

Depois desses ajustes, o título do site ganha um estilo especial, e parágrafos e listas ficam com um espaçamento mais adequado.

Captura de tela da “Blake's Homepage” com mais melhorias de estilo. A página agora tem um cabeçalho claro no topo, com um fundo claro, que faz o título “Blake's Homepage” se destacar mais. O espaço entre as seções melhorou a leitura, e um rodapé novo apareceu embaixo, com o texto. Esse rodapé dá um toque pessoal. O layout geral parece mais estruturado e equilibrado visualmente.

Atualize o site no ar

Vamos colocar as novidades online! No Neocities, você não consegue enviar pastas pelo botão de upload. Ou você cria a pasta no painel clicando em “New Folder”, ou arrasta a pasta do computador para a área de soltar arquivos.

Captura de tela do painel do Neocities da “Blake's Homepage.” A página mostra opções de gerenciamento de arquivos, incluindo enviar arquivos, criar arquivos novos e pastas novas. O URL da página do Blake e as opções de edição estão visíveis, com uma seta vermelha apontando para o botão “New Folder.”

Provavelmente é mais fácil arrastar as pastas. Mas, se você criá-las na mão, precisa abrir cada pasta e enviar o conteúdo dela. Depois que uma pasta é criada, você passa o mouse sobre ela para ver as opções. Você vai querer clicar em “Manage” para abrir a pasta. Dali, pode clicar em “Upload” para enviar os arquivos certos para aquela pasta.

Mova arquivos que já existem renomeando-os. Por exemplo, se eu quiser mover space.jpg para dentro da pasta de imagens, posso clicar em “Rename” e incluir a pasta no caminho: images/space.jpg.

Uma janela pop-up chamada “Rename / Move” mostra o caminho do arquivo “images/space.jpg” sendo editado.

É um pouco trabalhoso, mas não é tão ruim. Seja qual for o jeito, confira se os arquivos no Neocities batem com o que você tem no computador.

A seguir

Neste capítulo a gente escreveu pouco código, mas se preparou para o que vem: organizamos as coisas, conseguimos uns estilos e separamos a página em seções.

O resto deste livro-web vai focar em construir o nosso site. No próximo capítulo, vamos adicionar uma página Sobre.