Introdução

Eu não acho que sites foram feitos para serem criados só por “profissionais da web”. No fundo, um site é um documento. Quase todo mundo hoje em dia sabe fazer um documento — seja no Word, no Google Docs, em Markdown ou em outra ferramenta. HTML não deveria ser exceção. Sim, ele é um pouco mais técnico do que outros tipos de documento. Mas também é muito especial.

É o formato de documento da web. O humilde arquivo HTML está em todo lugar. Se você olhou um site hoje, quase certamente viu HTML.

HTML é resistente. Você pode olhar um site feito hoje ou um feito vinte anos atrás. Os dois usam HTML e os dois funcionam. Poucos formatos de documento podem dizer o mesmo. Você também não precisa de um programa especial para fazer um documento HTML. Existem vários, e você pode usar qualquer um. Também dá para abrir o Bloco de Notas e escrever HTML na mão (alerta de spoiler: é exatamente isso que vamos fazer).

Eu criei este livro na web porque queria algo para quem não se considera desenvolvedor profissional. Imagine se documentos do Word só pudessem ser feitos por “profissionais de Word”. Não. Saber escrever um pouco de HTML e colocar isso na internet é uma habilidade útil em muitos caminhos — profissionais e pessoais. Não pertence só a quem faz site de carreira. HTML é para todo mundo. HTML é para pessoas.

Esta tradução para o português do Brasil é oferecida por Pablo Murad e Portal IDEA, a partir do original HTML for People, de Blake Watson.

Para quem é este livro?

Este livro é para quem não tem experiência anterior com programação. Eu não vou assumir que você já sabe a primeira coisa sobre HTML. Vamos começar pequeno. Mas, no fim, teremos um site pessoal completo: várias páginas, imagens, um blog e mais.

Eu vou assumir que você já usa um computador e consegue tarefas básicas, como criar arquivos e pastas. Isso é necessário porque (outro spoiler) um site, no fundo, é só arquivos e pastas.

Do que eu preciso?

Você precisa de um computador com internet. Eu escrevi este livro de um jeito genérico, para funcionar no macOS, no Windows ou no Linux. Se eu indicar um programa para instalar, ele será gratuito (ou terá um plano grátis usável) e vai funcionar em mais de um sistema (ou eu indico uma alternativa).

Sumário

1. Do zero à internet: seu primeiro site
2. Adicionar conteúdo ao seu site
3. Intervalo: melhore seu editor de texto
4. Um site com estilo
5. Adicionar uma página Sobre
6. Adicionar um blog
7. Adicionar um currículo
8. Intervalo: instalar um servidor local
9. Adicionar uma página divertida
10. Conquista desbloqueada: Hipertextista

Capítulos bônus

Isto é o que eu queria cobrir, mas achei que saía um pouco do foco. CSS e PHP têm uma curva de aprendizado um pouco mais íngreme do que HTML. Mesmo assim, não acho que estejam fora do alcance de quem quiser explorar. E um pouquinho de cada um já ajuda bastante. Então isto é uma degustação de cada um.

1. Personalizar o Simple.css
2. Básico de CSS
3. HTML reutilizável com PHP

A seguir

Agora que você já sabe o porquê deste livro, é hora do primeiro passo. No próximo capítulo, você vai aprender a fazer um site do zero e colocá-lo na internet.

Do zero à internet: seu primeiro site

Você, meu amigo, está prestes a ir do zero à internet. Vamos colocar sua primeira página caseira na web.

Vou te contar um segredo: sites são só arquivos de texto. Você não precisa de um programa caro e sofisticado para criá-los. Dá para fazer um site com as ferramentas de texto que já vêm no seu computador. E é exatamente isso que vamos fazer agora.

Passo 1. Crie uma pasta no seu computador

Escolha um lugar no seu computador e crie uma pasta. Chame de my-site ou algo parecido. O ideal é nomear pastas e arquivos de site com letras minúsculas, números, hífens e underlines. Evite espaços nos nomes. Assim seus arquivos funcionam em muitos computadores e servidores diferentes. (Um servidor é o computador na internet que guarda os arquivos do seu site e os entrega para quem visita.)

Passo 2. Crie o index.html

Por convenção, a página inicial de um site é o index.html. Você pode ter outras páginas (como about-me.html ou o que quiser). Mas isso fica para depois.

Para criar o index.html, abra o TextEdit no Mac ou o Bloco de Notas no Windows.

Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta:

My name is Blake. I enjoy making websites and teaching others to do the same.

Agora salve este arquivo. Chame de index.html e coloque na pasta my-site que você criou no passo 1.

Passo 3. Veja a prévia do seu site

Você pode abrir o site dando um clique duplo em index.html. Ele deve abrir no seu navegador padrão. Outra opção: abra o navegador primeiro, clique em File > Open File… e navegue até o seu arquivo index.html.

Você deve ver o seu site (sim, bem simples) no navegador! Sinta-se à vontade para ajustar o texto e corrigir erros de digitação. Estamos prestes a publicar esta página para o mundo.

Não se preocupe com a aparência. Vamos cuidar disso depois.

Passo 4. Publique o seu site

Existem muitas opções para publicar o seu site. Para o nosso caso, precisamos de algo gratuito, fácil e pensado para pessoas, não para empresas. Felizmente, é isso que temos com o Neocities.

Vá até o Neocities e crie uma conta. É de graça. Você também vai precisar escolher um nome de usuário/nome do site. Seu site vai ficar num subdomínio em YOURNAME.neocities.org — o YOURNAME vem antes de neocities.org. Eu sugiro usar seu nome real ou um apelido que você já use na internet. Ou, se você já sabe sobre o que a página vai ser, escolha algo que combine com o tema (por exemplo, dndfanpage).

Quando a conta estiver criada, vá ao painel do seu site. Você vai ver alguns arquivos iniciais lá. Por enquanto, pode ignorá-los. Para publicar a página que você acabou de fazer no computador, arraste o index.html do seu computador para o painel do Neocities. Isso vai substituir o index.html que já está lá.

Feito isso, clique no link do seu site no topo do painel.

Parabéns, você acabou de fazer um site! 🎉

A seguir

No próximo capítulo, vamos adicionar mais conteúdo ao nosso site e conhecer algumas tags HTML (uma tag é um pedaço de código que marca o que cada parte da página é).

Adicionar conteúdo ao seu site

Primeiro, dá um tapinha nas próprias costas: você já tem um site caseiro no ar! Agora é hora de deixá-lo mais interessante.

Adicione um título

Vamos dar um nome a ele! Depende do tipo de site que você está fazendo, mas o meu vai ser uma página pessoal. Todo mundo tem perfil em rede social, mas esses perfis são sem graça e parecidos demais. A gente merece mais. E nossa velha amiga, a homepage pessoal, é um lugar perfeito para começar.

Blake's Homepage

My name is Blake. I enjoy making websites and teaching others to do the same.

Legal! Vamos ver no navegador.

Bem, não era isso que a gente queria. O navegador espremeu o texto numa linha só. Ué?!

Está faltando a marcação do Hypertext Markup Language. (Marcação, ou markup, é o código que diz ao navegador o que cada pedaço do texto é.) Precisamos dizer ao navegador que o nome do site deve ser um título. Em HTML, você pode ter até seis níveis de títulos. Vamos definir o nome do site como o título mais importante, um título de nível 1, ou <h1>.

O que é esse código estranho em forma de pílula que eu acabei de escrever? É chamado de tag HTML. (Uma tag é um pedaço de código que envolve partes da página para dizer ao navegador o que elas são.) Vamos fazer isso agora.

<h1>Blake's Homepage</h1>

<p>
  My name is Blake. I enjoy making websites and teaching others to do the same.
</p>

Aqui, separamos os dois elementos da nossa página e envolvemos cada um em tags. Estamos dizendo que o nome do site deve ser um título de nível 1, e que o primeiro parágrafo deve ser, bem, um parágrafo — é o que o p significa.

Repare que um par de tags tem uma tag de abertura e uma tag de fechamento. A tag de fechamento é idêntica à de abertura, só que começa com uma barra, /.

Agora salve o arquivo e recarregue o navegador. Esse costuma ser o ritmo de criar um site: você muda um pouco de código, salva e aperta recarregar no navegador. Depois, sinta o poder correndo nas veias enquanto você cria um site do nada!

Uau, bem melhor! Vamos continuar adicionando mais conteúdo.

Links para outros sites

Você já se perguntou por que se chama the web? Tipo, o que isso significa? O ingrediente especial que faz dela uma teia é o hiperlink, ou, como a gente costuma chamar, um link. Sabe, aquele texto muitas vezes azul, muitas vezes sublinhado, que você clica para pular para outra página, outro site, uma imagem, um vídeo de gato, qualquer coisa!

Isso é possível graças ao elemento anchor, ou “tag A”, como é conhecido. Fica assim:

<a>This will go somewhere eventually</a>

Tudo que está dentro das tags <a> vira clicável. Mas para onde o link nos leva? Por enquanto, para lugar nenhum. Precisamos indicar um destino. Fazemos isso dando à <a> um atributo chamado href. É a hypertext reference — o lugar para onde você quer ir quando clica no link.

<a href="https://www.wikipedia.org/">Go to Wikipedia</a>

Vamos adicionar um link ao nosso site — escolha um dos seus sites favoritos, ou algo divertido e interessante.

<h1>Blake's Homepage</h1>

<p>
  My name is Blake. I enjoy making websites and teaching others to do the same.
</p>

<p>
  Check out these cool web games at <a href="https://neal.fun/">Neal.fun</a>!
</p>

Salve e recarregue!

Com a ajuda da humilde tag <a>, o seu site vira parte da web viva, que respira. Existem mais de cem tags HTML, mas você não precisa decorá-las para fazer um site. Dá para fazer muito com pouca coisa. Vamos ver mais algumas tags que já te colocam no caminho.

Listas de coisas

Fãs de lista, este conjunto de tags é para vocês. Vamos usar o elemento unordered list, <ul>, para adicionar uma lista com marcadores. O <ul> define a lista, e a tag list item, <li>, define cada item. Assim:

<ul>
  <li>The first thing</li>
  <li>Another thing</li>
  <li>And lastly, this thing</li>
</ul>

O código acima vira uma lista com marcadores, deste jeito:

• The first thing
• Another thing
• And lastly, this thing

Se você quiser uma lista numerada, troque <ul> por <ol> (de ordered list). Só isso! Você vai criar uma lista numerada.

1. The first thing
2. Another thing
3. And lastly, this thing

Vamos adicionar uma lista ao nosso site. Aqui está o site inteiro até agora:

<h1>Blake's Homepage</h1>

<p>
  My name is Blake. I enjoy making websites and teaching others to do the same.
</p>

<p>
  Check out these cool web games at <a href="https://neal.fun/">Neal.fun</a>!
</p>

<h2>Favorite board games</h2>

<ul>
  <li>Dungeons & Dragons</li>
  <li>Risk</li>
  <li>Pandemic</li>
</ul>

<h2>How to make a website</h2>

<ol>
  <li>Create an HTML file</li>
  <li>Write some HTML in it</li>
  <li>Open it with your web browser</li>
</ol>

Olha só, isso está começando, aos poucos, a parecer um site de verdade!

Você vai notar que eu escorreguei uma tag nova ali sem avisar. É um título de nível 2, ou tag <h2>. Títulos dão estrutura à página e facilitam para os visitantes acharem o que querem.

Há outra diferença sutil entre as tags que temos usado. Algumas, como a tag <a>, são elementos em linha (inline): elas não começam uma linha nova e ocupam só a largura necessária. Outras tags — como <h1>, <ul> e <p> — são conhecidas como elementos de bloco (block). Um elemento de bloco começa numa linha nova e ocupa a largura inteira do recipiente.

Até agora temos um monte de palavras. Mas você sabe o que vale por mil delas?

Adicione imagens ao seu site

Vamos colocar uma imagem legal no nosso site. Pode ser tentador ir no Google Imagens e pegar a primeira coisa que aparecer. Não é o caminho. Você precisa ter os direitos certos para usar a imagem. Há muitos lugares na web para achar imagens (procure imagens com licença Creative Commons). Para simplificar, vamos usar o site popular de imagens grátis Unsplash.

Eu achei uma imagem legal do espaço. Baixei a versão pequena e renomeei para space.jpg, para ficar mais fácil de citar. Ache uma imagem que você goste e solte na pasta, ao lado do seu index.html.

Você pode adicioná-la à página usando a tag de imagem, ou <img>. Diferente das tags que vimos até agora, a tag <img> é auto-fechável. Isso significa que não existe tag de fechamento. Fica assim:

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

Assim como a tag <a>, a tag <img> usa atributos para dar mais informação sobre como você quer usá-la.

Use o atributo src para dizer à tag de imagem a fonte (source) da sua imagem, ou seja, onde ela está. Neste exemplo, estamos dizendo que a imagem está na mesma pasta que a nossa página index.html (e não numa subpasta) e que o nome do arquivo é space.jpg.

Também precisamos descrever a imagem, caso algum visitante do nosso site não consiga vê-la. Isso pode acontecer por vários motivos — talvez a pessoa seja cega e use um leitor de tela para acessar sites. Ou talvez um problema faça a imagem não carregar. Se isso acontecer, o nosso texto alternativo, ou texto alt, aparece no lugar.

Vamos salvar e atualizar o navegador.

Eu redimensionei a janela para a página inteira caber na captura. Mas se você estiver vendo uma barra de rolagem, está tudo bem!

Dependendo da sua imagem, você pode querer deixá-la menor ou maior. Dá para usar os atributos width e/ou height para isso. Se você indicar só a largura ou só a altura, o navegador mantém a proporção da imagem — ela não estica nem amassa. Para definir largura ou altura, você informa um número, que representa uma quantidade de pixels.

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

Se definirmos o width como 300, fica assim:

Adicione notas ao seu código

Às vezes você quer colocar notas no código — texto que não aparece na página, mas continua visível no código. Você pode fazer isso para organizar um documento, deixar recados (como tarefas) para o você do futuro, ou até esconder um trecho em andamento que ainda não deve aparecer.

Por exemplo, eu poderia deixar um recado para voltar depois e atualizar meus jogos de tabuleiro favoritos.

<h2>Favorite board games</h2>

<!-- Todo: after playing some new games,
see if any deserve to make this list. -->

<ul>
  <li>Dungeons & Dragons</li>
  <li>Risk</li>
  <li>Pandemic</li>
</ul>

O navegador ignora tudo que está entre <!-- e --> e não mostra isso na página. Esse tipo de texto se chama comentário. Comentários são um jeito legal de anotar o código, porque só aparecem no código — não na página pronta.

Aqui vai outro exemplo, em que eu envolvi várias tags HTML dentro de um comentário. Nada do comentário aparece na página — só no código-fonte.

<!--
Work in progress. When I finalize this list, I'll remove the comment markers.

<h2>Favorite board games</h2>

<ul>
    <li>Dungeons & Dragons</li>
    <li>Risk</li>
    <li>Pandemic</li>
</ul>
-->

O seu código HTML é público, inclusive os comentários. Qualquer pessoa pode ver o código-fonte do seu site, então não coloque nada secreto ou sensível dentro de comentários. Para ver o código-fonte de uma página, você pode usar um atalho do teclado ou achar a opção no menu do navegador. Varia de navegador para navegador. Veja esta referência no Lifewire.

Dê ao seu site uma cabeça e um corpo

Eu não fui totalmente honesto com você até agora. A gente tomou um atalho. Temos escrito só o que o navegador mostra no arquivo index.html. Mas todo site tem uma seção invisível. E agora o seu precisa dela.

Lembra que a gente envolve a maioria dos elementos em tags? Na verdade, precisamos envolver a página inteira na tag <html>. Uma página HTML ainda se divide numa seção invisível <head>, com informações sobre o seu site, e no <body>, onde vai todo o seu conteúdo.

<html>
  <head>
    <!-- info about your site goes here -->
  </head>

  <body>
    <!-- stuff you want to show up on your page goes here -->
  </body>
</html>

Para deixar nosso documento HTML oficial, vamos adicionar uma linha doctype bem no começo. O doctype existe principalmente por razões históricas, mas ele diz ao navegador: “Oi, eu sou um documento HTML, então por favor me mostre do jeito certo!” Pode copiar e colar essa linha e seguir em frente — não sinta que precisa decorar cada detalhe.

<!doctype html>
<html>
  <head>
    ...
  </head>

  <body>
    ...
  </body>
</html>

Por enquanto, vamos incluir duas coisas no <head>: uma tag title e uma tag meta.

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

A tag <title> controla o texto que aparece na aba do navegador e o nome do seu site quando ele surge nos resultados de busca. Legal!

Podemos usar a tag <meta> várias vezes para dar ao navegador informações extras sobre a página. Neste caso, estamos dizendo qual conjunto de caracteres usar. O que você precisa saber: texto UTF-8 significa que símbolos especiais, como emojis, aparecem como se espera. Vamos incluir isso primeiro, antes de qualquer outro elemento de texto, para garantir que todo o nosso texto apareça direito.

Aqui está o arquivo index.html inteiro, para consulta:

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

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

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

    <p>
      My name is Blake. I enjoy making websites and teaching others to do the same.
    </p>

    <p>
      Check out these cool web games at
      <a href="https://neal.fun/">Neal.fun</a>!
    </p>

    <h2>Favorite board games</h2>

    <ul>
      <li>Dungeons & Dragons</li>
      <li>Risk</li>
      <li>Pandemic</li>
    </ul>

    <h2>How to make a website</h2>

    <ol>
      <li>Create an HTML file</li>
      <li>Write some HTML in it</li>
      <li>Open it with your web browser</li>
    </ol>
  </body>
</html>

Atualize o seu site no ar

Essas mudanças estão ficando bem legais. Vamos publicar esta página para o mundo. Vá ao painel do seu Neocities. Você vai ver os arquivos iniciais mais o arquivo index.html que você enviou no capítulo 1 deste livro. Para deixar um pouco mais limpo, eu estou mudando para a visualização em lista e apagando a imagem PNG e o arquivo CSS que estavam lá no começo.

Agora clique no botão Upload ou simplesmente arraste seus arquivos atualizados (a página index e a imagem) para a lista de arquivos.

Feito isso, clique no link do seu site no topo do painel. Esse é o seu site NO AR, recém-atualizado, feito do zero por você. Que demais!

A seguir

No próximo capítulo, vamos fazer um intervalo breve e pegar um editor de texto feito para escrever HTML.

Intervalo: melhore seu editor de texto

Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem!

Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu.

Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código.

Baixe o Visual Studio Code

Vá até https://code.visualstudio.com/. Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico.

Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo.

Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim:

Abra o seu projeto

Na tela de boas-vindas do VS Code, clique em Open Folder e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo index.html, vai ver o código numa vista agradável, com números de linha e o que se chama destaque de sintaxe — partes do código ganham cores para se diferenciar melhor das outras.

O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão.

O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas.

Explore quando estiver pronto

O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro.

Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta.

Por agora, vamos voltar a fazer o nosso site!

A seguir

Agora que melhoramos o editor de texto, vamos aprender a adicionar estilo ao nosso site.

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.

• Water.css
• Sakura
• Pico

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.

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.

<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.

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.

Adicionar uma página Sobre

Pelo resto deste livro, a gente vai expandir a nossa página inicial pessoal e transformá-la num site completo, com várias páginas e um blog. O exemplo continua sendo a Blake’s Homepage, e o conteúdo vai falar de mim. Você vai querer adaptar as coisas para o que quiser ver no seu próprio site.

Se você não quiser fazer uma página pessoal, tudo bem também! Os conceitos que a gente cobre valem para todo tipo de site. Então você pode acompanhar e adaptar do seu jeito.

Se quiser um gostinho do resultado, visite a demonstração completa da Blake’s Homepage.

Ela tem as seguintes páginas e recursos:

• Cabeçalho com navegação
• Um blog com três posts
• Página Sobre com uma foto
• Um currículo digital
• Uma página divertida com vídeos do YouTube embutidos

Eu vou incluir muitos exemplos de código nos próximos capítulos, mas você também pode ir ao site de demonstração e ver o código-fonte de qualquer página para consultar a qualquer momento.

Páginas são só arquivos para os quais você cria um link

A gente vai criar uma página nova no site criando um arquivo novo. Crie about.html ao lado de index.html. Para digitar menos, copie todo o conteúdo de index.html e cole em about.html.

Agora, vamos limpar um pouco. Eu vou tirar o título “How to make a website” e o parágrafo com o link para o neal.fun. Esta página deve ser sobre mim. Falando nisso, eu também vou trocar a imagem por uma foto minha (se você não se sentir à vontade para usar uma foto sua, use qualquer imagem que quiser aqui).

Vou ampliar o conteúdo adicionando uns parágrafos. Este também é um ótimo lugar para colocar qualquer informação de contato que você quiser. Eu vou adicionar um link para a minha conta no Mastodon (com um emoji de elefante).

<p>🐘 <a href="https://social.lol/@bw">Drop me a line on Mastodon</a></p>

Lembre-se: um link é uma tag <a>. O texto que você envolve com a tag vira clicável. Depois você informa o atributo href, que é o destino do link — em geral, um URL.

Aqui está o meu código dentro da tag <body>.

<header>
  <h1>About Blake</h1>
</header>

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

  <p>
    My name is Blake. I enjoy making websites and teaching others to do the same. I started writing an HTML web book because I think everyone should have a personal website and I want to show that you don't have to be a computer science graduate to make one.
  </p>

  <p>
    I'm a side project enthusiast and have put various sites, apps, and (bad) games into the world. My hobbies include web-related nerdery, D&D and board games, and writing. I like to participate in National Novel Writing Month, the annual novel-writing challenge
  </p>

  <p>🐘 <a href="https://social.lol/@bw">Drop me a line on Mastodon</a></p>

  <h2>Favorite board games</h2>

  <ul>
    <li>Dungeons & Dragons</li>
    <li>Risk</li>
    <li>Pandemic</li>
  </ul>
</main>

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

E é assim que fica.

Surpresa, sou eu! Enfim, isto já parece uma página Sobre de verdade. Eu admito que está um pouco forçado. Sinta-se à vontade para escrever o quanto quiser aqui.

Navegando entre as páginas

A gente já tem uma página Sobre, mas precisa de um jeito de ir de uma página à outra. A gente precisa de um menu de navegação, ou menu nav. Um menu nav é só uma lista de links. O Simple.css parece gostar do menu nav acima do cabeçalho, então eu vou colocar ali. Mas você também pode colocar abaixo, se quiser.

O HTML tem uma tag <nav> exatamente para isso. Vamos colocar dois links no nosso menu nav — um para a página inicial e um para a página Sobre.

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html" aria-current="page">About</a>
  </nav>

  <h1>About Blake</h1>
</header>

Como esta é, no momento, a página Sobre, eu adicionei um atributo especial ao link. ARIA significa Accessible Rich Internet Applications. A gente deixa o site mais acessível adicionando o atributo aria-current="page". Isso faz um par de coisas por nós.

• Deixa a página mais acessível para tecnologias assistivas, como leitores de tela.
• O Simple.css estiliza o link de outro jeito, para ficar fácil ver em qual página a gente está.

Vamos adicionar o mesmo menu nav na página inicial. Abra o index.html e coloque o menu como a gente fez na página Sobre. Como esta é a página inicial, a gente deve colocar o atributo aria-current no link Home.

<header>
  <nav>
    <a href="index.html" aria-current="page">Home</a>
    <a href="about.html">About</a>
  </nav>

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

Abra no navegador e admire o seu site de várias páginas! Clique. Clique. Clique…

Limpando a página inicial

Como agora a gente tem uma página Sobre, parte do conteúdo da página inicial ficou repetido. Um pouco disso já está na página Sobre. Eu vou tirar o texto de bio, o link do Neal.fun e a lista de jogos de tabuleiro. Vou manter a imagem do espaço e adicionar um parágrafo de boas-vindas. E já que estamos nisso, vou manter a lista “how to make a website”.

Falando da imagem do espaço, vamos deixá-la mais interessante. Eu quero dar uma legenda a esta imagem e um link para o lugar de onde eu a tirei. A gente pode marcar melhor uma imagem envolvendo-a numa tag <figure> e incluindo um <figcaption>.

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

  <figcaption>
    Space is cool. <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">Photo source</a>
  </figcaption>
</figure>

O meu conteúdo <main> na página inicial agora fica assim.

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

    <figcaption>
      Space is cool. <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">Photo source</a>
    </figcaption>
  </figure>

  <p>
    Welcome to my website! Here you can find out more about me, read my very interesting and totally not contrived blog posts, and check out some of the fun hobbies I am into. It won't be long until you are wondering what sorcery I have used to create this mind-blowing, web-based experience. The answer is HTML.
  </p>

  <h2>How to make a website</h2>

  <ol>
    <li>Create an HTML file</li>
    <li>Write some HTML in it</li>
    <li>Open it with your web browser</li>
  </ol>

  <p class="notice">
    <strong>Quer aprender a fazer um site como este?</strong><br> Confira o livro-web gratuito <a href="/">HTML e Pessoas</a>. Foi feito para todo mundo e ensina a criar uma página de um jeito amigável e acessível.
  </p>
</main>

O que é este class="notice"? Você pode aprender mais sobre classes nos capítulos bônus de CSS no fim deste livro. Mas, em resumo, isso ativa alguns estilos que o Simple.css oferece para fazer uma caixinha com um pouco de texto.

Atualize o site no ar

Se você quiser. Também está tudo bem continuar trabalhando no computador. Muitos sites são feitos assim — a pessoa trabalha no site no próprio computador até terminar e só então publica. Mas tem bastante gente que também constrói o site em público, atualizando o site no ar conforme avança.

Se quiser atualizar, volte ao painel do Neocities e envie tanto o index.html quanto o about.html, já que esses arquivos mudaram. Se você adicionou alguma imagem, precisa entrar na pasta de imagens no Neocities e enviá-las lá (ou pode arrastar a pasta images para a área de soltar arquivos, o que substitui a pasta inteira e o conteúdo).

A seguir

A gente transformou a nossa página num site! A seguir, vamos adicionar um blog e explorar várias tags HTML.

Adicionar um blog

Blogs são uma parte enorme da web. Você provavelmente já ouviu falar de várias plataformas populares de blog, como WordPress, Tumblr e Blogger. E existem um monte de plataformas menores e independentes.

Mas você não precisa de uma dessas plataformas para ter um blog. Um blog é só uma série de posts em ordem cronológica (em geral, cronológica inversa, com os posts mais novos primeiro). A gente consegue fazer isso com HTML!

Eu vou adicionar três posts. Não vou colocar todo o código neste capítulo, porque ficaria um pouco longo demais. Você pode olhar o site de demonstração para ver os artigos prontos. Mas eu vou te mostrar como estruturar os arquivos e passar por algumas das tags HTML diferentes que a gente pode usar.

Crie a home do blog

Siga estes passos para deixar o blog disponível em sitename.neocities.org/blog.

1. Crie uma pasta chamada blog; dentro dela, crie um arquivo chamado index.html.
2. Copie o conteúdo de uma das suas outras páginas e cole neste index.html novo e vazio.
3. Mude o <h1> para “Blog”, “Meu blog” ou o nome que você quiser.
4. Mude o <title> para alterar o que aparece na aba. Por exemplo, “Blog - Blake’s Homepage.”
5. Limpe o conteúdo principal para ficar com uma tag <main> vazia. A gente adiciona conteúdo depois.

Vamos abrir no navegador e ver como ficou.

Opa, a gente quebrou; o que aconteceu!? Tem a ver com a estrutura de arquivos. Olhe a tag <link>, onde a gente adicionou os estilos do Simple.css.

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

Ela está procurando css/simple.css, mas não encontra. Por quê? O caminho que a gente deu é relativo ao arquivo atual. O arquivo atual está na pasta blog, então ela procura blog/css/simple.css, que não existe.

Então, como a gente se refere a arquivos que não estão na pasta atual? A gente pode usar a sintaxe .., assim.

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

Isso significa: “suba um nível e, então, procure css/simple.css.”

Bem melhor! Agora, vamos atualizar a navegação. Como a página inicial e a página Sobre não estão na pasta atual, a gente precisa usar a mesma sintaxe .. para criar o link até elas.

<nav>
  <a href="../index.html">Home</a>
  <a href="index.html" aria-current="page">Blog</a>
  <a href="../about.html">About</a>
</nav>

Você também precisa atualizar a navegação nas outras páginas para incluir um link para o blog. Por exemplo, o nav da página inicial deve ficar assim.

<nav>
  <a href="index.html" aria-current="page">Home</a>
  <a href="blog/index.html">Blog</a>
  <a href="about.html">About</a>
</nav>

Crie o primeiro post

Eu vou escrever um post bobo sobre ensinar HTML a um gato. Vou criar um arquivo 2024-04-12-whiskers.html na pasta blog. Você pode nomear o arquivo do post como quiser. O legal de incluir a data é que, conforme você cria mais posts, eles aparecem em ordem no sistema de arquivos do computador.

Como ponto de partida, a gente copia o conteúdo de blog/index.html para o arquivo novo. Eu vou mudar o <h1> (e o <title>) para o nome do meu artigo, “How I taught my cat to make a website with HTML.” Também vou ajustar a navegação. A gente não está na página de listagem do Blog, então não é correto dizer aria-current="page" no link do blog. Mas está dentro da seção Blog do site. Então eu vou mudar o atributo para o mais geral aria-current="true". Isto é só para páginas de posts individuais.

<nav>
  <a href="../index.html">Home</a>
  <a href="index.html" aria-current="true">Blog</a>
  <a href="../about.html">About</a>
</nav>

No fim do post, eu vou adicionar um link de volta ao blog. Como a gente já está na pasta blog, um link para index.html é tudo que a gente precisa para chegar à home do blog.

<a href="index.html" class="button">&larr; Back to the blog</a>

O pedaço class="button" é um estilo que o Simple.css oferece e que faz um link de texto parecer um botão. O ← é um código especial chamado de entidade HTML. Elas servem para representar caracteres especiais. Esta daqui é uma seta para a esquerda. Você pode ver uma lista de outras entidades aqui.

Eu vou adicionar três posts com uns poucos dias de diferença, só como exemplo. Quando eu terminar, vou ter estes posts.

• How I taught my cat to make a website with HTML
• The time I built a website for aliens
• Why donuts are the best thing ever

A minha estrutura de arquivos vai ficar assim:

• blog
  • 2024-04-12-whiskers.html
  • 2024-04-15-aliens.html
  • 2024-04-20-donuts.html
  • index.html
• css
  • simple.css
• images
  • blake.jpg
  • space.jpg
• about.html
• index.html

Formatação de texto

Vamos ver algumas tags que você pode usar nos posts e em outras páginas.

Para negrito e itálico, a gente pode usar as tags <strong> e <em>, nesta ordem.

<p>
  After just three days, <strong>Whiskers can now create web pages</strong> better than <em>I</em> can!
</p>

Isso renderiza assim.

Citações em bloco

A gente pode usar a tag <blockquote> para citar uma pessoa, um livro, outro site ou até a si mesmo.

<blockquote>
  "HTML is <strong>elementary</strong> my dear Watson."<br>
  <cite>&mdash; Whiskers, probably</cite>
</blockquote>

Aqui eu estou usando <strong> para dar ênfase extra. Estou usando a tag <cite> para mostrar a fonte da citação. A tag <br>, que é self-closing, cria uma quebra de linha manual, o que empurra o elemento <cite> para a linha seguinte. Eu usei outro caractere especial, —, para criar um travessão (em dash).

Citações em bloco costumam ser estilizadas como blocos de texto recuados, muitas vezes com uma borda ou uma cor de fundo para dar mais ênfase. A imagem acima mostra como o Simple.css as estiliza (salvo aviso em contrário, todas as imagens de exemplo que eu posto são HTML estilizado com Simple.css).

Recapitulando: títulos e listas

A gente cobriu isto rapidinho no Capítulo 2, Adicionar conteúdo ao seu site, mas vale recapitular. Os nossos posts já usam o título mais alto, o <h1>, mas se você estiver escrevendo um post que precisa de mais títulos, tudo bem!

Títulos em HTML são hierárquicos. Isso significa que títulos <h2> devem vir depois de títulos <h1>, títulos <h3> devem vir depois de títulos <h2>, e assim por diante. Tecnicamente, o HTML nos dá seis níveis de título — de <h1> a <h6>. Mas a moderação é importante aqui. Pergunte a si mesmo se você realmente está deixando a página mais fácil de entender ao adicionar tantos níveis de título. O meu conselho é ficar com três níveis ou menos.

E, claro, a gente tem listas. A gente cobriu isso no Capítulo 2, mas vamos olhar de novo. Você tem duas opções aqui — uma lista com marcadores (chamada de não ordenada) e uma lista numerada (chamada de ordenada).

Aqui está uma lista com marcadores, ou não ordenada, usando a tag <ul> para a lista e <li> para cada item da lista.

<ul>
  <li>Bread</li>
  <li>Sugar</li>
  <li>Hole</li>
</ul>

Isso renderiza assim.

• Bread
• Sugar
• Hole

E aqui está uma lista numerada, ou ordenada (com alguns pontos em negrito para dar ênfase).

<ol>
  <li>
    <strong>Portable Happiness:</strong> Donuts are the perfect grab-and-go
    food. You can take them anywhere: to work, to the park, or on a road trip.
    They're like little circles of happiness that fit in your hand.
  </li>
  <li>
    <strong>Instant Mood Boost:</strong> Feeling down? Have a donut. It's
    scientifically proven* that donuts can turn a frown upside down. (*Not
    actually proven, but we all know it's true.)
  </li>
  <li>
    <strong>Endless Creativity:</strong> Donut shops are constantly coming up
    with new and exciting flavors. From maple bacon to matcha green tea, the
    possibilities are endless. It's like a delicious adventure every time you
    visit.
  </li>
</ol>

É assim que fica.

1. Portable Happiness: Donuts are the perfect grab-and-go food. You can take them anywhere: to work, to the park, or on a road trip. They’re like little circles of happiness that fit in your hand.
2. Instant Mood Boost: Feeling down? Have a donut. It’s scientifically proven* that donuts can turn a frown upside down. (*Not actually proven, but we all know it’s true.)
3. Endless Creativity: Donut shops are constantly coming up with new and exciting flavors. From maple bacon to matcha green tea, the possibilities are endless. It’s like a delicious adventure every time you visit.

Você até pode aninhar listas, assim.

<ul>
  <li>
    First main point
    <ul>
      <li>Sub point</li>
      <li>Another sub point</li>
    </ul>
  </li>

  <li>
    Second main point
    <ul>
      <li>Sub-point</li>
      <li>Another sub-point</li>
    </ul>
  </li>
</ul>

Isso renderiza mais ou menos assim.

• First main point
  • Sub point
  • Another sub-point
• Second main point
  • Sub point
  • Another sub-point

Separando o conteúdo

Um dos jeitos de adicionar espaço entre elementos na mão é a tag <br>, ou tag de quebra (break). A tag de quebra adiciona uma quebra de linha. Por exemplo, veja este haicai (de Robert Cole).

<p>
  A timeless red orb
  floats lazy in the ether
  unimpressed by war.
</p>

Por padrão, o navegador renderiza tudo numa linha só e ignora a maior parte do espaço em branco no seu HTML.

Por um lado, isso é bom — significa que a gente pode formatar o código do jeito que quiser sem as visitas verem um monte de quebras de linha e recuos que a gente não pretendia. Mas, às vezes, a gente quer quebras de linha de verdade.

A gente conserta o haicai colocando um par de tags <br> ali.

<p>
  A timeless red orb<br>
  floats lazy in the ether<br>
  unimpressed by war.
</p>

Isso ajuda em doses pequenas, mas use com parcimônia. Na maior parte do tempo, o espaço entre elementos deve ser controlado com CSS — aplicando margin ou padding, por exemplo. Por sorte, a nossa folha de estilo Simple.css já tem um espaçamento padrão bom. A gente cobre o uso de CSS para espaçamento personalizado no capítulo bônus no fim deste livro.

Outro jeito de separar o conteúdo na mão é usar uma linha horizontal, ou tag <hr>. Em geral, ela é estilizada como uma linha na horizontal. Isso pode ajudar quando você quer separar conteúdo — como uma seção nova ou uma cena nova, no caso de uma história. É mais ou menos assim que pode ficar.

Código e texto pré-formatado

Eu tenho usado estas tags bastante nas páginas que você está lendo neste livro. Veja este parágrafo:

<p>
  By the end of day one, he was familiar with basic tags like <code>html</code>,
  <code>head</code>, and <code>body</code>. On day two, he was creating
  paragraphs and lists. By day three, he had moved on to creating stunning
  layouts with <code>article</code> and <code>section</code>.
</p>

Isso vai mostrar os pedaços de código numa fonte monoespaçada e numa cor diferente, assim.

Você já me viu incluir os símbolos de menor que (<) e maior que (>) nos elementos de código das páginas deste livro (assim, <a>). Isso pede um trabalhinho a mais. Tipo, se eu quiser mencionar uma tag <a>, eu não posso simplesmente escrever <code><a></code> porque o navegador vai achar que eu estou tentando fazer um link de verdade dentro da tag <code>. Para incluir os símbolos de menor que e maior que (às vezes chamados de “colchetes angulares”), a gente precisa das entidades HTML < e >, nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade.

<p>
  By the end of day one, he was familiar with basic tags like
  <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>, and
  <code>&lt;body&gt;</code>. On day two, he was creating paragraphs and lists.
  By day three, he had moved on to creating stunning layouts with
  <code>&lt;article&gt;</code> and <code>&lt;section&gt;</code>.
</p>

Isso nos dá o seguinte.

Como a gente viu antes, ao renderizar o seu conteúdo, o navegador ignora a maior parte do espaço em branco no seu código. Mas, às vezes, você quer preservar o espaçamento e as quebras de linha exatos. Um exemplo divertido é a arte ASCII, que é quando você faz arte com caracteres de texto puro.

    ___       ___       ___       ___   
   /\__\     /\  \     /\__\     /\__\  
  /:/__/_    \:\  \   /::L_L_   /:/  /  
 /::\/\__\   /::\__\ /:/L:\__\ /:/__/   
 \/\::/  /  /:/\/__/ \/_/:/  / \:\  \   
   /:/  /   \/__/      /:/  /   \:\__\  
   \/__/               \/__/     \/__/

O de cima deve aparecer como as letras “HTML” com um efeito 3D. Funciona porque usa uma fonte monoespaçada e preserva todo o espaço em branco. Como eu fiz? Eu usei a tag <pre>, que é para texto pré-formatado. Use assim.

<pre>
    ___       ___       ___       ___   
   /\__\     /\  \     /\__\     /\__\  
  /:/__/_    \:\  \   /::L_L_   /:/  /  
 /::\/\__\   /::\__\ /:/L:\__\ /:/__/   
 \/\::/  /  /:/\/__/ \/_/:/  / \:\  \   
   /:/  /   \/__/      /:/  /   \:\__\  
   \/__/               \/__/     \/__/
</pre>

Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste gerador de arte em texto.

Asides

A tag <aside> é divertida porque o Simple.css a estiliza de um jeito interessante. Elas servem para destaques ou apartes em relação ao conteúdo principal. Por exemplo, eu incluí um aside que lista ingredientes no meu post sobre donuts.

O Simple.css estiliza o aside como uma caixa arredondada e o desloca para o lado. É um jeito legal de adicionar notas extras ou conteúdo secundário a uma página.

Mark, tachado, exclusão, inserção

Aqui vão mais algumas tags de formatação de texto. Use <mark> para destacar texto. Se quiser tachar texto indesejado, envolva-o na tag <s>. Se quiser mostrar edições num documento de forma explícita, prefira a tag <del> para indicar uma exclusão e a tag <ins> para mostrar texto inserido. Por exemplo, isto vem do meu post sobre donuts.

Preencha a página índice do blog

Certo, a gente cobriu várias tags que você pode usar para marcar tipos diferentes de conteúdo. Você pode parar um pouco e brincar com elas. Sem pressa! Eu fico bem aqui quando você estiver pronto. Quando tiver dois ou três posts, vamos colocá-los na página principal do blog.

Se você abrir blog/index.html, ela parece um pouco vazia. A gente conserta isso agora, mostrando o título de cada post, o mais novo primeiro, a data de publicação e um resumo de uma frase. Clicar no título de um post deve levar a pessoa leitora até ele.

Vamos usar a tag <article> para cada um, porque cada um representa uma composição independente. De brinde, o Simple.css vai estilizá-los como cartões. Vamos usar <h2> para o título do post, e dentro dele a gente coloca um link (a tag <a>). Vamos usar a tag time para a data. Vamos usar um parágrafo comum, ou tag <p>, para o resumo. A marcação final fica assim.

<main>
  <article>
    <h2>
      <a href="2024-04-20-donuts.html">
        Why donuts are the best thing ever
      </a>
    </h2>
    <p><time datetime="2024-04-20">April 20, 2024</time></p>
    <p>
      Donuts are the ultimate comfort food because of their versatility,
      variety, portability, mood-boosting power, and endless creative flavors.
    </p>
  </article>
</main>

O link no título vai receber um atributo href, o destino do link. Como a gente já está na pasta blog, a gente pode usar o nome do arquivo do post como destino.

A gente está usando a tag <time> para oferecer uma versão da data amigável para máquinas. Isso pode ser útil para mecanismos de busca que vasculham o seu site ou para possíveis recursos do navegador que dependem de datas. A tag <time> recebe um atributo chamado datetime, no qual você pode informar a versão legível por máquina.

Adicione um <article> como o de cima para cada post ao qual você quiser ligar. Você vai acabar com algo assim.

Uma tabela dos elementos (HTML)

Ufa! A gente cobriu um bocado de tags e adicionou bastante conteúdo neste capítulo. Pode ser muita coisa para lembrar. Se você precisar consultar como usar uma tag HTML em particular — ou se quiser ver quais tags HTML existem — dê uma olhada nesta referência de elementos HTML no MDN. O MDN é, mais ou menos, o manual oficial da web. É só pesquisar qualquer tag, atributo ou conceito sobre o qual você queira saber mais.

Atualize o site no ar (opcional)

Se quiser enviar as mudanças para o Neocities, siga o mesmo processo dos capítulos anteriores. Arraste e solte a pasta blog na área de soltar arquivos para enviar a pasta inteira de uma vez. Como você atualizou o menu nav em todas as páginas, também vai querer enviar de novo as páginas Home e Sobre.

Claro, você também pode continuar trabalhando localmente, em vez de enviar o progresso agora. Você que manda!

A seguir

Ufa, a gente terminou o nosso tour rápido de adicionar um blog com várias tags! A seguir, a gente reduz o ritmo e foca na estrutura da página, adicionando uma página de currículo que você pode compartilhar com empregadores em potencial.

Adicionar um currículo (ou CV)

Nos capítulos anteriores, a gente aprendeu a colocar vários tipos de conteúdo nas páginas HTML. Agora vamos ver como dar estrutura a uma página grande. Vamos adicionar uma página de currículo (CV).

Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um curriculum vitae. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho.

Não se preocupe se você ainda não tem muita experiência. Dá para criar seções falando da sua formação: diplomas, matérias e atividades da escola. Ou você pode focar em trabalhos de meio período ou no voluntariado.

Outra opção é deixar menos “currículo” e mais portfólio de projetos, se isso fizer mais sentido para você. Inclua habilidades que você já tem (tipo HTML!). Pesquise dicas de currículo na web. A internet está cheia de conselhos para gente em fases diferentes da carreira.

Mas se currículo não é a sua praia, tudo bem. Pegue as ideias de marcação que a gente explora aqui e use do jeito que quiser. O site é seu. É importante que você goste de fazê-lo.

Criar o arquivo do currículo

Crie um arquivo na raiz do site, resume.html, e copie o conteúdo de uma das outras páginas principais para dentro dele.

Do jeito que você criar o arquivo, lembre de atualizar o <title>, o <h1> e o <nav>. Eu vou colocar o meu nome no <h1> e a profissão (ou um resumo) logo abaixo, em uma tag <p>.

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="blog/index.html">Blog</a>
    <a href="about.html">About</a>
    <a href="resume.html" aria-current="page">Resume</a>
  </nav>

  <h1>Blake Watson</h1>
  <p><em>Experienced Frontend Engineer</em></p>
</header>

Um documento com seções

Um currículo quase sempre se divide em seções. As mais comuns são experiência, formação e habilidades. O HTML tem uma ferramenta para criar uma seção genérica de um documento: a tag <section>. Cada seção deve ter um título, segundo a documentação.

Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag <section> para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas.

Eu vou criar as seções abaixo. Mas lembre: você pode ter mais ou menos, conforme precisar. Elas não precisam ser iguais às minhas, nem na mesma ordem.

• Habilidades
• Experiência
• Projetos selecionados
• Formação

Habilidades

Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um <section>.

<section>
  <h2>Skills</h2>

  <ul>
    <li>HTML / CSS</li>
    <li>JavaScript</li>
    <li>Web standards / accessibility</li>
    <li>TypeScript</li>
    <li>Vue</li>
    <li>PHP</li>
    <li>Sass</li>
    <li>Electron</li>
    <li>Sketch</li>
  </ul>
</section>

Isso aparece assim na tela.

É uma lista limpa, com marcadores. Dito isso, eu sinto que sobra um pouco de espaço. Seria legal dividir em colunas. Não existe um jeito estritamente HTML de fazer isso. Mas vale usar um pouquinho de CSS para resolver.

Você já viu várias tags usando atributos. Cada página do nosso site tem links com a tag <a>, e cada link tem um atributo href, por exemplo. Outro atributo bem útil é o style. Ele deixa a gente aplicar CSS direto em um elemento HTML. Eu falo mais de CSS nos capítulos bônus no fim deste livro. Por agora, vamos usar o atributo style para dividir a lista em colunas.

<section>
  <h2>Skills</h2>

  <ul style="columns: 2">
    <li>HTML / CSS</li>
    <li>JavaScript</li>
    <li>Web standards / accessibility</li>
    <li>TypeScript</li>
    <li>Vue</li>
    <li>PHP</li>
    <li>Sass</li>
    <li>Electron</li>
    <li>Sketch</li>
  </ul>
</section>

Assim a lista fica mais agradável e aproveita melhor o espaço.

Experiência

Eu não sou especialista em currículo. Mas acho que vou colocar a experiência de trabalho em seguida. É provavelmente o que um empregador da minha área mais quer ver. Isso muda se você não tem muita experiência, ou se acha que formação ou outras qualificações pesam mais.

Marcar conteúdo é tanto arte quanto ciência. Não existe um único jeito certo. Um bom princípio para escolher as tags é este: a escolha precisa ter significado. Não vale escolher só pela aparência.

Por exemplo: você pode ficar tentado a usar um <h6> em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, <h6> não é a melhor escolha.

Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação.

<section>
  <h2>Experience</h2>

  <h3>Frontend Engineer</h3>

  <p>
    <strong>MRI Technologies</strong><br>
    <time datetime="2019-08">August 2019</time>&ndash;Present
  </p>

  <ul>
    <li>Build and maintain a spacesuit management app for NASA</li>
    <li>
      Build and maintain a document management system for Collins Aerospace
    </li>
    <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li>
  </ul>

  <!-- ...the rest of the jobs go here -->
</section>

Isso nos dá uma seção com esta cara.

Eu vou listar vários cargos que já tive. Por isso uso o nome do cargo como título (nível 3, porque ele fica abaixo do título de nível 2 Experience). Em seguida, quero mostrar o empregador e o período. Escolhi um único parágrafo para juntar as duas coisas. Uso uma quebra de linha manual para jogar o período para a segunda linha.

Outro jeito é colocar o nome do empregador no título, depois do cargo. Eu não acho que um jeito seja mais “certo” que o outro. Eu só prefiro reduzir a quantidade de texto grande na página.

A gente envolve a data numa tag <time> e coloca a data no formato que o computador entende no atributo datetime. Eu uso uma entidade HTML, –, para colocar um traço entre a data de início e a de fim. Isso usa o caractere en dash (um traço um pouco mais longo que o hífen comum, -). Na tipografia, ele serve para intervalos numéricos.

Por fim, eu uso uma lista sem ordem para os tópicos sobre o cargo e as responsabilidades.

Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode ver o currículo de demonstração e olhar o código-fonte.

Projetos selecionados

Na próxima seção, eu quero destacar alguns projetos em que trabalhei. É a versão currículo de um portfólio: um lugar para mostrar sites que eu fiz e, quando der, linkar para eles. Currículos impressos costumam ser só texto. Mas isto é uma página da web. Você pode colocar uma imagem ou duas nesta seção.

Nesses projetos, vou usar a tag <h3> para o título do projeto e um parágrafo de descrição junto. Se o projeto está no ar, eu coloco o link. Aqui vai um exemplo.

<section>
  <h2>Selected projects</h2>

  <h3>Mississippi Gulf Coast Community College</h3>

  <p>
    I worked on this website in my role as designer and developer at Mad Genius. I built out several of the dynamic, data-intensive sections like the searchable course catalog and the comprrehensive "A to Z" index. These sections made heavy use of reactive UI, third-party API integrations, and custom WordPress plugin development.
  </p>

  <p><a href="https://mgccc.edu/">mgccc.edu</a></p>

  <!-- ...the rest of the projects go here -->
</section>

Formação

Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com <strong> para ênfase e <br> para quebras de linha manuais.

<section>
  <h2>Education</h2>

  <p>
    <strong>Master of Business Administration</strong>, <time>2009</time><br>
    <em>Mississippi State University, Starkville, MS</em>
  </p>

  <p>
    <strong>Bachelor of Business Admiinistration</strong>, Information Systems,
    <time>2007</time><br>
    <em>Mississippi State University, Starkville, MS</em>
  </p>
</section>

Exemplo completo

Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal.

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="blog/index.html">Blog</a>
    <a href="about.html">About</a>
    <a href="resume.html" aria-current="page">Resume</a>
  </nav>

  <h1>Blake Watson</h1>
  <p><em>Experienced Frontend Engineer</em></p>
</header>

<main>
  <section>
    <h2>Skills</h2>

    <ul style="columns: 2">
      <li>HTML / CSS</li>
      <li>JavaScript</li>
      <li>Web standards / a11y</li>
      <li>TypeScript</li>
      <li>Vue</li>
      <li>PHP</li>
      <li>Sass</li>
      <li>Electron</li>
      <li>Sketch</li>
    </ul>
  </section>

  <section>
    <h2>Experience</h2>

    <h3>Frontend Engineer</h3>

    <p>
      <strong>MRI Technologies</strong><br>
      <time datetime="2019-08">August 2019</time>&ndash;Present
    </p>

    <ul>
      <li>Build and maintain a spacesuit management app for NASA</li>
      <li>Build and maintain a document management system for Collins Aerospace</li>
      <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li>
    </ul>

    <h3>Web Developer/Interactive Designer</h3>

    <p>
      <strong>Mad Genius</strong><br>
      <time datetime="2015-05">May 2015</time>&ndash;<time datetime="2019-08">August 2019</time>
    </p>

    <ul>
      <li>Sketching, prototyping, and UI design</li>
      <li>WordPress theme and plugin development</li>
      <li>Reactive UI with Vue and Knockout</li>
      <li>Third-party API integrations</li>
    </ul>

    <h3>Web Developer</h3>

    <p>
      <strong>Self employed</strong><br>
      <time>2007</time>&ndash;<time>2015</time>
    </p>

    <ul>
      <li>Communicated with clients</li>
      <li>Developed usable, standards-based websites</li>
      <li>Made responsive websites</li>
      <li>Volunteered on many non-profit projects</li>
    </ul>
  </section>

  <section>
    <h2>Education</h2>

    <p>
      <strong>Master of Business Administration</strong>, <time>2009</time><br>
      <em>Mississippi State University, Starkville, MS</em>
    </p>

    <p>
      <strong>Bachelor of Business Admiinistration</strong>, Information Systems, <time>2007</time><br>
      <em>Mississippi State University, Starkville, MS</em>
    </p>
  </section>
</main>

Você pode ver o resultado no site de demonstração. Mas aqui vai uma captura da página inteira.

A seguir

A gente tem criado muito conteúdo. No próximo capítulo, vamos fazer um intervalo e ver como rodar um servidor web no computador. Ele deixa o teste do site mais parecido com um site de verdade, no ar.

Intervalo: instalar um servidor local

HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar.

Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos.

O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade.

Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um servidor web local é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet.

Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs.

URLs relativas e URLs absolutas

Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe .. para “subir” um nível e achar a página de destino.

Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o nível mais alto é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim.

<a href="/">Go to the homepage</a>

A barra representa o nível mais alto (eu também poderia ter escrito /index.html, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página about.html, faria assim.

<a href="/about.html">Go to the About page</a>

O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta.

<!-- imagine we are currently on a blog page /blog/my-post.html-->
<h1>My blog post</h1>

<!-- instead of this, which *does* work -->
<a href="../about.html">About</a>

<!-- we can do this -->
<a href="/about.html">About</a>

A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do computador inteiro. Com certeza não era isso que a gente queria.

Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas.

Opções de servidor web

Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você.

• Visual Studio Code (multiplataforma)
• macOS
• Windows e multiplataforma
• Python e PHP (multiplataforma)

Visual Studio Code (multiplataforma)

A Microsoft publica uma extensão do VS Code chamada Live Preview. Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome.

Depois de instalar, você vai notar a opção Show Preview quando clicar com o botão direito num arquivo.

Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em Open in Browser no menu da barra de endereço.

macOS

Eu uso Mac, então posso recomendar de coração o ótimo aplicativo WorldWideWeb. É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças.

O funcionamento é assim: você aponta a pasta do site e clica no botão de play.

Quando você clica no play, o site fica disponível em algum endereço. Clique em Open Browser para abrir essa URL no navegador padrão.

E agora olha só: a gente está vendo o site no nosso endereço novinho em folha.

Windows e multiplataforma

Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft.

Caso contrário, experimente o Simple Web Server. Depois de instalar, clique no botão para criar um servidor novo.

Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa.

Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão.

Python e PHP (multiplataforma)

Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal.

Python

Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à página de downloads do Python e baixe o instalador do seu sistema (pegue a versão 3).

Abra uma janela do terminal e use cd para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python.

python3 -m http.server

Isso deixa o site disponível em localhost, na porta que ele indicar (em geral 8000). Então o endereço do site fica http://localhost:8000.

PHP

Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, o PHP é útil para reutilizar pedaços de HTML (tipo o menu de navegação) em várias páginas.

Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python.

php -S localhost:8000

Isso deixa o site disponível em http://localhost:8000.

A seguir

Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!

Adicionar uma página divertida

Beleza, hora de se divertir! Bom, espero que tudo até aqui tenha sido divertido. Ainda assim, quero te mostrar mais algumas coisas que o HTML sabe fazer. Eu guardei esta página por último porque vamos usar algumas das tags HTML mais complexas.

Criar o arquivo

Vamos criar o fun.html na raiz da pasta do site. Use o conteúdo da página inicial como ponto de partida. Depois mude o <title> e o <h1> para Fun ou algo parecido. Esvazie o conteúdo da tag <main>.

Agora vamos dividir esta página em várias seções, no mesmo espírito do currículo.

Piadas

Primeiro, vamos adicionar uma seção de piadas.

<section>
  <h2>Jokes</h2>

  ...Jokes will go here
</section>

A ideia é mostrar a abertura da piada e esconder a punchline atrás de um clique. Você pode ver a versão ao vivo aqui. Vamos usar os elementos <details> e <summary> para esse comportamento. Eles funcionam assim.

<details>
  <summary>This content will show up by default</summary>

  <p>
    Clicking the above content will cause this hidden content to become visible.
  </p>
</details>

Aqui vai um vídeo deste elemento em ação.

Eu vou adicionar três piadas, admito, bem cafonas.

<section>
  <h2>Jokes</h2>

  <details>
    <summary>Why wouldn’t the skeleton cross the road?</summary>
    <p>It didn't have the guts.</p>
  </details>

  <details>
    <summary>Why was the math book sad?</summary>
    <p>It had too many problems.</p>
  </details>

  <details>
    <summary>Why don't scientists trust atoms?</summary>
    <p>Because they make up everything!</p>
  </details>
</section>

É um exemplo bobo. Mas os elementos <details>/<summary> ajudam sempre que você quer facilitar a leitura por cima, e deixar a pessoa aprofundar só onde quiser. Por exemplo, numa lista de perguntas frequentes (FAQ).

Usar tabelas para jogos de mesa

Agora vamos aproveitar a tabela HTML. A tag <table> e as tags ligadas a ela nos dão jeitos poderosos de mostrar informação. Para aprender, vamos criar uma tabela pequena. Mas, se você precisar mostrar muitos dados tabulares, veja a página da MDN sobre tabelas.

Em RPGs de mesa como Dungeons and Dragons, o mestre muitas vezes precisa improvisar encontros para o grupo. Um jeito de fazer isso é usar uma tabela aleatória. É uma tabela que casa o resultado dos dados com itens, criaturas ou eventos. Vamos fazer uma tabela com oito encontros possíveis que o grupo pode achar. O mestre joga um dado de oito lados e usa o encontro correspondente.

É assim que a tabela final vai ficar.

Primeiro, vou criar um <section> novo, com um título e um texto de introdução sobre D&D. Depois, apresento em poucas palavras a tabela de encontro aleatório.

<section>
  <h2>D&D stuff</h2>

  <p>
    Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures.
  </p>

  <h3>Random encounter table</h3>

  <p>
    This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
  </p>

  ...The table will go here
</section>

A gente usa a tag <table> para criar uma tabela. Uma tabela pode ter uma seção de cabeçalho e uma seção de corpo.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

A tabela precisa de duas colunas: uma para o resultado do dado e outra para o encontro correspondente. Vamos criar uma linha de tabela dentro do <thead>. Eu preencho o cabeçalho e depois explico.

<table>
  <thead>
    <tr>
      <th>Roll (1d8)</th>
      <th>Encounter</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

A tag <tr> cria uma linha de tabela (table row). Dentro dessa linha, vamos adicionar duas células. Como elas são títulos de coluna, usamos a tag de cabeçalho de tabela (table header), ou <th>: uma para o dado e outra para o resultado. Até aqui, fica assim.

Em seguida, a gente preenche a tabela com a tag de célula de dados (table data cell), ou <td>. Essas linhas vão dentro da seção do corpo.

<table>
  <thead>
    <tr>
      <th>Roll (1d8)</th>
      <th>Encounter</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Band of Goblins</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Wandering Merchant</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Group of Bandits</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Pack of Wolves</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Travelling Minstrels</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Lost Child</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Hidden Trap</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Old Hermit</td>
    </tr>
  </tbody>
</table>

São muitas tags! Espero que a lógica esteja clara. Dentro do <tbody>, a gente cria oito linhas de tabela, cada uma com duas células de dados. E isso nos dá a tabela final.

Tabelas HTML também sabem fazer algumas coisas de planilha, tipo uma célula ocupar várias colunas. Não vamos entrar nisso aqui. Só lembre: tabelas têm poder, se você precisar.

Vídeo embutido

Por último, mas não menos importante, vamos dar um tempero na página Fun! com alguns vídeos. Eu vou de clima synthwave. É claro que você pode pegar os vídeos do YouTube que quiser. Alguns canais não deixam o vídeo ser embutido em outros sites. Vale ter isso em mente.

Vou criar uma seção nova para os meus vídeos.

<section>
  <h2>Synthwave mixes</h2>

  ...videos will go here
</section>

Primeiro, vou pegar este mix chamado Waves (https://www.youtube.com/watch?v=b6toYA0W4IA). Se você abrir essa página, vai ver um botão de compartilhar embaixo do vídeo. Clicar nesse botão mostra várias formas de compartilhar.

Escolha “Embed”, se estiver disponível. Quando fizer isso, você vai ver um código HTML e um botão Copy. Copie o código. Você pode colar o código depois da tag <h2>.

<section>
  <h2>Synthwave mixes</h2>

  <iframe>
    width="560"
    height="315"
    src="https://www.youtube.com/embed/b6toYA0W4IA?si=-Iu68cVS5E08st5O"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</section>

Esse embed usa a tag <iframe>. Eu não vou entrar em detalhes sobre esse elemento. Em resumo, ele serve para mostrar uma página da web dentro de outra página da web. Mas, quando eu recarrego a página, aparece este erro: “Video unavailable”. Por quê?

É porque o meu site ainda está aberto como arquivo. A gente precisa buscar dados de outro site (o YouTube). Mas os recursos de segurança do navegador impedem isso.

Rodar o nosso servidor web local

Sem pânico! Foi por isso que a gente instalou um servidor web local no capítulo anterior — aquele programinha no computador que finge ser a internet, para testar o site. Se você ainda não fez isso, inicie o servidor pelo método que você escolheu no capítulo anterior.

Neste exemplo, eu vou usar o WorldWideWeb. Quando eu aponto para a pasta do site e clico no play, o servidor sobe. Aí eu visito o endereço que ele mostra.

Confira a barra de endereço do navegador. Garanta que você está na versão do servidor web, e não no arquivo aberto direto.

Demais! Vou pegar mais dois vídeos.

• https://youtu.be/rDfS8B2-Mt4
• https://youtu.be/yb0DR_qRetA

Vou fazer com eles o mesmo que fiz com o primeiro. Abro a página do vídeo, clico em Share, depois em Embed, e copio o código. Cole o código de cada vídeo abaixo do primeiro.

Então eu embuti os vídeos. Mas agora notei outra coisa. Seria legal se esses vídeos ocupassem a largura da página. Também vamos ver como o site fica num celular.

Se eu vejo o site no modo de design responsivo do Safari e estreito a área visível, os vídeos embutidos escapam pelo lado direito da página. Não é o ideal.

Existem vários jeitos de consertar isso. A gente vai usar uma solução de terceiros.

Tags HTML personalizadas

O HTML deixa a gente criar as próprias tags. Elas se chamam tags HTML personalizadas. O nome técnico disso é Web Components. Em geral, elas misturam HTML, CSS e JavaScript para definir a cara e o comportamento do componente. Criar os nossos próprios Web Components foge do recorte deste livro. E tudo bem. A gente não precisa criar um. Dá para usar tags HTML personalizadas que outras pessoas já fizeram.

Vamos usar o Lite YouTube Embed. Leia sobre o que ele sabe fazer, se quiser. Para a gente, o objetivo é só instalar e ter um vídeo na largura inteira, que diminui direito no celular.

Antes de ver como instalar este componente, vamos ver como usá-lo. Ele oferece uma tag HTML personalizada nova, <lite-youtube>. Você dá a ela um atributo videoid, que é o ID do vídeo do YouTube. Dá para achar o ID na URL. Esta é a minha URL:

https://www.youtube.com/watch?v=b6toYA0W4IA
                                |_________|
                                 video id

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>

Bem mais limpo que o <iframe>!

Ok, vamos instalar. Precisamos de dois arquivos: um arquivo JavaScript e um arquivo CSS. Quem fez o componente disponibiliza esses arquivos. Juntos, eles têm todo o código que faz o componente parecer e funcionar direito. Vou te dar o link direto dos dois. Salve o arquivo CSS na pasta css do seu site. Depois, crie uma pasta js para o arquivo JavaScript.

• Arquivo JS: https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js
• Arquivo CSS: https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css

Abra cada um desses links e use File > Save Page As… (Ctrl+S no Windows, Command+S no macOS). Quando os arquivos estiverem salvos, adicione-os na seção <head> da página. Deve ficar assim.

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

  <link rel="stylesheet" href="css/simple.css">
  <link rel="stylesheet" href="css/lite-yt-embed.min.css">
  <script src="js/lite-yt-embed.min.js"></script>
</head>

Primeiro, a gente adiciona o arquivo CSS (a ordem não importa). A gente o traz do mesmo jeito que trouxe o Simple.css, com a tag <link>. Também vamos trazer o código JavaScript. Para isso, usamos a tag <script>. Ela recebe um atributo src, que é o caminho do arquivo.

Com esses dois arquivos no lugar, a gente pode usar o componente novo. Voltando ao exemplo. Digamos que a gente tem esta URL do YouTube:

https://www.youtube.com/watch?v=b6toYA0W4IA

A gente precisa tirar o ID desta URL. Numa URL do YouTube, o ID é a parte que vem depois de v=. Neste caso, é b6toYA0W4IA. Então a gente embute o vídeo com a sintaxe abaixo.

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>

Vou fazer os outros dois vídeos do mesmo jeito.

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>

<lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube>

<lite-youtube videoid="yb0DR_qRetA"></lite-youtube>

Está ficando bom!

Vou adicionar algumas linhas horizontais para separar esses vídeos.

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>
<hr>
<lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube>
<hr>
<lite-youtube videoid="yb0DR_qRetA"></lite-youtube>

E vamos ver como eles ficam no tamanho de celular.

Ótimo!

Exemplo completo do código

Para ver esta página funcionando, confira a demonstração ao vivo. Aqui está o código completo da página Fun!.

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

    <link rel="stylesheet" href="css/simple.css">
    <link rel="stylesheet" href="css/lite-yt-embed.min.css">
    <script src="js/lite-yt-embed.min.js"></script>
  </head>

  <body>
    <header>
      <nav>
        <a href="index.html">Home</a>
        <a href="blog/index.html">Blog</a>
        <a href="about.html">About</a>
        <a href="resume.html">Resume</a>
        <a href="fun.html" aria-current="page">Fun</a>
      </nav>

      <h1>Fun</h1>
    </header>

    <main>
      <section>
        <h2>Jokes</h2>

        <details>
          <summary>Why wouldn't the skeleton cross the road?</summary>
          <p>It didn't have the guts.</p>
        </details>

        <details>
          <summary>Why was the math book sad?</summary>
          <p>It had too many problems.</p>
        </details>

        <details>
          <summary>Why don't scientists trust atoms?</summary>
          <p>Because they make up everything!</p>
        </details>
      </section>

      <section>
        <h2>D&D stuff</h2>

        <p>
          Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures.
        </p>

        <h3>Random encounter table</h3>

        <p>
          This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
        </p>

        <table>
          <thead>
            <tr>
              <th>Roll (1d8)</th>
              <th>Encounter</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Band of Goblins</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Wandering Merchant</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Group of Bandits</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Pack of Wolves</td>
            </tr>
            <tr>
              <td>5</td>
              <td>Travelling Minstrels</td>
            </tr>
            <tr>
              <td>6</td>
              <td>Lost Child</td>
            </tr>
            <tr>
              <td>7</td>
              <td>Hidden Trap</td>
            </tr>
            <tr>
              <td>8</td>
              <td>Old Hermit</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>Synthwave mixes</h2>

        <lite-youtube videoid="b6toYA0W4IA"></lite-youtube>
        <hr>
        <lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube>
        <hr>
        <lite-youtube videoid="yb0DR_qRetA"></lite-youtube>
      </section>
    </main>

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

Publicar o site

Você conseguiu! Com esta página pronta, você terminou o livro principal. Seguindo os mesmos passos dos capítulos anteriores, atualize o seu site no Neocities com esta página nova. Lembre de atualizar o menu de navegação em todas as outras páginas.

A seguir

Em seguida, a gente vai comemorar o que conquistou. E eu te aponto mais materiais de estudo, inclusive os capítulos bônus deste site.

Conquista desbloqueada: Hipertextista

Parabéns — você fez um site de verdade usando HTML! O que começou como uma frase ou duas no Bloco de Notas virou um site completo, com várias páginas. Você aprendeu um monte de coisa:

• Criar páginas HTML
• Estruturar conteúdo com títulos e seções
• Ligar uma página à outra
• Formatar texto
• Citar texto com citações em bloco
• Mostrar dados com tabelas
• Esconder conteúdo atrás de um resumo clicável
• Criar conteúdo secundário com asides
• Incorporar imagens
• Incorporar vídeo
• Usar web components de terceiros
• Colocar um site na internet
• …e ainda mais!

Espero que você se sinta capaz de criar seus próprios sites. Mas, mesmo que você não vá fazer sites do zero, conhecer HTML ajuda. Muitos sistemas de gerenciamento de conteúdo deixam você colocar HTML personalizado numa página. Só saber usar a tag <a> para criar um link já é um superpoderzinho.

Então, para onde agora?

Capítulos bônus

Terminamos o conteúdo principal que eu queria cobrir em HTML e Pessoas. Dito isso, tenho alguns assuntos que quero aprofundar como um apêndice do livro.

• Personalizar o Simple.css. Mesmo sem aprender muito CSS, você pode mudar a aparência do seu site Simple sobrescrevendo algumas variáveis.
• Básico de CSS. Esta missão extra ensina a fazer uma página bem desenhada do zero, usando CSS.
• HTML reutilizável com PHP. Vamos ver como reutilizar pedaços de HTML — como um menu de navegação — usando includes do PHP. É uma introdução bem leve a sites dinâmicos.

Recursos deste livro

Eu fui espalhando uns links pelo caminho, apontando para demos e documentação. Para facilitar, aqui está uma lista dos principais.

• Demo da Homepage do Blake. Esta é a minha versão do site que este livro ensina você a fazer. Se você acompanhou e fez o seu próprio site, eu adoraria saber.
• Código-fonte da Homepage do Blake. Este é o repositório de código do site de demonstração. Aqui você pode navegar por todo o código e baixá-lo, se quiser.
• Homepage do Blake, versão PHP. Esta é outra versão do código-fonte, em que eu converti o site para PHP, como descrito no capítulo bônus HTML reutilizável com PHP.
• Demo Planets of the Solar System. Esta é a demo da página que vamos construir no capítulo bônus Básico de CSS.
• Código-fonte de Planets of the Solar System. Este é o repositório de código dessa página.

Recursos e documentação úteis

• MDN. Se você precisa de detalhes sobre uma tag HTML específica, uma propriedade CSS ou outra informação técnica pontual, este é o melhor lugar. O MDN é mais ou menos o manual oficial de quem faz sites.
• Neocities e perguntas frequentes do Neocities. Eu escolhi este serviço de hospedagem no livro porque é grátis e tem um espírito parecido (criação de sites pensada em pessoas). As perguntas frequentes têm muita informação boa e uma visão do serviço, se você quiser saber mais.
• Tutoriais do Neocities: Uma lista de tutoriais e recursos publicados pelo Neocities. Dê uma olhada no curso de HTML excelente deles.
• Simple.css. Este é o framework CSS que usamos ao longo do livro. O site tem documentação de como usar o Simple.css e uma demo de vários elementos HTML.
• Butterick’s Practical Typography. Um livro excelente sobre tipografia e design. Se você tem pouco tempo, veja Typography in ten minutes.
• EntityCode. Aqui vai uma referência de entidades HTML que você pode usar para reproduzir caracteres especiais e símbolos.
• Verificador de contraste do Coolors. Uma ferramenta boa para garantir que as cores do texto e do fundo tenham contraste suficiente para a leitura.

Hospedagens para sites estáticos

Além do Neocities, existem outras boas opções para hospedar seus sites HTML.

• Yay.boo: Nome bobo, publicação de site realmente fácil. Você arrasta e solta uma pasta, escolhe um nome, e o site está no ar. O plano grátis coloca um link yay.boo no cantinho do site.
• Glitch: Esta é uma boa opção se você quiser programar tudo direto no navegador. Monta, depois publica. O Glitch encerrou a hospedagem de apps em 2025.
• CodePen: O CodePen é a alternativa ao Glitch mais amigável para iniciantes que eu conheço. A diferença é que um Pen é uma página só, e não vários arquivos que formam um site inteiro. Se você optar pelo CodePen Pro, porém, pode acessar Projects, que deixam você montar um site com várias páginas no navegador.
• Netlify: Mais sofisticado, mas tem um recurso de arrastar e soltar uma pasta para publicar e oferece mais funções voltadas para quem desenvolve.

Alternativas de editor de código

Eu usei o Visual Studio Code como editor de código ao longo deste livro. E por um bom motivo — é grátis e enormemente popular. Mas não é o único editor por aí.

Eu uso um Mac, então não conheço tanto os editores de outros sistemas. Mas sei de alguns que você deveria conhecer e avaliar. Alguns são grátis, alguns são pagos, e alguns são as duas coisas.

• Sublime Text: Multiplataforma, com teste grátis ilimitado (de vez em quando ele cobra para você pagar). O Sublime Text foi o padrão no desenvolvimento web até o VS Code assumir o trono. Ainda é muito bom. Super rápido e leve. O sistema de plugins/extensões é mais difícil de usar, mas você pode não precisar de nenhum se for fazer HTML/CSS básico, porque o suporte a isso já vem pronto.
• WebStorm: Um dos vários IDEs (ambientes de desenvolvimento integrado) pagos (grátis para uso não comercial) da JetBrains. É multiplataforma e tem um monte de recursos. É caro, mas tem 30 dias de teste grátis. As pessoas adoram. Eu não usei muito, então não tenho muito o que dizer, além de que a reputação é sólida.
• Zed: Multiplataforma (Mac e Linux, com Windows “em breve”) e grátis. Este parece uma mistura de VS Code e Sublime Text, e tem bastante hype no momento em que eu escrevo isto.
• Nova: Só para Mac e pago (mas com teste grátis). É a sequência do Coda, um editor de web amado no Mac, do mesmo desenvolvedor (Panic). Os apps da Panic são sempre ótimos, então dê uma olhada no Nova se você usa Mac.
• NotePad++: Editor grátis e de código aberto para Windows. Não tenho muito o que dizer, além de que ele existe há muito tempo.
• BBEdit: Um dos apps mais antigos do Mac que ainda é desenvolvido de fato. O BBEdit é pago, mas tem teste grátis e um modo grátis para sempre, que limita você a um conjunto específico de recursos.
• Glitch: Sim, é o mesmo listado acima em hospedagens. O Glitch é uma boa opção se você quiser trabalhar “na nuvem”. Ele oferece uma interface na web para fazer sites, incluindo criar arquivos e editar código. Tudo fica no navegador, o que é uma boa opção se você não quiser baixar e instalar coisas no computador.
• Muitos, muitos outros. São demais para listar. Mas, se nenhum destes te agradar, busque no seu mecanismo de busca favorito e se prepare para a enxurrada de resultados.

A seguir

Personalizar o Simple.css

O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado propriedades personalizadas (muitas vezes chamadas de variáveis). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.

Uma espiada no Simple.css

Vamos abrir o arquivo simple.css que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte.

/* Global variables. */
:root,
::backdrop {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir,
    'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica,
    'Helvetica Neue', sans-serif;
  --mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --standard-border-radius: 5px;

  /* Default (light) theme */
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898ea4;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}

Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.

No CSS, o navegador ignora o texto entre /* e */. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de comentários. Neste caso, os comentários ajudam a separar o código em grupos relacionados.

O trecho que diz :root significa que o bloco de código a seguir — a parte entre as chaves, {} — vale para a página inteira. Ignore o ::backdrop por enquanto.

Dentro das chaves, encontramos uma lista de propriedades. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos columns: 2 na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, columns é uma propriedade e 2 é um valor.

Qualquer propriedade que começa com -- é uma propriedade personalizada, ou variável. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável --accent: blue, poderíamos usar a cor --accent em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos red, poderíamos atualizar num lugar só — escrevendo --accent: red — e todo elemento que usa a variável --accent seria atualizado sozinho.

Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”.

Vamos falar de fontes depois. Primeiro, as cores.

Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos.

Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do simple.css? Você poderia fazer isso; funcionaria. Mas existe um jeito melhor.

Criar uma folha de estilo personalizada

CSS significa Cascading Style Sheets (folhas de estilo em cascata). Essa parte da cascata é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe depois do simple.css, as regras que escrevermos ali vão prevalecer. Então não estamos mudando o simple.css. Estamos sobrescrevendo ele.

Crie um arquivo na pasta assets/css chamado custom.css.

Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo index.html do nível mais alto. Na seção <head>, já estamos referenciando o simple.css com uma tag <link>. Vamos fazer o mesmo para o nosso novo arquivo custom.css, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele.

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

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

Agora vamos adicionar algumas sobrescritas. No arquivo custom.css, primeiro vamos montar um bloco :root parecido com o do simple.css. Depois pegamos uma das variáveis, digamos --bg (a cor de fundo), e definimos como red.

:root {
  --bg: red;
}

Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma ferramenta de escolha de cores na web, usar uma das muitas cores nomeadas do CSS ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.

Mas, antes de escolher cores, vamos falar do modo escuro.

Modo escuro

O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo simple.css, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --accent-hover: #ffe099;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #ccc;
    --disabled: #111;
  }
  /* Add a bit of transparency so light media isn't so glaring in dark mode */
  img,
  video {
    opacity: 0.8;
  }
}

Este bloco usa um recurso do CSS chamado media queries. Neste caso, a regra @media diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.

A primeira regra define o esquema de cores padrão como escuro e depois redefine as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”.

Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do simple.css para o seu custom.css e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa.

Um exemplo de personalização

Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana.

Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato rgb aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.

Este é o código que eu coloquei no meu custom.css.

:root {
  --bg: mintcream;
  --border: darkslategray;
  --accent-bg: honeydew;
  --text: darkslategray;
  --accent: mediumvioletred;
  --accent-hover: mediumvioletred;
  --marked: mediumspringgreen;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: rgb(17, 18, 18);
    --border: rgb(80, 90, 90);
    --accent-bg: rgb(35, 35, 36);
    --text: ghostwhite;
    --accent: lightskyblue;
    --accent-hover: lightblue;
    --marked: gold;
  }
}

Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.

Escolher cores acessíveis

Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo.

Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um verificador de contraste como este. Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.

Mudar a fonte

Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no simple.css. Uma delas, --sans-font, é responsável pela maior parte do texto da página (a outra, --mono-font, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).

Se você não conhece, fontes sans-serif são aquelas que não têm serifa, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável --sans-font para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.

Primeiro, vamos falar de fontes na web.

Fontes na web

Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, você vai ver essa fonte na página. Mas quem visita vai ver uma alternativa (fallback), a menos que essa pessoa também tenha a fonte instalada.

É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante.

body {
  /* the first font needs quotes because the name includes spaces */
  font-family: "Some Rando Font", Georgia, serif;
}

A regra de estilo acima define a fonte do <body>. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se essa também não estiver, dissemos ao navegador para usar a fonte serif padrão que ele tiver.

Aqui vai uma boa referência para encontrar fontes comuns nos aparelhos das pessoas e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.

Às vezes, você tem uma fonte que realmente quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se fontes da web (web fonts). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, Básico de CSS. Em resumo, é um método de fornecer a fonte automaticamente a quem visita.

Sobrescrever a variável da fonte

Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de --sans-font, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.

Podemos sobrescrever a variável --sans-font do Simple dentro do bloco :root, para que valha para a página inteira.

:root {
  --sans-font: Georgia, "Times New Roman", serif;
  --bg: mintcream;
  --border: darkslategray;
  --accent-bg: honeydew;
  --text: darkslategray;
  --accent: mediumvioletred;
  --accent-hover: mediumvioletred;
  --marked: mediumspringgreen;
}

Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços.

Usamos uma palavra-chave do CSS, serif, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são sans-serif, monospace e cursive, entre outras

Aqui vai um dos posts do blog composto em Georgia.

Deixe com a sua cara

Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas.

Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos.

A seguir

Básico de CSS

Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita.

Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui.

Apresentando os planetas do sistema solar

Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar.

Você pode ver o código-fonte no navegador, com o comando de ver o código-fonte, ou conferindo o código no GitHub. E você pode ver o resultado final aqui, se quiser uma espiada do que vai ficar.

Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei).

Ponto de partida

Eu fiz um index.html e coloquei o código a seguir. Ele assume que você tem um styles.css no mesmo diretório. Também assume que você tem uma imagem, PIA06193~large.jpg, no mesmo diretório. Você pode pegar esta imagem no site da NASA.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Planets of the Solar System</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Planets of the Solar System</h1>

      <p class="intro"><span class="caps">Our solar system</span> is a vast and fascinating place, consisting of the Sun and the various celestial bodies that orbit it, including eight major planets. Each planet offers unique characteristics and features. In this article, we will explore the distinctive attributes of each planet, providing an overview of what makes them unique (and learn a little <abbr title="Cascading style sheets">CSS</abbr> while doing it).</p>

      <h2>Mercury</h2>
      <p>
        Mercury is the closest planet to the Sun and the smallest planet in our
        solar system. It has a very thin atmosphere and its surface is covered
        with craters.
      </p>

      <h2>Venus</h2>
      <p>
        Venus is the second planet from the Sun and is known for its thick,
        toxic atmosphere and extreme surface temperatures. It's often called
        Earth's "sister planet" because of their similar size and composition.
      </p>

      <h2>Earth</h2>
      <p>
        Earth is the third planet from the Sun and the only known planet to
        support life. It has a diverse climate and surface, with large bodies of
        water, mountains, and forests.
      </p>
      <blockquote>
        <p>
          The Earth is a very small stage in a vast cosmic arena. Think of the
          rivers of blood spilled by all those generals and emperors so that in
          glory and triumph they could become the momentary masters of a
          fraction of a dot.
        </p>
        <cite>— Carl Sagan</cite>
      </blockquote>

      <h2>Mars</h2>
      <p>
        Mars, the fourth planet from the Sun, is often called the "Red Planet"
        due to its reddish appearance. It has the largest volcano and canyon in
        the solar system.
      </p>

      <h2>Jupiter</h2>
      <p>
        Jupiter is the fifth planet from the Sun and the largest in the solar
        system. It has a Great Red Spot, which is a giant storm, and dozens of
        moons.
      </p>

      <h2>Saturn</h2>
      <p>
        Saturn, the sixth planet from the Sun, is famous for its extensive ring
        system. It's the second-largest planet in the solar system.
      </p>

      <figure>
        <img src="PIA06193~large.jpg" alt="This grand mosaic consists of 126 images acquired in a tile-like fashion, covering one end of Saturn's rings to the other and the entire planet in between.">

        <figcaption>
          Source: <a href="https://images.nasa.gov/details/PIA11141">https://images.nasa.gov/details/PIA11141</a>
        </figcaption>
      </figure>

      <h2>Uranus</h2>
      <p>
        Uranus is the seventh planet from the Sun and has a unique blue-green
        color due to methane in its atmosphere. It rotates on its side, making
        it unique among the planets.
      </p>

      <h2>Neptune</h2>
      <p>
        Neptune is the eighth and farthest known planet from the Sun in our
        solar system. It's known for its deep blue color and strong winds, some
        of the fastest in the solar system.
      </p>

      <h2>Additional Resources</h2>
      <p>
        For more information about the planets, visit the
        <a href="https://solarsystem.nasa.gov/planets/overview/"
          >NASA Solar System Exploration</a
        >
        website.
      </p>

      <h2>Other Major Bodies</h2>
      <ul>
        <li>Pluto</li>
        <li>Ceres</li>
        <li>Haumea</li>
        <li>Makemake</li>
        <li>Eris</li>
        <li>Ganymede</li>
        <li>Titan</li>
        <li>Europa</li>
      </ul>

      <h2>Sample Code</h2>
      <pre><code>function getPlanetInfo(planet) {
    const planets = {
        Mercury: 'The smallest planet and closest to the Sun.',
        Venus: 'Known for its thick, toxic atmosphere.',
        Earth: 'The only planet known to support life.',
        Mars: 'The Red Planet with the largest volcano.',
        Jupiter: 'The largest planet with a Great Red Spot.',
        Saturn: 'Famous for its ring system.',
        Uranus: 'Unique for its sideways rotation.',
        Neptune: 'Known for its deep blue color and strong winds.'
    };
    return planets[planet] || 'Planet not found';

}</code></pre>
</main>

    <footer>
      <p>
        A demo website for learning CSS. Part of <a href="https://htmlforpeople.com/">HTML for People</a> by <a href="https://blakewatson.com/">Blake Watson</a>. Check out the <a href="https://github.com/blakewatson/css-basics">source code on GitHub</a>.
      </p>

  </body>
</html>

Como o arquivo styles.css está vazio, só temos os estilos padrão do navegador. É assim que fica:

O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”).

Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que eu acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora.

A tag style

Podemos escrever CSS direto no arquivo index.html usando uma tag HTML especial, <style>. Podemos colocar a tag <style> dentro da seção <head> do arquivo. Assim:

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
    <meta charset="utf-8">

    <style>
      CSS code goes here
    </style>
  </head>

  <body>
    ...
  </body>
</html>

Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag <style> em cada página para ter os mesmos estilos em todas. Em vez disso, é comum colocar todo o CSS num arquivo separado e então ligar esse arquivo a cada página com uma tag <link> na seção <head> do site.

<link rel="stylesheet" href="styles.css">

Primeiros passos para melhorar a página

Se você ainda não fez, crie um arquivo style.css. É aqui que vamos escrever todo o nosso CSS personalizado. Se você não estiver usando o meu HTML de partida, vai precisar adicionar a tag <link> na seção <head> da página para ligar os estilos à página, como descrito acima.

Dá para conquistar ganhos grandes logo de cara, com só algumas linhas de CSS. Por exemplo, um problema é que a página fica larga demais numa janela de navegador no desktop. Linhas longas de texto são difíceis de ler. Vamos corrigir isso dando à página uma largura máxima. Segundo o Butterick’s Practical Typography, devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 caracteres de largura.

main {
  max-width: 65ch;
}

Esta regra CSS mira o elemento <main> da nossa página e instrui ele a nunca passar da largura que declaramos.

Ignorando a imagem gigante de Saturno — com a qual vamos lidar daqui a pouco — já ficou bem melhor. Mas o gosto moderno prefere uma página centralizada, então vamos fazer isso enquanto estamos nisso.

main {
  margin-inline: auto;
  max-width: 65ch;
}

Em idiomas da esquerda para a direita, como o português, margin-inline é a margem horizontal, ou esquerda e direita. Ao definir como auto, estamos dizendo: “não me importa quão larga seja a margem esquerda e a direita, só deixe iguais”. O navegador sabe quão larga queremos a página, então calcula a margem necessária para deixar igual dos dois lados, centralizando a página.

Também temos um elemento <footer> que vive fora do elemento <main>, então vamos estilizá-lo à parte, com a mesma largura e margem.

footer {
  margin-inline: auto;
  max-width: 65ch;
}

E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página.

img {
  max-width: 100%;
}

O max-width pode ser declarado como uma porcentagem do elemento que contém. Definir como 100% significa: “não deixe elementos de imagem ficarem mais largos do que os seus contêineres”.

E agora a nossa página está bem mais agradável.

Anatomia de uma regra CSS

Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres.

img {
  max-width: 100%;
}

O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves ({}). Chama-se seletor, porque seleciona elementos da página para mudar.

A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa propriedade e num valor. Neste caso, há uma declaração. A propriedade é max-width, e o valor é 100%.

Tamanho do texto, altura da linha e espaço entre elementos

O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento html (ou seja, o documento inteiro) e definir font-size e line-height.

html {
  font-size: 20px;
  line-height: 1.45;
}

Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, px. Estou descobrindo agora que 1px equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender.

Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco.

Vou definir o line-height usando um valor sem unidade de 1.45. É um número que fica bonito. Consulte o Butterick’s Practical Typography e o seu próprio olho para achar uma boa altura de linha para a sua fonte específica. Estou usando um número sem unidade em vez de algo como px por causa de como os elementos filhos herdam o valor, mas você não precisa se preocupar demais com isso agora.

Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento <main> usando um seletor universal, o asterisco (*).

main * {
  margin-block-start: 0;
  margin-block-end: 1rem;
  /* or we could use the shortcut syntax like this */
  margin-block: 0 1rem;
}

Um seletor pode ser uma cadeia de coisas. Por exemplo, main p seleciona todo elemento <p> dentro do elemento <main>. Mas eu quero mirar tudo no elemento <main>, então uso o asterisco.

Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com margin-inline, que controla o espaço horizontal ao redor dos elementos, margin-block controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como 0 e a margem abaixo deles como 1rem. O rem é uma unidade igual ao tamanho da fonte do root element (o elemento <html>). Como eu defini o tamanho da fonte raiz como 20px, é isso que o valor de 1rem se torna.

O legal da unidade rem é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa.

O nosso texto está bonito.

Nada contra o Times New Roman, mas ele tem uma cara muito… padrão. Dá para fazer melhor.

Instalar webfonts

Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas fontes de sistema comuns e fontes padrão comuns, temos outra opção para personalizar a fonte. Fontes da web (web fonts) são aquelas disponibilizadas ao serem baixadas junto com o resto do seu site. Além do documento, dos arquivos CSS, dos arquivos JavaScript, das imagens e por aí vai, fontes personalizadas também podem ser baixadas.

Fontes da web precisam estar num formato específico, e ser instaladas de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como Google Fonts (grátis) ou Adobe Fonts (pago). Há várias opções, inclusive hospedar as fontes no seu próprio servidor, ao lado dos outros arquivos do site. Só garanta que a licença da fonte cubra isso.

Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até fonts.google.com. Busque “Oswald” e selecione nos resultados. Depois clique em Get Font.

Depois de selecioná-la, não baixe nada ainda. Busque “source sans”. Source Sans 3 é a versão disponível no momento em que eu escrevo. Selecione e clique em Get Font.

Quando as duas fontes estiverem selecionadas, clique em Get embed code. Estamos procurando o bloco rotulado Embed code in the <head> of your html.

Copie e cole o código de incorporação na seção <head> do seu site.

<head>
  <meta charset="UTF-8">
  <title>Planets of the Solar System</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

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

Adicione uma declaração font-family ao bloco html para conferir se está funcionando.

html {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 20px;
  line-height: 1.45;
}

Isso vai definir a fonte para o documento inteiro. O navegador primeiro tenta Source Sans 3. Se, por algum motivo, essa fonte não estiver disponível (se, por exemplo, o Google Fonts estiver fora do ar), então sans-serif instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na pilha de fontes. É só separar com vírgulas, como você vê acima.

Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito.

Configurar cores e variáveis

Se você leu o capítulo Personalizar o Simple.css, vai lembrar que ele usava variáveis CSS para controlar cor e fontes. Vamos fazer isso aqui também. Isso vai facilitar personalizar depois (o que você pode querer fazer se não gostar das minhas escolhas).

:root {
  --text-color: #303036;
  --muted-text-color: #5e5e67;
  --heading-color: #cd2807;
  --link-color: #028090;
  --background-color: #fffdf7;

  --heading-font: 'Oswald', sans-serif;
  --body-font: 'Source Sans 3', sans-serif;
}

Você pode nomear as variáveis como quiser, desde que comecem com --. Aqui, estou definindo várias cores e algumas fontes.

Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto.

html {
  font-family: var(--body-font);
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-color);
  background-color: var(--background-color);
}

Use a função var para usar as variáveis que criamos.

Estilos dos títulos

Estou usando um <h1> para o título da página e elementos <h2> para os subtítulos. Vamos mirar esses e aplicar alguns estilos.

h1 {
  border-block-start: 10px solid var(--heading-color);
  margin-block-start: 4rem;
  margin-block-end: 2rem;
  font-family: var(--heading-font);
  font-weight: normal;
}

h2 {
  margin-block-start: 1.5rem;
  margin-block-end: 0.5rem;
  font-family: var(--heading-font);
  font-size: 1.2em;
  font-weight: normal;
  color: var(--heading-color);
}

Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos <h2> e um bom tanto de espaço extra acima do <h1>.

Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo font-weight como normal em vez de bold, que é o padrão dos títulos.

Para o <h1>, estou mantendo o font-size padrão. Para o <h2>, estou definindo o font-size como 1.2em, ou seja, 1,2 vezes o tamanho de fonte atual.

Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente.

Quase poderíamos parar aqui. Não tem nada de tão terrível acontecendo. Mas vamos estilizar alguns dos elementos que ainda não cobrimos.

Links

Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags <a>. Um aponta para a fonte da imagem de Saturno que eu usei, e o outro para o site NASA Solar System Exploration. O resto está no rodapé do site.

Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes.

:root {
  /* ... other code ... */

  --link-color: #028090;

  /* ... other code ... */
}

Vou usar isso para definir a cor de todos os elementos <a>, assim:

a {
  color: var(--link-color);
}

Não é uma regra rígida, mas a maioria das pessoas associa texto azul sublinhado a um link clicável. Eu decidi não me afastar demais disso. Mas eu gostaria de adicionar um efeitozinho em que o sublinhado some quando eu passo o mouse por cima.

Vamos usar o seletor de pseudo-classe :hover para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (:disabled) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando.

a:hover {
  text-decoration: none;
}

A propriedade que queremos é text-decoration. Por padrão, os links têm um text-decoration de underline. Você tem algumas opções aqui, mas eu vou de none.

Isso nos dá uma interação visual sutil com o link.

Abreviações

Falando de efeitos ao passar o mouse, há um que você pode não ter notado. Se olhar o HTML no primeiro parágrafo, vai encontrar a seguinte frase.

In this article, we will explore the distinctive attributes of each planet,
providing an overview of what makes them unique (and learn a little
<abbr title="Cascading style sheets">CSS</abbr> while doing it).

A tag <abbr> ajuda quem visita a saber o que certas abreviações ou siglas significam. Quando você passa o mouse sobre o termo CSS no documento, recebe uma dica útil mostrando o significado. Você coloca a abreviação dentro das tags e usa o atributo title para o texto completo.

Vamos dar um text-decoration para sugerir que dá para interagir com isso.

abbr {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--heading-color);
  text-decoration-thickness: 2px;
}

Estamos dando um sublinhado, como os links têm por padrão. Mas vamos deixar na cor vermelha que estamos usando para títulos e usar o estilo dotted, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver.

Citações em bloco

Eu seria irresponsável se não citasse Carl Sagan num artigo sobre o sistema solar — mesmo que isto seja só uma demo técnica. Então incluí um trecho épico dele na seção sobre a Terra.

Já está servindo como está — já vem recuado e parece uma citação. Mas dá para melhorar, com certeza. Vou te mostrar o código e depois explicar o que estou fazendo.

blockquote {
  margin-inline: 1.5rem 0;
  border-inline-start: 4px solid var(--heading-color);
  padding-inline: 1rem;
  font-size: 0.9rem;
  color: var(--muted-text-color);
}

Eu quero controlar o recuo e deixá-lo mais consistente, baseando-o no tamanho da fonte do documento. Em idiomas da esquerda para a direita, margin-inline controla as margens esquerda e direita. Estou fornecendo dois valores, 1.5rem e 0, para especificar as margens esquerda e direita, respectivamente. A margem esquerda vai ser 1,5 vezes o tamanho da fonte do documento, e vamos remover a margem direita por completo.

Um estilo talvez comum demais de um elemento <blockquote> é dar a ele uma borda esquerda grossa que usa um destaque. Não vejo motivo para ser inconformista aqui, então vou colocar uma borda esquerda usando border-inline-start. Lembre-se: inline se refere ao eixo horizontal. E start significa o primeiro (que é a esquerda para mim; end seria o da direita).

Vou definir como uma linha sólida de 4px de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta.

Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca.

Felizmente, podemos corrigir isso adicionando um pouco de padding. Vou te dar uma introdução rápida ao modelo de caixa. Todo elemento tem espaço do lado de fora (margem), espaço ao redor do lado de dentro (preenchimento) e uma camada opcional que separa os dois (a borda).

Com esse conhecimento, vamos adicionar algum espaço dentro do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo padding-inline com só um valor, 1rem, que equivale ao tamanho da fonte do documento.

Por fim, vou arredondar o efeito deixando o tamanho da fonte um pouco menor e a cor do texto um pouco mais clara. O resultado final é uma citação em bloco bonita, com um toque de estilo.

Eu desenhei este estilo de citação para caber na maioria dos casos, mas você poderia ir em outra direção — chamadas curtas com texto grande e itálico, por exemplo.

Listas

Vamos resolver rápido a lista com marcadores de Plutão e companhia. Vamos dar à lista um pouco de recuo, como é comum em listas com marcadores. Lembre-se: o HTML também tem listas numeradas. Não estamos usando uma nesta página (se você estiver usando a minha marcação HTML), mas podemos escrever o estilo para os dois tipos de lista.

Você já sabe que o seletor mira os elementos que queremos estilizar. Mas você também pode ter vários seletores! Podemos mirar o elemento <ul> e o elemento <ol> e dar o mesmo recuo aos dois, fazendo o seguinte.

ul, ol {
  padding-inline-start: 1.5rem;
}

Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma lista de seletores. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a listas não ordenadas (com marcadores) e listas ordenadas (numeradas).

Vamos também ajustar o espaço entre os itens de lista individuais (elementos <li>). Eu gosto de usar a metade do que uso para parágrafos, porque quero os itens de lista mais juntos do que os parágrafos, mas ainda com um pouco de espaço entre eles. Como usei 1rem para espaçar os parágrafos e outros elementos, vou usar a metade disso, 0.5rem, para a margem de baixo.

li {
  margin-block: 0 0.5rem;
}

Lembre-se: margin-block é a margem de cima e de baixo num idioma da esquerda para a direita, como o português. Podemos definir os dois valores ao mesmo tempo. O trecho acima equivale a:

li {
  margin-block-start: 0;
  margin-block-end: 0.5rem;
}

Isso significa que, em idiomas da esquerda para a direita, a margem acima do item de lista é zero, e a margem abaixo é uns dez pixels (0.5rem significa 0,5 vezes o tamanho da fonte do root element, que definimos como 20px).

O espaçamento deve estar bem bonito agora, mas vamos fazer uma coisa que deixaria designers web dos anos 2000 com inveja. Vamos mudar a cor dos marcadores. Isso era complicado, mas agora é moleza.

li::marker {
  color: var(--heading-color);
}

O pedaço ::marker se chama pseudo-elemento, porque representa um pedaço de um elemento HTML. O ::marker é uma parte do item de lista, ou elemento <li>. Ele contém o marcador (ou o número) do item. Podemos mirá-lo com o nosso seletor e mudar a cor para o vermelho dos títulos.

Ficou bonito!

Texto pré-formatado

Na maior parte do tempo, nos nossos documentos HTML, não nos importamos em preservar o espaçamento exato de tudo. Na verdade, isso seria contraproducente, porque em geral recuamos o HTML ou incluímos linhas vazias para deixar o código mais legível. Mas, às vezes, queremos mostrar o texto exatamente como está formatado. Exemplos incluem arte ASCII e código de computador.

Em geral, mostramos esse tipo de texto com a tag <pre> no HTML. Ela preserva todo o espaçamento e usa uma fonte monoespaçada para deixar tudo consistente. Muitas vezes é combinada com a tag <code> para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo.

Vamos estilizar a tag <pre> assim.

pre {
  padding: 1rem;
  background-color: #edebe7;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.75rem;
}

Queremos que o código apareça como se estivesse dentro de um contêiner, então vamos dar preenchimento o tempo todo ao redor. Em seguida, vamos definir uma cor de fundo clara, só o bastante visível contra o fundo da página, mas não tão escura a ponto de prejudicar o contraste do texto. Caixas de canto vivo parecem um pouco antinaturais, então vamos adicionar um border-radius pequeno, que é só um termo chique para quanto queremos arredondar os cantos.

Poderíamos ter linhas longas de código, então precisamos especificar o que deve acontecer se uma linha transbordar pela lateral do contêiner. Neste caso, vamos definir como auto, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar.

Por fim, código monoespaçado pode parecer grande, então vamos baixar o tom dizendo que deve ter três quartos do tamanho do texto padrão.

Melhorar o estilo das imagens

Aqui vai como a imagem de Saturno está agora.

Não está tão ruim, mas parece que a tag <figure> está adicionando margem dos dois lados. Eu quero que a imagem ocupe a largura toda. Também quero que a legenda da foto fique menor.

figure {
  margin-inline: 0;
}

figure img {
  display: block;
  margin-inline: auto;
  border-radius: 4px;
}

figcaption {
  margin-block-start: 0.5rem;
  font-size: 0.8rem;
}

Vamos remover a margem em linha do <figure>. Depois vamos mirar imagens que estão dentro de figures (só temos uma, mas isso pode ser um padrão legal se adicionarmos mais) e fazer o seguinte:

• Definir display como block. Imagens vêm como inline por padrão, mas o comportamento de block funciona mais como você esperaria de uma imagem assim.
• Definir a margem em linha como auto, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada.
• Definir border-radius como 4px arredonda os cantos da imagem só um pouquinho.
• Por fim, vamos reduzir a margem acima da legenda e reduzir o font-size para 80% do tamanho da fonte do documento.

Ficou chique! Ajustes pequenos podem fazer uma diferença grande.

O rodapé

Já temos alguns estilos de rodapé — antes, definimos a largura e garantimos que ficasse centralizado. Mas podemos melhorar dando a ele espaço para respirar, uma bordinha no topo, texto menor e uma cor de texto mais suave.

footer {
  margin-block-start: 3rem;
  margin-inline: auto;
  padding-block: 1.5rem 3rem;
  border-block-start: 2px solid var(--heading-color);
  max-width: 65ch;
  color: var(--muted-text-color);
}

Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com margin-block-start. Estamos adicionando uma borda de 2px de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando padding-block, estamos adicionando algum espaço entre o texto e a borda, e um bom pedaço de preenchimento embaixo para dar folga na parte de baixo da página. Por fim, vamos usar a mesma cor de texto suave que usamos na citação em bloco.

Como já adicionamos a margem que queremos no próprio elemento <footer>, vamos remover toda a margem das coisas dentro do rodapé. Vamos usar o nosso amigo, o seletor universal (*).

footer * {
  margin: 0;
  font-size: 0.9rem;
}

Este seletor vai mirar tudo o que está dentro da tag <footer>. Vamos definir margin como 0 e reduzir o texto para 90% do tamanho da fonte do documento.

Diversão tipográfica extra

Poderíamos parar aqui de vez, mas… vamos nos divertir um pouco.

Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe intro. Vamos dar um pouco de ênfase deixando o texto um pouco maior.

.intro {
  margin-block-end: 2rem;
  font-size: 1.2em;
}

Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe intro, neste caso). Isso vai deixar o font-size maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo.

Beleza, mas agora vamos ficar bem extra. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag <span> com uma classe caps.

.caps {
  text-transform: uppercase;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.1em;
}

Isso vai nos dar aquele efeito chique de livro, em que as primeiras palavras ficam em versalete. Em geral, você ia querer usar uma fonte com versalete de verdade, mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável.

A declaração text-transform vai deixar todas as letras em maiúsculas. É melhor fazer isso com CSS do que digitar tudo em maiúsculas na mão, porque é mais uma coisa de estilo. Para o font-size, eu só fui mexendo até ficar com a cara certa. No fundo, eu queria que as maiúsculas tivessem a mesma altura das letras minúsculas do texto de introdução (ou seja, a altura-x).

Para ajudar no equilíbrio, estou aumentando um pouco o font-weight. Além de valores como normal e bold, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta.

Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade em, que se baseia no font-size atual. Isso é útil porque, se você mudar o font-size no futuro, o espaçamento muda na mesma proporção.

E aí está. Dos começos humildes como uma página sem estilo, com um charme simples, agora está com cara de artigo de autoridade.

Potencial sem limite

Estes são só os estilos que eu escolhi com base nas minhas preferências. Você poderia ir em todo tipo de direção diferente. Não estou necessariamente tentando empurrar um estilo para você — embora eu tenha te apontado para alguns princípios tipográficos geralmente bons de seguir. Eu só queria te dar um gostinho de como você pode aplicar os seus próprios estilos a uma página.

A mágica do CSS é que você poderia pegar o meu HTML exato — sem mudanças — e criar um design completamente diferente a partir do mesmo ponto de partida. Essa é a premissa de um experimento web chamado CSS Zen Garden, em que as pessoas enviam designs com base na mesma marcação.

Espero que este capítulo bônus tenha te dado um gostinho do que é possível com CSS. Assim como com HTML, até um pouco de conhecimento de CSS já vale — uma simples mudança de fonte e cor, por exemplo, pode fazer uma diferença enorme. Eu te animo a continuar explorando CSS se você quiser criar designs personalizados. É uma habilidade recompensadora de ter.

A seguir

HTML reutilizável com PHP

Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas.

É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa PHP: Hypertext Preprocessor. Sim, a sigla faz parte do nome, o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial.

O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS WordPress foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. Hypertext preprocessor é uma boa descrição do que ela costuma fazer.

Quando você visita um site estático, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença?

O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em example.com/user/blake. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta.

O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social.

Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução include.

Como executar PHP

O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP.

Eu recomendo o que se chama hospedagem compartilhada. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços).

A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu perguntei no Mastodon.

• DreamHost
• SiteGround
• Reclaim Hosting
• InfinityFree

E ainda tem o NearlyFreeSpeech.NET, a hospedagem que eu uso há anos. Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade.

Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com FTP.

Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo.

O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de .html para .php. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma.

Deixar uma página dinâmica

Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP.

Por exemplo, aqui vai uma página que mostra o ano atual.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My website</title>
        <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
    </head>
    <body>
        <h1>My website</h1>

        <p>The current year is: <?php echo date('Y') ?></p>
    </body>
</html>

Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida.

Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (<?php e ?>).

O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução echo é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função date devolve a data atual — neste caso, estamos dizendo que queremos só o ano.

Então a função date roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução echo, que o insere no documento.

O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado.

Reutilizar partes do seu site

Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares.

Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo aria-current, que muda conforme a página em que você está).

<nav>
  <a href="/index.html" aria-current="page">Home</a>
  <a href="/blog/">Blog</a>
  <a href="/about.html">About</a>
  <a href="/resume.html">Resume</a>
  <a href="/fun.html">Fun!</a>
</nav>

Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em cada página e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu.

Primeiro, crie um arquivo chamado nav.php. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta includes, só para organizar.

Copie o menu de navegação da página inicial (index.html) e cole o conteúdo no arquivo nav.php. Por enquanto, remova o atributo aria-current="page", porque vamos precisar tornar essa parte dinâmica depois.

Você deve ter um arquivo nav.php mais ou menos assim:

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/about.php">About</a>
  <a href="/resume.php">Resume</a>
  <a href="/fun.php">Fun</a>
</nav>

O trecho acima não é só um recorte. É o conteúdo inteiro de nav.php. Ao contrário de outros arquivos HTML, que precisam de um <head>, um <body> etc., arquivos PHP podem conter um fragmento de HTML.

Agora vamos usar. Renomeie index.html para index.php. Apague o bloco <nav> inteiro e substitua pela seguinte linha de PHP.

<header>
    <?php include "includes/nav.php" ?>

    <h1>Blake&rsquo;s Homepage</h1>
</header>

Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas.

Converter páginas HTML em PHP

Os passos são, em geral, os mesmos para cada página.

1. Mude a extensão do arquivo de .html para .php.
2. Substitua a tag <nav> pela instrução include do PHP.

Para páginas do nível mais alto, a instrução include do PHP vai ficar assim:

<?php include "includes/nav.php" ?>

Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe .. para subir um nível.

<?php include "../includes/nav.php" ?>

Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o nav.php.

Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção <head> é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai.

Bônus: destacar dinamicamente o link atual da navegação

Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo aria-current no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual?

Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o aria-current automaticamente.