Adicionar uma página divertida

Beleza, hora de se divertir! Bom, espero que tudo até aqui tenha sido divertido. Ainda assim, quero te mostrar mais algumas coisas que o HTML sabe fazer. Eu guardei esta página por último porque vamos usar algumas das tags HTML mais complexas.

Criar o arquivo

Vamos criar o fun.html na raiz da pasta do site. Use o conteúdo da página inicial como ponto de partida. Depois mude o <title> e o <h1> para Fun ou algo parecido. Esvazie o conteúdo da tag <main>.

Agora vamos dividir esta página em várias seções, no mesmo espírito do currículo.

Piadas

Primeiro, vamos adicionar uma seção de piadas.

<section>
  <h2>Jokes</h2>

  ...Jokes will go here
</section>

A ideia é mostrar a abertura da piada e esconder a punchline atrás de um clique. Você pode ver a versão ao vivo aqui. Vamos usar os elementos <details> e <summary> para esse comportamento. Eles funcionam assim.

<details>
  <summary>This content will show up by default</summary>

  <p>
    Clicking the above content will cause this hidden content to become visible.
  </p>
</details>

Aqui vai um vídeo deste elemento em ação.

Eu vou adicionar três piadas, admito, bem cafonas.

<section>
  <h2>Jokes</h2>

  <details>
    <summary>Why wouldn’t the skeleton cross the road?</summary>
    <p>It didn't have the guts.</p>
  </details>

  <details>
    <summary>Why was the math book sad?</summary>
    <p>It had too many problems.</p>
  </details>

  <details>
    <summary>Why don't scientists trust atoms?</summary>
    <p>Because they make up everything!</p>
  </details>
</section>

É um exemplo bobo. Mas os elementos <details>/<summary> ajudam sempre que você quer facilitar a leitura por cima, e deixar a pessoa aprofundar só onde quiser. Por exemplo, numa lista de perguntas frequentes (FAQ).

Usar tabelas para jogos de mesa

Agora vamos aproveitar a tabela HTML. A tag <table> e as tags ligadas a ela nos dão jeitos poderosos de mostrar informação. Para aprender, vamos criar uma tabela pequena. Mas, se você precisar mostrar muitos dados tabulares, veja a página da MDN sobre tabelas.

Em RPGs de mesa como Dungeons and Dragons, o mestre muitas vezes precisa improvisar encontros para o grupo. Um jeito de fazer isso é usar uma tabela aleatória. É uma tabela que casa o resultado dos dados com itens, criaturas ou eventos. Vamos fazer uma tabela com oito encontros possíveis que o grupo pode achar. O mestre joga um dado de oito lados e usa o encontro correspondente.

É assim que a tabela final vai ficar.

Uma tabela com o título “Roll (1d8) Encounter” e duas colunas. A coluna da esquerda lista os números de 1 a 8. A da direita lista os encontros: 1. Band of Goblins, 2. Wandering Merchant, 3. Group of Bandits, 4. Pack of Wolves, 5. Travelling Minstrels, 6. Lost Child, 7. Hidden Trap, 8. Old Hermit.

Primeiro, vou criar um <section> novo, com um título e um texto de introdução sobre D&D. Depois, apresento em poucas palavras a tabela de encontro aleatório.

<section>
  <h2>D&D stuff</h2>

  <p>
    Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures.
  </p>

  <h3>Random encounter table</h3>

  <p>
    This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
  </p>

  ...The table will go here
</section>

A gente usa a tag <table> para criar uma tabela. Uma tabela pode ter uma seção de cabeçalho e uma seção de corpo.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

A tabela precisa de duas colunas: uma para o resultado do dado e outra para o encontro correspondente. Vamos criar uma linha de tabela dentro do <thead>. Eu preencho o cabeçalho e depois explico.

<table>
  <thead>
    <tr>
      <th>Roll (1d8)</th>
      <th>Encounter</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

A tag <tr> cria uma linha de tabela (table row). Dentro dessa linha, vamos adicionar duas células. Como elas são títulos de coluna, usamos a tag de cabeçalho de tabela (table header), ou <th>: uma para o dado e outra para o resultado. Até aqui, fica assim.

Uma imagem descrevendo Dungeons & Dragons (D&D) como um jogo de mesa divertido, com criação de personagens e aventuras. Há uma seção “Random encounter table” com só os cabeçalhos de uma tabela começada.

Em seguida, a gente preenche a tabela com a tag de célula de dados (table data cell), ou <td>. Essas linhas vão dentro da seção do corpo.

<table>
  <thead>
    <tr>
      <th>Roll (1d8)</th>
      <th>Encounter</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Band of Goblins</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Wandering Merchant</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Group of Bandits</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Pack of Wolves</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Travelling Minstrels</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Lost Child</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Hidden Trap</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Old Hermit</td>
    </tr>
  </tbody>
</table>

São muitas tags! Espero que a lógica esteja clara. Dentro do <tbody>, a gente cria oito linhas de tabela, cada uma com duas células de dados. E isso nos dá a tabela final.

Tabelas HTML também sabem fazer algumas coisas de planilha, tipo uma célula ocupar várias colunas. Não vamos entrar nisso aqui. Só lembre: tabelas têm poder, se você precisar.

Vídeo embutido

Por último, mas não menos importante, vamos dar um tempero na página Fun! com alguns vídeos. Eu vou de clima synthwave. É claro que você pode pegar os vídeos do YouTube que quiser. Alguns canais não deixam o vídeo ser embutido em outros sites. Vale ter isso em mente.

Vou criar uma seção nova para os meus vídeos.

<section>
  <h2>Synthwave mixes</h2>

  ...videos will go here
</section>

Primeiro, vou pegar este mix chamado Waves (https://www.youtube.com/watch?v=b6toYA0W4IA). Se você abrir essa página, vai ver um botão de compartilhar embaixo do vídeo. Clicar nesse botão mostra várias formas de compartilhar.

Captura de tela da caixa de compartilhar do YouTube, com opções Embed, WhatsApp, Facebook, X (antigo Twitter), Email e KakaoTalk. Também há um link único com um botão “Copy” ao lado, e uma caixa para começar o vídeo numa hora específica.

Escolha “Embed”, se estiver disponível. Quando fizer isso, você vai ver um código HTML e um botão Copy. Copie o código. Você pode colar o código depois da tag <h2>.

<section>
  <h2>Synthwave mixes</h2>

  <iframe>
    width="560"
    height="315"
    src="https://www.youtube.com/embed/b6toYA0W4IA?si=-Iu68cVS5E08st5O"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</section>

Esse embed usa a tag <iframe>. Eu não vou entrar em detalhes sobre esse elemento. Em resumo, ele serve para mostrar uma página da web dentro de outra página da web. Mas, quando eu recarrego a página, aparece este erro: “Video unavailable”. Por quê?

Captura de uma página chamada “Synthwave mixes” com um player de vídeo no centro, mostrando a mensagem “Video unavailable. Watch on YouTube.” No topo, a barra de endereço indica o caminho de um arquivo local.

É porque o meu site ainda está aberto como arquivo. A gente precisa buscar dados de outro site (o YouTube). Mas os recursos de segurança do navegador impedem isso.

Rodar o nosso servidor web local

Sem pânico! Foi por isso que a gente instalou um servidor web local no capítulo anterior — aquele programinha no computador que finge ser a internet, para testar o site. Se você ainda não fez isso, inicie o servidor pelo método que você escolheu no capítulo anterior.

Neste exemplo, eu vou usar o WorldWideWeb. Quando eu aponto para a pasta do site e clico no play, o servidor sobe. Aí eu visito o endereço que ele mostra.

Captura da mesma janela. A interface mostra uma pasta de site chamada “my-site” e um servidor web com a URL “http://blakes-mac-studio.local:8080”. Há ícones de ações da pasta e botões “Reveal in Finder” e “Open Browser”. A URL e o botão Open Browser estão destacados.

Confira a barra de endereço do navegador. Garanta que você está na versão do servidor web, e não no arquivo aberto direto.

Uma página chamada “Synthwave mixes” com um player do YouTube embutido. O vídeo se chama “Waves - A Chillwave Mix Vol. 2” e tem uma capa com visual futurista, com um planeta e um feixe de luz. Agora há um endereço HTTP, e não o caminho de um arquivo local.

Demais! Vou pegar mais dois vídeos.

Vou fazer com eles o mesmo que fiz com o primeiro. Abro a página do vídeo, clico em Share, depois em Embed, e copio o código. Cole o código de cada vídeo abaixo do primeiro.

Então eu embuti os vídeos. Mas agora notei outra coisa. Seria legal se esses vídeos ocupassem a largura da página. Também vamos ver como o site fica num celular.

Com o Safari no modo de design responsivo e a janela estreita como num celular, o vídeo do YouTube ultrapassa o lado da página e aparece uma barra de rolagem horizontal.

Se eu vejo o site no modo de design responsivo do Safari e estreito a área visível, os vídeos embutidos escapam pelo lado direito da página. Não é o ideal.

Existem vários jeitos de consertar isso. A gente vai usar uma solução de terceiros.

Tags HTML personalizadas

O HTML deixa a gente criar as próprias tags. Elas se chamam tags HTML personalizadas. O nome técnico disso é Web Components. Em geral, elas misturam HTML, CSS e JavaScript para definir a cara e o comportamento do componente. Criar os nossos próprios Web Components foge do recorte deste livro. E tudo bem. A gente não precisa criar um. Dá para usar tags HTML personalizadas que outras pessoas já fizeram.

Vamos usar o Lite YouTube Embed. Leia sobre o que ele sabe fazer, se quiser. Para a gente, o objetivo é só instalar e ter um vídeo na largura inteira, que diminui direito no celular.

Antes de ver como instalar este componente, vamos ver como usá-lo. Ele oferece uma tag HTML personalizada nova, <lite-youtube>. Você dá a ela um atributo videoid, que é o ID do vídeo do YouTube. Dá para achar o ID na URL. Esta é a minha URL:

https://www.youtube.com/watch?v=b6toYA0W4IA
                                |_________|
                                 video id

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>

Bem mais limpo que o <iframe>!

Ok, vamos instalar. Precisamos de dois arquivos: um arquivo JavaScript e um arquivo CSS. Quem fez o componente disponibiliza esses arquivos. Juntos, eles têm todo o código que faz o componente parecer e funcionar direito. Vou te dar o link direto dos dois. Salve o arquivo CSS na pasta css do seu site. Depois, crie uma pasta js para o arquivo JavaScript.

Abra cada um desses links e use File > Save Page As… (Ctrl+S no Windows, Command+S no macOS). Quando os arquivos estiverem salvos, adicione-os na seção <head> da página. Deve ficar assim.

<head>
  <title>Fun - Blake's Homepage</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css/simple.css">
  <link rel="stylesheet" href="css/lite-yt-embed.min.css">
  <script src="js/lite-yt-embed.min.js"></script>
</head>

Primeiro, a gente adiciona o arquivo CSS (a ordem não importa). A gente o traz do mesmo jeito que trouxe o Simple.css, com a tag <link>. Também vamos trazer o código JavaScript. Para isso, usamos a tag <script>. Ela recebe um atributo src, que é o caminho do arquivo.

Com esses dois arquivos no lugar, a gente pode usar o componente novo. Voltando ao exemplo. Digamos que a gente tem esta URL do YouTube:

https://www.youtube.com/watch?v=b6toYA0W4IA

A gente precisa tirar o ID desta URL. Numa URL do YouTube, o ID é a parte que vem depois de v=. Neste caso, é b6toYA0W4IA. Então a gente embute o vídeo com a sintaxe abaixo.

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>

Vou fazer os outros dois vídeos do mesmo jeito.

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>

<lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube>

<lite-youtube videoid="yb0DR_qRetA"></lite-youtube>

Está ficando bom!

Uma página no modo de design responsivo com três capas de mixes synthwave. A largura dos vídeos foi corrigida, mas eles estão colados uns nos outros, na vertical. A imagem de cima tem um eclipse estilizado com o título “WAVES II: A Chillwave Mix”. A do meio mostra uma cidade neon chamada “Neon Rooftops”. A de baixo tem gráficos neon abstratos.

Vou adicionar algumas linhas horizontais para separar esses vídeos.

<lite-youtube videoid="b6toYA0W4IA"></lite-youtube>
<hr>
<lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube>
<hr>
<lite-youtube videoid="yb0DR_qRetA"></lite-youtube>

E vamos ver como eles ficam no tamanho de celular.

A mesma imagem de antes, só que agora há linhas cinza finas com um pouco de espaço separando os três vídeos na vertical.

Ótimo!

Exemplo completo do código

Para ver esta página funcionando, confira a demonstração ao vivo. Aqui está o código completo da página Fun!.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fun - Blake's Homepage</title>

    <link rel="stylesheet" href="css/simple.css">
    <link rel="stylesheet" href="css/lite-yt-embed.min.css">
    <script src="js/lite-yt-embed.min.js"></script>
  </head>

  <body>
    <header>
      <nav>
        <a href="index.html">Home</a>
        <a href="blog/index.html">Blog</a>
        <a href="about.html">About</a>
        <a href="resume.html">Resume</a>
        <a href="fun.html" aria-current="page">Fun</a>
      </nav>

      <h1>Fun</h1>
    </header>

    <main>
      <section>
        <h2>Jokes</h2>

        <details>
          <summary>Why wouldn't the skeleton cross the road?</summary>
          <p>It didn't have the guts.</p>
        </details>

        <details>
          <summary>Why was the math book sad?</summary>
          <p>It had too many problems.</p>
        </details>

        <details>
          <summary>Why don't scientists trust atoms?</summary>
          <p>Because they make up everything!</p>
        </details>
      </section>

      <section>
        <h2>D&D stuff</h2>

        <p>
          Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures.
        </p>

        <h3>Random encounter table</h3>

        <p>
          This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
        </p>

        <table>
          <thead>
            <tr>
              <th>Roll (1d8)</th>
              <th>Encounter</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Band of Goblins</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Wandering Merchant</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Group of Bandits</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Pack of Wolves</td>
            </tr>
            <tr>
              <td>5</td>
              <td>Travelling Minstrels</td>
            </tr>
            <tr>
              <td>6</td>
              <td>Lost Child</td>
            </tr>
            <tr>
              <td>7</td>
              <td>Hidden Trap</td>
            </tr>
            <tr>
              <td>8</td>
              <td>Old Hermit</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>Synthwave mixes</h2>

        <lite-youtube videoid="b6toYA0W4IA"></lite-youtube>
        <hr>
        <lite-youtube videoid="rDfS8B2-Mt4"></lite-youtube>
        <hr>
        <lite-youtube videoid="yb0DR_qRetA"></lite-youtube>
      </section>
    </main>

    <footer>
      <p>Made with ❤️ and ☕️ by Blake Watson.</p>
    </footer>
  </body>
</html>

Publicar o site

Você conseguiu! Com esta página pronta, você terminou o livro principal. Seguindo os mesmos passos dos capítulos anteriores, atualize o seu site no Neocities com esta página nova. Lembre de atualizar o menu de navegação em todas as outras páginas.

A seguir

Em seguida, a gente vai comemorar o que conquistou. E eu te aponto mais materiais de estudo, inclusive os capítulos bônus deste site.