code.pablomurad.com — htmlepessoas.com.git (gh-pages): adicionar-um-blog/index.html

adicionar-um-blog/index.html (view raw)
<!doctype html>

<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <title>Adicionar um blog</title>

    <meta property="og:title" content="Adicionar um blog" />
    <meta property="og:description" content="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." />
    <meta property="og:image" content="/assets/img/design/og.png" />
    <meta property="og:locale" content="pt_BR" />
    <link rel="canonical" href="https://htmlepessoas.com/adicionar-um-blog/" />
    <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-um-blog/" />
    
    <link
      rel="alternate"
      hreflang="en"
      href="https://htmlforpeople.com/adding-a-blog/"
    />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://htmlforpeople.com/adding-a-blog/"
    />
    

    <!-- favicon -->
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="/assets/img/design/favicon.png"
    />

    <script>
      /**
       * A global function that the theme toggle can use to apply the current theme.
       * @param {string | undefined} override - The setting that needs to be applied or undefined
       * @returns {string} - The applied theme setting
       */
      window.applyThemeSetting = function (override) {
        const getSystemPreference = () => {
          if (
            window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches
          ) {
            return 'dark';
          }
          return 'light';
        };
        const currentSetting =
          override ||
          localStorage.getItem('user-color-scheme') ||
          getSystemPreference();
        const currentThemeValue =
          document.documentElement.getAttribute('data-theme');
        if (currentSetting && currentSetting !== currentThemeValue) {
          document.documentElement.setAttribute('data-theme', currentSetting);
          localStorage.setItem('user-color-scheme', currentSetting);
        }
        return currentSetting;
      };
      window.applyThemeSetting();
    </script>

    <link rel="stylesheet" href="/assets/css/style.css" />

    <script defer src="/assets/js/app.js"></script>
    
  </head>

  <body class="chapter">
    
      <header class="site-header">
        <div class="logo-wrap">
          <p class="site-title container">
            <a href="/">
              <span class="sr-only">HTML e pessoas</span>
              <?xml version="1.0" encoding="UTF-8"?>
<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>HTML e pessoas</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo" transform="translate(10, 10)">
            <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect>
            <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text>
            <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
                <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
                <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line>
                <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line>
                <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
                <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line>
                <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line>
                <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle>
                <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
                <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
                <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle>
                <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path>
                <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path>
                <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path>
                <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path>
            </g>
            <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
                <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line>
                <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line>
                <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line>
                <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line>
                <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line>
                <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line>
                <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
                <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
                <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle>
                <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle>
                <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path>
                <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path>
                <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path>
            </g>
        </g>
    </g>
</svg>
            </a>
          </p>
        </div>

        <a href="#main-content" class="skip-link">Pular para o conteúdo</a>

        <div class="container"><details class="main-menu" id="main-menu">
  <summary>Menu</summary>

  <nav>
    <p class="menu-heading">
      <strong>Capítulos</strong>
    </p>

    <ul>
      <li>
        <a href="/introducao" 
          >Introdução</a
        >
      </li>
      <li>
        <a
          href="/do-zero-a-internet-seu-primeiro-site"
          
          >Do zero à internet: seu primeiro site</a
        >
      </li>
      <li>
        <a
          href="/adicionar-conteudo-ao-seu-site"
          
          >Adicionar conteúdo ao seu site</a
        >
      </li>
      <li>
        <a
          href="/intervalo-melhore-seu-editor-de-texto"
          
          >Intervalo: melhore seu editor de texto</a
        >
      </li>
      <li>
        <a
          href="/um-site-com-estilo"
          
          >Um site com estilo</a
        >
      </li>
      <li>
        <a
          href="/adicionar-uma-pagina-sobre"
          
          >Adicionar uma página Sobre</a
        >
      </li>
      <li>
        <a href="/adicionar-um-blog" aria-current="page"
          >Adicionar um blog</a
        >
      </li>
      <li>
        <a
          href="/adicionar-um-curriculo"
          
          >Adicionar um currículo</a
        >
      </li>
      <li>
        <a
          href="/intervalo-instalar-um-servidor-local"
          
          >Intervalo: instalar um servidor local</a
        >
      </li>
      <li>
        <a
          href="/adicionar-uma-pagina-divertida"
          
          >Adicionar uma página divertida</a
        >
      </li>
      <li>
        <a
          href="/conquista-desbloqueada-hipertextista"
          
          >Conquista desbloqueada: Hipertextista</a
        >
      </li>
    </ul>

    <p class="menu-heading">
      <strong>Capítulos bônus</strong>
    </p>
    <ul>
      <li>
        <a
          href="/personalizar-o-simple-css"
          
          >Personalizar o Simple.css</a
        >
      </li>
      <li>
        <a href="/basico-de-css" 
          >Básico de CSS</a
        >
      </li>
      <li>
        <a
          href="/html-reutilizavel-com-php"
          
          >HTML reutilizável com PHP</a
        >
      </li>
    </ul>

    <p class="menu-heading">
      <strong>Demos e recursos</strong>
    </p>

    <ul>
      <li>
        <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/"
          >Demo da homepage do Blake</a
        >
      </li>
      <li>
        <a
          target="_blank"
          rel="noopener"
          href="https://planets.htmlforpeople.com/"
          >Demo Planetas do Sistema Solar</a
        >
      </li>
      <li>
        <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
          >Recursos e links</a
        >
      </li>
    </ul>
  </nav>

  <div class="settings" hidden>
    <p class="menu-heading">
      <strong>Ajustes</strong>
    </p>

    <theme-toggle>
      <label class="checkbox theme-toggle">
        <input type="checkbox" /> Tema escuro
      </label>
    </theme-toggle>

    <code-wrap>
      <label class="checkbox code-wrap">
        <input type="checkbox" /> Quebrar linhas do código
      </label>
    </code-wrap>
  </div>
</details>
</div>
      </header>
    

    <main id="main-content" class="container">
      
  <h1 id="adicionar-um-blog" tabindex="-1"><a class="header-anchor" href="#adicionar-um-blog">Adicionar um blog</a></h1>
<p>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 <a href="https://perma.cc/K3PV-JL9S">plataformas menores e independentes</a>.</p>
<p>Mas você não <em>precisa</em> de uma dessas plataformas para ter um blog. Um blog é só uma série de posts em ordem cronológica (em geral, cronológica <em>inversa</em>, com os posts mais novos primeiro). A gente consegue fazer isso com HTML!</p>
<p>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 <em>vou</em> te mostrar como estruturar os arquivos e passar por algumas das tags HTML diferentes que a gente pode usar.</p>
<h2 id="crie-a-home-do-blog" tabindex="-1"><a class="header-anchor" href="#crie-a-home-do-blog">Crie a home do blog</a></h2>
<p>Siga estes passos para deixar o blog disponível em <code>sitename.neocities.org/blog</code>.</p>
<ol>
<li>Crie uma pasta chamada <code>blog</code>; dentro dela, crie um arquivo chamado <code>index.html</code>.</li>
<li>Copie o conteúdo de uma das suas outras páginas e cole neste <code>index.html</code> novo e vazio.</li>
<li>Mude o <code>&lt;h1&gt;</code> para “Blog”, “Meu blog” ou o nome que você quiser.</li>
<li>Mude o <code>&lt;title&gt;</code> para alterar o que aparece na aba. Por exemplo, “Blog - Blake’s Homepage.”</li>
<li>Limpe o conteúdo principal para ficar com uma tag <code>&lt;main&gt;</code> vazia. A gente adiciona conteúdo depois.</li>
</ol>
<p>Vamos abrir no navegador e ver como ficou.</p>
<p><img src="/assets/img/adding-a-blog-1.webp" alt="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."></p>
<p>Opa, a gente quebrou; o que aconteceu!? Tem a ver com a estrutura de arquivos. Olhe a tag <code>&lt;link&gt;</code>, onde a gente adicionou os estilos do Simple.css.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Ela está procurando <code>css/simple.css</code>, mas não encontra. Por quê? O caminho que a gente deu é <em>relativo</em> ao arquivo atual. O arquivo atual está na pasta <code>blog</code>, então ela procura <code>blog/css/simple.css</code>, que não existe.</p>
<p>Então, como a gente se refere a arquivos que não estão na pasta atual? A gente pode usar a sintaxe <code>..</code>, assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Isso significa: “suba um nível e, então, procure css/simple.css.”</p>
<p><img src="/assets/img/adding-a-blog-2.webp" alt="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."></p>
<p>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 <code>..</code> para criar o link até elas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>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.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Como a gente está abrindo os arquivos do site direto no navegador, está usando <em>URLs relativas</em> para formar os links para outras páginas e arquivos. Num capítulo que vem aí, a gente vai aprender a <a href="/intervalo-instalar-um-servidor-local">rodar um servidor web local</a> e como isso nos permite usar <em>URLs absolutas</em>, que são mais diretas.</p>
</aside>
<h2 id="crie-o-primeiro-post" tabindex="-1"><a class="header-anchor" href="#crie-o-primeiro-post">Crie o primeiro post</a></h2>
<p>Eu vou escrever um post bobo sobre ensinar HTML a um gato. Vou criar um arquivo <code>2024-04-12-whiskers.html</code> na pasta <code>blog</code>. 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.</p>
<p>Como ponto de partida, a gente copia o conteúdo de <code>blog/index.html</code> para o arquivo novo. Eu vou mudar o <code>&lt;h1&gt;</code> (e o <code>&lt;title&gt;</code>) 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 <code>aria-current=&quot;page&quot;</code> no link do blog. Mas <em>está</em> dentro da seção Blog do site. Então eu vou mudar o atributo para o mais geral <code>aria-current=&quot;true&quot;</code>. Isto é <strong>só para páginas de posts individuais</strong>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>No fim do post, eu vou adicionar um link de volta ao blog. Como a gente já está na pasta <code>blog</code>, um link para <code>index.html</code> é tudo que a gente precisa para chegar à home do blog.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&larr;">&amp;larr;</span> Back to the blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>O pedaço <code>class=&quot;button&quot;</code> é um estilo que o Simple.css oferece e que faz um link de texto parecer um botão. O <code>&amp;larr;</code> é um código especial chamado de <em>entidade HTML</em>. Elas servem para representar caracteres especiais. Esta daqui é uma <em>seta para a esquerda</em>. Você pode ver uma <a href="https://perma.cc/BEA6-LF46">lista de outras entidades aqui</a>.</p>
<p>Eu vou adicionar três posts com uns poucos dias de diferença, só como exemplo. Quando eu terminar, vou ter estes posts.</p>
<ul>
<li><a href="https://demo.htmlforpeople.com/blog/2024-04-12-whiskers.html">How I taught my cat to make a website with HTML</a></li>
<li><a href="https://demo.htmlforpeople.com/blog/2024-04-15-aliens.html">The time I built a website for aliens</a></li>
<li><a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">Why donuts are the best thing ever</a></li>
</ul>
<p>A minha estrutura de arquivos vai ficar assim:</p>
<ul>
<li><code>blog</code>
<ul>
<li><code>2024-04-12-whiskers.html</code></li>
<li><code>2024-04-15-aliens.html</code></li>
<li><code>2024-04-20-donuts.html</code></li>
<li><code>index.html</code></li>
</ul>
</li>
<li><code>css</code>
<ul>
<li><code>simple.css</code></li>
</ul>
</li>
<li><code>images</code>
<ul>
<li><code>blake.jpg</code></li>
<li><code>space.jpg</code></li>
</ul>
</li>
<li><code>about.html</code></li>
<li><code>index.html</code></li>
</ul>
<h2 id="formatacao-de-texto" tabindex="-1"><a class="header-anchor" href="#formatacao-de-texto">Formatação de texto</a></h2>
<p>Vamos ver algumas tags que você pode usar nos posts e em outras páginas.</p>
<p>Para negrito e itálico, a gente pode usar as tags <code>&lt;strong&gt;</code> e <code>&lt;em&gt;</code>, nesta ordem.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
  After just three days, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Whiskers can now create web pages<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span> better than <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>I<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span> can!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Isso renderiza assim.</p>
<p><img src="/assets/img/adding-a-blog-3.webp" alt="A captura de tela do texto renderizado mostra o seguinte em negrito: “Whiskers can now create web pages”"></p>
<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2>
<p>A gente pode usar a tag <code>&lt;blockquote&gt;</code> para citar uma pessoa, um livro, outro site ou até a si mesmo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>blockquote</span><span class="token punctuation">></span></span>
  "HTML is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>elementary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span> my dear Watson."<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cite</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&mdash;">&amp;mdash;</span> Whiskers, probably<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cite</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>blockquote</span><span class="token punctuation">></span></span></code></pre>
<p>Aqui eu estou usando <code>&lt;strong&gt;</code> para dar ênfase extra. Estou usando a tag <code>&lt;cite&gt;</code> para mostrar a fonte da citação. A tag <code>&lt;br&gt;</code>, que é <em>self-closing</em>, cria uma quebra de linha manual, o que empurra o elemento <code>&lt;cite&gt;</code> para a linha seguinte. Eu usei outro caractere especial, <code>&amp;mdash;</code>, para criar um <a href="https://practicaltypography.com/hyphens-and-dashes.html"><em>travessão</em> (em dash)</a>.</p>
<p><img src="/assets/img/adding-a-blog-4.webp" alt="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."></p>
<p>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).</p>
<h2 id="recapitulando-titulos-e-listas" tabindex="-1"><a class="header-anchor" href="#recapitulando-titulos-e-listas">Recapitulando: títulos e listas</a></h2>
<p>A gente cobriu isto rapidinho no Capítulo 2, <a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a>, mas vale recapitular. Os nossos posts já usam o título mais alto, o <code>&lt;h1&gt;</code>, mas se você estiver escrevendo um post que precisa de mais títulos, tudo bem!</p>
<p>Títulos em HTML são hierárquicos. Isso significa que títulos <code>&lt;h2&gt;</code> devem vir depois de títulos <code>&lt;h1&gt;</code>, títulos <code>&lt;h3&gt;</code> devem vir depois de títulos <code>&lt;h2&gt;</code>, e assim por diante. Tecnicamente, o HTML nos dá seis níveis de título — de <code>&lt;h1&gt;</code> a <code>&lt;h6&gt;</code>. Mas a moderação é importante aqui. Pergunte a si mesmo se você <em>realmente</em> 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.</p>
<p>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 <em>não ordenada</em>) e uma lista numerada (chamada de <em>ordenada</em>).</p>
<p>Aqui está uma lista com marcadores, ou <em>não ordenada</em>, usando a tag <code>&lt;ul&gt;</code> para a lista e <code>&lt;li&gt;</code> para cada <em>item da lista</em>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Bread<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sugar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Hole<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>Isso renderiza assim.</p>
<ul>
<li>Bread</li>
<li>Sugar</li>
<li>Hole</li>
</ul>
<p>E aqui está uma lista numerada, ou <em>ordenada</em> (com alguns pontos em negrito para dar ênfase).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Portable Happiness:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span> 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.
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Instant Mood Boost:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span> 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.)
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Endless Creativity:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span> 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.
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">></span></span></code></pre>
<p>É assim que fica.</p>
<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>
<p>Você até pode <em>aninhar</em> listas, assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
    First main point
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sub point<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Another sub point<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
    Second main point
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sub-point<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Another sub-point<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>Isso renderiza mais ou menos assim.</p>
<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>
<h2 id="separando-o-conteudo" tabindex="-1"><a class="header-anchor" href="#separando-o-conteudo">Separando o conteúdo</a></h2>
<p>Um dos jeitos de adicionar espaço entre elementos na mão é a tag <code>&lt;br&gt;</code>, ou tag de <em>quebra</em> (<em>break</em>). A tag de quebra adiciona uma quebra de linha. Por exemplo, veja este haicai (de <a href="http://www.npr.org/blogs/thetwo-way/2013/05/02/180532424/send-your-haiku-to-mars-nasa-seeks-poets#comment-882372940">Robert Cole</a>).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
  A timeless red orb
  floats lazy in the ether
  unimpressed by war.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Por padrão, o navegador renderiza tudo numa linha só e ignora a maior parte do espaço em branco no seu HTML.</p>
<p><img src="/assets/img/adding-a-blog-5.webp" alt="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."></p>
<p>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 <em>quer</em> quebras de linha de verdade.</p>
<p>A gente conserta o haicai colocando um par de tags <code>&lt;br&gt;</code> ali.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
  A timeless red orb<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
  floats lazy in the ether<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
  unimpressed by war.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></code></pre>
<p><img src="/assets/img/adding-a-blog-6.webp" alt="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."></p>
<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 <code>margin</code> ou <code>padding</code>, 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 <a href="/basico-de-css">capítulo bônus</a> no fim deste livro.</p>
<p>Outro jeito de separar o conteúdo na mão é usar uma <em>linha horizontal</em>, ou tag <code>&lt;hr&gt;</code>. 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.</p>
<p><img src="/assets/img/adding-a-blog-7.webp" alt="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."></p>
<aside class="aside"><p class="aside-label">Observação</p><p>O que é esse texto sem sentido? É um texto meio latim chamado <em><a href="https://en.wikipedia.org/wiki/Lorem_ipsum">lorem ipsum</a></em>, 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.</p>
</aside>
<h2 id="codigo-e-texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#codigo-e-texto-pre-formatado">Código e texto pré-formatado</a></h2>
<p>Eu tenho usado estas tags <em>bastante</em> nas páginas que você está lendo neste livro. Veja este parágrafo:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
  By the end of day one, he was familiar with basic tags like <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>html<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>,
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>head<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>, and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>body<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating
  paragraphs and lists. By day three, he had moved on to creating stunning
  layouts with <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>article<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>section<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Isso vai mostrar os pedaços de código numa fonte monoespaçada e numa cor diferente, assim.</p>
<p><img src="/assets/img/adding-a-blog-8.webp" alt="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."></p>
<p>Você já me viu incluir os símbolos de menor que (<code>&lt;</code>) e maior que (<code>&gt;</code>) nos elementos de código das páginas deste livro (assim, <code>&lt;a&gt;</code>). Isso pede um trabalhinho a mais. Tipo, se eu quiser mencionar uma tag <code>&lt;a&gt;</code>, eu não posso simplesmente escrever <code>&lt;code&gt;&lt;a&gt;&lt;/code&gt;</code> porque o navegador vai achar que eu estou tentando fazer um link de verdade dentro da tag <code>&lt;code&gt;</code>. Para incluir os símbolos de menor que e maior que (às vezes chamados de “colchetes angulares”), a gente precisa das entidades HTML <code>&amp;lt;</code> e <span style="text-wrap: nowrap"><code>&amp;gt;</code>, </span>nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
  By the end of day one, he was familiar with basic tags like
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span>html<span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span>head<span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>, and
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span>body<span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating paragraphs and lists.
  By day three, he had moved on to creating stunning layouts with
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span>article<span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span>section<span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Isso nos dá o seguinte.</p>
<p><img src="/assets/img/adding-a-blog-9.webp" alt="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 , , and .”"></p>
<p>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.</p>
<pre class="language-html"><code class="language-html mono">    ___       ___       ___       ___   
   /\__\     /\  \     /\__\     /\__\  
  /:/__/_    \:\  \   /::L_L_   /:/  /  
 /::\/\__\   /::\__\ /:/L:\__\ /:/__/   
 \/\::/  /  /:/\/__/ \/_/:/  / \:\  \   
   /:/  /   \/__/      /:/  /   \:\__\  
   \/__/               \/__/     \/__/</code></pre>
<p>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 <code>&lt;pre&gt;</code>, que é para texto <em>pré-formatado</em>. Use assim.</p>
<pre class="language-html"><code class="language-html mono">&lt;pre&gt;
    ___       ___       ___       ___   
   /\__\     /\  \     /\__\     /\__\  
  /:/__/_    \:\  \   /::L_L_   /:/  /  
 /::\/\__\   /::\__\ /:/L:\__\ /:/__/   
 \/\::/  /  /:/\/__/ \/_/:/  / \:\  \   
   /:/  /   \/__/      /:/  /   \:\__\  
   \/__/               \/__/     \/__/
&lt;/pre&gt;</code></pre>
<p>Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste <a href="https://perma.cc/E5NZ-SV56">gerador de arte em texto</a>.</p>
<h2 id="asides" tabindex="-1"><a class="header-anchor" href="#asides">Asides</a></h2>
<p>A tag <code>&lt;aside&gt;</code> é divertida porque o Simple.css a estiliza de um jeito interessante. Elas servem para destaques ou <em>apartes</em> em relação ao conteúdo principal. Por exemplo, eu incluí um aside que lista ingredientes no meu <a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">post sobre donuts</a>.</p>
<p><img src="/assets/img/adding-a-blog-10.webp" alt="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."></p>
<p>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.</p>
<h2 id="mark-tachado-exclusao-insercao" tabindex="-1"><a class="header-anchor" href="#mark-tachado-exclusao-insercao">Mark, tachado, exclusão, inserção</a></h2>
<p>Aqui vão mais algumas tags de formatação de texto. Use <code>&lt;mark&gt;</code> para <mark>destacar texto</mark>. Se quiser tachar texto <s>indesejado</s>, envolva-o na tag <code>&lt;s&gt;</code>. Se quiser mostrar edições num documento de forma explícita, prefira a tag <code>&lt;del&gt;</code> para indicar uma exclusão e a tag <code>&lt;ins&gt;</code> para mostrar texto inserido. Por exemplo, isto vem do meu post sobre donuts.</p>
<p><img src="/assets/img/adding-a-blog-11.webp" alt="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."></p>
<h2 id="preencha-a-pagina-indice-do-blog" tabindex="-1"><a class="header-anchor" href="#preencha-a-pagina-indice-do-blog">Preencha a página índice do blog</a></h2>
<p>Certo, a gente cobriu várias tags que você pode usar para <em>marcar</em> 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.</p>
<p>Se você abrir <code>blog/index.html</code>, 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.</p>
<p>Vamos usar a tag <code>&lt;article&gt;</code> para cada um, porque cada um representa uma composição independente. De brinde, o Simple.css vai estilizá-los como cartões. Vamos usar <code>&lt;h2&gt;</code> para o título do post, e dentro dele a gente coloca um link (a tag <code>&lt;a&gt;</code>). Vamos usar a tag <code>time</code> para a data. Vamos usar um parágrafo comum, ou tag <code>&lt;p&gt;</code>, para o resumo. A marcação final fica assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-04-20-donuts.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        Why donuts are the best thing ever
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-04-20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 20, 2024<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      Donuts are the ultimate comfort food because of their versatility,
      variety, portability, mood-boosting power, and endless creative flavors.
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span></code></pre>
<p>O link no título vai receber um <em>atributo</em> <code>href</code>, o destino do link. Como a gente já está na pasta <code>blog</code>, a gente pode usar o nome do arquivo do post como destino.</p>
<p>A gente está usando a tag <code>&lt;time&gt;</code> 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 <code>&lt;time&gt;</code> recebe um atributo chamado <code>datetime</code>, no qual você pode informar a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">versão legível por máquina</a>.</p>
<p>Adicione um <code>&lt;article&gt;</code> como o de cima para cada post ao qual você quiser ligar. Você vai acabar com algo assim.</p>
<p><img src="/assets/img/adding-a-blog-12.webp" alt="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)."></p>
<h2 id="uma-tabela-dos-elementos-html" tabindex="-1"><a class="header-anchor" href="#uma-tabela-dos-elementos-html">Uma tabela dos elementos (HTML)</a></h2>
<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">referência de elementos HTML</a> no MDN. O <a href="https://developer.mozilla.org">MDN</a> é, mais ou menos, o manual oficial da web. É só pesquisar qualquer tag, atributo ou conceito sobre o qual você queira saber mais.</p>
<h2 id="atualize-o-site-no-ar-opcional" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar-opcional">Atualize o site no ar (opcional)</a></h2>
<p>Se quiser enviar as mudanças para o Neocities, siga o mesmo processo dos capítulos anteriores. Arraste e solte a pasta <code>blog</code> 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.</p>
<p>Claro, você também pode continuar trabalhando <em>localmente</em>, em vez de enviar o progresso agora. Você que manda!</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>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.</p>

  
  

  
    <nav
      class="mb-xl"
      style="display: flex; flex-direction: column; gap: 0.5rem;"
    >
      
        <p>
          <strong><span role="presentation">&rarr;</span> Próximo capítulo:</strong>
          <a href="/adicionar-um-curriculo/">Adicionar um currículo</a>
        </p>
      

      
        <p>
          <strong
            ><span role="presentation">&larr;</span> Capítulo anterior:</strong
          >
          <a href="/adicionar-uma-pagina-sobre/">Adicionar uma página Sobre</a>
        </p>
      
    </nav>
  

    </main>

    


    <elevator-button title="Ir para o menu">
      <a href="#main-menu">
        <span class="sr-only">Ir para o menu</span>
      </a>
    </elevator-button>

    <div class="sticky-footer" style="margin-block-start: auto">
      <div class="promo">
        <div class="container">
          <p class="promo-title">Gostou do livro?</p>
          <div class="stack">
            <p>
              <em>HTML e Pessoas</em> é a tradução de um trabalho feito com
              carinho. Se puder, considere enviar uma doação no Ko-fi para o
              autor original, Blake Watson, e compartilhar o livro nas redes
              sociais.
            </p>

            <p>
              <a href="https://ko-fi.com/blakewatson" class="button"
                >Doar no Ko-fi</a
              >
            </p>

            <p>Confira outros projetos do Blake:</p>
            <ul>
              <li>
                <a href="https://afinestart.me"
                  >Uma extensão minimalista de nova aba</a
                >
              </li>
              <li>
                <a href="https://synthwave.live/">Um site de mix synthwave</a>
              </li>
              <li>
                <a href="https://minimalcharactersheet.com/"
                  >Uma ficha minimalista para D&amp;D</a
                >
              </li>
              <li>
                <a href="https://blakewatson.com">O site pessoal dele</a>
              </li>
            </ul>

            <p class="promo-title mt-xl mb-xs">Prefere ler em inglês?</p>
            <p>
              O original <em>HTML for People</em> está em
              <a href="https://htmlforpeople.com">htmlforpeople.com</a>, escrito
              por Blake Watson. Também existe uma versão em espanhol, graças a
              <a
                href="https://victorhckinthefreeworld.com/2024/12/11/aprende-html-desde-cero-y-crea-tu-propio-sitio-web/"
                >Victorhck</a
              >.
            </p>

            <p class="mb-md">
              <a class="button" href="https://htmlforpeople.com">
                Visitar HTML for People</a
              >
            </p>
          </div>
        </div>
      </div>

      <footer class="site-footer">
        <div class="container">
          <p class="mb-sm">
            <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
              >Recursos</a
            >
            &middot;
            <a href="/printable">Versão para imprimir</a>
            &middot;
            <a href="https://github.com/blakewatson/htmlforpeople">GitHub</a>
            &middot;
            <a href="https://blakewatson.com/about">Sobre o autor</a>
          </p>
          <p>
            Livro original de
            <a href="https://blakewatson.com">Blake Watson</a> —
            <a href="https://htmlforpeople.com">HTML for People</a>. Tradução
            para o português do Brasil oferecida por
            <a href="https://pablomurad.com">Pablo Murad</a> e
            <a href="https://portalidea.com.br">Portal IDEA</a>. Licença
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
              >CC BY-NC-SA 4.0</a
            >.
          </p>
        </div>
      </footer>
    </div>
  </body>
</html>
all repos — htmlepessoas.com @ gh-pages

Venha aprender HTML com um método simplificado.
