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

um-site-com-estilo/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>Um site com estilo</title>

    <meta property="og:title" content="Um site com estilo" />
    <meta property="og:description" content="Aprenda sobre CSS e veja como ligar uma folha de estilo externa, como o Simple.css, ao seu site." />
    <meta property="og:image" content="/assets/img/design/og.png" />
    <meta property="og:locale" content="pt_BR" />
    <link rel="canonical" href="https://htmlepessoas.com/um-site-com-estilo/" />
    <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/um-site-com-estilo/" />
    
    <link
      rel="alternate"
      hreflang="en"
      href="https://htmlforpeople.com/a-website-with-style/"
    />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://htmlforpeople.com/a-website-with-style/"
    />
    

    <!-- 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"
          aria-current="page"
          >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" 
          >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="um-site-com-estilo" tabindex="-1"><a class="header-anchor" href="#um-site-com-estilo">Um site com estilo</a></h1>
<p>Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e <em>sem estilo</em>.</p>
<p>O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página.</p>
<p>No mundo do HTML, a gente só se preocupa com <em>o que as coisas são</em> — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir <em>como as coisas parecem</em>, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento.</p>
<p>Um jeito de incluir CSS é usar a tag <code>&lt;style&gt;</code> e colocar o código CSS direto nela. Por exemplo, olhe isto:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
  <span class="token selector">body</span> <span class="token punctuation">{</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Gill Sans'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span></code></pre>
<p>Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag <code>&lt;body&gt;</code> — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.”</p>
<aside class="aside"><p class="aside-label">Observação sobre fontes</p><p>Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados <em>serifs</em>, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais.</p>
<p class="sans-serif">Fontes sans-serif são aquelas <em>sem</em> serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.</p>
<p class="mono">Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.</p>
</aside>
<p>Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como <code>styles.css</code>. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag <code>&lt;style&gt;</code> em cada página que criar.</p>
<p>CSS é uma linguagem poderosa. Todo site que você vê está usando ela. Todos aqueles desenhos detalhados, boa parte da animação e o posicionamento de imagens e tipografia — isso é CSS.</p>
<p>Mesmo assim, CSS também tem uma curva de aprendizado. E embora eu te incentive de verdade a explorar CSS, este livro é <em>HTML</em> e Pessoas — eu quero manter o foco no HTML. Mas tudo bem! A gente ainda pode usar CSS para deixar o site bonito sem escrever tudo na mão.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você tiver vontade de aprender mais sobre CSS, ótimo! Eu tenho <a href="/basico-de-css">um capítulo bônus</a> no fim deste livro que apresenta mais CSS e aponta para outros materiais.</p>
</aside>
<h2 id="frameworks-css" tabindex="-1"><a class="header-anchor" href="#frameworks-css">Frameworks CSS</a></h2>
<p>Até quem desenvolve sites profissionalmente e já sabe CSS usa CSS pronto como ponto de partida. A gente vai fazer algo parecido. Alguns frameworks CSS são feitos para quem desenvolve — eles vêm com um monte de recurso extra e pedem que você escreva o HTML de um jeito específico. Outros frameworks, porém, são pensados para sites mais simples. Eles deixam o seu HTML bonito sem você ter que fazer muito trabalho a mais. São chamados de <em>frameworks CSS classless</em>.</p>
<p>Para o nosso caso, isso é perfeito. Vamos usar um chamado <a href="https://simplecss.org/">Simple.css</a>. Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes.</p>
<ul>
<li><a href="https://perma.cc/5936-VK4J">Water.css</a></li>
<li><a href="https://perma.cc/F6E4-EU58">Sakura</a></li>
<li><a href="https://picocss.com/">Pico</a></li>
</ul>
<p>Eles vão deixar o seu HTML bonito e te dar um ótimo ponto de partida para um site básico. Fique à vontade para usar coisas que outras pessoas já fizeram. Tem muita coisa boa por aí!</p>
<h2 id="simplecss" tabindex="-1"><a class="header-anchor" href="#simplecss">Simple.css</a></h2>
<p>Eu te animo a dar uma olhada no <a href="https://simplecss.org/">site do Simple.css</a>, principalmente na <a href="https://simplecss.org/demo">página de demonstração</a>. Ela mostra como usar diferentes elementos HTML e como eles ficam com o Simple. Vamos baixar o Simple.css.</p>
<p>A <a href="https://perma.cc/XA5E-E59Q">documentação do Simple.css</a> dá algumas formas de começar, mas, pelo bem da simplicidade (viu o que eu fiz?), eu vou te passar o URL do arquivo CSS:</p>
<p><a href="https://cdn.simplecss.org/simple.css">https://cdn.simplecss.org/simple.css</a></p>
<p>Não se intimide com todo o código que tem lá! Você não precisa entender isso agora (nem nunca, de verdade). É só ir em <em>File &gt; Save Page As</em> no navegador (<em>Command-S</em> no macOS e <em>Control-S</em> no Windows) e salvar este arquivo na pasta do projeto do seu site, onde está o <code>index.html</code>.</p>
<p>Pronto, você salvou. A gente vai adicionar isso à página daqui a pouco. Mas, primeiro, vamos organizar a casa.</p>
<h2 id="organizando-nossos-arquivos" tabindex="-1"><a class="header-anchor" href="#organizando-nossos-arquivos">Organizando nossos arquivos</a></h2>
<p>Até agora, a gente só tem três arquivos — a nossa página, um arquivo de imagem e o <code>simple.css</code> que acabamos de baixar. Mas logo vamos adicionar mais arquivos. Vamos criar um par de pastas e mover as coisas. A gente quer que a nova estrutura de arquivos fique assim:</p>
<ul>
<li>pasta <code>css</code>
<ul>
<li><code>simple.css</code></li>
</ul>
</li>
<li>pasta <code>images</code>
<ul>
<li><code>space.jpg</code></li>
</ul>
</li>
<li><code>index.html</code></li>
</ul>
<p>Limpo e organizado. No Visual Studio Code, você pode criar arquivos e pastas direto na barra lateral. Passe o mouse sobre os seus arquivos e você vai ver estes botões.</p>
<img src="/assets/img/vscode-new-folder.webp" alt="Captura de tela da janela do VS Code com uma pasta chamada 'MY-SITE' em destaque. Dentro da pasta há dois arquivos: 'index.html' e 'space.jpg.' Uma seta vermelha grande aponta para o botão 'New Folder' no canto superior direito do editor." style="max-width: 450px">
<p>Depois que você fizer as mudanças, se recarregar a página no navegador, vai notar que a nossa imagem não funciona mais. Perceba como o navegador recorre ao texto <code>alt</code> que a gente colocou, no lugar da imagem.</p>
<p><img src="/assets/img/a-website-with-style-1.webp" alt="Captura de tela da “Blake's Homepage.” Ela inclui seções: uma frase breve sobre o autor, jogos de tabuleiro favoritos e um guia de como fazer um site. A página tem texto preto simples sobre fundo branco. Há uma imagem, mas ela não está funcionando direito — no lugar aparece o texto alternativo, “Photograph of space with stars and stardust.”"></p>
<p>Isso acontece porque a gente moveu o arquivo de imagem <code>space.jpg</code> em relação à página inicial. Agora ele está numa pasta chamada <code>images</code>. A gente conserta isso atualizando o valor <code>src</code> da imagem. Coloque o nome da pasta e uma barra antes do nome do arquivo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<aside class="aside"><p class="aside-label">Mais sobre URLs</p><p>Quando a gente precisa informar o lugar dos arquivos no site — seja um link para outra página ou o caminho de uma imagem — a gente pode usar o que se chama de <em>URL relativa</em>.</p>
<p>Quando você está na página <code>index.html</code>, pense nela como o seu lugar atual. Se quiser apontar para uma imagem, precisa dizer ao navegador como encontrá-la. Uma URL relativa é um jeito de fazer isso. Ela descreve como ir “daqui até lá”, por assim dizer.</p>
<p>Parecido com o URL na barra do navegador, você usa barras para separar os níveis. O URL <code>images/space.jpg</code> significa: “procure uma pasta chamada <code>images</code> neste mesmo nível e, dentro dela, procure um arquivo chamado <code>space.jpg</code>.”</p>
</aside>
<h2 id="adicionando-o-simplecss-a-pagina" tabindex="-1"><a class="header-anchor" href="#adicionando-o-simplecss-a-pagina">Adicionando o Simple.css à página</a></h2>
<p>A gente pode adicionar uma <em>folha de estilo</em> à página de um jeito parecido com o da imagem. Vamos usar uma tag <code>&lt;link&gt;</code> para apontar para o arquivo CSS. Vamos colocá-la na tag <code>&lt;head&gt;</code> do site.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

  <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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>A tag <code>&lt;link&gt;</code> é <em>self-closing</em> — ela não tem tag de fechamento. A gente precisa dar dois <em>atributos</em>. O <code>rel</code> diz qual é a relação do arquivo que estamos ligando com a nossa página. Arquivos CSS são chamados de <em>stylesheets</em> (folhas de estilo), então a gente informa isso como a relação (no singular). O <code>href</code> é onde a gente indica o arquivo, incluindo o caminho da pasta.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>O que as pessoas costumam chamar de “links” numa página — texto ou imagens clicáveis — é feito com a tag <code>&lt;a&gt;</code>, como a gente já viu. Em geral, eles apontam para um destino para o qual a gente navega ao clicar.</p>
<p>A tag <code>&lt;link&gt;</code> indica um arquivo que a gente quer ligar à página e qual é a relação desse arquivo. Aqui a gente está usando ela para conectar uma folha de estilo. Outra relação comum é definir um ícone para o site, por exemplo.</p>
</aside>
<p>Assim, de uma vez, o nosso site se transforma. Agora a gente vê uma página centralizada, texto maior e uma fonte sans-serif.</p>
<p><img src="/assets/img/a-website-with-style-2.webp" alt="Captura de tela da “Blake's Homepage” com o estilo atualizado usando Simple.css. A tipografia mudou: o título “Blake's Homepage” agora está em negrito e maior, formando um cabeçalho mais evidente. A imagem que estava quebrada agora aparece direito, mostrando uma foto colorida de um céu estrelado. O texto está mais organizado, com melhor espaçamento, e as seções ficam claras com títulos em negrito para “Favorite board games” e “How to make a website.” O layout geral parece mais limpo e organizado, com leitura melhor."></p>
<h2 id="adicionando-um-header-um-footer-e-o-conteudo-principal" tabindex="-1"><a class="header-anchor" href="#adicionando-um-header-um-footer-e-o-conteudo-principal">Adicionando um header, um footer e o conteúdo principal</a></h2>
<p>A gente vê que o arquivo Simple.css fez efeito na hora. Mas as coisas ficam ainda melhores quando a gente adiciona algumas seções que o Simple.css espera — um <code>&lt;header&gt;</code> para o título do site e um <code>&lt;main&gt;</code> para a área de conteúdo principal. A gente não usou isso antes — não é obrigatório — mas usar é uma boa prática.</p>
<p>E isto é totalmente opcional, mas já que estamos nisso, vale adicionar um <code>&lt;footer&gt;</code> também. Às vezes as pessoas colocam informação de copyright aqui. Às vezes têm rodapés grandes, com uns montes de links. Às vezes é só o nome. Eu vou manter simples, mas você pode colocar o que quiser.</p>
<p>Então a gente coloca o nome do site numa tag <code>&lt;header&gt;</code> e o conteúdo principal na tag <code>&lt;main&gt;</code>. Depois, adiciona um <code>&lt;footer&gt;</code> com um pouco de informação.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</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>PAGE CONTENT GOES HERE<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>footer</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>Made with ❤️ and ☕️ by Blake Watson.<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>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span></code></pre>
<p>Depois desses ajustes, o título do site ganha um estilo especial, e parágrafos e listas ficam com um espaçamento mais adequado.</p>
<p><img src="/assets/img/a-website-with-style-3.webp" alt="Captura de tela da “Blake's Homepage” com mais melhorias de estilo. A página agora tem um cabeçalho claro no topo, com um fundo claro, que faz o título “Blake's Homepage” se destacar mais. O espaço entre as seções melhorou a leitura, e um rodapé novo apareceu embaixo, com o texto. Esse rodapé dá um toque pessoal. O layout geral parece mais estruturado e equilibrado visualmente."></p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você estiver acompanhando e notar que o seu site tem fundo escuro com texto claro, tudo bem! O Simple.css reconhece se você (quem visita o site) está com o sistema no modo escuro e, se estiver, usa um tema escuro no site. Para mudar esse comportamento, veja o capítulo bônus <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>.</p>
</aside>
<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2>
<p>Vamos colocar as novidades online! No Neocities, você não consegue enviar pastas pelo botão de upload. Ou você cria a pasta no painel clicando em “New Folder”, ou arrasta a pasta do computador para a área de soltar arquivos.</p>
<p><img src="/assets/img/a-website-with-style-4.webp" alt="Captura de tela do painel do Neocities da “Blake's Homepage.” A página mostra opções de gerenciamento de arquivos, incluindo enviar arquivos, criar arquivos novos e pastas novas. O URL da página do Blake e as opções de edição estão visíveis, com uma seta vermelha apontando para o botão “New Folder.”"></p>
<p>Provavelmente é mais fácil arrastar as pastas. Mas, se você criá-las na mão, precisa abrir cada pasta e enviar o conteúdo dela. Depois que uma pasta é criada, você passa o mouse sobre ela para ver as opções. Você vai querer clicar em “Manage” para abrir a pasta. Dali, pode clicar em “Upload” para enviar os arquivos certos para aquela pasta.</p>
<p>Mova arquivos que já existem renomeando-os. Por exemplo, se eu quiser mover <code>space.jpg</code> para dentro da pasta de imagens, posso clicar em “Rename” e incluir a pasta no caminho: <code>images/space.jpg</code>.</p>
<p><img src="/assets/img/a-website-with-style-5.webp" alt="Uma janela pop-up chamada “Rename / Move” mostra o caminho do arquivo “images/space.jpg” sendo editado."></p>
<p>É um pouco trabalhoso, mas não é tão ruim. Seja qual for o jeito, confira se os arquivos no Neocities batem com o que você tem no computador.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Neste capítulo a gente escreveu pouco código, mas se preparou para o que vem: organizamos as coisas, conseguimos uns estilos e separamos a página em seções.</p>
<p>O resto deste livro-web vai focar em construir o nosso site. No próximo capítulo, vamos adicionar uma página Sobre.</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-uma-pagina-sobre/">Adicionar uma página Sobre</a>
        </p>
      

      
        <p>
          <strong
            ><span role="presentation">&larr;</span> Capítulo anterior:</strong
          >
          <a href="/intervalo-melhore-seu-editor-de-texto/">Intervalo: melhore seu editor de texto</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.
