adicionar-uma-pagina-divertida/index.html (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 |
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Adicionar uma página divertida</title>
<meta property="og:title" content="Adicionar uma página divertida" />
<meta property="og:description" content="Adicione uma página interativa ao seu site, com conteúdo que aparece e some e vídeos do YouTube embutidos." />
<meta property="og:image" content="/assets/img/design/og.png" />
<meta property="og:locale" content="pt_BR" />
<link rel="canonical" href="https://htmlepessoas.com/adicionar-uma-pagina-divertida/" />
<link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-uma-pagina-divertida/" />
<link
rel="alternate"
hreflang="en"
href="https://htmlforpeople.com/adding-a-fun-page/"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://htmlforpeople.com/adding-a-fun-page/"
/>
<!-- 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"
aria-current="page"
>Adicionar uma página divertida</a
>
</li>
<li>
<a
href="/conquista-desbloqueada-hipertextista"
>Conquista desbloqueada: Hipertextista</a
>
</li>
</ul>
<p class="menu-heading">
<strong>Capítulos bônus</strong>
</p>
<ul>
<li>
<a
href="/personalizar-o-simple-css"
>Personalizar o Simple.css</a
>
</li>
<li>
<a href="/basico-de-css"
>Básico de CSS</a
>
</li>
<li>
<a
href="/html-reutilizavel-com-php"
>HTML reutilizável com PHP</a
>
</li>
</ul>
<p class="menu-heading">
<strong>Demos e recursos</strong>
</p>
<ul>
<li>
<a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/"
>Demo da homepage do Blake</a
>
</li>
<li>
<a
target="_blank"
rel="noopener"
href="https://planets.htmlforpeople.com/"
>Demo Planetas do Sistema Solar</a
>
</li>
<li>
<a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
>Recursos e links</a
>
</li>
</ul>
</nav>
<div class="settings" hidden>
<p class="menu-heading">
<strong>Ajustes</strong>
</p>
<theme-toggle>
<label class="checkbox theme-toggle">
<input type="checkbox" /> Tema escuro
</label>
</theme-toggle>
<code-wrap>
<label class="checkbox code-wrap">
<input type="checkbox" /> Quebrar linhas do código
</label>
</code-wrap>
</div>
</details>
</div>
</header>
<main id="main-content" class="container">
<h1 id="adicionar-uma-pagina-divertida" tabindex="-1"><a class="header-anchor" href="#adicionar-uma-pagina-divertida">Adicionar uma página divertida</a></h1>
<p>Beleza, hora de se <em>divertir</em>! 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.</p>
<h2 id="criar-o-arquivo" tabindex="-1"><a class="header-anchor" href="#criar-o-arquivo">Criar o arquivo</a></h2>
<p>Vamos criar o <code>fun.html</code> na raiz da pasta do site. Use o conteúdo da página inicial como ponto de partida. Depois mude o <code><title></code> e o <code><h1></code> para <em>Fun</em> ou algo parecido. Esvazie o conteúdo da tag <code><main></code>.</p>
<p>Agora vamos dividir esta página em várias seções, no mesmo espírito do currículo.</p>
<h2 id="piadas" tabindex="-1"><a class="header-anchor" href="#piadas">Piadas</a></h2>
<p>Primeiro, vamos adicionar uma seção de piadas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jokes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
...Jokes will go here
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>A ideia é mostrar a abertura da piada e esconder a punchline atrás de um clique. Você pode <a href="https://demo.htmlforpeople.com/fun">ver a versão ao vivo aqui</a>. Vamos usar os elementos <code><details></code> e <code><summary></code> para esse comportamento. Eles funcionam assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>This content will show up by default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Clicking the above content will cause this hidden content to become visible.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span></code></pre>
<p>Aqui vai um vídeo deste elemento em ação.</p>
<div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/Z9qfMCm6AYM" frameborder="0" width="640" height="390" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<p>Eu vou adicionar três piadas, admito, bem cafonas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jokes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why wouldn’t the skeleton cross the road?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It didn't have the guts.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why was the math book sad?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It had too many problems.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why don't scientists trust atoms?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Because they make up everything!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>É um exemplo bobo. Mas os elementos <code><details></code>/<code><summary></code> 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).</p>
<h2 id="usar-tabelas-para-jogos-de-mesa" tabindex="-1"><a class="header-anchor" href="#usar-tabelas-para-jogos-de-mesa">Usar tabelas para jogos de mesa</a></h2>
<p>Agora vamos aproveitar a tabela HTML. A tag <code><table></code> 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 <em>tabulares</em>, veja a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table">página da MDN sobre tabelas</a>.</p>
<p>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.</p>
<p>É assim que a tabela final vai ficar.</p>
<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">
<p>Primeiro, vou criar um <code><section></code> 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.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>D&D stuff<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Random encounter table<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
...The table will go here
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>A gente usa a tag <code><table></code> para criar uma tabela. Uma tabela pode ter uma seção de cabeçalho e uma seção de corpo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
<p>A tabela precisa de duas colunas: uma para o resultado do dado e outra para o encontro correspondente. Vamos criar uma <em>linha de tabela</em> dentro do <code><thead></code>. Eu preencho o cabeçalho e depois explico.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Roll (1d8)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Encounter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
<p>A tag <code><tr></code> cria uma <em>linha de tabela</em> (<em>table row</em>). Dentro dessa linha, vamos adicionar duas células. Como elas são títulos de coluna, usamos a tag de <em>cabeçalho de tabela</em> (<em>table header</em>), ou <code><th></code>: uma para o dado e outra para o resultado. Até aqui, fica assim.</p>
<p><img src="/assets/img/adding-a-fun-page-2.webp" alt="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."></p>
<p>Em seguida, a gente preenche a tabela com a tag de <em>célula de dados</em> (<em>table data cell</em>), ou <code><td></code>. Essas linhas vão dentro da seção do corpo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Roll (1d8)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Encounter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Band of Goblins<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Wandering Merchant<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Group of Bandits<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pack of Wolves<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Travelling Minstrels<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Lost Child<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Hidden Trap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Old Hermit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
<p>São muitas tags! Espero que a lógica esteja clara. Dentro do <code><tbody></code>, a gente cria oito <em>linhas de tabela</em>, cada uma com duas <em>células de dados</em>. E isso nos dá a tabela final.</p>
<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">
<p>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.</p>
<h2 id="video-embutido" tabindex="-1"><a class="header-anchor" href="#video-embutido">Vídeo embutido</a></h2>
<p>Por último, mas não menos importante, vamos dar um tempero na página <em>Fun!</em> 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.</p>
<p>Vou criar uma seção nova para os meus vídeos.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Synthwave mixes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
...videos will go here
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Primeiro, vou pegar este mix chamado Waves (<a href="https://www.youtube.com/watch?v=b6toYA0W4IA">https://www.youtube.com/watch?v=b6toYA0W4IA</a>). 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.</p>
<p><img src="/assets/img/adding-a-fun-page-4.webp" alt="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."></p>
<p>Escolha “Embed”, se estiver disponível. Quando fizer isso, você vai ver um código HTML e um botão <em>Copy</em>. Copie o código. Você pode colar o código depois da tag <code><h2></code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Synthwave mixes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span><span class="token punctuation">></span></span>
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
><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Esse embed usa a tag <code><iframe></code>. 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ê?</p>
<p><img src="/assets/img/adding-a-fun-page-5.webp" alt="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."></p>
<p>É 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.</p>
<h3 id="rodar-o-nosso-servidor-web-local" tabindex="-1"><a class="header-anchor" href="#rodar-o-nosso-servidor-web-local">Rodar o nosso servidor web local</a></h3>
<p>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.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>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 <code>127.0.0.1</code>. Isso é, no fundo, a mesma coisa que <code>localhost</code>, o valor que outros servidores locais usam.</p>
<p>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 <code>localhost</code>. A sorte é que isso é fácil: é só trocar <code>127.0.0.1</code> por <code>localhost</code> 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.</p>
</aside>
<p>Neste exemplo, eu vou usar o <a href="https://iconfactory.com/worldwideweb/">WorldWideWeb</a>. Quando eu aponto para a pasta do site e clico no play, o servidor sobe. Aí eu visito o endereço que ele mostra.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-5.webp" alt="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."></p>
<p>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.</p>
<p><img src="/assets/img/adding-a-fun-page-6.webp" alt="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."></p>
<p>Demais! Vou pegar mais dois vídeos.</p>
<ul>
<li><a href="https://youtu.be/rDfS8B2-Mt4">https://youtu.be/rDfS8B2-Mt4</a></li>
<li><a href="https://youtu.be/yb0DR_qRetA">https://youtu.be/yb0DR_qRetA</a></li>
</ul>
<p>Vou fazer com eles o mesmo que fiz com o primeiro. Abro a página do vídeo, clico em <em>Share</em>, depois em <em>Embed</em>, e copio o código. Cole o código de cada vídeo abaixo do primeiro.</p>
<p>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.</p>
<p><img src="/assets/img/adding-a-fun-page-7.webp" alt="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."></p>
<p>Se eu vejo o site no <em>modo de design responsivo</em> do Safari e estreito a área visível, os vídeos embutidos escapam pelo lado direito da página. Não é o ideal.</p>
<p>Existem vários jeitos de consertar isso. A gente vai usar uma solução de terceiros.</p>
<h3 id="tags-html-personalizadas" tabindex="-1"><a class="header-anchor" href="#tags-html-personalizadas">Tags HTML personalizadas</a></h3>
<p>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.</p>
<p>Vamos usar o <a href="https://github.com/paulirish/lite-youtube-embed#readme">Lite YouTube Embed</a>. 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.</p>
<p>Antes de ver como instalar este componente, vamos ver como usá-lo. Ele oferece uma tag HTML personalizada nova, <code><lite-youtube></code>. Você dá a ela um <em>atributo</em> <code>videoid</code>, que é o ID do vídeo do YouTube. Dá para achar o ID na URL. Esta é a minha URL:</p>
<pre>https://www.youtube.com/watch?v=b6toYA0W4IA
|_________|
video id</pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>Bem mais limpo que o <code><iframe></code>!</p>
<p>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 <code>css</code> do seu site. Depois, crie uma pasta <code>js</code> para o arquivo JavaScript.</p>
<ul>
<li>Arquivo JS: <a href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js">https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js</a></li>
<li>Arquivo CSS: <a href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css">https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css</a></li>
</ul>
<p>Abra cada um desses links e use <em>File > Save Page As…</em> (Ctrl+S no Windows, Command+S no macOS). Quando os arquivos estiverem salvos, adicione-os na seção <code><head></code> da página. Deve ficar assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Fun - Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/lite-yt-embed.min.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"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/lite-yt-embed.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>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 <code><link></code>. Também vamos trazer o código JavaScript. Para isso, usamos a tag <code><script></code>. Ela recebe um atributo <code>src</code>, que é o caminho do arquivo.</p>
<p>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:</p>
<p><a href="https://www.youtube.com/watch?v=b6toYA0W4IA">https://www.youtube.com/watch?v=b6toYA0W4IA</a></p>
<p>A gente precisa tirar o ID desta URL. Numa URL do YouTube, o ID é a parte que vem depois de <code>v=</code>. Neste caso, é <code>b6toYA0W4IA</code>. Então a gente embute o vídeo com a sintaxe abaixo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>Vou fazer os outros dois vídeos do mesmo jeito.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rDfS8B2-Mt4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yb0DR_qRetA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>Está ficando bom!</p>
<p><img src="/assets/img/adding-a-fun-page-8.webp" alt="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."></p>
<p>Vou adicionar algumas <em>linhas horizontais</em> para separar esses vídeos.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rDfS8B2-Mt4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yb0DR_qRetA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>E vamos ver como eles ficam no tamanho de celular.</p>
<p><img src="/assets/img/adding-a-fun-page-9.webp" alt="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."></p>
<p>Ótimo!</p>
<h2 id="exemplo-completo-do-codigo" tabindex="-1"><a class="header-anchor" href="#exemplo-completo-do-codigo">Exemplo completo do código</a></h2>
<p>Para ver esta página funcionando, <a href="https://demo.htmlforpeople.com/fun">confira a demonstração ao vivo</a>. Aqui está o código completo da página <em>Fun!</em>.</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</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"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>title</span><span class="token punctuation">></span></span>Fun - Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/lite-yt-embed.min.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"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/lite-yt-embed.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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 punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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/index.html<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"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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 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>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jokes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why wouldn't the skeleton cross the road?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It didn't have the guts.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why was the math book sad?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It had too many problems.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why don't scientists trust atoms?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Because they make up everything!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>D&D stuff<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Random encounter table<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Roll (1d8)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Encounter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Band of Goblins<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Wandering Merchant<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Group of Bandits<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pack of Wolves<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Travelling Minstrels<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Lost Child<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Hidden Trap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Old Hermit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Synthwave mixes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rDfS8B2-Mt4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yb0DR_qRetA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Made with ❤️ and ☕️ by Blake Watson.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<h2 id="publicar-o-site" tabindex="-1"><a class="header-anchor" href="#publicar-o-site">Publicar o site</a></h2>
<p>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.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>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.</p>
<nav
class="mb-xl"
style="display: flex; flex-direction: column; gap: 0.5rem;"
>
<p>
<strong><span role="presentation">→</span> Próximo capítulo:</strong>
<a href="/conquista-desbloqueada-hipertextista/">Conquista desbloqueada: Hipertextista</a>
</p>
<p>
<strong
><span role="presentation">←</span> Capítulo anterior:</strong
>
<a href="/intervalo-instalar-um-servidor-local/">Intervalo: instalar um servidor local</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&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
>
·
<a href="/printable">Versão para imprimir</a>
·
<a href="https://github.com/blakewatson/htmlforpeople">GitHub</a>
·
<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>
|