code.pablomurad.com — htmlepessoas.com.git (446eec89237e376f3bb80ad7f22df7f610e7bc32): introducao/index.html

introducao/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>Introdução</title>

    <meta property="og:title" content="Introdução" />
    <meta property="og:description" content="Aprenda a criar seu próprio site pessoal, mesmo sem nunca ter programado. Este guia leva você do básico de HTML até um site com várias páginas, imagens, um blog e mais." />
    <meta property="og:image" content="/assets/img/design/og.png" />
    <meta property="og:locale" content="pt_BR" />
    <link rel="canonical" href="https://htmlepessoas.com/introducao/" />
    <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/introducao/" />
    
    <link
      rel="alternate"
      hreflang="en"
      href="https://htmlforpeople.com/intro/"
    />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://htmlforpeople.com/intro/"
    />
    

    <!-- 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" aria-current="page"
          >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" 
          >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="introducao" tabindex="-1"><a class="header-anchor" href="#introducao">Introdução</a></h1>
<p>Eu não acho que sites foram feitos para serem criados só por “profissionais da web”. No fundo, um site é um documento. Quase todo mundo hoje em dia sabe fazer um documento — seja no Word, no Google Docs, em Markdown ou em outra ferramenta. HTML não deveria ser exceção. Sim, ele é um pouco mais técnico do que outros tipos de documento. Mas também é muito especial.</p>
<p>É o formato de documento da web. O humilde arquivo HTML está em todo lugar. Se você olhou um site hoje, quase certamente viu HTML.</p>
<p>HTML é resistente. Você pode olhar um site feito hoje ou um feito vinte anos atrás. Os dois usam HTML e os dois funcionam. Poucos formatos de documento podem dizer o mesmo. Você também não precisa de um programa especial para fazer um documento HTML. Existem vários, e você pode usar qualquer um. Também dá para abrir o Bloco de Notas e escrever HTML na mão (alerta de spoiler: é exatamente isso que vamos fazer).</p>
<p>Eu criei este livro na web porque queria algo para quem não se considera desenvolvedor profissional. Imagine se documentos do Word só pudessem ser feitos por “profissionais de Word”. Não. Saber escrever um pouco de HTML e colocar isso na internet é uma habilidade útil em muitos caminhos — profissionais e pessoais. Não pertence só a quem faz site de carreira. HTML é para todo mundo. HTML é para pessoas.</p>
<p>Esta 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>, a partir do original <a href="https://htmlforpeople.com">HTML for People</a>, de <a href="https://blakewatson.com/">Blake Watson</a>.</p>
<h2 id="para-quem-e-este-livro" tabindex="-1"><a class="header-anchor" href="#para-quem-e-este-livro">Para quem é este livro?</a></h2>
<p>Este livro é para quem não tem experiência anterior com programação. Eu não vou assumir que você já sabe a primeira coisa sobre HTML. Vamos começar pequeno. Mas, no fim, teremos um site pessoal completo: várias páginas, imagens, um blog e mais.</p>
<p>Eu <em>vou</em> assumir que você já usa um computador e consegue tarefas básicas, como criar arquivos e pastas. Isso é necessário porque (outro spoiler) um site, no fundo, é só arquivos e pastas.</p>
<h2 id="do-que-eu-preciso" tabindex="-1"><a class="header-anchor" href="#do-que-eu-preciso">Do que eu preciso?</a></h2>
<p>Você precisa de um computador com internet. Eu escrevi este livro de um jeito genérico, para funcionar no macOS, no Windows ou no Linux. Se eu indicar um programa para instalar, ele será gratuito (ou terá um plano grátis usável) e vai funcionar em mais de um sistema (ou eu indico uma alternativa).</p>
<h2 id="sumario" tabindex="-1"><a class="header-anchor" href="#sumario">Sumário</a></h2>
<ol>
<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">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>
</ol>
<h3 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h3>
<p>Isto é o que eu queria cobrir, mas achei que saía um pouco do foco. CSS e PHP têm uma curva de aprendizado um pouco mais íngreme do que HTML. Mesmo assim, não acho que estejam fora do alcance de quem quiser explorar. E um pouquinho de cada um já ajuda bastante. Então isto é uma degustação de cada um.</p>
<ol>
<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>
</ol>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Agora que você já sabe o <em>porquê</em> deste livro, é hora do primeiro passo. No próximo capítulo, você vai aprender a fazer um site do zero e colocá-lo na internet.</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="/do-zero-a-internet-seu-primeiro-site/">Do zero à internet: seu primeiro site</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 @ 446eec89237e376f3bb80ad7f22df7f610e7bc32

Venha aprender HTML com um método simplificado.
