htmlepessoas.com

---
title: 'Adicionar uma página divertida'
summary: 'Adicione uma página interativa ao seu site, com conteúdo que aparece e some e vídeos do YouTube embutidos.'
permalink: 'adicionar-uma-pagina-divertida/'
originalPath: /adding-a-fun-page/
tags: chapter
layout: 'chapter.njk'
---

# 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.

```html
<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](https://demo.htmlforpeople.com/fun). Vamos usar os elementos `<details>` e `<summary>` para esse comportamento. Eles funcionam assim.

```html
<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.

@[youtube](https://youtu.be/Z9qfMCm6AYM)

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

```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).

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.

<img src="/assets/img/adding-a-fun-page-1.webp" alt="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." style="max-height: 450px">

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.

```html
<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.

```html
<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.

```html
<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.](/assets/img/adding-a-fun-page-2.webp)

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.

```html
<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.

<img src="/assets/img/adding-a-fun-page-1.webp" alt="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." style="max-height: 450px">

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.

```html
<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.](/assets/img/adding-a-fun-page-4.webp)

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>`.

```html
<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.](/assets/img/adding-a-fun-page-5.webp)

É 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.

{% aside 'Observação' %}
Infelizmente, as coisas ficam um pouco estranhas aqui. Algumas dessas opções de servidor, como Live Preview e Simple Web Server, abrem o navegador por padrão no endereço IP `127.0.0.1`. Isso é, no fundo, a mesma coisa que `localhost`, o valor que outros servidores locais usam.

Por motivos que eu não entendo por completo, os vídeos embutidos não funcionam quando a gente acessa o site pelo endereço IP. Você precisa usar `localhost`. A sorte é que isso é fácil: é só trocar `127.0.0.1` por `localhost` na barra de endereço. Se você usa o Live Preview da Microsoft, precisa ver o site no navegador, e não na janela de prévia.
{% endaside %}

Neste exemplo, eu vou usar o [WorldWideWeb](https://iconfactory.com/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.](/assets/img/intermission-installing-a-local-web-server-5.webp)

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.](/assets/img/adding-a-fun-page-6.webp)

Demais! Vou pegar mais dois vídeos.

- https://youtu.be/rDfS8B2-Mt4
- https://youtu.be/yb0DR_qRetA

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.](/assets/img/adding-a-fun-page-7.webp)

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](https://github.com/paulirish/lite-youtube-embed#readme). 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:

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

```html
<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.

- Arquivo JS: <https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js>
- Arquivo CSS: <https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css>

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.

```html
<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.

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

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

```html
<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.](/assets/img/adding-a-fun-page-8.webp)

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

```html
<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.](/assets/img/adding-a-fun-page-9.webp)

Ótimo!

## Exemplo completo do código

Para ver esta página funcionando, [confira a demonstração ao vivo](https://demo.htmlforpeople.com/fun). Aqui está o código completo da página *Fun!*.

```html
<!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.