code.pablomurad.com — htmlepessoas.com.git (gh-pages): html-reutilizavel-com-php/index.html

html-reutilizavel-com-php/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>HTML reutilizável com PHP</title>

    <meta property="og:title" content="HTML reutilizável com PHP" />
    <meta property="og:description" content="Aprenda a reutilizar elementos como menus de navegação, aproveitando a capacidade dinâmica do PHP." />
    <meta property="og:image" content="/assets/img/design/og.png" />
    <meta property="og:locale" content="pt_BR" />
    <link rel="canonical" href="https://htmlepessoas.com/html-reutilizavel-com-php/" />
    <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/html-reutilizavel-com-php/" />
    
    <link
      rel="alternate"
      hreflang="en"
      href="https://htmlforpeople.com/reusable-html-with-php/"
    />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://htmlforpeople.com/reusable-html-with-php/"
    />
    

    <!-- 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" 
          >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"
          aria-current="page"
          >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="html-reutilizavel-com-php" tabindex="-1"><a class="header-anchor" href="#html-reutilizavel-com-php">HTML reutilizável com PHP</a></h1>
<p>Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas.</p>
<p>É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa <em>PHP: Hypertext Preprocessor</em>. Sim, <a href="https://en.wikipedia.org/wiki/Recursive_acronym">a sigla faz parte do nome</a>, o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial.</p>
<p>O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS <a href="https://wordpress.org/">WordPress</a> foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. <em>Hypertext preprocessor</em> é uma boa descrição do que ela costuma fazer.</p>
<p>Quando você visita um site <em>estático</em>, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença?</p>
<p>O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em <code>example.com/user/blake</code>. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta.</p>
<p>O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social.</p>
<p>Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução <code>include</code>.</p>
<h2 id="como-executar-php" tabindex="-1"><a class="header-anchor" href="#como-executar-php">Como executar PHP</a></h2>
<p>O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP.</p>
<p>Eu recomendo o que se chama <em>hospedagem compartilhada</em>. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços).</p>
<aside class="aside"><p class="aside-label">Observação</p><p>É possível executar PHP no seu computador para testar o site antes de enviá-lo a um servidor. Porém, configurar isso fica fora do alcance deste livro.</p>
<p>O jeito mais fácil provavelmente é usar um app como <a href="https://www.apachefriends.org/">XAMPP</a> ou <a href="https://www.mamp.info">MAMP</a> (o que eu uso). Você também pode <a href="https://perma.cc/MZB9-GKBD">instalar o PHP direto no sistema</a> e usar o <a href="https://web.archive.org/web/20240711042305/https://www.php.net/manual/en/features.commandline.webserver.php">servidor de desenvolvimento embutido</a>.</p>
</aside>
<p>A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu <a href="https://perma.cc/WAD3-JCNX">perguntei no Mastodon</a>.</p>
<ul>
<li><a href="https://www.dreamhost.com/">DreamHost</a></li>
<li><a href="https://www.siteground.com/">SiteGround</a></li>
<li><a href="https://www.reclaimhosting.com/">Reclaim Hosting</a></li>
<li><a href="https://www.infinityfree.com/">InfinityFree</a></li>
</ul>
<p>E ainda tem o <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech.NET</a>, a hospedagem <a href="https://blakewatson.com/journal/why-i-host-my-websites-with-nearlyfreespeech-net/">que eu uso há anos</a>. Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade.</p>
<p>Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com <a href="https://perma.cc/P7Y7-CR6P">FTP</a>.</p>
<p>Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo.</p>
<p>O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de <code>.html</code> para <code>.php</code>. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma.</p>
<h2 id="deixar-uma-pagina-dinamica" tabindex="-1"><a class="header-anchor" href="#deixar-uma-pagina-dinamica">Deixar uma página dinâmica</a></h2>
<p>Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP.</p>
<p>Por exemplo, aqui vai uma página que mostra o ano atual.</p>
<pre class="language-php"><code class="language-php"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>
        <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>title</span><span class="token punctuation">></span></span>My website<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>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>https://unpkg.com/sakura.css/css/sakura.css<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/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>
    <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>h1</span><span class="token punctuation">></span></span>My website<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>p</span><span class="token punctuation">></span></span>The current year is: <span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">echo</span> <span class="token function">date</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Y'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></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>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida.</p>
<p>Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (<code>&lt;?php</code> e <code>?&gt;</code>).</p>
<p>O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução <code>echo</code> é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função <code>date</code> devolve a data atual — neste caso, estamos dizendo que queremos só o ano.</p>
<p>Então a função <code>date</code> roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução <code>echo</code>, que o insere no documento.</p>
<p>O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado.</p>
<h2 id="reutilizar-partes-do-seu-site" tabindex="-1"><a class="header-anchor" href="#reutilizar-partes-do-seu-site">Reutilizar partes do seu site</a></h2>
<p>Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares.</p>
<p>Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo <code>aria-current</code>, que muda conforme a página em que você está).</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/<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>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>/resume.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<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>/fun.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun!<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>Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em <em>cada página</em> e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu.</p>
<p>Primeiro, crie um arquivo chamado <code>nav.php</code>. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta <code>includes</code>, só para organizar.</p>
<p>Copie o menu de navegação da página inicial (<code>index.html</code>) e cole o conteúdo no arquivo <code>nav.php</code>. Por enquanto, remova o atributo <code>aria-current=&quot;page&quot;</code>, porque vamos precisar tornar essa parte dinâmica depois.</p>
<p>Você deve ter um arquivo <code>nav.php</code> mais ou menos 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>/<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<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.php<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>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>/resume.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<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>/fun.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun<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>O trecho acima não é só um recorte. É o <em>conteúdo inteiro</em> de <code>nav.php</code>. Ao contrário de outros arquivos HTML, que precisam de um <code>&lt;head&gt;</code>, um <code>&lt;body&gt;</code> etc., arquivos PHP podem conter um fragmento de HTML.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>No processo de converter o site de só HTML para PHP, é uma boa hora de converter todos os links internos entre páginas para URLs absolutos. Comece com uma barra <code>/</code> e escreva o caminho completo. Veja esta <a href="/intervalo-instalar-um-servidor-local/#urls-relativas-e-urls-absolutas">seção sobre URLs relativas e URLs absolutas</a> do capítulo do servidor web, se você ainda não viu.</p>
</aside>
<p>Agora vamos usar. Renomeie <code>index.html</code> para <code>index.php</code>. Apague o bloco <code>&lt;nav&gt;</code> inteiro e substitua pela seguinte linha de PHP.</p>
<pre class="language-php"><code class="language-php"><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 php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></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<span class="token entity named-entity" title="&rsquo;">&amp;rsquo;</span>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></code></pre>
<p>Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas.</p>
<h2 id="converter-paginas-html-em-php" tabindex="-1"><a class="header-anchor" href="#converter-paginas-html-em-php">Converter páginas HTML em PHP</a></h2>
<p>Os passos são, em geral, os mesmos para cada página.</p>
<ol>
<li>Mude a extensão do arquivo de <code>.html</code> para <code>.php</code>.</li>
<li>Substitua a tag <code>&lt;nav&gt;</code> pela instrução <code>include</code> do PHP.</li>
</ol>
<p>Para páginas do nível mais alto, a instrução <code>include</code> do PHP vai ficar assim:</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre>
<p>Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe <code>..</code> para subir um nível.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"../includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você se sentir à vontade com mais código, use uma variável embutida do PHP que aponta para o diretório de nível mais alto. O seguinte funciona em qualquer página. O ponto (<code>.</code>) aqui une as duas strings de texto.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">include</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'DOCUMENT_ROOT'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string double-quoted-string">"/includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre>
</aside>
<p>Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o <code>nav.php</code>.</p>
<p>Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção <code>&lt;head&gt;</code> é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai.</p>
<h2 id="bonus-destacar-dinamicamente-o-link-atual-da-navegacao" tabindex="-1"><a class="header-anchor" href="#bonus-destacar-dinamicamente-o-link-atual-da-navegacao">Bônus: destacar dinamicamente o link atual da navegação</a></h2>
<p>Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo <code>aria-current</code> no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual?</p>
<p>Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o <code>aria-current</code> automaticamente.</p>
<p>Primeiro, vamos recapitular o que este atributo significa. Se alguém vai à página Sobre, queremos que aquele link no menu seja estilizado para indicar que representa a página atual (ou anunciado por um leitor de tela, se a pessoa estiver usando um). Nesse caso, usaríamos o atributo <code>aria-current=&quot;page&quot;</code>.</p>
<p>Temos também outro cenário. Se alguém visita um post do blog, gostaríamos de destacar o link Blog na navegação. Não é exatamente a página atual — a pessoa não está na listagem do blog, para onde o link aponta, e sim num post individual. Ainda assim, seria legal destacar o link Blog porque ele representa a seção atual do site — o post é uma subpágina do blog. Nesse caso, poderíamos usar <code>aria-current=&quot;true&quot;</code>. Isso é menos específico e mais correto em termos de significado.</p>
<p>Beleza, então como adicionamos isso automaticamente com PHP?</p>
<p>Há muitos jeitos de fazer isso — e nenhum é necessariamente mais certo do que os outros — mas aqui vai o que eu acho o menos complicado.</p>
<p>Esta técnica vai exigir que a gente <em>chame uma função</em> em cada item da navegação. Fica assim.</p>
<pre class="language-php"><code class="language-php"><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>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></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<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></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>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>/resume.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<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>/fun.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<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>Vamos precisar de uma <em>função</em> personalizada chamada <code>aria_current</code> (eu te dou o código dessa função daqui a pouco). A função deve receber um <em>argumento</em>, que deve ser o texto do <code>href</code>. Depois, o trabalho da função será comparar esse pedaço de texto com o URL visitado e decidir se deve imprimir, usando <code>echo</code>, o atributo <code>aria-current</code>.</p>
<p>Você pode colocar a função no mesmo arquivo, acima da marcação HTML.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token keyword">function</span> <span class="token function-definition function">aria_current</span><span class="token punctuation">(</span><span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// If $url is an exact match for the current URL, return 'aria-current="page"'.</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="page"'</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// Otherwise it might be a sub-page, so check if the current URL contains</span>
    <span class="token comment">// $url. If it does, return 'aria-current="true"' to indicate that the link</span>
    <span class="token comment">// is an ancestor of the current page. Ignore a lone slash.</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$url</span> <span class="token operator">!==</span> <span class="token string single-quoted-string">'/'</span> <span class="token operator">&amp;&amp;</span> <span class="token function">strpos</span><span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token constant boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="true"'</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token delimiter important">?></span></span>

<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>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></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<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></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>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>/resume.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<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>/fun.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<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>Beleza, vamos por partes. Primeiro, precisamos abrir um par de tags PHP. Dentro, vamos definir uma função chamada <code>aria_current</code> com um argumento: uma variável chamada <code>$url</code>.</p>
<p>Você pode ver onde eu acrescentei algumas notas chamadas <em>comentários</em>. Toda linha que começa com duas barras (<code>//</code>) é considerada comentário e é ignorada — está ali só para quem está olhando o código.</p>
<p>O primeiro pedaço de código é uma <em>instrução if</em>. O PHP tem uma variável global chamada <code>$_SERVER</code> com todo tipo de informação, inclusive qual página está sendo visitada (o que ele chama de <code>REQUEST_URI</code>). Então pegamos isso e vemos se combina com o URL do item de navegação dado (lembre-se: estamos rodando esta função para cada item). Se combinar, vamos imprimir <code>aria-current=&quot;page&quot;</code> usando a instrução <code>echo</code>. Nesse caso, a saída aparece no ponto em que chamamos a função (que é dentro da tag <code>&lt;a&gt;</code>, onde ficam os atributos). Depois da instrução <code>echo</code>, usamos <code>return</code> para parar a função — já terminamos.</p>
<p>Se o primeiro teste não for verdadeiro, há outro teste que queremos tentar. A página atual visitada é uma subpágina do item de navegação dado?</p>
<p>Este teste tem duas partes:</p>
<ol>
<li>Primeiro, queremos ignorar a página inicial (<code>/</code>), porque ela obviamente não é subpágina de nada.</li>
<li>Segundo, vamos testar o URL passado para a função contra o URL visitado, para ver se temos uma combinação.</li>
</ol>
<p>A segunda parte do teste usa uma função chamada <code>strpos</code>. Ela recebe dois argumentos. O primeiro é um pedaço de texto no qual você quer buscar (vamos chamar de <em>palheiro</em>). O segundo é um pedaço de texto que você está procurando (vamos chamar de <em>agulha</em>). A função devolve a posição da agulha no palheiro, se encontrar. Devolve <code>false</code> se não encontrar de jeito nenhum.</p>
<p>Então, de novo, vamos olhar a variável global embutida <code>$_SERVER['REQUEST_URI']</code>. Você pode imaginar isso como algo tipo <code>/blog/my-first-post</code>. Sabemos que a pessoa está numa subpágina do blog se encontrarmos <code>/blog</code> dentro desse caminho.</p>
<p>O teste passa nesse caso, e vamos imprimir <code>aria-current=&quot;true&quot;</code> usando a instrução <code>echo</code>.</p>
<p>Se os dois testes falharem, não imprimimos nada.</p>
<p>Para recapitular: quando alguém carrega uma página no nosso site, rodamos uma função em cada item da navegação. Se o <code>href</code> do item combina com o URL atual, ou aparece em algum lugar do URL atual, imprimimos o atributo <code>aria-current</code> adequado. Caso contrário, não imprimimos nada.</p>
<p>Ufa! Se você nunca tinha programado, dê um tapinha nas próprias costas, porque agora você já programou. Se esse tipo de coisa te diverte, explore mais PHP ou dê uma olhada em JavaScript.</p>
<h2 id="conclusao" tabindex="-1"><a class="header-anchor" href="#conclusao">Conclusão</a></h2>
<p>A criação de modelos com <code>include</code> no PHP é um ótimo jeito de escrever HTML sem repetir código. O PHP tem uma barreira de entrada menor do que outras linguagens de programação, e essa é uma das razões de eu trazer o assunto. Porém, sites podem ser feitos com todo tipo de linguagem (JavaScript, Python e Ruby são outras escolhas populares). Este é o mundo dos sites dinâmicos. Fica bem selvagem se você começa a pensar em tudo o que dá para fazer com isso.</p>
<p>Includes de PHP podem ser úteis mesmo para um site pessoal pequeno. Mas também não tem problema ficar só com HTML puro! Editores como o Visual Studio Code têm busca e substituição robustas, o que permite atualizar muitos arquivos de uma vez.</p>
<p>E com isso, você terminou o último capítulo bônus de <a href="/"><em>HTML e Pessoas</em></a>! Obrigado por ler.</p>

  
  

  
    <nav
      class="mb-xl"
      style="display: flex; flex-direction: column; gap: 0.5rem;"
    >
      

      
        <p>
          <strong
            ><span role="presentation">&larr;</span> Capítulo anterior:</strong
          >
          <a href="/basico-de-css/">Básico de CSS</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.
