src/04-a-website-with-style.md (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
---
title: 'Um site com estilo'
summary: 'Aprenda sobre CSS e veja como ligar uma folha de estilo externa, como o Simple.css, ao seu site.'
permalink: 'um-site-com-estilo/'
originalPath: /a-website-with-style/
tags: chapter
layout: 'chapter.njk'
---
# 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:
```html
<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.”
{% aside 'Observação sobre fontes' %}
Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados _serifs_, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais.
<p class="sans-serif">Fontes sans-serif são aquelas <em>sem</em> serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.</p>
<p class="mono">Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.</p>
{% endaside %}
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.
{% aside 'Observação' %}
Se você tiver vontade de aprender mais sobre CSS, ótimo! Eu tenho [um capítulo bônus](/basico-de-css) no fim deste livro que apresenta mais CSS e aponta para outros materiais.
{% endaside %}
## 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](https://simplecss.org/). Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes.
- [Water.css](https://perma.cc/5936-VK4J)
- [Sakura](https://perma.cc/F6E4-EU58)
- [Pico](https://picocss.com/)
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](https://simplecss.org/), principalmente na [página de demonstração](https://simplecss.org/demo). 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](https://perma.cc/XA5E-E59Q) 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.
<img src="/assets/img/vscode-new-folder.webp" alt="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." style="max-width: 450px">
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.
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.
```html
<img src="images/space.jpg" alt="Photograph of space with stars and stardust.">
```
{% aside 'Mais sobre URLs' %}
Quando a gente precisa informar o lugar dos arquivos no site — seja um link para outra página ou o caminho de uma imagem — a gente pode usar o que se chama de _URL relativa_.
Quando você está na página `index.html`, pense nela como o seu lugar atual. Se quiser apontar para uma imagem, precisa dizer ao navegador como encontrá-la. Uma URL relativa é um jeito de fazer isso. Ela descreve como ir “daqui até lá”, por assim dizer.
Parecido com o URL na barra do navegador, você usa barras para separar os níveis. O URL `images/space.jpg` significa: “procure uma pasta chamada `images` neste mesmo nível e, dentro dela, procure um arquivo chamado `space.jpg`.”
{% endaside %}
## 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.
```html
<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.
{% aside 'Observação' %}
O que as pessoas costumam chamar de “links” numa página — texto ou imagens clicáveis — é feito com a tag `<a>`, como a gente já viu. Em geral, eles apontam para um destino para o qual a gente navega ao clicar.
A tag `<link>` indica um arquivo que a gente quer ligar à página e qual é a relação desse arquivo. Aqui a gente está usando ela para conectar uma folha de estilo. Outra relação comum é definir um ícone para o site, por exemplo.
{% endaside %}
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.
```html
<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.
{% aside 'Observação' %}
Se você estiver acompanhando e notar que o seu site tem fundo escuro com texto claro, tudo bem! O Simple.css reconhece se você (quem visita o site) está com o sistema no modo escuro e, se estiver, usa um tema escuro no site. Para mudar esse comportamento, veja o capítulo bônus [Personalizar o Simple.css](/personalizar-o-simple-css).
{% endaside %}
## 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.
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`.
É 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.
|