htmlepessoas.com

---
title: 'Adicionar um blog'
summary: 'Adicione um blog ao seu site estático e faça um tour rápido pelas tags HTML que você pode usar para enriquecer o conteúdo.'
permalink: 'adicionar-um-blog/'
originalPath: /adding-a-blog/
tags: chapter
layout: 'chapter.njk'
---

# 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](https://perma.cc/K3PV-JL9S).

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.

![Captura de tela da página “Blog” no site do Blake. A página tem pouco estilo porque as referências de arquivo estão quebradas. O layout é simples e sem estilo, com texto preto comum sobre fundo branco. O cabeçalho tem links para “Home” e “About” em azul e sublinhados, no estilo padrão do navegador. O título principal “Blog” está em negrito e grande, mas a aparência geral não tem o desenho estruturado das páginas anteriores.](/assets/img/adding-a-blog-1.webp)

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.

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

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

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

![Captura de tela da página “Blog” no site do Blake, agora com o estilo corrigido. A página mostra um cabeçalho claro, com botões arredondados para “Home” e “About,” melhorando a navegação. O título principal “Blog” está bem no centro, em negrito, com uma hierarquia visual clara. O rodapé tem uma linha fina de divisão acima e o texto centralizado.](/assets/img/adding-a-blog-2.webp)

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.

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

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

{% aside 'Observação' %}
Como a gente está abrindo os arquivos do site direto no navegador, está usando _URLs relativas_ para formar os links para outras páginas e arquivos. Num capítulo que vem aí, a gente vai aprender a [rodar um servidor web local](/intervalo-instalar-um-servidor-local) e como isso nos permite usar _URLs absolutas_, que são mais diretas.
{% endaside %}

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

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

```html
<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 `&larr;` é 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](https://perma.cc/BEA6-LF46).

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](https://demo.htmlforpeople.com/blog/2024-04-12-whiskers.html)
- [The time I built a website for aliens](https://demo.htmlforpeople.com/blog/2024-04-15-aliens.html)
- [Why donuts are the best thing ever](https://demo.htmlforpeople.com/blog/2024-04-20-donuts)

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.

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

Isso renderiza assim.

![A captura de tela do texto renderizado mostra o seguinte em negrito: “Whiskers can now create web pages”](/assets/img/adding-a-blog-3.webp)

## Citações em bloco

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

```html
<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, `&mdash;`, para criar um [_travessão_ (em dash)](https://practicaltypography.com/hyphens-and-dashes.html).

![Uma citação em bloco estilizada, renderizada no navegador. A frase “HTML is elementary my dear Watson.” está em itálico, e a palavra “elementary” também está em negrito. Uma barra vertical azul aparece à esquerda da citação, dando ênfase visual. Abaixo da citação, a atribuição “— Whiskers, probably” aparece numa fonte menor, alinhada à esquerda, criando uma atribuição visualmente distinta.](/assets/img/adding-a-blog-4.webp)

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](/adicionar-conteudo-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_.

```html
<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).

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

```html
<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](http://www.npr.org/blogs/thetwo-way/2013/05/02/180532424/send-your-haiku-to-mars-nasa-seeks-poets#comment-882372940)).

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

![Uma única linha de texto renderizada no navegador: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão, sem estilo extra, centralizado na horizontal na página.](/assets/img/adding-a-blog-5.webp)

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.

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

![Texto em várias linhas no navegador, com quebra natural das palavras: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão e está quebrado em três linhas.](/assets/img/adding-a-blog-6.webp)

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](/basico-de-css) 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.

![Dois parágrafos de texto de preenchimento renderizados no navegador. Os parágrafos estão separados por uma linha horizontal, o que dá uma divisão visual clara. O texto aparece numa fonte sans-serif padrão, e cada parágrafo tem um espaçamento de linha adequado, o que melhora a leitura.](/assets/img/adding-a-blog-7.webp)

{% aside 'Observação' %}
O que é esse texto sem sentido? É um texto meio latim chamado _[lorem ipsum](https://en.wikipedia.org/wiki/Lorem_ipsum)_, que costuma ser usado em situações de design quando você quer ver como o texto fica sem se distrair com o que ele diz.
{% endaside %}

## 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:

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

![Um parágrafo de texto renderizado no navegador, com tags HTML específicas em destaque em vermelho. O texto diz: “By the end of day one, he was familiar with basic tags like html, head, and body.” As palavras em destaque “html,” “head” e “body” estão em vermelho, numa fonte monoespaçada, enquanto o resto do texto permanece preto, chamando a atenção para estes termos.](/assets/img/adding-a-blog-8.webp)

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 `&lt;` e <span style="text-wrap: nowrap">`&gt;`, </span>nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade.

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

![Um parágrafo parecido com o anterior, mas com as tags HTML cercadas por colchetes angulares, o que enfatiza o papel delas como elementos HTML. O texto diz: “By the end of day one, he was familiar with basic tags like <html>, <head>, and <body>.”](/assets/img/adding-a-blog-9.webp)

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.

<pre class="language-html"><code class="language-html mono">    ___       ___       ___       ___   
   /\__\     /\  \     /\__\     /\__\  
  /:/__/_    \:\  \   /::L_L_   /:/  /  
 /::\/\__\   /::\__\ /:/L:\__\ /:/__/   
 \/\::/  /  /:/\/__/ \/_/:/  / \:\  \   
   /:/  /   \/__/      /:/  /   \:\__\  
   \/__/               \/__/     \/__/</code></pre>

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 class="language-html"><code class="language-html mono">&lt;pre&gt;
    ___       ___       ___       ___   
   /\__\     /\  \     /\__\     /\__\  
  /:/__/_    \:\  \   /::L_L_   /:/  /  
 /::\/\__\   /::\__\ /:/L:\__\ /:/__/   
 \/\::/  /  /:/\/__/ \/_/:/  / \:\  \   
   /:/  /   \/__/      /:/  /   \:\__\  
   \/__/               \/__/     \/__/
&lt;/pre&gt;</code></pre>

Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste [gerador de arte em texto](https://perma.cc/E5NZ-SV56).

## 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](https://demo.htmlforpeople.com/blog/2024-04-20-donuts).

![Captura de tela de um post chamado “Why donuts are the best thing ever,” datado de 20 de abril de 2024. A página tem um menu de navegação com os botões “Home,” “Blog” (em destaque) e “About.” O post fala da alegria e da versatilidade dos donuts, com uma caixa na lateral listando “Donut ingredients” (Bread, Sugar, Hole). O layout é limpo e bem espaçado para a leitura.](/assets/img/adding-a-blog-10.webp)

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 <mark>destacar texto</mark>. Se quiser tachar texto <s>indesejado</s>, 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.

![Captura de tela de texto com formatação de tachado e sublinhado. A frase “it's vegetables” está tachada, e “donuts” está sublinhado, enfatizando a troca de “vegetables” por “donuts” para destacar uma preferência bem-humorada na frase.](/assets/img/adding-a-blog-11.webp)

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

```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values).

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

![Captura de tela de uma página de listagem de blog, com um cabeçalho contendo botões de navegação para “Home,” “Blog” (em destaque) e “About.” O título principal diz “Blog.” Abaixo há três prévias de posts, com títulos em azul: “Why donuts are the best thing ever,” “The time I built a website for aliens” e “How I taught my cat to make a website with HTML,” cada uma com um resumo breve e a data (20 de abril, 15 de abril e 12 de abril de 2024, nesta ordem).](/assets/img/adding-a-blog-12.webp)

## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) no MDN. O [MDN](https://developer.mozilla.org) é, 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.