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.