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

` para “Blog”, “Meu blog” ou o nome que você quiser. 4. Mude o `` 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">← 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](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>— 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)](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 `<` e <span style="text-wrap: nowrap">`>`, </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><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 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"><pre> _ _ _ _ /\\ /\ \ /\\ /\\ /://_ \:\ \ /::L_L_ /:/ / /::\/\\ /::\\ /:/L:\\ /:// \/\::/ / /:/\/__/ \/_/:/ / \:\ \ /:/ / \// /:/ / \:\\ \// \// \/__/ </pre></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.