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