deploy: f4f66e4dceae77ddd19130e6faa14d64504b84da
runawaydevil runawaydevil@users.noreply.github.com
Fri, 11 Sep 2026 18:56:17 +0000
117 files changed,
13947 insertions(+),
0 deletions(-)
jump to
A
adicionar-conteudo-ao-seu-site/index.html
@@ -0,0 +1,631 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Adicionar conteúdo ao seu site</title> + + <meta property="og:title" content="Adicionar conteúdo ao seu site" /> + <meta property="og:description" content="Aprenda a adicionar conteúdo como títulos, links, imagens e listas a uma página usando tags HTML." /> + <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-conteudo-ao-seu-site/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-conteudo-ao-seu-site/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/add-content-to-your-website/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/add-content-to-your-website/" + /> + + + <!-- 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" + aria-current="page" + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="adicionar-conteudo-ao-seu-site" tabindex="-1"><a class="header-anchor" href="#adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a></h1> +<p>Primeiro, dá um tapinha nas próprias costas: você já tem um site caseiro no ar! Agora é hora de deixá-lo mais interessante.</p> +<aside class="aside"><p class="aside-label">Quem usa Windows</p><p>Se você está tentando abrir o arquivo <code>index.html</code> no Bloco de Notas, mas não o vê na pasta do site ao usar <em>File > Open</em>, encontre o menu <em>Text Documents</em> no canto inferior direito da janela Abrir e mude para <em>All Files</em>.</p> +</aside> +<h2 id="adicione-um-titulo" tabindex="-1"><a class="header-anchor" href="#adicione-um-titulo">Adicione um título</a></h2> +<p>Vamos dar um nome a ele! Depende do tipo de site que você está fazendo, mas o meu vai ser uma página pessoal. Todo mundo tem perfil em rede social, mas esses perfis são sem graça e parecidos demais. A gente merece <em>mais</em>. E nossa velha amiga, a homepage pessoal, é um lugar perfeito para começar.</p> +<pre class="language-plaintext"><code class="language-plaintext">Blake's Homepage + +My name is Blake. I enjoy making websites and teaching others to do the same.</code></pre> +<p>Legal! Vamos ver no navegador.</p> +<p><img src="/assets/img/add-content-1.webp" alt="Uma página simples. A única linha de texto na página diz: "Blake's Homepage My name is Blake. I enjoy making websites and teaching others to do the same.""></p> +<p>Bem, não era isso que a gente queria. O navegador espremeu o texto numa linha só. Ué?!</p> +<p>Está faltando a <em>marcação</em> do Hypertext <em>Markup</em> Language. (Marcação, ou markup, é o código que diz ao navegador o que cada pedaço do texto é.) Precisamos dizer ao navegador que o nome do site deve ser um título. Em HTML, você pode ter até seis níveis de títulos. Vamos definir o nome do site como o título mais importante, um <em>título de nível 1</em>, ou <code><h1></code>.</p> +<p>O que é esse código estranho em forma de pílula que eu acabei de escrever? É chamado de tag HTML. (Uma tag é um pedaço de código que envolve partes da página para dizer ao navegador o que elas são.) Vamos fazer isso agora.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p>Aqui, separamos os dois elementos da nossa página e envolvemos cada um em tags. Estamos dizendo que o nome do site deve ser um título de nível 1, e que o primeiro parágrafo deve ser, bem, um <em>parágrafo</em> — é o que o <code>p</code> significa.</p> +<p>Repare que um par de tags tem uma tag de <em>abertura</em> e uma tag de <em>fechamento</em>. A tag de fechamento é idêntica à de abertura, só que começa com uma barra, <code>/</code>.</p> +<p>Agora salve o arquivo e recarregue o navegador. Esse costuma ser o ritmo de criar um site: você muda um pouco de código, salva e aperta recarregar no navegador. Depois, sinta o poder correndo nas veias enquanto você cria um site do nada!</p> +<p><img src="/assets/img/add-content-2.webp" alt="Um navegador mostra uma página simples, com um título grande e em negrito: "Blake's Homepage." O conteúdo diz: "My name is Blake. I enjoy making websites and teaching others to do the same.""></p> +<p>Uau, bem melhor! Vamos continuar adicionando mais conteúdo.</p> +<h2 id="links-para-outros-sites" tabindex="-1"><a class="header-anchor" href="#links-para-outros-sites">Links para outros sites</a></h2> +<p>Você já se perguntou por que se chama <em>the web</em>? Tipo, o que isso significa? O ingrediente especial que faz dela uma teia é o <em>hiperlink</em>, ou, como a gente costuma chamar, um <em>link</em>. Sabe, aquele texto muitas vezes azul, muitas vezes sublinhado, que você clica para pular para outra página, outro site, uma imagem, um vídeo de gato, qualquer coisa!</p> +<p>Isso é possível graças ao elemento <em>anchor</em>, ou “tag A”, como é conhecido. Fica assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>This will go somewhere eventually<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>Tudo que está dentro das tags <code><a></code> vira clicável. Mas para onde o link nos leva? Por enquanto, para lugar nenhum. Precisamos indicar um destino. Fazemos isso dando à <code><a></code> um <em>atributo</em> chamado <code>href</code>. É a <em>hypertext reference</em> — o lugar para onde você quer ir quando clica no link.</p> +<pre class="language-html"><code class="language-html"><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>https://www.wikipedia.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to Wikipedia<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>Vamos adicionar um link ao nosso site — escolha um dos seus sites favoritos, ou algo divertido e interessante.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. +<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>p</span><span class="token punctuation">></span></span> + Check out these cool web games at <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>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.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>p</span><span class="token punctuation">></span></span></code></pre> +<p>Salve e recarregue!</p> +<p><img src="/assets/img/add-content-3.webp" alt="Captura de tela de um navegador mostrando "Blake's Homepage." O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same. Check out these cool web games at Neal.fun!" A página tem um visual simples, com texto preto em fundo branco, e inclui um link."></p> +<p>Com a ajuda da humilde tag <code><a></code>, o seu site vira parte da web viva, que respira. Existem mais de cem tags HTML, mas você não precisa decorá-las para fazer um site. Dá para fazer muito com pouca coisa. Vamos ver mais algumas tags que já te colocam no caminho.</p> +<h2 id="listas-de-coisas" tabindex="-1"><a class="header-anchor" href="#listas-de-coisas">Listas de coisas</a></h2> +<p>Fãs de lista, este conjunto de tags é para vocês. Vamos usar o elemento <em>unordered list</em>, <code><ul></code>, para adicionar uma lista com marcadores. O <code><ul></code> define a lista, e a tag <em>list item</em>, <code><li></code>, define cada item. Assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>The first thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>And lastly, this thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>O código acima vira uma lista com marcadores, deste jeito:</p> +<ul> +<li>The first thing</li> +<li>Another thing</li> +<li>And lastly, this thing</li> +</ul> +<p>Se você quiser uma lista numerada, troque <code><ul></code> por <code><ol></code> (de <em>ordered list</em>). Só isso! Você vai criar uma lista numerada.</p> +<ol> +<li>The first thing</li> +<li>Another thing</li> +<li>And lastly, this thing</li> +</ol> +<p>Vamos adicionar uma lista ao nosso site. Aqui está o site inteiro até agora:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. +<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>p</span><span class="token punctuation">></span></span> + Check out these cool web games at <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>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.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>p</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>Favorite board games<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>How to make a website<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>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre> +<p>Olha só, isso está começando, aos poucos, a parecer um site de verdade!</p> +<p><img src="/assets/img/add-content-4.webp" alt="Uma página da web intitulada "Blake's Homepage" é exibida. Ela inclui seções sobre jogos de tabuleiro favoritos (Dungeons & Dragons, Risk, Pandemic) e instruções de como fazer um site: 1. Create an HTML file, 2. Write some HTML in it, 3. Open it with a web browser."></p> +<p>Você vai notar que eu escorreguei uma tag nova ali sem avisar. É um <em>título de nível 2</em>, ou tag <code><h2></code>. Títulos dão estrutura à página e facilitam para os visitantes acharem o que querem.</p> +<p>Há outra diferença sutil entre as tags que temos usado. Algumas, como a tag <code><a></code>, são <em>elementos em linha</em> (inline): elas não começam uma linha nova e ocupam só a largura necessária. Outras tags — como <code><h1></code>, <code><ul></code> e <code><p></code> — são conhecidas como <em>elementos de bloco</em> (block). Um elemento de bloco começa numa linha nova e ocupa a largura inteira do recipiente.</p> +<p>Até agora temos um monte de palavras. Mas você sabe o que vale por mil delas?</p> +<h2 id="adicione-imagens-ao-seu-site" tabindex="-1"><a class="header-anchor" href="#adicione-imagens-ao-seu-site">Adicione imagens ao seu site</a></h2> +<p>Vamos colocar uma imagem legal no nosso site. Pode ser tentador ir no Google Imagens e pegar a primeira coisa que aparecer. Não é o caminho. Você precisa ter os direitos certos para usar a imagem. Há muitos lugares na web para achar imagens (procure imagens com licença Creative Commons). Para simplificar, vamos usar o site popular de imagens grátis <a href="https://unsplash.com">Unsplash</a>.</p> +<p>Eu achei uma imagem legal do espaço. Baixei a versão pequena e renomeei para <code>space.jpg</code>, para ficar mais fácil de citar. Ache uma imagem que você goste e solte na pasta, ao lado do seu <code>index.html</code>.</p> +<p>Você pode adicioná-la à página usando a <em>tag de imagem</em>, ou <code><img></code>. Diferente das tags que vimos até agora, a tag <code><img></code> é <em>auto-fechável</em>. Isso significa que não existe tag de fechamento. Fica assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<p>Assim como a tag <code><a></code>, a tag <code><img></code> usa atributos para dar mais informação sobre como você quer usá-la.</p> +<p>Use o atributo <code>src</code> para dizer à tag de imagem a <em>fonte</em> (source) da sua imagem, ou seja, onde ela está. Neste exemplo, estamos dizendo que a imagem está na mesma pasta que a nossa página <code>index.html</code> (e não numa subpasta) e que o nome do arquivo é <code>space.jpg</code>.</p> +<p>Também precisamos descrever a imagem, caso algum visitante do nosso site não consiga vê-la. Isso pode acontecer por vários motivos — talvez a pessoa seja cega e use um leitor de tela para acessar sites. Ou talvez um problema faça a imagem não carregar. Se isso acontecer, o nosso texto <em>alternativo</em>, ou texto <code>alt</code>, aparece no lugar.</p> +<p>Vamos salvar e atualizar o navegador.</p> +<p><img src="/assets/img/add-content-5.webp" alt="Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site."></p> +<p>Eu redimensionei a janela para a página inteira caber na captura. Mas se você estiver vendo uma barra de rolagem, está tudo bem!</p> +<p>Dependendo da sua imagem, você pode querer deixá-la menor ou maior. Dá para usar os atributos <code>width</code> e/ou <code>height</code> para isso. Se você indicar <em>só</em> a largura ou <em>só</em> a altura, o navegador mantém a <em>proporção</em> da imagem — ela não estica nem amassa. Para definir largura ou altura, você informa um número, que representa uma quantidade de pixels.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<p>Se definirmos o <code>width</code> como <code>300</code>, fica assim:</p> +<p><img src="/assets/img/add-content-8.webp" alt="Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. A imagem está bem menor do que na captura anterior. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site."></p> +<h2 id="adicione-notas-ao-seu-codigo" tabindex="-1"><a class="header-anchor" href="#adicione-notas-ao-seu-codigo">Adicione notas ao seu código</a></h2> +<p>Às vezes você quer colocar notas no código — texto que não aparece na página, mas continua visível no código. Você pode fazer isso para organizar um documento, deixar recados (como tarefas) para o você do futuro, ou até esconder um trecho em andamento que ainda não deve aparecer.</p> +<p>Por exemplo, eu poderia deixar um recado para voltar depois e atualizar meus jogos de tabuleiro favoritos.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Favorite board games<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Todo: after playing some new games, +see if any deserve to make this list. --></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>O navegador ignora tudo que está entre <code><!--</code> e <code>--></code> e não mostra isso na página. Esse tipo de texto se chama <em>comentário</em>. Comentários são um jeito legal de anotar o código, porque só aparecem no código — não na página pronta.</p> +<p>Aqui vai outro exemplo, em que eu envolvi várias tags HTML dentro de um comentário. Nada do comentário aparece na página — só no código-fonte.</p> +<pre class="language-html"><code class="language-html"><span class="token comment"><!-- +Work in progress. When I finalize this list, I'll remove the comment markers. + +<h2>Favorite board games</h2> + +<ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> +</ul> +--></span></code></pre> +<p><strong>O seu código HTML é público, inclusive os comentários.</strong> Qualquer pessoa pode ver o código-fonte do seu site, então não coloque nada secreto ou sensível dentro de comentários. Para ver o código-fonte de uma página, você pode usar um atalho do teclado ou achar a opção no menu do navegador. Varia de navegador para navegador. Veja esta <a href="https://perma.cc/3WP3-R9XL">referência no Lifewire</a>.</p> +<h2 id="de-ao-seu-site-uma-cabeca-e-um-corpo" tabindex="-1"><a class="header-anchor" href="#de-ao-seu-site-uma-cabeca-e-um-corpo">Dê ao seu site uma cabeça e um corpo</a></h2> +<p>Eu não fui totalmente honesto com você até agora. A gente tomou um atalho. Temos escrito <em>só</em> o que o navegador mostra no arquivo <code>index.html</code>. Mas todo site tem uma seção invisível. E agora o seu precisa dela.</p> +<p>Lembra que a gente envolve a maioria dos elementos em tags? Na verdade, precisamos envolver a página inteira na tag <code><html></code>. Uma página HTML ainda se divide numa seção invisível <code><head></code>, com informações sobre o seu site, e no <code><body></code>, onde vai todo o seu conteúdo.</p> +<pre class="language-html"><code class="language-html"><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 comment"><!-- info about your site goes here --></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 comment"><!-- stuff you want to show up on your page goes here --></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> +<p>Para deixar nosso documento HTML oficial, vamos adicionar uma linha <code>doctype</code> bem no começo. O doctype existe principalmente por razões históricas, mas ele diz ao navegador: “Oi, eu sou um documento HTML, então por favor me mostre do jeito certo!” Pode copiar e colar essa linha e seguir em frente — não sinta que precisa decorar cada detalhe.</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>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>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> +<p>Por enquanto, vamos incluir duas coisas no <code><head></code>: uma tag title e uma tag meta.</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>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>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>head</span><span class="token punctuation">></span></span></code></pre> +<p>A tag <code><title></code> controla o texto que aparece na aba do navegador e o nome do seu site quando ele surge nos resultados de busca. Legal!</p> +<p>Podemos usar a tag <code><meta></code> várias vezes para dar ao navegador informações extras sobre a página. Neste caso, estamos dizendo qual <em>conjunto de caracteres</em> usar. O que você precisa saber: texto UTF-8 significa que símbolos especiais, como emojis, aparecem como se espera. Vamos incluir isso primeiro, antes de qualquer outro elemento de texto, para garantir que todo o nosso texto apareça direito.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se tantas tags extras estiverem te confundindo, saiba que você pode copiar e colar esta estrutura inicial. Assim você não precisa lembrar de tudo agora!</p> +</aside> +<p>Aqui está o arquivo <code>index.html</code> inteiro, para consulta:</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>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>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>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>img</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>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. + <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>p</span><span class="token punctuation">></span></span> + Check out these cool web games at + <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>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.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>p</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>Favorite board games<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>How to make a website<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>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</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="atualize-o-seu-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-seu-site-no-ar">Atualize o seu site no ar</a></h2> +<p>Essas mudanças estão ficando bem legais. Vamos publicar esta página para o mundo. Vá ao <a href="https://neocities.org/dashboard">painel do seu Neocities</a>. Você vai ver os arquivos iniciais mais o arquivo <code>index.html</code> que você enviou no capítulo 1 deste livro. Para deixar um pouco mais limpo, eu estou mudando para a visualização em lista e apagando a imagem PNG e o arquivo CSS que estavam lá no começo.</p> +<p><img src="/assets/img/add-content-6.webp" alt="Captura de tela de um painel do Neocities. O cabeçalho diz "My Cool Website", com o endereço "blakewatson.neocities.org" embaixo. Mostra detalhes de uso de arquivos e lista dois arquivos, "index.html" e "not_found.html", com opções para editar ou apagar."></p> +<p>Agora clique no botão <em>Upload</em> ou simplesmente arraste seus arquivos atualizados (a página index e a imagem) para a lista de arquivos.</p> +<p>Feito isso, clique no link do seu site no topo do painel. Esse é o seu site NO AR, recém-atualizado, feito do zero por você. Que demais!</p> +<p><img src="/assets/img/add-content-7.webp" alt="Captura de tela de um navegador visitando "Blake's Homepage" (o mesmo site de antes). O endereço é blakewatson.neocities.org. A página tem seções sobre jogos de tabuleiro favoritos, incluindo Dungeons & Dragons, Risk e Pandemic, e instruções de como fazer um site."></p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>No próximo capítulo, vamos fazer um intervalo breve e pegar um editor de texto feito para escrever HTML.</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="/intervalo-melhore-seu-editor-de-texto/">Intervalo: melhore seu editor de texto</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/do-zero-a-internet-seu-primeiro-site/">Do zero à internet: seu primeiro site</a> + </p> + + </nav> + + + </main> + + + + + <elevator-button title="Ir para o menu"> + <a href="#main-menu"> + <span class="sr-only">Ir para o menu</span> + </a> + </elevator-button> + + <div class="sticky-footer" style="margin-block-start: auto"> + <div class="promo"> + <div class="container"> + <p class="promo-title">Gostou do livro?</p> + <div class="stack"> + <p> + <em>HTML e Pessoas</em> é a tradução de um trabalho feito com + carinho. Se puder, considere enviar uma doação no Ko-fi para o + autor original, Blake Watson, e compartilhar o livro nas redes + sociais. + </p> + + <p> + <a href="https://ko-fi.com/blakewatson" class="button" + >Doar no Ko-fi</a + > + </p> + + <p>Confira outros projetos do Blake:</p> + <ul> + <li> + <a href="https://afinestart.me" + >Uma extensão minimalista de nova aba</a + > + </li> + <li> + <a href="https://synthwave.live/">Um site de mix synthwave</a> + </li> + <li> + <a href="https://minimalcharactersheet.com/" + >Uma ficha minimalista para D&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>
A
adicionar-um-blog/index.html
@@ -0,0 +1,682 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Adicionar um blog</title> + + <meta property="og:title" content="Adicionar um blog" /> + <meta property="og:description" content="Adicione um blog ao seu site estático e faça um tour rápido pelas tags HTML que você pode usar para enriquecer o conteúdo." /> + <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-um-blog/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-um-blog/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/adding-a-blog/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/adding-a-blog/" + /> + + + <!-- 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" aria-current="page" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="adicionar-um-blog" tabindex="-1"><a class="header-anchor" href="#adicionar-um-blog">Adicionar um blog</a></h1> +<p>Blogs são uma parte enorme da web. Você provavelmente já ouviu falar de várias plataformas populares de blog, como WordPress, Tumblr e Blogger. E existem um monte de <a href="https://perma.cc/K3PV-JL9S">plataformas menores e independentes</a>.</p> +<p>Mas você não <em>precisa</em> de uma dessas plataformas para ter um blog. Um blog é só uma série de posts em ordem cronológica (em geral, cronológica <em>inversa</em>, com os posts mais novos primeiro). A gente consegue fazer isso com HTML!</p> +<p>Eu vou adicionar três posts. Não vou colocar todo o código neste capítulo, porque ficaria um pouco longo demais. Você pode olhar o site de demonstração para ver os artigos prontos. Mas eu <em>vou</em> te mostrar como estruturar os arquivos e passar por algumas das tags HTML diferentes que a gente pode usar.</p> +<h2 id="crie-a-home-do-blog" tabindex="-1"><a class="header-anchor" href="#crie-a-home-do-blog">Crie a home do blog</a></h2> +<p>Siga estes passos para deixar o blog disponível em <code>sitename.neocities.org/blog</code>.</p> +<ol> +<li>Crie uma pasta chamada <code>blog</code>; dentro dela, crie um arquivo chamado <code>index.html</code>.</li> +<li>Copie o conteúdo de uma das suas outras páginas e cole neste <code>index.html</code> novo e vazio.</li> +<li>Mude o <code><h1></code> para “Blog”, “Meu blog” ou o nome que você quiser.</li> +<li>Mude o <code><title></code> para alterar o que aparece na aba. Por exemplo, “Blog - Blake’s Homepage.”</li> +<li>Limpe o conteúdo principal para ficar com uma tag <code><main></code> vazia. A gente adiciona conteúdo depois.</li> +</ol> +<p>Vamos abrir no navegador e ver como ficou.</p> +<p><img src="/assets/img/adding-a-blog-1.webp" alt="Captura de tela da página “Blog” no site do Blake. A página tem pouco estilo porque as referências de arquivo estão quebradas. O layout é simples e sem estilo, com texto preto comum sobre fundo branco. O cabeçalho tem links para “Home” e “About” em azul e sublinhados, no estilo padrão do navegador. O título principal “Blog” está em negrito e grande, mas a aparência geral não tem o desenho estruturado das páginas anteriores."></p> +<p>Opa, a gente quebrou; o que aconteceu!? Tem a ver com a estrutura de arquivos. Olhe a tag <code><link></code>, onde a gente adicionou os estilos do Simple.css.</p> +<pre class="language-html"><code class="language-html"><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></code></pre> +<p>Ela está procurando <code>css/simple.css</code>, mas não encontra. Por quê? O caminho que a gente deu é <em>relativo</em> ao arquivo atual. O arquivo atual está na pasta <code>blog</code>, então ela procura <code>blog/css/simple.css</code>, que não existe.</p> +<p>Então, como a gente se refere a arquivos que não estão na pasta atual? A gente pode usar a sintaxe <code>..</code>, assim.</p> +<pre class="language-html"><code class="language-html"><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></code></pre> +<p>Isso significa: “suba um nível e, então, procure css/simple.css.”</p> +<p><img src="/assets/img/adding-a-blog-2.webp" alt="Captura de tela da página “Blog” no site do Blake, agora com o estilo corrigido. A página mostra um cabeçalho claro, com botões arredondados para “Home” e “About,” melhorando a navegação. O título principal “Blog” está bem no centro, em negrito, com uma hierarquia visual clara. O rodapé tem uma linha fina de divisão acima e o texto centralizado."></p> +<p>Bem melhor! Agora, vamos atualizar a navegação. Como a página inicial e a página Sobre não estão na pasta atual, a gente precisa usar a mesma sintaxe <code>..</code> para criar o link até elas.</p> +<pre class="language-html"><code class="language-html"><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>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>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>nav</span><span class="token punctuation">></span></span></code></pre> +<p>Você também precisa atualizar a navegação nas outras páginas para incluir um link para o blog. Por exemplo, o nav da página inicial 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>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 attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>nav</span><span class="token punctuation">></span></span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Como a gente está abrindo os arquivos do site direto no navegador, está usando <em>URLs relativas</em> para formar os links para outras páginas e arquivos. Num capítulo que vem aí, a gente vai aprender a <a href="/intervalo-instalar-um-servidor-local">rodar um servidor web local</a> e como isso nos permite usar <em>URLs absolutas</em>, que são mais diretas.</p> +</aside> +<h2 id="crie-o-primeiro-post" tabindex="-1"><a class="header-anchor" href="#crie-o-primeiro-post">Crie o primeiro post</a></h2> +<p>Eu vou escrever um post bobo sobre ensinar HTML a um gato. Vou criar um arquivo <code>2024-04-12-whiskers.html</code> na pasta <code>blog</code>. Você pode nomear o arquivo do post como quiser. O legal de incluir a data é que, conforme você cria mais posts, eles aparecem em ordem no sistema de arquivos do computador.</p> +<p>Como ponto de partida, a gente copia o conteúdo de <code>blog/index.html</code> para o arquivo novo. Eu vou mudar o <code><h1></code> (e o <code><title></code>) para o nome do meu artigo, “How I taught my cat to make a website with HTML.” Também vou ajustar a navegação. A gente não está na página de listagem do Blog, então não é correto dizer <code>aria-current="page"</code> no link do blog. Mas <em>está</em> dentro da seção Blog do site. Então eu vou mudar o atributo para o mais geral <code>aria-current="true"</code>. Isto é <strong>só para páginas de posts individuais</strong>.</p> +<pre class="language-html"><code class="language-html"><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>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<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>nav</span><span class="token punctuation">></span></span></code></pre> +<p>No fim do post, eu vou adicionar um link de volta ao blog. Como a gente já está na pasta <code>blog</code>, um link para <code>index.html</code> é tudo que a gente precisa para chegar à home do blog.</p> +<pre class="language-html"><code class="language-html"><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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="←">&larr;</span> Back to the blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>O pedaço <code>class="button"</code> é um estilo que o Simple.css oferece e que faz um link de texto parecer um botão. O <code>&larr;</code> é um código especial chamado de <em>entidade HTML</em>. Elas servem para representar caracteres especiais. Esta daqui é uma <em>seta para a esquerda</em>. Você pode ver uma <a href="https://perma.cc/BEA6-LF46">lista de outras entidades aqui</a>.</p> +<p>Eu vou adicionar três posts com uns poucos dias de diferença, só como exemplo. Quando eu terminar, vou ter estes posts.</p> +<ul> +<li><a href="https://demo.htmlforpeople.com/blog/2024-04-12-whiskers.html">How I taught my cat to make a website with HTML</a></li> +<li><a href="https://demo.htmlforpeople.com/blog/2024-04-15-aliens.html">The time I built a website for aliens</a></li> +<li><a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">Why donuts are the best thing ever</a></li> +</ul> +<p>A minha estrutura de arquivos vai ficar assim:</p> +<ul> +<li><code>blog</code> +<ul> +<li><code>2024-04-12-whiskers.html</code></li> +<li><code>2024-04-15-aliens.html</code></li> +<li><code>2024-04-20-donuts.html</code></li> +<li><code>index.html</code></li> +</ul> +</li> +<li><code>css</code> +<ul> +<li><code>simple.css</code></li> +</ul> +</li> +<li><code>images</code> +<ul> +<li><code>blake.jpg</code></li> +<li><code>space.jpg</code></li> +</ul> +</li> +<li><code>about.html</code></li> +<li><code>index.html</code></li> +</ul> +<h2 id="formatacao-de-texto" tabindex="-1"><a class="header-anchor" href="#formatacao-de-texto">Formatação de texto</a></h2> +<p>Vamos ver algumas tags que você pode usar nos posts e em outras páginas.</p> +<p>Para negrito e itálico, a gente pode usar as tags <code><strong></code> e <code><em></code>, nesta ordem.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + After just three days, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Whiskers can now create web pages<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> better than <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>I<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> can! +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p>Isso renderiza assim.</p> +<p><img src="/assets/img/adding-a-blog-3.webp" alt="A captura de tela do texto renderizado mostra o seguinte em negrito: “Whiskers can now create web pages”"></p> +<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2> +<p>A gente pode usar a tag <code><blockquote></code> para citar uma pessoa, um livro, outro site ou até a si mesmo.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span> + "HTML is <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>elementary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> my dear Watson."<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="—">&mdash;</span> Whiskers, probably<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span></code></pre> +<p>Aqui eu estou usando <code><strong></code> para dar ênfase extra. Estou usando a tag <code><cite></code> para mostrar a fonte da citação. A tag <code><br></code>, que é <em>self-closing</em>, cria uma quebra de linha manual, o que empurra o elemento <code><cite></code> para a linha seguinte. Eu usei outro caractere especial, <code>&mdash;</code>, para criar um <a href="https://practicaltypography.com/hyphens-and-dashes.html"><em>travessão</em> (em dash)</a>.</p> +<p><img src="/assets/img/adding-a-blog-4.webp" alt="Uma citação em bloco estilizada, renderizada no navegador. A frase “HTML is elementary my dear Watson.” está em itálico, e a palavra “elementary” também está em negrito. Uma barra vertical azul aparece à esquerda da citação, dando ênfase visual. Abaixo da citação, a atribuição “— Whiskers, probably” aparece numa fonte menor, alinhada à esquerda, criando uma atribuição visualmente distinta."></p> +<p>Citações em bloco costumam ser estilizadas como blocos de texto recuados, muitas vezes com uma borda ou uma cor de fundo para dar mais ênfase. A imagem acima mostra como o Simple.css as estiliza (salvo aviso em contrário, todas as imagens de exemplo que eu posto são HTML estilizado com Simple.css).</p> +<h2 id="recapitulando-titulos-e-listas" tabindex="-1"><a class="header-anchor" href="#recapitulando-titulos-e-listas">Recapitulando: títulos e listas</a></h2> +<p>A gente cobriu isto rapidinho no Capítulo 2, <a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a>, mas vale recapitular. Os nossos posts já usam o título mais alto, o <code><h1></code>, mas se você estiver escrevendo um post que precisa de mais títulos, tudo bem!</p> +<p>Títulos em HTML são hierárquicos. Isso significa que títulos <code><h2></code> devem vir depois de títulos <code><h1></code>, títulos <code><h3></code> devem vir depois de títulos <code><h2></code>, e assim por diante. Tecnicamente, o HTML nos dá seis níveis de título — de <code><h1></code> a <code><h6></code>. Mas a moderação é importante aqui. Pergunte a si mesmo se você <em>realmente</em> está deixando a página mais fácil de entender ao adicionar tantos níveis de título. O meu conselho é ficar com três níveis ou menos.</p> +<p>E, claro, a gente tem listas. A gente cobriu isso no Capítulo 2, mas vamos olhar de novo. Você tem duas opções aqui — uma lista com marcadores (chamada de <em>não ordenada</em>) e uma lista numerada (chamada de <em>ordenada</em>).</p> +<p>Aqui está uma lista com marcadores, ou <em>não ordenada</em>, usando a tag <code><ul></code> para a lista e <code><li></code> para cada <em>item da lista</em>.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Bread<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sugar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Hole<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>Isso renderiza assim.</p> +<ul> +<li>Bread</li> +<li>Sugar</li> +<li>Hole</li> +</ul> +<p>E aqui está uma lista numerada, ou <em>ordenada</em> (com alguns pontos em negrito para dar ênfase).</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Portable Happiness:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Donuts are the perfect grab-and-go + food. You can take them anywhere: to work, to the park, or on a road trip. + They're like little circles of happiness that fit in your hand. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Instant Mood Boost:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Feeling down? Have a donut. It's + scientifically proven* that donuts can turn a frown upside down. (*Not + actually proven, but we all know it's true.) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Endless Creativity:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Donut shops are constantly coming up + with new and exciting flavors. From maple bacon to matcha green tea, the + possibilities are endless. It's like a delicious adventure every time you + visit. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre> +<p>É assim que fica.</p> +<ol> +<li><strong>Portable Happiness:</strong> Donuts are the perfect grab-and-go food. You can take them anywhere: to work, to the park, or on a road trip. They’re like little circles of happiness that fit in your hand.</li> +<li><strong>Instant Mood Boost:</strong> Feeling down? Have a donut. It’s scientifically proven* that donuts can turn a frown upside down. (*Not actually proven, but we all know it’s true.)</li> +<li><strong>Endless Creativity:</strong> Donut shops are constantly coming up with new and exciting flavors. From maple bacon to matcha green tea, the possibilities are endless. It’s like a delicious adventure every time you visit.</li> +</ol> +<p>Você até pode <em>aninhar</em> listas, assim.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + First main point + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sub point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another sub point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + Second main point + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sub-point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another sub-point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>Isso renderiza mais ou menos assim.</p> +<ul> +<li>First main point +<ul> +<li>Sub point</li> +<li>Another sub-point</li> +</ul> +</li> +<li>Second main point +<ul> +<li>Sub point</li> +<li>Another sub-point</li> +</ul> +</li> +</ul> +<h2 id="separando-o-conteudo" tabindex="-1"><a class="header-anchor" href="#separando-o-conteudo">Separando o conteúdo</a></h2> +<p>Um dos jeitos de adicionar espaço entre elementos na mão é a tag <code><br></code>, ou tag de <em>quebra</em> (<em>break</em>). A tag de quebra adiciona uma quebra de linha. Por exemplo, veja este haicai (de <a href="http://www.npr.org/blogs/thetwo-way/2013/05/02/180532424/send-your-haiku-to-mars-nasa-seeks-poets#comment-882372940">Robert Cole</a>).</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + A timeless red orb + floats lazy in the ether + unimpressed by war. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p>Por padrão, o navegador renderiza tudo numa linha só e ignora a maior parte do espaço em branco no seu HTML.</p> +<p><img src="/assets/img/adding-a-blog-5.webp" alt="Uma única linha de texto renderizada no navegador: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão, sem estilo extra, centralizado na horizontal na página."></p> +<p>Por um lado, isso é bom — significa que a gente pode formatar o código do jeito que quiser sem as visitas verem um monte de quebras de linha e recuos que a gente não pretendia. Mas, às vezes, a gente <em>quer</em> quebras de linha de verdade.</p> +<p>A gente conserta o haicai colocando um par de tags <code><br></code> ali.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + A timeless red orb<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + floats lazy in the ether<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + unimpressed by war. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p><img src="/assets/img/adding-a-blog-6.webp" alt="Texto em várias linhas no navegador, com quebra natural das palavras: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão e está quebrado em três linhas."></p> +<p>Isso ajuda em doses pequenas, mas use com parcimônia. Na maior parte do tempo, o espaço entre elementos deve ser controlado com CSS — aplicando <code>margin</code> ou <code>padding</code>, por exemplo. Por sorte, a nossa folha de estilo Simple.css já tem um espaçamento padrão bom. A gente cobre o uso de CSS para espaçamento personalizado no <a href="/basico-de-css">capítulo bônus</a> no fim deste livro.</p> +<p>Outro jeito de separar o conteúdo na mão é usar uma <em>linha horizontal</em>, ou tag <code><hr></code>. Em geral, ela é estilizada como uma linha na horizontal. Isso pode ajudar quando você quer separar conteúdo — como uma seção nova ou uma cena nova, no caso de uma história. É mais ou menos assim que pode ficar.</p> +<p><img src="/assets/img/adding-a-blog-7.webp" alt="Dois parágrafos de texto de preenchimento renderizados no navegador. Os parágrafos estão separados por uma linha horizontal, o que dá uma divisão visual clara. O texto aparece numa fonte sans-serif padrão, e cada parágrafo tem um espaçamento de linha adequado, o que melhora a leitura."></p> +<aside class="aside"><p class="aside-label">Observação</p><p>O que é esse texto sem sentido? É um texto meio latim chamado <em><a href="https://en.wikipedia.org/wiki/Lorem_ipsum">lorem ipsum</a></em>, que costuma ser usado em situações de design quando você quer ver como o texto fica sem se distrair com o que ele diz.</p> +</aside> +<h2 id="codigo-e-texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#codigo-e-texto-pre-formatado">Código e texto pré-formatado</a></h2> +<p>Eu tenho usado estas tags <em>bastante</em> nas páginas que você está lendo neste livro. Veja este parágrafo:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + By the end of day one, he was familiar with basic tags like <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>html<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>head<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>body<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating + paragraphs and lists. By day three, he had moved on to creating stunning + layouts with <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>article<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>section<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</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></code></pre> +<p>Isso vai mostrar os pedaços de código numa fonte monoespaçada e numa cor diferente, assim.</p> +<p><img src="/assets/img/adding-a-blog-8.webp" alt="Um parágrafo de texto renderizado no navegador, com tags HTML específicas em destaque em vermelho. O texto diz: “By the end of day one, he was familiar with basic tags like html, head, and body.” As palavras em destaque “html,” “head” e “body” estão em vermelho, numa fonte monoespaçada, enquanto o resto do texto permanece preto, chamando a atenção para estes termos."></p> +<p>Você já me viu incluir os símbolos de menor que (<code><</code>) e maior que (<code>></code>) nos elementos de código das páginas deste livro (assim, <code><a></code>). Isso pede um trabalhinho a mais. Tipo, se eu quiser mencionar uma tag <code><a></code>, eu não posso simplesmente escrever <code><code><a></code></code> porque o navegador vai achar que eu estou tentando fazer um link de verdade dentro da tag <code><code></code>. Para incluir os símbolos de menor que e maior que (às vezes chamados de “colchetes angulares”), a gente precisa das entidades HTML <code>&lt;</code> e <span style="text-wrap: nowrap"><code>&gt;</code>, </span>nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + By the end of day one, he was familiar with basic tags like + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>html<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>head<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, and + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>body<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating paragraphs and lists. + By day three, he had moved on to creating stunning layouts with + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>article<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>section<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</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></code></pre> +<p>Isso nos dá o seguinte.</p> +<p><img src="/assets/img/adding-a-blog-9.webp" alt="Um parágrafo parecido com o anterior, mas com as tags HTML cercadas por colchetes angulares, o que enfatiza o papel delas como elementos HTML. O texto diz: “By the end of day one, he was familiar with basic tags like , , and .”"></p> +<p>Como a gente viu antes, ao renderizar o seu conteúdo, o navegador ignora a maior parte do espaço em branco no seu código. Mas, às vezes, você quer preservar o espaçamento e as quebras de linha exatos. Um exemplo divertido é a arte ASCII, que é quando você faz arte com caracteres de texto puro.</p> +<pre class="language-html"><code class="language-html mono"> ___ ___ ___ ___ + /\__\ /\ \ /\__\ /\__\ + /:/__/_ \:\ \ /::L_L_ /:/ / + /::\/\__\ /::\__\ /:/L:\__\ /:/__/ + \/\::/ / /:/\/__/ \/_/:/ / \:\ \ + /:/ / \/__/ /:/ / \:\__\ + \/__/ \/__/ \/__/</code></pre> +<p>O de cima deve aparecer como as letras “HTML” com um efeito 3D. Funciona porque usa uma fonte monoespaçada e preserva todo o espaço em branco. Como eu fiz? Eu usei a tag <code><pre></code>, que é para texto <em>pré-formatado</em>. Use assim.</p> +<pre class="language-html"><code class="language-html mono"><pre> + ___ ___ ___ ___ + /\__\ /\ \ /\__\ /\__\ + /:/__/_ \:\ \ /::L_L_ /:/ / + /::\/\__\ /::\__\ /:/L:\__\ /:/__/ + \/\::/ / /:/\/__/ \/_/:/ / \:\ \ + /:/ / \/__/ /:/ / \:\__\ + \/__/ \/__/ \/__/ +</pre></code></pre> +<p>Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste <a href="https://perma.cc/E5NZ-SV56">gerador de arte em texto</a>.</p> +<h2 id="asides" tabindex="-1"><a class="header-anchor" href="#asides">Asides</a></h2> +<p>A tag <code><aside></code> é divertida porque o Simple.css a estiliza de um jeito interessante. Elas servem para destaques ou <em>apartes</em> em relação ao conteúdo principal. Por exemplo, eu incluí um aside que lista ingredientes no meu <a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">post sobre donuts</a>.</p> +<p><img src="/assets/img/adding-a-blog-10.webp" alt="Captura de tela de um post chamado “Why donuts are the best thing ever,” datado de 20 de abril de 2024. A página tem um menu de navegação com os botões “Home,” “Blog” (em destaque) e “About.” O post fala da alegria e da versatilidade dos donuts, com uma caixa na lateral listando “Donut ingredients” (Bread, Sugar, Hole). O layout é limpo e bem espaçado para a leitura."></p> +<p>O Simple.css estiliza o aside como uma caixa arredondada e o desloca para o lado. É um jeito legal de adicionar notas extras ou conteúdo secundário a uma página.</p> +<h2 id="mark-tachado-exclusao-insercao" tabindex="-1"><a class="header-anchor" href="#mark-tachado-exclusao-insercao">Mark, tachado, exclusão, inserção</a></h2> +<p>Aqui vão mais algumas tags de formatação de texto. Use <code><mark></code> para <mark>destacar texto</mark>. Se quiser tachar texto <s>indesejado</s>, envolva-o na tag <code><s></code>. Se quiser mostrar edições num documento de forma explícita, prefira a tag <code><del></code> para indicar uma exclusão e a tag <code><ins></code> para mostrar texto inserido. Por exemplo, isto vem do meu post sobre donuts.</p> +<p><img src="/assets/img/adding-a-blog-11.webp" alt="Captura de tela de texto com formatação de tachado e sublinhado. A frase “it's vegetables” está tachada, e “donuts” está sublinhado, enfatizando a troca de “vegetables” por “donuts” para destacar uma preferência bem-humorada na frase."></p> +<h2 id="preencha-a-pagina-indice-do-blog" tabindex="-1"><a class="header-anchor" href="#preencha-a-pagina-indice-do-blog">Preencha a página índice do blog</a></h2> +<p>Certo, a gente cobriu várias tags que você pode usar para <em>marcar</em> tipos diferentes de conteúdo. Você pode parar um pouco e brincar com elas. Sem pressa! Eu fico bem aqui quando você estiver pronto. Quando tiver dois ou três posts, vamos colocá-los na página principal do blog.</p> +<p>Se você abrir <code>blog/index.html</code>, ela parece um pouco vazia. A gente conserta isso agora, mostrando o título de cada post, o mais novo primeiro, a data de publicação e um resumo de uma frase. Clicar no título de um post deve levar a pessoa leitora até ele.</p> +<p>Vamos usar a tag <code><article></code> para cada um, porque cada um representa uma composição independente. De brinde, o Simple.css vai estilizá-los como cartões. Vamos usar <code><h2></code> para o título do post, e dentro dele a gente coloca um link (a tag <code><a></code>). Vamos usar a tag <code>time</code> para a data. Vamos usar um parágrafo comum, ou tag <code><p></code>, para o resumo. A marcação final fica assim.</p> +<pre class="language-html"><code class="language-html"><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>article</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> + <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>2024-04-20-donuts.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Why donuts are the best thing ever + <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>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><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-04-20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 20, 2024<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Donuts are the ultimate comfort food because of their versatility, + variety, portability, mood-boosting power, and endless creative flavors. + <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>article</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></code></pre> +<p>O link no título vai receber um <em>atributo</em> <code>href</code>, o destino do link. Como a gente já está na pasta <code>blog</code>, a gente pode usar o nome do arquivo do post como destino.</p> +<p>A gente está usando a tag <code><time></code> para oferecer uma versão da data amigável para máquinas. Isso pode ser útil para mecanismos de busca que vasculham o seu site ou para possíveis recursos do navegador que dependem de datas. A tag <code><time></code> recebe um atributo chamado <code>datetime</code>, no qual você pode informar a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">versão legível por máquina</a>.</p> +<p>Adicione um <code><article></code> como o de cima para cada post ao qual você quiser ligar. Você vai acabar com algo assim.</p> +<p><img src="/assets/img/adding-a-blog-12.webp" alt="Captura de tela de uma página de listagem de blog, com um cabeçalho contendo botões de navegação para “Home,” “Blog” (em destaque) e “About.” O título principal diz “Blog.” Abaixo há três prévias de posts, com títulos em azul: “Why donuts are the best thing ever,” “The time I built a website for aliens” e “How I taught my cat to make a website with HTML,” cada uma com um resumo breve e a data (20 de abril, 15 de abril e 12 de abril de 2024, nesta ordem)."></p> +<h2 id="uma-tabela-dos-elementos-html" tabindex="-1"><a class="header-anchor" href="#uma-tabela-dos-elementos-html">Uma tabela dos elementos (HTML)</a></h2> +<p>Ufa! A gente cobriu um bocado de tags e adicionou bastante conteúdo neste capítulo. Pode ser muita coisa para lembrar. Se você precisar consultar como usar uma tag HTML em particular — ou se quiser ver quais tags HTML existem — dê uma olhada nesta <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">referência de elementos HTML</a> no MDN. O <a href="https://developer.mozilla.org">MDN</a> é, mais ou menos, o manual oficial da web. É só pesquisar qualquer tag, atributo ou conceito sobre o qual você queira saber mais.</p> +<h2 id="atualize-o-site-no-ar-opcional" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar-opcional">Atualize o site no ar (opcional)</a></h2> +<p>Se quiser enviar as mudanças para o Neocities, siga o mesmo processo dos capítulos anteriores. Arraste e solte a pasta <code>blog</code> na área de soltar arquivos para enviar a pasta inteira de uma vez. Como você atualizou o menu nav em todas as páginas, também vai querer enviar de novo as páginas Home e Sobre.</p> +<p>Claro, você também pode continuar trabalhando <em>localmente</em>, em vez de enviar o progresso agora. Você que manda!</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Ufa, a gente terminou o nosso tour rápido de adicionar um blog com várias tags! A seguir, a gente reduz o ritmo e foca na estrutura da página, adicionando uma página de currículo que você pode compartilhar com empregadores em potencial.</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="/adicionar-um-curriculo/">Adicionar um currículo</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/adicionar-uma-pagina-sobre/">Adicionar uma página Sobre</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>
A
adicionar-um-curriculo/index.html
@@ -0,0 +1,649 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Adicionar um currículo</title> + + <meta property="og:title" content="Adicionar um currículo" /> + <meta property="og:description" content="Descubra como dar estrutura a uma página grande, montando um currículo digital em HTML." /> + <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-um-curriculo/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-um-curriculo/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/adding-a-resume/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/adding-a-resume/" + /> + + + <!-- 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" + aria-current="page" + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="adicionar-um-curriculo-ou-cv" tabindex="-1"><a class="header-anchor" href="#adicionar-um-curriculo-ou-cv">Adicionar um currículo (ou CV)</a></h1> +<p>Nos capítulos anteriores, a gente aprendeu a colocar vários tipos de conteúdo nas páginas HTML. Agora vamos ver como dar estrutura a uma página grande. Vamos adicionar uma página de currículo (CV).</p> +<p>Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um <em>curriculum vitae</em>. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho.</p> +<p>Não se preocupe se você ainda não tem muita experiência. Dá para criar seções falando da sua formação: diplomas, matérias e atividades da escola. Ou você pode focar em trabalhos de meio período ou no voluntariado.</p> +<p>Outra opção é deixar menos “currículo” e mais portfólio de projetos, se isso fizer mais sentido para você. Inclua habilidades que você já tem (tipo HTML!). Pesquise dicas de currículo na web. A internet está cheia de conselhos para gente em fases diferentes da carreira.</p> +<p>Mas se currículo não é a sua praia, tudo bem. Pegue as ideias de marcação que a gente explora aqui e use do jeito que quiser. O site é seu. É importante que você goste de fazê-lo.</p> +<h2 id="criar-o-arquivo-do-curriculo" tabindex="-1"><a class="header-anchor" href="#criar-o-arquivo-do-curriculo">Criar o arquivo do currículo</a></h2> +<p>Crie um arquivo na raiz do site, <code>resume.html</code>, e copie o conteúdo de uma das outras páginas principais para dentro dele.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você está usando o Visual Studio Code, selecione uma das páginas principais na barra lateral e depois copie e cole. Vai nascer uma cópia da página, e você pode renomear o arquivo.</p> +</aside> +<p>Do jeito que você criar o arquivo, lembre de atualizar o <code><title></code>, o <code><h1></code> e o <code><nav></code>. Eu vou colocar o meu nome no <code><h1></code> e a profissão (ou um resumo) logo abaixo, em uma tag <code><p></code>.</p> +<pre class="language-html"><code class="language-html"><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 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>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>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>Blake Watson<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>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre> +<h2 id="um-documento-com-secoes" tabindex="-1"><a class="header-anchor" href="#um-documento-com-secoes">Um documento com seções</a></h2> +<p>Um currículo quase sempre se divide em seções. As mais comuns são experiência, formação e habilidades. O HTML tem uma ferramenta para criar uma seção genérica de um documento: a tag <code><section></code>. Cada seção deve ter um título, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">segundo a documentação</a>.</p> +<p>Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag <code><section></code> para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas.</p> +<p>Eu vou criar as seções abaixo. Mas lembre: você pode ter mais ou menos, conforme precisar. Elas não precisam ser iguais às minhas, nem na mesma ordem.</p> +<ul> +<li>Habilidades</li> +<li>Experiência</li> +<li>Projetos selecionados</li> +<li>Formação</li> +</ul> +<h2 id="habilidades" tabindex="-1"><a class="header-anchor" href="#habilidades">Habilidades</a></h2> +<p>Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um <code><section></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>Skills<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Isso aparece assim na tela.</p> +<p><img src="/assets/img/adding-a-resume-1.webp" alt="Captura de tela de uma página “Resume” de Blake Watson. O cabeçalho tem botões de navegação para “Home”, “Blog”, “About” e “Resume” (este último destacado). O título “Blake Watson” aparece em negrito, com o subtítulo “Experienced Frontend Engineer” em itálico menor logo abaixo. Em seguida, uma seção chamada “Skills” lista várias habilidades técnicas em tópicos."></p> +<p>É uma lista limpa, com marcadores. Dito isso, eu sinto que sobra um pouco de espaço. Seria legal dividir em colunas. Não existe um jeito estritamente HTML de fazer isso. Mas vale usar um pouquinho de CSS para resolver.</p> +<p>Você já viu várias tags usando <em>atributos</em>. Cada página do nosso site tem links com a tag <code><a></code>, e cada link tem um atributo <code>href</code>, por exemplo. Outro atributo bem útil é o <code>style</code>. Ele deixa a gente aplicar CSS direto em um elemento HTML. Eu falo mais de CSS nos capítulos bônus no fim deste livro. Por agora, vamos usar o atributo <code>style</code> para dividir a lista em colunas.</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>Skills<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>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Assim a lista fica mais agradável e aproveita melhor o espaço.</p> +<p><img src="/assets/img/adding-a-resume-2.webp" alt="Captura de tela da página “Resume” atualizada. A seção “Skills” agora está organizada em duas colunas, cada uma com habilidades técnicas em tópicos, num visual mais compacto e equilibrado."></p> +<h2 id="experiencia" tabindex="-1"><a class="header-anchor" href="#experiencia">Experiência</a></h2> +<p>Eu não sou especialista em currículo. Mas acho que vou colocar a experiência de trabalho em seguida. É provavelmente o que um empregador da minha área mais quer ver. Isso muda se você não tem muita experiência, ou se acha que formação ou outras qualificações pesam mais.</p> +<p>Marcar conteúdo é tanto arte quanto ciência. Não existe um único jeito certo. Um bom princípio para escolher as tags é este: a escolha precisa ter significado. Não vale escolher só pela aparência.</p> +<p>Por exemplo: você pode ficar tentado a usar um <code><h6></code> em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, <code><h6></code> não é a melhor escolha.</p> +<p>Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação.</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>Experience<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>h3</span><span class="token punctuation">></span></span>Frontend Engineer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span>Present + <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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + Build and maintain a document management system for Collins Aerospace + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- ...the rest of the jobs go here --></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>Isso nos dá uma seção com esta cara.</p> +<p><img src="/assets/img/adding-a-resume-3.webp" alt="Captura de tela da seção “Experience” numa página de currículo. O título “Experience” está grande e em negrito. Abaixo, o cargo “Frontend Engineer” aparece em destaque, seguido do nome da empresa “MRI Technologies” em negrito e do período “August 2019–Present”. Uma lista com marcadores descreve responsabilidades e conquistas nessa função."></p> +<p>Eu vou listar vários cargos que já tive. Por isso uso o nome do cargo como título (nível 3, porque ele fica abaixo do título de nível 2 <em>Experience</em>). Em seguida, quero mostrar o empregador e o período. Escolhi um único parágrafo para juntar as duas coisas. Uso uma quebra de linha manual para jogar o período para a segunda linha.</p> +<p>Outro jeito é colocar o nome do empregador no título, depois do cargo. Eu não acho que um jeito seja mais “certo” que o outro. Eu só prefiro reduzir a quantidade de texto grande na página.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente <em>realmente</em> quisesse controlar o visual, adicionaria um CSS personalizado. Não vamos fazer isso agora. Veja os capítulos bônus no fim do livro para saber mais sobre CSS.</p> +</aside> +<p>A gente envolve a data numa tag <code><time></code> e coloca a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">data no formato que o computador entende</a> no <em>atributo</em> <code>datetime</code>. Eu uso uma <em>entidade</em> HTML, <code>&ndash;</code>, para colocar um traço entre a data de início e a de fim. Isso usa o caractere <em>en dash</em> (um traço um pouco mais longo que o hífen comum, <code>-</code>). Na <a href="https://practicaltypography.com/hyphens-and-dashes.html">tipografia, ele serve para intervalos numéricos</a>.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Dê uma olhada nesta <a href="https://perma.cc/BEA6-LF46">lista de entidades HTML</a>. É um guia de caracteres especiais que você pode usar no HTML.</p> +</aside> +<p>Por fim, eu uso uma <em>lista sem ordem</em> para os tópicos sobre o cargo e as responsabilidades.</p> +<p>Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode <a href="https://demo.htmlforpeople.com/resume">ver o currículo de demonstração</a> e <a href="https://perma.cc/3WP3-R9XL">olhar o código-fonte</a>.</p> +<h2 id="projetos-selecionados" tabindex="-1"><a class="header-anchor" href="#projetos-selecionados">Projetos selecionados</a></h2> +<p>Na próxima seção, eu quero destacar alguns projetos em que trabalhei. É a versão currículo de um portfólio: um lugar para mostrar sites que eu fiz e, quando der, linkar para eles. Currículos impressos costumam ser só texto. Mas isto é uma página da web. Você pode colocar uma imagem ou duas nesta seção.</p> +<p>Nesses projetos, vou usar a tag <code><h3></code> para o título do projeto e um parágrafo de descrição junto. Se o projeto está no ar, eu coloco o link. Aqui vai um exemplo.</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>Selected projects<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>h3</span><span class="token punctuation">></span></span>Mississippi Gulf Coast Community College<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> + I worked on this website in my role as designer and developer at Mad Genius. I built out several of the dynamic, data-intensive sections like the searchable course catalog and the comprrehensive "A to Z" index. These sections made heavy use of reactive UI, third-party API integrations, and custom WordPress plugin development. + <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>p</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>https://mgccc.edu/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mgccc.edu<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>p</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- ...the rest of the projects go here --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre> +<h2 id="formacao" tabindex="-1"><a class="header-anchor" href="#formacao">Formação</a></h2> +<p>Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com <code><strong></code> para ênfase e <code><br></code> para quebras de linha manuais.</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>Education<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> + + <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>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, Information Systems, + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre> +<h2 id="exemplo-completo" tabindex="-1"><a class="header-anchor" href="#exemplo-completo">Exemplo completo</a></h2> +<p>Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal.</p> +<pre class="language-html"><code class="language-html"><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 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>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>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>Blake Watson<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>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> +<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>Skills<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>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / a11y<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Experience<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>h3</span><span class="token punctuation">></span></span>Frontend Engineer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span>Present + <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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a document management system for Collins Aerospace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Web Developer/Interactive Designer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Mad Genius<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 2015<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</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> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketching, prototyping, and UI design<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>WordPress theme and plugin development<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Reactive UI with Vue and Knockout<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Third-party API integrations<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Web Developer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Self employed<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2015<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</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> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Communicated with clients<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Developed usable, standards-based websites<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Made responsive websites<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Volunteered on many non-profit projects<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Education<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> + + <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>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, Information Systems, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> + <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></code></pre> +<p>Você pode ver o resultado no <a href="https://demo.htmlforpeople.com/resume">site de demonstração</a>. Mas aqui vai uma captura da página inteira.</p> +<p><img src="/assets/img/adding-a-resume-4.webp" alt="Captura de tela da página “Resume” completa. O título “Blake Watson” e o subtítulo “Experienced Frontend Engineer” aparecem em destaque. Abaixo, a seção “Skills” lista habilidades técnicas em duas colunas. A seção “Experience” detalha o histórico de trabalho: Frontend Engineer na MRI Technologies, Web Developer/Interactive Designer na Mad Genius e Web Developer (autônomo). A seção “Education” lista diplomas em administração pela Mississippi State University."></p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>A gente tem criado <em>muito</em> conteúdo. No próximo capítulo, vamos fazer um intervalo e ver como rodar um servidor web no computador. Ele deixa o teste do site mais parecido com um site de verdade, no ar.</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="/intervalo-instalar-um-servidor-local/">Intervalo: instalar um servidor local</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/adicionar-um-blog/">Adicionar um blog</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>
A
adicionar-uma-pagina-divertida/index.html
@@ -0,0 +1,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>
A
adicionar-uma-pagina-sobre/index.html
@@ -0,0 +1,545 @@
+<!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 Sobre</title> + + <meta property="og:title" content="Adicionar uma página Sobre" /> + <meta property="og:description" content="Aprenda mais tags HTML e veja como criar um menu de navegação para ligar as páginas entre si." /> + <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-sobre/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-uma-pagina-sobre/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/adding-an-about-page/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/adding-an-about-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" + aria-current="page" + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="adicionar-uma-pagina-sobre" tabindex="-1"><a class="header-anchor" href="#adicionar-uma-pagina-sobre">Adicionar uma página Sobre</a></h1> +<p>Pelo resto deste livro, a gente vai expandir a nossa página inicial pessoal e transformá-la num site completo, com várias páginas e um blog. O exemplo continua sendo a <strong>Blake’s Homepage</strong>, e o conteúdo vai falar de mim. Você vai querer adaptar as coisas para o que quiser ver no seu próprio site.</p> +<p>Se você não quiser fazer uma página pessoal, tudo bem também! Os conceitos que a gente cobre valem para todo tipo de site. Então você pode acompanhar e adaptar do seu jeito.</p> +<p>Se quiser um gostinho do resultado, visite a <a href="https://demo.htmlforpeople.com/">demonstração completa da Blake’s Homepage</a>.</p> +<p>Ela tem as seguintes páginas e recursos:</p> +<ul> +<li>Cabeçalho com navegação</li> +<li>Um blog com três posts</li> +<li>Página Sobre com uma foto</li> +<li>Um currículo digital</li> +<li>Uma página divertida com vídeos do YouTube embutidos</li> +</ul> +<p>Eu vou incluir muitos exemplos de código nos próximos capítulos, mas você também pode ir ao site de demonstração e <a href="https://perma.cc/3WP3-R9XL">ver o código-fonte</a> de qualquer página para consultar a qualquer momento.</p> +<h2 id="paginas-sao-so-arquivos-para-os-quais-voce-cria-um-link" tabindex="-1"><a class="header-anchor" href="#paginas-sao-so-arquivos-para-os-quais-voce-cria-um-link">Páginas são só arquivos para os quais você cria um link</a></h2> +<p>A gente vai criar uma página nova no site criando um arquivo novo. Crie <code>about.html</code> ao lado de <code>index.html</code>. Para digitar menos, copie todo o conteúdo de <code>index.html</code> e cole em <code>about.html</code>.</p> +<p>Agora, vamos limpar um pouco. Eu vou tirar o título “How to make a website” e o parágrafo com o link para o neal.fun. Esta página deve ser sobre mim. Falando nisso, eu também vou trocar a imagem por uma foto minha (se você não se sentir à vontade para usar uma foto sua, use qualquer imagem que quiser aqui).</p> +<p>Vou ampliar o conteúdo adicionando uns parágrafos. Este também é um ótimo lugar para colocar qualquer informação de contato que você quiser. Eu vou adicionar um link para a minha conta no Mastodon (com um emoji de elefante).</p> +<pre class="language-html"><code class="language-html"><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>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>https://social.lol/@bw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Drop me a line on Mastodon<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>p</span><span class="token punctuation">></span></span></code></pre> +<p>Lembre-se: um link é uma tag <code><a></code>. O texto que você envolve com a tag vira clicável. Depois você informa o <em>atributo</em> <code>href</code>, que é o destino do link — em geral, um URL.</p> +<aside class="aside"><p class="aside-label">Seletor de emoji</p><p>Para abrir um seletor de emoji:</p> +<ul> +<li>No Windows, pressione a tecla Windows + ponto (<code>.</code>)</li> +<li>No macOS, pressione <code>fn</code> + <code>e</code>.</li> +</ul> +</aside> +<p>Aqui está o meu código dentro da tag <code><body></code>.</p> +<pre class="language-html"><code class="language-html"><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>h1</span><span class="token punctuation">></span></span>About Blake<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>img</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>images/blake.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. I started writing an HTML web book because I think everyone should have a personal website and I want to show that you don't have to be a computer science graduate to make one. + <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>p</span><span class="token punctuation">></span></span> + I'm a side project enthusiast and have put various sites, apps, and (bad) games into the world. My hobbies include web-related nerdery, D&D and board games, and writing. I like to participate in National Novel Writing Month, the annual novel-writing challenge + <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>p</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>https://social.lol/@bw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Drop me a line on Mastodon<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>p</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>Favorite board games<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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></code></pre> +<p>E é assim que fica.</p> +<p><img src="/assets/img/adding-an-about-page-1.webp" alt="Captura de tela da página “About Blake”. O cabeçalho mostra “About Blake.” Abaixo há uma foto do Blake (eu!) sorrindo na frente de um muro de tijolos. O texto apresenta o Blake, falando da paixão por fazer sites e ensinar outras pessoas, além dos hobbies com desenvolvimento web, D&D, jogos de tabuleiro e escrita. Há um link para falar com ele no Mastodon. Uma seção chamada “Favorite board games” lista “Dungeons & Dragons,” “Risk” e “Pandemic.” O rodapé da página diz “Made with ❤️ and ☕ by Blake Watson.”"></p> +<p>Surpresa, sou eu! Enfim, isto já parece uma página Sobre de verdade. Eu admito que está um pouco forçado. Sinta-se à vontade para escrever o quanto quiser aqui.</p> +<h2 id="navegando-entre-as-paginas" tabindex="-1"><a class="header-anchor" href="#navegando-entre-as-paginas">Navegando entre as páginas</a></h2> +<p>A gente já tem uma página Sobre, mas precisa de um jeito de ir de uma página à outra. A gente precisa de um menu de navegação, ou menu nav. Um menu nav é só uma lista de links. O Simple.css parece gostar do menu nav acima do cabeçalho, então eu vou colocar ali. Mas você também pode colocar abaixo, se quiser.</p> +<p>O HTML tem uma tag <code><nav></code> exatamente para isso. Vamos colocar dois links no nosso menu nav — um para a página inicial e um para a página Sobre.</p> +<pre class="language-html"><code class="language-html"><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>about.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>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>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>About Blake<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></code></pre> +<p>Como esta é, no momento, a página Sobre, eu adicionei um atributo especial ao link. ARIA significa Accessible Rich Internet Applications. A gente deixa o site mais acessível adicionando o atributo <code>aria-current="page"</code>. Isso faz um par de coisas por nós.</p> +<ul> +<li>Deixa a página mais acessível para tecnologias assistivas, como leitores de tela.</li> +<li>O Simple.css estiliza o link de outro jeito, para ficar fácil ver em qual página a gente está.</li> +</ul> +<p><img src="/assets/img/adding-an-about-page-2.webp" alt="Captura de tela da parte de cima da página “About Blake”, com botões de navegação. A navegação inclui “Home” e “About,” com o botão “About” em destaque para indicar a página atual. O título “About Blake” aparece em negrito abaixo da barra de navegação."></p> +<p>Vamos adicionar o mesmo menu nav na página inicial. Abra o <code>index.html</code> e coloque o menu como a gente fez na página Sobre. Como esta é a página inicial, a gente deve colocar o atributo <code>aria-current</code> no link Home.</p> +<pre class="language-html"><code class="language-html"><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 attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>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>Blake's Homepage<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></code></pre> +<p>Abra no navegador e admire o seu site de várias páginas! Clique. Clique. Clique…</p> +<h2 id="limpando-a-pagina-inicial" tabindex="-1"><a class="header-anchor" href="#limpando-a-pagina-inicial">Limpando a página inicial</a></h2> +<p>Como agora a gente tem uma página Sobre, parte do conteúdo da página inicial ficou repetido. Um pouco disso já está na página Sobre. Eu vou tirar o texto de bio, o link do Neal.fun e a lista de jogos de tabuleiro. Vou manter a imagem do espaço e adicionar um parágrafo de boas-vindas. E já que estamos nisso, vou manter a lista “how to make a website”.</p> +<p>Falando da imagem do espaço, vamos deixá-la mais interessante. Eu quero dar uma legenda a esta imagem e um link para o lugar de onde eu a tirei. A gente pode marcar melhor uma imagem envolvendo-a numa tag <code><figure></code> e incluindo um <code><figcaption></code>.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>figcaption</span><span class="token punctuation">></span></span> + Space is cool. <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>https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Photo source<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>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span></code></pre> +<p>O meu conteúdo <code><main></code> na página inicial agora fica assim.</p> +<pre class="language-html"><code class="language-html"><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>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>figcaption</span><span class="token punctuation">></span></span> + Space is cool. <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>https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Photo source<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>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</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> + Welcome to my website! Here you can find out more about me, read my very interesting and totally not contrived blog posts, and check out some of the fun hobbies I am into. It won't be long until you are wondering what sorcery I have used to create this mind-blowing, web-based experience. The answer is HTML. + <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>h2</span><span class="token punctuation">></span></span>How to make a website<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>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>notice<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>strong</span><span class="token punctuation">></span></span>Quer aprender a fazer um site como este?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Confira o livro-web gratuito <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>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML e Pessoas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Foi feito para todo mundo e ensina a criar uma página de um jeito amigável e acessível. + <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>main</span><span class="token punctuation">></span></span></code></pre> +<p>O que é este <code>class="notice"</code>? Você pode aprender mais sobre classes nos capítulos bônus de CSS no fim deste livro. Mas, em resumo, isso ativa alguns estilos que o Simple.css oferece para fazer uma caixinha com um pouco de texto.</p> +<p><img src="/assets/img/adding-an-about-page-3.webp" alt="Captura de tela da “Blake's Homepage” reorganizada. O cabeçalho inclui botões de navegação para “Home” (em destaque) e “About.” Abaixo há uma imagem grande e colorida de um céu estrelado. O texto de introdução dá as boas-vindas, fala de posts de blog e hobbies, com um tom brincalhão sobre a simplicidade de usar HTML. Uma seção chamada “How to make a website” lista três passos: “Create an HTML file,” “Write some HTML in it” e “Open it with your web browser.” Uma caixa em destaque convida as visitas a conferir o tutorial “HTML for People.”"></p> +<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2> +<p>Se você quiser. Também está tudo bem continuar trabalhando no computador. Muitos sites são feitos assim — a pessoa trabalha no site no próprio computador até terminar e só então publica. Mas tem bastante gente que também constrói o site em público, atualizando o site no ar conforme avança.</p> +<p>Se quiser atualizar, volte ao painel do Neocities e envie tanto o <code>index.html</code> quanto o <code>about.html</code>, já que esses arquivos mudaram. Se você adicionou alguma imagem, precisa entrar na pasta de imagens no Neocities e enviá-las lá (ou pode arrastar a pasta <code>images</code> para a área de soltar arquivos, o que substitui a pasta inteira e o conteúdo).</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>A gente transformou a nossa <em>página</em> num <em>site</em>! A seguir, vamos adicionar um blog e explorar várias tags HTML.</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="/adicionar-um-blog/">Adicionar um blog</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/um-site-com-estilo/">Um site com estilo</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>
A
assets/css/fonts.css
@@ -0,0 +1,1 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Code+Pro:ital,wght@0,400;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap');
A
assets/css/open-props.min.css
@@ -0,0 +1,1 @@
+:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left,#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}
A
assets/css/print.css
@@ -0,0 +1,53 @@
+html, +body { + font-size: 14px !important; +} + +.container { + max-width: 550px; +} + +aside { + page-break-inside: avoid; + box-shadow: none; +} + +aside::before, +aside::after { + display: none; +} + +pre { + box-shadow: none !important; +} + +img, +p:has(> img) { + display: block; + page-break-inside: avoid; +} + +h1:not(:first-of-type) { + page-break-before: always; +} + +h1, +h2, +h3 { + page-break-after: avoid; +} + +a:not([href^='#']) { + &::after { + content: ' (' attr(href) ')'; + } +} + +.site-title a::after { + content: 'https://htmlforpeople.com'; +} + +pre, +pre[class*='language-'] { + max-height: none; +}
A
assets/css/prism-dracula.css
@@ -0,0 +1,124 @@
+/** + * Dracula Theme originally by Zeno Rocha [@zenorocha] + * https://draculatheme.com/ + * + * Ported for PrismJS by Albert Vallverdu [@byverdu] + */ + +:where([data-theme='dark']) { + & code[class*='language-'], + & pre[class*='language-'] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + } + + /* Code blocks */ + & pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; + } + + & :not(pre) > code[class*='language-'], + & pre[class*='language-'] { + background: #282a36; + } + + /* Inline code */ + & :not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; + } + + & .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #9cb3f8; + } + + .token.punctuation { + color: #f8f8f2; + } + + .namespace { + opacity: 0.7; + } + + .token.property, + .token.tag, + .token.constant, + .token.symbol, + .token.deleted { + color: #ff79c6; + } + + .token.boolean, + .token.number { + color: #bd93f9; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #50fa7b; + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: #f8f8f2; + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.class-name { + color: #f1fa8c; + } + + .token.keyword { + color: #8be9fd; + } + + .token.regex, + .token.important { + color: #ffb86c; + } + + .token.important, + .token.bold { + font-weight: bold; + } + + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } +}
A
assets/css/prism.css
@@ -0,0 +1,116 @@
+/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+php */ +:where([data-theme='light']) { + & code[class*='language-'], + & pre[class*='language-'] { + color: #000; + background: 0 0; + text-shadow: 0 1px #fff; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + } + + & code[class*='language-'] ::selection, + & code[class*='language-']::selection, + & pre[class*='language-'] ::selection, + & pre[class*='language-']::selection { + text-shadow: none; + background: #b3d4fc; + } + + @media print { + & code[class*='language-'], + & pre[class*='language-'] { + text-shadow: none; + } + } + + & pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + } + :not(pre) > code[class*='language-'], + pre[class*='language-'] { + background: #f5f2f0; + } + :not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; + } + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog { + color: #708090; + } + .token.punctuation { + color: #999; + } + .token.namespace { + opacity: 0.7; + } + .token.boolean, + .token.constant, + .token.deleted, + .token.number, + .token.property, + .token.symbol, + .token.tag { + color: #905; + } + .token.attr-name, + .token.builtin, + .token.char, + .token.inserted, + .token.selector, + .token.string { + color: #690; + } + .language-css .token.string, + .style .token.string, + .token.entity, + .token.operator, + .token.url { + color: #9a6e3a; + background: hsla(0, 0%, 100%, 0.5); + } + .token.atrule, + .token.attr-value, + .token.keyword { + color: #07a; + } + .token.class-name, + .token.function { + color: #dd4a68; + } + .token.important, + .token.regex, + .token.variable { + color: #e90; + } + .token.bold, + .token.important { + font-weight: 700; + } + .token.italic { + font-style: italic; + } + .token.entity { + cursor: help; + } +}
A
assets/css/reset.css
@@ -0,0 +1,51 @@
+/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; +} + +/* + 2. Remove default margin +*/ +* { + margin: 0; +} + +/* + Typographic tweaks! + 3. Add accessible line-height +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +/* + 5. Improve media defaults +*/ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +/* + 6. Remove built-in form typography styles +*/ +input, button, textarea, select { + font: inherit; +} + +/* + 7. Avoid text overflows +*/ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +/* + 8. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +}
A
assets/css/spacing.css
@@ -0,0 +1,385 @@
+:root { + --xxs: 0.125rem; + --xs: 0.25rem; + --sm: 0.5rem; + --md: 1rem; + --lg: 2rem; + --xl: 4rem; + --xxl: 7.5rem; +} + +.m-none { + margin: 0 !important; +} +.p-none { + padding: 0 !important; +} +.mt-none { + margin-block-start: 0 !important; +} +.pt-none { + padding-block-start: 0 !important; +} +.mr-none { + margin-inline-end: 0 !important; +} +.pr-none { + padding-inline-end: 0 !important; +} +.mb-none { + margin-block-end: 0 !important; +} +.pb-none { + padding-block-end: 0 !important; +} +.ml-none { + margin-inline-start: 0 !important; +} +.pl-none { + padding-inline-start: 0 !important; +} +.px-none { + padding-inline-start: 0 !important; + padding-inline-end: 0 !important; +} +.py-none { + padding-block-start: 0 !important; + padding-block-end: 0 !important; +} +.mx-none { + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; +} +.my-none { + margin-block-start: 0 !important; + margin-block-end: 0 !important; +} + +.m-xxs { + margin: var(--xxs) !important; +} +.p-xxs { + padding: var(--xxs) !important; +} +.mt-xxs { + margin-block-start: var(--xxs) !important; +} +.pt-xxs { + padding-block-start: var(--xxs) !important; +} +.mr-xxs { + margin-inline-end: var(--xxs) !important; +} +.pr-xxs { + padding-inline-end: var(--xxs) !important; +} +.mb-xxs { + margin-block-end: var(--xxs) !important; +} +.pb-xxs { + padding-block-end: var(--xxs) !important; +} +.ml-xxs { + margin-inline-start: var(--xxs) !important; +} +.pl-xxs { + padding-inline-start: var(--xxs) !important; +} +.px-xxs { + padding-inline-start: var(--xxs) !important; + padding-inline-end: var(--xxs) !important; +} +.py-xxs { + padding-block-start: var(--xxs) !important; + padding-block-end: var(--xxs) !important; +} +.mx-xxs { + margin-inline-start: var(--xxs) !important; + margin-inline-end: var(--xxs) !important; +} +.my-xxs { + margin-block-start: var(--xxs) !important; + margin-block-end: var(--xxs) !important; +} + +.m-xs { + margin: var(--xs) !important; +} +.p-xs { + padding: var(--xs) !important; +} +.mt-xs { + margin-block-start: var(--xs) !important; +} +.pt-xs { + padding-block-start: var(--xs) !important; +} +.mr-xs { + margin-inline-end: var(--xs) !important; +} +.pr-xs { + padding-inline-end: var(--xs) !important; +} +.mb-xs { + margin-block-end: var(--xs) !important; +} +.pb-xs { + padding-block-end: var(--xs) !important; +} +.ml-xs { + margin-inline-start: var(--xs) !important; +} +.pl-xs { + padding-inline-start: var(--xs) !important; +} +.px-xs { + padding-inline-start: var(--xs) !important; + padding-inline-end: var(--xs) !important; +} +.py-xs { + padding-block-start: var(--xs) !important; + padding-block-end: var(--xs) !important; +} +.mx-xs { + margin-inline-start: var(--xs) !important; + margin-inline-end: var(--xs) !important; +} +.my-xs { + margin-block-start: var(--xs) !important; + margin-block-end: var(--xs) !important; +} + +.m-sm { + margin: var(--sm) !important; +} +.p-sm { + padding: var(--sm) !important; +} +.mt-sm { + margin-block-start: var(--sm) !important; +} +.pt-sm { + padding-block-start: var(--sm) !important; +} +.mr-sm { + margin-inline-end: var(--sm) !important; +} +.pr-sm { + padding-inline-end: var(--sm) !important; +} +.mb-sm { + margin-block-end: var(--sm) !important; +} +.pb-sm { + padding-block-end: var(--sm) !important; +} +.ml-sm { + margin-inline-start: var(--sm) !important; +} +.pl-sm { + padding-inline-start: var(--sm) !important; +} +.px-sm { + padding-inline-start: var(--sm) !important; + padding-inline-end: var(--sm) !important; +} +.py-sm { + padding-block-start: var(--sm) !important; + padding-block-end: var(--sm) !important; +} +.mx-sm { + margin-inline-start: var(--sm) !important; + margin-inline-end: var(--sm) !important; +} +.my-sm { + margin-block-start: var(--sm) !important; + margin-block-end: var(--sm) !important; +} + +.m-md { + margin: var(--md) !important; +} +.p-md { + padding: var(--md) !important; +} +.mt-md { + margin-block-start: var(--md) !important; +} +.pt-md { + padding-block-start: var(--md) !important; +} +.mr-md { + margin-inline-end: var(--md) !important; +} +.pr-md { + padding-inline-end: var(--md) !important; +} +.mb-md { + margin-block-end: var(--md) !important; +} +.pb-md { + padding-block-end: var(--md) !important; +} +.ml-md { + margin-inline-start: var(--md) !important; +} +.pl-md { + padding-inline-start: var(--md) !important; +} +.px-md { + padding-inline-start: var(--md) !important; + padding-inline-end: var(--md) !important; +} +.py-md { + padding-block-start: var(--md) !important; + padding-block-end: var(--md) !important; +} +.mx-md { + margin-inline-start: var(--md) !important; + margin-inline-end: var(--md) !important; +} +.my-md { + margin-block-start: var(--md) !important; + margin-block-end: var(--md) !important; +} + +.mlg { + margin: var(--lg) !important; +} +.plg { + padding: var(--lg) !important; +} +.mt-lg { + margin-block-start: var(--lg) !important; +} +.pt-lg { + padding-block-start: var(--lg) !important; +} +.mr-lg { + margin-inline-end: var(--lg) !important; +} +.pr-lg { + padding-inline-end: var(--lg) !important; +} +.mb-lg { + margin-block-end: var(--lg) !important; +} +.pb-lg { + padding-block-end: var(--lg) !important; +} +.ml-lg { + margin-inline-start: var(--lg) !important; +} +.pl-lg { + padding-inline-start: var(--lg) !important; +} +.px-lg { + padding-inline-start: var(--lg) !important; + padding-inline-end: var(--lg) !important; +} +.py-lg { + padding-block-start: var(--lg) !important; + padding-block-end: var(--lg) !important; +} +.mx-lg { + margin-inline-start: var(--lg) !important; + margin-inline-end: var(--lg) !important; +} +.my-lg { + margin-block-start: var(--lg) !important; + margin-block-end: var(--lg) !important; +} + +.m-xl { + margin: var(--xl) !important; +} +.p-xl { + padding: var(--xl) !important; +} +.mt-xl { + margin-block-start: var(--xl) !important; +} +.pt-xl { + padding-block-start: var(--xl) !important; +} +.mr-xl { + margin-inline-end: var(--xl) !important; +} +.pr-xl { + padding-inline-end: var(--xl) !important; +} +.mb-xl { + margin-block-end: var(--xl) !important; +} +.pb-xl { + padding-block-end: var(--xl) !important; +} +.ml-xl { + margin-inline-start: var(--xl) !important; +} +.pl-xl { + padding-inline-start: var(--xl) !important; +} +.px-xl { + padding-inline-start: var(--xl) !important; + padding-inline-end: var(--xl) !important; +} +.py-xl { + padding-block-start: var(--xl) !important; + padding-block-end: var(--xl) !important; +} +.mx-xl { + margin-inline-start: var(--xl) !important; + margin-inline-end: var(--xl) !important; +} +.my-xl { + margin-block-start: var(--xl) !important; + margin-block-end: var(--xl) !important; +} + +.m-xxl { + margin: var(--xxl) !important; +} +.p-xxl { + padding: var(--xxl) !important; +} +.mt-xxl { + margin-block-start: var(--xxl) !important; +} +.pt-xxl { + padding-block-start: var(--xxl) !important; +} +.mr-xxl { + margin-inline-end: var(--xxl) !important; +} +.pr-xxl { + padding-inline-end: var(--xxl) !important; +} +.mb-xxl { + margin-block-end: var(--xxl) !important; +} +.pb-xxl { + padding-block-end: var(--xxl) !important; +} +.ml-xxl { + margin-inline-start: var(--xxl) !important; +} +.pl-xxl { + padding-inline-start: var(--xxl) !important; +} +.px-xxl { + padding-inline-start: var(--xxl) !important; + padding-inline-end: var(--xxl) !important; +} +.py-xxl { + padding-block-start: var(--xxl) !important; + padding-block-end: var(--xxl) !important; +} +.mx-xxl { + margin-inline-start: var(--xxl) !important; + margin-inline-end: var(--xxl) !important; +} +.my-xxl { + margin-block-start: var(--xxl) !important; + margin-block-end: var(--xxl) !important; +}
A
assets/css/style.css
@@ -0,0 +1,906 @@
+@import url('open-props.min.css'); +@import url('reset.css'); +@import url('fonts.css'); +@import url('prism.css'); +@import url('prism-dracula.css'); +@import url('spacing.css'); + +/* ANCHOR Config +------------------------------------------------------------- */ + +:root { + color-scheme: light; + --_text-color: #1c1b19; + --_darker-text-color: #111110; + --_bg: #fff; + --_accent: var(--red-8); + --_border: #c6c6c6; + --_main-menu-bg: #eee; + --_bg-alt: var(--brown-0); + --_red-text: var(--red-11); + --_button-bg: var(--_accent); + --_button-outline: var(--red-2); + --_button-text: var(--_bg); + + --_text: 'Source Serif 4', 'Iowan Old Style', 'Georgia', Apple Garamond, + Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --_headings: 'Fraunces', 'Source Serif 4', Georgia, serif; + --_code: 'Source Code Pro', ui-monospace, monospace; + + --_li-spacing: 0.25em; +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] { + color-scheme: dark; + --_text-color: #fff8f0; + --_darker-text-color: #f9c8ce; + --_bg: var(--gray-9); /* bg */ + --_bg-alt: #283331; + --_accent: #f7708e; + --_border: var(--gray-7); + --_red-text: #f9c8ce; + --_button-bg: var(--red-9); + --_button-text: #fff; +} + +[data-theme='light'] { + --shadow-color: 220 3% 15% !important; + --shadow-strength: 1% !important; + --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001 !important; +} + +[data-theme='dark'] { + --shadow-color: 220 40% 2% !important; + --shadow-strength: 25% !important; + --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007 !important; +} + +/* ANCHOR Accessibility +------------------------------------------------------------- */ + +.sr-only, +.assistive-text { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +/* Hide elements with the `hidden` attribute */ +[hidden] { + display: none; +} + +.skip-link { + position: absolute; + top: 0; + left: 0; + display: inline-block; + opacity: 0; + pointer-events: none; +} + +.skip-link:focus { + opacity: 1; + pointer-events: auto; +} + +/* ANCHOR Global styles +------------------------------------------------------------- */ + +html { + background-color: var(--_bg); +} + +body { + display: flex; + flex-direction: column; + max-width: unset; + min-height: 100vh; + padding: unset; + -webkit-font-smoothing: subpixel-antialiased; + + [data-theme='dark'] & { + -webkit-font-smoothing: antialiased; + } +} + +.container { + max-width: 800px; + margin-inline: auto; + padding-inline: 1em; +} + +a { + color: var(--_text-color); + text-decoration-color: var(--_accent); + text-decoration-thickness: 1px; + text-underline-offset: 0.1em; + transition: + color 0.15s var(--ease-1), + text-decoration-color 0.15s var(--ease-1); + + &:hover, + &:focus-visible { + color: var(--_accent); + text-decoration-color: var(--_accent); + } +} + +[data-theme='dark'] { + a { + &:hover, + &:focus-visible { + color: var(--_red-text); + } + } +} + +main details { + border: 1px solid transparent; + border-radius: 0.5em; + overflow: hidden; + + &:hover, + &:focus { + border: 1px solid var(--_border); + } + + &[open] { + border: 1px solid var(--_border); + } + + /* the last thing in the details element should have 0 margin-bottom + the language thing is to increase specificity for code blocks */ + > &:last-child, + > [class*='language-']:last-child { + margin-block-end: 0; + } +} + +main summary { + padding: 0.5em; + cursor: pointer; + + &::marker { + color: var(--_accent); + } + + /* the first thing after the summary element should have 0.5em margin-top + the language thing is to increase specificity for code blocks */ + & + *, + & + [class*='language-'] { + margin-block-start: 0.5em; + } +} + +video, +iframe { + margin-block: 1.75em; + max-width: 100%; +} + +main img { + margin-block: 1.75em; + margin-inline: auto; + max-width: 100%; +} + +@media (min-width: 700px) { + .container { + padding-inline: 1.5em; + } +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] { + & img { + opacity: 0.85; + transition: opacity 150ms linear; + } + + & img:hover { + opacity: 1; + } +} + +/* ANCHOR Header +------------------------------------------------------------- */ + +.site-header { + margin-block-end: var(--size-9); +} + +.logo-wrap { + margin-block-end: var(--size-5); + padding-block: var(--size-4); +} + +.site-title { + & a { + display: inline-block; + text-decoration: none; + } + + #logo-text, + #hero-wordmark { + font-family: var(--_headings); + } + + & a:hover #mascot { + opacity: 0; + } + + & a:hover #mascot-hover { + opacity: 1; + } + + & img, + & svg { + max-width: 350px; + width: 100%; + height: auto; + opacity: 1; + } +} + +@media (min-width: 1100px) { + .site-title { + position: relative; + transform: translateX(-112px); + } +} + +[data-theme='dark'] .hero { + opacity: 0.8; +} + +.main-menu { + border: 1px solid var(--_border); + border-radius: 0.5em; + box-shadow: var(--shadow-2); + + &:hover, + &:focus { + border: 1px solid var(--gray-7); + } + + &[open] { + border: 1px solid var(--gray-7); + padding-bottom: 1rem; + } + + & [aria-current='page'] { + text-decoration: none !important; + color: var(--_accent); + } +} + +.main-menu nav { + padding-inline: 0.75em; +} + +.main-menu summary { + padding: 0.5em; + cursor: pointer; + + &::marker { + color: var(--_accent); + } +} + +.main-menu ul { + margin-block-start: 0.25em; + margin-block-end: 0.25em; + padding-inline-start: 0; + padding-block-end: 0.5em; + list-style-type: none; +} + +.menu-heading { + margin-top: var(--size-2); +} + +/* Settings */ + +.settings { + margin-inline: 0.75em; +} + +.checkbox { + display: flex; + align-items: center; + gap: 0.25em; +} + +[data-theme='dark'] { + .main-menu { + &:hover, + &:focus, + &[open] { + border: 1px solid var(--gray-6); + } + } +} + +/* ANCHOR Typography +------------------------------------------------------------- */ + +:root { + border-top: none; /* remove Neat border */ + font-family: var(--_text); + color: var(--_text-color); +} + +main > *, +.stack > * { + margin-block: 0; +} + +main > * + *, +.stack > * + * { + margin-block-start: 1rem; +} + +h1, +h2, +h3, +h4 { + & a { + text-decoration: none; + color: var(--_text); + + &:hover, + &:focus { + text-decoration: underline; + } + } +} + +h1 { + margin-block-end: var(--size-7); + font-size: var(--size-7); +} + +h1, +h2 { + font-family: var(--_headings); + font-weight: normal; + line-height: 1.2; + text-wrap: pretty; +} + +h2 { + margin-block-start: 1.75em; + margin-block-end: 1.5rem; + font-size: var(--size-5); +} + +h3 { + margin-block-start: 1.5em; + font-size: 1.1rem; +} + +ul, +ol { + margin-block-start: var(--size-3); + padding-inline-start: 1.75em; +} + +ul ul, +ul ol, +ol ul, +ol ol { + margin-block-start: 0; +} + +li { + margin-block-start: var(--_li-spacing); +} + +li::marker { + color: var(--_accent); +} + +code { + display: inline-block; + font-family: var(--_code) !important; + font-size: 0.85em; + line-height: 1.5; + color: var(--_red-text); + + &:not(pre &) { + padding: 0 0.25em; + border-radius: 0.25em; + background-color: var(--red-0); + } +} + +pre code { + background-color: transparent; + color: inherit; +} + +pre[class*='language-'] > code { + display: block; + padding: 0; + font-size: 0.75em; +} + +pre, +pre[class*='language-'] { + margin-block: 1.75em; + padding: 1rem; + border: 1px solid var(--_border); + border-radius: 0.25em; + max-height: 600px; + box-shadow: var(--shadow-3); + color: #1c1b19; + scrollbar-color: var(--_border) transparent; + overflow: auto; +} + +details pre, +details pre[class*='language-'] { + border: none; + border-radius: 0; +} + +.token { + color: unset; +} + +.wrap-code code[class*='language-'], +.wrap-code [class*='language-'] { + white-space: pre-wrap; + /* word-break: break-word; */ +} + +/* font style utility classes */ +.sans-serif { + font-family: + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif !important; +} + +.serif { + font-family: var(--_text) !important; +} + +.mono { + font-family: + Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, + monospace !important; + font-size: 0.8rem; +} + +@media (min-width: 700px) { + :root { + font-size: 1.25em; + } + + pre, + pre[class*='language-'] { + margin-inline: -1em; + + details & { + margin-inline: auto; + } + } +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] pre:not([class*='language-']) { + background-color: var(--gray-11); + border-color: var(--gray-8); +} + +[data-theme='dark'] pre, +[data-theme='dark'] pre[class*='language-'] { + color: var(--_red-text); +} + +[data-theme='dark'] code:not([class*='language-']) { + color: var(--_red-text); + background-color: var(--gray-11); +} + +[data-theme='dark'] mark { + background-color: #90d8ff40; + color: var(--_text-color); +} + +/* ANCHOR Components +------------------------------------------------------------- */ + +aside { + position: relative; + margin-block: var(--size-6); + margin-inline-start: var(--size-6); + padding: var(--size-5); + padding-inline-start: var(--size-7); + border: var(--border-size-2) solid var(--red-4); + border-radius: var(--radius-drawn-3); + font-size: 0.85em; + line-height: 1.45; + background-color: var(--red-0); + box-shadow: var(--shadow-3); + + /* border variations */ + &:nth-of-type(2) { + border-radius: var(--radius-drawn-4); + } + &:nth-of-type(3) { + border-radius: var(--radius-drawn-5); + } + &:nth-of-type(4) { + border-radius: var(--radius-drawn-6); + } + &:nth-of-type(5) { + border-radius: var(--radius-drawn-1); + } + &:nth-of-type(6) { + border-radius: var(--radius-drawn-2); + } + + * { + margin: 0; + } + + & p { + orphans: 2; + } + + > * + * { + margin-block-start: 1rem; + } + + & li { + margin-block-start: var(--_li-spacing); + } + + & pre, + & pre[class*='language-'] { + margin-block: 1rem 0; + margin-inline: 0; + } + + /* mascot */ + --mascot-multiple: 7; + + &:before { + content: ' '; + position: absolute; + top: calc(120px / var(--mascot-multiple)); + left: calc(-310px / var(--mascot-multiple)); + height: calc(291px / var(--mascot-multiple)); + width: calc(464px / var(--mascot-multiple)); + background-image: url('../img/design/mascot-aside-back.svg'); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + z-index: -1; + } + + &:after { + content: ' '; + position: absolute; + top: calc(-8px / var(--mascot-multiple)); + left: calc(-30px / var(--mascot-multiple)); + height: calc(535px / var(--mascot-multiple)); + width: calc(156px / var(--mascot-multiple)); + background-image: url('../img/design/mascot-aside-front.svg'); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + z-index: 1; + } +} + +[data-theme='light'] aside code:not(pre code) { + background-color: #00000011; +} + +.aside-label { + font-family: var(--_text); + font-weight: bold; + font-size: 0.85em; + line-height: 1; + text-transform: uppercase; + letter-spacing: 0.085em; + color: var(--_text-color); + + & + * { + margin-block-start: 0.5rem; + } +} + +@media (min-width: 900px) { + aside { + --mascot-multiple: 5; + margin-inline: 0; + } +} + +[data-theme='dark'] aside { + border-color: var(--gray-6); + background-color: var(--gray-8); +} +[data-theme='dark'] aside code:not(pre code) { + background-color: #f7708e33; +} + +/* ---------------------------------------------------------- */ + +figure { + margin-inline: 0; + + & img { + display: block; + margin-inline: auto; + max-width: 100%; + } +} + +figcaption { + margin-block-start: 0.5rem; + font-size: 0.85em; +} + +/* ---------------------------------------------------------- */ + +elevator-button a { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + bottom: 1rem; + right: 1rem; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + box-shadow: 0 0 0.5rem 0.25rem #00000011; + font-size: 1.5rem; + font-weight: bold; + background-color: var(--_text-color); + color: var(--_bg); + text-decoration: none; + opacity: 0; + transition: opacity 0.2s linear; + pointer-events: none; + + &.active { + opacity: 1; + pointer-events: auto; + } + + &:before { + content: '↑'; + color: var(--_bg); + } +} + +.elevator-arrow { + color: var(--_bg); +} + +/* ---------------------------------------------------------- */ + +.chapter-nav { + display: flex; + justify-content: space-between; + flex-direction: column; + margin-block: 1.5rem 0; + border-top: 1px solid var(--_border); + text-align: center; + + & a { + padding: 1em 1em; + width: 100%; + transition: + background-color 0.1s var(--ease-1), + color 0.1s var(--ease-1), + text-decoration-color 0.1s var(--ease-1); + + &:hover, + &:focus { + text-decoration-color: var(--_red-text); + background-color: var(--red-0); + color: var(--_red-text); + } + + &:has(+ a) { + border-block-start: 1px solid var(--_border); + } + } +} + +[data-theme='dark'] { + .chapter-nav a { + &:hover, + &:focus { + text-decoration-color: var(--_accent); + background-color: var(--gray-10); + } + } +} + +@media (min-width: 700px) { + .chapter-nav { + margin-block-start: 3rem; + flex-direction: row; + + & a:first-child { + order: 1; + } + + & a:has(+ a) { + border-block-start: none; + border-inline-start: 1px solid var(--_border); + } + } +} + +/* ANCHOR Forms +------------------------------------------------------------- */ + +/* buttons */ +button, +a.button { + display: inline-block; + position: relative; + padding: 0.5em 1em; + border-radius: var(--radius-2); + box-shadow: var(--shadow-3); + text-decoration: none; + background-color: var(--_button-bg); + color: var(--_button-text); + outline: 0 solid var(--red-2); + transition: outline-width 0.2s var(--ease-1); + text-align: center; + + &:hover, + &:focus-visible { + color: #fff; + outline: 8px solid var(--red-2); + } +} + +form button[type='submit'] { + display: inline-block; + width: unset; +} + +[data-theme='dark'] { + & button, + & a.button { + outline-color: var(--gray-7); + } +} + +/* ANCHOR Promo +------------------------------------------------------------- */ + +.promo { + padding-block: 3rem; + border-block-start: 1px solid #e0cab1; + background-color: var(--_bg-alt); + + & + .site-footer { + margin-block-start: 0; + padding-block-start: 1rem; + } +} + +.promo-title { + margin-block-end: var(--size-7); + font-size: 1.125rem; + font-weight: bold; +} + +/* Dark color scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme='dark'] { + .promo { + border-block-start: 1px solid #3e5d59; + background-color: #283331; + color: #fff8f0; + } +} + +/* ANCHOR Home +------------------------------------------------------------- */ + +.hero { + margin-inline: auto; + + max-width: 1400px; + & svg { + max-width: 100%; + } + + #hero-wordmark, + #logo-text { + font-family: var(--_headings); + } +} + +g#rocket, +g#donut-before, +g#donut-after, +g#coffee-before, +g#coffee-after { + &:hover { + cursor: pointer; + } +} + +#cloud { + pointer-events: none; +} + +.home-buttons { + display: flex; + flex-wrap: wrap; + + & a { + display: block; + margin-block-end: 0.5rem; + width: 100%; + } +} + +@media (min-width: 500px) { + .home-buttons { + flex-wrap: nowrap; + + & a { + margin-inline-end: 1rem; + width: auto; + } + } +} + +/* ANCHOR Footer +------------------------------------------------------------- */ + +.site-footer { + margin-block-start: 3rem; + padding-block: 2rem; + /* border-block-start: 1px solid var(--border); */ + font-size: 0.85em; + background-color: var(--_bg-alt); +}
A
assets/img/design/hero-mobile.svg
@@ -0,0 +1,169 @@
+ +<svg id="hero-mobile" viewBox="0 0 3000 1575" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect id="path-r14ozuxzx1-1" x="0" y="0" width="3000" height="1575"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="BWatson_OG_03"> + <mask id="mask-r14ozuxzx1-2" fill="white"> + <use xlink:href="#path-r14ozuxzx1-1"></use> + </mask> + <g id="Rectangle"></g> + <g id="Group" mask="url(#mask-r14ozuxzx1-2)"> + <g transform="translate(-157.55, -157.55)"> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="17.18" width="3197.81" height="1847.5"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFE0B2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="1216.84" width="3197.81" height="647.85"></rect> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2694.33" cy="828.5" r="51.45"></circle> + <line x1="2694.33" y1="777.04" x2="2694.33" y2="5.68434189e-14" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BB9C87" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2942.77" cy="828.5" r="91.14"></circle> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#ECEFF1" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2942.7393, 828.4803) rotate(-72.02) translate(-2942.7393, -828.4803)" cx="2942.73932" cy="828.480294" rx="62.9" ry="166.44"></ellipse> + <path d="M3029.46,856.63 C3013.92,904.51 2840.54,848.24 2856.08,800.36 C2871.62,752.48 2923.03,726.27 2970.9,741.81 C3018.78,757.35 3044.99,808.76 3029.45,856.63 L3029.46,856.63 Z" id="Path" stroke="#465362" stroke-width="10" fill="#BB9C87" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2944.52" y1="737.33" x2="2944.52" y2="24.53" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2869.23" cy="658.59" r="42.66"></circle> + <line x1="2869.23" y1="615.93" x2="2869.23" y2="1.07" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2716.21" y1="562.46" x2="2716.21" y2="57.97" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFF176" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2759.19" cy="405.21" r="134.15"></circle> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#CFD8DC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2575.72" cy="501.65" r="43.99"></circle> + <path d="M2578.73,689.91 C2578.73,700.64 2576.2,710.77 2571.69,719.75 C2567.73,727.67 2562.24,734.69 2555.61,740.42 C2543.92,750.52 2528.68,756.63 2512.01,756.63 C2483.82,756.63 2459.71,739.15 2449.94,714.43 C2447.74,708.85 2446.26,702.91 2445.63,696.71 C2445.41,694.47 2445.29,692.21 2445.29,689.91 C2445.29,686.81 2445.5,683.75 2445.92,680.76 C2447.41,669.85 2451.54,659.78 2457.65,651.22 C2469.75,634.26 2489.59,623.2 2512.01,623.2 C2534.43,623.2 2554.27,634.26 2566.37,651.22 C2572.48,659.78 2576.61,669.85 2578.1,680.76 C2578.52,683.75 2578.73,686.81 2578.73,689.91 L2578.73,689.91 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3058.14,533.16 C3058.14,543.43 3055.84,553.15 3051.71,561.84 C3046.81,572.21 3039.32,581.12 3030.08,587.73 C3019.09,595.6 3005.61,600.24 2991.06,600.24 C2976.51,600.24 2963.03,595.6 2952.04,587.73 C2941.07,579.86 2932.56,568.77 2927.91,555.84 C2925.36,548.76 2923.98,541.13 2923.98,533.16 C2923.98,510.67 2935.06,490.76 2952.05,478.59 C2957.85,474.43 2964.34,471.18 2971.31,469.04 C2977.56,467.12 2984.19,466.09 2991.06,466.09 C3005.61,466.09 3019.08,470.73 3030.07,478.6 C3039.31,485.22 3046.8,494.12 3051.7,504.49 C3055.82,513.19 3058.13,522.91 3058.13,533.17 L3058.14,533.16 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2986.9,505.67 C2986.9,533.74 2964.15,556.49 2936.08,556.49 C2933.3,556.49 2930.57,556.26 2927.92,555.84 C2925.37,548.76 2923.99,541.13 2923.99,533.16 C2923.99,510.67 2935.07,490.76 2952.06,478.59 C2957.86,474.43 2964.35,471.18 2971.32,469.04 C2980.93,478.28 2986.91,491.28 2986.91,505.67 L2986.9,505.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3058.14,533.16 C3058.14,543.43 3055.84,553.15 3051.71,561.84 C3040.46,557.19 3032.53,546.1 3032.53,533.16 C3032.53,520.22 3040.46,509.14 3051.71,504.48 C3055.83,513.18 3058.14,522.9 3058.14,533.16 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3030.08,478.59 C3019.09,486.46 3005.62,491.1 2991.07,491.1 C2976.52,491.1 2963.05,486.46 2952.06,478.59 C2963.05,470.72 2976.52,466.08 2991.07,466.08 C3005.62,466.08 3019.09,470.72 3030.08,478.59 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3030.08,587.73 C3019.09,595.6 3005.61,600.24 2991.06,600.24 C2976.51,600.24 2963.03,595.6 2952.04,587.73 C2963.03,579.85 2976.51,575.22 2991.06,575.22 C3005.61,575.22 3019.09,579.86 3030.08,587.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2805.47,651.72 C2805.47,701.02 2765.51,740.98 2716.21,740.98 C2691.74,740.98 2669.57,731.13 2653.45,715.17 C2645.43,707.26 2638.91,697.82 2634.35,687.35 C2629.59,676.44 2626.95,664.39 2626.95,651.72 C2626.95,637.31 2630.36,623.7 2636.44,611.65 C2641.81,600.97 2649.27,591.51 2658.29,583.82 C2673.87,570.51 2694.1,562.47 2716.21,562.47 C2738.32,562.47 2758.54,570.51 2774.13,583.82 C2783.15,591.51 2790.61,600.97 2795.98,611.65 C2802.06,623.7 2805.47,637.32 2805.47,651.72 L2805.47,651.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCC80" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2744.55" cy="677.6" rx="30.61" ry="13.92"></ellipse> + <path d="M2795.98,611.64 L2636.44,611.64 C2641.81,600.96 2649.27,591.5 2658.29,583.81 L2774.13,583.81 C2783.15,591.5 2790.61,600.96 2795.98,611.64 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2696.12,701.25 C2696.12,705.09 2694.57,708.57 2692.05,711.1 C2689.52,713.62 2686.05,715.17 2682.2,715.17 L2653.44,715.17 C2645.42,707.26 2638.9,697.82 2634.34,687.35 L2682.2,687.35 C2689.89,687.35 2696.12,693.58 2696.12,701.26 L2696.12,701.25 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2759.19" y1="271.06" x2="2759.19" y2="33.45" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2991.06" y1="466.08" x2="2991.06" y2="73.58" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2575.72" y1="454.74" x2="2575.72" y2="57.78" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2512.01" y1="623.2" x2="2512.01" y2="57.78" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="396.92 816.34 343.43 816.34 289.95 816.34 289.95 543.41 311.22 425.22 375.65 425.22 396.92 543.41"></polygon> + <path d="M337.11,887.67 L309.96,887.67 C309.96,871.63 316.04,858.63 323.54,858.63 C331.04,858.63 337.12,871.63 337.12,887.67 L337.11,887.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M377.25,887.67 L350.1,887.67 C350.1,871.63 356.18,858.63 363.68,858.63 C371.18,858.63 377.26,871.63 377.26,887.67 L377.25,887.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M361.95,290.55 C359.35,268.28 355.83,238 353.22,215.64 C352.64,210.67 348.44,206.93 343.44,206.93 L343.44,206.93 C338.44,206.93 334.23,210.68 333.66,215.64 L324.93,290.54 C316.49,296.41 310.96,306.17 310.96,317.22 L310.96,425.21 L375.92,425.21 L375.92,317.22 C375.92,306.16 370.39,296.4 361.95,290.54 L361.95,290.55 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M289.95,816.34 L396.92,816.34 L396.92,829.51 C396.92,846.32 383.27,859.97 366.46,859.97 L320.4,859.97 C303.59,859.97 289.94,846.32 289.94,829.51 L289.94,816.34 L289.94,816.34 L289.95,816.34 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#1565C0" fill-rule="nonzero" cx="343.43" cy="361.23" r="19.75"></circle> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="326.26" y="559.66" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="343.43" y="576.84" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(352.025, 568.255) rotate(180) translate(-352.025, -568.255)" x="343.44" y="559.67" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(334.845, 585.425) rotate(180) translate(-334.845, -585.425)" x="326.26" y="576.84" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="326.26" y="751.43" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="343.43" y="768.6" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(352.025, 760.015) rotate(180) translate(-352.025, -760.015)" x="343.44" y="751.43" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(334.845, 777.195) rotate(180) translate(-334.845, -777.195)" x="326.26" y="768.61" width="17.17" height="17.17"></rect> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="282.31 868.04 244.4 868.04 239.35 892.7 287.36 892.7"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="289.95 838.15 236.76 838.15 229.67 872.76 297.04 872.76"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="263.35 565.81 236.76 630.08 236.76 838.16 289.95 838.16 289.95 630.08"></polygon> + <line x1="236.76" y1="632.92" x2="289.95" y2="632.92" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="236.76" y1="734.12" x2="289.95" y2="734.12" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="236.76" y1="838.16" x2="289.95" y2="838.16" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="442.47 868.04 404.56 868.04 399.5 892.7 447.52 892.7"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="450.11 838.15 396.92 838.15 389.83 872.76 457.19 872.76"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="423.51 565.81 396.92 630.08 396.92 838.16 450.11 838.16 450.11 630.08"></polygon> + <line x1="396.92" y1="632.92" x2="450.11" y2="632.92" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="396.92" y1="734.12" x2="450.11" y2="734.12" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="396.92" y1="838.16" x2="450.11" y2="838.16" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M-5.68434189e-14,892.7 L843.96,892.7 C858.41,892.7 870.13,904.43 870.13,918.87 L870.13,918.87 C870.13,933.32 858.4,945.04 843.96,945.04 L-5.68434189e-14,945.04 L-5.68434189e-14,892.69 L-5.68434189e-14,892.69 L-5.68434189e-14,892.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1904.67,1343.62 L1904.67,1360.64 C1904.67,1371.3 1896.08,1380.91 1884.37,1380.91 L1398.59,1380.91 C1386.88,1380.91 1378.29,1371.3 1378.29,1360.64 L1378.29,1343.62 C1378.29,1340.82 1378.88,1337.94 1380.17,1335.15 L1416.29,1256.61 C1419.6,1249.41 1426.8,1244.8 1434.72,1244.8 L1848.24,1244.8 C1856.16,1244.8 1863.35,1249.41 1866.66,1256.61 L1902.79,1335.15 C1904.08,1337.94 1904.67,1340.82 1904.67,1343.62 L1904.67,1343.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1478.34" y="930.63" width="320.39" height="357.55"></rect> + <path d="M2271.84,349.73 L2271.84,1122.23 C2271.84,1148.42 2250.61,1169.65 2224.42,1169.65 L1052.64,1169.65 C1026.44,1169.65 1005.21,1148.42 1005.21,1122.23 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2271.84,349.73 L2271.84,1038.67 L1005.21,1038.67 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(1638.535, 668.87) rotate(90) translate(-1638.535, -668.87)" x="1318.735" y="82.325" width="639.6" height="1173.09"></rect> + <path d="M2067.89,1590.51 L2009.02,1462.54 C2003.62,1450.82 1991.9,1443.3 1979,1443.3 L1298.06,1443.3 C1285.16,1443.3 1273.44,1450.81 1268.04,1462.54 L1209.17,1590.51 C1207.07,1595.06 1206.1,1599.75 1206.1,1604.32 L1206.1,1611.17 C1206.1,1628.56 1220.11,1644.21 1239.19,1644.21 L2037.86,1644.21 C2056.94,1644.21 2070.95,1628.56 2070.95,1611.17 L2070.95,1604.32 C2070.95,1599.74 2069.98,1595.06 2067.88,1590.51 L2067.89,1590.51 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2035.31,1568.41 L1976.93,1441.49 C1975.53,1438.43 1972.45,1436.47 1969.09,1436.47 L1307.98,1436.47 C1304.62,1436.47 1301.54,1438.44 1300.14,1441.49 L1241.76,1568.41 C1241.17,1569.71 1240.94,1570.92 1240.94,1572.02 L1240.94,1586.47 C1240.94,1588.51 1241.72,1590.14 1242.34,1591.09 C1243.29,1592.58 1245.49,1595.06 1249.6,1595.06 L2027.48,1595.06 C2031.59,1595.06 2033.78,1592.57 2034.74,1591.09 C2035.36,1590.14 2036.14,1588.51 2036.14,1586.47 L2036.14,1572.02 C2036.14,1570.92 2035.91,1569.71 2035.32,1568.41 L2035.31,1568.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFF59D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="506.13" y="276.82" width="106.33" height="615.88"></rect> + <line x1="506.13" y1="310.49" x2="612.46" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="506.13" y1="855.46" x2="612.46" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M545.16,509.38 C541.12,509.31 540.09,509.09 538.33,507.98 C536.05,506.51 534.73,504.01 534.73,501.29 C534.73,498.57 536.05,496 538.33,494.53 C540.09,493.43 541.49,493.13 545.16,493.13 L574.7,493.13 C578.15,493.13 579.62,493.5 581.31,494.82 C583.29,496.36 584.47,498.71 584.47,501.21 C584.47,503.71 583.22,506.28 581.31,507.75 C579.55,509.07 578.52,509.37 574.33,509.37 L567.42,509.37 L567.42,519.21 L574.11,519.21 C578,519.21 579.47,519.5 581.31,520.9 C583.29,522.37 584.47,524.65 584.47,527.15 C584.47,529.65 583.29,532.15 581.38,533.61 C579.76,534.86 577.85,535.37 574.69,535.37 L545.01,535.37 C541.63,535.37 540.31,535.08 538.62,534.05 C536.2,532.58 534.73,530.01 534.73,527.22 C534.73,524.65 535.91,522.22 537.96,520.75 C539.72,519.5 541.12,519.21 545.01,519.21 L552.06,519.21 L552.06,509.37 L545.15,509.37 L545.16,509.38 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M569.04,548.91 C569.04,546.12 569.7,544.28 571.17,542.81 C572.71,541.34 574.55,540.53 576.53,540.53 C579.32,540.53 582.26,542.37 583.29,544.72 C584.02,546.41 584.1,547.07 584.1,553.46 L584.1,569.77 C584.1,572.803333 584.05,574.64 583.95,575.28 C583.44,579.17 580.42,581.89 576.6,581.89 C574.47,581.89 572.27,580.86 570.8,579.25 C569.62,578 569.04,575.94 569.04,573 L569.04,569.4 L544.65,569.4 C541.71,569.4 540.09,569.03 538.4,568 C536.05,566.53 534.73,564.11 534.73,561.31 C534.73,558.51 535.98,556.17 538.11,554.62 C539.8,553.52 541.2,553.22 544.5,553.22 L569.04,553.22 L569.04,548.89 L569.04,548.91 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M580.13,619.22 C582.7,620.47 584.46,623.33 584.46,626.35 C584.46,628.33 583.58,630.54 582.26,631.93 C580.94,633.33 579.54,633.99 576.9,634.43 L545.31,640.01 C544.28,640.23 543.33,640.3 542.59,640.3 C538.18,640.3 534.73,636.77 534.73,632.37 C534.73,628.26 537.23,625.02 540.9,624.36 L550.08,622.52 L541.41,619.36 C537,617.74 534.72,614.88 534.72,611.06 C534.72,607.24 536.78,604.52 541.33,602.83 L550.07,599.6 L542.28,598.28 C537.58,597.47 534.71,594.39 534.71,590.2 C534.71,585.42 538.38,582.04 543.53,582.04 C544.19,582.04 544.85,582.11 545.51,582.19 L576.88,587.77 C581.58,588.58 584.45,591.52 584.45,595.7 C584.45,599.15 582.32,602.39 579.01,603.78 L562.77,611.05 L580.11,619.21 L580.13,619.22 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M550.23,669.98 C550.23,672.7 549.79,674.24 548.76,675.71 C547.36,677.62 545.09,678.8 542.74,678.8 C540.61,678.8 538.33,677.84 536.94,676.3 C535.62,674.83 535.1,673.14 535.1,670.35 L535.1,654.92 C535.1,651.69 535.91,649.56 537.67,648.09 C539.87,646.11 540.98,645.89 547.74,645.89 L575.37,645.89 C580.88,645.89 584.48,649.05 584.48,653.9 C584.48,656.4 583.3,658.82 581.54,660.22 C579.56,661.69 578.09,662.06 573.46,662.06 L550.24,662.06 L550.24,669.99 L550.23,669.98 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#A5D6A7" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="612.46" y="276.82" width="106.33" height="615.88"></rect> + <line x1="612.46" y1="310.49" x2="718.79" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="612.46" y1="855.46" x2="718.79" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M646.64,562.5 C642.53,557.72 640.17,551.63 640.17,545.38 C640.17,531.05 651.63,519.45 665.81,519.45 C679.99,519.45 691.6,531.13 691.6,545.46 C691.6,551.41 689.54,557.14 685.65,561.84 C682.49,565.81 679.18,567.79 675.95,567.79 C671.54,567.79 667.87,564.19 667.87,559.71 C667.87,557.8 668.68,555.74 669.85,554.64 L672.42,552.29 C674.33,550.53 675.36,547.96 675.36,545.31 C675.36,539.95 671.17,535.69 665.81,535.69 C660.45,535.69 656.26,539.95 656.26,545.24 C656.26,547.88 657.44,550.53 659.49,552.44 L661.25,554.13 C662.65,555.45 663.6,557.66 663.6,559.71 C663.6,563.97 659.85,567.79 655.67,567.79 C652.73,567.79 649.65,565.95 646.63,562.5 L646.64,562.5 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,572.05 C656.7,572.05 659.94,575.28 659.94,579.4 C659.94,581.38 659.28,583.07 657.59,585.13 C654.87,588.66 654.58,589.1 654.58,590.27 C654.58,591.52 655.46,592.33 656.71,592.33 C657.59,592.33 658.18,591.96 658.77,591.08 C659.06,590.64 659.21,590.42 660.17,587.85 C660.61,586.53 661.05,585.21 661.57,583.88 C664.07,576.75 668.7,573.23 675.53,573.23 C685.08,573.23 691.62,580.58 691.62,591.23 C691.62,600.05 686.92,606.95 680.89,606.95 C677,606.95 674.2,604.31 674.2,600.63 C674.2,598.43 674.93,596.66 676.99,593.94 C678.39,592.25 678.75,591.44 678.75,590.56 C678.75,589.53 677.87,588.65 676.84,588.65 C675.37,588.65 674.71,589.68 673.46,593.5 C672.21,597.69 670.23,601.66 668.32,603.93 C665.82,606.94 661.41,608.85 656.79,608.85 C652.17,608.85 648.12,607.16 645.11,604.22 C641.8,600.91 640.19,596.51 640.19,590.48 C640.19,580.05 645.63,572.04 652.61,572.04 L652.59,572.05 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,613.49 C656.7,613.49 659.94,616.72 659.94,620.84 C659.94,622.82 659.28,624.51 657.59,626.57 C654.87,630.1 654.58,630.54 654.58,631.71 C654.58,632.96 655.46,633.77 656.71,633.77 C657.59,633.77 658.18,633.4 658.77,632.52 C659.06,632.08 659.21,631.86 660.17,629.29 C660.61,627.97 661.05,626.65 661.57,625.32 C664.07,618.19 668.7,614.67 675.53,614.67 C685.08,614.67 691.62,622.02 691.62,632.67 C691.62,641.49 686.92,648.39 680.89,648.39 C677,648.39 674.2,645.75 674.2,642.07 C674.2,639.87 674.93,638.1 676.99,635.38 C678.39,633.69 678.75,632.88 678.75,632 C678.75,630.97 677.87,630.09 676.84,630.09 C675.37,630.09 674.71,631.12 673.46,634.94 C672.21,639.13 670.23,643.1 668.32,645.37 C665.82,648.38 661.41,650.29 656.79,650.29 C652.17,650.29 648.12,648.6 645.11,645.66 C641.8,642.35 640.19,637.95 640.19,631.92 C640.19,621.49 645.63,613.48 652.61,613.48 L652.59,613.49 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M429.39,1494.79 C344.79,1494.79 276.2,1523.32 276.2,1558.52 L276.2,1564.61 C276.2,1599.81 344.79,1628.34 429.39,1628.34 C513.99,1628.34 582.58,1599.81 582.58,1564.61 L582.58,1558.52 C582.58,1523.32 513.99,1494.79 429.39,1494.79 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="529.32" cy="1406.02" r="57.79"></circle> + <path d="M429.39,1312.86 C362.12,1312.86 307.59,1335.54 307.59,1363.53 L307.59,1539.67 C307.59,1567.65 362.12,1590.34 429.39,1590.34 C496.66,1590.34 551.19,1567.66 551.19,1539.67 L551.19,1363.53 C551.19,1335.55 496.66,1312.86 429.39,1312.86 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M532.88,1356.9 C532.51,1358.53 527.37,1365.91 509.18,1373.32 C508.61,1373.55 508.03,1373.78 507.43,1374.01 C486.53,1382.16 458.8,1386.65 429.38,1386.65 C399.96,1386.65 372.24,1382.16 351.34,1374.01 C350.75,1373.78 350.15,1373.55 349.58,1373.32 C331.39,1365.9 326.26,1358.53 325.89,1356.9" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M509.19,1373.31 C508.62,1373.54 508.04,1373.77 507.44,1374 C486.54,1382.15 458.81,1386.64 429.39,1386.64 C399.97,1386.64 372.25,1382.15 351.35,1374 C350.76,1373.77 350.16,1373.54 349.59,1373.31 C350.16,1373.07 350.76,1372.84 351.35,1372.61 C372.25,1364.46 399.98,1359.98 429.39,1359.98 C458.8,1359.98 486.54,1364.47 507.44,1372.61 C508.03,1372.84 508.62,1373.07 509.19,1373.31 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B9937E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M443.18,1435.72 C446.45,1445.66 449.73,1455.55 453,1465.39 C463.59,1464.76 474.15,1463.61 484.65,1461.94 C494.08,1460.38 497.97,1471.67 490.37,1478.68 C481.89,1486.39 473.37,1493.76 464.83,1500.78 C468.09,1510.5 471.35,1520.17 474.61,1529.8 C477.53,1538.45 467.23,1547.31 459.54,1542.3 C450.99,1536.78 442.41,1530.92 433.83,1524.72 C425.25,1530.92 416.68,1536.78 408.12,1542.3 C400.43,1547.31 390.13,1538.45 393.05,1529.8 C396.31,1520.18 399.57,1510.51 402.83,1500.78 C394.28,1493.75 385.76,1486.39 377.29,1478.68 C369.69,1471.67 373.58,1460.38 383.01,1461.94 C393.51,1463.61 404.07,1464.76 414.66,1465.39 C417.93,1455.55 421.2,1445.66 424.48,1435.72 C427.42,1426.87 440.24,1426.87 443.18,1435.72 L443.18,1435.72 Z" id="Path" stroke="none" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="377.02" cy="1427.64" r="10.69"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="519.87" cy="1494.79" r="10.69"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="361.35" cy="1494.79" r="4.98"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="492.23" cy="1416.96" r="15.92"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="341.42" cy="1529.63" r="8.16"></circle> + <path d="M2960.51087,1360.04 L2960.11,1388.43 C2960.1,1389.21 2959.98,1389.99 2959.75,1390.78 L2902.17,1585.76 C2897.66,1601.03 2876,1611.63 2854.05,1608.93 L2675.08,1586.95 C2659.46,1585.04 2650.29,1576.68 2650.42842,1566.62 L2650.83,1538.22 C2650.88,1534.87 2651.95,1531.34 2654.16,1527.8 L2768.33,1344.56 C2773.38,1336.46 2789.74,1331.18 2805.06,1332.58 L2935.8,1344.47 C2950.25,1345.79 2960.62,1352.44 2960.51087,1360.06 L2960.51087,1360.04 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2854.44,1580.53 L2675.47,1558.55 C2654.65,1555.99 2645.29,1542.02 2654.15,1527.79 L2768.32,1344.54 C2773.36,1336.44 2789.73,1331.16 2805.05,1332.56 L2935.79,1344.45 C2951.71,1345.9 2962.66,1353.83 2960.14,1362.38 L2902.56,1557.36 C2898.05,1572.62 2876.39,1583.23 2854.44,1580.53 L2854.44,1580.53 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B0BEC5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2889.2,1354.81 L2837.9,1350.05 C2834.27,1349.71 2832.12,1347.9 2833.09,1346 L2833.09,1346 C2834.06,1344.12 2837.75,1342.87 2841.34,1343.2 L2892.08,1347.86 C2895.73,1348.19 2898.06,1350.01 2897.29,1351.93 L2897.29,1351.93 C2896.51,1353.86 2892.89,1355.15 2889.2,1354.81 L2889.2,1354.81 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2786.84,1409.97 C2786.48,1409.56 2786.43,1409.11 2786.7,1408.61 L2787.93,1406.32 L2774.92,1405.01 C2774.28,1404.94 2773.78,1404.76 2773.44,1404.45 C2773.1,1404.15 2772.96,1403.79 2773.02,1403.38 L2773.79,1399.18 C2773.85,1398.92 2774.01,1398.66 2774.26,1398.39 C2774.51,1398.13 2774.84,1397.9 2775.23,1397.73 L2798.58,1386.99 C2799.26,1386.64 2800.04,1386.51 2800.9,1386.59 L2809.81,1387.46 C2810.56,1387.53 2811.11,1387.76 2811.45,1388.13 C2811.8,1388.5 2811.85,1388.92 2811.61,1389.39 L2806.21,1399.92 L2807.59,1400.06 C2808.35,1400.14 2808.92,1400.37 2809.28,1400.77 C2809.65,1401.17 2809.71,1401.61 2809.46,1402.1 L2807.29,1406.39 C2807.04,1406.88 2806.55,1407.28 2805.83,1407.57 C2805.1,1407.87 2804.35,1407.98 2803.58,1407.9 L2802.18,1407.76 L2801,1410.06 C2800.75,1410.56 2800.26,1410.96 2799.55,1411.26 C2798.84,1411.56 2798.09,1411.67 2797.32,1411.6 L2788.52,1410.71 C2787.75,1410.63 2787.18,1410.39 2786.82,1409.98 L2786.84,1409.97 Z M2793.65,1399.29 C2793.93,1399.32 2794.21,1399.29 2794.5,1399.23 C2794.79,1399.16 2795.01,1399.05 2795.18,1398.9 C2795.27,1398.81 2795.5,1398.41 2795.88,1397.71 C2796.23,1397.05 2796.42,1396.66 2796.44,1396.53 C2796.47,1396.4 2796.37,1396.27 2796.15,1396.13 C2795.96,1396.02 2795.72,1395.94 2795.45,1395.92 C2795.21,1395.9 2794.99,1395.92 2794.8,1395.96 C2794.6,1396.01 2794.16,1396.19 2793.48,1396.49 C2792.79,1396.79 2791.87,1397.21 2790.7,1397.74 C2790.14,1398 2789.99,1398.28 2790.25,1398.58 C2790.51,1398.88 2791,1399.07 2791.72,1399.14 C2792.37,1399.18 2793.02,1399.23 2793.66,1399.3 L2793.65,1399.29 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2812.97,1401.73 C2812.54,1401.32 2812.45,1400.88 2812.69,1400.4 L2815.54,1394.73 C2815.78,1394.26 2816.28,1393.88 2817.05,1393.6 C2817.82,1393.32 2818.62,1393.22 2819.45,1393.31 L2828.53,1394.21 C2829.37,1394.29 2829.99,1394.53 2830.41,1394.93 C2830.83,1395.33 2830.92,1395.76 2830.69,1396.24 L2827.97,1401.93 C2827.74,1402.42 2827.25,1402.8 2826.49,1403.09 C2825.74,1403.38 2824.94,1403.48 2824.09,1403.4 L2814.89,1402.48 C2814.04,1402.4 2813.41,1402.15 2812.97,1401.74 L2812.97,1401.73 Z M2807.77,1412.09 C2807.34,1411.67 2807.24,1411.21 2807.49,1410.71 L2810.43,1404.86 C2810.68,1404.37 2811.19,1403.98 2811.97,1403.7 C2812.75,1403.42 2813.56,1403.31 2814.41,1403.4 L2823.62,1404.32 C2824.47,1404.41 2825.1,1404.65 2825.52,1405.06 C2825.94,1405.47 2826.03,1405.92 2825.8,1406.41 L2822.99,1412.28 C2822.75,1412.78 2822.25,1413.18 2821.48,1413.48 C2820.71,1413.78 2819.9,1413.88 2819.04,1413.8 L2809.7,1412.85 C2808.84,1412.76 2808.19,1412.51 2807.76,1412.09 L2807.77,1412.09 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2833.62,1413.98 C2831.38,1412.59 2829.96,1410.85 2829.34,1408.76 C2828.72,1406.68 2828.99,1404.44 2830.14,1402.03 C2831.29,1399.62 2833.03,1397.62 2835.44,1395.9 C2837.83,1394.19 2840.61,1392.94 2843.79,1392.17 C2846.95,1391.39 2850.2,1391.17 2853.55,1391.5 C2856.9,1391.83 2859.68,1392.64 2861.9,1393.95 C2864.13,1395.26 2865.61,1396.92 2866.33,1398.94 C2867.05,1400.97 2866.92,1403.19 2865.9,1405.6 C2864.88,1408.01 2863.2,1410.12 2860.82,1411.91 C2858.42,1413.72 2855.59,1415.04 2852.33,1415.88 C2849.05,1416.72 2845.68,1416.96 2842.21,1416.61 C2838.74,1416.26 2835.88,1415.38 2833.64,1413.99 L2833.62,1413.98 Z M2850.07,1406.39 C2851.03,1405.37 2851.73,1404.37 2852.16,1403.39 C2852.69,1402.19 2852.64,1401.34 2852.02,1400.85 C2851.4,1400.36 2850.58,1400.06 2849.57,1399.96 C2848.56,1399.86 2847.59,1400.02 2846.64,1400.44 C2845.69,1400.86 2844.98,1401.59 2844.51,1402.63 C2844.1,1403.53 2843.9,1404.56 2843.91,1405.72 C2843.91,1406.88 2844.72,1407.54 2846.31,1407.7 C2847.86,1407.86 2849.12,1407.42 2850.08,1406.39 L2850.07,1406.39 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2880.45,1419.46 C2880.03,1419.04 2879.92,1418.57 2880.12,1418.07 L2881.04,1415.72 L2867.7,1414.37 C2867.04,1414.3 2866.52,1414.11 2866.13,1413.8 C2865.74,1413.49 2865.55,1413.12 2865.56,1412.7 L2865.75,1408.39 C2865.78,1408.12 2865.9,1407.85 2866.12,1407.58 C2866.34,1407.31 2866.64,1407.08 2867.01,1406.9 L2889.08,1395.88 C2889.72,1395.52 2890.48,1395.38 2891.37,1395.47 L2900.49,1396.36 C2901.26,1396.44 2901.84,1396.66 2902.24,1397.04 C2902.64,1397.42 2902.76,1397.85 2902.58,1398.33 L2898.61,1409.14 L2900.03,1409.28 C2900.81,1409.36 2901.42,1409.6 2901.84,1410.01 C2902.27,1410.42 2902.39,1410.87 2902.21,1411.37 L2900.62,1415.77 C2900.44,1416.27 2900,1416.68 2899.31,1416.98 C2898.62,1417.29 2897.88,1417.4 2897.09,1417.32 L2895.66,1417.18 L2894.79,1419.54 C2894.6,1420.05 2894.17,1420.46 2893.49,1420.77 C2892.81,1421.08 2892.07,1421.2 2891.28,1421.12 L2882.26,1420.21 C2881.47,1420.13 2880.86,1419.88 2880.44,1419.46 L2880.45,1419.46 Z M2885.82,1408.5 C2886.11,1408.53 2886.39,1408.5 2886.67,1408.44 C2886.95,1408.37 2887.17,1408.26 2887.31,1408.1 C2887.39,1408.01 2887.57,1407.6 2887.84,1406.88 C2888.1,1406.2 2888.23,1405.8 2888.24,1405.67 C2888.24,1405.54 2888.13,1405.4 2887.89,1405.25 C2887.68,1405.13 2887.43,1405.06 2887.15,1405.03 C2886.91,1405.01 2886.69,1405.03 2886.5,1405.07 C2886.31,1405.12 2885.89,1405.31 2885.24,1405.62 C2884.59,1405.93 2883.71,1406.36 2882.61,1406.9 C2882.08,1407.16 2881.97,1407.45 2882.27,1407.76 C2882.57,1408.07 2883.09,1408.26 2883.83,1408.34 C2884.49,1408.38 2885.16,1408.44 2885.81,1408.5 L2885.82,1408.5 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2847.38,1546.79 L2710.77,1530.6 C2696.58,1528.92 2689.7,1519.69 2695.24,1510.2 L2695.24,1510.2 C2700.65,1500.94 2715.93,1494.85 2729.54,1496.39 L2860.43,1511.27 C2874.57,1512.88 2883.5,1521.92 2880.25,1531.67 L2880.25,1531.67 C2876.92,1541.67 2862.14,1548.54 2847.36,1546.79 L2847.38,1546.79 Z" id="Path" stroke="none" fill="#CFD8DC" fill-rule="nonzero"></path> + <path d="M2739.7,1515.36 C2735.87,1522.69 2723.91,1527.7 2713.07,1526.42 C2702.26,1525.15 2696.97,1518.14 2701.14,1510.89 C2705.24,1503.77 2716.96,1499.07 2727.43,1500.26 C2737.93,1501.46 2743.46,1508.17 2739.7,1515.36 L2739.7,1515.36 Z" id="Path" stroke="none" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M2542.38,1093.43 C2497.62,1093.43 2461.33,1108.53 2461.33,1127.15 L2461.33,1352.61 C2461.33,1371.23 2497.62,1386.33 2542.38,1386.33 C2587.14,1386.33 2623.43,1371.23 2623.43,1352.61 L2623.43,1127.15 C2623.43,1108.53 2587.14,1093.43 2542.38,1093.43 L2542.38,1093.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2623.84,1061.5 L2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2598.09,1050.94 C2599.72,1046.96 2604.28,1045.05 2608.26,1046.68 L2619.59,1051.33 C2623.57,1052.96 2625.48,1057.51 2623.84,1061.5 L2623.84,1061.5 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2616.96,1078.29 L2616.96,1078.29 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2512.74,1078.7 L2527.77,1141.87 C2519.19,1141.11 2511.12,1139.66 2503.98,1137.6 L2476.92,1023.82 C2475.5,1017.86 2479.18,1011.89 2485.13,1010.48 C2485.99,1010.27 2486.86,1010.18 2487.71,1010.18 C2492.72,1010.18 2497.26,1013.6 2498.47,1018.69 L2499.75,1024.08 L2512.74,1078.7 L2512.74,1078.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2505.2199, 1051.6457) rotate(-13.38) translate(-2505.2199, -1051.6457)" x="2496.11986" y="1023.51067" width="18.2" height="56.27" rx="9.1"></rect> + <path d="M2571.7,1030.13 L2571.34,1032.96 L2567.89,1060.37 L2557.63,1141.82 C2552.69,1142.29 2547.57,1142.53 2542.37,1142.53 C2539.66,1142.53 2536.98,1142.47 2534.34,1142.33 L2545.04,1057.48 L2548.46,1030.32 L2548.85,1027.25 L2556.31,1028.19 L2563.68,1029.12 L2571.7,1030.13 L2571.7,1030.13 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2591.42,1022.57 C2589.34,1039.08 2572.41,1065.5 2555.91,1063.42 C2539.41,1061.34 2529.56,1031.54 2531.64,1015.04 C2533.72,998.53 2548.79,986.84 2565.3,988.92 C2581.81,991 2593.5,1006.07 2591.42,1022.58 L2591.42,1022.57 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2550.79,1013.92 C2553.27,1017.12 2558.54,1029.25 2555.34,1031.74 C2552.14,1034.23 2541.69,1026.11 2539.21,1022.91 C2536.73,1019.71 2537.31,1015.11 2540.51,1012.63 C2543.71,1010.15 2548.31,1010.73 2550.79,1013.93 L2550.79,1013.92 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2572.58,1016.66 C2569.38,1019.14 2561.27,1029.59 2563.75,1032.79 C2566.23,1035.99 2578.37,1030.72 2581.57,1028.24 C2584.77,1025.76 2585.35,1021.16 2582.87,1017.96 C2580.39,1014.76 2575.79,1014.18 2572.59,1016.66 L2572.58,1016.66 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2481.72,1125.09 C2481.93,1126.05 2484.94,1130.36 2495.6,1134.71 C2495.94,1134.85 2496.28,1134.99 2496.63,1135.12 C2498.94,1136.02 2501.4,1136.85 2503.98,1137.6 C2511.12,1139.66 2519.19,1141.11 2527.77,1141.87 C2529.93,1142.08 2532.12,1142.23 2534.34,1142.33 C2536.98,1142.47 2539.66,1142.53 2542.37,1142.53 C2547.57,1142.53 2552.69,1142.29 2557.63,1141.82 C2558.75,1141.72 2559.86,1141.6 2560.97,1141.47 L2560.97,1141.47 C2571.1,1140.29 2580.4,1138.13 2588.11,1135.12 C2588.46,1134.99 2588.8,1134.85 2589.13,1134.71 C2591.4,1133.79 2593.32,1132.87 2594.94,1131.97 C2600.94,1128.68 2602.85,1125.85 2603.02,1125.09" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2312.14,1465.72 L2257.19,1490.2 C2245.32,1495.49 2231.82,1495.79 2219.72,1491.05 C2166.25,1470.08 2112.78,1449.1 2059.31,1428.13 C2038.75,1420.07 2038.1,1391.21 2058.27,1382.22 L2087.96,1368.99 C2106.25,1360.84 2126.04,1356.54 2146.07,1356.51975 C2160.19,1356.5 2175.72,1357.66 2192.26,1360.77 C2249.59,1371.51 2291.85,1400.46 2318.56,1424.39 C2332.03,1436.45 2328.66,1458.36 2312.14,1465.72 L2312.14,1465.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M869.1,838.92 C863.82,855.85 852.58,871 836.23,880.95 C800.55,902.65 754.04,891.31 732.34,855.63 C710.64,819.95 721.98,773.44 757.66,751.74 C774.01,741.8 792.63,738.79 810.1,741.89 C787.91,759.6 781.81,791.44 796.95,816.34 C812.09,841.24 843.17,850.47 869.1,838.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFF9C4" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="755.38" cy="789.42" r="8.86"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="759.38" cy="841.85" r="15.66"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="800.6" cy="852.3" r="9.86"></circle> + <path d="M881.84,1307.34 C763.37,1307.34 667.33,1347.29 667.33,1396.58 L667.33,1405.1 C667.33,1425.83 684.33,1444.91 712.83,1460.06 C737.83,1488.83 804.06,1509.39 881.84,1509.39 C959.62,1509.39 1025.85,1488.83 1050.85,1460.06 C1079.36,1444.91 1096.35,1425.83 1096.35,1405.1 L1096.35,1396.58 C1096.35,1347.3 1000.31,1307.34 881.84,1307.34 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1026.25,1371.81 C1030.31,1355.17 1027.72,1336.49 1019.73,1323.36 C982.45,1262.1 898.79,1262.1 881.84,1262.1 C864.89,1262.1 781.37,1262.1 744.04,1323.22 C736.25,1335.97 733.65,1354 737.19,1370.4 C737.3,1370.9 737.41,1371.38 737.51,1371.83 C738.14,1374.62 738.67,1376.45 738.85,1377.08 C763.04,1459.36 863.51,1459.36 881.84,1459.36 C900.17,1459.36 1000.64,1459.36 1024.83,1377.08 C1025.32,1375.42 1025.77,1373.74 1026.17,1372.1 C1026.19,1372.01 1026.22,1371.91 1026.24,1371.82 L1026.25,1371.81 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1025.09,1326.76 C1029.12,1342.13 1026.55,1359.38 1018.63,1371.5 C981.65,1428.07 898.66,1428.07 881.85,1428.07 C865.04,1428.07 782.18,1428.07 745.15,1371.63 C737.43,1359.86 734.84,1343.21 738.35,1328.07 C738.46,1327.61 738.56,1327.16 738.67,1326.75 C739.3,1324.17 739.82,1322.49 740,1321.9 C764,1245.92 863.66,1245.92 881.84,1245.92 C900.02,1245.92 999.69,1245.92 1023.68,1321.9 C1024.17,1323.43 1024.61,1324.98 1025.01,1326.5 C1025.03,1326.59 1025.06,1326.68 1025.08,1326.76 L1025.09,1326.76 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="769.56" y1="1336.14" x2="780.64" y2="1325.95" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="847.98" y1="1332.27" x2="858.61" y2="1343.91" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="925.51" y1="1388.54" x2="934.82" y2="1379.33" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="961.4" y1="1304.24" x2="973.36" y2="1310" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="938.36" y1="1325.47" x2="932.44" y2="1336.99" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="985.32" y1="1343.23" x2="1000.39" y2="1345.44" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="889.63" y1="1264.83" x2="900.26" y2="1260.95" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="793.93" y1="1281.32" x2="806.78" y2="1278.16" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="800.35" y1="1370.59" x2="818.3" y2="1381.75" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="869.69" y1="1390.48" x2="884.31" y2="1380.78" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="889.18" y1="1321.59" x2="904.25" y2="1328.87" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="812.09" y1="1321.59" x2="816.08" y2="1336.99" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="772.22" y1="1363.17" x2="780.64" y2="1358.29" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="996.4" y1="1322.41" x2="1001.72" y2="1314.87" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="967.38" y1="1368.93" x2="984.44" y2="1374.02" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="847.54" y1="1266.77" x2="862.16" y2="1275.5" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M838.98,1278.29 C838.98,1304.33 927.38,1304.33 927.38,1278.29" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2351.63,245.03 C2337.88,250.36 2332.34,255.9 2327.01,269.65 C2326.27,271.56 2323.59,271.56 2322.85,269.65 C2317.52,255.9 2311.98,250.36 2298.23,245.03 C2296.32,244.29 2296.32,241.61 2298.23,240.87 C2311.98,235.54 2317.52,230 2322.85,216.25 C2323.59,214.34 2326.27,214.34 2327.01,216.25 C2332.34,230 2337.88,235.54 2351.63,240.87 C2353.54,241.61 2353.54,244.29 2351.63,245.03 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2417.66,277.5 C2403.91,282.83 2398.37,288.37 2393.04,302.12 C2392.3,304.03 2389.62,304.03 2388.88,302.12 C2383.55,288.37 2378.01,282.83 2364.26,277.5 C2362.35,276.76 2362.35,274.08 2364.26,273.34 C2378.01,268.01 2383.55,262.47 2388.88,248.72 C2389.62,246.81 2392.3,246.81 2393.04,248.72 C2398.37,262.47 2403.91,268.01 2417.66,273.34 C2419.57,274.08 2419.57,276.76 2417.66,277.5 L2417.66,277.5 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2367.88,313.06 C2354.13,318.39 2348.59,323.93 2343.26,337.68 C2342.52,339.59 2339.84,339.59 2339.1,337.68 C2333.77,323.93 2328.23,318.39 2314.48,313.06 C2312.57,312.32 2312.57,309.64 2314.48,308.9 C2328.23,303.57 2333.77,298.03 2339.1,284.28 C2339.84,282.37 2342.52,282.37 2343.26,284.28 C2348.59,298.03 2354.13,303.57 2367.88,308.9 C2369.79,309.64 2369.79,312.32 2367.88,313.06 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="414.94" y="752.56" width="2563.19" height="462.96" rx="231.48"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="375.95" y="713.57" width="2563.19" height="462.96" rx="231.48"></rect> + <text id="logo-text" x="1657" y="960" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="190" font-weight="600" fill="#465362">HTML e pessoas</text> + <line x1="1664.22" y1="579.05" x2="1751.73" y2="529.11" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1824.56,527.78 L1797.24,552.46 C1786.22,562.42 1770.28,561.63 1763.23,549.28 L1740.21,508.95 C1733.16,496.6 1740.59,482.48 1754.77,478.05 L1789.92,467.08 C1798.23,464.49 1808.04,469.06 1812.61,477.06 L1827.51,503.16 C1832.07,511.16 1831.02,521.93 1824.56,527.77 L1824.56,527.78 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1771.77" y1="495.05" x2="1791.25" y2="529.19" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1794.91" y1="484.86" x2="1811.79" y2="514.45" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1563.47" y1="579.05" x2="1664.22" y2="579.05" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1499.55,613.99 L1535.51,621.89 C1550.02,625.08 1563.47,616.5 1563.47,602.27 L1563.47,555.83 C1563.47,541.6 1550.02,533.03 1535.51,536.21 L1499.55,544.11 C1491.05,545.98 1484.79,554.81 1484.79,564.02 L1484.79,594.08 C1484.79,603.29 1491.04,612.12 1499.55,613.99 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1529.18" y1="559.4" x2="1529.18" y2="598.7" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1504.03" y1="562.02" x2="1504.03" y2="596.08" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="1664.22" cy="579.05" r="79.92"></circle> + <line x1="1623.26" y1="460.2" x2="1664.22" y2="432.06" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1705.19" y1="460.2" x2="1664.22" y2="432.06" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="1664.22" cy="417.99" r="14.07"></circle> + <path d="M1724.69,458.56 C1724.69,470.2 1697.62,499.13 1664.22,499.13 C1630.82,499.13 1603.75,470.2 1603.75,458.56 C1603.75,449.49 1724.69,449.49 1724.69,458.56 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1643.74,585.83 L1676.84,585.83 C1684.33,585.83 1690.4,579.76 1690.4,572.27 L1690.4,572.27" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1608.09,558.17 C1610.62,555.64 1614.11,554.08 1617.97,554.08 C1621.83,554.08 1625.32,555.64 1627.85,558.17" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1700.6,558.17 C1703.13,555.64 1706.62,554.08 1710.48,554.08 C1714.34,554.08 1717.83,555.64 1720.36,558.17" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> + </g> + </g> +</svg>
A
assets/img/design/hero.svg
@@ -0,0 +1,250 @@
+ +<svg id="hero" viewBox="0 0 3000 1575" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect id="path-535ywfpbwe-1" x="0" y="0" width="3000" height="1575"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="BWatson_Cover_01"> + <mask id="mask-535ywfpbwe-2" fill="white"> + <use xlink:href="#path-535ywfpbwe-1"></use> + </mask> + <g id="Rectangle"></g> + <g id="Group" mask="url(#mask-535ywfpbwe-2)"> + <g transform="translate(-157.55, -157.55)"> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="17.18" width="3197.81" height="1847.5"></rect> + <g id="rocket" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(229.67, 206.93)"> + <g id="exhaust" transform="translate(6.88, 583.62)" fill="#FFFFFF" fill-rule="nonzero"> + <path d="M48.02,0 L50.84,380.355 C50.84,393.605 40.08,404.365 26.83,404.365 C13.58,404.365 2.82,393.605 2.82,380.355 L0,0 L48.02,0 Z" id="left"></path> + <path d="M74.32,0 L140.73,0 L140.73,371.155 C140.73,389.485 125.85,404.365 107.52,404.365 C89.19,404.365 74.31,389.485 74.31,371.155 L74.31,0 L74.32,0 Z" id="center"></path> + <path d="M211,0 L211,380.355 C211,393.605 200.24,404.365 186.99,404.365 C173.74,404.365 162.98,393.605 162.98,380.355 L162.98,0 L211,0 Z" id="right"></path> + </g> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="167.25 609.41 113.76 609.41 60.28 609.41 60.28 336.48 81.55 218.29 145.98 218.29 167.25 336.48"></polygon> + <path d="M107.44,680.74 L80.29,680.74 C80.29,664.7 86.37,651.7 93.87,651.7 C101.37,651.7 107.45,664.7 107.45,680.74 L107.44,680.74 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M147.58,680.74 L120.43,680.74 C120.43,664.7 126.51,651.7 134.01,651.7 C141.51,651.7 147.59,664.7 147.59,680.74 L147.58,680.74 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M132.28,83.62 C129.68,61.35 126.16,31.07 123.55,8.71 C122.97,3.74 118.77,-5.68434189e-14 113.77,-5.68434189e-14 L113.77,-5.68434189e-14 C108.77,-5.68434189e-14 104.56,3.75 103.99,8.71 L95.26,83.61 C86.82,89.48 81.29,99.24 81.29,110.29 L81.29,218.28 L146.25,218.28 L146.25,110.29 C146.25,99.23 140.72,89.47 132.28,83.61 L132.28,83.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M60.28,609.41 L167.25,609.41 L167.25,622.58 C167.25,639.39 153.6,653.04 136.79,653.04 L90.73,653.04 C73.92,653.04 60.27,639.39 60.27,622.58 L60.27,609.41 L60.27,609.41 L60.28,609.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" fill="#1565C0" fill-rule="nonzero" cx="113.76" cy="154.3" r="19.75"></circle> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="96.59" y="352.73" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="113.76" y="369.91" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(122.355, 361.325) rotate(180) translate(-122.355, -361.325)" x="113.77" y="352.74" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(105.175, 378.495) rotate(180) translate(-105.175, -378.495)" x="96.59" y="369.91" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="96.59" y="544.5" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="113.76" y="561.67" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(122.355, 553.085) rotate(180) translate(-122.355, -553.085)" x="113.77" y="544.5" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(105.175, 570.265) rotate(180) translate(-105.175, -570.265)" x="96.59" y="561.68" width="17.17" height="17.17"></rect> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="52.64 661.11 14.73 661.11 9.68 685.77 57.69 685.77"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="60.28 631.22 7.09 631.22 0 665.83 67.37 665.83"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="33.68 358.88 7.09 423.15 7.09 631.23 60.28 631.23 60.28 423.15"></polygon> + <line x1="7.09" y1="425.99" x2="60.28" y2="425.99" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="7.09" y1="527.19" x2="60.28" y2="527.19" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="7.09" y1="631.23" x2="60.28" y2="631.23" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="212.8 661.11 174.89 661.11 169.83 685.77 217.85 685.77"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="220.44 631.22 167.25 631.22 160.16 665.83 227.52 665.83"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="193.84 358.88 167.25 423.15 167.25 631.23 220.44 631.23 220.44 423.15"></polygon> + <line x1="167.25" y1="425.99" x2="220.44" y2="425.99" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="167.25" y1="527.19" x2="220.44" y2="527.19" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="167.25" y1="631.23" x2="220.44" y2="631.23" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + </g> + <rect id="Rectangle" stroke="none" fill="#BBDEFB" fill-rule="evenodd" x="145.55" y="930.55" width="673" height="275"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFE0B2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="1216.84" width="3197.81" height="647.85"></rect> + <g id="solar-system" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2445.29, 0)" stroke-linecap="round" stroke-linejoin="round"> + <g id="venus" transform="translate(197.59, 0)" stroke="#465362" stroke-width="10"> + <g id="Group-3"> + <circle id="Oval" fill="#81C784" fill-rule="nonzero" cx="51.45" cy="828.5" r="51.45"></circle> + <line x1="51.45" y1="777.04" x2="51.45" y2="0" id="Path"></line> + </g> + </g> + <g id="saturn" transform="translate(337.935, 24.53)" stroke="#465362" stroke-width="10"> + <g id="Group-4"> + <circle id="Oval" fill="#BB9C87" fill-rule="nonzero" cx="159.545015" cy="803.97" r="91.14"></circle> + <path d="M317.826129,855.327824 C328.549448,822.285602 266.363812,772.497084 178.930625,744.122058 C91.497437,715.747031 11.9258668,719.530541 1.20254808,752.572763 C-9.52077065,785.614986 52.6648648,835.403503 140.098052,863.77853 C227.53124,892.153556 307.10281,888.370047 317.826129,855.327824 Z" id="Oval" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M246.235015,832.1 C230.695015,879.98 57.3150146,823.71 72.8550146,775.83 C88.3950146,727.95 139.805015,701.74 187.675015,717.28 C235.555015,732.82 261.765015,784.23 246.225015,832.1 L246.235015,832.1 Z" id="Path" fill="#BB9C87" fill-rule="nonzero"></path> + <line x1="161.295015" y1="712.8" x2="161.295015" y2="0" id="Path"></line> + </g> + </g> + <g id="mars" transform="translate(381.28, 1.07)" stroke="#465362" stroke-width="10"> + <g id="Group-5" transform="translate(-0, 0)"> + <circle id="Oval" fill="#FF8080" fill-rule="nonzero" cx="42.66" cy="657.52" r="42.66"></circle> + <line x1="42.66" y1="614.86" x2="42.66" y2="0" id="Path"></line> + </g> + </g> + <g id="jupiter" transform="translate(181.66, 57.97)" stroke="#465362" stroke-width="10"> + <g id="Group-6"> + <line x1="89.26" y1="504.49" x2="89.26" y2="0" id="Path"></line> + <path d="M178.52,593.75 C178.52,643.05 138.56,683.01 89.26,683.01 C64.79,683.01 42.62,673.16 26.5,657.2 C18.48,649.29 11.96,639.85 7.4,629.38 C2.64,618.47 0,606.42 0,593.75 C0,579.34 3.41,565.73 9.49,553.68 C14.86,543 22.32,533.54 31.34,525.85 C46.92,512.54 67.15,504.5 89.26,504.5 C111.37,504.5 131.59,512.54 147.18,525.85 C156.2,533.54 163.66,543 169.03,553.68 C175.11,565.73 178.52,579.35 178.52,593.75 L178.52,593.75 Z" id="Path" fill="#FFCC80" fill-rule="nonzero"></path> + <ellipse id="Oval" fill="#FF8080" fill-rule="nonzero" cx="117.6" cy="619.63" rx="30.61" ry="13.92"></ellipse> + <path d="M169.03,553.67 L9.49,553.67 C14.86,542.99 22.32,533.53 31.34,525.84 L147.18,525.84 C156.2,533.53 163.66,542.99 169.03,553.67 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <path d="M69.17,643.28 C69.17,647.12 67.62,650.6 65.1,653.13 C62.57,655.65 59.1,657.2 55.25,657.2 L26.49,657.2 C18.47,649.29 11.95,639.85 7.39,629.38 L55.25,629.38 C62.94,629.38 69.17,635.61 69.17,643.29 L69.17,643.28 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + </g> + </g> + <g id="sun" transform="translate(179.75, 33.45)" stroke="#465362" stroke-width="10"> + <g id="Group-7"> + <circle id="Oval" fill="#FFF176" fill-rule="nonzero" cx="134.15" cy="371.76" r="134.15"></circle> + <line x1="134.15" y1="237.61" x2="134.15" y2="0" id="Path"></line> + </g> + </g> + <g id="mercury" transform="translate(86.44, 57.78)" stroke="#465362" stroke-width="10"> + <g id="Group-8"> + <circle id="Oval" fill="#CFD8DC" fill-rule="nonzero" cx="43.99" cy="443.87" r="43.99"></circle> + <line x1="43.99" y1="396.96" x2="43.99" y2="0" id="Path"></line> + </g> + </g> + <g id="neptune" transform="translate(0, 57.78)" stroke="#465362" stroke-width="10"> + <g id="Group-9"> + <path d="M133.44,632.13 C133.44,642.86 130.91,652.99 126.4,661.97 C122.44,669.89 116.95,676.91 110.32,682.64 C98.63,692.74 83.39,698.85 66.72,698.85 C38.53,698.85 14.42,681.37 4.65,656.65 C2.45,651.07 0.97,645.13 0.34,638.93 C0.12,636.69 0,634.43 0,632.13 C0,629.03 0.21,625.97 0.63,622.98 C2.12,612.07 6.25,602 12.36,593.44 C24.46,576.48 44.3,565.42 66.72,565.42 C89.14,565.42 108.98,576.48 121.08,593.44 C127.19,602 131.32,612.07 132.81,622.98 C133.23,625.97 133.44,629.03 133.44,632.13 L133.44,632.13 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="66.72" y1="565.42" x2="66.72" y2="0" id="Path"></line> + </g> + </g> + <g id="earth" transform="translate(478.69, 73.58)" stroke="#465362" stroke-width="10"> + <g id="Group-2"> + <path d="M134.16,459.58 C134.16,469.85 131.86,479.57 127.73,488.26 C122.83,498.63 115.34,507.54 106.1,514.15 C95.11,522.02 81.63,526.66 67.08,526.66 C52.53,526.66 39.05,522.02 28.06,514.15 C17.09,506.28 8.58,495.19 3.93,482.26 C1.38,475.18 0,467.55 0,459.58 C0,437.09 11.08,417.18 28.07,405.01 C33.87,400.85 40.36,397.6 47.33,395.46 C53.58,393.54 60.21,392.51 67.08,392.51 C81.63,392.51 95.1,397.15 106.09,405.02 C115.33,411.64 122.82,420.54 127.72,430.91 C131.84,439.61 134.15,449.33 134.15,459.59 L134.16,459.58 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <path d="M62.92,432.09 C62.92,460.16 40.17,482.91 12.1,482.91 C9.32,482.91 6.59,482.68 3.94,482.26 C1.39,475.18 0.01,467.55 0.01,459.58 C0.01,437.09 11.09,417.18 28.08,405.01 C33.88,400.85 40.37,397.6 47.34,395.46 C56.95,404.7 62.93,417.7 62.93,432.09 L62.92,432.09 Z" id="Path" fill="#81C784" fill-rule="nonzero"></path> + <path d="M134.16,459.58 C134.16,469.85 131.86,479.57 127.73,488.26 C116.48,483.61 108.55,472.52 108.55,459.58 C108.55,446.64 116.48,435.56 127.73,430.9 C131.85,439.6 134.16,449.32 134.16,459.58 Z" id="Path" fill="#81C784" fill-rule="nonzero"></path> + <path d="M106.1,405.01 C95.11,412.88 81.64,417.52 67.09,417.52 C52.54,417.52 39.07,412.88 28.08,405.01 C39.07,397.14 52.54,392.5 67.09,392.5 C81.64,392.5 95.11,397.14 106.1,405.01 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M106.1,514.15 C95.11,522.02 81.63,526.66 67.08,526.66 C52.53,526.66 39.05,522.02 28.06,514.15 C39.05,506.27 52.53,501.64 67.08,501.64 C81.63,501.64 95.11,506.28 106.1,514.15 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <line x1="67.08" y1="392.5" x2="67.08" y2="0" id="Path"></line> + </g> + </g> + </g> + <path d="M0,892.7 L843.96,892.7 C858.41,892.7 870.13,904.43 870.13,918.87 L870.13,918.87 C870.13,933.32 858.4,945.04 843.96,945.04 L0,945.04 L0,892.69 L0,892.69 L0,892.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1904.67,1343.62 L1904.67,1360.64 C1904.67,1371.3 1896.08,1380.91 1884.37,1380.91 L1398.59,1380.91 C1386.88,1380.91 1378.29,1371.3 1378.29,1360.64 L1378.29,1343.62 C1378.29,1340.82 1378.88,1337.94 1380.17,1335.15 L1416.29,1256.61 C1419.6,1249.41 1426.8,1244.8 1434.72,1244.8 L1848.24,1244.8 C1856.16,1244.8 1863.35,1249.41 1866.66,1256.61 L1902.79,1335.15 C1904.08,1337.94 1904.67,1340.82 1904.67,1343.62 L1904.67,1343.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1478.34" y="930.63" width="320.39" height="357.55"></rect> + <path d="M2271.84,349.73 L2271.84,1122.23 C2271.84,1148.42 2250.61,1169.65 2224.42,1169.65 L1052.64,1169.65 C1026.44,1169.65 1005.21,1148.42 1005.21,1122.23 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2271.84,349.73 L2271.84,1038.67 L1005.21,1038.67 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(1638.535, 668.87) rotate(90) translate(-1638.535, -668.87)" x="1318.735" y="82.325" width="639.6" height="1173.09"></rect> + <path d="M2067.89,1590.51 L2009.02,1462.54 C2003.62,1450.82 1991.9,1443.3 1979,1443.3 L1298.06,1443.3 C1285.16,1443.3 1273.44,1450.81 1268.04,1462.54 L1209.17,1590.51 C1207.07,1595.06 1206.1,1599.75 1206.1,1604.32 L1206.1,1611.17 C1206.1,1628.56 1220.11,1644.21 1239.19,1644.21 L2037.86,1644.21 C2056.94,1644.21 2070.95,1628.56 2070.95,1611.17 L2070.95,1604.32 C2070.95,1599.74 2069.98,1595.06 2067.88,1590.51 L2067.89,1590.51 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1120.28,778.05 C1169.07,840.99 1233.87,894.35 1311.61,915.72 C1410.18,943.2 1515.58,919.87 1605.79,875.86 C1686.77,836.25 1759,780.11 1822.11,716.01 C1885.33,651.72 1939.72,579.03 1985.69,501.65 L2042.17,537.56 C1935.95,693.32 1795.21,832.51 1619.72,906.84 C1521.97,947.54 1409.15,965.56 1307.02,930.44 C1273.57,918.93 1242.26,901.73 1214.15,880.33 C1177.07,851.99 1145.82,816.87 1119.47,778.64 C1119.47,778.64 1120.28,778.05 1120.28,778.05 L1120.28,778.05 L1120.28,778.05 Z" id="Path" stroke="none" fill="#FFCDD2" fill-rule="nonzero"></path> + <path d="M2035.31,1568.41 L1976.93,1441.49 C1975.53,1438.43 1972.45,1436.47 1969.09,1436.47 L1307.98,1436.47 C1304.62,1436.47 1301.54,1438.44 1300.14,1441.49 L1241.76,1568.41 C1241.17,1569.71 1240.94,1570.92 1240.94,1572.02 L1240.94,1586.47 C1240.94,1588.51 1241.72,1590.14 1242.34,1591.09 C1243.29,1592.58 1245.49,1595.06 1249.6,1595.06 L2027.48,1595.06 C2031.59,1595.06 2033.78,1592.57 2034.74,1591.09 C2035.36,1590.14 2036.14,1588.51 2036.14,1586.47 L2036.14,1572.02 C2036.14,1570.92 2035.91,1569.71 2035.32,1568.41 L2035.31,1568.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1151.64" y="580.93" width="973.78" height="175.88" rx="87.94"></rect> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2089.33" cy="402.3" r="11.76"></circle> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2077.7895, 421.6416) rotate(-57.73) translate(-2077.7895, -421.6416)" cx="2077.7895" cy="421.641632" rx="22" ry="49.52"></ellipse> + <line x1="1959.35" y1="505" x2="2039.74" y2="479.85" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1917.08,548.83 L1947.74,546.16 C1960.11,545.08 1968.7,534.88 1965.15,523.53 L1953.56,486.48 C1950.01,475.13 1937.14,471.64 1926.36,477.81 L1899.64,493.09 C1893.32,496.7 1890.54,505.31 1892.83,512.66 L1900.33,536.64 C1902.63,543.99 1909.82,549.48 1917.08,548.84 L1917.08,548.83 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1927.09" y1="497.88" x2="1936.9" y2="529.24" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1907.68" y1="506.25" x2="1916.18" y2="533.42" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2051.59" y1="563.24" x2="2039.74" y2="479.85" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M2030.2,620.25 L2019.43,591.42 C2015.08,579.79 2020.6,567.65 2032.38,565.97 L2070.82,560.5 C2082.59,558.83 2091.28,568.95 2090.35,581.33 L2088.05,612.02 C2087.51,619.28 2080.93,625.5 2073.31,626.58 L2048.43,630.12 C2040.81,631.2 2032.76,627.07 2030.21,620.25 L2030.2,620.25 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2071.89" y1="589.31" x2="2039.37" y2="593.93" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2072.69" y1="610.43" x2="2044.49" y2="614.44" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2039.73" cy="479.85" r="66.81"></circle> + <path d="M2072.33,470.31 C2065.71,480.8 2051.83,483.94 2041.34,477.31 C2030.85,470.69 2027.71,456.81 2034.34,446.32 L2072.33,470.31 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" transform="translate(2020.6631, 437.5835) rotate(32.27) translate(-2020.6631, -437.5835)" x="2012.65809" y="426.863457" width="16.01" height="21.44" rx="8.005"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" transform="translate(2086.0664, 478.8836) rotate(32.27) translate(-2086.0664, -478.8836)" x="2078.06138" y="468.163559" width="16.01" height="21.44" rx="8.005"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFF59D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="506.13" y="276.82" width="106.33" height="615.88"></rect> + <line x1="506.13" y1="310.49" x2="612.46" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="506.13" y1="855.46" x2="612.46" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M545.16,509.38 C541.12,509.31 540.09,509.09 538.33,507.98 C536.05,506.51 534.73,504.01 534.73,501.29 C534.73,498.57 536.05,496 538.33,494.53 C540.09,493.43 541.49,493.13 545.16,493.13 L574.7,493.13 C578.15,493.13 579.62,493.5 581.31,494.82 C583.29,496.36 584.47,498.71 584.47,501.21 C584.47,503.71 583.22,506.28 581.31,507.75 C579.55,509.07 578.52,509.37 574.33,509.37 L567.42,509.37 L567.42,519.21 L574.11,519.21 C578,519.21 579.47,519.5 581.31,520.9 C583.29,522.37 584.47,524.65 584.47,527.15 C584.47,529.65 583.29,532.15 581.38,533.61 C579.76,534.86 577.85,535.37 574.69,535.37 L545.01,535.37 C541.63,535.37 540.31,535.08 538.62,534.05 C536.2,532.58 534.73,530.01 534.73,527.22 C534.73,524.65 535.91,522.22 537.96,520.75 C539.72,519.5 541.12,519.21 545.01,519.21 L552.06,519.21 L552.06,509.37 L545.15,509.37 L545.16,509.38 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M569.04,548.91 C569.04,546.12 569.7,544.28 571.17,542.81 C572.71,541.34 574.55,540.53 576.53,540.53 C579.32,540.53 582.26,542.37 583.29,544.72 C584.02,546.41 584.1,547.07 584.1,553.46 L584.1,569.77 C584.1,572.803333 584.05,574.64 583.95,575.28 C583.44,579.17 580.42,581.89 576.6,581.89 C574.47,581.89 572.27,580.86 570.8,579.25 C569.62,578 569.04,575.94 569.04,573 L569.04,569.4 L544.65,569.4 C541.71,569.4 540.09,569.03 538.4,568 C536.05,566.53 534.73,564.11 534.73,561.31 C534.73,558.51 535.98,556.17 538.11,554.62 C539.8,553.52 541.2,553.22 544.5,553.22 L569.04,553.22 L569.04,548.89 L569.04,548.91 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M580.13,619.22 C582.7,620.47 584.46,623.33 584.46,626.35 C584.46,628.33 583.58,630.54 582.26,631.93 C580.94,633.33 579.54,633.99 576.9,634.43 L545.31,640.01 C544.28,640.23 543.33,640.3 542.59,640.3 C538.18,640.3 534.73,636.77 534.73,632.37 C534.73,628.26 537.23,625.02 540.9,624.36 L550.08,622.52 L541.41,619.36 C537,617.74 534.72,614.88 534.72,611.06 C534.72,607.24 536.78,604.52 541.33,602.83 L550.07,599.6 L542.28,598.28 C537.58,597.47 534.71,594.39 534.71,590.2 C534.71,585.42 538.38,582.04 543.53,582.04 C544.19,582.04 544.85,582.11 545.51,582.19 L576.88,587.77 C581.58,588.58 584.45,591.52 584.45,595.7 C584.45,599.15 582.32,602.39 579.01,603.78 L562.77,611.05 L580.11,619.21 L580.13,619.22 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M550.23,669.98 C550.23,672.7 549.79,674.24 548.76,675.71 C547.36,677.62 545.09,678.8 542.74,678.8 C540.61,678.8 538.33,677.84 536.94,676.3 C535.62,674.83 535.1,673.14 535.1,670.35 L535.1,654.92 C535.1,651.69 535.91,649.56 537.67,648.09 C539.87,646.11 540.98,645.89 547.74,645.89 L575.37,645.89 C580.88,645.89 584.48,649.05 584.48,653.9 C584.48,656.4 583.3,658.82 581.54,660.22 C579.56,661.69 578.09,662.06 573.46,662.06 L550.24,662.06 L550.24,669.99 L550.23,669.98 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#A5D6A7" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="612.46" y="276.82" width="106.33" height="615.88"></rect> + <line x1="612.46" y1="310.49" x2="718.79" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="612.46" y1="855.46" x2="718.79" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M646.64,562.5 C642.53,557.72 640.17,551.63 640.17,545.38 C640.17,531.05 651.63,519.45 665.81,519.45 C679.99,519.45 691.6,531.13 691.6,545.46 C691.6,551.41 689.54,557.14 685.65,561.84 C682.49,565.81 679.18,567.79 675.95,567.79 C671.54,567.79 667.87,564.19 667.87,559.71 C667.87,557.8 668.68,555.74 669.85,554.64 L672.42,552.29 C674.33,550.53 675.36,547.96 675.36,545.31 C675.36,539.95 671.17,535.69 665.81,535.69 C660.45,535.69 656.26,539.95 656.26,545.24 C656.26,547.88 657.44,550.53 659.49,552.44 L661.25,554.13 C662.65,555.45 663.6,557.66 663.6,559.71 C663.6,563.97 659.85,567.79 655.67,567.79 C652.73,567.79 649.65,565.95 646.63,562.5 L646.64,562.5 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,572.05 C656.7,572.05 659.94,575.28 659.94,579.4 C659.94,581.38 659.28,583.07 657.59,585.13 C654.87,588.66 654.58,589.1 654.58,590.27 C654.58,591.52 655.46,592.33 656.71,592.33 C657.59,592.33 658.18,591.96 658.77,591.08 C659.06,590.64 659.21,590.42 660.17,587.85 C660.61,586.53 661.05,585.21 661.57,583.88 C664.07,576.75 668.7,573.23 675.53,573.23 C685.08,573.23 691.62,580.58 691.62,591.23 C691.62,600.05 686.92,606.95 680.89,606.95 C677,606.95 674.2,604.31 674.2,600.63 C674.2,598.43 674.93,596.66 676.99,593.94 C678.39,592.25 678.75,591.44 678.75,590.56 C678.75,589.53 677.87,588.65 676.84,588.65 C675.37,588.65 674.71,589.68 673.46,593.5 C672.21,597.69 670.23,601.66 668.32,603.93 C665.82,606.94 661.41,608.85 656.79,608.85 C652.17,608.85 648.12,607.16 645.11,604.22 C641.8,600.91 640.19,596.51 640.19,590.48 C640.19,580.05 645.63,572.04 652.61,572.04 L652.59,572.05 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,613.49 C656.7,613.49 659.94,616.72 659.94,620.84 C659.94,622.82 659.28,624.51 657.59,626.57 C654.87,630.1 654.58,630.54 654.58,631.71 C654.58,632.96 655.46,633.77 656.71,633.77 C657.59,633.77 658.18,633.4 658.77,632.52 C659.06,632.08 659.21,631.86 660.17,629.29 C660.61,627.97 661.05,626.65 661.57,625.32 C664.07,618.19 668.7,614.67 675.53,614.67 C685.08,614.67 691.62,622.02 691.62,632.67 C691.62,641.49 686.92,648.39 680.89,648.39 C677,648.39 674.2,645.75 674.2,642.07 C674.2,639.87 674.93,638.1 676.99,635.38 C678.39,633.69 678.75,632.88 678.75,632 C678.75,630.97 677.87,630.09 676.84,630.09 C675.37,630.09 674.71,631.12 673.46,634.94 C672.21,639.13 670.23,643.1 668.32,645.37 C665.82,648.38 661.41,650.29 656.79,650.29 C652.17,650.29 648.12,648.6 645.11,645.66 C641.8,642.35 640.19,637.95 640.19,631.92 C640.19,621.49 645.63,613.48 652.61,613.48 L652.59,613.49 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2960.51087,1360.04 L2960.11,1388.43 C2960.1,1389.21 2959.98,1389.99 2959.75,1390.78 L2902.17,1585.76 C2897.66,1601.03 2876,1611.63 2854.05,1608.93 L2675.08,1586.95 C2659.46,1585.04 2650.29,1576.68 2650.42842,1566.62 L2650.83,1538.22 C2650.88,1534.87 2651.95,1531.34 2654.16,1527.8 L2768.33,1344.56 C2773.38,1336.46 2789.74,1331.18 2805.06,1332.58 L2935.8,1344.47 C2950.25,1345.79 2960.62,1352.44 2960.51087,1360.06 L2960.51087,1360.04 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2854.44,1580.53 L2675.47,1558.55 C2654.65,1555.99 2645.29,1542.02 2654.15,1527.79 L2768.32,1344.54 C2773.36,1336.44 2789.73,1331.16 2805.05,1332.56 L2935.79,1344.45 C2951.71,1345.9 2962.66,1353.83 2960.14,1362.38 L2902.56,1557.36 C2898.05,1572.62 2876.39,1583.23 2854.44,1580.53 L2854.44,1580.53 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B0BEC5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2889.2,1354.81 L2837.9,1350.05 C2834.27,1349.71 2832.12,1347.9 2833.09,1346 L2833.09,1346 C2834.06,1344.12 2837.75,1342.87 2841.34,1343.2 L2892.08,1347.86 C2895.73,1348.19 2898.06,1350.01 2897.29,1351.93 L2897.29,1351.93 C2896.51,1353.86 2892.89,1355.15 2889.2,1354.81 L2889.2,1354.81 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2786.84,1409.97 C2786.48,1409.56 2786.43,1409.11 2786.7,1408.61 L2787.93,1406.32 L2774.92,1405.01 C2774.28,1404.94 2773.78,1404.76 2773.44,1404.45 C2773.1,1404.15 2772.96,1403.79 2773.02,1403.38 L2773.79,1399.18 C2773.85,1398.92 2774.01,1398.66 2774.26,1398.39 C2774.51,1398.13 2774.84,1397.9 2775.23,1397.73 L2798.58,1386.99 C2799.26,1386.64 2800.04,1386.51 2800.9,1386.59 L2809.81,1387.46 C2810.56,1387.53 2811.11,1387.76 2811.45,1388.13 C2811.8,1388.5 2811.85,1388.92 2811.61,1389.39 L2806.21,1399.92 L2807.59,1400.06 C2808.35,1400.14 2808.92,1400.37 2809.28,1400.77 C2809.65,1401.17 2809.71,1401.61 2809.46,1402.1 L2807.29,1406.39 C2807.04,1406.88 2806.55,1407.28 2805.83,1407.57 C2805.1,1407.87 2804.35,1407.98 2803.58,1407.9 L2802.18,1407.76 L2801,1410.06 C2800.75,1410.56 2800.26,1410.96 2799.55,1411.26 C2798.84,1411.56 2798.09,1411.67 2797.32,1411.6 L2788.52,1410.71 C2787.75,1410.63 2787.18,1410.39 2786.82,1409.98 L2786.84,1409.97 Z M2793.65,1399.29 C2793.93,1399.32 2794.21,1399.29 2794.5,1399.23 C2794.79,1399.16 2795.01,1399.05 2795.18,1398.9 C2795.27,1398.81 2795.5,1398.41 2795.88,1397.71 C2796.23,1397.05 2796.42,1396.66 2796.44,1396.53 C2796.47,1396.4 2796.37,1396.27 2796.15,1396.13 C2795.96,1396.02 2795.72,1395.94 2795.45,1395.92 C2795.21,1395.9 2794.99,1395.92 2794.8,1395.96 C2794.6,1396.01 2794.16,1396.19 2793.48,1396.49 C2792.79,1396.79 2791.87,1397.21 2790.7,1397.74 C2790.14,1398 2789.99,1398.28 2790.25,1398.58 C2790.51,1398.88 2791,1399.07 2791.72,1399.14 C2792.37,1399.18 2793.02,1399.23 2793.66,1399.3 L2793.65,1399.29 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2812.97,1401.73 C2812.54,1401.32 2812.45,1400.88 2812.69,1400.4 L2815.54,1394.73 C2815.78,1394.26 2816.28,1393.88 2817.05,1393.6 C2817.82,1393.32 2818.62,1393.22 2819.45,1393.31 L2828.53,1394.21 C2829.37,1394.29 2829.99,1394.53 2830.41,1394.93 C2830.83,1395.33 2830.92,1395.76 2830.69,1396.24 L2827.97,1401.93 C2827.74,1402.42 2827.25,1402.8 2826.49,1403.09 C2825.74,1403.38 2824.94,1403.48 2824.09,1403.4 L2814.89,1402.48 C2814.04,1402.4 2813.41,1402.15 2812.97,1401.74 L2812.97,1401.73 Z M2807.77,1412.09 C2807.34,1411.67 2807.24,1411.21 2807.49,1410.71 L2810.43,1404.86 C2810.68,1404.37 2811.19,1403.98 2811.97,1403.7 C2812.75,1403.42 2813.56,1403.31 2814.41,1403.4 L2823.62,1404.32 C2824.47,1404.41 2825.1,1404.65 2825.52,1405.06 C2825.94,1405.47 2826.03,1405.92 2825.8,1406.41 L2822.99,1412.28 C2822.75,1412.78 2822.25,1413.18 2821.48,1413.48 C2820.71,1413.78 2819.9,1413.88 2819.04,1413.8 L2809.7,1412.85 C2808.84,1412.76 2808.19,1412.51 2807.76,1412.09 L2807.77,1412.09 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2833.62,1413.98 C2831.38,1412.59 2829.96,1410.85 2829.34,1408.76 C2828.72,1406.68 2828.99,1404.44 2830.14,1402.03 C2831.26,1399.66 2833.03,1397.62 2835.44,1395.9 C2837.83,1394.19 2840.61,1392.94 2843.79,1392.17 C2846.95,1391.39 2850.2,1391.17 2853.55,1391.5 C2856.9,1391.83 2859.68,1392.64 2861.9,1393.95 C2864.13,1395.26 2865.61,1396.92 2866.33,1398.94 C2867.05,1400.97 2866.92,1403.19 2865.9,1405.6 C2864.88,1408.01 2863.2,1410.12 2860.82,1411.91 C2858.42,1413.72 2855.59,1415.04 2852.33,1415.88 C2849.05,1416.72 2845.68,1416.96 2842.21,1416.61 C2838.74,1416.26 2835.88,1415.38 2833.64,1413.99 L2833.62,1413.98 Z M2850.07,1406.39 C2851.03,1405.37 2851.73,1404.37 2852.16,1403.39 C2852.69,1402.19 2852.64,1401.34 2852.02,1400.85 C2851.4,1400.36 2850.58,1400.06 2849.57,1399.96 C2848.56,1399.86 2847.59,1400.02 2846.64,1400.44 C2845.69,1400.86 2844.98,1401.59 2844.51,1402.63 C2844.1,1403.53 2843.9,1404.56 2843.91,1405.72 C2843.91,1406.88 2844.72,1407.54 2846.31,1407.7 C2847.86,1407.86 2849.12,1407.42 2850.08,1406.39 L2850.07,1406.39 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2880.45,1419.46 C2880.03,1419.04 2879.92,1418.57 2880.12,1418.07 L2881.04,1415.72 L2867.7,1414.37 C2867.04,1414.3 2866.52,1414.11 2866.13,1413.8 C2865.74,1413.49 2865.55,1413.12 2865.56,1412.7 L2865.75,1408.39 C2865.78,1408.12 2865.9,1407.85 2866.12,1407.58 C2866.34,1407.31 2866.64,1407.08 2867.01,1406.9 L2889.08,1395.88 C2889.72,1395.52 2890.48,1395.38 2891.37,1395.47 L2900.49,1396.36 C2901.26,1396.44 2901.84,1396.66 2902.24,1397.04 C2902.64,1397.42 2902.76,1397.85 2902.58,1398.33 L2898.61,1409.14 L2900.03,1409.28 C2900.81,1409.36 2901.42,1409.6 2901.84,1410.01 C2902.27,1410.42 2902.39,1410.87 2902.21,1411.37 L2900.62,1415.77 C2900.44,1416.27 2900,1416.68 2899.31,1416.98 C2898.62,1417.29 2897.88,1417.4 2897.09,1417.32 L2895.66,1417.18 L2894.79,1419.54 C2894.6,1420.05 2894.17,1420.46 2893.49,1420.77 C2892.81,1421.08 2892.07,1421.2 2891.28,1421.12 L2882.26,1420.21 C2881.47,1420.13 2880.86,1419.88 2880.44,1419.46 L2880.45,1419.46 Z M2885.82,1408.5 C2886.11,1408.53 2886.39,1408.5 2886.67,1408.44 C2886.95,1408.37 2887.17,1408.26 2887.31,1408.1 C2887.39,1408.01 2887.57,1407.6 2887.84,1406.88 C2888.1,1406.2 2888.23,1405.8 2888.24,1405.67 C2888.24,1405.54 2888.13,1405.4 2887.89,1405.25 C2887.68,1405.13 2887.43,1405.06 2887.15,1405.03 C2886.91,1405.01 2886.69,1405.03 2886.5,1405.07 C2886.31,1405.12 2885.89,1405.31 2885.24,1405.62 C2884.59,1405.93 2883.71,1406.36 2882.61,1406.9 C2882.08,1407.16 2881.97,1407.45 2882.27,1407.76 C2882.57,1408.07 2883.09,1408.26 2883.83,1408.34 C2884.49,1408.38 2885.16,1408.44 2885.81,1408.5 L2885.82,1408.5 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2847.38,1546.79 L2710.77,1530.6 C2696.58,1528.92 2689.7,1519.69 2695.24,1510.2 L2695.24,1510.2 C2700.65,1500.94 2715.93,1494.85 2729.54,1496.39 L2860.43,1511.27 C2874.57,1512.88 2883.5,1521.92 2880.25,1531.67 L2880.25,1531.67 C2876.92,1541.67 2862.14,1548.54 2847.36,1546.79 L2847.38,1546.79 Z" id="Path" stroke="none" fill="#CFD8DC" fill-rule="nonzero"></path> + <path d="M2739.7,1515.36 C2735.87,1522.69 2723.91,1527.7 2713.07,1526.42 C2702.26,1525.15 2696.97,1518.14 2701.14,1510.89 C2705.24,1503.77 2716.96,1499.07 2727.43,1500.26 C2737.93,1501.46 2743.46,1508.17 2739.7,1515.36 L2739.7,1515.36 Z" id="Path" stroke="none" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M2542.38,1093.43 C2497.62,1093.43 2461.33,1108.53 2461.33,1127.15 L2461.33,1352.61 C2461.33,1371.23 2497.62,1386.33 2542.38,1386.33 C2587.14,1386.33 2623.43,1371.23 2623.43,1352.61 L2623.43,1127.15 C2623.43,1108.53 2587.14,1093.43 2542.38,1093.43 L2542.38,1093.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2623.84,1061.5 L2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2598.09,1050.94 C2599.72,1046.96 2604.28,1045.05 2608.26,1046.68 L2619.59,1051.33 C2623.57,1052.96 2625.48,1057.51 2623.84,1061.5 L2623.84,1061.5 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2616.96,1078.29 L2616.96,1078.29 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2512.74,1078.7 L2527.77,1141.87 C2519.19,1141.11 2511.12,1139.66 2503.98,1137.6 L2476.92,1023.82 C2475.5,1017.86 2479.18,1011.89 2485.13,1010.48 C2485.99,1010.27 2486.86,1010.18 2487.71,1010.18 C2492.72,1010.18 2497.26,1013.6 2498.47,1018.69 L2499.75,1024.08 L2512.74,1078.7 L2512.74,1078.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2505.2199, 1051.6457) rotate(-13.38) translate(-2505.2199, -1051.6457)" x="2496.11986" y="1023.51067" width="18.2" height="56.27" rx="9.1"></rect> + <path d="M2571.7,1030.13 L2571.34,1032.96 L2567.89,1060.37 L2557.63,1141.82 C2552.69,1142.29 2547.57,1142.53 2542.37,1142.53 C2539.66,1142.53 2536.98,1142.47 2534.34,1142.33 L2545.04,1057.48 L2548.46,1030.32 L2548.85,1027.25 L2556.31,1028.19 L2563.68,1029.12 L2571.7,1030.13 L2571.7,1030.13 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2591.42,1022.57 C2589.34,1039.08 2572.41,1065.5 2555.91,1063.42 C2539.41,1061.34 2529.56,1031.54 2531.64,1015.04 C2533.72,998.53 2548.79,986.84 2565.3,988.92 C2581.81,991 2593.5,1006.07 2591.42,1022.58 L2591.42,1022.57 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2550.79,1013.92 C2553.27,1017.12 2558.54,1029.25 2555.34,1031.74 C2552.14,1034.23 2541.69,1026.11 2539.21,1022.91 C2536.73,1019.71 2537.31,1015.11 2540.51,1012.63 C2543.71,1010.15 2548.31,1010.73 2550.79,1013.93 L2550.79,1013.92 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2572.58,1016.66 C2569.38,1019.14 2561.27,1029.59 2563.75,1032.79 C2566.23,1035.99 2578.37,1030.72 2581.57,1028.24 C2584.77,1025.76 2585.35,1021.16 2582.87,1017.96 C2580.39,1014.76 2575.79,1014.18 2572.59,1016.66 L2572.58,1016.66 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2481.72,1125.09 C2481.93,1126.05 2484.94,1130.36 2495.6,1134.71 C2495.94,1134.85 2496.28,1134.99 2496.63,1135.12 C2498.94,1136.02 2501.4,1136.85 2503.98,1137.6 C2511.12,1139.66 2519.19,1141.11 2527.77,1141.87 C2529.93,1142.08 2532.12,1142.23 2534.34,1142.33 C2536.98,1142.47 2539.66,1142.53 2542.37,1142.53 C2547.57,1142.53 2552.69,1142.29 2557.63,1141.82 C2558.75,1141.72 2559.86,1141.6 2560.97,1141.47 L2560.97,1141.47 C2571.1,1140.29 2580.4,1138.13 2588.11,1135.12 C2588.46,1134.99 2588.8,1134.85 2589.13,1134.71 C2591.4,1133.79 2593.32,1132.87 2594.94,1131.97 C2600.94,1128.68 2602.85,1125.85 2603.02,1125.09" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2312.14,1465.72 L2257.19,1490.2 C2245.32,1495.49 2231.82,1495.79 2219.72,1491.05 C2166.25,1470.08 2112.78,1449.1 2059.31,1428.13 C2038.75,1420.07 2038.1,1391.21 2058.27,1382.22 L2087.96,1368.99 C2106.25,1360.84 2126.04,1356.54 2146.07,1356.51975 C2160.19,1356.5 2175.72,1357.66 2192.26,1360.77 C2249.59,1371.51 2291.85,1400.46 2318.56,1424.39 C2332.03,1436.45 2328.66,1458.36 2312.14,1465.72 L2312.14,1465.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M869.1,838.92 C863.82,855.85 852.58,871 836.23,880.95 C800.55,902.65 754.04,891.31 732.34,855.63 C710.64,819.95 721.98,773.44 757.66,751.74 C774.01,741.8 792.63,738.79 810.1,741.89 C787.91,759.6 781.81,791.44 796.95,816.34 C812.09,841.24 843.17,850.47 869.1,838.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFF9C4" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="755.38" cy="789.42" r="8.86"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="759.38" cy="841.85" r="15.66"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="800.6" cy="852.3" r="9.86"></circle> + <text id="hero-wordmark" x="1638" y="675" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="64" font-weight="600" fill="#465362"><!-- HTML e pessoas --></text> + <g id="donut-before" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(667.33, 1245.92)" stroke-linecap="round" stroke-linejoin="round"> + <path d="M214.51,61.42 C96.04,61.42 0,101.37 0,150.66 L0,159.18 C0,179.91 17,198.99 45.5,214.14 C70.5,242.91 136.73,263.47 214.51,263.47 C292.29,263.47 358.52,242.91 383.52,214.14 C412.03,198.99 429.02,179.91 429.02,159.18 L429.02,150.66 C429.02,101.38 332.98,61.42 214.51,61.42 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M358.92,125.89 C362.98,109.25 360.39,90.57 352.4,77.44 C315.12,16.18 231.46,16.18 214.51,16.18 C197.56,16.18 114.04,16.18 76.71,77.3 C68.92,90.05 66.32,108.08 69.86,124.48 C69.97,124.98 70.08,125.46 70.18,125.91 C70.81,128.7 71.34,130.53 71.52,131.16 C95.71,213.44 196.18,213.44 214.51,213.44 C232.84,213.44 333.31,213.44 357.5,131.16 C357.99,129.5 358.44,127.82 358.84,126.18 C358.86,126.09 358.89,125.99 358.91,125.9 L358.92,125.89 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero"></path> + <path d="M357.76,80.84 C361.79,96.21 359.22,113.46 351.3,125.58 C314.32,182.15 231.33,182.15 214.52,182.15 C197.71,182.15 114.85,182.15 77.82,125.71 C70.1,113.94 67.51,97.29 71.02,82.15 C71.13,81.69 71.23,81.24 71.34,80.83 C71.97,78.25 72.49,76.57 72.67,75.98 C96.67,0 196.33,0 214.51,0 C232.69,0 332.36,0 356.35,75.98 C356.84,77.51 357.28,79.06 357.68,80.58 C357.7,80.67 357.73,80.76 357.75,80.84 L357.76,80.84 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero"></path> + <line x1="102.23" y1="90.22" x2="113.31" y2="80.03" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="180.65" y1="86.35" x2="191.28" y2="97.99" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="258.18" y1="142.62" x2="267.49" y2="133.41" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="294.07" y1="58.32" x2="306.03" y2="64.08" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="271.03" y1="79.55" x2="265.11" y2="91.07" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="317.99" y1="97.31" x2="333.06" y2="99.52" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="222.3" y1="18.91" x2="232.93" y2="15.03" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="126.6" y1="35.4" x2="139.45" y2="32.24" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="133.02" y1="124.67" x2="150.97" y2="135.83" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="202.36" y1="144.56" x2="216.98" y2="134.86" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="221.85" y1="75.67" x2="236.92" y2="82.95" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="144.76" y1="75.67" x2="148.75" y2="91.07" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="104.89" y1="117.25" x2="113.31" y2="112.37" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="329.07" y1="76.49" x2="334.39" y2="68.95" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="300.05" y1="123.01" x2="317.11" y2="128.1" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="180.21" y1="20.85" x2="194.83" y2="29.58" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <path d="M171.65,32.37 C171.65,58.41 260.05,58.41 260.05,32.37" id="Path" stroke="#465362" stroke-width="10"></path> + </g> + <g id="donut-after" opacity="0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(667.33, 1245.92)"> + <path d="M214.51,61.43 C96.04,61.43 0,101.39 0,150.67 L0,159.19 C0,179.92 17,199 45.5,214.15 C70.5,242.92 136.73,263.48 214.51,263.48 C292.29,263.48 358.52,242.92 383.52,214.15 C412.03,199 429.02,179.92 429.02,159.19 L429.02,150.67 C429.02,101.39 332.98,61.43 214.51,61.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M352.4,77.46 C342.83,62.13 327.95,56.62 323.24,54.96 C301.02,47.1 274.48,53.25 257.96,69.72 C252.57,75.11 240.65,87 242.16,104.21 C243.77,122.53 259.36,132.87 261.65,134.33 C259.75,137 245.78,157.19 248.82,180.13 C249.3,183.71 250.19,187.37 251.61,191.04 C254.63,198.84 259.23,204.64 263.37,208.72 C240.92,213.46 221.59,213.46 214.51,213.46 C196.17,213.46 95.71,213.46 71.51,131.17 C71.33,130.54 70.8,128.72 70.17,125.93 C70.07,125.47 69.96,124.99 69.85,124.49 C67.88,115.36 67.81,105.74 69.49,96.8 C70.81,89.67 73.25,82.98 76.7,77.32 C114.03,16.19 197.58,16.19 214.51,16.19 C227.45,16.19 279.34,16.19 319.74,43.51 C332.22,51.95 343.6,63 352.4,77.46 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.61,96.92 C356.49,83.38 345.32,67.52 327.37,63.23 C311.51,59.43 298.47,66.6 295.18,68.54 C264.58,66.36 242.56,85.91 242.16,104.21 C241.79,121.07 259.86,133.17 261.65,134.33 C259.75,137 245.78,157.19 248.82,180.13 C232.85,182.17 220.07,182.17 214.51,182.17 C197.71,182.17 114.84,182.17 77.81,125.72 C72.53,117.68 69.65,107.37 69.49,96.8 C69.4,91.91 69.9,86.96 71.01,82.16 C71.12,81.7 71.23,81.25 71.33,80.84 C71.96,78.26 72.48,76.57 72.66,75.99 C96.66,0 196.32,0 214.51,0 C232.7,0 332.35,0 356.35,75.99 C356.76,77.28 357.14,78.59 357.48,79.87 C357.55,80.11 357.62,80.35 357.68,80.59 C357.71,80.68 357.73,80.77 357.75,80.85 C359.12,86.08 359.73,91.53 359.61,96.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="102.23" y1="90.24" x2="113.31" y2="80.05" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="180.65" y1="86.36" x2="191.28" y2="98.01" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="222.3" y1="18.93" x2="232.93" y2="15.04" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="126.6" y1="35.42" x2="139.45" y2="32.25" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="133.02" y1="124.69" x2="150.97" y2="135.85" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="202.36" y1="144.58" x2="216.98" y2="134.88" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="221.85" y1="75.69" x2="236.92" y2="82.97" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M360.62,104.84 C359.33,122.29 351.12,138.93 338.45,149.1 C329.59,156.2 320.04,158.97 313.5,160.15 C313.14,160.22 312.79,160.27 312.45,160.33 C295.29,160.63 280.45,166.65 271.41,176.07 C267.68,179.95 264.94,184.4 263.42,189.27 C262.29,192.9 260.96,199.58 263.4,208.71 C263.41,208.73 263.41,208.75 263.42,208.77 C263.4,208.75 263.39,208.74 263.37,208.72 C259.23,204.64 254.63,198.84 251.61,191.04 C250.19,187.37 249.3,183.71 248.82,180.13 C245.78,157.19 259.75,137 261.65,134.33 C259.86,133.17 241.79,121.07 242.16,104.21 C242.56,85.91 264.58,66.36 295.18,68.54 C298.47,66.6 311.51,59.43 327.37,63.22 C345.32,67.52 356.48,83.38 359.61,96.91 C360.34,100.08 360.56,102.83 360.62,104.83 L360.62,104.84 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E8D0C1" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="144.76" y1="75.69" x2="148.75" y2="91.09" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="104.89" y1="117.26" x2="113.31" y2="112.39" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="180.21" y1="20.87" x2="194.83" y2="29.6" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M171.65,32.39 C171.65,58.43 260.05,58.43 260.05,32.39" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M263.4,208.71 C263.4,208.71 263.41,208.75 263.42,208.77 C263.4,208.75 263.39,208.74 263.37,208.72 C263.38,208.72 263.39,208.72 263.4,208.72 L263.4,208.71 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E2C7B5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.61,96.92 C358.28,89.8 355.84,83.11 352.4,77.46 C357.11,85.01 358.87,92.27 359.61,96.92 L359.61,96.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E2C7B5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M338.91,180.78 C338.91,183.78 336.25,185.59 334.28,187.56 C332.31,189.53 330.5,193.65 327.5,193.65 C324.5,193.65 320.38,191.84 318.41,189.87 C316.44,187.9 316.04,183.78 316.04,180.78 C316.04,177.78 317.11,174.33 319.08,172.36 C321.05,170.39 324.49,170.15 327.5,170.15 C330.51,170.15 333.78,170.56 335.75,172.53 C337.72,174.5 338.91,177.77 338.91,180.78 L338.91,180.78 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + <path d="M305.37,211.14 C305.37,214.14 304.73,217.33 302.76,219.3 C300.79,221.27 297.6,221.230061 294.6,221.230061 C291.6,221.230061 288.64,221.03 286.68,219.06 C284.72,217.09 285.36,214.14 285.36,211.14 C285.36,208.14 284.25,204.72 286.22,202.75 C288.19,200.78 291.6,198.75 294.61,198.75 C297.62,198.75 300.93,200.89 302.89,202.86 C304.85,204.83 305.38,208.14 305.38,211.14 L305.37,211.14 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + <path d="M372.77,182.17 C372.77,184.29 372.13,185.75 370.74,187.14 C369.35,188.53 367.89,189.83 365.77,189.83 C363.65,189.83 361.63,189.08 360.24,187.69 C358.85,186.3 358.21,184.28 358.21,182.16 C358.21,180.04 359.04,178.21 360.43,176.82 C361.82,175.43 363.65,175.85 365.77,175.85 C367.89,175.85 369.74,175.41 371.13,176.8 C372.52,178.19 372.77,180.03 372.77,182.16 L372.77,182.17 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + </g> + <g id="coffee-before" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(276.2, 1312.86)"> + <path d="M153.19,181.93 C68.59,181.93 0,210.46 0,245.66 L0,251.75 C0,286.95 68.59,315.48 153.19,315.48 C237.79,315.48 306.38,286.95 306.38,251.75 L306.38,245.66 C306.38,210.46 237.79,181.93 153.19,181.93 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="253.12" cy="93.16" r="57.79"></circle> + <path d="M153.19,0 C85.92,0 31.39,22.68 31.39,50.67 L31.39,226.81 C31.39,254.79 85.92,277.48 153.19,277.48 C220.46,277.48 274.99,254.8 274.99,226.81 L274.99,50.67 C274.99,22.69 220.46,0 153.19,0 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M256.68,44.04 C256.31,45.67 251.17,53.05 232.98,60.46 C232.41,60.69 231.83,60.92 231.23,61.15 C210.33,69.3 182.6,73.79 153.18,73.79 C123.76,73.79 96.04,69.3 75.14,61.15 C74.55,60.92 73.95,60.69 73.38,60.46 C55.19,53.04 50.06,45.67 49.69,44.04" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M232.99,60.45 C232.42,60.68 231.84,60.91 231.24,61.14 C210.34,69.29 182.61,73.78 153.19,73.78 C123.77,73.78 96.05,69.29 75.15,61.14 C74.56,60.91 73.96,60.68 73.39,60.45 C73.96,60.21 74.56,59.98 75.15,59.75 C96.05,51.6 123.78,47.12 153.19,47.12 C182.6,47.12 210.34,51.61 231.24,59.75 C231.83,59.98 232.42,60.21 232.99,60.45 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B9937E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M166.98,122.86 C170.25,132.8 173.53,142.69 176.8,152.53 C187.39,151.9 197.95,150.75 208.45,149.08 C217.88,147.52 221.77,158.81 214.17,165.82 C205.69,173.53 197.17,180.9 188.63,187.92 C191.89,197.64 195.15,207.31 198.41,216.94 C201.33,225.59 191.03,234.45 183.34,229.44 C174.79,223.92 166.21,218.06 157.63,211.86 C149.05,218.06 140.48,223.92 131.92,229.44 C124.23,234.45 113.93,225.59 116.85,216.94 C120.11,207.32 123.37,197.65 126.63,187.92 C118.08,180.89 109.56,173.53 101.09,165.82 C93.49,158.81 97.38,147.52 106.81,149.08 C117.31,150.75 127.87,151.9 138.46,152.53 C141.73,142.69 145,132.8 148.28,122.86 C151.22,114.01 164.04,114.01 166.98,122.86 L166.98,122.86 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="100.82" cy="114.78" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="243.67" cy="181.93" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="85.15" cy="181.93" r="4.98"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="216.03" cy="104.1" r="15.92"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="65.22" cy="216.77" r="8.16"></circle> + </g> + <g id="coffee-after" opacity="0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(276.55, 1312.55)"> + <path d="M153.19,181.93 C68.59,181.93 0,210.46 0,245.66 L0,251.75 C0,286.95 68.59,315.48 153.19,315.48 C237.79,315.48 306.38,286.95 306.38,251.75 L306.38,245.66 C306.38,210.46 237.79,181.93 153.19,181.93 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="253.12" cy="93.17" r="57.79"></circle> + <path d="M153.19,0 C85.92,0 31.39,22.68 31.39,50.67 L31.39,226.81 C31.39,254.79 85.92,277.48 153.19,277.48 C220.46,277.48 274.99,254.8 274.99,226.81 L274.99,50.67 C274.99,22.69 220.46,0 153.19,0 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M256.68,44.04 C256.31,45.67 251.17,53.05 232.98,60.46 C232.41,60.69 231.83,60.92 231.23,61.15 C210.33,69.3 182.6,73.79 153.18,73.79 C123.76,73.79 96.04,69.3 75.14,61.15 C74.55,60.92 73.95,60.69 73.38,60.46 C55.19,53.04 50.06,45.67 49.69,44.04" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M166.97,122.86 C170.24,132.8 173.52,142.69 176.79,152.53 C187.38,151.9 197.94,150.75 208.44,149.08 C217.87,147.52 221.76,158.81 214.16,165.82 C205.68,173.53 197.16,180.9 188.62,187.92 C191.88,197.64 195.14,207.31 198.4,216.94 C201.32,225.59 191.02,234.45 183.33,229.44 C174.78,223.92 166.2,218.06 157.62,211.86 C149.04,218.06 140.47,223.92 131.91,229.44 C124.22,234.45 113.92,225.59 116.84,216.94 C120.1,207.32 123.36,197.65 126.62,187.92 C118.07,180.89 109.55,173.53 101.08,165.82 C93.48,158.81 97.37,147.52 106.8,149.08 C117.3,150.75 127.86,151.9 138.45,152.53 C141.72,142.69 144.99,132.8 148.27,122.86 C151.21,114.01 164.03,114.01 166.97,122.86 L166.97,122.86 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="100.82" cy="114.79" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="243.67" cy="181.93" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="85.15" cy="181.93" r="4.98"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="216.02" cy="104.1" r="15.92"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="65.22" cy="216.77" r="8.16"></circle> + </g> + <g id="sparkle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2296.7975, 214.8175)"> + <path d="M54.8325,30.2125 C41.0825,35.5425 35.5425,41.0825 30.2125,54.8325 C29.4725,56.7425 26.7925,56.7425 26.0525,54.8325 C20.7225,41.0825 15.1825,35.5425 1.4325,30.2125 C-0.4775,29.4725 -0.4775,26.7925 1.4325,26.0525 C15.1825,20.7225 20.7225,15.1825 26.0525,1.4325 C26.7925,-0.4775 29.4725,-0.4775 30.2125,1.4325 C35.5425,15.1825 41.0825,20.7225 54.8325,26.0525 C56.7425,26.7925 56.7425,29.4725 54.8325,30.2125 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M120.8625,62.6825 C107.1125,68.0125 101.5725,73.5525 96.2425,87.3025 C95.5025,89.2125 92.8225,89.2125 92.0825,87.3025 C86.7525,73.5525 81.2125,68.0125 67.4625,62.6825 C65.5525,61.9425 65.5525,59.2625 67.4625,58.5225 C81.2125,53.1925 86.7525,47.6525 92.0825,33.9025 C92.8225,31.9925 95.5025,31.9925 96.2425,33.9025 C101.5725,47.6525 107.1125,53.1925 120.8625,58.5225 C122.7725,59.2625 122.7725,61.9425 120.8625,62.6825 L120.8625,62.6825 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M71.0825,98.2425 C57.3325,103.5725 51.7925,109.1125 46.4625,122.8625 C45.7225,124.7725 43.0425,124.7725 42.3025,122.8625 C36.9725,109.1125 31.4325,103.5725 17.6825,98.2425 C15.7725,97.5025 15.7725,94.8225 17.6825,94.0825 C31.4325,88.7525 36.9725,83.2125 42.3025,69.4625 C43.0425,67.5525 45.7225,67.5525 46.4625,69.4625 C51.7925,83.2125 57.3325,88.7525 71.0825,94.0825 C72.9925,94.8225 72.9925,97.5025 71.0825,98.2425 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + </g> + <path d="M553.04,892.45 L143.55,892.45 C143.55,876.777694 156.13,864.064141 171.65,864.064141 C179.29,864.064141 186.21,867.144073 191.28,872.132552 C198.83,855.925044 215.15,844.695918 234.06,844.695918 C244.6,844.695918 254.34,848.189872 262.2,854.066987 C262.81,853.380314 263.45,852.703739 264.09,852.04736 C275.29,815.835447 308.75,789.55 348.3,789.55 C387.85,789.55 421.31,815.835447 432.5,852.04736 C433.15,852.703739 433.78,853.370216 434.4,854.066987 C442.26,848.179774 452,844.695918 462.54,844.695918 C481.45,844.695918 497.77,855.925044 505.32,872.132552 C510.39,867.133974 517.31,864.064141 524.95,864.064141 C540.47,864.064141 553.05,876.777694 553.05,892.45 L553.04,892.45 Z" id="cloud" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" opacity="0" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> + </g> + </g> +</svg>
A
assets/img/design/logo.svg
@@ -0,0 +1,47 @@
+<?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
assets/img/design/mascot-aside-back.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="485px" height="312px" viewBox="0 0 485 312" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>mascot-aside-back</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="mascot-aside-back" transform="translate(242.7, 156.1548) scale(-1, 1) translate(-242.7, -156.1548)translate(10.8, 10.8548)"> + <circle id="Oval" stroke="#465362" stroke-width="20" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="438.2" cy="145.3" r="25.6"></circle> + <circle id="Oval" stroke="#465362" stroke-width="20" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="145.3" cy="145.3" r="145.3"></circle> + <path d="M225.3,61.2 L225.3,61.2 C225.3,70.8 217.5,78.6 207.9,78.6 L196.1,78.6 C186.5,78.6 178.7,70.8 178.7,61.2 L178.7,61.2 C178.7,51.6 186.5,43.8 196.1,43.8 L207.9,43.8 C217.5,43.8 225.3,51.6 225.3,61.2 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M225.3,229.5 L225.3,229.5 C225.3,239.1 217.5,246.9 207.9,246.9 L196.1,246.9 C186.5,246.9 178.7,239.1 178.7,229.5 L178.7,229.5 C178.7,219.9 186.5,212.1 196.1,212.1 L207.9,212.1 C217.5,212.1 225.3,219.9 225.3,229.5 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <line x1="361.4" y1="70.9" x2="412.6" y2="145.3" id="Path" stroke="#465362" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="361.4" y1="219.8" x2="412.6" y2="145.3" id="Path" stroke="#465362" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M364.4,255.3 C343.2,255.3 290.6,206.1 290.6,145.3 C290.6,84.5 343.2,35.4 364.4,35.4 C385.6,35.4 380.9,255.3 364.4,255.3 L364.4,255.3 Z" id="Path" stroke="#465362" stroke-width="20" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> +</svg>
A
assets/img/design/mascot-aside-front.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="177px" height="557px" viewBox="0 0 177 557" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>mascot-aside-front</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> + <g id="mascot-aside-front" transform="translate(88.8031, 278.5548) scale(-1, 1) translate(-88.8031, -278.5548)translate(10.8246, 11)" stroke="#465362" stroke-width="20"> + <path d="M19.6245864,503.15482 L80.6245864,530.65482 C105.224586,541.75482 132.424586,531.55482 137.724586,506.25482 L155.124586,423.65482 C160.424586,398.35482 139.724586,378.05482 112.724586,378.253355 L45.8245864,378.75482 C30.0245864,378.85482 15.5245864,392.25482 12.1245864,408.65482 L0.824586351,462.15482 C-2.67541365,478.55482 5.22458635,496.65482 19.6245864,503.15482 L19.6245864,503.15482 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="92.8245864" y1="417.05482" x2="78.1245864" y2="487.05482" id="Path"></line> + <line x1="47.1245864" y1="412.35482" x2="34.3245864" y2="472.95482" id="Path"></line> + <path d="M19.6245864,31.9548201 L80.6245864,4.45482007 C105.224586,-6.64517993 132.424586,3.55482007 137.724586,28.8548201 L155.124586,111.45482 C160.424586,136.75482 139.724586,157.05482 112.724586,156.856285 L45.8245864,156.25482 C30.0245864,156.15482 15.5245864,142.75482 12.1245864,126.35482 L0.824586351,72.8548201 C-2.67541365,56.4548201 5.22458635,38.3548201 19.6245864,31.8548201 L19.6245864,31.8548201 L19.6245864,31.9548201 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="92.8245864" y1="117.95482" x2="78.1245864" y2="48.0548201" id="Path"></line> + <line x1="47.1245864" y1="122.75482" x2="34.3245864" y2="62.1548201" id="Path"></line> + </g> + </g> +</svg>
A
assets/img/logo.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?> +<svg width="308px" height="141px" viewBox="0 0 308 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML for People</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd"> + <g id="logo" transform="translate(0.016, 0.189)" fill-rule="nonzero"> + <g id="html" transform="translate(2.488, 0)" fill=""> + <path d="M1.26697771,0.999 C0.489977705,1.776 0.156977705,2.775 0.156977705,4.329 C0.0459777054,5.883 0.0459777054,6.882 0.156977705,8.325 L0.0459777054,10.545 L0.156977705,12.654 L0.0459777054,14.763 L0.156977705,19.092 C0.0459777054,20.646 -0.0650222946,21.756 0.0459777054,23.31 L0.0459777054,25.641 L0.0459777054,25.863 C0.156977705,27.417 0.267977705,28.083 0.156977705,28.971 C0.0459777054,29.859 0.156977705,30.636 0.267977705,32.19 L0.378977705,34.521 L0.267977705,36.852 L0.267977705,39.072 L0.156977705,41.292 L0.378977705,43.512 L0.378977705,45.621 L0.267977705,47.841 L0.378977705,49.95 L0.378977705,50.283 C0.489977705,51.837 0.600977705,52.614 0.489977705,53.28 C0.378977705,54.057 0.378977705,55.056 0.489977705,56.721 L0.489977705,58.941 L0.489977705,59.274 C0.600977705,60.828 0.711977705,61.605 0.600977705,62.271 C0.489977705,63.048 0.600977705,63.936 0.711977705,65.712 L0.600977705,70.263 L0.600977705,72.594 C0.378977705,74.37 0.600977705,75.591 1.37797771,76.368 C1.71097771,76.812 2.26597771,77.145 2.82097771,77.256 C4.15297771,77.589 5.15197771,77.478 6.59497771,77.589 L6.70597771,77.589 L10.9239777,77.478 L15.2529777,77.478 C16.6959777,77.589 17.6949777,77.256 18.3609777,76.368 C19.0269777,75.591 19.2489777,74.592 19.3599777,73.149 L19.1379777,70.707 L19.2489777,68.598 L19.2489777,66.156 L19.2489777,65.934 C19.1379777,64.38 19.0269777,63.492 19.1379777,61.938 L19.2489777,59.496 L19.1379777,57.165 L19.0269777,54.945 L19.1379777,52.614 L18.8049777,48.507 C18.8049777,46.953 19.2489777,45.954 20.0259777,45.177 C20.9139777,44.4 21.9129777,44.178 23.4669777,44.289 L25.5759777,44.178 L30.1269777,44.178 L32.3469777,44.067 L34.5669777,44.067 C36.2319777,44.067 37.3419777,44.4 38.1189777,45.177 C38.8959777,45.954 39.2289777,46.953 39.2289777,48.618 C39.1179777,49.395 39.2289777,50.061 39.2289777,50.838 C39.3399777,52.281 39.4509777,53.28 39.3399777,54.834 L39.3399777,55.167 L39.2289777,57.276 L39.3399777,59.496 L39.3399777,61.605 L39.4509777,63.936 L39.5619777,66.045 L39.4509777,70.596 L39.4509777,73.149 C39.2289777,74.925 39.4509777,76.035 40.2279777,76.812 C40.5609777,77.256 41.1159777,77.589 41.7819777,77.7 C43.0029777,78.033 43.8909777,77.811 44.5569777,77.922 C45.0009777,78.033 45.4449777,78.033 45.9999777,78.033 C47.1099777,77.922 48.1089777,77.811 49.5519777,77.811 L51.9939777,77.922 L53.9919777,78.033 C55.5459777,77.922 56.4339777,77.589 57.2109777,76.812 C57.8769777,76.146 58.2099777,75.258 58.0989777,73.593 L58.2099777,71.151 L57.9879777,69.042 L57.9879777,66.6 L57.8769777,64.491 L57.8769777,62.16 L57.9879777,60.051 L57.8769777,57.609 L57.7659777,55.389 L57.8769777,53.169 L57.7659777,48.729 L57.7659777,46.509 L57.7659777,44.178 L57.7659777,42.18 L57.7659777,39.96 L57.7659777,39.627 C57.6549777,38.073 57.6549777,37.074 57.5439777,35.631 C57.5439777,34.965 57.5439777,34.299 57.4329777,33.411 L57.5439777,31.302 L57.5439777,29.082 L57.6549777,26.862 L57.5439777,24.753 L57.5439777,20.202 L57.4329777,18.093 L57.4329777,15.984 L57.2109777,11.433 L57.2109777,9.213 L57.2109777,7.104 L57.2109777,6.882 C57.0999777,5.328 57.0999777,4.551 57.2109777,3.885 C57.3219777,3.108 56.8779777,2.442 56.1009777,1.665 C55.2129777,0.777 54.1029777,0.555 52.6599777,0.666 L50.2179777,0.555 L47.9979777,0.555 L45.7779777,0.666 L43.5579777,0.666 C41.7819777,0.555 40.7829777,0.777 40.0059777,1.554 C39.2289777,2.442 38.8959777,3.33 39.0069777,4.884 L39.0069777,6.771 L38.8959777,8.769 L38.8959777,10.878 L38.7849777,13.098 L38.7849777,15.207 L38.8959777,17.316 C39.0069777,18.87 39.0069777,19.536 38.8959777,20.202 C38.7849777,20.979 38.7849777,21.756 38.8959777,23.31 C38.8959777,24.753 38.5629777,25.641 37.8969777,26.307 C37.1199777,27.084 36.1209777,27.306 34.4559777,27.306 L32.2359777,27.306 L32.0139777,27.306 C30.5709777,27.417 29.4609777,27.417 28.0179777,27.306 L27.6849777,27.306 L25.5759777,27.417 L23.2449777,27.417 C21.5799777,27.306 20.5809777,27.084 19.8039777,26.307 C18.9159777,25.53 18.5829777,24.531 18.5829777,22.866 L18.6939777,20.646 L18.4719777,18.093 C18.3609777,16.539 18.3609777,15.873 18.4719777,14.874 C18.5829777,14.319 18.4719777,13.875 18.4719777,13.209 C18.3609777,11.988 18.4719777,11.1 18.5829777,9.546 L18.5829777,9.324 L18.4719777,6.993 L18.4719777,4.773 C18.3609777,2.997 18.0279777,1.998 17.2509777,1.221 C16.4739777,0.444 15.3639777,0.111 13.6989777,0.222 L11.3679777,0.222 L9.25897771,0 L6.81697771,0.111 L4.70797771,0 C2.93197771,0 1.93297771,0.333 1.26697771,0.999 Z" id="Path"></path> + <path d="M79.0009777,1.443 C78.2239777,2.331 77.8909777,3.33 77.8909777,4.884 L77.8909777,7.215 L78.1129777,9.657 L78.1129777,12.099 C78.2239777,13.653 78.5569777,14.652 79.4449777,15.54 C79.8889777,15.984 80.3329777,16.317 80.9989777,16.539 C82.2199777,16.872 83.3299777,16.761 84.7729777,16.872 L85.1059777,16.872 L87.2149777,16.761 L89.4349777,16.872 L91.7659777,16.872 L93.9859777,16.65 C95.5399777,16.65 96.4279777,16.983 97.3159777,17.871 C98.0929777,18.759 98.4259777,19.314 98.5369777,20.202 C98.5369777,21.09 98.5369777,21.645 98.4259777,22.311 C98.3149777,23.088 98.4259777,23.976 98.5369777,25.53 L98.4259777,27.972 L98.5369777,30.081 L98.5369777,32.19 L98.5369777,34.632 L98.6479777,36.852 L98.5369777,38.961 L98.5369777,41.07 L98.7589777,43.512 L98.8699777,45.51 C98.7589777,47.286 98.7589777,48.507 98.8699777,50.061 L98.9809777,52.392 L98.7589777,54.612 L98.7589777,56.832 L98.9809777,58.941 L98.9809777,61.05 L98.9809777,61.494 C99.0919777,63.048 98.9809777,64.047 98.8699777,65.49 L98.8699777,70.263 L98.7589777,72.594 C98.6479777,74.37 99.0919777,75.369 99.8689777,76.146 C100.756978,76.923 102.199978,77.478 104.974978,77.589 L105.307978,77.589 L114.298978,77.7 C115.963978,77.589 116.962978,77.256 117.739978,76.479 C118.516978,75.702 118.849978,74.592 118.738978,73.038 L118.738978,70.707 L118.738978,68.709 L118.738978,66.489 L118.849978,64.158 L118.849978,63.825 C118.738978,62.271 118.738978,61.383 118.849978,59.829 L118.849978,59.607 L118.849978,57.276 L118.627978,55.056 L118.849978,50.505 L118.849978,48.174 L118.849978,46.065 L118.627978,43.734 L118.738978,41.625 L118.627978,39.183 L118.849978,37.074 L118.849978,34.632 L118.849978,30.303 L118.627978,27.972 L118.738978,25.752 L118.738978,21.201 C118.960978,19.647 119.515978,18.537 120.403978,17.649 C121.291978,16.761 122.290978,16.428 123.622978,16.539 L128.173978,16.539 L132.613978,16.317 C134.278978,16.317 135.277978,15.984 136.054978,15.207 C136.387978,14.763 136.720978,14.319 136.831978,13.653 C137.053978,12.321 136.831978,11.655 136.942978,10.767 C137.053978,9.99 136.942978,9.213 136.831978,7.548 L136.831978,5.328 C136.720978,3.774 136.387978,2.886 135.610978,1.998 C134.833978,1.221 133.723978,0.777 132.169978,0.555 L129.616978,0.555 L127.396978,0.333 L124.843978,0.222 L122.512978,0.222 L117.961978,0.111 L115.852978,0.222 L113.632978,0.222 L111.412978,0 L106.861978,0 L106.639978,0 C105.196978,0.111 104.086978,0.111 102.643978,0 L102.310978,0 L99.9799777,0 L95.6509777,0.222 L93.3199777,0.222 L91.2109777,0 L88.9909777,0 L86.6599777,0.222 L84.5509777,0.111 L82.2199777,0.111 C80.6659777,0.222 79.6669777,0.555 79.0009777,1.443 Z" id="Path"></path> + <path d="M156.734978,76.812 C157.400978,77.589 158.399978,77.922 159.953978,77.811 C161.729978,77.922 162.839978,77.922 164.393978,77.7 L168.944978,77.7 L169.499978,77.7 C172.385978,77.811 173.939978,77.589 174.716978,76.812 C175.493978,76.035 175.826978,74.925 175.826978,73.149 L175.493978,70.929 L175.493978,66.489 L175.604978,64.047 L175.604978,54.945 L175.382978,52.725 L175.493978,50.394 L175.382978,48.285 L175.382978,45.843 C175.493978,44.4 175.493978,43.29 175.382978,41.514 L175.382978,39.294 L175.493978,37.074 L175.937978,36.852 C176.159978,36.741 176.603978,37.407 177.269978,38.517 L178.157978,40.515 L179.045978,42.624 L179.600978,44.622 L180.488978,46.62 L180.488978,46.731 C181.265978,48.063 181.820978,48.84 182.375978,50.283 L182.486978,50.616 L183.929978,54.39 L185.039978,56.388 L185.816978,58.386 L185.816978,58.497 C186.482978,59.829 186.815978,60.828 187.370978,62.16 C187.592978,62.937 188.036978,63.603 188.369978,64.38 L189.257978,66.267 C190.034978,67.71 190.700978,68.487 191.699978,69.264 C192.698978,70.041 193.697978,70.374 195.140978,70.374 C196.583978,70.374 197.582978,70.152 198.692978,69.375 C199.691978,68.709 200.357978,67.932 201.023978,66.6 L201.911978,64.602 L202.910978,62.493 L204.020978,60.384 L205.019978,58.497 L205.796978,56.61 L206.684978,54.39 L207.572978,52.392 L208.571978,50.616 L209.681978,48.507 L210.680978,46.62 L211.457978,44.733 L212.345978,42.624 L213.344978,40.737 L214.454978,38.739 C215.009978,37.407 215.453978,36.741 215.786978,36.852 C216.119978,36.963 216.341978,37.851 216.341978,39.183 L216.230978,41.514 L216.119978,43.512 L216.341978,45.843 L216.341978,52.725 C216.230978,54.168 216.230978,55.278 216.341978,57.054 L216.230978,59.163 L216.230978,61.383 L216.119978,63.714 L216.119978,66.045 L216.008978,70.596 L215.897978,73.149 C215.897978,74.925 216.230978,75.924 217.007978,76.701 C217.784978,77.478 219.338978,77.811 222.113978,77.811 L224.777978,77.811 C226.553978,77.922 227.663978,77.922 229.217978,77.7 L229.883978,77.7 C232.658978,77.7 234.101978,77.478 234.989978,76.701 C235.766978,76.035 236.099978,75.036 235.988978,73.482 L235.877978,71.373 L235.988978,67.044 C235.877978,65.601 235.877978,64.602 235.988978,63.048 L235.988978,62.715 L236.099978,60.384 L236.099978,60.162 C235.988978,58.608 235.877978,57.72 235.988978,56.166 L235.988978,54.057 L236.099978,51.615 L236.210978,49.617 L236.321978,44.955 L236.210978,42.735 L236.210978,40.737 L236.321978,38.406 L236.210978,36.297 L236.321978,34.188 L236.321978,29.748 L236.543978,25.308 L236.432978,22.977 L236.321978,20.646 L236.210978,18.315 L236.321978,16.206 L236.099978,13.875 L235.988978,11.433 L235.877978,9.213 L235.988978,7.104 L235.988978,4.773 C235.877978,2.997 235.433978,1.998 234.656978,1.221 C233.879978,0.444 232.880978,0.222 231.548978,0.222 L229.439978,0.111 L226.997978,0.111 L226.886978,0.111 C225.443978,0.222 224.555978,0.222 223.889978,0.111 C223.112978,0 221.891978,0.111 219.449978,0.222 L218.672978,0.222 L217.562978,0.111 C216.785978,0 216.008978,0.333 214.898978,1.11 C213.788978,1.887 212.900978,2.886 212.234978,4.107 L211.235978,6.327 L210.125978,8.325 L209.126978,10.323 L208.238978,12.21 L207.128978,14.097 L204.131978,20.202 L203.021978,22.089 L202.133978,24.087 L201.134978,26.307 L199.913978,28.305 L198.914978,30.192 L197.915978,32.301 C197.249978,33.522 196.694978,34.077 196.028978,34.077 C195.362978,34.077 194.585978,33.522 193.919978,32.079 L192.920978,30.303 C192.476978,29.415 192.143978,28.638 191.699978,27.972 C191.033978,26.751 190.478978,25.863 189.923978,24.531 L189.701978,24.087 L188.813978,22.311 L187.925978,20.313 L186.704978,18.093 L185.927978,16.095 L184.928978,14.097 L184.817978,13.986 C184.040978,12.765 183.485978,11.766 182.930978,10.434 L182.819978,10.101 L181.931978,8.325 L180.710978,6.327 L179.711978,4.107 C179.156978,2.775 178.379978,1.887 177.269978,1.11 C176.159978,0.333 174.938978,0.111 173.495978,0.222 L171.275978,0.111 L168.944978,0.111 L166.946978,0.222 C166.058978,0.111 165.281978,0.111 164.504978,0.111 C163.061978,0.111 161.951978,0.111 160.508978,0 L160.175978,0 C158.621978,0 157.622978,0.444 157.067978,1.221 C156.401978,2.22 156.068978,3.663 156.068978,6.327 L156.068978,13.653 L155.846978,15.984 L155.957978,18.204 L156.068978,20.202 L155.957978,22.422 L155.846978,24.864 L155.846978,33.855 L155.846978,33.966 C155.957978,35.52 155.957978,36.408 155.846978,37.962 L155.846978,38.184 L155.957978,40.515 L156.068978,42.735 L155.957978,44.955 L155.957978,47.397 L155.846978,49.617 L155.957978,51.615 L155.957978,53.835 L155.846978,56.166 L155.846978,56.499 C155.957978,58.053 156.068978,58.83 155.957978,59.496 C155.846978,60.273 155.846978,61.272 155.957978,62.826 L155.957978,67.266 L155.846978,71.595 C155.735978,73.26 155.624978,74.148 155.735978,74.814 C155.735978,75.591 156.068978,76.035 156.734978,76.812 Z" id="Path"></path> + <path d="M261.108978,1.11 C260.220978,1.887 259.887978,2.886 259.887978,4.44 L259.998978,6.882 L259.887978,9.102 L259.887978,11.1 L259.998978,13.542 L259.887978,15.651 L259.887978,17.871 L259.776978,20.091 L259.887978,22.2 L259.998978,24.642 L259.887978,26.751 L259.887978,28.971 L259.776978,31.191 L259.776978,33.411 C259.665978,34.965 259.776978,36.075 259.887978,37.74 L259.776978,40.182 L259.776978,42.291 L259.776978,46.731 L259.776978,49.062 C259.665978,49.839 259.665978,50.616 259.665978,51.282 C259.554978,52.725 259.554978,53.724 259.443978,55.278 L259.443978,55.611 L259.443978,57.942 L259.554978,59.94 L259.665978,62.16 L259.554978,64.602 L259.554978,66.6 L259.332978,71.04 L259.332978,71.706 C259.332978,74.481 259.665978,76.035 260.442978,76.812 C261.219978,77.589 262.107978,77.811 263.439978,77.7 C264.882978,77.589 265.659978,77.589 266.325978,77.7 C266.991978,77.811 268.212978,77.811 270.654978,77.7 C271.431978,77.589 272.319978,77.7 273.762978,77.811 L273.873978,77.811 L276.204978,77.811 L278.202978,77.7 L280.422978,77.811 L282.753978,77.7 L284.751978,77.7 L287.193978,77.811 L291.522978,77.922 L293.520978,77.811 L295.851978,77.811 L298.071978,78.144 L300.291978,78.144 C301.845978,78.033 302.733978,77.7 303.510978,76.923 C304.176978,76.257 304.509978,75.147 304.509978,73.482 L304.509978,71.151 L304.620978,68.82 L304.509978,66.489 C304.620978,64.935 304.287978,63.936 303.510978,63.048 C302.733978,62.16 301.179978,61.938 298.404978,61.938 L298.293978,61.938 L296.073978,61.827 L293.742978,62.049 L293.076978,62.049 C291.633978,61.938 290.634978,61.938 289.635978,61.938 C288.192978,61.938 287.082978,62.049 285.639978,61.938 L283.197978,61.827 C281.754978,61.827 280.866978,61.605 280.089978,60.828 C279.312978,60.162 278.979978,59.163 278.979978,57.498 L278.979978,55.5 L279.201978,53.28 L279.201978,51.171 L279.201978,50.727 C279.090978,49.173 279.090978,48.285 279.201978,46.731 L279.201978,46.398 L279.090978,44.289 L279.201978,41.847 L279.201978,37.407 L278.979978,35.298 L278.979978,30.636 C279.090978,29.082 279.201978,27.861 279.090978,26.307 L278.979978,23.976 L278.979978,21.756 C279.090978,20.091 279.090978,18.981 278.979978,17.316 L278.979978,14.985 L279.201978,12.876 L279.090978,8.325 C278.979978,6.882 279.090978,5.883 279.201978,4.44 C279.201978,2.997 278.868978,2.109 278.091978,1.332 C277.314978,0.666 276.315978,0.333 274.761978,0.333 L272.874978,0.222 L270.654978,0.333 L269.877978,0.333 C268.434978,0.222 267.324978,0.222 266.325978,0.222 C264.882978,0.222 263.994978,0.333 263.328978,0.222 C262.662978,0.111 261.885978,0.444 261.108978,1.11 Z" id="Path"></path> + </g> + <g id="for-people" transform="translate(-0, 92.891)" fill=""> + <path d="M6.604,36.972 C7.8,36.972 8.788,35.984 8.788,34.788 L8.788,15.86 L14.456,15.86 C15.652,15.86 16.64,14.872 16.64,13.676 C16.64,12.48 15.652,11.492 14.456,11.492 L8.788,11.492 L8.788,11.128 C8.788,6.864 10.348,4.368 12.688,4.368 C13.832,4.368 14.924,5.044 15.236,5.928 C15.548,6.76 16.38,7.384 17.316,7.384 C18.512,7.384 19.5,6.396 19.5,5.2 C19.5,4.94 19.448,4.628 19.344,4.42 C18.408,1.768 15.652,0 12.688,0 C7.696,0 4.42,4.472 4.42,11.128 L4.42,11.492 L2.184,11.492 C0.988,11.492 0,12.48 0,13.676 C0,14.872 0.988,15.86 2.184,15.86 L4.42,15.86 L4.42,34.788 C4.42,35.984 5.408,36.972 6.604,36.972 Z" id="Path"></path> + <path d="M27.456,37.492 C33.852,37.492 38.168,32.24 38.168,24.648 C38.168,16.9 33.8,11.44 27.456,11.44 C21.06,11.44 16.692,16.9 16.692,24.648 C16.692,32.292 21.008,37.492 27.456,37.492 Z M27.456,33.124 C23.556,33.124 21.06,29.9 21.06,24.648 C21.06,19.292 23.556,15.808 27.456,15.808 C31.252,15.808 33.8,19.292 33.8,24.648 C33.8,29.9 31.304,33.124 27.456,33.124 Z" id="Shape"></path> + <path d="M45.344,36.972 C46.54,36.972 47.528,35.984 47.528,34.788 L47.528,22.568 C47.632,18.304 49.608,15.808 52.78,15.808 C54.34,15.808 55.744,16.536 56.056,17.368 C56.368,18.2 57.2,18.824 58.136,18.824 C59.332,18.824 60.32,17.836 60.32,16.64 C60.32,16.38 60.268,16.068 60.164,15.86 C59.176,13.156 56.108,11.44 52.78,11.44 C50.804,11.44 49.036,11.96 47.58,13 C47.372,12.012 46.488,11.284 45.448,11.284 C44.252,11.284 43.264,12.272 43.264,13.468 L43.16,22.516 L43.16,22.568 L43.16,34.788 C43.16,35.984 44.148,36.972 45.344,36.972 Z" id="Path"></path> + <path d="M78.936,36.972 C80.132,36.972 81.12,35.984 81.12,34.788 L81.12,21.424 L87.568,21.424 C93.652,21.424 97.76,17.212 97.76,10.92 C97.76,4.992 93.288,0.468 87.568,0.468 C86.476,0.468 85.592,0.468 84.656,0.468 C83.876,0.468 83.044,0.468 82.108,0.468 C81.12,0.468 80.132,0.468 78.988,0.468 C77.532,0.468 76.752,1.196 76.752,2.652 L76.752,34.788 C76.752,35.984 77.74,36.972 78.936,36.972 Z M81.12,17.056 L81.12,4.836 C81.432,4.836 81.796,4.836 82.108,4.836 C83.044,4.836 83.824,4.836 84.708,4.836 C85.54,4.836 86.476,4.836 87.568,4.836 C90.896,4.836 93.392,7.384 93.392,10.92 C93.392,14.82 91.208,17.056 87.568,17.056 L81.12,17.056 Z" id="Shape"></path> + <path d="M107.796,37.492 C111.488,37.492 115.024,35.568 117.312,32.396 C117.572,32.032 117.728,31.564 117.728,31.096 C117.728,29.9 116.74,28.912 115.544,28.912 C114.816,28.912 114.14,29.276 113.776,29.848 C112.268,31.928 110.084,33.124 107.796,33.124 C104,33.124 101.4,30.108 101.4,25.532 C101.4,25.376 101.4,25.272 101.4,25.116 L116.324,25.116 C117.676,25.116 118.56,24.388 118.56,22.984 C118.612,16.484 114.244,11.648 108.316,11.648 C101.712,11.648 97.032,17.42 97.032,25.532 C97.032,32.448 101.556,37.492 107.796,37.492 Z M102.18,20.748 C103.324,17.784 105.56,16.016 108.316,16.016 C111.124,16.016 113.256,17.836 113.932,20.748 L102.18,20.748 Z" id="Shape"></path> + <path d="M133.276,37.492 C139.672,37.492 143.988,32.24 143.988,24.648 C143.988,16.9 139.62,11.44 133.276,11.44 C126.88,11.44 122.512,16.9 122.512,24.648 C122.512,32.292 126.828,37.492 133.276,37.492 Z M133.276,33.124 C129.376,33.124 126.88,29.9 126.88,24.648 C126.88,19.292 129.376,15.808 133.276,15.808 C137.072,15.808 139.62,19.292 139.62,24.648 C139.62,29.9 137.124,33.124 133.276,33.124 Z" id="Shape"></path> + <path d="M150.176,47.008 C151.372,47.008 152.36,46.02 152.36,44.824 L152.36,36.556 C153.66,37.18 155.22,37.544 156.832,37.544 C163.228,37.544 167.388,32.24 167.388,24.232 C167.388,16.38 163.592,11.388 157.508,11.388 C155.48,11.388 153.556,11.96 151.944,12.948 C151.528,12.376 150.852,12.012 150.124,12.012 C148.928,12.012 147.94,13 147.94,14.196 L147.992,19.084 L147.992,44.824 C147.992,46.02 148.98,47.008 150.176,47.008 Z M156.832,33.176 C154.388,33.176 152.36,31.772 152.36,30.368 L152.36,19.084 C152.36,17.524 154.96,15.756 157.508,15.756 C160.992,15.756 163.02,18.72 163.02,24.232 C163.02,29.9 160.628,33.176 156.832,33.176 Z" id="Shape"></path> + <path d="M174.044,37.18 C175.24,37.18 176.228,36.192 176.228,34.996 L176.228,2.652 C176.228,1.456 175.24,0.468 174.044,0.468 C172.848,0.468 171.86,1.456 171.86,2.652 L171.86,34.996 C171.86,36.192 172.848,37.18 174.044,37.18 Z" id="Path"></path> + <path d="M190.944,37.492 C194.636,37.492 198.172,35.568 200.46,32.396 C200.72,32.032 200.876,31.564 200.876,31.096 C200.876,29.9 199.888,28.912 198.692,28.912 C197.964,28.912 197.288,29.276 196.924,29.848 C195.416,31.928 193.232,33.124 190.944,33.124 C187.148,33.124 184.548,30.108 184.548,25.532 C184.548,25.376 184.548,25.272 184.548,25.116 L199.472,25.116 C200.824,25.116 201.708,24.388 201.708,22.984 C201.76,16.484 197.392,11.648 191.464,11.648 C184.86,11.648 180.18,17.42 180.18,25.532 C180.18,32.448 184.704,37.492 190.944,37.492 Z M185.328,20.748 C186.472,17.784 188.708,16.016 191.464,16.016 C194.272,16.016 196.404,17.836 197.08,20.748 L185.328,20.748 Z" id="Shape"></path> + </g> + </g> + </g> +</svg>
A
assets/js/anime.min.js
@@ -0,0 +1,8 @@
+/* + * anime.js v3.2.2 + * (c) 2023 Julian Garnier + * Released under the MIT license + * animejs.com + */ + +!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var i={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},M={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},j=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],l={CSS:{},springs:{}};function C(n,e,t){return Math.min(Math.max(n,e),t)}function u(n,e){return-1<n.indexOf(e)}function o(n,e){return n.apply(null,e)}var w={arr:function(n){return Array.isArray(n)},obj:function(n){return u(Object.prototype.toString.call(n),"Object")},pth:function(n){return w.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||w.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return w.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return w.hex(n)||w.rgb(n)||w.hsl(n)},key:function(n){return!i.hasOwnProperty(n)&&!M.hasOwnProperty(n)&&"targets"!==n&&"keyframes"!==n}};function d(n){n=/\(([^)]+)\)/.exec(n);return n?n[1].split(",").map(function(n){return parseFloat(n)}):[]}function c(r,t){var n=d(r),e=C(w.und(n[0])?1:n[0],.1,100),a=C(w.und(n[1])?100:n[1],.1,100),o=C(w.und(n[2])?10:n[2],.1,100),n=C(w.und(n[3])?0:n[3],.1,100),u=Math.sqrt(a/e),i=o/(2*Math.sqrt(a*e)),c=i<1?u*Math.sqrt(1-i*i):0,s=i<1?(i*u-n)/c:-n+u;function f(n){var e=t?t*n/1e3:n,e=i<1?Math.exp(-e*i*u)*(+Math.cos(c*e)+s*Math.sin(c*e)):(1+s*e)*Math.exp(-e*u);return 0===n||1===n?n:1-e}return t?f:function(){var n=l.springs[r];if(n)return n;for(var e=0,t=0;;)if(1===f(e+=1/6)){if(16<=++t)break}else t=0;return n=e*(1/6)*1e3,l.springs[r]=n}}function q(e){return void 0===e&&(e=10),function(n){return Math.ceil(C(n,1e-6,1)*e)*(1/e)}}var H=function(b,e,M,t){if(0<=b&&b<=1&&0<=M&&M<=1){var x=new Float32Array(11);if(b!==e||M!==t)for(var n=0;n<11;++n)x[n]=k(.1*n,b,M);return function(n){return b===e&&M===t||0===n||1===n?n:k(r(n),e,t)}}function r(n){for(var e=0,t=1;10!==t&&x[t]<=n;++t)e+=.1;var r=e+.1*((n-x[--t])/(x[t+1]-x[t])),a=O(r,b,M);if(.001<=a){for(var o=n,u=r,i=b,c=M,s=0;s<4;++s){var f=O(u,i,c);if(0===f)return u;u-=(k(u,i,c)-o)/f}return u}if(0===a)return r;for(var l,d,p=n,h=e,g=e+.1,m=b,v=M,y=0;0<(l=k(d=h+(g-h)/2,m,v)-p)?g=d:h=d,1e-7<Math.abs(l)&&++y<10;);return d}};function r(n,e){return 1-3*e+3*n}function k(n,e,t){return((r(e,t)*n+(3*t-6*e))*n+3*e)*n}function O(n,e,t){return 3*r(e,t)*n*n+2*(3*t-6*e)*n+3*e}e={linear:function(){return function(n){return n}}},t={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Expo:function(){return function(n){return n?Math.pow(2,10*n-10):0}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===e&&(e=.5);var t=C(n=void 0===n?1:n,1,10),r=C(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint"].forEach(function(n,e){t[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(t).forEach(function(n){var r=t[n];e["easeIn"+n]=r,e["easeOut"+n]=function(e,t){return function(n){return 1-r(e,t)(1-n)}},e["easeInOut"+n]=function(e,t){return function(n){return n<.5?r(e,t)(2*n)/2:1-r(e,t)(-2*n+2)/2}},e["easeOutIn"+n]=function(e,t){return function(n){return n<.5?(1-r(e,t)(1-2*n))/2:(r(e,t)(2*n-1)+1)/2}}});var e,t,s=e;function P(n,e){if(w.fnc(n))return n;var t=n.split("(")[0],r=s[t],a=d(n);switch(t){case"spring":return c(n,e);case"cubicBezier":return o(H,a);case"steps":return o(q,a);default:return o(r,a)}}function a(n){try{return document.querySelectorAll(n)}catch(n){}}function I(n,e){for(var t,r=n.length,a=2<=arguments.length?e:void 0,o=[],u=0;u<r;u++)u in n&&(t=n[u],e.call(a,t,u,n))&&o.push(t);return o}function f(n){return n.reduce(function(n,e){return n.concat(w.arr(e)?f(e):e)},[])}function p(n){return w.arr(n)?n:(n=w.str(n)?a(n)||n:n)instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n]}function h(n,e){return n.some(function(n){return n===e})}function g(n){var e,t={};for(e in n)t[e]=n[e];return t}function x(n,e){var t,r=g(n);for(t in n)r[t]=(e.hasOwnProperty(t)?e:n)[t];return r}function D(n,e){var t,r=g(n);for(t in e)r[t]=(w.und(n[t])?e:n)[t];return r}function V(n){var e,t,r,a,o,u,i;return w.rgb(n)?(e=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(t=n))?"rgba("+e[1]+",1)":t:w.hex(n)?(e=(e=n).replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),"rgba("+parseInt(e[1],16)+","+parseInt(e[2],16)+","+parseInt(e[3],16)+",1)"):w.hsl(n)?(t=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t=n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(t),n=parseInt(t[1],10)/360,u=parseInt(t[2],10)/100,i=parseInt(t[3],10)/100,t=t[4]||1,0==u?r=a=o=i:(r=c(u=2*i-(i=i<.5?i*(1+u):i+u-i*u),i,n+1/3),a=c(u,i,n),o=c(u,i,n-1/3)),"rgba("+255*r+","+255*a+","+255*o+","+t+")"):void 0;function c(n,e,t){return t<0&&(t+=1),1<t&&--t,t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}}function B(n){n=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(n)return n[1]}function m(n,e){return w.fnc(n)?n(e.target,e.id,e.total):n}function v(n,e){return n.getAttribute(e)}function y(n,e,t){var r,a,o;return h([t,"deg","rad","turn"],B(e))?e:(r=l.CSS[e+t],w.und(r)?(a=document.createElement(n.tagName),(n=n.parentNode&&n.parentNode!==document?n.parentNode:document.body).appendChild(a),a.style.position="absolute",a.style.width=100+t,o=100/a.offsetWidth,n.removeChild(a),n=o*parseFloat(e),l.CSS[e+t]=n):r)}function $(n,e,t){var r;if(e in n.style)return r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),e=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0",t?y(n,e,t):e}function b(n,e){return w.dom(n)&&!w.inp(n)&&(!w.nil(v(n,e))||w.svg(n)&&n[e])?"attribute":w.dom(n)&&h(j,e)?"transform":w.dom(n)&&"transform"!==e&&$(n,e)?"css":null!=n[e]?"object":void 0}function W(n){if(w.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function X(n,e,t,r){var a=u(e,"scale")?1:0+(u(a=e,"translate")||"perspective"===a?"px":u(a,"rotate")||u(a,"skew")?"deg":void 0),o=W(n).get(e)||a;return t&&(t.transforms.list.set(e,o),t.transforms.last=e),r?y(n,o,r):o}function T(n,e,t,r){switch(b(n,e)){case"transform":return X(n,e,r,t);case"css":return $(n,e,t);case"attribute":return v(n,e);default:return n[e]||0}}function E(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=B(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function Y(n,e){var t;return w.col(n)?V(n):/\s/g.test(n)?n:(t=(t=B(n))?n.substr(0,n.length-t.length):n,e?t+e:t)}function F(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function Z(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var o=t.getItem(a);0<a&&(r+=F(e,o)),e=o}return r}function G(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return 2*Math.PI*v(n,"r");case"rect":return 2*v(t=n,"width")+2*v(t,"height");case"line":return F({x:v(t=n,"x1"),y:v(t,"y1")},{x:v(t,"x2"),y:v(t,"y2")});case"polyline":return Z(n);case"polygon":return e=n.points,Z(n)+F(e.getItem(e.numberOfItems-1),e.getItem(0))}var e,t}function Q(n,e){var e=e||{},n=e.el||function(n){for(var e=n.parentNode;w.svg(e)&&w.svg(e.parentNode);)e=e.parentNode;return e}(n),t=n.getBoundingClientRect(),r=v(n,"viewBox"),a=t.width,t=t.height,e=e.viewBox||(r?r.split(" "):[0,0,a,t]);return{el:n,viewBox:e,x:+e[0],y:+e[1],w:a,h:t,vW:e[2],vH:e[3]}}function z(n,e){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=Y(w.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:w.str(n)||e?r.split(t):[]}}function A(n){return I(n?f(w.arr(n)?n.map(p):p(n)):[],function(n,e,t){return t.indexOf(n)===e})}function _(n){var t=A(n);return t.map(function(n,e){return{target:n,id:e,total:t.length,transforms:{list:W(n)}}})}function R(e){for(var t=I(f(e.map(function(n){return Object.keys(n)})),function(n){return w.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),a={},n=0;n<t.length;n++)!function(n){var r=t[n];a[r]=e.map(function(n){var e,t={};for(e in n)w.key(e)?e==r&&(t.value=n[e]):t[e]=n[e];return t})}(n);return a}function J(n,e){var t,r=[],a=e.keyframes;for(t in e=a?D(R(a),e):e)w.key(t)&&r.push({name:t,tweens:function(n,t){var e,r=g(t),a=(/^spring/.test(r.easing)&&(r.duration=c(r.easing)),w.arr(n)&&(2===(e=n.length)&&!w.obj(n[0])?n={value:n}:w.fnc(t.duration)||(r.duration=t.duration/e)),w.arr(n)?n:[n]);return a.map(function(n,e){n=w.obj(n)&&!w.pth(n)?n:{value:n};return w.und(n.delay)&&(n.delay=e?0:t.delay),w.und(n.endDelay)&&(n.endDelay=e===a.length-1?t.endDelay:0),n}).map(function(n){return D(n,r)})}(e[t],n)});return r}function K(i,c){var s;return i.tweens.map(function(n){var n=function(n,e){var t,r={};for(t in n){var a=m(n[t],e);w.arr(a)&&1===(a=a.map(function(n){return m(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(n,c),e=n.value,t=w.arr(e)?e[1]:e,r=B(t),a=T(c.target,i.name,r,c),o=s?s.to.original:a,u=w.arr(e)?e[0]:o,a=B(u)||B(a),r=r||a;return w.und(t)&&(t=o),n.from=z(u,r),n.to=z(E(t,u),r),n.start=s?s.end:0,n.end=n.start+n.delay+n.duration+n.endDelay,n.easing=P(n.easing,n.duration),n.isPath=w.pth(e),n.isPathTargetInsideSVG=n.isPath&&w.svg(c.target),n.isColor=w.col(n.from.original),n.isColor&&(n.round=1),s=n})}var U={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){var o;r.list.set(e,t),e!==r.last&&!a||(o="",r.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o)}};function nn(n,u){_(n).forEach(function(n){for(var e in u){var t=m(u[e],n),r=n.target,a=B(t),o=T(r,e,a,n),t=E(Y(t,a||B(o)),o),a=b(r,e);U[a](r,e,t,n.transforms,!0)}})}function en(n,e){return I(f(n.map(function(o){return e.map(function(n){var e,t,r=o,a=b(r.target,n.name);if(a)return t=(e=K(n,r))[e.length-1],{type:a,property:n.name,animatable:r,tweens:e,duration:t.end,delay:e[0].delay,endDelay:t.endDelay}})})),function(n){return!w.und(n)})}function tn(n,e){function t(n){return n.timelineOffset||0}var r=n.length,a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var rn=0;var N,S=[],an=("undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){L.suspendWhenDocumentHidden&&(n()?N=cancelAnimationFrame(N):(S.forEach(function(n){return n._onDocumentVisibility()}),an()))}),function(){!(N||n()&&L.suspendWhenDocumentHidden)&&0<S.length&&(N=requestAnimationFrame(on))});function on(n){for(var e=S.length,t=0;t<e;){var r=S[t];r.paused?(S.splice(t,1),e--):(r.tick(n),t++)}N=0<t?requestAnimationFrame(on):void 0}function n(){return document&&document.hidden}function L(n){var c,s=0,f=0,l=0,d=0,p=null;function h(n){var e=window.Promise&&new Promise(function(n){return p=n});return n.finished=e}e=x(i,n=n=void 0===n?{}:n),t=J(r=x(M,n),n),n=_(n.targets),r=tn(t=en(n,t),r),a=rn,rn++;var e,t,r,a,k=D(e,{id:a,children:[],animatables:n,animations:t,duration:r.duration,delay:r.delay,endDelay:r.endDelay});h(k);function g(){var n=k.direction;"alternate"!==n&&(k.direction="normal"!==n?"normal":"reverse"),k.reversed=!k.reversed,c.forEach(function(n){return n.reversed=k.reversed})}function m(n){return k.reversed?k.duration-n:n}function o(){s=0,f=m(k.currentTime)*(1/L.speed)}function v(n,e){e&&e.seek(n-e.timelineOffset)}function y(e){for(var n=0,t=k.animations,r=t.length;n<r;){for(var a=t[n],o=a.animatable,u=a.tweens,i=u.length-1,c=u[i],i=(i&&(c=I(u,function(n){return e<n.end})[0]||c),C(e-c.start-c.delay,0,c.duration)/c.duration),s=isNaN(i)?1:c.easing(i),f=c.to.strings,l=c.round,d=[],p=c.to.numbers.length,h=void 0,g=0;g<p;g++){var m=void 0,v=c.to.numbers[g],y=c.from.numbers[g]||0,m=c.isPath?function(e,t,n){function r(n){return e.el.getPointAtLength(1<=t+(n=void 0===n?0:n)?t+n:0)}var a=Q(e.el,e.svg),o=r(),u=r(-1),i=r(1),c=n?1:a.w/a.vW,s=n?1:a.h/a.vH;switch(e.property){case"x":return(o.x-a.x)*c;case"y":return(o.y-a.y)*s;case"angle":return 180*Math.atan2(i.y-u.y,i.x-u.x)/Math.PI}}(c.value,s*v,c.isPathTargetInsideSVG):y+s*(v-y);!l||c.isColor&&2<g||(m=Math.round(m*l)/l),d.push(m)}var b=f.length;if(b)for(var h=f[0],M=0;M<b;M++){f[M];var x=f[M+1],w=d[M];isNaN(w)||(h+=x?w+x:w+" ")}else h=d[0];U[a.type](o.target,a.property,h,o.transforms),a.currentValue=h,n++}}function b(n){k[n]&&!k.passThrough&&k[n](k)}function u(n){var e=k.duration,t=k.delay,r=e-k.endDelay,a=m(n);if(k.progress=C(a/e*100,0,100),k.reversePlayback=a<k.currentTime,c){var o=a;if(k.reversePlayback)for(var u=d;u--;)v(o,c[u]);else for(var i=0;i<d;i++)v(o,c[i])}!k.began&&0<k.currentTime&&(k.began=!0,b("begin")),!k.loopBegan&&0<k.currentTime&&(k.loopBegan=!0,b("loopBegin")),a<=t&&0!==k.currentTime&&y(0),(r<=a&&k.currentTime!==e||!e)&&y(e),t<a&&a<r?(k.changeBegan||(k.changeBegan=!0,k.changeCompleted=!1,b("changeBegin")),b("change"),y(a)):k.changeBegan&&(k.changeCompleted=!0,k.changeBegan=!1,b("changeComplete")),k.currentTime=C(a,0,e),k.began&&b("update"),e<=n&&(f=0,k.remaining&&!0!==k.remaining&&k.remaining--,k.remaining?(s=l,b("loopComplete"),k.loopBegan=!1,"alternate"===k.direction&&g()):(k.paused=!0,k.completed||(k.completed=!0,b("loopComplete"),b("complete"),!k.passThrough&&"Promise"in window&&(p(),h(k)))))}return k.reset=function(){var n=k.direction;k.passThrough=!1,k.currentTime=0,k.progress=0,k.paused=!0,k.began=!1,k.loopBegan=!1,k.changeBegan=!1,k.completed=!1,k.changeCompleted=!1,k.reversePlayback=!1,k.reversed="reverse"===n,k.remaining=k.loop,c=k.children;for(var e=d=c.length;e--;)k.children[e].reset();(k.reversed&&!0!==k.loop||"alternate"===n&&1===k.loop)&&k.remaining++,y(k.reversed?k.duration:0)},k._onDocumentVisibility=o,k.set=function(n,e){return nn(n,e),k},k.tick=function(n){u(((l=n)+(f-(s=s||l)))*L.speed)},k.seek=function(n){u(m(n))},k.pause=function(){k.paused=!0,o()},k.play=function(){k.paused&&(k.completed&&k.reset(),k.paused=!1,S.push(k),o(),an())},k.reverse=function(){g(),k.completed=!k.reversed,o()},k.restart=function(){k.reset(),k.play()},k.remove=function(n){cn(A(n),k)},k.reset(),k.autoplay&&k.play(),k}function un(n,e){for(var t=e.length;t--;)h(n,e[t].animatable.target)&&e.splice(t,1)}function cn(n,e){var t=e.animations,r=e.children;un(n,t);for(var a=r.length;a--;){var o=r[a],u=o.animations;un(n,u),u.length||o.children.length||r.splice(a,1)}t.length||r.length||e.pause()}return L.version="3.2.1",L.speed=1,L.suspendWhenDocumentHidden=!0,L.running=S,L.remove=function(n){for(var e=A(n),t=S.length;t--;)cn(e,S[t])},L.get=T,L.set=nn,L.convertPx=y,L.path=function(n,e){var t=w.str(n)?a(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:Q(t),totalLength:G(t)*(r/100)}}},L.setDashoffset=function(n){var e=G(n);return n.setAttribute("stroke-dasharray",e),e},L.stagger=function(n,e){var i=(e=void 0===e?{}:e).direction||"normal",c=e.easing?P(e.easing):null,s=e.grid,f=e.axis,l=e.from||0,d="first"===l,p="center"===l,h="last"===l,g=w.arr(n),m=g?parseFloat(n[0]):parseFloat(n),v=g?parseFloat(n[1]):0,y=B(g?n[1]:n)||0,b=e.start||0+(g?m:0),M=[],x=0;return function(n,e,t){if(d&&(l=0),p&&(l=(t-1)/2),h&&(l=t-1),!M.length){for(var r,a,o,u=0;u<t;u++)s?(r=p?(s[0]-1)/2:l%s[0],a=p?(s[1]-1)/2:Math.floor(l/s[0]),r=r-u%s[0],a=a-Math.floor(u/s[0]),o=Math.sqrt(r*r+a*a),"x"===f&&(o=-r),M.push(o="y"===f?-a:o)):M.push(Math.abs(l-u)),x=Math.max.apply(Math,M);c&&(M=M.map(function(n){return c(n/x)*x})),"reverse"===i&&(M=M.map(function(n){return f?n<0?-1*n:-n:Math.abs(x-n)}))}return b+(g?(v-m)/x:m)*(Math.round(100*M[e])/100)+y}},L.timeline=function(u){var i=L(u=void 0===u?{}:u);return i.duration=0,i.add=function(n,e){var t=S.indexOf(i),r=i.children;function a(n){n.passThrough=!0}-1<t&&S.splice(t,1);for(var o=0;o<r.length;o++)a(r[o]);t=D(n,x(M,u)),t.targets=t.targets||u.targets,n=i.duration,t.autoplay=!1,t.direction=i.direction,t.timelineOffset=w.und(e)?n:E(e,n),a(i),i.seek(t.timelineOffset),e=L(t),a(e),r.push(e),n=tn(r,u);return i.delay=n.delay,i.endDelay=n.endDelay,i.duration=n.duration,i.seek(0),i.reset(),i.autoplay&&i.play(),i},i},L.easing=P,L.penner=s,L.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},L});
A
assets/js/app.js
@@ -0,0 +1,111 @@
+document.addEventListener('DOMContentLoaded', () => { + const settings = document.querySelector('.settings'); + if (settings) { + settings.removeAttribute('hidden'); + } + fitVids(); +}); + +/* Theme toggle */ +customElements.define( + 'theme-toggle', + class extends HTMLElement { + #theme = 'light'; + + constructor() { + super(); + this.#theme = localStorage.getItem('user-color-scheme') || 'light'; + } + + connectedCallback() { + this.querySelector('input').checked = this.#theme === 'dark'; + + this.querySelector('input').addEventListener('change', () => { + this.#theme = this.#theme === 'light' ? 'dark' : 'light'; + window.applyThemeSetting(this.#theme); + }); + } + }, +); + +/* Code wrap */ +customElements.define( + 'code-wrap', + class extends HTMLElement { + #wrapCode = true; + + constructor() { + super(); + const value = localStorage.getItem('wrap-code'); + this.#wrapCode = value !== 'false'; + } + + connectedCallback() { + this.querySelector('input').checked = this.#wrapCode; + document.body.classList.toggle('wrap-code', this.#wrapCode); + + this.querySelector('input').addEventListener('change', () => { + this.#wrapCode = !this.#wrapCode; + localStorage.setItem('wrap-code', this.#wrapCode); + document.body.classList.toggle('wrap-code', this.#wrapCode); + }); + } + }, +); + +/* Elevator button */ +customElements.define( + 'elevator-button', + class extends HTMLElement { + #a = null; + #target = null; + + constructor() { + super(); + this.addEventListener('click', () => { + const detailsEl = document.querySelector('.main-menu'); + detailsEl.open = true; + }); + + document.addEventListener('scroll', () => { + if (this.isTargetInViewport()) { + this.#a.classList.remove('active'); + return; + } + this.#a.classList.add('active'); + }); + } + + connectedCallback() { + this.#a = this.querySelector('a'); + this.#target = document.querySelector(this.#a.getAttribute('href')); + } + + isTargetInViewport() { + return isInViewport(this.#target); + } + }, +); + +// Determine if an element is in the visible viewport +function isInViewport(el, partiallyVisible = false) { + const { top, left, bottom, right } = el.getBoundingClientRect(); + const { innerHeight, innerWidth } = window; + return partiallyVisible + ? ((top > 0 && top < innerHeight) || + (bottom > 0 && bottom < innerHeight)) && + ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) + : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; +} + +function fitVids() { + const videoSources = ['iframe[src*="youtube"]', 'iframe[src*="vimeo"]']; + + document.querySelectorAll(videoSources.join(',')).forEach((video) => { + video.style.width = '100%'; + video.style.height = 'auto'; + video.style.aspectRatio = `${video.getAttribute( + 'width', + )} / ${video.getAttribute('height')}`; + }); +}
A
assets/js/hero.js
@@ -0,0 +1,196 @@
+// import './anime.min.js'; + +/** @type {import('animejs')} */ +const anime = window.anime; + +// IIFE for animation setup +(function () { + // ANCHOR - Mobile Hero Swap + + function swapHeroAtMobile(animationsToToggle = []) { + const hero = document.querySelector('.hero'); + const heroMobile = document.querySelector('.hero-mobile'); + const isMobile = window.matchMedia('(max-width: 550px)').matches; + if (isMobile) { + animationsToToggle.forEach((animation) => animation.pause()); + hero.style.display = 'none'; + heroMobile.style.display = 'block'; + return; + } + hero.style.display = 'block'; + heroMobile.style.display = 'none'; + animationsToToggle.forEach((animation) => animation.play()); + } + + // if user doesn't want animation, stop here + if (window.matchMedia('(prefers-reduced-motion)').matches) { + swapHeroAtMobile(); + window.addEventListener('resize', () => swapHeroAtMobile()); + return; + } + + // ANCHOR - Solar System Animation + + const solarSystem = document.getElementById('solar-system'); + + const solarSystemAnims = [...solarSystem.children].map((body) => + anime({ + targets: body.children[0], + translateY: () => [anime.random(-20, 10), anime.random(10, 30)], + duration: () => anime.random(3500, 5000), + loop: true, + direction: 'alternate', + easing: 'easeInOutSine', + }), + ); + + // ANCHOR - Sparkle Animation + + const sparkles = document.getElementById('sparkle'); + + const sparklesAnim = anime({ + targets: [...sparkles.children].reverse(), + opacity: [0, 1, 0], + duration: 4500, + loop: true, + easing: 'steps(1)', + delay: anime.stagger(500), + }); + + // ANCHOR - Rocket Animation + + const rocket = document.getElementById('rocket'); + const cloud = document.getElementById('cloud'); + const exhaust = document.getElementById('exhaust'); + const exhaustLeft = exhaust.children[0]; + const exhaustCenter = exhaust.children[1]; + const exhaustRight = exhaust.children[2]; + + rocket.addEventListener('click', () => { + rocket.style.transform = 'translateX(229.67px) translateY(206.93px)'; + exhaust.style.transform = 'translateX(6.88px) translateY(583.62px)'; + + anime({ + targets: cloud, + translateX: [5, -5], + loop: true, + direction: 'alternate', + easing: 'linear', + duration: 100, + }); + + anime({ + targets: [exhaustLeft, exhaustRight], + translateY: [-10, 10], + fill: ['#fff', '#ffffe6'], + loop: true, + direction: 'alternate', + easing: 'linear', + duration: 100, + }); + + anime({ + targets: [exhaustCenter], + translateY: [10, -10], + fill: ['#fff', '#ffffe6'], + loop: true, + direction: 'alternate', + easing: 'linear', + duration: 100, + }); + + const tl = anime.timeline({ + loop: 1, + direction: 'alternate', + }); + + tl.add({ + targets: cloud, + opacity: 1, + duration: 100, + easing: 'linear', + }); + + tl.add({ + targets: rocket, + translateY: -1100, + duration: 4000, + easing: 'easeInSine', + }); + + // delay + tl.add({ + duration: 1000, + }); + + tl.add( + { + targets: cloud, + opacity: 0, + duration: 400, + easing: 'linear', + }, + 2000, + ); + + tl.add( + { + targets: exhaust, + translateY: 680, + duration: 1, + easing: 'linear', + }, + 1000, + ); + }); + + // ANCHOR - Donut Animation + + const donutBefore = document.getElementById('donut-before'); + const donutAfter = document.getElementById('donut-after'); + + donutAfter.addEventListener('click', () => { + donutAfter.style.transformOrigin = '150px 200px'; + donutBefore.style.transformOrigin = '150px 200px'; + + donutAfter.style.transform = 'translate(667.33px, 1245.92px)'; + donutBefore.style.transform = 'translate(667.33px, 1245.92px)'; + + let fired = false; + + anime({ + targets: [donutAfter, donutBefore], + scale: [1, 1.2, 1], + easing: 'easeOutSine', + duration: 250, + update: (anim) => { + if (Math.round(anim.progress) >= 50 && !fired) { + donutAfter.style.opacity = + donutAfter.style.opacity === '1' ? '0' : '1'; + donutBefore.style.opacity = + donutAfter.style.opacity === '1' ? '0' : '1'; + fired = true; + } + }, + }); + }); + + // ANCHOR - Coffee Animation + + const coffeeBefore = document.getElementById('coffee-before'); + coffeeBefore.style.opacity = '1'; + const coffeeAfter = document.getElementById('coffee-after'); + coffeeAfter.style.opacity = '0'; + + coffeeAfter.addEventListener('click', () => { + coffeeBefore.style.opacity = coffeeBefore.style.opacity === '1' ? '0' : '1'; + coffeeAfter.style.opacity = coffeeAfter.style.opacity === '1' ? '0' : '1'; + }); + + // ANCHOR - Mobile Hero Swap on resize + + swapHeroAtMobile([...solarSystemAnims, sparklesAnim]); + window.addEventListener('resize', () => + swapHeroAtMobile([...solarSystemAnims, sparklesAnim]), + ); +})();
A
basico-de-css/index.html
@@ -0,0 +1,885 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Básico de CSS</title> + + <meta property="og:title" content="Básico de CSS" /> + <meta property="og:description" content="Aprenda a criar uma página limpa e bem desenhada do zero, escrevendo o seu próprio CSS." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/basico-de-css/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/basico-de-css/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/css-basics/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/css-basics/" + /> + + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <script> + /** + * A global function that the theme toggle can use to apply the current theme. + * @param {string | undefined} override - The setting that needs to be applied or undefined + * @returns {string} - The applied theme setting + */ + window.applyThemeSetting = function (override) { + const getSystemPreference = () => { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }; + const currentSetting = + override || + localStorage.getItem('user-color-scheme') || + getSystemPreference(); + const currentThemeValue = + document.documentElement.getAttribute('data-theme'); + if (currentSetting && currentSetting !== currentThemeValue) { + document.documentElement.setAttribute('data-theme', currentSetting); + localStorage.setItem('user-color-scheme', currentSetting); + } + return currentSetting; + }; + window.applyThemeSetting(); + </script> + + <link rel="stylesheet" href="/assets/css/style.css" /> + + <script defer src="/assets/js/app.js"></script> + + </head> + + <body class="chapter"> + + <header class="site-header"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + <?xml version="1.0" encoding="UTF-8"?> +<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML e pessoas</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="logo" transform="translate(10, 10)"> + <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect> + <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text> + <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line> + <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line> + <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line> + <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle> + <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle> + <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path> + <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path> + <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path> + </g> + <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line> + <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line> + <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line> + <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line> + <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line> + <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line> + <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle> + <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle> + <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path> + <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path> + <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path> + </g> + </g> + </g> +</svg> + </a> + </p> + </div> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="container"><details class="main-menu" id="main-menu"> + <summary>Menu</summary> + + <nav> + <p class="menu-heading"> + <strong>Capítulos</strong> + </p> + + <ul> + <li> + <a href="/introducao" + >Introdução</a + > + </li> + <li> + <a + href="/do-zero-a-internet-seu-primeiro-site" + + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" aria-current="page" + >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="basico-de-css" tabindex="-1"><a class="header-anchor" href="#basico-de-css">Básico de CSS</a></h1> +<p>Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita.</p> +<p>Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui.</p> +<h2 id="apresentando-os-planetas-do-sistema-solar" tabindex="-1"><a class="header-anchor" href="#apresentando-os-planetas-do-sistema-solar">Apresentando os planetas do sistema solar</a></h2> +<p>Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar.</p> +<p>Você pode ver o código-fonte no navegador, com o <a href="https://perma.cc/3WP3-R9XL">comando de ver o código-fonte</a>, ou conferindo o <a href="https://github.com/blakewatson/css-basics">código no GitHub</a>. E você pode <a href="https://planets.htmlforpeople.com/">ver o resultado final aqui</a>, se quiser uma espiada do que vai ficar.</p> +<p>Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei).</p> +<h2 id="ponto-de-partida" tabindex="-1"><a class="header-anchor" href="#ponto-de-partida">Ponto de partida</a></h2> +<p>Eu fiz um <code>index.html</code> e coloquei o código a seguir. Ele assume que você tem um <code>styles.css</code> no mesmo diretório. Também assume que você tem uma imagem, <code>PIA06193~large.jpg</code>, no mesmo diretório. Você pode pegar esta imagem no <a href="https://perma.cc/76GH-PWHQ">site da NASA</a>.</p> +<details> + <summary>Abra para ver o código HTML completo</summary> +<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 attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>Planets of the Solar System<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>styles.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>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>main</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>Planets of the Solar System<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>intro<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>caps<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Our solar system<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> is a vast and fascinating place, consisting of the Sun and the various celestial bodies that orbit it, including eight major planets. Each planet offers unique characteristics and features. In this article, we will explore the distinctive attributes of each planet, providing an overview of what makes them unique (and learn a little <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).<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>h2</span><span class="token punctuation">></span></span>Mercury<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> + Mercury is the closest planet to the Sun and the smallest planet in our + solar system. It has a very thin atmosphere and its surface is covered + with craters. + <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>h2</span><span class="token punctuation">></span></span>Venus<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> + Venus is the second planet from the Sun and is known for its thick, + toxic atmosphere and extreme surface temperatures. It's often called + Earth's "sister planet" because of their similar size and composition. + <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>h2</span><span class="token punctuation">></span></span>Earth<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> + Earth is the third planet from the Sun and the only known planet to + support life. It has a diverse climate and surface, with large bodies of + water, mountains, and forests. + <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>blockquote</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> + The Earth is a very small stage in a vast cosmic arena. Think of the + rivers of blood spilled by all those generals and emperors so that in + glory and triumph they could become the momentary masters of a + fraction of a dot. + <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>cite</span><span class="token punctuation">></span></span>— Carl Sagan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</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>Mars<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> + Mars, the fourth planet from the Sun, is often called the "Red Planet" + due to its reddish appearance. It has the largest volcano and canyon in + the solar system. + <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>h2</span><span class="token punctuation">></span></span>Jupiter<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> + Jupiter is the fifth planet from the Sun and the largest in the solar + system. It has a Great Red Spot, which is a giant storm, and dozens of + moons. + <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>h2</span><span class="token punctuation">></span></span>Saturn<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> + Saturn, the sixth planet from the Sun, is famous for its extensive ring + system. It's the second-largest planet in the solar system. + <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>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>PIA06193~large.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This grand mosaic consists of 126 images acquired in a tile-like fashion, covering one end of Saturn's rings to the other and the entire planet in between.<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>figcaption</span><span class="token punctuation">></span></span> + Source: <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>https://images.nasa.gov/details/PIA11141<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>https://images.nasa.gov/details/PIA11141<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>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</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>Uranus<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> + Uranus is the seventh planet from the Sun and has a unique blue-green + color due to methane in its atmosphere. It rotates on its side, making + it unique among the planets. + <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>h2</span><span class="token punctuation">></span></span>Neptune<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> + Neptune is the eighth and farthest known planet from the Sun in our + solar system. It's known for its deep blue color and strong winds, some + of the fastest in the solar system. + <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>h2</span><span class="token punctuation">></span></span>Additional Resources<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> + For more information about the planets, visit the + <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>https://solarsystem.nasa.gov/planets/overview/<span class="token punctuation">"</span></span> + <span class="token punctuation">></span></span>NASA Solar System Exploration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span> + <span class="token punctuation">></span></span> + website. + <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>h2</span><span class="token punctuation">></span></span>Other Major Bodies<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pluto<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ceres<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Haumea<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Makemake<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Eris<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ganymede<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Titan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Europa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Sample Code<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>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>function getPlanetInfo(planet) { + const planets = { + Mercury: 'The smallest planet and closest to the Sun.', + Venus: 'Known for its thick, toxic atmosphere.', + Earth: 'The only planet known to support life.', + Mars: 'The Red Planet with the largest volcano.', + Jupiter: 'The largest planet with a Great Red Spot.', + Saturn: 'Famous for its ring system.', + Uranus: 'Unique for its sideways rotation.', + Neptune: 'Known for its deep blue color and strong winds.' + }; + return planets[planet] || 'Planet not found'; + +}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</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> + A demo website for learning CSS. Part of <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>https://htmlforpeople.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML for People<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> by <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>https://blakewatson.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Check out the <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>https://github.com/blakewatson/css-basics<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>source code on GitHub<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>p</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> +</details> +<p>Como o arquivo <code>styles.css</code> está vazio, só temos os estilos padrão do navegador. É assim que fica:</p> +<p><img src="/assets/img/css-basics-01.webp" alt="Captura de tela do navegador renderizando a página "Planets of the Solar System". Cada planeta tem uma descrição breve, destacando características únicas. A página usa só os estilos padrão do navegador e está completamente sem estilo."></p> +<p>O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”).</p> +<p>Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que <em>eu</em> acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora.</p> +<h2 id="a-tag-style" tabindex="-1"><a class="header-anchor" href="#a-tag-style">A tag style</a></h2> +<p>Podemos escrever CSS direto no arquivo <code>index.html</code> usando uma tag HTML especial, <code><style></code>. Podemos colocar a tag <code><style></code> dentro da seção <code><head></code> do arquivo. Assim:</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>title</span><span class="token punctuation">></span></span>My website<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>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + CSS code goes here + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</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>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> +<p>Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag <code><style></code> em cada página para ter os mesmos estilos em todas. Em vez disso, é comum colocar todo o CSS num arquivo separado e então <em>ligar</em> esse arquivo a cada página com uma tag <code><link></code> na seção <code><head></code> do site.</p> +<pre class="language-html"><code class="language-html"><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>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<h2 id="primeiros-passos-para-melhorar-a-pagina" tabindex="-1"><a class="header-anchor" href="#primeiros-passos-para-melhorar-a-pagina">Primeiros passos para melhorar a página</a></h2> +<p>Se você ainda não fez, crie um arquivo <code>style.css</code>. É aqui que vamos escrever todo o nosso CSS personalizado. Se você não estiver usando o meu HTML de partida, vai precisar adicionar a tag <code><link></code> na seção <code><head></code> da página para ligar os estilos à página, como descrito acima.</p> +<p>Dá para conquistar ganhos grandes logo de cara, com só algumas linhas de CSS. Por exemplo, um problema é que a página fica larga demais numa janela de navegador no desktop. Linhas longas de texto são difíceis de ler. Vamos corrigir isso dando à página uma largura máxima. Segundo o <a href="https://practicaltypography.com/line-length.html">Butterick’s Practical Typography</a>, devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 <em>caracteres</em> de largura.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Esta <em>regra</em> CSS mira o elemento <code><main></code> da nossa página e instrui ele a nunca passar da largura que declaramos.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Beleza, <a href="https://perma.cc/66QM-Q2AF">não é estritamente 65 caracteres de largura</a>. A unidade <code>ch</code> no CSS se baseia na largura do caractere <code>0</code> (zero) na fonte dada. Então, na verdade, estamos dizendo: “não deixe a largura da página passar de 65 caracteres <code>0</code>”.</p> +</aside> +<p>Ignorando a imagem gigante de Saturno — com a qual vamos lidar daqui a pouco — já ficou bem melhor. Mas o gosto moderno prefere uma página centralizada, então vamos fazer isso enquanto estamos nisso.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Em idiomas da esquerda para a direita, como o português, <code>margin-inline</code> é a margem horizontal, ou esquerda e direita. Ao definir como <code>auto</code>, estamos dizendo: “não me importa quão larga seja a margem esquerda e a direita, só deixe iguais”. O navegador sabe quão larga queremos a página, então calcula a margem necessária para deixar igual dos dois lados, centralizando a página.</p> +<p>Também temos um elemento <code><footer></code> que vive fora do elemento <code><main></code>, então vamos estilizá-lo à parte, com a mesma largura e margem.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>O <code>max-width</code> pode ser declarado como uma porcentagem do elemento que contém. Definir como 100% significa: “não deixe elementos de imagem ficarem mais largos do que os seus contêineres”.</p> +<p>E agora a nossa página está bem mais agradável.</p> +<p><img src="/assets/img/css-basics-02.webp" alt="A mesma imagem de antes, mas agora a página está centralizada e limitada a uma largura que torna a leitura mais fácil."></p> +<h2 id="anatomia-de-uma-regra-css" tabindex="-1"><a class="header-anchor" href="#anatomia-de-uma-regra-css">Anatomia de uma regra CSS</a></h2> +<p>Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves (<code>{}</code>). Chama-se <em>seletor</em>, porque <em>seleciona</em> elementos da página para mudar.</p> +<p>A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa <em>propriedade</em> e num <em>valor</em>. Neste caso, há uma declaração. A propriedade é <code>max-width</code>, e o valor é <code>100%</code>.</p> +<h2 id="tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos" tabindex="-1"><a class="header-anchor" href="#tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos">Tamanho do texto, altura da linha e espaço entre elementos</a></h2> +<p>O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento <code>html</code> (ou seja, o documento inteiro) e definir <code>font-size</code> e <code>line-height</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, <code>px</code>. Estou descobrindo agora que <code>1px</code> equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender.</p> +<p>Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco.</p> +<p>Vou definir o <code>line-height</code> usando um valor sem unidade de <code>1.45</code>. É um número que fica bonito. Consulte o <a href="https://practicaltypography.com/line-spacing.html">Butterick’s Practical Typography</a> e o seu próprio olho para achar uma boa altura de linha para a sua fonte específica. Estou usando um número sem unidade em vez de algo como <code>px</code> por causa de <a href="https://perma.cc/7YVZ-53XL">como os elementos filhos herdam o valor</a>, mas você não precisa se preocupar demais com isso agora.</p> +<p>Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento <code><main></code> usando um seletor universal, o asterisco (<code>*</code>).</p> +<pre class="language-css"><code class="language-css"><span class="token selector">main *</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token comment">/* or we could use the shortcut syntax like this */</span> + <span class="token property">margin-block</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Um seletor pode ser uma cadeia de coisas. Por exemplo, <code>main p</code> seleciona todo elemento <code><p></code> <em>dentro</em> do elemento <code><main></code>. Mas eu quero mirar <em>tudo</em> no elemento <code><main></code>, então uso o asterisco.</p> +<p>Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com <code>margin-inline</code>, que controla o espaço horizontal ao redor dos elementos, <code>margin-block</code> controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como <code>0</code> e a margem abaixo deles como <code>1rem</code>. O <code>rem</code> é uma unidade igual ao tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent (o elemento <code><html></code>). Como eu defini o tamanho da fonte raiz como <code>20px</code>, é isso que o valor de <code>1rem</code> se torna.</p> +<p>O legal da unidade <code>rem</code> é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa.</p> +<p>O nosso texto está bonito.</p> +<p><img src="/assets/img/css-basics-03.webp" alt="A mesma imagem de antes, mas agora o texto está maior, com uma altura de linha mais generosa."></p> +<p>Nada contra o Times New Roman, mas ele tem uma cara muito… <em>padrão</em>. Dá para fazer melhor.</p> +<h2 id="instalar-webfonts" tabindex="-1"><a class="header-anchor" href="#instalar-webfonts">Instalar webfonts</a></h2> +<p>Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas <a href="https://practicaltypography.com/system-fonts.html">fontes de sistema comuns</a> e <a href="https://perma.cc/9BMG-EMTU">fontes padrão comuns</a>, temos outra opção para personalizar a fonte. <em>Fontes da web</em> (<em>web fonts</em>) são aquelas disponibilizadas ao serem baixadas junto com o resto do seu site. Além do documento, dos arquivos CSS, dos arquivos JavaScript, das imagens e por aí vai, fontes personalizadas também podem ser baixadas.</p> +<p>Fontes da web precisam estar num formato específico, e ser <em>instaladas</em> de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como <a href="http://fonts.google.com/">Google Fonts</a> (grátis) ou <a href="https://fonts.adobe.com">Adobe Fonts</a> (pago). Há <a href="https://typography.com/webfonts">várias</a> <a href="https://typenetwork.com/">opções</a>, inclusive hospedar as fontes no seu próprio servidor, ao lado dos outros arquivos do site. Só garanta que a licença da fonte cubra isso.</p> +<p>Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até <a href="http://fonts.google.com">fonts.google.com</a>. Busque “Oswald” e selecione nos resultados. Depois clique em <em>Get Font</em>.</p> +<p><img src="/assets/img/css-basics-04.webp" alt="Captura de tela do site Google Fonts mostrando a fonte "Oswald". O botão "Get font" está destacado com uma seta vermelha. O texto de amostra abaixo diz: "Whereas disregard and contempt for human rights have resulted." O menu do site aparece à esquerda."></p> +<p>Depois de selecioná-la, não baixe nada ainda. Busque “source sans”. Source Sans 3 é a versão disponível no momento em que eu escrevo. Selecione e clique em <em>Get Font</em>.</p> +<p>Quando as duas fontes estiverem selecionadas, clique em <em>Get embed code</em>. Estamos procurando o bloco rotulado <em>Embed code in the <code><head></code> of your html</em>.</p> +<p><img src="/assets/img/css-basics-05.webp" alt="Captura de tela da interface do Google Fonts mostrando os detalhes da fonte "Source Sans 3". Há um botão "Copy code" dentro de uma caixa vermelha destacada, que fornece o código de incorporação para HTML. A interface inclui opções de estilo da fonte e instruções de uso."></p> +<p>Copie e cole o código de incorporação na seção <code><head></code> do seu site.</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>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>Planets of the Solar System<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>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com<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>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.gstatic.com<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</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">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap<span class="token punctuation">"</span></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 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>styles.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>head</span><span class="token punctuation">></span></span></code></pre> +<p>Adicione uma declaração <code>font-family</code> ao bloco <code>html</code> para conferir se está funcionando.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Isso vai definir a fonte para o documento inteiro. O navegador primeiro tenta Source Sans 3. Se, por algum motivo, essa fonte não estiver disponível (se, por exemplo, o Google Fonts estiver fora do ar), então <code>sans-serif</code> instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na <em>pilha de fontes</em>. É só separar com vírgulas, como você vê acima.</p> +<p>Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito.</p> +<h2 id="configurar-cores-e-variaveis" tabindex="-1"><a class="header-anchor" href="#configurar-cores-e-variaveis">Configurar cores e variáveis</a></h2> +<p>Se você leu o capítulo <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>, vai lembrar que ele usava variáveis CSS para controlar cor e fontes. Vamos fazer isso aqui também. Isso vai facilitar personalizar depois (o que você pode querer fazer se não gostar das minhas escolhas).</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--text-color</span><span class="token punctuation">:</span> #303036<span class="token punctuation">;</span> + <span class="token property">--muted-text-color</span><span class="token punctuation">:</span> #5e5e67<span class="token punctuation">;</span> + <span class="token property">--heading-color</span><span class="token punctuation">:</span> #cd2807<span class="token punctuation">;</span> + <span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span> + <span class="token property">--background-color</span><span class="token punctuation">:</span> #fffdf7<span class="token punctuation">;</span> + + <span class="token property">--heading-font</span><span class="token punctuation">:</span> <span class="token string">'Oswald'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">--body-font</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Você pode nomear as variáveis como quiser, desde que comecem com <code>--</code>. Aqui, estou definindo várias cores e algumas fontes.</p> +<p>Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--body-font<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Use a função <code>var</code> para usar as variáveis que criamos.</p> +<h2 id="estilos-dos-titulos" tabindex="-1"><a class="header-anchor" href="#estilos-dos-titulos">Estilos dos títulos</a></h2> +<p>Estou usando um <code><h1></code> para o título da página e elementos <code><h2></code> para os subtítulos. Vamos mirar esses e aplicar alguns estilos.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span> + <span class="token property">border-block-start</span><span class="token punctuation">:</span> 10px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">h2</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos <code><h2></code> e um bom tanto de espaço extra acima do <code><h1></code>.</p> +<p>Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo <code>font-weight</code> como <code>normal</code> em vez de <code>bold</code>, que é o padrão dos títulos.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Estamos usando <a href="https://perma.cc/A75H-V4HJ">fontes variáveis</a>, então temos mais opções de peso do que <code>normal</code> ou <code>bold</code>. Experimente 300, 500, 900 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">e por aí vai</a>.</p> +</aside> +<p>Para o <code><h1></code>, estou mantendo o <code>font-size</code> padrão. Para o <code><h2></code>, estou definindo o <code>font-size</code> como <code>1.2em</code>, ou seja, 1,2 vezes o <em>tamanho de fonte atual</em>.</p> +<p>Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente.</p> +<p><img src="/assets/img/css-basics-06.webp" alt="A página intitulada "Planets of the Solar System" recebeu uma atualização de design. A fonte foi mudada, e as cores da fonte foram atualizadas. O fundo foi renovado para combinar com essas mudanças. O cabeçalho agora tem uma borda no topo. A página parece mais polida e desenhada."></p> +<p>Quase poderíamos parar aqui. Não tem nada de tão terrível acontecendo. Mas vamos estilizar alguns dos elementos que ainda não cobrimos.</p> +<h2 id="links" tabindex="-1"><a class="header-anchor" href="#links">Links</a></h2> +<p>Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags <code><a></code>. Um aponta para a fonte da imagem de Saturno que eu usei, e o outro para o site NASA Solar System Exploration. O resto está no rodapé do site.</p> +<p>Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token comment">/* ... other code ... */</span> + + <span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span> + + <span class="token comment">/* ... other code ... */</span> +<span class="token punctuation">}</span></code></pre> +<p>Vou usar isso para definir a cor de todos os elementos <code><a></code>, assim:</p> +<pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--link-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Não é uma regra rígida, mas a maioria das pessoas associa texto azul sublinhado a um link clicável. Eu decidi não me afastar demais disso. Mas eu gostaria de adicionar um efeitozinho em que o sublinhado some quando eu passo o mouse por cima.</p> +<p>Vamos usar o seletor de <em>pseudo-classe</em> <code>:hover</code> para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (<code>:disabled</code>) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">a:hover</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>A propriedade que queremos é <code>text-decoration</code>. Por padrão, os links têm um <code>text-decoration</code> de <code>underline</code>. Você tem <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration">algumas opções</a> aqui, mas eu vou de <code>none</code>.</p> +<p>Isso nos dá uma interação visual sutil com o link.</p> +<video controls> + <source src="/assets/video/css-basics-1.mp4" type="video/mp4"> + Seu navegador não tem suporte à tag de vídeo. O vídeo mostra uma gravação da tela em que eu passo o mouse sobre o link. O sublinhado some e volta conforme eu faço isso. +</video> +<h2 id="abreviacoes" tabindex="-1"><a class="header-anchor" href="#abreviacoes">Abreviações</a></h2> +<p>Falando de efeitos ao passar o mouse, há um que você pode não ter notado. Se olhar o HTML no primeiro parágrafo, vai encontrar a seguinte frase.</p> +<pre class="language-html"><code class="language-html">In this article, we will explore the distinctive attributes of each planet, +providing an overview of what makes them unique (and learn a little +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).</code></pre> +<p>A tag <code><abbr></code> ajuda quem visita a saber o que certas abreviações ou siglas significam. Quando você passa o mouse sobre o termo CSS no documento, recebe uma dica útil mostrando o significado. Você coloca a abreviação dentro das tags e usa o atributo <code>title</code> para o texto completo.</p> +<p>Vamos dar um <code>text-decoration</code> para sugerir que dá para interagir com isso.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">abbr</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> + <span class="token property">text-decoration-style</span><span class="token punctuation">:</span> dotted<span class="token punctuation">;</span> + <span class="token property">text-decoration-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">text-decoration-thickness</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Estamos dando um sublinhado, como os links têm por padrão. Mas vamos deixar na cor vermelha que estamos usando para títulos e usar o estilo <code>dotted</code>, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver.</p> +<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2> +<p>Eu seria irresponsável se não citasse Carl Sagan num artigo sobre o sistema solar — mesmo que isto seja só uma demo técnica. Então incluí um trecho épico dele na seção sobre a Terra.</p> +<p>Já está servindo como está — já vem recuado e parece uma citação. Mas dá para melhorar, com certeza. Vou te mostrar o código e depois explicar o que estou fazendo.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">blockquote</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> 1.5rem 0<span class="token punctuation">;</span> + <span class="token property">border-inline-start</span><span class="token punctuation">:</span> 4px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">padding-inline</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Eu quero controlar o recuo e deixá-lo mais consistente, baseando-o no tamanho da fonte do documento. Em idiomas da esquerda para a direita, <code>margin-inline</code> controla as margens esquerda e direita. Estou fornecendo dois valores, <code>1.5rem</code> e <code>0</code>, para especificar as margens esquerda e direita, respectivamente. A margem esquerda vai ser 1,5 vezes o tamanho da fonte do documento, e vamos remover a margem direita por completo.</p> +<p>Um estilo talvez comum demais de um elemento <code><blockquote></code> é dar a ele uma borda esquerda grossa que usa um destaque. Não vejo motivo para ser inconformista aqui, então vou colocar uma borda esquerda usando <code>border-inline-start</code>. Lembre-se: <code>inline</code> se refere ao eixo horizontal. E <code>start</code> significa o primeiro (que é a <em>esquerda</em> para mim; <code>end</code> seria o da direita).</p> +<p>Vou definir como uma linha sólida de <code>4px</code> de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta.</p> +<p>Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca.</p> +<p><img src="/assets/img/css-basics-08.webp" alt="Imagem com texto que descreve brevemente a Terra, incluindo uma citação em bloco mal estilizada de Carl Sagan, em que a borda esquerda encosta no texto."></p> +<p>Felizmente, podemos corrigir isso adicionando um pouco de <code>padding</code>. Vou te dar uma introdução rápida ao <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model"><em>modelo de caixa</em></a>. Todo elemento tem espaço do lado de fora (margem), espaço ao redor do lado de dentro (preenchimento) e uma camada opcional que separa os dois (a borda).</p> +<p>Com esse conhecimento, vamos adicionar algum espaço <em>dentro</em> do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo <code>padding-inline</code> com só um valor, <code>1rem</code>, que equivale ao tamanho da fonte do documento.</p> +<p>Por fim, vou arredondar o efeito deixando o tamanho da fonte um pouco menor e a cor do texto um pouco mais clara. O resultado final é uma citação em bloco bonita, com um toque de estilo.</p> +<p><img src="/assets/img/css-basics-07.webp" alt="A mesma imagem da citação em bloco de antes, mas o espaço entre a borda e o texto foi aumentado, o tamanho do texto foi reduzido, e a cor do texto ficou um cinza sutil."></p> +<p>Eu desenhei este estilo de citação para caber na maioria dos casos, mas você poderia ir em outra direção — chamadas curtas com texto grande e itálico, por exemplo.</p> +<h2 id="listas" tabindex="-1"><a class="header-anchor" href="#listas">Listas</a></h2> +<p>Vamos resolver rápido a lista com marcadores de Plutão e companhia. Vamos dar à lista um pouco de recuo, como é comum em listas com marcadores. Lembre-se: o HTML também tem listas numeradas. Não estamos usando uma nesta página (se você estiver usando a minha marcação HTML), mas podemos escrever o estilo para os dois tipos de lista.</p> +<p>Você já sabe que o seletor mira os elementos que queremos estilizar. Mas você também pode ter vários seletores! Podemos mirar o elemento <code><ul></code> e o elemento <code><ol></code> e dar o mesmo recuo aos dois, fazendo o seguinte.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">ul, ol</span> <span class="token punctuation">{</span> + <span class="token property">padding-inline-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma <em>lista de seletores</em>. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a <em>listas não ordenadas</em> (com marcadores) e <em>listas ordenadas</em> (numeradas).</p> +<p>Vamos também ajustar o espaço entre os <em>itens de lista</em> individuais (elementos <code><li></code>). Eu gosto de usar a metade do que uso para parágrafos, porque quero os itens de lista mais juntos do que os parágrafos, mas ainda com um pouco de espaço entre eles. Como usei <code>1rem</code> para espaçar os parágrafos e outros elementos, vou usar a metade disso, <code>0.5rem</code>, para a margem de baixo.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span> + <span class="token property">margin-block</span><span class="token punctuation">:</span> 0 0.5rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Lembre-se: <code>margin-block</code> é a margem de cima e de baixo num idioma da esquerda para a direita, como o português. Podemos definir os dois valores ao mesmo tempo. O trecho acima equivale a:</p> +<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Isso significa que, em idiomas da esquerda para a direita, a margem acima do item de lista é zero, e a margem abaixo é uns dez pixels (<code>0.5rem</code> significa 0,5 vezes o tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent, que definimos como <code>20px</code>).</p> +<p>O espaçamento deve estar bem bonito agora, mas vamos fazer uma coisa que deixaria designers web dos anos 2000 com inveja. Vamos mudar a cor dos marcadores. Isso era complicado, mas agora é moleza.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">li::marker</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>O pedaço <code>::marker</code> se chama <em>pseudo-elemento</em>, porque representa um pedaço de um elemento HTML. O <code>::marker</code> é uma parte do <em>item de lista</em>, ou elemento <code><li></code>. Ele contém o marcador (ou o número) do item. Podemos mirá-lo com o nosso seletor e mudar a cor para o vermelho dos títulos.</p> +<p><img src="/assets/img/css-basics-09.webp" alt="Captura de tela da lista com marcadores intitulada "Other Major Bodies", com entradas para Pluto, Ceres, Haumea, Makemake, Eris, Ganymede, Titan e Europa. Há mais espaço entre os itens, o que facilita a leitura. Os marcadores estão vermelhos, enquanto o texto está na mesma cor escura."></p> +<p>Ficou bonito!</p> +<h2 id="texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#texto-pre-formatado">Texto pré-formatado</a></h2> +<p>Na maior parte do tempo, nos nossos documentos HTML, não nos importamos em preservar o espaçamento exato de tudo. Na verdade, isso seria contraproducente, porque em geral recuamos o HTML ou incluímos linhas vazias para deixar o código mais legível. Mas, às vezes, queremos mostrar o texto exatamente como está formatado. Exemplos incluem arte ASCII e código de computador.</p> +<p>Em geral, mostramos esse tipo de texto com a tag <code><pre></code> no HTML. Ela preserva todo o espaçamento e usa uma fonte monoespaçada para deixar tudo consistente. Muitas vezes é combinada com a tag <code><code></code> para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo.</p> +<p>Vamos estilizar a tag <code><pre></code> assim.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #edebe7<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Queremos que o código apareça como se estivesse dentro de um contêiner, então vamos dar preenchimento o tempo todo ao redor. Em seguida, vamos definir uma cor de fundo clara, só o bastante visível contra o fundo da página, mas não tão escura a ponto de prejudicar o contraste do texto. Caixas de canto vivo parecem um pouco antinaturais, então vamos adicionar um <code>border-radius</code> pequeno, que é só um termo chique para quanto queremos arredondar os cantos.</p> +<p>Poderíamos ter linhas longas de código, então precisamos especificar o que deve acontecer se uma linha transbordar pela lateral do contêiner. Neste caso, vamos definir como <code>auto</code>, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar.</p> +<p>Por fim, código monoespaçado pode parecer grande, então vamos baixar o tom dizendo que deve ter três quartos do tamanho do texto padrão.</p> +<p><img src="/assets/img/css-basics-10.webp" alt="O exemplo de uma função JavaScript chamada recebeu um contêiner de fundo sutil e arredondado, e é exibido numa fonte monoespaçada. Esta função recebe o nome de um planeta como entrada e devolve informações sobre o planeta a partir de um objeto 'planets' definido, que guarda fatos únicos sobre cada planeta."></p> +<h2 id="melhorar-o-estilo-das-imagens" tabindex="-1"><a class="header-anchor" href="#melhorar-o-estilo-das-imagens">Melhorar o estilo das imagens</a></h2> +<p>Aqui vai como a imagem de Saturno está agora.</p> +<p><img src="/assets/img/css-basics-11.webp" alt="A imagem de Saturno, o sexto planeta a partir do Sol, mostra o seu extenso sistema de anéis. O planeta aparece com uma porção na sombra e os anéis parcialmente iluminados. O texto acima da imagem informa a posição e o tamanho de Saturno no sistema solar. A imagem é mais estreita do que a coluna de texto e, por padrão, é retangular, com cantos vivos."></p> +<p>Não está tão ruim, mas parece que a tag <code><figure></code> está adicionando margem dos dois lados. Eu quero que a imagem ocupe a largura toda. Também quero que a legenda da foto fique menor.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">figure</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">figure img</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">figcaption</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Vamos remover a margem em linha do <code><figure></code>. Depois vamos mirar imagens que estão dentro de figures (só temos uma, mas isso pode ser um padrão legal se adicionarmos mais) e fazer o seguinte:</p> +<ul> +<li>Definir <code>display</code> como <code>block</code>. Imagens vêm como <code>inline</code> por padrão, mas o comportamento de <code>block</code> funciona mais como você esperaria de uma imagem assim.</li> +<li>Definir a margem em linha como <code>auto</code>, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada.</li> +<li>Definir <code>border-radius</code> como <code>4px</code> arredonda os cantos da imagem só um pouquinho.</li> +<li>Por fim, vamos reduzir a margem acima da legenda e reduzir o <code>font-size</code> para 80% do tamanho da fonte do documento.</li> +</ul> +<p><img src="/assets/img/css-basics-12.webp" alt="A mesma imagem de Saturno de antes, só que a margem foi removida e os cantos da imagem foram arredondados."></p> +<p>Ficou chique! Ajustes pequenos podem fazer uma diferença grande.</p> +<h2 id="o-rodape" tabindex="-1"><a class="header-anchor" href="#o-rodape">O rodapé</a></h2> +<p>Já temos alguns estilos de rodapé — antes, definimos a largura e garantimos que ficasse centralizado. Mas podemos melhorar dando a ele espaço para respirar, uma bordinha no topo, texto menor e uma cor de texto mais suave.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">padding-block</span><span class="token punctuation">:</span> 1.5rem 3rem<span class="token punctuation">;</span> + <span class="token property">border-block-start</span><span class="token punctuation">:</span> 2px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com <code>margin-block-start</code>. Estamos adicionando uma borda de <code>2px</code> de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando <code>padding-block</code>, estamos adicionando algum espaço entre o texto e a borda, e um bom pedaço de preenchimento embaixo para dar folga na parte de baixo da página. Por fim, vamos usar a mesma cor de texto suave que usamos na citação em bloco.</p> +<p>Como já adicionamos a margem que queremos no próprio elemento <code><footer></code>, vamos remover toda a margem das coisas <em>dentro</em> do rodapé. Vamos usar o nosso amigo, o seletor universal (<code>*</code>).</p> +<pre class="language-css"><code class="language-css"><span class="token selector">footer *</span> <span class="token punctuation">{</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Este seletor vai mirar tudo o que está <em>dentro</em> da tag <code><footer></code>. Vamos definir <code>margin</code> como <code>0</code> e reduzir o texto para 90% do tamanho da fonte do documento.</p> +<h2 id="diversao-tipografica-extra" tabindex="-1"><a class="header-anchor" href="#diversao-tipografica-extra">Diversão tipográfica extra</a></h2> +<p>Poderíamos parar aqui de vez, <em>mas</em>… vamos nos divertir um pouco.</p> +<p>Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe <code>intro</code>. Vamos dar um pouco de ênfase deixando o texto um pouco maior.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">.intro</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe <code>intro</code>, neste caso). Isso vai deixar o <code>font-size</code> maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo.</p> +<p>Beleza, mas agora vamos ficar <em>bem extra</em>. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag <code><span></code> com uma classe <code>caps</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">.caps</span> <span class="token punctuation">{</span> + <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.78em<span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span> + <span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Isso vai nos dar aquele efeito chique de livro, em que as primeiras palavras ficam em versalete. Em geral, você ia querer usar uma fonte com <a href="https://practicaltypography.com/small-caps.html">versalete de verdade</a>, mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável.</p> +<p>A declaração <code>text-transform</code> vai deixar todas as letras em maiúsculas. É melhor fazer isso com CSS do que digitar tudo em maiúsculas na mão, porque é mais uma coisa de estilo. Para o <code>font-size</code>, eu só fui mexendo até ficar com a cara certa. No fundo, eu queria que as maiúsculas tivessem a mesma altura das letras minúsculas do texto de introdução (ou seja, a <a href="https://en.wikipedia.org/wiki/X-height">altura-x</a>).</p> +<p>Para ajudar no equilíbrio, estou aumentando um pouco o <code>font-weight</code>. Além de valores como <code>normal</code> e <code>bold</code>, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta.</p> +<p>Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade <code>em</code>, que se baseia no <code>font-size</code> atual. Isso é útil porque, se você mudar o <code>font-size</code> no futuro, o espaçamento muda na mesma proporção.</p> +<p><img src="/assets/img/css-basics-13.webp" alt="Captura de tela do título Planets of the Solar System. O texto abaixo descreve o sistema solar. O tamanho do texto foi aumentado, e a primeira frase do parágrafo foi renderizada em versalete."></p> +<p>E aí está. Dos começos humildes como uma página <em>sem estilo</em>, com um charme simples, agora está com cara de artigo de autoridade.</p> +<h2 id="potencial-sem-limite" tabindex="-1"><a class="header-anchor" href="#potencial-sem-limite">Potencial sem limite</a></h2> +<p>Estes são só os estilos que eu escolhi com base nas minhas preferências. Você poderia ir em todo tipo de direção diferente. Não estou necessariamente tentando empurrar um estilo para você — embora eu tenha te apontado para alguns princípios tipográficos geralmente bons de seguir. Eu só queria te dar um gostinho de como você pode aplicar os seus próprios estilos a uma página.</p> +<p>A mágica do CSS é que você poderia pegar o meu HTML exato — sem mudanças — e criar um design completamente diferente a partir do mesmo ponto de partida. Essa é a premissa de um experimento web chamado <a href="https://csszengarden.com/">CSS Zen Garden</a>, em que as pessoas enviam designs com base na mesma marcação.</p> +<figure> + <img src="/assets/img/css-basics-14.webp" alt="Captura de tela de duas páginas do projeto CSS Zen Garden. A página da esquerda tem um design colorido e vibrante, com uma paleta rosa, roxa e laranja. A da direita tem um design minimalista e limpo, com fundo cinza-claro e texto azul. As duas mostram o que o CSS consegue fazer no design."> + <figcaption>Estes dois designs compartilham o mesmo código HTML. <a href="https://www.youtube.com/watch?v=Iloby6ZXRjI">São a mesma foto.</a></figcaption> +</figure> +<p>Espero que este capítulo bônus tenha te dado um gostinho do que é possível com CSS. Assim como com HTML, até um pouco de conhecimento de CSS já vale — uma simples mudança de fonte e cor, por exemplo, pode fazer uma diferença enorme. Eu te animo a continuar explorando CSS se você quiser criar designs personalizados. É uma habilidade recompensadora de ter.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> + + + + + + <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="/html-reutilizavel-com-php/">HTML reutilizável com PHP</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/personalizar-o-simple-css/">Personalizar o Simple.css</a> + </p> + + </nav> + + + </main> + + + + + <elevator-button title="Ir para o menu"> + <a href="#main-menu"> + <span class="sr-only">Ir para o menu</span> + </a> + </elevator-button> + + <div class="sticky-footer" style="margin-block-start: auto"> + <div class="promo"> + <div class="container"> + <p class="promo-title">Gostou do livro?</p> + <div class="stack"> + <p> + <em>HTML e Pessoas</em> é a tradução de um trabalho feito com + carinho. Se puder, considere enviar uma doação no Ko-fi para o + autor original, Blake Watson, e compartilhar o livro nas redes + sociais. + </p> + + <p> + <a href="https://ko-fi.com/blakewatson" class="button" + >Doar no Ko-fi</a + > + </p> + + <p>Confira outros projetos do Blake:</p> + <ul> + <li> + <a href="https://afinestart.me" + >Uma extensão minimalista de nova aba</a + > + </li> + <li> + <a href="https://synthwave.live/">Um site de mix synthwave</a> + </li> + <li> + <a href="https://minimalcharactersheet.com/" + >Uma ficha minimalista para D&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>
A
conquista-desbloqueada-hipertextista/index.html
@@ -0,0 +1,484 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Conquista desbloqueada: Hipertextista</title> + + <meta property="og:title" content="Conquista desbloqueada: Hipertextista" /> + <meta property="og:description" content="Recapitulação do que o livro cobriu, com links para recursos externos e documentação sobre desenvolvimento e design web." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/conquista-desbloqueada-hipertextista/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/conquista-desbloqueada-hipertextista/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/achievement-unlocked-hypertexter/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/achievement-unlocked-hypertexter/" + /> + + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <script> + /** + * A global function that the theme toggle can use to apply the current theme. + * @param {string | undefined} override - The setting that needs to be applied or undefined + * @returns {string} - The applied theme setting + */ + window.applyThemeSetting = function (override) { + const getSystemPreference = () => { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }; + const currentSetting = + override || + localStorage.getItem('user-color-scheme') || + getSystemPreference(); + const currentThemeValue = + document.documentElement.getAttribute('data-theme'); + if (currentSetting && currentSetting !== currentThemeValue) { + document.documentElement.setAttribute('data-theme', currentSetting); + localStorage.setItem('user-color-scheme', currentSetting); + } + return currentSetting; + }; + window.applyThemeSetting(); + </script> + + <link rel="stylesheet" href="/assets/css/style.css" /> + + <script defer src="/assets/js/app.js"></script> + + </head> + + <body class="chapter"> + + <header class="site-header"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + <?xml version="1.0" encoding="UTF-8"?> +<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML e pessoas</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="logo" transform="translate(10, 10)"> + <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect> + <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text> + <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line> + <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line> + <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line> + <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle> + <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle> + <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path> + <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path> + <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path> + </g> + <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line> + <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line> + <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line> + <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line> + <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line> + <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line> + <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle> + <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle> + <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path> + <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path> + <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path> + </g> + </g> + </g> +</svg> + </a> + </p> + </div> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="container"><details class="main-menu" id="main-menu"> + <summary>Menu</summary> + + <nav> + <p class="menu-heading"> + <strong>Capítulos</strong> + </p> + + <ul> + <li> + <a href="/introducao" + >Introdução</a + > + </li> + <li> + <a + href="/do-zero-a-internet-seu-primeiro-site" + + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + aria-current="page" + >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="conquista-desbloqueada-hipertextista" tabindex="-1"><a class="header-anchor" href="#conquista-desbloqueada-hipertextista">Conquista desbloqueada: Hipertextista</a></h1> +<p>Parabéns — você fez um site de verdade usando HTML! O que começou como uma frase ou duas no Bloco de Notas virou um site completo, com várias páginas. Você aprendeu um monte de coisa:</p> +<ul> +<li>Criar páginas HTML</li> +<li>Estruturar conteúdo com títulos e seções</li> +<li>Ligar uma página à outra</li> +<li>Formatar texto</li> +<li>Citar texto com citações em bloco</li> +<li>Mostrar dados com tabelas</li> +<li>Esconder conteúdo atrás de um resumo clicável</li> +<li>Criar conteúdo secundário com asides</li> +<li>Incorporar imagens</li> +<li>Incorporar vídeo</li> +<li>Usar web components de terceiros</li> +<li>Colocar um site na internet</li> +<li>…e ainda mais!</li> +</ul> +<p>Espero que você se sinta capaz de criar seus próprios sites. Mas, mesmo que você não vá fazer sites do zero, conhecer HTML ajuda. Muitos sistemas de gerenciamento de conteúdo deixam você colocar HTML personalizado numa página. Só saber usar a tag <code><a></code> para criar um link já é um superpoderzinho.</p> +<p>Então, para onde agora?</p> +<h2 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h2> +<p>Terminamos o conteúdo principal que eu queria cobrir em <a href="/"><em>HTML e Pessoas</em></a>. Dito isso, tenho alguns assuntos que quero aprofundar como um apêndice do livro.</p> +<ul> +<li><strong><a href="/personalizar-o-simple-css">Personalizar o Simple.css</a></strong>. Mesmo sem aprender muito CSS, você pode mudar a aparência do seu site Simple sobrescrevendo algumas variáveis.</li> +<li><strong><a href="/basico-de-css">Básico de CSS</a></strong>. Esta missão extra ensina a fazer uma página bem desenhada do zero, usando CSS.</li> +<li><strong><a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a></strong>. Vamos ver como reutilizar pedaços de HTML — como um menu de navegação — usando includes do PHP. É uma introdução bem leve a sites dinâmicos.</li> +</ul> +<h2 id="recursos-deste-livro" tabindex="-1"><a class="header-anchor" href="#recursos-deste-livro">Recursos deste livro</a></h2> +<p>Eu fui espalhando uns links pelo caminho, apontando para demos e documentação. Para facilitar, aqui está uma lista dos principais.</p> +<ul> +<li><strong><a href="https://demo.htmlforpeople.com/">Demo da Homepage do Blake</a></strong>. Esta é a minha versão do site que este livro ensina você a fazer. Se você acompanhou e fez o seu próprio site, <a href="https://blakewatson.com/about/#contact-me">eu adoraria saber</a>.</li> +<li><strong><a href="https://github.com/blakewatson/htmlforpeopledemo">Código-fonte da Homepage do Blake</a></strong>. Este é o repositório de código do site de demonstração. Aqui você pode navegar por todo o código e baixá-lo, se quiser.</li> +<li><strong><a href="https://github.com/blakewatson/htmlforpeopledemo/tree/php">Homepage do Blake, versão PHP</a></strong>. Esta é outra versão do código-fonte, em que eu converti o site para PHP, como descrito no capítulo bônus <a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a>.</li> +<li><strong><a href="https://planets.htmlforpeople.com/">Demo Planets of the Solar System</a></strong>. Esta é a demo da página que vamos construir no capítulo bônus <a href="/basico-de-css">Básico de CSS</a>.</li> +<li><strong><a href="https://github.com/blakewatson/css-basics">Código-fonte de Planets of the Solar System</a></strong>. Este é o repositório de código dessa página.</li> +</ul> +<h2 id="recursos-e-documentacao-uteis" tabindex="-1"><a class="header-anchor" href="#recursos-e-documentacao-uteis">Recursos e documentação úteis</a></h2> +<ul> +<li><strong><a href="https://developer.mozilla.org">MDN</a></strong>. Se você precisa de detalhes sobre uma tag HTML específica, uma propriedade CSS ou outra informação técnica pontual, este é o melhor lugar. O MDN é mais ou menos o manual oficial de quem faz sites.</li> +<li><strong><a href="https://neocities.org/">Neocities</a></strong> e <a href="https://neocities.org/contact">perguntas frequentes do Neocities</a>. Eu escolhi este serviço de hospedagem no livro porque é grátis e tem um espírito parecido (criação de sites pensada em pessoas). As perguntas frequentes têm muita informação boa e uma visão do serviço, se você quiser saber mais.</li> +<li><strong><a href="https://neocities.org/tutorials">Tutoriais do Neocities</a>:</strong> Uma lista de tutoriais e recursos publicados pelo Neocities. Dê uma olhada no <a href="https://neocities.org/tutorial/html/1">curso de HTML</a> excelente deles.</li> +<li><strong><a href="https://simplecss.org/">Simple.css</a></strong>. Este é o framework CSS que usamos ao longo do livro. O site tem documentação de como usar o Simple.css e uma demo de vários elementos HTML.</li> +<li><strong><a href="https://practicaltypography.com/">Butterick’s Practical Typography</a></strong>. Um livro excelente sobre tipografia e design. Se você tem pouco tempo, veja <a href="https://practicaltypography.com/typography-in-ten-minutes.html">Typography in ten minutes</a>.</li> +<li><strong><a href="https://entitycode.com/">EntityCode</a></strong>. Aqui vai uma referência de <em>entidades HTML</em> que você pode usar para reproduzir caracteres especiais e símbolos.</li> +<li><strong><a href="https://coolors.co/contrast-checker">Verificador de contraste do Coolors</a></strong>. Uma ferramenta boa para garantir que as cores do texto e do fundo tenham contraste suficiente para a leitura.</li> +</ul> +<h2 id="hospedagens-para-sites-estaticos" tabindex="-1"><a class="header-anchor" href="#hospedagens-para-sites-estaticos">Hospedagens para sites estáticos</a></h2> +<p>Além do Neocities, existem outras boas opções para hospedar seus sites HTML.</p> +<ul> +<li><strong><a href="https://yay.boo/">Yay.boo</a>:</strong> Nome bobo, publicação de site realmente fácil. Você arrasta e solta uma pasta, escolhe um nome, e o site está no ar. O plano grátis coloca um link yay.boo no cantinho do site.</li> +<li><s><strong><a href="https://glitch.com/">Glitch</a>:</strong> Esta é uma boa opção se você quiser programar tudo direto no navegador. Monta, depois publica.</s> O <a href="https://perma.cc/C5KE-CMZV">Glitch encerrou a hospedagem de apps</a> em 2025.</li> +<li><strong><a href="https://codepen.io/">CodePen</a>:</strong> O CodePen é a alternativa ao Glitch mais amigável para iniciantes que eu conheço. A diferença é que um Pen é uma página só, e não vários arquivos que formam um site inteiro. Se você optar pelo CodePen Pro, porém, pode acessar Projects, que deixam você montar um site com várias páginas no navegador.</li> +<li><strong><a href="https://www.netlify.com/">Netlify</a>:</strong> Mais sofisticado, mas tem um recurso de <a href="https://perma.cc/W3PH-5KRS">arrastar e soltar uma pasta para publicar</a> e oferece mais funções voltadas para quem desenvolve.</li> +</ul> +<h2 id="alternativas-de-editor-de-codigo" tabindex="-1"><a class="header-anchor" href="#alternativas-de-editor-de-codigo">Alternativas de editor de código</a></h2> +<p>Eu usei o <a href="https://code.visualstudio.com/">Visual Studio Code</a> como editor de código ao longo deste livro. E por um bom motivo — é grátis e enormemente popular. Mas não é o único editor por aí.</p> +<p>Eu uso um Mac, então não conheço tanto os editores de outros sistemas. Mas sei de alguns que você deveria conhecer e avaliar. Alguns são grátis, alguns são pagos, e alguns são as duas coisas.</p> +<ul> +<li><strong><a href="https://www.sublimetext.com/">Sublime Text</a>:</strong> Multiplataforma, com teste grátis ilimitado (de vez em quando ele cobra para você pagar). O Sublime Text foi o padrão no desenvolvimento web até o VS Code assumir o trono. Ainda é muito bom. Super rápido e leve. O sistema de plugins/extensões é mais difícil de usar, mas você pode não precisar de nenhum se for fazer HTML/CSS básico, porque o suporte a isso já vem pronto.</li> +<li><strong><a href="https://www.jetbrains.com/webstorm/">WebStorm</a>:</strong> Um dos vários <em>IDEs</em> (ambientes de desenvolvimento integrado) pagos (grátis para uso não comercial) da JetBrains. É multiplataforma e tem um monte de recursos. É caro, mas tem 30 dias de teste grátis. As pessoas adoram. Eu não usei muito, então não tenho muito o que dizer, além de que a reputação é sólida.</li> +<li><strong><a href="https://zed.dev/">Zed</a>:</strong> Multiplataforma (Mac e Linux, com Windows “em breve”) e grátis. Este parece uma mistura de VS Code e Sublime Text, e tem bastante hype no momento em que eu escrevo isto.</li> +<li><strong><a href="https://nova.app/">Nova</a>:</strong> Só para Mac e pago (mas com teste grátis). É a sequência do Coda, um editor de web amado no Mac, do mesmo desenvolvedor (Panic). Os apps da Panic são sempre ótimos, então dê uma olhada no Nova se você usa Mac.</li> +<li><strong><a href="https://notepad-plus-plus.org/">NotePad++</a>:</strong> Editor grátis e de código aberto para Windows. Não tenho muito o que dizer, além de que ele existe há muito tempo.</li> +<li><strong><a href="https://www.barebones.com/products/bbedit/">BBEdit</a>:</strong> Um dos apps mais antigos do Mac que ainda é desenvolvido de fato. O BBEdit é pago, mas tem teste grátis e um modo grátis para sempre, que limita você a um conjunto específico de recursos.</li> +<li><strong><a href="https://glitch.com/">Glitch</a>:</strong> Sim, é o mesmo listado acima em hospedagens. O Glitch é uma boa opção se você quiser trabalhar “na nuvem”. Ele oferece uma interface na web para fazer sites, incluindo criar arquivos e editar código. Tudo fica no navegador, o que é uma boa opção se você não quiser baixar e instalar coisas no computador.</li> +<li>Muitos, muitos outros. São demais para listar. Mas, se nenhum destes te agradar, busque no seu mecanismo de busca favorito e se prepare para a enxurrada de resultados.</li> +</ul> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> + + + + + + <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="/personalizar-o-simple-css/">Personalizar o Simple.css</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/adicionar-uma-pagina-divertida/">Adicionar uma página divertida</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>
A
do-zero-a-internet-seu-primeiro-site/index.html
@@ -0,0 +1,469 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Do zero à internet: seu primeiro site</title> + + <meta property="og:title" content="Do zero à internet: seu primeiro site" /> + <meta property="og:description" content="Crie uma página extremamente simples do zero usando o Bloco de Notas e coloque-a na internet com o Neocities." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/do-zero-a-internet-seu-primeiro-site/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/do-zero-a-internet-seu-primeiro-site/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/zero-to-internet-your-first-website/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/zero-to-internet-your-first-website/" + /> + + + <!-- 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" + aria-current="page" + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="do-zero-a-internet-seu-primeiro-site" tabindex="-1"><a class="header-anchor" href="#do-zero-a-internet-seu-primeiro-site">Do zero à internet: seu primeiro site</a></h1> +<p>Você, meu amigo, está prestes a ir do zero à internet. Vamos colocar sua primeira página caseira na web.</p> +<p>Vou te contar um segredo: sites são só arquivos de texto. Você não precisa de um programa caro e sofisticado para criá-los. Dá para fazer um site com as ferramentas de texto que já vêm no seu computador. E é exatamente isso que vamos fazer agora.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Dá para fazer um site no celular ou no tablet. Mas é bem mais comum fazer no computador. Por isso, é o que vamos usar neste livro. Mesmo assim, o que você vai aprender também vale em outros contextos. Uma coisa linda da web é que existem muitos jeitos de criar nela.</p> +</aside> +<h2 id="passo-1-crie-uma-pasta-no-seu-computador" tabindex="-1"><a class="header-anchor" href="#passo-1-crie-uma-pasta-no-seu-computador">Passo 1. Crie uma pasta no seu computador</a></h2> +<p>Escolha um lugar no seu computador e crie uma pasta. Chame de <code>my-site</code> ou algo parecido. O ideal é nomear pastas e arquivos de site com letras minúsculas, números, hífens e underlines. Evite espaços nos nomes. Assim seus arquivos funcionam em muitos computadores e servidores diferentes. (Um servidor é o computador na internet que guarda os arquivos do seu site e os entrega para quem visita.)</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Precisa de ajuda para criar uma pasta? Veja como fazer em alguns sistemas comuns.</p> +<ul> +<li><a href="https://perma.cc/H5YD-7W8S">Criar uma pasta no Windows</a></li> +<li><a href="https://perma.cc/X9RD-T6RH">Criar uma pasta no macOS</a></li> +<li><a href="https://perma.cc/B7LV-XXD5">Criar uma pasta no Ubuntu Linux</a></li> +</ul> +<p>Com o tempo, você provavelmente vai criar vários sites. Se quiser, já pode criar uma pasta <code>sites</code> e colocar <code>my-site</code> dentro dela.</p> +</aside> +<aside class="aside"><p class="aside-label">Observação</p><p>As capturas de tela deste livro são do original em inglês. O passo a passo vale igual no português.</p> +</aside> +<p><img src="/assets/img/zero-to-internet-01.webp" alt="Captura de tela de uma janela do explorador de arquivos. No painel esquerdo, a pasta "Websites" está selecionada. No painel direito, a pasta "my-site" aparece dentro da pasta "Websites"."></p> +<h2 id="passo-2-crie-o-indexhtml" tabindex="-1"><a class="header-anchor" href="#passo-2-crie-o-indexhtml">Passo 2. Crie o index.html</a></h2> +<p>Por convenção, a página inicial de um site é o <code>index.html</code>. Você pode ter outras páginas (como <code>about-me.html</code> ou o que quiser). Mas isso fica para depois.</p> +<p>Para criar o <code>index.html</code>, abra o TextEdit no Mac ou o Bloco de Notas no Windows.</p> +<aside class="aside"><p class="aside-label">Quem usa Mac</p><p>Sites devem ser <em>texto simples</em>, então precisamos pedir isso ao TextEdit. Clique em <em>Format</em> na barra de menus e escolha <em>Make Plain Text</em>. Depois abra as configurações do TextEdit, clique na aba Open and Save e marque a caixa <em>Display HTML files as HTML code instead of formatted text</em>. Já que você está aí: se quiser que o TextEdit use texto simples sempre, escolha <em>Plain text</em> na aba New Document, na seção Format.</p> +</aside> +<p>Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta:</p> +<pre class="language-html"><code class="language-html">My name is Blake. I enjoy making websites and teaching others to do the same.</code></pre> +<p>Agora salve este arquivo. Chame de <code>index.html</code> e coloque na pasta <code>my-site</code> que você criou no passo 1.</p> +<p><img src="/assets/img/zero-to-internet-02.webp" alt="Uma janela de editor de texto mostrando o conteúdo de um arquivo chamado "index.html". O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same.""></p> +<aside class="aside"><p class="aside-label">Observação</p><p>Quando você faz sites, é essencial ver as extensões de arquivo — a parte do nome que vem depois do ponto, como <code>.html</code>. Se você não as vê, veja como fazer o <a href="https://perma.cc/3LAG-L6YW">Windows</a> ou o <a href="https://perma.cc/KYR3-6H3L">Mac</a> mostrá-las.</p> +</aside> +<h2 id="passo-3-veja-a-previa-do-seu-site" tabindex="-1"><a class="header-anchor" href="#passo-3-veja-a-previa-do-seu-site">Passo 3. Veja a prévia do seu site</a></h2> +<p>Você pode abrir o site dando um clique duplo em <code>index.html</code>. Ele deve abrir no seu navegador padrão. Outra opção: abra o navegador primeiro, clique em <em>File</em> > <em>Open File…</em> e navegue até o seu arquivo <code>index.html</code>.</p> +<p>Você deve ver o seu site (sim, bem simples) no navegador! Sinta-se à vontade para ajustar o texto e corrigir erros de digitação. Estamos prestes a publicar esta página para o <em>mundo</em>.</p> +<p>Não se preocupe com a aparência. Vamos cuidar disso depois.</p> +<p><img src="/assets/img/zero-to-internet-03.webp" alt="Uma janela de navegador mostra uma página simples, com texto preto em fundo branco. O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same." O endereço na barra é um caminho de arquivo local."></p> +<h2 id="passo-4-publique-o-seu-site" tabindex="-1"><a class="header-anchor" href="#passo-4-publique-o-seu-site">Passo 4. Publique o seu site</a></h2> +<p>Existem muitas opções para publicar o seu site. Para o nosso caso, precisamos de algo gratuito, fácil e pensado para pessoas, não para empresas. Felizmente, é isso que temos com o <a href="https://neocities.org">Neocities</a>.</p> +<aside class="aside"><p class="aside-label">Outras hospedagens</p><p>Neste livro, vou usar o Neocities como exemplo. Mas quero citar algumas alternativas, caso alguma te agrade. A maioria oferece a opção de arrastar a pasta do seu site para a página delas e começar o serviço.</p> +<ul> +<li><strong><a href="https://app.netlify.com/drop">Netlify Drop</a>:</strong> Mais sofisticado que o Neocities, mas tem o recurso de arrastar e soltar a pasta para publicar. Também oferece recursos mais voltados para quem desenvolve.</li> +<li><strong><a href="https://static.app/">static.app</a>:</strong> Eu não tenho experiência pessoal com este. Mas parece um serviço direto, parecido com o Netlify Drop. O plano grátis dá um subdomínio (o pedaço do endereço que vem antes do nome principal) e 1 site gratuito.</li> +<li><strong><a href="https://tiiny.host/">Tiiny</a>:</strong> Oferece um processo parecido com os serviços acima, com suporte a mais formatos além de um site. Eu também não tenho experiência pessoal com este serviço.</li> +<li><strong><a href="https://codepen.io/">CodePen</a>:</strong> O CodePen deixa você criar um site direto no navegador. É parecido com usar um editor de código no computador, mas os arquivos ficam no CodePen. Você trabalha até ficar pronto e depois publica na internet. Você ganha três arquivos/páginas de graça. E eles oferecem uma assinatura para aumentar bastante esse limite.</li> +<li><s><strong><a href="https://yay.boo/">Yay.boo</a>:</strong> Nome bobo, publicação de site sem esforço. Você só arrasta e solta uma pasta, escolhe um nome, e o site está no ar.</s> O Yay.boo não está aceitando cadastros no momento. Eles podem voltar em breve.</li> +</ul> +</aside> +<p>Vá até o Neocities e crie uma conta. É de graça. Você também vai precisar escolher um nome de usuário/nome do site. Seu site vai ficar num <em>subdomínio</em> em <code>YOURNAME.neocities.org</code> — o <code>YOURNAME</code> vem antes de <code>neocities.org</code>. Eu sugiro usar seu nome real ou um apelido que você já use na internet. Ou, se você já sabe sobre o que a página vai ser, escolha algo que combine com o tema (por exemplo, <code>dndfanpage</code>).</p> +<p>Quando a conta estiver criada, vá ao <a href="https://neocities.org/dashboard">painel do seu site</a>. Você vai ver alguns arquivos iniciais lá. Por enquanto, pode ignorá-los. Para publicar a página que você acabou de fazer no computador, arraste o <code>index.html</code> do seu computador para o painel do Neocities. Isso vai substituir o <code>index.html</code> que já está lá.</p> +<p><img src="/assets/img/zero-to-internet-04.webp" alt="Captura de tela do painel do Neocities mostrando um site chamado "My Cool Website" do usuário blakewatson. A interface tem opções para criar um arquivo novo, uma pasta nova ou enviar arquivos, além de informações sobre uso de armazenamento e atividade do site."></p> +<p>Feito isso, clique no link do seu site no topo do painel.</p> +<p><strong>Parabéns, você acabou de fazer um site!</strong> 🎉</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>No próximo capítulo, vamos adicionar mais conteúdo ao nosso site e conhecer algumas tags HTML (uma tag é um pedaço de código que marca o que cada parte da página é).</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="/adicionar-conteudo-ao-seu-site/">Adicionar conteúdo ao seu site</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/introducao/">Introdução</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>
A
html-reutilizavel-com-php/index.html
@@ -0,0 +1,565 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>HTML reutilizável com PHP</title> + + <meta property="og:title" content="HTML reutilizável com PHP" /> + <meta property="og:description" content="Aprenda a reutilizar elementos como menus de navegação, aproveitando a capacidade dinâmica do PHP." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/html-reutilizavel-com-php/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/html-reutilizavel-com-php/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/reusable-html-with-php/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/reusable-html-with-php/" + /> + + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <script> + /** + * A global function that the theme toggle can use to apply the current theme. + * @param {string | undefined} override - The setting that needs to be applied or undefined + * @returns {string} - The applied theme setting + */ + window.applyThemeSetting = function (override) { + const getSystemPreference = () => { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }; + const currentSetting = + override || + localStorage.getItem('user-color-scheme') || + getSystemPreference(); + const currentThemeValue = + document.documentElement.getAttribute('data-theme'); + if (currentSetting && currentSetting !== currentThemeValue) { + document.documentElement.setAttribute('data-theme', currentSetting); + localStorage.setItem('user-color-scheme', currentSetting); + } + return currentSetting; + }; + window.applyThemeSetting(); + </script> + + <link rel="stylesheet" href="/assets/css/style.css" /> + + <script defer src="/assets/js/app.js"></script> + + </head> + + <body class="chapter"> + + <header class="site-header"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + <?xml version="1.0" encoding="UTF-8"?> +<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML e pessoas</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="logo" transform="translate(10, 10)"> + <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect> + <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text> + <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line> + <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line> + <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line> + <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle> + <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle> + <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path> + <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path> + <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path> + </g> + <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line> + <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line> + <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line> + <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line> + <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line> + <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line> + <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle> + <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle> + <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path> + <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path> + <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path> + </g> + </g> + </g> +</svg> + </a> + </p> + </div> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="container"><details class="main-menu" id="main-menu"> + <summary>Menu</summary> + + <nav> + <p class="menu-heading"> + <strong>Capítulos</strong> + </p> + + <ul> + <li> + <a href="/introducao" + >Introdução</a + > + </li> + <li> + <a + href="/do-zero-a-internet-seu-primeiro-site" + + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + aria-current="page" + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="html-reutilizavel-com-php" tabindex="-1"><a class="header-anchor" href="#html-reutilizavel-com-php">HTML reutilizável com PHP</a></h1> +<p>Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas.</p> +<p>É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa <em>PHP: Hypertext Preprocessor</em>. Sim, <a href="https://en.wikipedia.org/wiki/Recursive_acronym">a sigla faz parte do nome</a>, o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial.</p> +<p>O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS <a href="https://wordpress.org/">WordPress</a> foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. <em>Hypertext preprocessor</em> é uma boa descrição do que ela costuma fazer.</p> +<p>Quando você visita um site <em>estático</em>, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença?</p> +<p>O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em <code>example.com/user/blake</code>. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta.</p> +<p>O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social.</p> +<p>Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução <code>include</code>.</p> +<h2 id="como-executar-php" tabindex="-1"><a class="header-anchor" href="#como-executar-php">Como executar PHP</a></h2> +<p>O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP.</p> +<p>Eu recomendo o que se chama <em>hospedagem compartilhada</em>. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços).</p> +<aside class="aside"><p class="aside-label">Observação</p><p>É possível executar PHP no seu computador para testar o site antes de enviá-lo a um servidor. Porém, configurar isso fica fora do alcance deste livro.</p> +<p>O jeito mais fácil provavelmente é usar um app como <a href="https://www.apachefriends.org/">XAMPP</a> ou <a href="https://www.mamp.info">MAMP</a> (o que eu uso). Você também pode <a href="https://perma.cc/MZB9-GKBD">instalar o PHP direto no sistema</a> e usar o <a href="https://web.archive.org/web/20240711042305/https://www.php.net/manual/en/features.commandline.webserver.php">servidor de desenvolvimento embutido</a>.</p> +</aside> +<p>A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu <a href="https://perma.cc/WAD3-JCNX">perguntei no Mastodon</a>.</p> +<ul> +<li><a href="https://www.dreamhost.com/">DreamHost</a></li> +<li><a href="https://www.siteground.com/">SiteGround</a></li> +<li><a href="https://www.reclaimhosting.com/">Reclaim Hosting</a></li> +<li><a href="https://www.infinityfree.com/">InfinityFree</a></li> +</ul> +<p>E ainda tem o <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech.NET</a>, a hospedagem <a href="https://blakewatson.com/journal/why-i-host-my-websites-with-nearlyfreespeech-net/">que eu uso há anos</a>. Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade.</p> +<p>Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com <a href="https://perma.cc/P7Y7-CR6P">FTP</a>.</p> +<p>Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo.</p> +<p>O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de <code>.html</code> para <code>.php</code>. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma.</p> +<h2 id="deixar-uma-pagina-dinamica" tabindex="-1"><a class="header-anchor" href="#deixar-uma-pagina-dinamica">Deixar uma página dinâmica</a></h2> +<p>Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP.</p> +<p>Por exemplo, aqui vai uma página que mostra o ano atual.</p> +<pre class="language-php"><code class="language-php"><span class="token doctype"><span class="token punctuation"><!</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 attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>My website<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>https://unpkg.com/sakura.css/css/sakura.css<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</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>h1</span><span class="token punctuation">></span></span>My website<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>p</span><span class="token punctuation">></span></span>The current year is: <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">date</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Y'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</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> +<p>Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida.</p> +<p>Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (<code><?php</code> e <code>?></code>).</p> +<p>O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução <code>echo</code> é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função <code>date</code> devolve a data atual — neste caso, estamos dizendo que queremos só o ano.</p> +<p>Então a função <code>date</code> roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução <code>echo</code>, que o insere no documento.</p> +<p>O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado.</p> +<h2 id="reutilizar-partes-do-seu-site" tabindex="-1"><a class="header-anchor" href="#reutilizar-partes-do-seu-site">Reutilizar partes do seu site</a></h2> +<p>Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares.</p> +<p>Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo <code>aria-current</code>, que muda conforme a página em que você está).</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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 attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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/<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 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></code></pre> +<p>Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em <em>cada página</em> e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu.</p> +<p>Primeiro, crie um arquivo chamado <code>nav.php</code>. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta <code>includes</code>, só para organizar.</p> +<p>Copie o menu de navegação da página inicial (<code>index.html</code>) e cole o conteúdo no arquivo <code>nav.php</code>. Por enquanto, remova o atributo <code>aria-current="page"</code>, porque vamos precisar tornar essa parte dinâmica depois.</p> +<p>Você deve ter um arquivo <code>nav.php</code> mais ou menos assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>/<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<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.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</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></code></pre> +<p>O trecho acima não é só um recorte. É o <em>conteúdo inteiro</em> de <code>nav.php</code>. Ao contrário de outros arquivos HTML, que precisam de um <code><head></code>, um <code><body></code> etc., arquivos PHP podem conter um fragmento de HTML.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>No processo de converter o site de só HTML para PHP, é uma boa hora de converter todos os links internos entre páginas para URLs absolutos. Comece com uma barra <code>/</code> e escreva o caminho completo. Veja esta <a href="/intervalo-instalar-um-servidor-local/#urls-relativas-e-urls-absolutas">seção sobre URLs relativas e URLs absolutas</a> do capítulo do servidor web, se você ainda não viu.</p> +</aside> +<p>Agora vamos usar. Renomeie <code>index.html</code> para <code>index.php</code>. Apague o bloco <code><nav></code> inteiro e substitua pela seguinte linha de PHP.</p> +<pre class="language-php"><code class="language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake<span class="token entity named-entity" title="’">&rsquo;</span>s Homepage<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></code></pre> +<p>Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas.</p> +<h2 id="converter-paginas-html-em-php" tabindex="-1"><a class="header-anchor" href="#converter-paginas-html-em-php">Converter páginas HTML em PHP</a></h2> +<p>Os passos são, em geral, os mesmos para cada página.</p> +<ol> +<li>Mude a extensão do arquivo de <code>.html</code> para <code>.php</code>.</li> +<li>Substitua a tag <code><nav></code> pela instrução <code>include</code> do PHP.</li> +</ol> +<p>Para páginas do nível mais alto, a instrução <code>include</code> do PHP vai ficar assim:</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre> +<p>Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe <code>..</code> para subir um nível.</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"../includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você se sentir à vontade com mais código, use uma variável embutida do PHP que aponta para o diretório de nível mais alto. O seguinte funciona em qualquer página. O ponto (<code>.</code>) aqui une as duas strings de texto.</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'DOCUMENT_ROOT'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string double-quoted-string">"/includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre> +</aside> +<p>Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o <code>nav.php</code>.</p> +<p>Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção <code><head></code> é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai.</p> +<h2 id="bonus-destacar-dinamicamente-o-link-atual-da-navegacao" tabindex="-1"><a class="header-anchor" href="#bonus-destacar-dinamicamente-o-link-atual-da-navegacao">Bônus: destacar dinamicamente o link atual da navegação</a></h2> +<p>Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo <code>aria-current</code> no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual?</p> +<p>Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o <code>aria-current</code> automaticamente.</p> +<p>Primeiro, vamos recapitular o que este atributo significa. Se alguém vai à página Sobre, queremos que aquele link no menu seja estilizado para indicar que representa a página atual (ou anunciado por um leitor de tela, se a pessoa estiver usando um). Nesse caso, usaríamos o atributo <code>aria-current="page"</code>.</p> +<p>Temos também outro cenário. Se alguém visita um post do blog, gostaríamos de destacar o link Blog na navegação. Não é exatamente a página atual — a pessoa não está na listagem do blog, para onde o link aponta, e sim num post individual. Ainda assim, seria legal destacar o link Blog porque ele representa a seção atual do site — o post é uma subpágina do blog. Nesse caso, poderíamos usar <code>aria-current="true"</code>. Isso é menos específico e mais correto em termos de significado.</p> +<p>Beleza, então como adicionamos isso automaticamente com PHP?</p> +<p>Há muitos jeitos de fazer isso — e nenhum é necessariamente mais certo do que os outros — mas aqui vai o que eu acho o menos complicado.</p> +<p>Esta técnica vai exigir que a gente <em>chame uma função</em> em cada item da navegação. Fica assim.</p> +<pre class="language-php"><code class="language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</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></code></pre> +<p>Vamos precisar de uma <em>função</em> personalizada chamada <code>aria_current</code> (eu te dou o código dessa função daqui a pouco). A função deve receber um <em>argumento</em>, que deve ser o texto do <code>href</code>. Depois, o trabalho da função será comparar esse pedaço de texto com o URL visitado e decidir se deve imprimir, usando <code>echo</code>, o atributo <code>aria-current</code>.</p> +<p>Você pode colocar a função no mesmo arquivo, acima da marcação HTML.</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> +<span class="token keyword">function</span> <span class="token function-definition function">aria_current</span><span class="token punctuation">(</span><span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// If $url is an exact match for the current URL, return 'aria-current="page"'.</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="page"'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token comment">// Otherwise it might be a sub-page, so check if the current URL contains</span> + <span class="token comment">// $url. If it does, return 'aria-current="true"' to indicate that the link</span> + <span class="token comment">// is an ancestor of the current page. Ignore a lone slash.</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$url</span> <span class="token operator">!==</span> <span class="token string single-quoted-string">'/'</span> <span class="token operator">&&</span> <span class="token function">strpos</span><span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token constant boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="true"'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +<span class="token delimiter important">?></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</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></code></pre> +<p>Beleza, vamos por partes. Primeiro, precisamos abrir um par de tags PHP. Dentro, vamos definir uma função chamada <code>aria_current</code> com um argumento: uma variável chamada <code>$url</code>.</p> +<p>Você pode ver onde eu acrescentei algumas notas chamadas <em>comentários</em>. Toda linha que começa com duas barras (<code>//</code>) é considerada comentário e é ignorada — está ali só para quem está olhando o código.</p> +<p>O primeiro pedaço de código é uma <em>instrução if</em>. O PHP tem uma variável global chamada <code>$_SERVER</code> com todo tipo de informação, inclusive qual página está sendo visitada (o que ele chama de <code>REQUEST_URI</code>). Então pegamos isso e vemos se combina com o URL do item de navegação dado (lembre-se: estamos rodando esta função para cada item). Se combinar, vamos imprimir <code>aria-current="page"</code> usando a instrução <code>echo</code>. Nesse caso, a saída aparece no ponto em que chamamos a função (que é dentro da tag <code><a></code>, onde ficam os atributos). Depois da instrução <code>echo</code>, usamos <code>return</code> para parar a função — já terminamos.</p> +<p>Se o primeiro teste não for verdadeiro, há outro teste que queremos tentar. A página atual visitada é uma subpágina do item de navegação dado?</p> +<p>Este teste tem duas partes:</p> +<ol> +<li>Primeiro, queremos ignorar a página inicial (<code>/</code>), porque ela obviamente não é subpágina de nada.</li> +<li>Segundo, vamos testar o URL passado para a função contra o URL visitado, para ver se temos uma combinação.</li> +</ol> +<p>A segunda parte do teste usa uma função chamada <code>strpos</code>. Ela recebe dois argumentos. O primeiro é um pedaço de texto no qual você quer buscar (vamos chamar de <em>palheiro</em>). O segundo é um pedaço de texto que você está procurando (vamos chamar de <em>agulha</em>). A função devolve a posição da agulha no palheiro, se encontrar. Devolve <code>false</code> se não encontrar de jeito nenhum.</p> +<p>Então, de novo, vamos olhar a variável global embutida <code>$_SERVER['REQUEST_URI']</code>. Você pode imaginar isso como algo tipo <code>/blog/my-first-post</code>. Sabemos que a pessoa está numa subpágina do blog se encontrarmos <code>/blog</code> dentro desse caminho.</p> +<p>O teste passa nesse caso, e vamos imprimir <code>aria-current="true"</code> usando a instrução <code>echo</code>.</p> +<p>Se os dois testes falharem, não imprimimos nada.</p> +<p>Para recapitular: quando alguém carrega uma página no nosso site, rodamos uma função em cada item da navegação. Se o <code>href</code> do item combina com o URL atual, ou aparece em algum lugar do URL atual, imprimimos o atributo <code>aria-current</code> adequado. Caso contrário, não imprimimos nada.</p> +<p>Ufa! Se você nunca tinha programado, dê um tapinha nas próprias costas, porque agora você já programou. Se esse tipo de coisa te diverte, explore mais PHP ou dê uma olhada em JavaScript.</p> +<h2 id="conclusao" tabindex="-1"><a class="header-anchor" href="#conclusao">Conclusão</a></h2> +<p>A criação de modelos com <code>include</code> no PHP é um ótimo jeito de escrever HTML sem repetir código. O PHP tem uma barreira de entrada menor do que outras linguagens de programação, e essa é uma das razões de eu trazer o assunto. Porém, sites podem ser feitos com todo tipo de linguagem (JavaScript, Python e Ruby são outras escolhas populares). Este é o mundo dos sites dinâmicos. Fica bem selvagem se você começa a pensar em tudo o que dá para fazer com isso.</p> +<p>Includes de PHP podem ser úteis mesmo para um site pessoal pequeno. Mas também não tem problema ficar só com HTML puro! Editores como o Visual Studio Code têm busca e substituição robustas, o que permite atualizar muitos arquivos de uma vez.</p> +<p>E com isso, você terminou o último capítulo bônus de <a href="/"><em>HTML e Pessoas</em></a>! Obrigado por ler.</p> + + + + + + <nav + class="mb-xl" + style="display: flex; flex-direction: column; gap: 0.5rem;" + > + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/basico-de-css/">Básico de CSS</a> + </p> + + </nav> + + + </main> + + + + + <elevator-button title="Ir para o menu"> + <a href="#main-menu"> + <span class="sr-only">Ir para o menu</span> + </a> + </elevator-button> + + <div class="sticky-footer" style="margin-block-start: auto"> + <div class="promo"> + <div class="container"> + <p class="promo-title">Gostou do livro?</p> + <div class="stack"> + <p> + <em>HTML e Pessoas</em> é a tradução de um trabalho feito com + carinho. Se puder, considere enviar uma doação no Ko-fi para o + autor original, Blake Watson, e compartilhar o livro nas redes + sociais. + </p> + + <p> + <a href="https://ko-fi.com/blakewatson" class="button" + >Doar no Ko-fi</a + > + </p> + + <p>Confira outros projetos do Blake:</p> + <ul> + <li> + <a href="https://afinestart.me" + >Uma extensão minimalista de nova aba</a + > + </li> + <li> + <a href="https://synthwave.live/">Um site de mix synthwave</a> + </li> + <li> + <a href="https://minimalcharactersheet.com/" + >Uma ficha minimalista para D&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>
A
index.html
@@ -0,0 +1,775 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>HTML e Pessoas</title> + + <meta property="og:title" content="HTML e Pessoas" /> + <meta property="og:description" content="HTML não é só para quem trabalha com tecnologia. É para todo mundo. Aprenda a fazer um site do zero neste livro na web, feito para iniciantes." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/" + /> + + + <!-- 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> + + <script src="/assets/js/anime.min.js"></script> + <script src="/assets/js/hero.js" type="module"></script> + + </head> + + <body class="page"> + + <header class="site-header"> + <p class="site-title sr-only">HTML e Pessoas</p> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="hero"> +<svg id="hero" viewBox="0 0 3000 1575" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect id="path-535ywfpbwe-1" x="0" y="0" width="3000" height="1575"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="BWatson_Cover_01"> + <mask id="mask-535ywfpbwe-2" fill="white"> + <use xlink:href="#path-535ywfpbwe-1"></use> + </mask> + <g id="Rectangle"></g> + <g id="Group" mask="url(#mask-535ywfpbwe-2)"> + <g transform="translate(-157.55, -157.55)"> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="17.18" width="3197.81" height="1847.5"></rect> + <g id="rocket" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(229.67, 206.93)"> + <g id="exhaust" transform="translate(6.88, 583.62)" fill="#FFFFFF" fill-rule="nonzero"> + <path d="M48.02,0 L50.84,380.355 C50.84,393.605 40.08,404.365 26.83,404.365 C13.58,404.365 2.82,393.605 2.82,380.355 L0,0 L48.02,0 Z" id="left"></path> + <path d="M74.32,0 L140.73,0 L140.73,371.155 C140.73,389.485 125.85,404.365 107.52,404.365 C89.19,404.365 74.31,389.485 74.31,371.155 L74.31,0 L74.32,0 Z" id="center"></path> + <path d="M211,0 L211,380.355 C211,393.605 200.24,404.365 186.99,404.365 C173.74,404.365 162.98,393.605 162.98,380.355 L162.98,0 L211,0 Z" id="right"></path> + </g> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="167.25 609.41 113.76 609.41 60.28 609.41 60.28 336.48 81.55 218.29 145.98 218.29 167.25 336.48"></polygon> + <path d="M107.44,680.74 L80.29,680.74 C80.29,664.7 86.37,651.7 93.87,651.7 C101.37,651.7 107.45,664.7 107.45,680.74 L107.44,680.74 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M147.58,680.74 L120.43,680.74 C120.43,664.7 126.51,651.7 134.01,651.7 C141.51,651.7 147.59,664.7 147.59,680.74 L147.58,680.74 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M132.28,83.62 C129.68,61.35 126.16,31.07 123.55,8.71 C122.97,3.74 118.77,-5.68434189e-14 113.77,-5.68434189e-14 L113.77,-5.68434189e-14 C108.77,-5.68434189e-14 104.56,3.75 103.99,8.71 L95.26,83.61 C86.82,89.48 81.29,99.24 81.29,110.29 L81.29,218.28 L146.25,218.28 L146.25,110.29 C146.25,99.23 140.72,89.47 132.28,83.61 L132.28,83.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M60.28,609.41 L167.25,609.41 L167.25,622.58 C167.25,639.39 153.6,653.04 136.79,653.04 L90.73,653.04 C73.92,653.04 60.27,639.39 60.27,622.58 L60.27,609.41 L60.27,609.41 L60.28,609.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" fill="#1565C0" fill-rule="nonzero" cx="113.76" cy="154.3" r="19.75"></circle> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="96.59" y="352.73" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="113.76" y="369.91" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(122.355, 361.325) rotate(180) translate(-122.355, -361.325)" x="113.77" y="352.74" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(105.175, 378.495) rotate(180) translate(-105.175, -378.495)" x="96.59" y="369.91" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="96.59" y="544.5" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#465362" fill-rule="nonzero" x="113.76" y="561.67" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(122.355, 553.085) rotate(180) translate(-122.355, -553.085)" x="113.77" y="544.5" width="17.17" height="17.17"></rect> + <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(105.175, 570.265) rotate(180) translate(-105.175, -570.265)" x="96.59" y="561.68" width="17.17" height="17.17"></rect> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="52.64 661.11 14.73 661.11 9.68 685.77 57.69 685.77"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="60.28 631.22 7.09 631.22 0 665.83 67.37 665.83"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="33.68 358.88 7.09 423.15 7.09 631.23 60.28 631.23 60.28 423.15"></polygon> + <line x1="7.09" y1="425.99" x2="60.28" y2="425.99" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="7.09" y1="527.19" x2="60.28" y2="527.19" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="7.09" y1="631.23" x2="60.28" y2="631.23" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="212.8 661.11 174.89 661.11 169.83 685.77 217.85 685.77"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="220.44 631.22 167.25 631.22 160.16 665.83 227.52 665.83"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="193.84 358.88 167.25 423.15 167.25 631.23 220.44 631.23 220.44 423.15"></polygon> + <line x1="167.25" y1="425.99" x2="220.44" y2="425.99" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="167.25" y1="527.19" x2="220.44" y2="527.19" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="167.25" y1="631.23" x2="220.44" y2="631.23" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + </g> + <rect id="Rectangle" stroke="none" fill="#BBDEFB" fill-rule="evenodd" x="145.55" y="930.55" width="673" height="275"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFE0B2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="1216.84" width="3197.81" height="647.85"></rect> + <g id="solar-system" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2445.29, 0)" stroke-linecap="round" stroke-linejoin="round"> + <g id="venus" transform="translate(197.59, 0)" stroke="#465362" stroke-width="10"> + <g id="Group-3"> + <circle id="Oval" fill="#81C784" fill-rule="nonzero" cx="51.45" cy="828.5" r="51.45"></circle> + <line x1="51.45" y1="777.04" x2="51.45" y2="0" id="Path"></line> + </g> + </g> + <g id="saturn" transform="translate(337.935, 24.53)" stroke="#465362" stroke-width="10"> + <g id="Group-4"> + <circle id="Oval" fill="#BB9C87" fill-rule="nonzero" cx="159.545015" cy="803.97" r="91.14"></circle> + <path d="M317.826129,855.327824 C328.549448,822.285602 266.363812,772.497084 178.930625,744.122058 C91.497437,715.747031 11.9258668,719.530541 1.20254808,752.572763 C-9.52077065,785.614986 52.6648648,835.403503 140.098052,863.77853 C227.53124,892.153556 307.10281,888.370047 317.826129,855.327824 Z" id="Oval" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M246.235015,832.1 C230.695015,879.98 57.3150146,823.71 72.8550146,775.83 C88.3950146,727.95 139.805015,701.74 187.675015,717.28 C235.555015,732.82 261.765015,784.23 246.225015,832.1 L246.235015,832.1 Z" id="Path" fill="#BB9C87" fill-rule="nonzero"></path> + <line x1="161.295015" y1="712.8" x2="161.295015" y2="0" id="Path"></line> + </g> + </g> + <g id="mars" transform="translate(381.28, 1.07)" stroke="#465362" stroke-width="10"> + <g id="Group-5" transform="translate(-0, 0)"> + <circle id="Oval" fill="#FF8080" fill-rule="nonzero" cx="42.66" cy="657.52" r="42.66"></circle> + <line x1="42.66" y1="614.86" x2="42.66" y2="0" id="Path"></line> + </g> + </g> + <g id="jupiter" transform="translate(181.66, 57.97)" stroke="#465362" stroke-width="10"> + <g id="Group-6"> + <line x1="89.26" y1="504.49" x2="89.26" y2="0" id="Path"></line> + <path d="M178.52,593.75 C178.52,643.05 138.56,683.01 89.26,683.01 C64.79,683.01 42.62,673.16 26.5,657.2 C18.48,649.29 11.96,639.85 7.4,629.38 C2.64,618.47 0,606.42 0,593.75 C0,579.34 3.41,565.73 9.49,553.68 C14.86,543 22.32,533.54 31.34,525.85 C46.92,512.54 67.15,504.5 89.26,504.5 C111.37,504.5 131.59,512.54 147.18,525.85 C156.2,533.54 163.66,543 169.03,553.68 C175.11,565.73 178.52,579.35 178.52,593.75 L178.52,593.75 Z" id="Path" fill="#FFCC80" fill-rule="nonzero"></path> + <ellipse id="Oval" fill="#FF8080" fill-rule="nonzero" cx="117.6" cy="619.63" rx="30.61" ry="13.92"></ellipse> + <path d="M169.03,553.67 L9.49,553.67 C14.86,542.99 22.32,533.53 31.34,525.84 L147.18,525.84 C156.2,533.53 163.66,542.99 169.03,553.67 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <path d="M69.17,643.28 C69.17,647.12 67.62,650.6 65.1,653.13 C62.57,655.65 59.1,657.2 55.25,657.2 L26.49,657.2 C18.47,649.29 11.95,639.85 7.39,629.38 L55.25,629.38 C62.94,629.38 69.17,635.61 69.17,643.29 L69.17,643.28 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + </g> + </g> + <g id="sun" transform="translate(179.75, 33.45)" stroke="#465362" stroke-width="10"> + <g id="Group-7"> + <circle id="Oval" fill="#FFF176" fill-rule="nonzero" cx="134.15" cy="371.76" r="134.15"></circle> + <line x1="134.15" y1="237.61" x2="134.15" y2="0" id="Path"></line> + </g> + </g> + <g id="mercury" transform="translate(86.44, 57.78)" stroke="#465362" stroke-width="10"> + <g id="Group-8"> + <circle id="Oval" fill="#CFD8DC" fill-rule="nonzero" cx="43.99" cy="443.87" r="43.99"></circle> + <line x1="43.99" y1="396.96" x2="43.99" y2="0" id="Path"></line> + </g> + </g> + <g id="neptune" transform="translate(0, 57.78)" stroke="#465362" stroke-width="10"> + <g id="Group-9"> + <path d="M133.44,632.13 C133.44,642.86 130.91,652.99 126.4,661.97 C122.44,669.89 116.95,676.91 110.32,682.64 C98.63,692.74 83.39,698.85 66.72,698.85 C38.53,698.85 14.42,681.37 4.65,656.65 C2.45,651.07 0.97,645.13 0.34,638.93 C0.12,636.69 0,634.43 0,632.13 C0,629.03 0.21,625.97 0.63,622.98 C2.12,612.07 6.25,602 12.36,593.44 C24.46,576.48 44.3,565.42 66.72,565.42 C89.14,565.42 108.98,576.48 121.08,593.44 C127.19,602 131.32,612.07 132.81,622.98 C133.23,625.97 133.44,629.03 133.44,632.13 L133.44,632.13 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="66.72" y1="565.42" x2="66.72" y2="0" id="Path"></line> + </g> + </g> + <g id="earth" transform="translate(478.69, 73.58)" stroke="#465362" stroke-width="10"> + <g id="Group-2"> + <path d="M134.16,459.58 C134.16,469.85 131.86,479.57 127.73,488.26 C122.83,498.63 115.34,507.54 106.1,514.15 C95.11,522.02 81.63,526.66 67.08,526.66 C52.53,526.66 39.05,522.02 28.06,514.15 C17.09,506.28 8.58,495.19 3.93,482.26 C1.38,475.18 0,467.55 0,459.58 C0,437.09 11.08,417.18 28.07,405.01 C33.87,400.85 40.36,397.6 47.33,395.46 C53.58,393.54 60.21,392.51 67.08,392.51 C81.63,392.51 95.1,397.15 106.09,405.02 C115.33,411.64 122.82,420.54 127.72,430.91 C131.84,439.61 134.15,449.33 134.15,459.59 L134.16,459.58 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <path d="M62.92,432.09 C62.92,460.16 40.17,482.91 12.1,482.91 C9.32,482.91 6.59,482.68 3.94,482.26 C1.39,475.18 0.01,467.55 0.01,459.58 C0.01,437.09 11.09,417.18 28.08,405.01 C33.88,400.85 40.37,397.6 47.34,395.46 C56.95,404.7 62.93,417.7 62.93,432.09 L62.92,432.09 Z" id="Path" fill="#81C784" fill-rule="nonzero"></path> + <path d="M134.16,459.58 C134.16,469.85 131.86,479.57 127.73,488.26 C116.48,483.61 108.55,472.52 108.55,459.58 C108.55,446.64 116.48,435.56 127.73,430.9 C131.85,439.6 134.16,449.32 134.16,459.58 Z" id="Path" fill="#81C784" fill-rule="nonzero"></path> + <path d="M106.1,405.01 C95.11,412.88 81.64,417.52 67.09,417.52 C52.54,417.52 39.07,412.88 28.08,405.01 C39.07,397.14 52.54,392.5 67.09,392.5 C81.64,392.5 95.11,397.14 106.1,405.01 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M106.1,514.15 C95.11,522.02 81.63,526.66 67.08,526.66 C52.53,526.66 39.05,522.02 28.06,514.15 C39.05,506.27 52.53,501.64 67.08,501.64 C81.63,501.64 95.11,506.28 106.1,514.15 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <line x1="67.08" y1="392.5" x2="67.08" y2="0" id="Path"></line> + </g> + </g> + </g> + <path d="M0,892.7 L843.96,892.7 C858.41,892.7 870.13,904.43 870.13,918.87 L870.13,918.87 C870.13,933.32 858.4,945.04 843.96,945.04 L0,945.04 L0,892.69 L0,892.69 L0,892.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1904.67,1343.62 L1904.67,1360.64 C1904.67,1371.3 1896.08,1380.91 1884.37,1380.91 L1398.59,1380.91 C1386.88,1380.91 1378.29,1371.3 1378.29,1360.64 L1378.29,1343.62 C1378.29,1340.82 1378.88,1337.94 1380.17,1335.15 L1416.29,1256.61 C1419.6,1249.41 1426.8,1244.8 1434.72,1244.8 L1848.24,1244.8 C1856.16,1244.8 1863.35,1249.41 1866.66,1256.61 L1902.79,1335.15 C1904.08,1337.94 1904.67,1340.82 1904.67,1343.62 L1904.67,1343.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1478.34" y="930.63" width="320.39" height="357.55"></rect> + <path d="M2271.84,349.73 L2271.84,1122.23 C2271.84,1148.42 2250.61,1169.65 2224.42,1169.65 L1052.64,1169.65 C1026.44,1169.65 1005.21,1148.42 1005.21,1122.23 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2271.84,349.73 L2271.84,1038.67 L1005.21,1038.67 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(1638.535, 668.87) rotate(90) translate(-1638.535, -668.87)" x="1318.735" y="82.325" width="639.6" height="1173.09"></rect> + <path d="M2067.89,1590.51 L2009.02,1462.54 C2003.62,1450.82 1991.9,1443.3 1979,1443.3 L1298.06,1443.3 C1285.16,1443.3 1273.44,1450.81 1268.04,1462.54 L1209.17,1590.51 C1207.07,1595.06 1206.1,1599.75 1206.1,1604.32 L1206.1,1611.17 C1206.1,1628.56 1220.11,1644.21 1239.19,1644.21 L2037.86,1644.21 C2056.94,1644.21 2070.95,1628.56 2070.95,1611.17 L2070.95,1604.32 C2070.95,1599.74 2069.98,1595.06 2067.88,1590.51 L2067.89,1590.51 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1120.28,778.05 C1169.07,840.99 1233.87,894.35 1311.61,915.72 C1410.18,943.2 1515.58,919.87 1605.79,875.86 C1686.77,836.25 1759,780.11 1822.11,716.01 C1885.33,651.72 1939.72,579.03 1985.69,501.65 L2042.17,537.56 C1935.95,693.32 1795.21,832.51 1619.72,906.84 C1521.97,947.54 1409.15,965.56 1307.02,930.44 C1273.57,918.93 1242.26,901.73 1214.15,880.33 C1177.07,851.99 1145.82,816.87 1119.47,778.64 C1119.47,778.64 1120.28,778.05 1120.28,778.05 L1120.28,778.05 L1120.28,778.05 Z" id="Path" stroke="none" fill="#FFCDD2" fill-rule="nonzero"></path> + <path d="M2035.31,1568.41 L1976.93,1441.49 C1975.53,1438.43 1972.45,1436.47 1969.09,1436.47 L1307.98,1436.47 C1304.62,1436.47 1301.54,1438.44 1300.14,1441.49 L1241.76,1568.41 C1241.17,1569.71 1240.94,1570.92 1240.94,1572.02 L1240.94,1586.47 C1240.94,1588.51 1241.72,1590.14 1242.34,1591.09 C1243.29,1592.58 1245.49,1595.06 1249.6,1595.06 L2027.48,1595.06 C2031.59,1595.06 2033.78,1592.57 2034.74,1591.09 C2035.36,1590.14 2036.14,1588.51 2036.14,1586.47 L2036.14,1572.02 C2036.14,1570.92 2035.91,1569.71 2035.32,1568.41 L2035.31,1568.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1151.64" y="580.93" width="973.78" height="175.88" rx="87.94"></rect> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2089.33" cy="402.3" r="11.76"></circle> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2077.7895, 421.6416) rotate(-57.73) translate(-2077.7895, -421.6416)" cx="2077.7895" cy="421.641632" rx="22" ry="49.52"></ellipse> + <line x1="1959.35" y1="505" x2="2039.74" y2="479.85" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1917.08,548.83 L1947.74,546.16 C1960.11,545.08 1968.7,534.88 1965.15,523.53 L1953.56,486.48 C1950.01,475.13 1937.14,471.64 1926.36,477.81 L1899.64,493.09 C1893.32,496.7 1890.54,505.31 1892.83,512.66 L1900.33,536.64 C1902.63,543.99 1909.82,549.48 1917.08,548.84 L1917.08,548.83 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1927.09" y1="497.88" x2="1936.9" y2="529.24" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1907.68" y1="506.25" x2="1916.18" y2="533.42" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2051.59" y1="563.24" x2="2039.74" y2="479.85" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M2030.2,620.25 L2019.43,591.42 C2015.08,579.79 2020.6,567.65 2032.38,565.97 L2070.82,560.5 C2082.59,558.83 2091.28,568.95 2090.35,581.33 L2088.05,612.02 C2087.51,619.28 2080.93,625.5 2073.31,626.58 L2048.43,630.12 C2040.81,631.2 2032.76,627.07 2030.21,620.25 L2030.2,620.25 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2071.89" y1="589.31" x2="2039.37" y2="593.93" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2072.69" y1="610.43" x2="2044.49" y2="614.44" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2039.73" cy="479.85" r="66.81"></circle> + <path d="M2072.33,470.31 C2065.71,480.8 2051.83,483.94 2041.34,477.31 C2030.85,470.69 2027.71,456.81 2034.34,446.32 L2072.33,470.31 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" transform="translate(2020.6631, 437.5835) rotate(32.27) translate(-2020.6631, -437.5835)" x="2012.65809" y="426.863457" width="16.01" height="21.44" rx="8.005"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" transform="translate(2086.0664, 478.8836) rotate(32.27) translate(-2086.0664, -478.8836)" x="2078.06138" y="468.163559" width="16.01" height="21.44" rx="8.005"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFF59D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="506.13" y="276.82" width="106.33" height="615.88"></rect> + <line x1="506.13" y1="310.49" x2="612.46" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="506.13" y1="855.46" x2="612.46" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M545.16,509.38 C541.12,509.31 540.09,509.09 538.33,507.98 C536.05,506.51 534.73,504.01 534.73,501.29 C534.73,498.57 536.05,496 538.33,494.53 C540.09,493.43 541.49,493.13 545.16,493.13 L574.7,493.13 C578.15,493.13 579.62,493.5 581.31,494.82 C583.29,496.36 584.47,498.71 584.47,501.21 C584.47,503.71 583.22,506.28 581.31,507.75 C579.55,509.07 578.52,509.37 574.33,509.37 L567.42,509.37 L567.42,519.21 L574.11,519.21 C578,519.21 579.47,519.5 581.31,520.9 C583.29,522.37 584.47,524.65 584.47,527.15 C584.47,529.65 583.29,532.15 581.38,533.61 C579.76,534.86 577.85,535.37 574.69,535.37 L545.01,535.37 C541.63,535.37 540.31,535.08 538.62,534.05 C536.2,532.58 534.73,530.01 534.73,527.22 C534.73,524.65 535.91,522.22 537.96,520.75 C539.72,519.5 541.12,519.21 545.01,519.21 L552.06,519.21 L552.06,509.37 L545.15,509.37 L545.16,509.38 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M569.04,548.91 C569.04,546.12 569.7,544.28 571.17,542.81 C572.71,541.34 574.55,540.53 576.53,540.53 C579.32,540.53 582.26,542.37 583.29,544.72 C584.02,546.41 584.1,547.07 584.1,553.46 L584.1,569.77 C584.1,572.803333 584.05,574.64 583.95,575.28 C583.44,579.17 580.42,581.89 576.6,581.89 C574.47,581.89 572.27,580.86 570.8,579.25 C569.62,578 569.04,575.94 569.04,573 L569.04,569.4 L544.65,569.4 C541.71,569.4 540.09,569.03 538.4,568 C536.05,566.53 534.73,564.11 534.73,561.31 C534.73,558.51 535.98,556.17 538.11,554.62 C539.8,553.52 541.2,553.22 544.5,553.22 L569.04,553.22 L569.04,548.89 L569.04,548.91 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M580.13,619.22 C582.7,620.47 584.46,623.33 584.46,626.35 C584.46,628.33 583.58,630.54 582.26,631.93 C580.94,633.33 579.54,633.99 576.9,634.43 L545.31,640.01 C544.28,640.23 543.33,640.3 542.59,640.3 C538.18,640.3 534.73,636.77 534.73,632.37 C534.73,628.26 537.23,625.02 540.9,624.36 L550.08,622.52 L541.41,619.36 C537,617.74 534.72,614.88 534.72,611.06 C534.72,607.24 536.78,604.52 541.33,602.83 L550.07,599.6 L542.28,598.28 C537.58,597.47 534.71,594.39 534.71,590.2 C534.71,585.42 538.38,582.04 543.53,582.04 C544.19,582.04 544.85,582.11 545.51,582.19 L576.88,587.77 C581.58,588.58 584.45,591.52 584.45,595.7 C584.45,599.15 582.32,602.39 579.01,603.78 L562.77,611.05 L580.11,619.21 L580.13,619.22 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M550.23,669.98 C550.23,672.7 549.79,674.24 548.76,675.71 C547.36,677.62 545.09,678.8 542.74,678.8 C540.61,678.8 538.33,677.84 536.94,676.3 C535.62,674.83 535.1,673.14 535.1,670.35 L535.1,654.92 C535.1,651.69 535.91,649.56 537.67,648.09 C539.87,646.11 540.98,645.89 547.74,645.89 L575.37,645.89 C580.88,645.89 584.48,649.05 584.48,653.9 C584.48,656.4 583.3,658.82 581.54,660.22 C579.56,661.69 578.09,662.06 573.46,662.06 L550.24,662.06 L550.24,669.99 L550.23,669.98 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#A5D6A7" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="612.46" y="276.82" width="106.33" height="615.88"></rect> + <line x1="612.46" y1="310.49" x2="718.79" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="612.46" y1="855.46" x2="718.79" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M646.64,562.5 C642.53,557.72 640.17,551.63 640.17,545.38 C640.17,531.05 651.63,519.45 665.81,519.45 C679.99,519.45 691.6,531.13 691.6,545.46 C691.6,551.41 689.54,557.14 685.65,561.84 C682.49,565.81 679.18,567.79 675.95,567.79 C671.54,567.79 667.87,564.19 667.87,559.71 C667.87,557.8 668.68,555.74 669.85,554.64 L672.42,552.29 C674.33,550.53 675.36,547.96 675.36,545.31 C675.36,539.95 671.17,535.69 665.81,535.69 C660.45,535.69 656.26,539.95 656.26,545.24 C656.26,547.88 657.44,550.53 659.49,552.44 L661.25,554.13 C662.65,555.45 663.6,557.66 663.6,559.71 C663.6,563.97 659.85,567.79 655.67,567.79 C652.73,567.79 649.65,565.95 646.63,562.5 L646.64,562.5 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,572.05 C656.7,572.05 659.94,575.28 659.94,579.4 C659.94,581.38 659.28,583.07 657.59,585.13 C654.87,588.66 654.58,589.1 654.58,590.27 C654.58,591.52 655.46,592.33 656.71,592.33 C657.59,592.33 658.18,591.96 658.77,591.08 C659.06,590.64 659.21,590.42 660.17,587.85 C660.61,586.53 661.05,585.21 661.57,583.88 C664.07,576.75 668.7,573.23 675.53,573.23 C685.08,573.23 691.62,580.58 691.62,591.23 C691.62,600.05 686.92,606.95 680.89,606.95 C677,606.95 674.2,604.31 674.2,600.63 C674.2,598.43 674.93,596.66 676.99,593.94 C678.39,592.25 678.75,591.44 678.75,590.56 C678.75,589.53 677.87,588.65 676.84,588.65 C675.37,588.65 674.71,589.68 673.46,593.5 C672.21,597.69 670.23,601.66 668.32,603.93 C665.82,606.94 661.41,608.85 656.79,608.85 C652.17,608.85 648.12,607.16 645.11,604.22 C641.8,600.91 640.19,596.51 640.19,590.48 C640.19,580.05 645.63,572.04 652.61,572.04 L652.59,572.05 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,613.49 C656.7,613.49 659.94,616.72 659.94,620.84 C659.94,622.82 659.28,624.51 657.59,626.57 C654.87,630.1 654.58,630.54 654.58,631.71 C654.58,632.96 655.46,633.77 656.71,633.77 C657.59,633.77 658.18,633.4 658.77,632.52 C659.06,632.08 659.21,631.86 660.17,629.29 C660.61,627.97 661.05,626.65 661.57,625.32 C664.07,618.19 668.7,614.67 675.53,614.67 C685.08,614.67 691.62,622.02 691.62,632.67 C691.62,641.49 686.92,648.39 680.89,648.39 C677,648.39 674.2,645.75 674.2,642.07 C674.2,639.87 674.93,638.1 676.99,635.38 C678.39,633.69 678.75,632.88 678.75,632 C678.75,630.97 677.87,630.09 676.84,630.09 C675.37,630.09 674.71,631.12 673.46,634.94 C672.21,639.13 670.23,643.1 668.32,645.37 C665.82,648.38 661.41,650.29 656.79,650.29 C652.17,650.29 648.12,648.6 645.11,645.66 C641.8,642.35 640.19,637.95 640.19,631.92 C640.19,621.49 645.63,613.48 652.61,613.48 L652.59,613.49 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2960.51087,1360.04 L2960.11,1388.43 C2960.1,1389.21 2959.98,1389.99 2959.75,1390.78 L2902.17,1585.76 C2897.66,1601.03 2876,1611.63 2854.05,1608.93 L2675.08,1586.95 C2659.46,1585.04 2650.29,1576.68 2650.42842,1566.62 L2650.83,1538.22 C2650.88,1534.87 2651.95,1531.34 2654.16,1527.8 L2768.33,1344.56 C2773.38,1336.46 2789.74,1331.18 2805.06,1332.58 L2935.8,1344.47 C2950.25,1345.79 2960.62,1352.44 2960.51087,1360.06 L2960.51087,1360.04 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2854.44,1580.53 L2675.47,1558.55 C2654.65,1555.99 2645.29,1542.02 2654.15,1527.79 L2768.32,1344.54 C2773.36,1336.44 2789.73,1331.16 2805.05,1332.56 L2935.79,1344.45 C2951.71,1345.9 2962.66,1353.83 2960.14,1362.38 L2902.56,1557.36 C2898.05,1572.62 2876.39,1583.23 2854.44,1580.53 L2854.44,1580.53 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B0BEC5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2889.2,1354.81 L2837.9,1350.05 C2834.27,1349.71 2832.12,1347.9 2833.09,1346 L2833.09,1346 C2834.06,1344.12 2837.75,1342.87 2841.34,1343.2 L2892.08,1347.86 C2895.73,1348.19 2898.06,1350.01 2897.29,1351.93 L2897.29,1351.93 C2896.51,1353.86 2892.89,1355.15 2889.2,1354.81 L2889.2,1354.81 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2786.84,1409.97 C2786.48,1409.56 2786.43,1409.11 2786.7,1408.61 L2787.93,1406.32 L2774.92,1405.01 C2774.28,1404.94 2773.78,1404.76 2773.44,1404.45 C2773.1,1404.15 2772.96,1403.79 2773.02,1403.38 L2773.79,1399.18 C2773.85,1398.92 2774.01,1398.66 2774.26,1398.39 C2774.51,1398.13 2774.84,1397.9 2775.23,1397.73 L2798.58,1386.99 C2799.26,1386.64 2800.04,1386.51 2800.9,1386.59 L2809.81,1387.46 C2810.56,1387.53 2811.11,1387.76 2811.45,1388.13 C2811.8,1388.5 2811.85,1388.92 2811.61,1389.39 L2806.21,1399.92 L2807.59,1400.06 C2808.35,1400.14 2808.92,1400.37 2809.28,1400.77 C2809.65,1401.17 2809.71,1401.61 2809.46,1402.1 L2807.29,1406.39 C2807.04,1406.88 2806.55,1407.28 2805.83,1407.57 C2805.1,1407.87 2804.35,1407.98 2803.58,1407.9 L2802.18,1407.76 L2801,1410.06 C2800.75,1410.56 2800.26,1410.96 2799.55,1411.26 C2798.84,1411.56 2798.09,1411.67 2797.32,1411.6 L2788.52,1410.71 C2787.75,1410.63 2787.18,1410.39 2786.82,1409.98 L2786.84,1409.97 Z M2793.65,1399.29 C2793.93,1399.32 2794.21,1399.29 2794.5,1399.23 C2794.79,1399.16 2795.01,1399.05 2795.18,1398.9 C2795.27,1398.81 2795.5,1398.41 2795.88,1397.71 C2796.23,1397.05 2796.42,1396.66 2796.44,1396.53 C2796.47,1396.4 2796.37,1396.27 2796.15,1396.13 C2795.96,1396.02 2795.72,1395.94 2795.45,1395.92 C2795.21,1395.9 2794.99,1395.92 2794.8,1395.96 C2794.6,1396.01 2794.16,1396.19 2793.48,1396.49 C2792.79,1396.79 2791.87,1397.21 2790.7,1397.74 C2790.14,1398 2789.99,1398.28 2790.25,1398.58 C2790.51,1398.88 2791,1399.07 2791.72,1399.14 C2792.37,1399.18 2793.02,1399.23 2793.66,1399.3 L2793.65,1399.29 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2812.97,1401.73 C2812.54,1401.32 2812.45,1400.88 2812.69,1400.4 L2815.54,1394.73 C2815.78,1394.26 2816.28,1393.88 2817.05,1393.6 C2817.82,1393.32 2818.62,1393.22 2819.45,1393.31 L2828.53,1394.21 C2829.37,1394.29 2829.99,1394.53 2830.41,1394.93 C2830.83,1395.33 2830.92,1395.76 2830.69,1396.24 L2827.97,1401.93 C2827.74,1402.42 2827.25,1402.8 2826.49,1403.09 C2825.74,1403.38 2824.94,1403.48 2824.09,1403.4 L2814.89,1402.48 C2814.04,1402.4 2813.41,1402.15 2812.97,1401.74 L2812.97,1401.73 Z M2807.77,1412.09 C2807.34,1411.67 2807.24,1411.21 2807.49,1410.71 L2810.43,1404.86 C2810.68,1404.37 2811.19,1403.98 2811.97,1403.7 C2812.75,1403.42 2813.56,1403.31 2814.41,1403.4 L2823.62,1404.32 C2824.47,1404.41 2825.1,1404.65 2825.52,1405.06 C2825.94,1405.47 2826.03,1405.92 2825.8,1406.41 L2822.99,1412.28 C2822.75,1412.78 2822.25,1413.18 2821.48,1413.48 C2820.71,1413.78 2819.9,1413.88 2819.04,1413.8 L2809.7,1412.85 C2808.84,1412.76 2808.19,1412.51 2807.76,1412.09 L2807.77,1412.09 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2833.62,1413.98 C2831.38,1412.59 2829.96,1410.85 2829.34,1408.76 C2828.72,1406.68 2828.99,1404.44 2830.14,1402.03 C2831.26,1399.66 2833.03,1397.62 2835.44,1395.9 C2837.83,1394.19 2840.61,1392.94 2843.79,1392.17 C2846.95,1391.39 2850.2,1391.17 2853.55,1391.5 C2856.9,1391.83 2859.68,1392.64 2861.9,1393.95 C2864.13,1395.26 2865.61,1396.92 2866.33,1398.94 C2867.05,1400.97 2866.92,1403.19 2865.9,1405.6 C2864.88,1408.01 2863.2,1410.12 2860.82,1411.91 C2858.42,1413.72 2855.59,1415.04 2852.33,1415.88 C2849.05,1416.72 2845.68,1416.96 2842.21,1416.61 C2838.74,1416.26 2835.88,1415.38 2833.64,1413.99 L2833.62,1413.98 Z M2850.07,1406.39 C2851.03,1405.37 2851.73,1404.37 2852.16,1403.39 C2852.69,1402.19 2852.64,1401.34 2852.02,1400.85 C2851.4,1400.36 2850.58,1400.06 2849.57,1399.96 C2848.56,1399.86 2847.59,1400.02 2846.64,1400.44 C2845.69,1400.86 2844.98,1401.59 2844.51,1402.63 C2844.1,1403.53 2843.9,1404.56 2843.91,1405.72 C2843.91,1406.88 2844.72,1407.54 2846.31,1407.7 C2847.86,1407.86 2849.12,1407.42 2850.08,1406.39 L2850.07,1406.39 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2880.45,1419.46 C2880.03,1419.04 2879.92,1418.57 2880.12,1418.07 L2881.04,1415.72 L2867.7,1414.37 C2867.04,1414.3 2866.52,1414.11 2866.13,1413.8 C2865.74,1413.49 2865.55,1413.12 2865.56,1412.7 L2865.75,1408.39 C2865.78,1408.12 2865.9,1407.85 2866.12,1407.58 C2866.34,1407.31 2866.64,1407.08 2867.01,1406.9 L2889.08,1395.88 C2889.72,1395.52 2890.48,1395.38 2891.37,1395.47 L2900.49,1396.36 C2901.26,1396.44 2901.84,1396.66 2902.24,1397.04 C2902.64,1397.42 2902.76,1397.85 2902.58,1398.33 L2898.61,1409.14 L2900.03,1409.28 C2900.81,1409.36 2901.42,1409.6 2901.84,1410.01 C2902.27,1410.42 2902.39,1410.87 2902.21,1411.37 L2900.62,1415.77 C2900.44,1416.27 2900,1416.68 2899.31,1416.98 C2898.62,1417.29 2897.88,1417.4 2897.09,1417.32 L2895.66,1417.18 L2894.79,1419.54 C2894.6,1420.05 2894.17,1420.46 2893.49,1420.77 C2892.81,1421.08 2892.07,1421.2 2891.28,1421.12 L2882.26,1420.21 C2881.47,1420.13 2880.86,1419.88 2880.44,1419.46 L2880.45,1419.46 Z M2885.82,1408.5 C2886.11,1408.53 2886.39,1408.5 2886.67,1408.44 C2886.95,1408.37 2887.17,1408.26 2887.31,1408.1 C2887.39,1408.01 2887.57,1407.6 2887.84,1406.88 C2888.1,1406.2 2888.23,1405.8 2888.24,1405.67 C2888.24,1405.54 2888.13,1405.4 2887.89,1405.25 C2887.68,1405.13 2887.43,1405.06 2887.15,1405.03 C2886.91,1405.01 2886.69,1405.03 2886.5,1405.07 C2886.31,1405.12 2885.89,1405.31 2885.24,1405.62 C2884.59,1405.93 2883.71,1406.36 2882.61,1406.9 C2882.08,1407.16 2881.97,1407.45 2882.27,1407.76 C2882.57,1408.07 2883.09,1408.26 2883.83,1408.34 C2884.49,1408.38 2885.16,1408.44 2885.81,1408.5 L2885.82,1408.5 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2847.38,1546.79 L2710.77,1530.6 C2696.58,1528.92 2689.7,1519.69 2695.24,1510.2 L2695.24,1510.2 C2700.65,1500.94 2715.93,1494.85 2729.54,1496.39 L2860.43,1511.27 C2874.57,1512.88 2883.5,1521.92 2880.25,1531.67 L2880.25,1531.67 C2876.92,1541.67 2862.14,1548.54 2847.36,1546.79 L2847.38,1546.79 Z" id="Path" stroke="none" fill="#CFD8DC" fill-rule="nonzero"></path> + <path d="M2739.7,1515.36 C2735.87,1522.69 2723.91,1527.7 2713.07,1526.42 C2702.26,1525.15 2696.97,1518.14 2701.14,1510.89 C2705.24,1503.77 2716.96,1499.07 2727.43,1500.26 C2737.93,1501.46 2743.46,1508.17 2739.7,1515.36 L2739.7,1515.36 Z" id="Path" stroke="none" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M2542.38,1093.43 C2497.62,1093.43 2461.33,1108.53 2461.33,1127.15 L2461.33,1352.61 C2461.33,1371.23 2497.62,1386.33 2542.38,1386.33 C2587.14,1386.33 2623.43,1371.23 2623.43,1352.61 L2623.43,1127.15 C2623.43,1108.53 2587.14,1093.43 2542.38,1093.43 L2542.38,1093.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2623.84,1061.5 L2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2598.09,1050.94 C2599.72,1046.96 2604.28,1045.05 2608.26,1046.68 L2619.59,1051.33 C2623.57,1052.96 2625.48,1057.51 2623.84,1061.5 L2623.84,1061.5 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2616.96,1078.29 L2616.96,1078.29 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2512.74,1078.7 L2527.77,1141.87 C2519.19,1141.11 2511.12,1139.66 2503.98,1137.6 L2476.92,1023.82 C2475.5,1017.86 2479.18,1011.89 2485.13,1010.48 C2485.99,1010.27 2486.86,1010.18 2487.71,1010.18 C2492.72,1010.18 2497.26,1013.6 2498.47,1018.69 L2499.75,1024.08 L2512.74,1078.7 L2512.74,1078.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2505.2199, 1051.6457) rotate(-13.38) translate(-2505.2199, -1051.6457)" x="2496.11986" y="1023.51067" width="18.2" height="56.27" rx="9.1"></rect> + <path d="M2571.7,1030.13 L2571.34,1032.96 L2567.89,1060.37 L2557.63,1141.82 C2552.69,1142.29 2547.57,1142.53 2542.37,1142.53 C2539.66,1142.53 2536.98,1142.47 2534.34,1142.33 L2545.04,1057.48 L2548.46,1030.32 L2548.85,1027.25 L2556.31,1028.19 L2563.68,1029.12 L2571.7,1030.13 L2571.7,1030.13 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2591.42,1022.57 C2589.34,1039.08 2572.41,1065.5 2555.91,1063.42 C2539.41,1061.34 2529.56,1031.54 2531.64,1015.04 C2533.72,998.53 2548.79,986.84 2565.3,988.92 C2581.81,991 2593.5,1006.07 2591.42,1022.58 L2591.42,1022.57 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2550.79,1013.92 C2553.27,1017.12 2558.54,1029.25 2555.34,1031.74 C2552.14,1034.23 2541.69,1026.11 2539.21,1022.91 C2536.73,1019.71 2537.31,1015.11 2540.51,1012.63 C2543.71,1010.15 2548.31,1010.73 2550.79,1013.93 L2550.79,1013.92 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2572.58,1016.66 C2569.38,1019.14 2561.27,1029.59 2563.75,1032.79 C2566.23,1035.99 2578.37,1030.72 2581.57,1028.24 C2584.77,1025.76 2585.35,1021.16 2582.87,1017.96 C2580.39,1014.76 2575.79,1014.18 2572.59,1016.66 L2572.58,1016.66 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2481.72,1125.09 C2481.93,1126.05 2484.94,1130.36 2495.6,1134.71 C2495.94,1134.85 2496.28,1134.99 2496.63,1135.12 C2498.94,1136.02 2501.4,1136.85 2503.98,1137.6 C2511.12,1139.66 2519.19,1141.11 2527.77,1141.87 C2529.93,1142.08 2532.12,1142.23 2534.34,1142.33 C2536.98,1142.47 2539.66,1142.53 2542.37,1142.53 C2547.57,1142.53 2552.69,1142.29 2557.63,1141.82 C2558.75,1141.72 2559.86,1141.6 2560.97,1141.47 L2560.97,1141.47 C2571.1,1140.29 2580.4,1138.13 2588.11,1135.12 C2588.46,1134.99 2588.8,1134.85 2589.13,1134.71 C2591.4,1133.79 2593.32,1132.87 2594.94,1131.97 C2600.94,1128.68 2602.85,1125.85 2603.02,1125.09" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2312.14,1465.72 L2257.19,1490.2 C2245.32,1495.49 2231.82,1495.79 2219.72,1491.05 C2166.25,1470.08 2112.78,1449.1 2059.31,1428.13 C2038.75,1420.07 2038.1,1391.21 2058.27,1382.22 L2087.96,1368.99 C2106.25,1360.84 2126.04,1356.54 2146.07,1356.51975 C2160.19,1356.5 2175.72,1357.66 2192.26,1360.77 C2249.59,1371.51 2291.85,1400.46 2318.56,1424.39 C2332.03,1436.45 2328.66,1458.36 2312.14,1465.72 L2312.14,1465.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M869.1,838.92 C863.82,855.85 852.58,871 836.23,880.95 C800.55,902.65 754.04,891.31 732.34,855.63 C710.64,819.95 721.98,773.44 757.66,751.74 C774.01,741.8 792.63,738.79 810.1,741.89 C787.91,759.6 781.81,791.44 796.95,816.34 C812.09,841.24 843.17,850.47 869.1,838.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFF9C4" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="755.38" cy="789.42" r="8.86"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="759.38" cy="841.85" r="15.66"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="800.6" cy="852.3" r="9.86"></circle> + <text id="hero-wordmark" x="1638" y="675" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="64" font-weight="600" fill="#465362"><!-- HTML e pessoas --></text> + <g id="donut-before" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(667.33, 1245.92)" stroke-linecap="round" stroke-linejoin="round"> + <path d="M214.51,61.42 C96.04,61.42 0,101.37 0,150.66 L0,159.18 C0,179.91 17,198.99 45.5,214.14 C70.5,242.91 136.73,263.47 214.51,263.47 C292.29,263.47 358.52,242.91 383.52,214.14 C412.03,198.99 429.02,179.91 429.02,159.18 L429.02,150.66 C429.02,101.38 332.98,61.42 214.51,61.42 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M358.92,125.89 C362.98,109.25 360.39,90.57 352.4,77.44 C315.12,16.18 231.46,16.18 214.51,16.18 C197.56,16.18 114.04,16.18 76.71,77.3 C68.92,90.05 66.32,108.08 69.86,124.48 C69.97,124.98 70.08,125.46 70.18,125.91 C70.81,128.7 71.34,130.53 71.52,131.16 C95.71,213.44 196.18,213.44 214.51,213.44 C232.84,213.44 333.31,213.44 357.5,131.16 C357.99,129.5 358.44,127.82 358.84,126.18 C358.86,126.09 358.89,125.99 358.91,125.9 L358.92,125.89 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero"></path> + <path d="M357.76,80.84 C361.79,96.21 359.22,113.46 351.3,125.58 C314.32,182.15 231.33,182.15 214.52,182.15 C197.71,182.15 114.85,182.15 77.82,125.71 C70.1,113.94 67.51,97.29 71.02,82.15 C71.13,81.69 71.23,81.24 71.34,80.83 C71.97,78.25 72.49,76.57 72.67,75.98 C96.67,0 196.33,0 214.51,0 C232.69,0 332.36,0 356.35,75.98 C356.84,77.51 357.28,79.06 357.68,80.58 C357.7,80.67 357.73,80.76 357.75,80.84 L357.76,80.84 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero"></path> + <line x1="102.23" y1="90.22" x2="113.31" y2="80.03" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="180.65" y1="86.35" x2="191.28" y2="97.99" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="258.18" y1="142.62" x2="267.49" y2="133.41" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="294.07" y1="58.32" x2="306.03" y2="64.08" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="271.03" y1="79.55" x2="265.11" y2="91.07" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="317.99" y1="97.31" x2="333.06" y2="99.52" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="222.3" y1="18.91" x2="232.93" y2="15.03" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="126.6" y1="35.4" x2="139.45" y2="32.24" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="133.02" y1="124.67" x2="150.97" y2="135.83" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="202.36" y1="144.56" x2="216.98" y2="134.86" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="221.85" y1="75.67" x2="236.92" y2="82.95" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="144.76" y1="75.67" x2="148.75" y2="91.07" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="104.89" y1="117.25" x2="113.31" y2="112.37" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="329.07" y1="76.49" x2="334.39" y2="68.95" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="300.05" y1="123.01" x2="317.11" y2="128.1" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <line x1="180.21" y1="20.85" x2="194.83" y2="29.58" id="Path" stroke="#FFFFFF" stroke-width="10"></line> + <path d="M171.65,32.37 C171.65,58.41 260.05,58.41 260.05,32.37" id="Path" stroke="#465362" stroke-width="10"></path> + </g> + <g id="donut-after" opacity="0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(667.33, 1245.92)"> + <path d="M214.51,61.43 C96.04,61.43 0,101.39 0,150.67 L0,159.19 C0,179.92 17,199 45.5,214.15 C70.5,242.92 136.73,263.48 214.51,263.48 C292.29,263.48 358.52,242.92 383.52,214.15 C412.03,199 429.02,179.92 429.02,159.19 L429.02,150.67 C429.02,101.39 332.98,61.43 214.51,61.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M352.4,77.46 C342.83,62.13 327.95,56.62 323.24,54.96 C301.02,47.1 274.48,53.25 257.96,69.72 C252.57,75.11 240.65,87 242.16,104.21 C243.77,122.53 259.36,132.87 261.65,134.33 C259.75,137 245.78,157.19 248.82,180.13 C249.3,183.71 250.19,187.37 251.61,191.04 C254.63,198.84 259.23,204.64 263.37,208.72 C240.92,213.46 221.59,213.46 214.51,213.46 C196.17,213.46 95.71,213.46 71.51,131.17 C71.33,130.54 70.8,128.72 70.17,125.93 C70.07,125.47 69.96,124.99 69.85,124.49 C67.88,115.36 67.81,105.74 69.49,96.8 C70.81,89.67 73.25,82.98 76.7,77.32 C114.03,16.19 197.58,16.19 214.51,16.19 C227.45,16.19 279.34,16.19 319.74,43.51 C332.22,51.95 343.6,63 352.4,77.46 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.61,96.92 C356.49,83.38 345.32,67.52 327.37,63.23 C311.51,59.43 298.47,66.6 295.18,68.54 C264.58,66.36 242.56,85.91 242.16,104.21 C241.79,121.07 259.86,133.17 261.65,134.33 C259.75,137 245.78,157.19 248.82,180.13 C232.85,182.17 220.07,182.17 214.51,182.17 C197.71,182.17 114.84,182.17 77.81,125.72 C72.53,117.68 69.65,107.37 69.49,96.8 C69.4,91.91 69.9,86.96 71.01,82.16 C71.12,81.7 71.23,81.25 71.33,80.84 C71.96,78.26 72.48,76.57 72.66,75.99 C96.66,0 196.32,0 214.51,0 C232.7,0 332.35,0 356.35,75.99 C356.76,77.28 357.14,78.59 357.48,79.87 C357.55,80.11 357.62,80.35 357.68,80.59 C357.71,80.68 357.73,80.77 357.75,80.85 C359.12,86.08 359.73,91.53 359.61,96.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="102.23" y1="90.24" x2="113.31" y2="80.05" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="180.65" y1="86.36" x2="191.28" y2="98.01" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="222.3" y1="18.93" x2="232.93" y2="15.04" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="126.6" y1="35.42" x2="139.45" y2="32.25" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="133.02" y1="124.69" x2="150.97" y2="135.85" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="202.36" y1="144.58" x2="216.98" y2="134.88" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="221.85" y1="75.69" x2="236.92" y2="82.97" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M360.62,104.84 C359.33,122.29 351.12,138.93 338.45,149.1 C329.59,156.2 320.04,158.97 313.5,160.15 C313.14,160.22 312.79,160.27 312.45,160.33 C295.29,160.63 280.45,166.65 271.41,176.07 C267.68,179.95 264.94,184.4 263.42,189.27 C262.29,192.9 260.96,199.58 263.4,208.71 C263.41,208.73 263.41,208.75 263.42,208.77 C263.4,208.75 263.39,208.74 263.37,208.72 C259.23,204.64 254.63,198.84 251.61,191.04 C250.19,187.37 249.3,183.71 248.82,180.13 C245.78,157.19 259.75,137 261.65,134.33 C259.86,133.17 241.79,121.07 242.16,104.21 C242.56,85.91 264.58,66.36 295.18,68.54 C298.47,66.6 311.51,59.43 327.37,63.22 C345.32,67.52 356.48,83.38 359.61,96.91 C360.34,100.08 360.56,102.83 360.62,104.83 L360.62,104.84 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E8D0C1" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="144.76" y1="75.69" x2="148.75" y2="91.09" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="104.89" y1="117.26" x2="113.31" y2="112.39" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="180.21" y1="20.87" x2="194.83" y2="29.6" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M171.65,32.39 C171.65,58.43 260.05,58.43 260.05,32.39" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M263.4,208.71 C263.4,208.71 263.41,208.75 263.42,208.77 C263.4,208.75 263.39,208.74 263.37,208.72 C263.38,208.72 263.39,208.72 263.4,208.72 L263.4,208.71 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E2C7B5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.61,96.92 C358.28,89.8 355.84,83.11 352.4,77.46 C357.11,85.01 358.87,92.27 359.61,96.92 L359.61,96.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#E2C7B5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M338.91,180.78 C338.91,183.78 336.25,185.59 334.28,187.56 C332.31,189.53 330.5,193.65 327.5,193.65 C324.5,193.65 320.38,191.84 318.41,189.87 C316.44,187.9 316.04,183.78 316.04,180.78 C316.04,177.78 317.11,174.33 319.08,172.36 C321.05,170.39 324.49,170.15 327.5,170.15 C330.51,170.15 333.78,170.56 335.75,172.53 C337.72,174.5 338.91,177.77 338.91,180.78 L338.91,180.78 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + <path d="M305.37,211.14 C305.37,214.14 304.73,217.33 302.76,219.3 C300.79,221.27 297.6,221.230061 294.6,221.230061 C291.6,221.230061 288.64,221.03 286.68,219.06 C284.72,217.09 285.36,214.14 285.36,211.14 C285.36,208.14 284.25,204.72 286.22,202.75 C288.19,200.78 291.6,198.75 294.61,198.75 C297.62,198.75 300.93,200.89 302.89,202.86 C304.85,204.83 305.38,208.14 305.38,211.14 L305.37,211.14 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + <path d="M372.77,182.17 C372.77,184.29 372.13,185.75 370.74,187.14 C369.35,188.53 367.89,189.83 365.77,189.83 C363.65,189.83 361.63,189.08 360.24,187.69 C358.85,186.3 358.21,184.28 358.21,182.16 C358.21,180.04 359.04,178.21 360.43,176.82 C361.82,175.43 363.65,175.85 365.77,175.85 C367.89,175.85 369.74,175.41 371.13,176.8 C372.52,178.19 372.77,180.03 372.77,182.16 L372.77,182.17 Z" id="Path" fill="#E8D0C1" fill-rule="nonzero"></path> + </g> + <g id="coffee-before" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(276.2, 1312.86)"> + <path d="M153.19,181.93 C68.59,181.93 0,210.46 0,245.66 L0,251.75 C0,286.95 68.59,315.48 153.19,315.48 C237.79,315.48 306.38,286.95 306.38,251.75 L306.38,245.66 C306.38,210.46 237.79,181.93 153.19,181.93 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="253.12" cy="93.16" r="57.79"></circle> + <path d="M153.19,0 C85.92,0 31.39,22.68 31.39,50.67 L31.39,226.81 C31.39,254.79 85.92,277.48 153.19,277.48 C220.46,277.48 274.99,254.8 274.99,226.81 L274.99,50.67 C274.99,22.69 220.46,0 153.19,0 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M256.68,44.04 C256.31,45.67 251.17,53.05 232.98,60.46 C232.41,60.69 231.83,60.92 231.23,61.15 C210.33,69.3 182.6,73.79 153.18,73.79 C123.76,73.79 96.04,69.3 75.14,61.15 C74.55,60.92 73.95,60.69 73.38,60.46 C55.19,53.04 50.06,45.67 49.69,44.04" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M232.99,60.45 C232.42,60.68 231.84,60.91 231.24,61.14 C210.34,69.29 182.61,73.78 153.19,73.78 C123.77,73.78 96.05,69.29 75.15,61.14 C74.56,60.91 73.96,60.68 73.39,60.45 C73.96,60.21 74.56,59.98 75.15,59.75 C96.05,51.6 123.78,47.12 153.19,47.12 C182.6,47.12 210.34,51.61 231.24,59.75 C231.83,59.98 232.42,60.21 232.99,60.45 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B9937E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M166.98,122.86 C170.25,132.8 173.53,142.69 176.8,152.53 C187.39,151.9 197.95,150.75 208.45,149.08 C217.88,147.52 221.77,158.81 214.17,165.82 C205.69,173.53 197.17,180.9 188.63,187.92 C191.89,197.64 195.15,207.31 198.41,216.94 C201.33,225.59 191.03,234.45 183.34,229.44 C174.79,223.92 166.21,218.06 157.63,211.86 C149.05,218.06 140.48,223.92 131.92,229.44 C124.23,234.45 113.93,225.59 116.85,216.94 C120.11,207.32 123.37,197.65 126.63,187.92 C118.08,180.89 109.56,173.53 101.09,165.82 C93.49,158.81 97.38,147.52 106.81,149.08 C117.31,150.75 127.87,151.9 138.46,152.53 C141.73,142.69 145,132.8 148.28,122.86 C151.22,114.01 164.04,114.01 166.98,122.86 L166.98,122.86 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="100.82" cy="114.78" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="243.67" cy="181.93" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="85.15" cy="181.93" r="4.98"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="216.03" cy="104.1" r="15.92"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="65.22" cy="216.77" r="8.16"></circle> + </g> + <g id="coffee-after" opacity="0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(276.55, 1312.55)"> + <path d="M153.19,181.93 C68.59,181.93 0,210.46 0,245.66 L0,251.75 C0,286.95 68.59,315.48 153.19,315.48 C237.79,315.48 306.38,286.95 306.38,251.75 L306.38,245.66 C306.38,210.46 237.79,181.93 153.19,181.93 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="253.12" cy="93.17" r="57.79"></circle> + <path d="M153.19,0 C85.92,0 31.39,22.68 31.39,50.67 L31.39,226.81 C31.39,254.79 85.92,277.48 153.19,277.48 C220.46,277.48 274.99,254.8 274.99,226.81 L274.99,50.67 C274.99,22.69 220.46,0 153.19,0 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M256.68,44.04 C256.31,45.67 251.17,53.05 232.98,60.46 C232.41,60.69 231.83,60.92 231.23,61.15 C210.33,69.3 182.6,73.79 153.18,73.79 C123.76,73.79 96.04,69.3 75.14,61.15 C74.55,60.92 73.95,60.69 73.38,60.46 C55.19,53.04 50.06,45.67 49.69,44.04" id="Path" stroke="#465362" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M166.97,122.86 C170.24,132.8 173.52,142.69 176.79,152.53 C187.38,151.9 197.94,150.75 208.44,149.08 C217.87,147.52 221.76,158.81 214.16,165.82 C205.68,173.53 197.16,180.9 188.62,187.92 C191.88,197.64 195.14,207.31 198.4,216.94 C201.32,225.59 191.02,234.45 183.33,229.44 C174.78,223.92 166.2,218.06 157.62,211.86 C149.04,218.06 140.47,223.92 131.91,229.44 C124.22,234.45 113.92,225.59 116.84,216.94 C120.1,207.32 123.36,197.65 126.62,187.92 C118.07,180.89 109.55,173.53 101.08,165.82 C93.48,158.81 97.37,147.52 106.8,149.08 C117.3,150.75 127.86,151.9 138.45,152.53 C141.72,142.69 144.99,132.8 148.27,122.86 C151.21,114.01 164.03,114.01 166.97,122.86 L166.97,122.86 Z" id="Path" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="100.82" cy="114.79" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="243.67" cy="181.93" r="10.69"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="85.15" cy="181.93" r="4.98"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="216.02" cy="104.1" r="15.92"></circle> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="65.22" cy="216.77" r="8.16"></circle> + </g> + <g id="sparkle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(2296.7975, 214.8175)"> + <path d="M54.8325,30.2125 C41.0825,35.5425 35.5425,41.0825 30.2125,54.8325 C29.4725,56.7425 26.7925,56.7425 26.0525,54.8325 C20.7225,41.0825 15.1825,35.5425 1.4325,30.2125 C-0.4775,29.4725 -0.4775,26.7925 1.4325,26.0525 C15.1825,20.7225 20.7225,15.1825 26.0525,1.4325 C26.7925,-0.4775 29.4725,-0.4775 30.2125,1.4325 C35.5425,15.1825 41.0825,20.7225 54.8325,26.0525 C56.7425,26.7925 56.7425,29.4725 54.8325,30.2125 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M120.8625,62.6825 C107.1125,68.0125 101.5725,73.5525 96.2425,87.3025 C95.5025,89.2125 92.8225,89.2125 92.0825,87.3025 C86.7525,73.5525 81.2125,68.0125 67.4625,62.6825 C65.5525,61.9425 65.5525,59.2625 67.4625,58.5225 C81.2125,53.1925 86.7525,47.6525 92.0825,33.9025 C92.8225,31.9925 95.5025,31.9925 96.2425,33.9025 C101.5725,47.6525 107.1125,53.1925 120.8625,58.5225 C122.7725,59.2625 122.7725,61.9425 120.8625,62.6825 L120.8625,62.6825 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M71.0825,98.2425 C57.3325,103.5725 51.7925,109.1125 46.4625,122.8625 C45.7225,124.7725 43.0425,124.7725 42.3025,122.8625 C36.9725,109.1125 31.4325,103.5725 17.6825,98.2425 C15.7725,97.5025 15.7725,94.8225 17.6825,94.0825 C31.4325,88.7525 36.9725,83.2125 42.3025,69.4625 C43.0425,67.5525 45.7225,67.5525 46.4625,69.4625 C51.7925,83.2125 57.3325,88.7525 71.0825,94.0825 C72.9925,94.8225 72.9925,97.5025 71.0825,98.2425 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + </g> + <path d="M553.04,892.45 L143.55,892.45 C143.55,876.777694 156.13,864.064141 171.65,864.064141 C179.29,864.064141 186.21,867.144073 191.28,872.132552 C198.83,855.925044 215.15,844.695918 234.06,844.695918 C244.6,844.695918 254.34,848.189872 262.2,854.066987 C262.81,853.380314 263.45,852.703739 264.09,852.04736 C275.29,815.835447 308.75,789.55 348.3,789.55 C387.85,789.55 421.31,815.835447 432.5,852.04736 C433.15,852.703739 433.78,853.370216 434.4,854.066987 C442.26,848.179774 452,844.695918 462.54,844.695918 C481.45,844.695918 497.77,855.925044 505.32,872.132552 C510.39,867.133974 517.31,864.064141 524.95,864.064141 C540.47,864.064141 553.05,876.777694 553.05,892.45 L553.04,892.45 Z" id="cloud" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" opacity="0" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> + </g> + </g> +</svg></div> + <div class="hero-mobile"> + +<svg id="hero-mobile" viewBox="0 0 3000 1575" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect id="path-r14ozuxzx1-1" x="0" y="0" width="3000" height="1575"></rect> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="BWatson_OG_03"> + <mask id="mask-r14ozuxzx1-2" fill="white"> + <use xlink:href="#path-r14ozuxzx1-1"></use> + </mask> + <g id="Rectangle"></g> + <g id="Group" mask="url(#mask-r14ozuxzx1-2)"> + <g transform="translate(-157.55, -157.55)"> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="17.18" width="3197.81" height="1847.5"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFE0B2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="58.65" y="1216.84" width="3197.81" height="647.85"></rect> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2694.33" cy="828.5" r="51.45"></circle> + <line x1="2694.33" y1="777.04" x2="2694.33" y2="5.68434189e-14" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BB9C87" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2942.77" cy="828.5" r="91.14"></circle> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#ECEFF1" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2942.7393, 828.4803) rotate(-72.02) translate(-2942.7393, -828.4803)" cx="2942.73932" cy="828.480294" rx="62.9" ry="166.44"></ellipse> + <path d="M3029.46,856.63 C3013.92,904.51 2840.54,848.24 2856.08,800.36 C2871.62,752.48 2923.03,726.27 2970.9,741.81 C3018.78,757.35 3044.99,808.76 3029.45,856.63 L3029.46,856.63 Z" id="Path" stroke="#465362" stroke-width="10" fill="#BB9C87" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2944.52" y1="737.33" x2="2944.52" y2="24.53" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2869.23" cy="658.59" r="42.66"></circle> + <line x1="2869.23" y1="615.93" x2="2869.23" y2="1.07" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2716.21" y1="562.46" x2="2716.21" y2="57.97" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFF176" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2759.19" cy="405.21" r="134.15"></circle> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#CFD8DC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2575.72" cy="501.65" r="43.99"></circle> + <path d="M2578.73,689.91 C2578.73,700.64 2576.2,710.77 2571.69,719.75 C2567.73,727.67 2562.24,734.69 2555.61,740.42 C2543.92,750.52 2528.68,756.63 2512.01,756.63 C2483.82,756.63 2459.71,739.15 2449.94,714.43 C2447.74,708.85 2446.26,702.91 2445.63,696.71 C2445.41,694.47 2445.29,692.21 2445.29,689.91 C2445.29,686.81 2445.5,683.75 2445.92,680.76 C2447.41,669.85 2451.54,659.78 2457.65,651.22 C2469.75,634.26 2489.59,623.2 2512.01,623.2 C2534.43,623.2 2554.27,634.26 2566.37,651.22 C2572.48,659.78 2576.61,669.85 2578.1,680.76 C2578.52,683.75 2578.73,686.81 2578.73,689.91 L2578.73,689.91 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3058.14,533.16 C3058.14,543.43 3055.84,553.15 3051.71,561.84 C3046.81,572.21 3039.32,581.12 3030.08,587.73 C3019.09,595.6 3005.61,600.24 2991.06,600.24 C2976.51,600.24 2963.03,595.6 2952.04,587.73 C2941.07,579.86 2932.56,568.77 2927.91,555.84 C2925.36,548.76 2923.98,541.13 2923.98,533.16 C2923.98,510.67 2935.06,490.76 2952.05,478.59 C2957.85,474.43 2964.34,471.18 2971.31,469.04 C2977.56,467.12 2984.19,466.09 2991.06,466.09 C3005.61,466.09 3019.08,470.73 3030.07,478.6 C3039.31,485.22 3046.8,494.12 3051.7,504.49 C3055.82,513.19 3058.13,522.91 3058.13,533.17 L3058.14,533.16 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2986.9,505.67 C2986.9,533.74 2964.15,556.49 2936.08,556.49 C2933.3,556.49 2930.57,556.26 2927.92,555.84 C2925.37,548.76 2923.99,541.13 2923.99,533.16 C2923.99,510.67 2935.07,490.76 2952.06,478.59 C2957.86,474.43 2964.35,471.18 2971.32,469.04 C2980.93,478.28 2986.91,491.28 2986.91,505.67 L2986.9,505.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3058.14,533.16 C3058.14,543.43 3055.84,553.15 3051.71,561.84 C3040.46,557.19 3032.53,546.1 3032.53,533.16 C3032.53,520.22 3040.46,509.14 3051.71,504.48 C3055.83,513.18 3058.14,522.9 3058.14,533.16 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3030.08,478.59 C3019.09,486.46 3005.62,491.1 2991.07,491.1 C2976.52,491.1 2963.05,486.46 2952.06,478.59 C2963.05,470.72 2976.52,466.08 2991.07,466.08 C3005.62,466.08 3019.09,470.72 3030.08,478.59 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M3030.08,587.73 C3019.09,595.6 3005.61,600.24 2991.06,600.24 C2976.51,600.24 2963.03,595.6 2952.04,587.73 C2963.03,579.85 2976.51,575.22 2991.06,575.22 C3005.61,575.22 3019.09,579.86 3030.08,587.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2805.47,651.72 C2805.47,701.02 2765.51,740.98 2716.21,740.98 C2691.74,740.98 2669.57,731.13 2653.45,715.17 C2645.43,707.26 2638.91,697.82 2634.35,687.35 C2629.59,676.44 2626.95,664.39 2626.95,651.72 C2626.95,637.31 2630.36,623.7 2636.44,611.65 C2641.81,600.97 2649.27,591.51 2658.29,583.82 C2673.87,570.51 2694.1,562.47 2716.21,562.47 C2738.32,562.47 2758.54,570.51 2774.13,583.82 C2783.15,591.51 2790.61,600.97 2795.98,611.65 C2802.06,623.7 2805.47,637.32 2805.47,651.72 L2805.47,651.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCC80" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <ellipse id="Oval" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="2744.55" cy="677.6" rx="30.61" ry="13.92"></ellipse> + <path d="M2795.98,611.64 L2636.44,611.64 C2641.81,600.96 2649.27,591.5 2658.29,583.81 L2774.13,583.81 C2783.15,591.5 2790.61,600.96 2795.98,611.64 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2696.12,701.25 C2696.12,705.09 2694.57,708.57 2692.05,711.1 C2689.52,713.62 2686.05,715.17 2682.2,715.17 L2653.44,715.17 C2645.42,707.26 2638.9,697.82 2634.34,687.35 L2682.2,687.35 C2689.89,687.35 2696.12,693.58 2696.12,701.26 L2696.12,701.25 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="2759.19" y1="271.06" x2="2759.19" y2="33.45" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2991.06" y1="466.08" x2="2991.06" y2="73.58" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2575.72" y1="454.74" x2="2575.72" y2="57.78" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="2512.01" y1="623.2" x2="2512.01" y2="57.78" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="396.92 816.34 343.43 816.34 289.95 816.34 289.95 543.41 311.22 425.22 375.65 425.22 396.92 543.41"></polygon> + <path d="M337.11,887.67 L309.96,887.67 C309.96,871.63 316.04,858.63 323.54,858.63 C331.04,858.63 337.12,871.63 337.12,887.67 L337.11,887.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M377.25,887.67 L350.1,887.67 C350.1,871.63 356.18,858.63 363.68,858.63 C371.18,858.63 377.26,871.63 377.26,887.67 L377.25,887.67 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M361.95,290.55 C359.35,268.28 355.83,238 353.22,215.64 C352.64,210.67 348.44,206.93 343.44,206.93 L343.44,206.93 C338.44,206.93 334.23,210.68 333.66,215.64 L324.93,290.54 C316.49,296.41 310.96,306.17 310.96,317.22 L310.96,425.21 L375.92,425.21 L375.92,317.22 C375.92,306.16 370.39,296.4 361.95,290.54 L361.95,290.55 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M289.95,816.34 L396.92,816.34 L396.92,829.51 C396.92,846.32 383.27,859.97 366.46,859.97 L320.4,859.97 C303.59,859.97 289.94,846.32 289.94,829.51 L289.94,816.34 L289.94,816.34 L289.95,816.34 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#1565C0" fill-rule="nonzero" cx="343.43" cy="361.23" r="19.75"></circle> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="326.26" y="559.66" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="343.43" y="576.84" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(352.025, 568.255) rotate(180) translate(-352.025, -568.255)" x="343.44" y="559.67" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(334.845, 585.425) rotate(180) translate(-334.845, -585.425)" x="326.26" y="576.84" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="326.26" y="751.43" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#465362" fill-rule="nonzero" x="343.43" y="768.6" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(352.025, 760.015) rotate(180) translate(-352.025, -760.015)" x="343.44" y="751.43" width="17.17" height="17.17"></rect> + <rect id="Rectangle" stroke="none" fill="#FFFFFF" fill-rule="nonzero" transform="translate(334.845, 777.195) rotate(180) translate(-334.845, -777.195)" x="326.26" y="768.61" width="17.17" height="17.17"></rect> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="282.31 868.04 244.4 868.04 239.35 892.7 287.36 892.7"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="289.95 838.15 236.76 838.15 229.67 872.76 297.04 872.76"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="263.35 565.81 236.76 630.08 236.76 838.16 289.95 838.16 289.95 630.08"></polygon> + <line x1="236.76" y1="632.92" x2="289.95" y2="632.92" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="236.76" y1="734.12" x2="289.95" y2="734.12" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="236.76" y1="838.16" x2="289.95" y2="838.16" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="442.47 868.04 404.56 868.04 399.5 892.7 447.52 892.7"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="450.11 838.15 396.92 838.15 389.83 872.76 457.19 872.76"></polygon> + <polygon id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="423.51 565.81 396.92 630.08 396.92 838.16 450.11 838.16 450.11 630.08"></polygon> + <line x1="396.92" y1="632.92" x2="450.11" y2="632.92" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="396.92" y1="734.12" x2="450.11" y2="734.12" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="396.92" y1="838.16" x2="450.11" y2="838.16" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M-5.68434189e-14,892.7 L843.96,892.7 C858.41,892.7 870.13,904.43 870.13,918.87 L870.13,918.87 C870.13,933.32 858.4,945.04 843.96,945.04 L-5.68434189e-14,945.04 L-5.68434189e-14,892.69 L-5.68434189e-14,892.69 L-5.68434189e-14,892.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1904.67,1343.62 L1904.67,1360.64 C1904.67,1371.3 1896.08,1380.91 1884.37,1380.91 L1398.59,1380.91 C1386.88,1380.91 1378.29,1371.3 1378.29,1360.64 L1378.29,1343.62 C1378.29,1340.82 1378.88,1337.94 1380.17,1335.15 L1416.29,1256.61 C1419.6,1249.41 1426.8,1244.8 1434.72,1244.8 L1848.24,1244.8 C1856.16,1244.8 1863.35,1249.41 1866.66,1256.61 L1902.79,1335.15 C1904.08,1337.94 1904.67,1340.82 1904.67,1343.62 L1904.67,1343.62 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="1478.34" y="930.63" width="320.39" height="357.55"></rect> + <path d="M2271.84,349.73 L2271.84,1122.23 C2271.84,1148.42 2250.61,1169.65 2224.42,1169.65 L1052.64,1169.65 C1026.44,1169.65 1005.21,1148.42 1005.21,1122.23 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2271.84,349.73 L2271.84,1038.67 L1005.21,1038.67 L1005.21,349.73 C1005.21,323.54 1026.44,302.3 1052.64,302.3 L2224.42,302.3 C2250.61,302.3 2271.84,323.54 2271.84,349.73 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(1638.535, 668.87) rotate(90) translate(-1638.535, -668.87)" x="1318.735" y="82.325" width="639.6" height="1173.09"></rect> + <path d="M2067.89,1590.51 L2009.02,1462.54 C2003.62,1450.82 1991.9,1443.3 1979,1443.3 L1298.06,1443.3 C1285.16,1443.3 1273.44,1450.81 1268.04,1462.54 L1209.17,1590.51 C1207.07,1595.06 1206.1,1599.75 1206.1,1604.32 L1206.1,1611.17 C1206.1,1628.56 1220.11,1644.21 1239.19,1644.21 L2037.86,1644.21 C2056.94,1644.21 2070.95,1628.56 2070.95,1611.17 L2070.95,1604.32 C2070.95,1599.74 2069.98,1595.06 2067.88,1590.51 L2067.89,1590.51 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2035.31,1568.41 L1976.93,1441.49 C1975.53,1438.43 1972.45,1436.47 1969.09,1436.47 L1307.98,1436.47 C1304.62,1436.47 1301.54,1438.44 1300.14,1441.49 L1241.76,1568.41 C1241.17,1569.71 1240.94,1570.92 1240.94,1572.02 L1240.94,1586.47 C1240.94,1588.51 1241.72,1590.14 1242.34,1591.09 C1243.29,1592.58 1245.49,1595.06 1249.6,1595.06 L2027.48,1595.06 C2031.59,1595.06 2033.78,1592.57 2034.74,1591.09 C2035.36,1590.14 2036.14,1588.51 2036.14,1586.47 L2036.14,1572.02 C2036.14,1570.92 2035.91,1569.71 2035.32,1568.41 L2035.31,1568.41 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFF59D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="506.13" y="276.82" width="106.33" height="615.88"></rect> + <line x1="506.13" y1="310.49" x2="612.46" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="506.13" y1="855.46" x2="612.46" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M545.16,509.38 C541.12,509.31 540.09,509.09 538.33,507.98 C536.05,506.51 534.73,504.01 534.73,501.29 C534.73,498.57 536.05,496 538.33,494.53 C540.09,493.43 541.49,493.13 545.16,493.13 L574.7,493.13 C578.15,493.13 579.62,493.5 581.31,494.82 C583.29,496.36 584.47,498.71 584.47,501.21 C584.47,503.71 583.22,506.28 581.31,507.75 C579.55,509.07 578.52,509.37 574.33,509.37 L567.42,509.37 L567.42,519.21 L574.11,519.21 C578,519.21 579.47,519.5 581.31,520.9 C583.29,522.37 584.47,524.65 584.47,527.15 C584.47,529.65 583.29,532.15 581.38,533.61 C579.76,534.86 577.85,535.37 574.69,535.37 L545.01,535.37 C541.63,535.37 540.31,535.08 538.62,534.05 C536.2,532.58 534.73,530.01 534.73,527.22 C534.73,524.65 535.91,522.22 537.96,520.75 C539.72,519.5 541.12,519.21 545.01,519.21 L552.06,519.21 L552.06,509.37 L545.15,509.37 L545.16,509.38 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M569.04,548.91 C569.04,546.12 569.7,544.28 571.17,542.81 C572.71,541.34 574.55,540.53 576.53,540.53 C579.32,540.53 582.26,542.37 583.29,544.72 C584.02,546.41 584.1,547.07 584.1,553.46 L584.1,569.77 C584.1,572.803333 584.05,574.64 583.95,575.28 C583.44,579.17 580.42,581.89 576.6,581.89 C574.47,581.89 572.27,580.86 570.8,579.25 C569.62,578 569.04,575.94 569.04,573 L569.04,569.4 L544.65,569.4 C541.71,569.4 540.09,569.03 538.4,568 C536.05,566.53 534.73,564.11 534.73,561.31 C534.73,558.51 535.98,556.17 538.11,554.62 C539.8,553.52 541.2,553.22 544.5,553.22 L569.04,553.22 L569.04,548.89 L569.04,548.91 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M580.13,619.22 C582.7,620.47 584.46,623.33 584.46,626.35 C584.46,628.33 583.58,630.54 582.26,631.93 C580.94,633.33 579.54,633.99 576.9,634.43 L545.31,640.01 C544.28,640.23 543.33,640.3 542.59,640.3 C538.18,640.3 534.73,636.77 534.73,632.37 C534.73,628.26 537.23,625.02 540.9,624.36 L550.08,622.52 L541.41,619.36 C537,617.74 534.72,614.88 534.72,611.06 C534.72,607.24 536.78,604.52 541.33,602.83 L550.07,599.6 L542.28,598.28 C537.58,597.47 534.71,594.39 534.71,590.2 C534.71,585.42 538.38,582.04 543.53,582.04 C544.19,582.04 544.85,582.11 545.51,582.19 L576.88,587.77 C581.58,588.58 584.45,591.52 584.45,595.7 C584.45,599.15 582.32,602.39 579.01,603.78 L562.77,611.05 L580.11,619.21 L580.13,619.22 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M550.23,669.98 C550.23,672.7 549.79,674.24 548.76,675.71 C547.36,677.62 545.09,678.8 542.74,678.8 C540.61,678.8 538.33,677.84 536.94,676.3 C535.62,674.83 535.1,673.14 535.1,670.35 L535.1,654.92 C535.1,651.69 535.91,649.56 537.67,648.09 C539.87,646.11 540.98,645.89 547.74,645.89 L575.37,645.89 C580.88,645.89 584.48,649.05 584.48,653.9 C584.48,656.4 583.3,658.82 581.54,660.22 C579.56,661.69 578.09,662.06 573.46,662.06 L550.24,662.06 L550.24,669.99 L550.23,669.98 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#A5D6A7" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="612.46" y="276.82" width="106.33" height="615.88"></rect> + <line x1="612.46" y1="310.49" x2="718.79" y2="310.49" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="612.46" y1="855.46" x2="718.79" y2="855.46" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M646.64,562.5 C642.53,557.72 640.17,551.63 640.17,545.38 C640.17,531.05 651.63,519.45 665.81,519.45 C679.99,519.45 691.6,531.13 691.6,545.46 C691.6,551.41 689.54,557.14 685.65,561.84 C682.49,565.81 679.18,567.79 675.95,567.79 C671.54,567.79 667.87,564.19 667.87,559.71 C667.87,557.8 668.68,555.74 669.85,554.64 L672.42,552.29 C674.33,550.53 675.36,547.96 675.36,545.31 C675.36,539.95 671.17,535.69 665.81,535.69 C660.45,535.69 656.26,539.95 656.26,545.24 C656.26,547.88 657.44,550.53 659.49,552.44 L661.25,554.13 C662.65,555.45 663.6,557.66 663.6,559.71 C663.6,563.97 659.85,567.79 655.67,567.79 C652.73,567.79 649.65,565.95 646.63,562.5 L646.64,562.5 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,572.05 C656.7,572.05 659.94,575.28 659.94,579.4 C659.94,581.38 659.28,583.07 657.59,585.13 C654.87,588.66 654.58,589.1 654.58,590.27 C654.58,591.52 655.46,592.33 656.71,592.33 C657.59,592.33 658.18,591.96 658.77,591.08 C659.06,590.64 659.21,590.42 660.17,587.85 C660.61,586.53 661.05,585.21 661.57,583.88 C664.07,576.75 668.7,573.23 675.53,573.23 C685.08,573.23 691.62,580.58 691.62,591.23 C691.62,600.05 686.92,606.95 680.89,606.95 C677,606.95 674.2,604.31 674.2,600.63 C674.2,598.43 674.93,596.66 676.99,593.94 C678.39,592.25 678.75,591.44 678.75,590.56 C678.75,589.53 677.87,588.65 676.84,588.65 C675.37,588.65 674.71,589.68 673.46,593.5 C672.21,597.69 670.23,601.66 668.32,603.93 C665.82,606.94 661.41,608.85 656.79,608.85 C652.17,608.85 648.12,607.16 645.11,604.22 C641.8,600.91 640.19,596.51 640.19,590.48 C640.19,580.05 645.63,572.04 652.61,572.04 L652.59,572.05 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M652.59,613.49 C656.7,613.49 659.94,616.72 659.94,620.84 C659.94,622.82 659.28,624.51 657.59,626.57 C654.87,630.1 654.58,630.54 654.58,631.71 C654.58,632.96 655.46,633.77 656.71,633.77 C657.59,633.77 658.18,633.4 658.77,632.52 C659.06,632.08 659.21,631.86 660.17,629.29 C660.61,627.97 661.05,626.65 661.57,625.32 C664.07,618.19 668.7,614.67 675.53,614.67 C685.08,614.67 691.62,622.02 691.62,632.67 C691.62,641.49 686.92,648.39 680.89,648.39 C677,648.39 674.2,645.75 674.2,642.07 C674.2,639.87 674.93,638.1 676.99,635.38 C678.39,633.69 678.75,632.88 678.75,632 C678.75,630.97 677.87,630.09 676.84,630.09 C675.37,630.09 674.71,631.12 673.46,634.94 C672.21,639.13 670.23,643.1 668.32,645.37 C665.82,648.38 661.41,650.29 656.79,650.29 C652.17,650.29 648.12,648.6 645.11,645.66 C641.8,642.35 640.19,637.95 640.19,631.92 C640.19,621.49 645.63,613.48 652.61,613.48 L652.59,613.49 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M429.39,1494.79 C344.79,1494.79 276.2,1523.32 276.2,1558.52 L276.2,1564.61 C276.2,1599.81 344.79,1628.34 429.39,1628.34 C513.99,1628.34 582.58,1599.81 582.58,1564.61 L582.58,1558.52 C582.58,1523.32 513.99,1494.79 429.39,1494.79 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="529.32" cy="1406.02" r="57.79"></circle> + <path d="M429.39,1312.86 C362.12,1312.86 307.59,1335.54 307.59,1363.53 L307.59,1539.67 C307.59,1567.65 362.12,1590.34 429.39,1590.34 C496.66,1590.34 551.19,1567.66 551.19,1539.67 L551.19,1363.53 C551.19,1335.55 496.66,1312.86 429.39,1312.86 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M532.88,1356.9 C532.51,1358.53 527.37,1365.91 509.18,1373.32 C508.61,1373.55 508.03,1373.78 507.43,1374.01 C486.53,1382.16 458.8,1386.65 429.38,1386.65 C399.96,1386.65 372.24,1382.16 351.34,1374.01 C350.75,1373.78 350.15,1373.55 349.58,1373.32 C331.39,1365.9 326.26,1358.53 325.89,1356.9" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M509.19,1373.31 C508.62,1373.54 508.04,1373.77 507.44,1374 C486.54,1382.15 458.81,1386.64 429.39,1386.64 C399.97,1386.64 372.25,1382.15 351.35,1374 C350.76,1373.77 350.16,1373.54 349.59,1373.31 C350.16,1373.07 350.76,1372.84 351.35,1372.61 C372.25,1364.46 399.98,1359.98 429.39,1359.98 C458.8,1359.98 486.54,1364.47 507.44,1372.61 C508.03,1372.84 508.62,1373.07 509.19,1373.31 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B9937E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M443.18,1435.72 C446.45,1445.66 449.73,1455.55 453,1465.39 C463.59,1464.76 474.15,1463.61 484.65,1461.94 C494.08,1460.38 497.97,1471.67 490.37,1478.68 C481.89,1486.39 473.37,1493.76 464.83,1500.78 C468.09,1510.5 471.35,1520.17 474.61,1529.8 C477.53,1538.45 467.23,1547.31 459.54,1542.3 C450.99,1536.78 442.41,1530.92 433.83,1524.72 C425.25,1530.92 416.68,1536.78 408.12,1542.3 C400.43,1547.31 390.13,1538.45 393.05,1529.8 C396.31,1520.18 399.57,1510.51 402.83,1500.78 C394.28,1493.75 385.76,1486.39 377.29,1478.68 C369.69,1471.67 373.58,1460.38 383.01,1461.94 C393.51,1463.61 404.07,1464.76 414.66,1465.39 C417.93,1455.55 421.2,1445.66 424.48,1435.72 C427.42,1426.87 440.24,1426.87 443.18,1435.72 L443.18,1435.72 Z" id="Path" stroke="none" fill="#FFB74D" fill-rule="nonzero"></path> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="377.02" cy="1427.64" r="10.69"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="519.87" cy="1494.79" r="10.69"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="361.35" cy="1494.79" r="4.98"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="492.23" cy="1416.96" r="15.92"></circle> + <circle id="Oval" stroke="none" fill="#FFB74D" fill-rule="nonzero" cx="341.42" cy="1529.63" r="8.16"></circle> + <path d="M2960.51087,1360.04 L2960.11,1388.43 C2960.1,1389.21 2959.98,1389.99 2959.75,1390.78 L2902.17,1585.76 C2897.66,1601.03 2876,1611.63 2854.05,1608.93 L2675.08,1586.95 C2659.46,1585.04 2650.29,1576.68 2650.42842,1566.62 L2650.83,1538.22 C2650.88,1534.87 2651.95,1531.34 2654.16,1527.8 L2768.33,1344.56 C2773.38,1336.46 2789.74,1331.18 2805.06,1332.58 L2935.8,1344.47 C2950.25,1345.79 2960.62,1352.44 2960.51087,1360.06 L2960.51087,1360.04 Z" id="Path" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2854.44,1580.53 L2675.47,1558.55 C2654.65,1555.99 2645.29,1542.02 2654.15,1527.79 L2768.32,1344.54 C2773.36,1336.44 2789.73,1331.16 2805.05,1332.56 L2935.79,1344.45 C2951.71,1345.9 2962.66,1353.83 2960.14,1362.38 L2902.56,1557.36 C2898.05,1572.62 2876.39,1583.23 2854.44,1580.53 L2854.44,1580.53 Z" id="Path" stroke="#465362" stroke-width="10" fill="#B0BEC5" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2889.2,1354.81 L2837.9,1350.05 C2834.27,1349.71 2832.12,1347.9 2833.09,1346 L2833.09,1346 C2834.06,1344.12 2837.75,1342.87 2841.34,1343.2 L2892.08,1347.86 C2895.73,1348.19 2898.06,1350.01 2897.29,1351.93 L2897.29,1351.93 C2896.51,1353.86 2892.89,1355.15 2889.2,1354.81 L2889.2,1354.81 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2786.84,1409.97 C2786.48,1409.56 2786.43,1409.11 2786.7,1408.61 L2787.93,1406.32 L2774.92,1405.01 C2774.28,1404.94 2773.78,1404.76 2773.44,1404.45 C2773.1,1404.15 2772.96,1403.79 2773.02,1403.38 L2773.79,1399.18 C2773.85,1398.92 2774.01,1398.66 2774.26,1398.39 C2774.51,1398.13 2774.84,1397.9 2775.23,1397.73 L2798.58,1386.99 C2799.26,1386.64 2800.04,1386.51 2800.9,1386.59 L2809.81,1387.46 C2810.56,1387.53 2811.11,1387.76 2811.45,1388.13 C2811.8,1388.5 2811.85,1388.92 2811.61,1389.39 L2806.21,1399.92 L2807.59,1400.06 C2808.35,1400.14 2808.92,1400.37 2809.28,1400.77 C2809.65,1401.17 2809.71,1401.61 2809.46,1402.1 L2807.29,1406.39 C2807.04,1406.88 2806.55,1407.28 2805.83,1407.57 C2805.1,1407.87 2804.35,1407.98 2803.58,1407.9 L2802.18,1407.76 L2801,1410.06 C2800.75,1410.56 2800.26,1410.96 2799.55,1411.26 C2798.84,1411.56 2798.09,1411.67 2797.32,1411.6 L2788.52,1410.71 C2787.75,1410.63 2787.18,1410.39 2786.82,1409.98 L2786.84,1409.97 Z M2793.65,1399.29 C2793.93,1399.32 2794.21,1399.29 2794.5,1399.23 C2794.79,1399.16 2795.01,1399.05 2795.18,1398.9 C2795.27,1398.81 2795.5,1398.41 2795.88,1397.71 C2796.23,1397.05 2796.42,1396.66 2796.44,1396.53 C2796.47,1396.4 2796.37,1396.27 2796.15,1396.13 C2795.96,1396.02 2795.72,1395.94 2795.45,1395.92 C2795.21,1395.9 2794.99,1395.92 2794.8,1395.96 C2794.6,1396.01 2794.16,1396.19 2793.48,1396.49 C2792.79,1396.79 2791.87,1397.21 2790.7,1397.74 C2790.14,1398 2789.99,1398.28 2790.25,1398.58 C2790.51,1398.88 2791,1399.07 2791.72,1399.14 C2792.37,1399.18 2793.02,1399.23 2793.66,1399.3 L2793.65,1399.29 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2812.97,1401.73 C2812.54,1401.32 2812.45,1400.88 2812.69,1400.4 L2815.54,1394.73 C2815.78,1394.26 2816.28,1393.88 2817.05,1393.6 C2817.82,1393.32 2818.62,1393.22 2819.45,1393.31 L2828.53,1394.21 C2829.37,1394.29 2829.99,1394.53 2830.41,1394.93 C2830.83,1395.33 2830.92,1395.76 2830.69,1396.24 L2827.97,1401.93 C2827.74,1402.42 2827.25,1402.8 2826.49,1403.09 C2825.74,1403.38 2824.94,1403.48 2824.09,1403.4 L2814.89,1402.48 C2814.04,1402.4 2813.41,1402.15 2812.97,1401.74 L2812.97,1401.73 Z M2807.77,1412.09 C2807.34,1411.67 2807.24,1411.21 2807.49,1410.71 L2810.43,1404.86 C2810.68,1404.37 2811.19,1403.98 2811.97,1403.7 C2812.75,1403.42 2813.56,1403.31 2814.41,1403.4 L2823.62,1404.32 C2824.47,1404.41 2825.1,1404.65 2825.52,1405.06 C2825.94,1405.47 2826.03,1405.92 2825.8,1406.41 L2822.99,1412.28 C2822.75,1412.78 2822.25,1413.18 2821.48,1413.48 C2820.71,1413.78 2819.9,1413.88 2819.04,1413.8 L2809.7,1412.85 C2808.84,1412.76 2808.19,1412.51 2807.76,1412.09 L2807.77,1412.09 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2833.62,1413.98 C2831.38,1412.59 2829.96,1410.85 2829.34,1408.76 C2828.72,1406.68 2828.99,1404.44 2830.14,1402.03 C2831.29,1399.62 2833.03,1397.62 2835.44,1395.9 C2837.83,1394.19 2840.61,1392.94 2843.79,1392.17 C2846.95,1391.39 2850.2,1391.17 2853.55,1391.5 C2856.9,1391.83 2859.68,1392.64 2861.9,1393.95 C2864.13,1395.26 2865.61,1396.92 2866.33,1398.94 C2867.05,1400.97 2866.92,1403.19 2865.9,1405.6 C2864.88,1408.01 2863.2,1410.12 2860.82,1411.91 C2858.42,1413.72 2855.59,1415.04 2852.33,1415.88 C2849.05,1416.72 2845.68,1416.96 2842.21,1416.61 C2838.74,1416.26 2835.88,1415.38 2833.64,1413.99 L2833.62,1413.98 Z M2850.07,1406.39 C2851.03,1405.37 2851.73,1404.37 2852.16,1403.39 C2852.69,1402.19 2852.64,1401.34 2852.02,1400.85 C2851.4,1400.36 2850.58,1400.06 2849.57,1399.96 C2848.56,1399.86 2847.59,1400.02 2846.64,1400.44 C2845.69,1400.86 2844.98,1401.59 2844.51,1402.63 C2844.1,1403.53 2843.9,1404.56 2843.91,1405.72 C2843.91,1406.88 2844.72,1407.54 2846.31,1407.7 C2847.86,1407.86 2849.12,1407.42 2850.08,1406.39 L2850.07,1406.39 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2880.45,1419.46 C2880.03,1419.04 2879.92,1418.57 2880.12,1418.07 L2881.04,1415.72 L2867.7,1414.37 C2867.04,1414.3 2866.52,1414.11 2866.13,1413.8 C2865.74,1413.49 2865.55,1413.12 2865.56,1412.7 L2865.75,1408.39 C2865.78,1408.12 2865.9,1407.85 2866.12,1407.58 C2866.34,1407.31 2866.64,1407.08 2867.01,1406.9 L2889.08,1395.88 C2889.72,1395.52 2890.48,1395.38 2891.37,1395.47 L2900.49,1396.36 C2901.26,1396.44 2901.84,1396.66 2902.24,1397.04 C2902.64,1397.42 2902.76,1397.85 2902.58,1398.33 L2898.61,1409.14 L2900.03,1409.28 C2900.81,1409.36 2901.42,1409.6 2901.84,1410.01 C2902.27,1410.42 2902.39,1410.87 2902.21,1411.37 L2900.62,1415.77 C2900.44,1416.27 2900,1416.68 2899.31,1416.98 C2898.62,1417.29 2897.88,1417.4 2897.09,1417.32 L2895.66,1417.18 L2894.79,1419.54 C2894.6,1420.05 2894.17,1420.46 2893.49,1420.77 C2892.81,1421.08 2892.07,1421.2 2891.28,1421.12 L2882.26,1420.21 C2881.47,1420.13 2880.86,1419.88 2880.44,1419.46 L2880.45,1419.46 Z M2885.82,1408.5 C2886.11,1408.53 2886.39,1408.5 2886.67,1408.44 C2886.95,1408.37 2887.17,1408.26 2887.31,1408.1 C2887.39,1408.01 2887.57,1407.6 2887.84,1406.88 C2888.1,1406.2 2888.23,1405.8 2888.24,1405.67 C2888.24,1405.54 2888.13,1405.4 2887.89,1405.25 C2887.68,1405.13 2887.43,1405.06 2887.15,1405.03 C2886.91,1405.01 2886.69,1405.03 2886.5,1405.07 C2886.31,1405.12 2885.89,1405.31 2885.24,1405.62 C2884.59,1405.93 2883.71,1406.36 2882.61,1406.9 C2882.08,1407.16 2881.97,1407.45 2882.27,1407.76 C2882.57,1408.07 2883.09,1408.26 2883.83,1408.34 C2884.49,1408.38 2885.16,1408.44 2885.81,1408.5 L2885.82,1408.5 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2847.38,1546.79 L2710.77,1530.6 C2696.58,1528.92 2689.7,1519.69 2695.24,1510.2 L2695.24,1510.2 C2700.65,1500.94 2715.93,1494.85 2729.54,1496.39 L2860.43,1511.27 C2874.57,1512.88 2883.5,1521.92 2880.25,1531.67 L2880.25,1531.67 C2876.92,1541.67 2862.14,1548.54 2847.36,1546.79 L2847.38,1546.79 Z" id="Path" stroke="none" fill="#CFD8DC" fill-rule="nonzero"></path> + <path d="M2739.7,1515.36 C2735.87,1522.69 2723.91,1527.7 2713.07,1526.42 C2702.26,1525.15 2696.97,1518.14 2701.14,1510.89 C2705.24,1503.77 2716.96,1499.07 2727.43,1500.26 C2737.93,1501.46 2743.46,1508.17 2739.7,1515.36 L2739.7,1515.36 Z" id="Path" stroke="none" fill="#ECEFF1" fill-rule="nonzero"></path> + <path d="M2542.38,1093.43 C2497.62,1093.43 2461.33,1108.53 2461.33,1127.15 L2461.33,1352.61 C2461.33,1371.23 2497.62,1386.33 2542.38,1386.33 C2587.14,1386.33 2623.43,1371.23 2623.43,1352.61 L2623.43,1127.15 C2623.43,1108.53 2587.14,1093.43 2542.38,1093.43 L2542.38,1093.43 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2623.84,1061.5 L2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2598.09,1050.94 C2599.72,1046.96 2604.28,1045.05 2608.26,1046.68 L2619.59,1051.33 C2623.57,1052.96 2625.48,1057.51 2623.84,1061.5 L2623.84,1061.5 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FF8080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2616.96,1078.29 L2594.95,1131.97 C2593.33,1132.87 2591.41,1133.79 2589.14,1134.71 C2588.81,1134.85 2588.47,1134.99 2588.12,1135.12 C2580.41,1138.13 2571.11,1140.29 2560.98,1141.47 L2591.2,1067.74 L2616.96,1078.29 L2616.96,1078.29 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFB74D" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2512.74,1078.7 L2527.77,1141.87 C2519.19,1141.11 2511.12,1139.66 2503.98,1137.6 L2476.92,1023.82 C2475.5,1017.86 2479.18,1011.89 2485.13,1010.48 C2485.99,1010.27 2486.86,1010.18 2487.71,1010.18 C2492.72,1010.18 2497.26,1013.6 2498.47,1018.69 L2499.75,1024.08 L2512.74,1078.7 L2512.74,1078.7 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" transform="translate(2505.2199, 1051.6457) rotate(-13.38) translate(-2505.2199, -1051.6457)" x="2496.11986" y="1023.51067" width="18.2" height="56.27" rx="9.1"></rect> + <path d="M2571.7,1030.13 L2571.34,1032.96 L2567.89,1060.37 L2557.63,1141.82 C2552.69,1142.29 2547.57,1142.53 2542.37,1142.53 C2539.66,1142.53 2536.98,1142.47 2534.34,1142.33 L2545.04,1057.48 L2548.46,1030.32 L2548.85,1027.25 L2556.31,1028.19 L2563.68,1029.12 L2571.7,1030.13 L2571.7,1030.13 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2591.42,1022.57 C2589.34,1039.08 2572.41,1065.5 2555.91,1063.42 C2539.41,1061.34 2529.56,1031.54 2531.64,1015.04 C2533.72,998.53 2548.79,986.84 2565.3,988.92 C2581.81,991 2593.5,1006.07 2591.42,1022.58 L2591.42,1022.57 Z" id="Path" stroke="#465362" stroke-width="10" fill="#81C784" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2550.79,1013.92 C2553.27,1017.12 2558.54,1029.25 2555.34,1031.74 C2552.14,1034.23 2541.69,1026.11 2539.21,1022.91 C2536.73,1019.71 2537.31,1015.11 2540.51,1012.63 C2543.71,1010.15 2548.31,1010.73 2550.79,1013.93 L2550.79,1013.92 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2572.58,1016.66 C2569.38,1019.14 2561.27,1029.59 2563.75,1032.79 C2566.23,1035.99 2578.37,1030.72 2581.57,1028.24 C2584.77,1025.76 2585.35,1021.16 2582.87,1017.96 C2580.39,1014.76 2575.79,1014.18 2572.59,1016.66 L2572.58,1016.66 Z" id="Path" stroke="none" fill="#465362" fill-rule="nonzero"></path> + <path d="M2481.72,1125.09 C2481.93,1126.05 2484.94,1130.36 2495.6,1134.71 C2495.94,1134.85 2496.28,1134.99 2496.63,1135.12 C2498.94,1136.02 2501.4,1136.85 2503.98,1137.6 C2511.12,1139.66 2519.19,1141.11 2527.77,1141.87 C2529.93,1142.08 2532.12,1142.23 2534.34,1142.33 C2536.98,1142.47 2539.66,1142.53 2542.37,1142.53 C2547.57,1142.53 2552.69,1142.29 2557.63,1141.82 C2558.75,1141.72 2559.86,1141.6 2560.97,1141.47 L2560.97,1141.47 C2571.1,1140.29 2580.4,1138.13 2588.11,1135.12 C2588.46,1134.99 2588.8,1134.85 2589.13,1134.71 C2591.4,1133.79 2593.32,1132.87 2594.94,1131.97 C2600.94,1128.68 2602.85,1125.85 2603.02,1125.09" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2312.14,1465.72 L2257.19,1490.2 C2245.32,1495.49 2231.82,1495.79 2219.72,1491.05 C2166.25,1470.08 2112.78,1449.1 2059.31,1428.13 C2038.75,1420.07 2038.1,1391.21 2058.27,1382.22 L2087.96,1368.99 C2106.25,1360.84 2126.04,1356.54 2146.07,1356.51975 C2160.19,1356.5 2175.72,1357.66 2192.26,1360.77 C2249.59,1371.51 2291.85,1400.46 2318.56,1424.39 C2332.03,1436.45 2328.66,1458.36 2312.14,1465.72 L2312.14,1465.72 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M869.1,838.92 C863.82,855.85 852.58,871 836.23,880.95 C800.55,902.65 754.04,891.31 732.34,855.63 C710.64,819.95 721.98,773.44 757.66,751.74 C774.01,741.8 792.63,738.79 810.1,741.89 C787.91,759.6 781.81,791.44 796.95,816.34 C812.09,841.24 843.17,850.47 869.1,838.92 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFF9C4" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="755.38" cy="789.42" r="8.86"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="759.38" cy="841.85" r="15.66"></circle> + <circle id="Oval" stroke="none" fill="#FFCC80" fill-rule="nonzero" cx="800.6" cy="852.3" r="9.86"></circle> + <path d="M881.84,1307.34 C763.37,1307.34 667.33,1347.29 667.33,1396.58 L667.33,1405.1 C667.33,1425.83 684.33,1444.91 712.83,1460.06 C737.83,1488.83 804.06,1509.39 881.84,1509.39 C959.62,1509.39 1025.85,1488.83 1050.85,1460.06 C1079.36,1444.91 1096.35,1425.83 1096.35,1405.1 L1096.35,1396.58 C1096.35,1347.3 1000.31,1307.34 881.84,1307.34 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1026.25,1371.81 C1030.31,1355.17 1027.72,1336.49 1019.73,1323.36 C982.45,1262.1 898.79,1262.1 881.84,1262.1 C864.89,1262.1 781.37,1262.1 744.04,1323.22 C736.25,1335.97 733.65,1354 737.19,1370.4 C737.3,1370.9 737.41,1371.38 737.51,1371.83 C738.14,1374.62 738.67,1376.45 738.85,1377.08 C763.04,1459.36 863.51,1459.36 881.84,1459.36 C900.17,1459.36 1000.64,1459.36 1024.83,1377.08 C1025.32,1375.42 1025.77,1373.74 1026.17,1372.1 C1026.19,1372.01 1026.22,1371.91 1026.24,1371.82 L1026.25,1371.81 Z" id="Path" stroke="#465362" stroke-width="10" fill="#977763" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1025.09,1326.76 C1029.12,1342.13 1026.55,1359.38 1018.63,1371.5 C981.65,1428.07 898.66,1428.07 881.85,1428.07 C865.04,1428.07 782.18,1428.07 745.15,1371.63 C737.43,1359.86 734.84,1343.21 738.35,1328.07 C738.46,1327.61 738.56,1327.16 738.67,1326.75 C739.3,1324.17 739.82,1322.49 740,1321.9 C764,1245.92 863.66,1245.92 881.84,1245.92 C900.02,1245.92 999.69,1245.92 1023.68,1321.9 C1024.17,1323.43 1024.61,1324.98 1025.01,1326.5 C1025.03,1326.59 1025.06,1326.68 1025.08,1326.76 L1025.09,1326.76 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFCDD2" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="769.56" y1="1336.14" x2="780.64" y2="1325.95" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="847.98" y1="1332.27" x2="858.61" y2="1343.91" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="925.51" y1="1388.54" x2="934.82" y2="1379.33" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="961.4" y1="1304.24" x2="973.36" y2="1310" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="938.36" y1="1325.47" x2="932.44" y2="1336.99" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="985.32" y1="1343.23" x2="1000.39" y2="1345.44" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="889.63" y1="1264.83" x2="900.26" y2="1260.95" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="793.93" y1="1281.32" x2="806.78" y2="1278.16" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="800.35" y1="1370.59" x2="818.3" y2="1381.75" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="869.69" y1="1390.48" x2="884.31" y2="1380.78" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="889.18" y1="1321.59" x2="904.25" y2="1328.87" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="812.09" y1="1321.59" x2="816.08" y2="1336.99" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="772.22" y1="1363.17" x2="780.64" y2="1358.29" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="996.4" y1="1322.41" x2="1001.72" y2="1314.87" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="967.38" y1="1368.93" x2="984.44" y2="1374.02" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="847.54" y1="1266.77" x2="862.16" y2="1275.5" id="Path" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M838.98,1278.29 C838.98,1304.33 927.38,1304.33 927.38,1278.29" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M2351.63,245.03 C2337.88,250.36 2332.34,255.9 2327.01,269.65 C2326.27,271.56 2323.59,271.56 2322.85,269.65 C2317.52,255.9 2311.98,250.36 2298.23,245.03 C2296.32,244.29 2296.32,241.61 2298.23,240.87 C2311.98,235.54 2317.52,230 2322.85,216.25 C2323.59,214.34 2326.27,214.34 2327.01,216.25 C2332.34,230 2337.88,235.54 2351.63,240.87 C2353.54,241.61 2353.54,244.29 2351.63,245.03 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2417.66,277.5 C2403.91,282.83 2398.37,288.37 2393.04,302.12 C2392.3,304.03 2389.62,304.03 2388.88,302.12 C2383.55,288.37 2378.01,282.83 2364.26,277.5 C2362.35,276.76 2362.35,274.08 2364.26,273.34 C2378.01,268.01 2383.55,262.47 2388.88,248.72 C2389.62,246.81 2392.3,246.81 2393.04,248.72 C2398.37,262.47 2403.91,268.01 2417.66,273.34 C2419.57,274.08 2419.57,276.76 2417.66,277.5 L2417.66,277.5 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M2367.88,313.06 C2354.13,318.39 2348.59,323.93 2343.26,337.68 C2342.52,339.59 2339.84,339.59 2339.1,337.68 C2333.77,323.93 2328.23,318.39 2314.48,313.06 C2312.57,312.32 2312.57,309.64 2314.48,308.9 C2328.23,303.57 2333.77,298.03 2339.1,284.28 C2339.84,282.37 2342.52,282.37 2343.26,284.28 C2348.59,298.03 2354.13,303.57 2367.88,308.9 C2369.79,309.64 2369.79,312.32 2367.88,313.06 Z" id="Path" stroke="none" fill="#FFFFFF" fill-rule="nonzero"></path> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#465362" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="414.94" y="752.56" width="2563.19" height="462.96" rx="231.48"></rect> + <rect id="Rectangle" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="375.95" y="713.57" width="2563.19" height="462.96" rx="231.48"></rect> + <text id="logo-text" x="1657" y="960" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="190" font-weight="600" fill="#465362">HTML e pessoas</text> + <line x1="1664.22" y1="579.05" x2="1751.73" y2="529.11" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1824.56,527.78 L1797.24,552.46 C1786.22,562.42 1770.28,561.63 1763.23,549.28 L1740.21,508.95 C1733.16,496.6 1740.59,482.48 1754.77,478.05 L1789.92,467.08 C1798.23,464.49 1808.04,469.06 1812.61,477.06 L1827.51,503.16 C1832.07,511.16 1831.02,521.93 1824.56,527.77 L1824.56,527.78 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1771.77" y1="495.05" x2="1791.25" y2="529.19" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1794.91" y1="484.86" x2="1811.79" y2="514.45" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1563.47" y1="579.05" x2="1664.22" y2="579.05" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <path d="M1499.55,613.99 L1535.51,621.89 C1550.02,625.08 1563.47,616.5 1563.47,602.27 L1563.47,555.83 C1563.47,541.6 1550.02,533.03 1535.51,536.21 L1499.55,544.11 C1491.05,545.98 1484.79,554.81 1484.79,564.02 L1484.79,594.08 C1484.79,603.29 1491.04,612.12 1499.55,613.99 Z" id="Path" stroke="#465362" stroke-width="10" fill="#64B5F6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <line x1="1529.18" y1="559.4" x2="1529.18" y2="598.7" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1504.03" y1="562.02" x2="1504.03" y2="596.08" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#BBDEFB" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="1664.22" cy="579.05" r="79.92"></circle> + <line x1="1623.26" y1="460.2" x2="1664.22" y2="432.06" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <line x1="1705.19" y1="460.2" x2="1664.22" y2="432.06" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></line> + <circle id="Oval" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="1664.22" cy="417.99" r="14.07"></circle> + <path d="M1724.69,458.56 C1724.69,470.2 1697.62,499.13 1664.22,499.13 C1630.82,499.13 1603.75,470.2 1603.75,458.56 C1603.75,449.49 1724.69,449.49 1724.69,458.56 Z" id="Path" stroke="#465362" stroke-width="10" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1643.74,585.83 L1676.84,585.83 C1684.33,585.83 1690.4,579.76 1690.4,572.27 L1690.4,572.27" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1608.09,558.17 C1610.62,555.64 1614.11,554.08 1617.97,554.08 C1621.83,554.08 1625.32,555.64 1627.85,558.17" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M1700.6,558.17 C1703.13,555.64 1706.62,554.08 1710.48,554.08 C1714.34,554.08 1717.83,555.64 1720.36,558.17" id="Path" stroke="#465362" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + </g> + </g> + </g> +</svg> + </div> + + <div class="container mt-lg"><details class="main-menu" id="main-menu"> + <summary>Menu</summary> + + <nav> + <p class="menu-heading"> + <strong>Capítulos</strong> + </p> + + <ul> + <li> + <a href="/introducao" + >Introdução</a + > + </li> + <li> + <a + href="/do-zero-a-internet-seu-primeiro-site" + + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="html-e-para-pessoas" tabindex="-1"><a class="header-anchor" href="#html-e-para-pessoas">HTML é para pessoas</a></h1> +<p>HTML não é só para quem trabalha com tecnologia. É para qualquer pessoa, do mesmo jeito que um documento é para qualquer pessoa. HTML é só mais um tipo de documento. Um tipo muito especial — aquele em que a web é construída.</p> +<p>O livro original foi escrito por <a href="https://blakewatson.com/">Blake Watson</a>. Ele faz sites desde o começo dos anos 2000. Mesmo trabalhando profissionalmente na área, acredita que <em>qualquer pessoa</em> deveria conseguir fazer um site com HTML, se quiser. Este livro ensina exatamente isso. Você não precisa ter experiência anterior com sites ou programação. Vamos cobrir tudo o que você precisa para começar, de um jeito acessível e amigável.</p> +<p>Esta tradução para o português do Brasil é oferecida por <a href="https://pablomurad.com">Pablo Murad</a> e <a href="https://portalidea.com.br">Portal IDEA</a>.</p> +<p>Pronto? Vamos lá!</p> + + + <p class="home-buttons mt-lg" style="margin-bottom: var(--size-10);"> + <a href="/introducao" class="button">Ler a introdução</a> + <a href="/do-zero-a-internet-seu-primeiro-site" class="button" + >Quero começar já!</a + > + </p> + + </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>
A
intervalo-instalar-um-servidor-local/index.html
@@ -0,0 +1,487 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Intervalo: instalar um servidor local</title> + + <meta property="og:title" content="Intervalo: instalar um servidor local" /> + <meta property="og:description" content="Aprenda a rodar um servidor web no seu computador — um programinha que finge ser a internet, para testar o site com recursos mais poderosos." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/intervalo-instalar-um-servidor-local/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/intervalo-instalar-um-servidor-local/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/intermission-installing-a-local-web-server/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/intermission-installing-a-local-web-server/" + /> + + + <!-- 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" + aria-current="page" + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="intervalo-instalar-um-servidor-local" tabindex="-1"><a class="header-anchor" href="#intervalo-instalar-um-servidor-local">Intervalo: instalar um servidor local</a></h1> +<p>HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar.</p> +<p>Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos.</p> +<p>O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade.</p> +<p>Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um <em>servidor web local</em> é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet.</p> +<p>Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs.</p> +<h2 id="urls-relativas-e-urls-absolutas" tabindex="-1"><a class="header-anchor" href="#urls-relativas-e-urls-absolutas">URLs relativas e URLs absolutas</a></h2> +<p>Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe <code>..</code> para “subir” um nível e achar a página de destino.</p> +<p>Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o <em>nível mais alto</em> é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim.</p> +<pre class="language-html"><code class="language-html"><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>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to the homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>A barra representa o nível mais alto (eu também poderia ter escrito <code>/index.html</code>, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página <code>about.html</code>, faria assim.</p> +<pre class="language-html"><code class="language-html"><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>Go to the About page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta.</p> +<pre class="language-html"><code class="language-html"><span class="token comment"><!-- imagine we are currently on a blog page /blog/my-post.html--></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My blog post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- instead of this, which *does* work --></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 comment"><!-- we can do this --></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></code></pre> +<p>A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do <em>computador inteiro</em>. Com certeza não era isso que a gente queria.</p> +<p>Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas.</p> +<h2 id="opcoes-de-servidor-web" tabindex="-1"><a class="header-anchor" href="#opcoes-de-servidor-web">Opções de servidor web</a></h2> +<p>Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você.</p> +<ul> +<li><a href="#visual-studio-code-multiplataforma">Visual Studio Code (multiplataforma)</a></li> +<li><a href="#macos">macOS</a></li> +<li><a href="#windows-e-multiplataforma">Windows e multiplataforma</a></li> +<li><a href="#python-e-php-multiplataforma">Python e PHP (multiplataforma)</a></li> +</ul> +<h2 id="visual-studio-code-multiplataforma" tabindex="-1"><a class="header-anchor" href="#visual-studio-code-multiplataforma">Visual Studio Code (multiplataforma)</a></h2> +<p>A Microsoft publica uma extensão do VS Code chamada <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server">Live Preview</a>. Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-1.webp" alt="Captura de tela da loja de extensões do Visual Studio Code na página da extensão “Live Preview”. A extensão é da Microsoft e mostra descrição, avaliações, instruções de uso e o botão de instalação."></p> +<p>Depois de instalar, você vai notar a opção <em>Show Preview</em> quando clicar com o botão direito num arquivo.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-2.webp" alt="Uma janela do VS Code mostra código HTML. O arquivo “index.html” está selecionado na barra lateral esquerda. Um menu de contexto sobre o index.html está aberto, com a opção “Show Preview” destacada."></p> +<p>Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em <em>Open in Browser</em> no menu da barra de endereço.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-3.webp" alt="Captura de tela de uma janela do VS Code. À esquerda, o código HTML de uma página pessoal. À direita, a prévia da página mostra “Blake's Homepage”, com botões de navegação e uma imagem de um céu estrelado. A URL aparece destacada numa barra de navegação."></p> +<h2 id="macos" tabindex="-1"><a class="header-anchor" href="#macos">macOS</a></h2> +<p>Eu uso Mac, então posso recomendar de coração o ótimo aplicativo <a href="https://iconfactory.com/worldwideweb/">WorldWideWeb</a>. É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças.</p> +<p>O funcionamento é assim: você aponta a pasta do site e clica no botão de play.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-4.webp" alt="Captura de tela da janela do app “WorldWideWeb”, com duas seções principais: “Website Folder” e “Web Server”. Em “Website Folder” há um ícone de pasta com o nome “my-site”. Em “Web Server” há um botão de play com o texto “Server is stopped”. Setas vermelhas apontam para cada ícone."></p> +<p>Quando você clica no play, o site fica disponível em algum endereço. Clique em <em>Open Browser</em> para abrir essa URL no navegador padrão.</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>E agora olha só: a gente está vendo o site no nosso endereço novinho em folha.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-6.webp" alt="Uma janela do navegador com o título “Blake's Homepage” e links de navegação para Home, Blog, About e Resume. A área principal tem uma imagem de um céu estrelado com nebulosas coloridas. Uma seta vermelha aponta para a barra de endereço no topo da tela."></p> +<h2 id="windows-e-multiplataforma" tabindex="-1"><a class="header-anchor" href="#windows-e-multiplataforma">Windows e multiplataforma</a></h2> +<p>Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft.</p> +<p>Caso contrário, experimente o <a href="https://simplewebserver.org/">Simple Web Server</a>. Depois de instalar, clique no botão para criar um servidor novo.</p> +<img src="/assets/img/intermission-installing-a-local-web-server-7.webp" alt="Captura de tela do aplicativo Simple Web Server. No centro aparece a mensagem “You haven't created any servers yet”, com um ícone de servidor acima. No canto inferior direito, um botão amarelo com o texto “New Server”, destacado por uma seta vermelha." style="max-height: 600px; margin-inline: auto"> +<p>Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa.</p> +<img src="/assets/img/intermission-installing-a-local-web-server-8.webp" alt="A janela “Add Server” do aplicativo Simple Web Server. Há campos para “Folder path” e “Port”, além das opções Basic Options, Advanced Options e Error Pages. Na parte de baixo ficam os botões “Cancel” e “Create Server”." style="max-height: 600px; margin-inline: auto"> +<p>Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão.</p> +<img src="/assets/img/intermission-installing-a-local-web-server-9.webp" alt="Uma janela do Simple Web Server chamada “Edit Server” mostra as opções de um servidor web em execução. A URL destacada é “http://127.0.0.1:8080” e parece clicável. Há campos para o caminho da pasta, a porta (8080) e uma caixa para acesso na rede local. Embaixo ficam os botões de cancelar e salvar." style="max-height: 600px; margin-inline: auto"> +<aside class="aside"><p class="aside-label">Observação</p><p>O Simple Web Server é multiplataforma e também funciona no macOS e no Linux. Dito isso, eu recomendo o WorldWideWeb para quem usa Mac, a menos que você precise de vários servidores rodando ao mesmo tempo.</p> +</aside> +<h2 id="python-e-php-multiplataforma" tabindex="-1"><a class="header-anchor" href="#python-e-php-multiplataforma">Python e PHP (multiplataforma)</a></h2> +<p>Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal.</p> +<h3 id="python" tabindex="-1"><a class="header-anchor" href="#python">Python</a></h3> +<p>Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à <a href="https://www.python.org/downloads/">página de downloads do Python</a> e baixe o instalador do seu sistema (pegue a versão 3).</p> +<p>Abra uma janela do terminal e use <code>cd</code> para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python.</p> +<pre class="language-bash"><code class="language-bash">python3 <span class="token parameter variable">-m</span> http.server</code></pre> +<p>Isso deixa o site disponível em <code>localhost</code>, na porta que ele indicar (em geral 8000). Então o endereço do site fica <code>http://localhost:8000</code>.</p> +<h3 id="php" tabindex="-1"><a class="header-anchor" href="#php">PHP</a></h3> +<p>Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, <a href="/html-reutilizavel-com-php">o PHP é útil para reutilizar pedaços de HTML</a> (tipo o menu de navegação) em várias páginas.</p> +<p>Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python.</p> +<pre class="language-bash"><code class="language-bash">php <span class="token parameter variable">-S</span> localhost:8000</code></pre> +<p>Isso deixa o site disponível em <code>http://localhost:8000</code>.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!</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="/adicionar-uma-pagina-divertida/">Adicionar uma página divertida</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/adicionar-um-curriculo/">Adicionar um currículo</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>
A
intervalo-melhore-seu-editor-de-texto/index.html
@@ -0,0 +1,442 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Intervalo: melhore seu editor de texto</title> + + <meta property="og:title" content="Intervalo: melhore seu editor de texto" /> + <meta property="og:description" content="Conheça e baixe um editor de código como o Visual Studio Code, que oferece destaque de sintaxe e outros recursos feitos para programar." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/intervalo-melhore-seu-editor-de-texto/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/intervalo-melhore-seu-editor-de-texto/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/intermission-upgrade-your-text-editor/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/intermission-upgrade-your-text-editor/" + /> + + + <!-- 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" + aria-current="page" + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="intervalo-melhore-seu-editor-de-texto" tabindex="-1"><a class="header-anchor" href="#intervalo-melhore-seu-editor-de-texto">Intervalo: melhore seu editor de texto</a></h1> +<p>Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem!</p> +<p>Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu.</p> +<p><img src="/assets/img/code-editor-1.webp" alt="Uma janela do Bloco de Notas mostrando o código HTML de "Blake's Homepage". A página tem um título, uma tag de imagem com a fonte "space.jpg" e o texto alternativo "Photograph of space with stars and stardust", e seções sobre hobbies e o gosto de ensinar, usando vários elementos HTML."></p> +<p>Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Estou usando Windows nesta parte só por diversão, mas tudo que eu faço pode ser feito no Mac, no Windows e no Linux.</p> +</aside> +<h2 id="baixe-o-visual-studio-code" tabindex="-1"><a class="header-anchor" href="#baixe-o-visual-studio-code">Baixe o Visual Studio Code</a></h2> +<p>Vá até <a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a>. Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico.</p> +<p>Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo.</p> +<p>Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim:</p> +<p><img src="/assets/img/code-editor-2.webp" alt="Captura de tela da tela de boas-vindas do Visual Studio Code. A barra lateral inclui opções como "Explorer," "Search," "Source Control," "Run" e "Extensions." A tela principal mostra a opção "Open Folder..." com guias para começar no VS Code e aprender o básico."></p> +<h2 id="abra-o-seu-projeto" tabindex="-1"><a class="header-anchor" href="#abra-o-seu-projeto">Abra o seu projeto</a></h2> +<p>Na tela de boas-vindas do VS Code, clique em <em>Open Folder</em> e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo <code>index.html</code>, vai ver o código numa vista agradável, com números de linha e o que se chama <em>destaque de sintaxe</em> — partes do código ganham cores para se diferenciar melhor das outras.</p> +<p><img src="/assets/img/code-editor-3.webp" alt="Captura de tela do Visual Studio Code com o código HTML de "Blake's Homepage." A barra lateral esquerda mostra os arquivos do projeto. O editor principal mostra o mesmo código de antes, mas colorido para facilitar a distinção entre as partes."></p> +<p>O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão.</p> +<p>O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Por padrão, o VS Code deixa linhas de texto saírem pela lateral da página. Se você preferir que o texto quebre para a linha seguinte, clique no menu <em>View</em> e escolha <em>Word Wrap</em>.</p> +</aside> +<h2 id="explore-quando-estiver-pronto" tabindex="-1"><a class="header-anchor" href="#explore-quando-estiver-pronto">Explore quando estiver pronto</a></h2> +<p>O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro.</p> +<p>Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta.</p> +<p>Por agora, vamos voltar a fazer o nosso site!</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Agora que melhoramos o editor de texto, vamos aprender a adicionar <em>estilo</em> ao nosso 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="/um-site-com-estilo/">Um site com estilo</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/adicionar-conteudo-ao-seu-site/">Adicionar conteúdo ao seu site</a> + </p> + + </nav> + + + </main> + + + + + <elevator-button title="Ir para o menu"> + <a href="#main-menu"> + <span class="sr-only">Ir para o menu</span> + </a> + </elevator-button> + + <div class="sticky-footer" style="margin-block-start: auto"> + <div class="promo"> + <div class="container"> + <p class="promo-title">Gostou do livro?</p> + <div class="stack"> + <p> + <em>HTML e Pessoas</em> é a tradução de um trabalho feito com + carinho. Se puder, considere enviar uma doação no Ko-fi para o + autor original, Blake Watson, e compartilhar o livro nas redes + sociais. + </p> + + <p> + <a href="https://ko-fi.com/blakewatson" class="button" + >Doar no Ko-fi</a + > + </p> + + <p>Confira outros projetos do Blake:</p> + <ul> + <li> + <a href="https://afinestart.me" + >Uma extensão minimalista de nova aba</a + > + </li> + <li> + <a href="https://synthwave.live/">Um site de mix synthwave</a> + </li> + <li> + <a href="https://minimalcharactersheet.com/" + >Uma ficha minimalista para D&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>
A
introducao/index.html
@@ -0,0 +1,443 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Introdução</title> + + <meta property="og:title" content="Introdução" /> + <meta property="og:description" content="Aprenda a criar seu próprio site pessoal, mesmo sem nunca ter programado. Este guia leva você do básico de HTML até um site com várias páginas, imagens, um blog e mais." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/introducao/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/introducao/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/intro/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/intro/" + /> + + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <script> + /** + * A global function that the theme toggle can use to apply the current theme. + * @param {string | undefined} override - The setting that needs to be applied or undefined + * @returns {string} - The applied theme setting + */ + window.applyThemeSetting = function (override) { + const getSystemPreference = () => { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }; + const currentSetting = + override || + localStorage.getItem('user-color-scheme') || + getSystemPreference(); + const currentThemeValue = + document.documentElement.getAttribute('data-theme'); + if (currentSetting && currentSetting !== currentThemeValue) { + document.documentElement.setAttribute('data-theme', currentSetting); + localStorage.setItem('user-color-scheme', currentSetting); + } + return currentSetting; + }; + window.applyThemeSetting(); + </script> + + <link rel="stylesheet" href="/assets/css/style.css" /> + + <script defer src="/assets/js/app.js"></script> + + </head> + + <body class="chapter"> + + <header class="site-header"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + <?xml version="1.0" encoding="UTF-8"?> +<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML e pessoas</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="logo" transform="translate(10, 10)"> + <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect> + <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text> + <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line> + <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line> + <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line> + <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle> + <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle> + <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path> + <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path> + <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path> + </g> + <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line> + <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line> + <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line> + <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line> + <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line> + <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line> + <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle> + <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle> + <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path> + <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path> + <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path> + </g> + </g> + </g> +</svg> + </a> + </p> + </div> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="container"><details class="main-menu" id="main-menu"> + <summary>Menu</summary> + + <nav> + <p class="menu-heading"> + <strong>Capítulos</strong> + </p> + + <ul> + <li> + <a href="/introducao" aria-current="page" + >Introdução</a + > + </li> + <li> + <a + href="/do-zero-a-internet-seu-primeiro-site" + + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="introducao" tabindex="-1"><a class="header-anchor" href="#introducao">Introdução</a></h1> +<p>Eu não acho que sites foram feitos para serem criados só por “profissionais da web”. No fundo, um site é um documento. Quase todo mundo hoje em dia sabe fazer um documento — seja no Word, no Google Docs, em Markdown ou em outra ferramenta. HTML não deveria ser exceção. Sim, ele é um pouco mais técnico do que outros tipos de documento. Mas também é muito especial.</p> +<p>É o formato de documento da web. O humilde arquivo HTML está em todo lugar. Se você olhou um site hoje, quase certamente viu HTML.</p> +<p>HTML é resistente. Você pode olhar um site feito hoje ou um feito vinte anos atrás. Os dois usam HTML e os dois funcionam. Poucos formatos de documento podem dizer o mesmo. Você também não precisa de um programa especial para fazer um documento HTML. Existem vários, e você pode usar qualquer um. Também dá para abrir o Bloco de Notas e escrever HTML na mão (alerta de spoiler: é exatamente isso que vamos fazer).</p> +<p>Eu criei este livro na web porque queria algo para quem não se considera desenvolvedor profissional. Imagine se documentos do Word só pudessem ser feitos por “profissionais de Word”. Não. Saber escrever um pouco de HTML e colocar isso na internet é uma habilidade útil em muitos caminhos — profissionais e pessoais. Não pertence só a quem faz site de carreira. HTML é para todo mundo. HTML é para pessoas.</p> +<p>Esta tradução para o português do Brasil é oferecida por <a href="https://pablomurad.com">Pablo Murad</a> e <a href="https://portalidea.com.br">Portal IDEA</a>, a partir do original <a href="https://htmlforpeople.com">HTML for People</a>, de <a href="https://blakewatson.com/">Blake Watson</a>.</p> +<h2 id="para-quem-e-este-livro" tabindex="-1"><a class="header-anchor" href="#para-quem-e-este-livro">Para quem é este livro?</a></h2> +<p>Este livro é para quem não tem experiência anterior com programação. Eu não vou assumir que você já sabe a primeira coisa sobre HTML. Vamos começar pequeno. Mas, no fim, teremos um site pessoal completo: várias páginas, imagens, um blog e mais.</p> +<p>Eu <em>vou</em> assumir que você já usa um computador e consegue tarefas básicas, como criar arquivos e pastas. Isso é necessário porque (outro spoiler) um site, no fundo, é só arquivos e pastas.</p> +<h2 id="do-que-eu-preciso" tabindex="-1"><a class="header-anchor" href="#do-que-eu-preciso">Do que eu preciso?</a></h2> +<p>Você precisa de um computador com internet. Eu escrevi este livro de um jeito genérico, para funcionar no macOS, no Windows ou no Linux. Se eu indicar um programa para instalar, ele será gratuito (ou terá um plano grátis usável) e vai funcionar em mais de um sistema (ou eu indico uma alternativa).</p> +<h2 id="sumario" tabindex="-1"><a class="header-anchor" href="#sumario">Sumário</a></h2> +<ol> +<li><a href="/do-zero-a-internet-seu-primeiro-site">Do zero à internet: seu primeiro site</a></li> +<li><a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a></li> +<li><a href="/intervalo-melhore-seu-editor-de-texto">Intervalo: melhore seu editor de texto</a></li> +<li><a href="/um-site-com-estilo">Um site com estilo</a></li> +<li><a href="/adicionar-uma-pagina-sobre">Adicionar uma página Sobre</a></li> +<li><a href="/adicionar-um-blog">Adicionar um blog</a></li> +<li><a href="/adicionar-um-curriculo">Adicionar um currículo</a></li> +<li><a href="/intervalo-instalar-um-servidor-local">Intervalo: instalar um servidor local</a></li> +<li><a href="/adicionar-uma-pagina-divertida">Adicionar uma página divertida</a></li> +<li><a href="/conquista-desbloqueada-hipertextista">Conquista desbloqueada: Hipertextista</a></li> +</ol> +<h3 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h3> +<p>Isto é o que eu queria cobrir, mas achei que saía um pouco do foco. CSS e PHP têm uma curva de aprendizado um pouco mais íngreme do que HTML. Mesmo assim, não acho que estejam fora do alcance de quem quiser explorar. E um pouquinho de cada um já ajuda bastante. Então isto é uma degustação de cada um.</p> +<ol> +<li><a href="/personalizar-o-simple-css">Personalizar o Simple.css</a></li> +<li><a href="/basico-de-css">Básico de CSS</a></li> +<li><a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a></li> +</ol> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Agora que você já sabe o <em>porquê</em> deste livro, é hora do primeiro passo. No próximo capítulo, você vai aprender a fazer um site do zero e colocá-lo na internet.</p> + + + + + + <nav + class="mb-xl" + style="display: flex; flex-direction: column; gap: 0.5rem;" + > + + <p> + <strong><span role="presentation">→</span> Próximo capítulo:</strong> + <a href="/do-zero-a-internet-seu-primeiro-site/">Do zero à internet: seu primeiro site</a> + </p> + + + + </nav> + + + </main> + + + + + <elevator-button title="Ir para o menu"> + <a href="#main-menu"> + <span class="sr-only">Ir para o menu</span> + </a> + </elevator-button> + + <div class="sticky-footer" style="margin-block-start: auto"> + <div class="promo"> + <div class="container"> + <p class="promo-title">Gostou do livro?</p> + <div class="stack"> + <p> + <em>HTML e Pessoas</em> é a tradução de um trabalho feito com + carinho. Se puder, considere enviar uma doação no Ko-fi para o + autor original, Blake Watson, e compartilhar o livro nas redes + sociais. + </p> + + <p> + <a href="https://ko-fi.com/blakewatson" class="button" + >Doar no Ko-fi</a + > + </p> + + <p>Confira outros projetos do Blake:</p> + <ul> + <li> + <a href="https://afinestart.me" + >Uma extensão minimalista de nova aba</a + > + </li> + <li> + <a href="https://synthwave.live/">Um site de mix synthwave</a> + </li> + <li> + <a href="https://minimalcharactersheet.com/" + >Uma ficha minimalista para D&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>
A
personalizar-o-simple-css/index.html
@@ -0,0 +1,571 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Personalizar o Simple.css</title> + + <meta property="og:title" content="Personalizar o Simple.css" /> + <meta property="og:description" content="Aprenda a usar variáveis CSS para dar um visual novo ao seu site com Simple.css." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/personalizar-o-simple-css/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/personalizar-o-simple-css/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/customizing-simple-css/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/customizing-simple-css/" + /> + + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <script> + /** + * A global function that the theme toggle can use to apply the current theme. + * @param {string | undefined} override - The setting that needs to be applied or undefined + * @returns {string} - The applied theme setting + */ + window.applyThemeSetting = function (override) { + const getSystemPreference = () => { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }; + const currentSetting = + override || + localStorage.getItem('user-color-scheme') || + getSystemPreference(); + const currentThemeValue = + document.documentElement.getAttribute('data-theme'); + if (currentSetting && currentSetting !== currentThemeValue) { + document.documentElement.setAttribute('data-theme', currentSetting); + localStorage.setItem('user-color-scheme', currentSetting); + } + return currentSetting; + }; + window.applyThemeSetting(); + </script> + + <link rel="stylesheet" href="/assets/css/style.css" /> + + <script defer src="/assets/js/app.js"></script> + + </head> + + <body class="chapter"> + + <header class="site-header"> + <div class="logo-wrap"> + <p class="site-title container"> + <a href="/"> + <span class="sr-only">HTML e pessoas</span> + <?xml version="1.0" encoding="UTF-8"?> +<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>HTML e pessoas</title> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="logo" transform="translate(10, 10)"> + <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect> + <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text> + <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line> + <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line> + <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line> + <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line> + <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle> + <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle> + <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path> + <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path> + <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path> + <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path> + </g> + <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"> + <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line> + <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line> + <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line> + <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line> + <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path> + <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line> + <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line> + <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line> + <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle> + <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path> + <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle> + <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path> + <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path> + <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path> + </g> + </g> + </g> +</svg> + </a> + </p> + </div> + + <a href="#main-content" class="skip-link">Pular para o conteúdo</a> + + <div class="container"><details class="main-menu" id="main-menu"> + <summary>Menu</summary> + + <nav> + <p class="menu-heading"> + <strong>Capítulos</strong> + </p> + + <ul> + <li> + <a href="/introducao" + >Introdução</a + > + </li> + <li> + <a + href="/do-zero-a-internet-seu-primeiro-site" + + >Do zero à internet: seu primeiro site</a + > + </li> + <li> + <a + href="/adicionar-conteudo-ao-seu-site" + + >Adicionar conteúdo ao seu site</a + > + </li> + <li> + <a + href="/intervalo-melhore-seu-editor-de-texto" + + >Intervalo: melhore seu editor de texto</a + > + </li> + <li> + <a + href="/um-site-com-estilo" + + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + aria-current="page" + >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="personalizar-o-simplecss" tabindex="-1"><a class="header-anchor" href="#personalizar-o-simplecss">Personalizar o Simple.css</a></h1> +<p>O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado <em>propriedades personalizadas</em> (muitas vezes chamadas de <em>variáveis</em>). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.</p> +<h2 id="uma-espiada-no-simplecss" tabindex="-1"><a class="header-anchor" href="#uma-espiada-no-simplecss">Uma espiada no Simple.css</a></h2> +<p>Vamos abrir o arquivo <code>simple.css</code> que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte.</p> +<pre class="language-css"><code class="language-css"><span class="token comment">/* Global variables. */</span> +<span class="token selector">:root, +::backdrop</span> <span class="token punctuation">{</span> + <span class="token comment">/* Set sans-serif & mono fonts */</span> + <span class="token property">--sans-font</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">'Avenir Next'</span><span class="token punctuation">,</span> Avenir<span class="token punctuation">,</span> + <span class="token string">'Nimbus Sans L'</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">'Noto Sans'</span><span class="token punctuation">,</span> <span class="token string">'Segoe UI'</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> + <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">--mono-font</span><span class="token punctuation">:</span> Consolas<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> <span class="token string">'Andale Mono'</span><span class="token punctuation">,</span> <span class="token string">'Ubuntu Mono'</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span> + <span class="token property">--standard-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + + <span class="token comment">/* Default (light) theme */</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> #f5f7ff<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span> + <span class="token property">--text-light</span><span class="token punctuation">:</span> #585858<span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> #898ea4<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> #0d47a1<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> #1266e2<span class="token punctuation">;</span> + <span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--code</span><span class="token punctuation">:</span> #d81b60<span class="token punctuation">;</span> + <span class="token property">--preformatted</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> #ffdd33<span class="token punctuation">;</span> + <span class="token property">--disabled</span><span class="token punctuation">:</span> #efefef<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.</p> +<p>No CSS, o navegador ignora o texto entre <code>/*</code> e <code>*/</code>. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de <em>comentários</em>. Neste caso, os comentários ajudam a separar o código em grupos relacionados.</p> +<p>O trecho que diz <code>:root</code> significa que o bloco de código a seguir — a parte entre as chaves, <code>{}</code> — vale para a página inteira. Ignore o <code>::backdrop</code> por enquanto.</p> +<p>Dentro das chaves, encontramos uma lista de <em>propriedades</em>. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos <code>columns: 2</code> na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, <code>columns</code> é uma <em>propriedade</em> e <code>2</code> é um <em>valor</em>.</p> +<p>Qualquer propriedade que começa com <code>--</code> é uma <em>propriedade personalizada</em>, ou <em>variável</em>. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável <code>--accent: blue</code>, poderíamos usar a cor <code>--accent</code> em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos <code>red</code>, poderíamos atualizar num lugar só — escrevendo <code>--accent: red</code> — e todo elemento que usa a variável <code>--accent</code> seria atualizado sozinho.</p> +<p>Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”.</p> +<p>Vamos falar de fontes depois. Primeiro, as cores.</p> +<p>Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos.</p> +<p>Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do <code>simple.css</code>? Você <em>poderia</em> fazer isso; funcionaria. Mas existe um jeito melhor.</p> +<h2 id="criar-uma-folha-de-estilo-personalizada" tabindex="-1"><a class="header-anchor" href="#criar-uma-folha-de-estilo-personalizada">Criar uma folha de estilo personalizada</a></h2> +<p>CSS significa <em>Cascading Style Sheets</em> (folhas de estilo em cascata). Essa parte da <em>cascata</em> é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe <em>depois</em> do <code>simple.css</code>, as regras que escrevermos ali vão prevalecer. Então não estamos <em>mudando</em> o <code>simple.css</code>. Estamos <em>sobrescrevendo</em> ele.</p> +<p>Crie um arquivo na pasta <code>assets/css</code> chamado <code>custom.css</code>.</p> +<p>Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo <code>index.html</code> do nível mais alto. Na seção <code><head></code>, já estamos referenciando o <code>simple.css</code> com uma tag <code><link></code>. Vamos fazer o mesmo para o nosso novo arquivo <code>custom.css</code>, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele.</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>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/custom.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>head</span><span class="token punctuation">></span></span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Isto vai funcionar na página inicial, mas, nas outras páginas, lembre-se de atualizar o caminho do arquivo de acordo (vai ser o mesmo caminho do arquivo <code>simple.css</code>).</p> +</aside> +<p>Agora vamos adicionar algumas sobrescritas. No arquivo <code>custom.css</code>, primeiro vamos montar um bloco <code>:root</code> parecido com o do <code>simple.css</code>. Depois pegamos uma das variáveis, digamos <code>--bg</code> (a cor de <em>fundo</em>), e definimos como <code>red</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Não há nada de mágico no nome da variável, <code>--bg</code>. Quem criou o Simple.css decidiu chamar assim, então é isso que vamos precisar usar para sobrescrever.</p> +</aside> +<p>Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma <a href="https://www.google.com/search?q=color+picker">ferramenta de escolha de cores</a> na web, usar uma das muitas <a href="https://perma.cc/JF5G-REYD">cores nomeadas do CSS</a> ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.</p> +<p><img src="/assets/img/customizing-simple-css-1.webp" alt="Numa janela do Visual Studio Code, um arquivo CSS chamado "custom.css" está aberto. O editor mostra uma ferramenta de seletor de cores ao lado do código que define a cor de fundo com a propriedade . O seletor exibe vários tons de vermelho, junto com os valores RGB, para facilitar a escolha e o ajuste."></p> +<p>Mas, antes de escolher cores, vamos falar do modo escuro.</p> +<h2 id="modo-escuro" tabindex="-1"><a class="header-anchor" href="#modo-escuro">Modo escuro</a></h2> +<p>O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo <code>simple.css</code>, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.</p> +<pre class="language-css"><code class="language-css"><span class="token comment">/* Dark theme */</span> +<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> + <span class="token selector">:root, + ::backdrop</span> <span class="token punctuation">{</span> + <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> #2b2b2b<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> #dcdcdc<span class="token punctuation">;</span> + <span class="token property">--text-light</span><span class="token punctuation">:</span> #ababab<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> #ffb300<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> #ffe099<span class="token punctuation">;</span> + <span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--code</span><span class="token punctuation">:</span> #f06292<span class="token punctuation">;</span> + <span class="token property">--preformatted</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span> + <span class="token property">--disabled</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token comment">/* Add a bit of transparency so light media isn't so glaring in dark mode */</span> + <span class="token selector">img, + video</span> <span class="token punctuation">{</span> + <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span></code></pre> +<p>Este bloco usa um recurso do CSS chamado <em>media queries</em>. Neste caso, a regra <code>@media</code> diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.</p> +<p>A primeira regra define o esquema de cores padrão como escuro e depois <em>redefine</em> as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”.</p> +<p>Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do <code>simple.css</code> para o seu <code>custom.css</code> e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa.</p> +<h2 id="um-exemplo-de-personalizacao" tabindex="-1"><a class="header-anchor" href="#um-exemplo-de-personalizacao">Um exemplo de personalização</a></h2> +<p>Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana.</p> +<p>Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato <code>rgb</code> aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.</p> +<p>Este é o código que eu coloquei no meu <code>custom.css</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">/* Dark theme */</span> +<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> + <span class="token selector">:root, + ::backdrop</span> <span class="token punctuation">{</span> + <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>17<span class="token punctuation">,</span> 18<span class="token punctuation">,</span> 18<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>80<span class="token punctuation">,</span> 90<span class="token punctuation">,</span> 90<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>35<span class="token punctuation">,</span> 35<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> ghostwhite<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> lightskyblue<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span></code></pre> +<p>Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.</p> +<p><img src="/assets/img/customizing-simple-css-2.webp" alt="Uma imagem em tela dividida mostra duas versões de uma página de blog: à esquerda, a página usa um tema claro personalizado, com rosas vibrantes e verdes pálidos. À direita, usa um tema escuro personalizado, com azul como cor de destaque para links e botões. As duas versões apresentam o mesmo conteúdo da listagem do blog. O uso de cores personalizadas aqui marca uma saída dos temas claro e escuro padrão usados antes."></p> +<h2 id="escolher-cores-acessiveis" tabindex="-1"><a class="header-anchor" href="#escolher-cores-acessiveis">Escolher cores acessíveis</a></h2> +<p>Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo.</p> +<p>Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um <a href="https://perma.cc/KGB2-G7Y4">verificador de contraste como este</a>. Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.</p> +<h2 id="mudar-a-fonte" tabindex="-1"><a class="header-anchor" href="#mudar-a-fonte">Mudar a fonte</a></h2> +<p>Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no <code>simple.css</code>. Uma delas, <code>--sans-font</code>, é responsável pela maior parte do texto da página (a outra, <code>--mono-font</code>, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).</p> +<p>Se você não conhece, fontes <em>sans-serif</em> são aquelas que não têm <em>serifa</em>, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável <code>--sans-font</code> para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.</p> +<p>Primeiro, vamos falar de fontes na web.</p> +<h2 id="fontes-na-web" tabindex="-1"><a class="header-anchor" href="#fontes-na-web">Fontes na web</a></h2> +<p>Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, <em>você</em> vai ver essa fonte na página. Mas quem visita vai ver uma <em>alternativa</em> (<em>fallback</em>), a menos que essa pessoa também tenha a fonte instalada.</p> +<p>É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> + <span class="token comment">/* the first font needs quotes because the name includes spaces */</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Some Rando Font"</span><span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>A regra de estilo acima define a fonte do <code><body></code>. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se <em>essa</em> também não estiver, dissemos ao navegador para usar a fonte <code>serif</code> padrão que ele tiver.</p> +<p>Aqui vai uma boa referência para encontrar <a href="https://practicaltypography.com/system-fonts.html">fontes comuns nos aparelhos das pessoas</a> e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.</p> +<p>Às vezes, você tem uma fonte que <em>realmente</em> quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se <em>fontes da web</em> (<em>web fonts</em>). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, <a href="/basico-de-css">Básico de CSS</a>. Em resumo, é um método de fornecer a fonte automaticamente a quem visita.</p> +<h2 id="sobrescrever-a-variavel-da-fonte" tabindex="-1"><a class="header-anchor" href="#sobrescrever-a-variavel-da-fonte">Sobrescrever a variável da fonte</a></h2> +<p>Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de <code>--sans-font</code>, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.</p> +<p>Podemos sobrescrever a variável <code>--sans-font</code> do Simple dentro do bloco <code>:root</code>, para que valha para a página inteira.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--sans-font</span><span class="token punctuation">:</span> Georgia<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços.</p> +<p>Usamos uma palavra-chave do CSS, <code>serif</code>, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são <code>sans-serif</code>, <code>monospace</code> e <code>cursive</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax">entre outras</a></p> +<p>Aqui vai um dos posts do blog composto em Georgia.</p> +<p><img src="/assets/img/customizing-simple-css-3.webp" alt="Captura de tela de um post de blog intitulado "Why donuts are the best thing ever", datado de 20 de abril de 2024. Ele usa o tema claro personalizado de antes. O texto está numa fonte serifada, e não na sans-serif padrão."></p> +<h2 id="deixe-com-a-sua-cara" tabindex="-1"><a class="header-anchor" href="#deixe-com-a-sua-cara">Deixe com a sua cara</a></h2> +<p>Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas.</p> +<p>Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> + + + + + + <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="/basico-de-css/">Básico de CSS</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/conquista-desbloqueada-hipertextista/">Conquista desbloqueada: Hipertextista</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>
A
printable/index.html
@@ -0,0 +1,2483 @@
+<!doctype html> + +<html lang="pt-BR" data-theme="light"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>HTML e Pessoas</title> + + <meta property="og:title" content="HTML e Pessoas" /> + <meta + property="og:description" + content="HTML não é só para quem trabalha com tecnologia. É para todo mundo. Aprenda a fazer um site do zero neste livro na web, feito para iniciantes." + /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/printable/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/printable/" /> + <link rel="alternate" hreflang="en" href="https://htmlforpeople.com/printable/" /> + + <!-- favicon --> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/assets/img/design/favicon.png" + /> + + <link rel="stylesheet" href="/assets/css/style.css" /> + <link rel="stylesheet" href="/assets/css/print.css" media="print" /> + + <style> + h1 { + margin-top: var(--size-10); + } + + .site-footer { + background: none; + } + </style> + + <script defer src="/assets/js/app.js"></script> + + </head> + + <body class="page wrap-code"> + + <header class="site-header mb-none"> + <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> + </header> + + + <main id="main-content" class="container"> + + <h1 id="introducao" tabindex="-1"><a class="header-anchor" href="#introducao">Introdução</a></h1> +<p>Eu não acho que sites foram feitos para serem criados só por “profissionais da web”. No fundo, um site é um documento. Quase todo mundo hoje em dia sabe fazer um documento — seja no Word, no Google Docs, em Markdown ou em outra ferramenta. HTML não deveria ser exceção. Sim, ele é um pouco mais técnico do que outros tipos de documento. Mas também é muito especial.</p> +<p>É o formato de documento da web. O humilde arquivo HTML está em todo lugar. Se você olhou um site hoje, quase certamente viu HTML.</p> +<p>HTML é resistente. Você pode olhar um site feito hoje ou um feito vinte anos atrás. Os dois usam HTML e os dois funcionam. Poucos formatos de documento podem dizer o mesmo. Você também não precisa de um programa especial para fazer um documento HTML. Existem vários, e você pode usar qualquer um. Também dá para abrir o Bloco de Notas e escrever HTML na mão (alerta de spoiler: é exatamente isso que vamos fazer).</p> +<p>Eu criei este livro na web porque queria algo para quem não se considera desenvolvedor profissional. Imagine se documentos do Word só pudessem ser feitos por “profissionais de Word”. Não. Saber escrever um pouco de HTML e colocar isso na internet é uma habilidade útil em muitos caminhos — profissionais e pessoais. Não pertence só a quem faz site de carreira. HTML é para todo mundo. HTML é para pessoas.</p> +<p>Esta tradução para o português do Brasil é oferecida por <a href="https://pablomurad.com">Pablo Murad</a> e <a href="https://portalidea.com.br">Portal IDEA</a>, a partir do original <a href="https://htmlforpeople.com">HTML for People</a>, de <a href="https://blakewatson.com/">Blake Watson</a>.</p> +<h2 id="para-quem-e-este-livro" tabindex="-1"><a class="header-anchor" href="#para-quem-e-este-livro">Para quem é este livro?</a></h2> +<p>Este livro é para quem não tem experiência anterior com programação. Eu não vou assumir que você já sabe a primeira coisa sobre HTML. Vamos começar pequeno. Mas, no fim, teremos um site pessoal completo: várias páginas, imagens, um blog e mais.</p> +<p>Eu <em>vou</em> assumir que você já usa um computador e consegue tarefas básicas, como criar arquivos e pastas. Isso é necessário porque (outro spoiler) um site, no fundo, é só arquivos e pastas.</p> +<h2 id="do-que-eu-preciso" tabindex="-1"><a class="header-anchor" href="#do-que-eu-preciso">Do que eu preciso?</a></h2> +<p>Você precisa de um computador com internet. Eu escrevi este livro de um jeito genérico, para funcionar no macOS, no Windows ou no Linux. Se eu indicar um programa para instalar, ele será gratuito (ou terá um plano grátis usável) e vai funcionar em mais de um sistema (ou eu indico uma alternativa).</p> +<h2 id="sumario" tabindex="-1"><a class="header-anchor" href="#sumario">Sumário</a></h2> +<ol> +<li><a href="/do-zero-a-internet-seu-primeiro-site">Do zero à internet: seu primeiro site</a></li> +<li><a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a></li> +<li><a href="/intervalo-melhore-seu-editor-de-texto">Intervalo: melhore seu editor de texto</a></li> +<li><a href="/um-site-com-estilo">Um site com estilo</a></li> +<li><a href="/adicionar-uma-pagina-sobre">Adicionar uma página Sobre</a></li> +<li><a href="/adicionar-um-blog">Adicionar um blog</a></li> +<li><a href="/adicionar-um-curriculo">Adicionar um currículo</a></li> +<li><a href="/intervalo-instalar-um-servidor-local">Intervalo: instalar um servidor local</a></li> +<li><a href="/adicionar-uma-pagina-divertida">Adicionar uma página divertida</a></li> +<li><a href="/conquista-desbloqueada-hipertextista">Conquista desbloqueada: Hipertextista</a></li> +</ol> +<h3 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h3> +<p>Isto é o que eu queria cobrir, mas achei que saía um pouco do foco. CSS e PHP têm uma curva de aprendizado um pouco mais íngreme do que HTML. Mesmo assim, não acho que estejam fora do alcance de quem quiser explorar. E um pouquinho de cada um já ajuda bastante. Então isto é uma degustação de cada um.</p> +<ol> +<li><a href="/personalizar-o-simple-css">Personalizar o Simple.css</a></li> +<li><a href="/basico-de-css">Básico de CSS</a></li> +<li><a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a></li> +</ol> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Agora que você já sabe o <em>porquê</em> deste livro, é hora do primeiro passo. No próximo capítulo, você vai aprender a fazer um site do zero e colocá-lo na internet.</p> + + + <h1 id="do-zero-a-internet-seu-primeiro-site" tabindex="-1"><a class="header-anchor" href="#do-zero-a-internet-seu-primeiro-site">Do zero à internet: seu primeiro site</a></h1> +<p>Você, meu amigo, está prestes a ir do zero à internet. Vamos colocar sua primeira página caseira na web.</p> +<p>Vou te contar um segredo: sites são só arquivos de texto. Você não precisa de um programa caro e sofisticado para criá-los. Dá para fazer um site com as ferramentas de texto que já vêm no seu computador. E é exatamente isso que vamos fazer agora.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Dá para fazer um site no celular ou no tablet. Mas é bem mais comum fazer no computador. Por isso, é o que vamos usar neste livro. Mesmo assim, o que você vai aprender também vale em outros contextos. Uma coisa linda da web é que existem muitos jeitos de criar nela.</p> +</aside> +<h2 id="passo-1-crie-uma-pasta-no-seu-computador" tabindex="-1"><a class="header-anchor" href="#passo-1-crie-uma-pasta-no-seu-computador">Passo 1. Crie uma pasta no seu computador</a></h2> +<p>Escolha um lugar no seu computador e crie uma pasta. Chame de <code>my-site</code> ou algo parecido. O ideal é nomear pastas e arquivos de site com letras minúsculas, números, hífens e underlines. Evite espaços nos nomes. Assim seus arquivos funcionam em muitos computadores e servidores diferentes. (Um servidor é o computador na internet que guarda os arquivos do seu site e os entrega para quem visita.)</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Precisa de ajuda para criar uma pasta? Veja como fazer em alguns sistemas comuns.</p> +<ul> +<li><a href="https://perma.cc/H5YD-7W8S">Criar uma pasta no Windows</a></li> +<li><a href="https://perma.cc/X9RD-T6RH">Criar uma pasta no macOS</a></li> +<li><a href="https://perma.cc/B7LV-XXD5">Criar uma pasta no Ubuntu Linux</a></li> +</ul> +<p>Com o tempo, você provavelmente vai criar vários sites. Se quiser, já pode criar uma pasta <code>sites</code> e colocar <code>my-site</code> dentro dela.</p> +</aside> +<aside class="aside"><p class="aside-label">Observação</p><p>As capturas de tela deste livro são do original em inglês. O passo a passo vale igual no português.</p> +</aside> +<p><img src="/assets/img/zero-to-internet-01.webp" alt="Captura de tela de uma janela do explorador de arquivos. No painel esquerdo, a pasta "Websites" está selecionada. No painel direito, a pasta "my-site" aparece dentro da pasta "Websites"."></p> +<h2 id="passo-2-crie-o-indexhtml" tabindex="-1"><a class="header-anchor" href="#passo-2-crie-o-indexhtml">Passo 2. Crie o index.html</a></h2> +<p>Por convenção, a página inicial de um site é o <code>index.html</code>. Você pode ter outras páginas (como <code>about-me.html</code> ou o que quiser). Mas isso fica para depois.</p> +<p>Para criar o <code>index.html</code>, abra o TextEdit no Mac ou o Bloco de Notas no Windows.</p> +<aside class="aside"><p class="aside-label">Quem usa Mac</p><p>Sites devem ser <em>texto simples</em>, então precisamos pedir isso ao TextEdit. Clique em <em>Format</em> na barra de menus e escolha <em>Make Plain Text</em>. Depois abra as configurações do TextEdit, clique na aba Open and Save e marque a caixa <em>Display HTML files as HTML code instead of formatted text</em>. Já que você está aí: se quiser que o TextEdit use texto simples sempre, escolha <em>Plain text</em> na aba New Document, na seção Format.</p> +</aside> +<p>Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta:</p> +<pre class="language-html"><code class="language-html">My name is Blake. I enjoy making websites and teaching others to do the same.</code></pre> +<p>Agora salve este arquivo. Chame de <code>index.html</code> e coloque na pasta <code>my-site</code> que você criou no passo 1.</p> +<p><img src="/assets/img/zero-to-internet-02.webp" alt="Uma janela de editor de texto mostrando o conteúdo de um arquivo chamado "index.html". O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same.""></p> +<aside class="aside"><p class="aside-label">Observação</p><p>Quando você faz sites, é essencial ver as extensões de arquivo — a parte do nome que vem depois do ponto, como <code>.html</code>. Se você não as vê, veja como fazer o <a href="https://perma.cc/3LAG-L6YW">Windows</a> ou o <a href="https://perma.cc/KYR3-6H3L">Mac</a> mostrá-las.</p> +</aside> +<h2 id="passo-3-veja-a-previa-do-seu-site" tabindex="-1"><a class="header-anchor" href="#passo-3-veja-a-previa-do-seu-site">Passo 3. Veja a prévia do seu site</a></h2> +<p>Você pode abrir o site dando um clique duplo em <code>index.html</code>. Ele deve abrir no seu navegador padrão. Outra opção: abra o navegador primeiro, clique em <em>File</em> > <em>Open File…</em> e navegue até o seu arquivo <code>index.html</code>.</p> +<p>Você deve ver o seu site (sim, bem simples) no navegador! Sinta-se à vontade para ajustar o texto e corrigir erros de digitação. Estamos prestes a publicar esta página para o <em>mundo</em>.</p> +<p>Não se preocupe com a aparência. Vamos cuidar disso depois.</p> +<p><img src="/assets/img/zero-to-internet-03.webp" alt="Uma janela de navegador mostra uma página simples, com texto preto em fundo branco. O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same." O endereço na barra é um caminho de arquivo local."></p> +<h2 id="passo-4-publique-o-seu-site" tabindex="-1"><a class="header-anchor" href="#passo-4-publique-o-seu-site">Passo 4. Publique o seu site</a></h2> +<p>Existem muitas opções para publicar o seu site. Para o nosso caso, precisamos de algo gratuito, fácil e pensado para pessoas, não para empresas. Felizmente, é isso que temos com o <a href="https://neocities.org">Neocities</a>.</p> +<aside class="aside"><p class="aside-label">Outras hospedagens</p><p>Neste livro, vou usar o Neocities como exemplo. Mas quero citar algumas alternativas, caso alguma te agrade. A maioria oferece a opção de arrastar a pasta do seu site para a página delas e começar o serviço.</p> +<ul> +<li><strong><a href="https://app.netlify.com/drop">Netlify Drop</a>:</strong> Mais sofisticado que o Neocities, mas tem o recurso de arrastar e soltar a pasta para publicar. Também oferece recursos mais voltados para quem desenvolve.</li> +<li><strong><a href="https://static.app/">static.app</a>:</strong> Eu não tenho experiência pessoal com este. Mas parece um serviço direto, parecido com o Netlify Drop. O plano grátis dá um subdomínio (o pedaço do endereço que vem antes do nome principal) e 1 site gratuito.</li> +<li><strong><a href="https://tiiny.host/">Tiiny</a>:</strong> Oferece um processo parecido com os serviços acima, com suporte a mais formatos além de um site. Eu também não tenho experiência pessoal com este serviço.</li> +<li><strong><a href="https://codepen.io/">CodePen</a>:</strong> O CodePen deixa você criar um site direto no navegador. É parecido com usar um editor de código no computador, mas os arquivos ficam no CodePen. Você trabalha até ficar pronto e depois publica na internet. Você ganha três arquivos/páginas de graça. E eles oferecem uma assinatura para aumentar bastante esse limite.</li> +<li><s><strong><a href="https://yay.boo/">Yay.boo</a>:</strong> Nome bobo, publicação de site sem esforço. Você só arrasta e solta uma pasta, escolhe um nome, e o site está no ar.</s> O Yay.boo não está aceitando cadastros no momento. Eles podem voltar em breve.</li> +</ul> +</aside> +<p>Vá até o Neocities e crie uma conta. É de graça. Você também vai precisar escolher um nome de usuário/nome do site. Seu site vai ficar num <em>subdomínio</em> em <code>YOURNAME.neocities.org</code> — o <code>YOURNAME</code> vem antes de <code>neocities.org</code>. Eu sugiro usar seu nome real ou um apelido que você já use na internet. Ou, se você já sabe sobre o que a página vai ser, escolha algo que combine com o tema (por exemplo, <code>dndfanpage</code>).</p> +<p>Quando a conta estiver criada, vá ao <a href="https://neocities.org/dashboard">painel do seu site</a>. Você vai ver alguns arquivos iniciais lá. Por enquanto, pode ignorá-los. Para publicar a página que você acabou de fazer no computador, arraste o <code>index.html</code> do seu computador para o painel do Neocities. Isso vai substituir o <code>index.html</code> que já está lá.</p> +<p><img src="/assets/img/zero-to-internet-04.webp" alt="Captura de tela do painel do Neocities mostrando um site chamado "My Cool Website" do usuário blakewatson. A interface tem opções para criar um arquivo novo, uma pasta nova ou enviar arquivos, além de informações sobre uso de armazenamento e atividade do site."></p> +<p>Feito isso, clique no link do seu site no topo do painel.</p> +<p><strong>Parabéns, você acabou de fazer um site!</strong> 🎉</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>No próximo capítulo, vamos adicionar mais conteúdo ao nosso site e conhecer algumas tags HTML (uma tag é um pedaço de código que marca o que cada parte da página é).</p> + + + <h1 id="adicionar-conteudo-ao-seu-site" tabindex="-1"><a class="header-anchor" href="#adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a></h1> +<p>Primeiro, dá um tapinha nas próprias costas: você já tem um site caseiro no ar! Agora é hora de deixá-lo mais interessante.</p> +<aside class="aside"><p class="aside-label">Quem usa Windows</p><p>Se você está tentando abrir o arquivo <code>index.html</code> no Bloco de Notas, mas não o vê na pasta do site ao usar <em>File > Open</em>, encontre o menu <em>Text Documents</em> no canto inferior direito da janela Abrir e mude para <em>All Files</em>.</p> +</aside> +<h2 id="adicione-um-titulo" tabindex="-1"><a class="header-anchor" href="#adicione-um-titulo">Adicione um título</a></h2> +<p>Vamos dar um nome a ele! Depende do tipo de site que você está fazendo, mas o meu vai ser uma página pessoal. Todo mundo tem perfil em rede social, mas esses perfis são sem graça e parecidos demais. A gente merece <em>mais</em>. E nossa velha amiga, a homepage pessoal, é um lugar perfeito para começar.</p> +<pre class="language-plaintext"><code class="language-plaintext">Blake's Homepage + +My name is Blake. I enjoy making websites and teaching others to do the same.</code></pre> +<p>Legal! Vamos ver no navegador.</p> +<p><img src="/assets/img/add-content-1.webp" alt="Uma página simples. A única linha de texto na página diz: "Blake's Homepage My name is Blake. I enjoy making websites and teaching others to do the same.""></p> +<p>Bem, não era isso que a gente queria. O navegador espremeu o texto numa linha só. Ué?!</p> +<p>Está faltando a <em>marcação</em> do Hypertext <em>Markup</em> Language. (Marcação, ou markup, é o código que diz ao navegador o que cada pedaço do texto é.) Precisamos dizer ao navegador que o nome do site deve ser um título. Em HTML, você pode ter até seis níveis de títulos. Vamos definir o nome do site como o título mais importante, um <em>título de nível 1</em>, ou <code><h1></code>.</p> +<p>O que é esse código estranho em forma de pílula que eu acabei de escrever? É chamado de tag HTML. (Uma tag é um pedaço de código que envolve partes da página para dizer ao navegador o que elas são.) Vamos fazer isso agora.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p>Aqui, separamos os dois elementos da nossa página e envolvemos cada um em tags. Estamos dizendo que o nome do site deve ser um título de nível 1, e que o primeiro parágrafo deve ser, bem, um <em>parágrafo</em> — é o que o <code>p</code> significa.</p> +<p>Repare que um par de tags tem uma tag de <em>abertura</em> e uma tag de <em>fechamento</em>. A tag de fechamento é idêntica à de abertura, só que começa com uma barra, <code>/</code>.</p> +<p>Agora salve o arquivo e recarregue o navegador. Esse costuma ser o ritmo de criar um site: você muda um pouco de código, salva e aperta recarregar no navegador. Depois, sinta o poder correndo nas veias enquanto você cria um site do nada!</p> +<p><img src="/assets/img/add-content-2.webp" alt="Um navegador mostra uma página simples, com um título grande e em negrito: "Blake's Homepage." O conteúdo diz: "My name is Blake. I enjoy making websites and teaching others to do the same.""></p> +<p>Uau, bem melhor! Vamos continuar adicionando mais conteúdo.</p> +<h2 id="links-para-outros-sites" tabindex="-1"><a class="header-anchor" href="#links-para-outros-sites">Links para outros sites</a></h2> +<p>Você já se perguntou por que se chama <em>the web</em>? Tipo, o que isso significa? O ingrediente especial que faz dela uma teia é o <em>hiperlink</em>, ou, como a gente costuma chamar, um <em>link</em>. Sabe, aquele texto muitas vezes azul, muitas vezes sublinhado, que você clica para pular para outra página, outro site, uma imagem, um vídeo de gato, qualquer coisa!</p> +<p>Isso é possível graças ao elemento <em>anchor</em>, ou “tag A”, como é conhecido. Fica assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>This will go somewhere eventually<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>Tudo que está dentro das tags <code><a></code> vira clicável. Mas para onde o link nos leva? Por enquanto, para lugar nenhum. Precisamos indicar um destino. Fazemos isso dando à <code><a></code> um <em>atributo</em> chamado <code>href</code>. É a <em>hypertext reference</em> — o lugar para onde você quer ir quando clica no link.</p> +<pre class="language-html"><code class="language-html"><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>https://www.wikipedia.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to Wikipedia<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>Vamos adicionar um link ao nosso site — escolha um dos seus sites favoritos, ou algo divertido e interessante.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. +<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>p</span><span class="token punctuation">></span></span> + Check out these cool web games at <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>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.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>p</span><span class="token punctuation">></span></span></code></pre> +<p>Salve e recarregue!</p> +<p><img src="/assets/img/add-content-3.webp" alt="Captura de tela de um navegador mostrando "Blake's Homepage." O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same. Check out these cool web games at Neal.fun!" A página tem um visual simples, com texto preto em fundo branco, e inclui um link."></p> +<p>Com a ajuda da humilde tag <code><a></code>, o seu site vira parte da web viva, que respira. Existem mais de cem tags HTML, mas você não precisa decorá-las para fazer um site. Dá para fazer muito com pouca coisa. Vamos ver mais algumas tags que já te colocam no caminho.</p> +<h2 id="listas-de-coisas" tabindex="-1"><a class="header-anchor" href="#listas-de-coisas">Listas de coisas</a></h2> +<p>Fãs de lista, este conjunto de tags é para vocês. Vamos usar o elemento <em>unordered list</em>, <code><ul></code>, para adicionar uma lista com marcadores. O <code><ul></code> define a lista, e a tag <em>list item</em>, <code><li></code>, define cada item. Assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>The first thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>And lastly, this thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>O código acima vira uma lista com marcadores, deste jeito:</p> +<ul> +<li>The first thing</li> +<li>Another thing</li> +<li>And lastly, this thing</li> +</ul> +<p>Se você quiser uma lista numerada, troque <code><ul></code> por <code><ol></code> (de <em>ordered list</em>). Só isso! Você vai criar uma lista numerada.</p> +<ol> +<li>The first thing</li> +<li>Another thing</li> +<li>And lastly, this thing</li> +</ol> +<p>Vamos adicionar uma lista ao nosso site. Aqui está o site inteiro até agora:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. +<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>p</span><span class="token punctuation">></span></span> + Check out these cool web games at <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>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.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>p</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>Favorite board games<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>How to make a website<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>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre> +<p>Olha só, isso está começando, aos poucos, a parecer um site de verdade!</p> +<p><img src="/assets/img/add-content-4.webp" alt="Uma página da web intitulada "Blake's Homepage" é exibida. Ela inclui seções sobre jogos de tabuleiro favoritos (Dungeons & Dragons, Risk, Pandemic) e instruções de como fazer um site: 1. Create an HTML file, 2. Write some HTML in it, 3. Open it with a web browser."></p> +<p>Você vai notar que eu escorreguei uma tag nova ali sem avisar. É um <em>título de nível 2</em>, ou tag <code><h2></code>. Títulos dão estrutura à página e facilitam para os visitantes acharem o que querem.</p> +<p>Há outra diferença sutil entre as tags que temos usado. Algumas, como a tag <code><a></code>, são <em>elementos em linha</em> (inline): elas não começam uma linha nova e ocupam só a largura necessária. Outras tags — como <code><h1></code>, <code><ul></code> e <code><p></code> — são conhecidas como <em>elementos de bloco</em> (block). Um elemento de bloco começa numa linha nova e ocupa a largura inteira do recipiente.</p> +<p>Até agora temos um monte de palavras. Mas você sabe o que vale por mil delas?</p> +<h2 id="adicione-imagens-ao-seu-site" tabindex="-1"><a class="header-anchor" href="#adicione-imagens-ao-seu-site">Adicione imagens ao seu site</a></h2> +<p>Vamos colocar uma imagem legal no nosso site. Pode ser tentador ir no Google Imagens e pegar a primeira coisa que aparecer. Não é o caminho. Você precisa ter os direitos certos para usar a imagem. Há muitos lugares na web para achar imagens (procure imagens com licença Creative Commons). Para simplificar, vamos usar o site popular de imagens grátis <a href="https://unsplash.com">Unsplash</a>.</p> +<p>Eu achei uma imagem legal do espaço. Baixei a versão pequena e renomeei para <code>space.jpg</code>, para ficar mais fácil de citar. Ache uma imagem que você goste e solte na pasta, ao lado do seu <code>index.html</code>.</p> +<p>Você pode adicioná-la à página usando a <em>tag de imagem</em>, ou <code><img></code>. Diferente das tags que vimos até agora, a tag <code><img></code> é <em>auto-fechável</em>. Isso significa que não existe tag de fechamento. Fica assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<p>Assim como a tag <code><a></code>, a tag <code><img></code> usa atributos para dar mais informação sobre como você quer usá-la.</p> +<p>Use o atributo <code>src</code> para dizer à tag de imagem a <em>fonte</em> (source) da sua imagem, ou seja, onde ela está. Neste exemplo, estamos dizendo que a imagem está na mesma pasta que a nossa página <code>index.html</code> (e não numa subpasta) e que o nome do arquivo é <code>space.jpg</code>.</p> +<p>Também precisamos descrever a imagem, caso algum visitante do nosso site não consiga vê-la. Isso pode acontecer por vários motivos — talvez a pessoa seja cega e use um leitor de tela para acessar sites. Ou talvez um problema faça a imagem não carregar. Se isso acontecer, o nosso texto <em>alternativo</em>, ou texto <code>alt</code>, aparece no lugar.</p> +<p>Vamos salvar e atualizar o navegador.</p> +<p><img src="/assets/img/add-content-5.webp" alt="Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site."></p> +<p>Eu redimensionei a janela para a página inteira caber na captura. Mas se você estiver vendo uma barra de rolagem, está tudo bem!</p> +<p>Dependendo da sua imagem, você pode querer deixá-la menor ou maior. Dá para usar os atributos <code>width</code> e/ou <code>height</code> para isso. Se você indicar <em>só</em> a largura ou <em>só</em> a altura, o navegador mantém a <em>proporção</em> da imagem — ela não estica nem amassa. Para definir largura ou altura, você informa um número, que representa uma quantidade de pixels.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<p>Se definirmos o <code>width</code> como <code>300</code>, fica assim:</p> +<p><img src="/assets/img/add-content-8.webp" alt="Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. A imagem está bem menor do que na captura anterior. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site."></p> +<h2 id="adicione-notas-ao-seu-codigo" tabindex="-1"><a class="header-anchor" href="#adicione-notas-ao-seu-codigo">Adicione notas ao seu código</a></h2> +<p>Às vezes você quer colocar notas no código — texto que não aparece na página, mas continua visível no código. Você pode fazer isso para organizar um documento, deixar recados (como tarefas) para o você do futuro, ou até esconder um trecho em andamento que ainda não deve aparecer.</p> +<p>Por exemplo, eu poderia deixar um recado para voltar depois e atualizar meus jogos de tabuleiro favoritos.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Favorite board games<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Todo: after playing some new games, +see if any deserve to make this list. --></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>O navegador ignora tudo que está entre <code><!--</code> e <code>--></code> e não mostra isso na página. Esse tipo de texto se chama <em>comentário</em>. Comentários são um jeito legal de anotar o código, porque só aparecem no código — não na página pronta.</p> +<p>Aqui vai outro exemplo, em que eu envolvi várias tags HTML dentro de um comentário. Nada do comentário aparece na página — só no código-fonte.</p> +<pre class="language-html"><code class="language-html"><span class="token comment"><!-- +Work in progress. When I finalize this list, I'll remove the comment markers. + +<h2>Favorite board games</h2> + +<ul> + <li>Dungeons & Dragons</li> + <li>Risk</li> + <li>Pandemic</li> +</ul> +--></span></code></pre> +<p><strong>O seu código HTML é público, inclusive os comentários.</strong> Qualquer pessoa pode ver o código-fonte do seu site, então não coloque nada secreto ou sensível dentro de comentários. Para ver o código-fonte de uma página, você pode usar um atalho do teclado ou achar a opção no menu do navegador. Varia de navegador para navegador. Veja esta <a href="https://perma.cc/3WP3-R9XL">referência no Lifewire</a>.</p> +<h2 id="de-ao-seu-site-uma-cabeca-e-um-corpo" tabindex="-1"><a class="header-anchor" href="#de-ao-seu-site-uma-cabeca-e-um-corpo">Dê ao seu site uma cabeça e um corpo</a></h2> +<p>Eu não fui totalmente honesto com você até agora. A gente tomou um atalho. Temos escrito <em>só</em> o que o navegador mostra no arquivo <code>index.html</code>. Mas todo site tem uma seção invisível. E agora o seu precisa dela.</p> +<p>Lembra que a gente envolve a maioria dos elementos em tags? Na verdade, precisamos envolver a página inteira na tag <code><html></code>. Uma página HTML ainda se divide numa seção invisível <code><head></code>, com informações sobre o seu site, e no <code><body></code>, onde vai todo o seu conteúdo.</p> +<pre class="language-html"><code class="language-html"><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 comment"><!-- info about your site goes here --></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 comment"><!-- stuff you want to show up on your page goes here --></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> +<p>Para deixar nosso documento HTML oficial, vamos adicionar uma linha <code>doctype</code> bem no começo. O doctype existe principalmente por razões históricas, mas ele diz ao navegador: “Oi, eu sou um documento HTML, então por favor me mostre do jeito certo!” Pode copiar e colar essa linha e seguir em frente — não sinta que precisa decorar cada detalhe.</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>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>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> +<p>Por enquanto, vamos incluir duas coisas no <code><head></code>: uma tag title e uma tag meta.</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>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>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>head</span><span class="token punctuation">></span></span></code></pre> +<p>A tag <code><title></code> controla o texto que aparece na aba do navegador e o nome do seu site quando ele surge nos resultados de busca. Legal!</p> +<p>Podemos usar a tag <code><meta></code> várias vezes para dar ao navegador informações extras sobre a página. Neste caso, estamos dizendo qual <em>conjunto de caracteres</em> usar. O que você precisa saber: texto UTF-8 significa que símbolos especiais, como emojis, aparecem como se espera. Vamos incluir isso primeiro, antes de qualquer outro elemento de texto, para garantir que todo o nosso texto apareça direito.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se tantas tags extras estiverem te confundindo, saiba que você pode copiar e colar esta estrutura inicial. Assim você não precisa lembrar de tudo agora!</p> +</aside> +<p>Aqui está o arquivo <code>index.html</code> inteiro, para consulta:</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>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>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>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>img</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>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. + <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>p</span><span class="token punctuation">></span></span> + Check out these cool web games at + <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>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.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>p</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>Favorite board games<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>How to make a website<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>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</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="atualize-o-seu-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-seu-site-no-ar">Atualize o seu site no ar</a></h2> +<p>Essas mudanças estão ficando bem legais. Vamos publicar esta página para o mundo. Vá ao <a href="https://neocities.org/dashboard">painel do seu Neocities</a>. Você vai ver os arquivos iniciais mais o arquivo <code>index.html</code> que você enviou no capítulo 1 deste livro. Para deixar um pouco mais limpo, eu estou mudando para a visualização em lista e apagando a imagem PNG e o arquivo CSS que estavam lá no começo.</p> +<p><img src="/assets/img/add-content-6.webp" alt="Captura de tela de um painel do Neocities. O cabeçalho diz "My Cool Website", com o endereço "blakewatson.neocities.org" embaixo. Mostra detalhes de uso de arquivos e lista dois arquivos, "index.html" e "not_found.html", com opções para editar ou apagar."></p> +<p>Agora clique no botão <em>Upload</em> ou simplesmente arraste seus arquivos atualizados (a página index e a imagem) para a lista de arquivos.</p> +<p>Feito isso, clique no link do seu site no topo do painel. Esse é o seu site NO AR, recém-atualizado, feito do zero por você. Que demais!</p> +<p><img src="/assets/img/add-content-7.webp" alt="Captura de tela de um navegador visitando "Blake's Homepage" (o mesmo site de antes). O endereço é blakewatson.neocities.org. A página tem seções sobre jogos de tabuleiro favoritos, incluindo Dungeons & Dragons, Risk e Pandemic, e instruções de como fazer um site."></p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>No próximo capítulo, vamos fazer um intervalo breve e pegar um editor de texto feito para escrever HTML.</p> + + + <h1 id="intervalo-melhore-seu-editor-de-texto" tabindex="-1"><a class="header-anchor" href="#intervalo-melhore-seu-editor-de-texto">Intervalo: melhore seu editor de texto</a></h1> +<p>Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem!</p> +<p>Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu.</p> +<p><img src="/assets/img/code-editor-1.webp" alt="Uma janela do Bloco de Notas mostrando o código HTML de "Blake's Homepage". A página tem um título, uma tag de imagem com a fonte "space.jpg" e o texto alternativo "Photograph of space with stars and stardust", e seções sobre hobbies e o gosto de ensinar, usando vários elementos HTML."></p> +<p>Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Estou usando Windows nesta parte só por diversão, mas tudo que eu faço pode ser feito no Mac, no Windows e no Linux.</p> +</aside> +<h2 id="baixe-o-visual-studio-code" tabindex="-1"><a class="header-anchor" href="#baixe-o-visual-studio-code">Baixe o Visual Studio Code</a></h2> +<p>Vá até <a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a>. Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico.</p> +<p>Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo.</p> +<p>Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim:</p> +<p><img src="/assets/img/code-editor-2.webp" alt="Captura de tela da tela de boas-vindas do Visual Studio Code. A barra lateral inclui opções como "Explorer," "Search," "Source Control," "Run" e "Extensions." A tela principal mostra a opção "Open Folder..." com guias para começar no VS Code e aprender o básico."></p> +<h2 id="abra-o-seu-projeto" tabindex="-1"><a class="header-anchor" href="#abra-o-seu-projeto">Abra o seu projeto</a></h2> +<p>Na tela de boas-vindas do VS Code, clique em <em>Open Folder</em> e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo <code>index.html</code>, vai ver o código numa vista agradável, com números de linha e o que se chama <em>destaque de sintaxe</em> — partes do código ganham cores para se diferenciar melhor das outras.</p> +<p><img src="/assets/img/code-editor-3.webp" alt="Captura de tela do Visual Studio Code com o código HTML de "Blake's Homepage." A barra lateral esquerda mostra os arquivos do projeto. O editor principal mostra o mesmo código de antes, mas colorido para facilitar a distinção entre as partes."></p> +<p>O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão.</p> +<p>O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Por padrão, o VS Code deixa linhas de texto saírem pela lateral da página. Se você preferir que o texto quebre para a linha seguinte, clique no menu <em>View</em> e escolha <em>Word Wrap</em>.</p> +</aside> +<h2 id="explore-quando-estiver-pronto" tabindex="-1"><a class="header-anchor" href="#explore-quando-estiver-pronto">Explore quando estiver pronto</a></h2> +<p>O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro.</p> +<p>Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta.</p> +<p>Por agora, vamos voltar a fazer o nosso site!</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Agora que melhoramos o editor de texto, vamos aprender a adicionar <em>estilo</em> ao nosso site.</p> + + + <h1 id="um-site-com-estilo" tabindex="-1"><a class="header-anchor" href="#um-site-com-estilo">Um site com estilo</a></h1> +<p>Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e <em>sem estilo</em>.</p> +<p>O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página.</p> +<p>No mundo do HTML, a gente só se preocupa com <em>o que as coisas são</em> — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir <em>como as coisas parecem</em>, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento.</p> +<p>Um jeito de incluir CSS é usar a tag <code><style></code> e colocar o código CSS direto nela. Por exemplo, olhe isto:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">body</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Gill Sans'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre> +<p>Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag <code><body></code> — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.”</p> +<aside class="aside"><p class="aside-label">Observação sobre fontes</p><p>Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados <em>serifs</em>, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais.</p> +<p class="sans-serif">Fontes sans-serif são aquelas <em>sem</em> serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.</p> +<p class="mono">Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.</p> +</aside> +<p>Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como <code>styles.css</code>. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag <code><style></code> em cada página que criar.</p> +<p>CSS é uma linguagem poderosa. Todo site que você vê está usando ela. Todos aqueles desenhos detalhados, boa parte da animação e o posicionamento de imagens e tipografia — isso é CSS.</p> +<p>Mesmo assim, CSS também tem uma curva de aprendizado. E embora eu te incentive de verdade a explorar CSS, este livro é <em>HTML</em> e Pessoas — eu quero manter o foco no HTML. Mas tudo bem! A gente ainda pode usar CSS para deixar o site bonito sem escrever tudo na mão.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você tiver vontade de aprender mais sobre CSS, ótimo! Eu tenho <a href="/basico-de-css">um capítulo bônus</a> no fim deste livro que apresenta mais CSS e aponta para outros materiais.</p> +</aside> +<h2 id="frameworks-css" tabindex="-1"><a class="header-anchor" href="#frameworks-css">Frameworks CSS</a></h2> +<p>Até quem desenvolve sites profissionalmente e já sabe CSS usa CSS pronto como ponto de partida. A gente vai fazer algo parecido. Alguns frameworks CSS são feitos para quem desenvolve — eles vêm com um monte de recurso extra e pedem que você escreva o HTML de um jeito específico. Outros frameworks, porém, são pensados para sites mais simples. Eles deixam o seu HTML bonito sem você ter que fazer muito trabalho a mais. São chamados de <em>frameworks CSS classless</em>.</p> +<p>Para o nosso caso, isso é perfeito. Vamos usar um chamado <a href="https://simplecss.org/">Simple.css</a>. Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes.</p> +<ul> +<li><a href="https://perma.cc/5936-VK4J">Water.css</a></li> +<li><a href="https://perma.cc/F6E4-EU58">Sakura</a></li> +<li><a href="https://picocss.com/">Pico</a></li> +</ul> +<p>Eles vão deixar o seu HTML bonito e te dar um ótimo ponto de partida para um site básico. Fique à vontade para usar coisas que outras pessoas já fizeram. Tem muita coisa boa por aí!</p> +<h2 id="simplecss" tabindex="-1"><a class="header-anchor" href="#simplecss">Simple.css</a></h2> +<p>Eu te animo a dar uma olhada no <a href="https://simplecss.org/">site do Simple.css</a>, principalmente na <a href="https://simplecss.org/demo">página de demonstração</a>. Ela mostra como usar diferentes elementos HTML e como eles ficam com o Simple. Vamos baixar o Simple.css.</p> +<p>A <a href="https://perma.cc/XA5E-E59Q">documentação do Simple.css</a> dá algumas formas de começar, mas, pelo bem da simplicidade (viu o que eu fiz?), eu vou te passar o URL do arquivo CSS:</p> +<p><a href="https://cdn.simplecss.org/simple.css">https://cdn.simplecss.org/simple.css</a></p> +<p>Não se intimide com todo o código que tem lá! Você não precisa entender isso agora (nem nunca, de verdade). É só ir em <em>File > Save Page As</em> no navegador (<em>Command-S</em> no macOS e <em>Control-S</em> no Windows) e salvar este arquivo na pasta do projeto do seu site, onde está o <code>index.html</code>.</p> +<p>Pronto, você salvou. A gente vai adicionar isso à página daqui a pouco. Mas, primeiro, vamos organizar a casa.</p> +<h2 id="organizando-nossos-arquivos" tabindex="-1"><a class="header-anchor" href="#organizando-nossos-arquivos">Organizando nossos arquivos</a></h2> +<p>Até agora, a gente só tem três arquivos — a nossa página, um arquivo de imagem e o <code>simple.css</code> que acabamos de baixar. Mas logo vamos adicionar mais arquivos. Vamos criar um par de pastas e mover as coisas. A gente quer que a nova estrutura de arquivos fique assim:</p> +<ul> +<li>pasta <code>css</code> +<ul> +<li><code>simple.css</code></li> +</ul> +</li> +<li>pasta <code>images</code> +<ul> +<li><code>space.jpg</code></li> +</ul> +</li> +<li><code>index.html</code></li> +</ul> +<p>Limpo e organizado. No Visual Studio Code, você pode criar arquivos e pastas direto na barra lateral. Passe o mouse sobre os seus arquivos e você vai ver estes botões.</p> +<img src="/assets/img/vscode-new-folder.webp" alt="Captura de tela da janela do VS Code com uma pasta chamada 'MY-SITE' em destaque. Dentro da pasta há dois arquivos: 'index.html' e 'space.jpg.' Uma seta vermelha grande aponta para o botão 'New Folder' no canto superior direito do editor." style="max-width: 450px"> +<p>Depois que você fizer as mudanças, se recarregar a página no navegador, vai notar que a nossa imagem não funciona mais. Perceba como o navegador recorre ao texto <code>alt</code> que a gente colocou, no lugar da imagem.</p> +<p><img src="/assets/img/a-website-with-style-1.webp" alt="Captura de tela da “Blake's Homepage.” Ela inclui seções: uma frase breve sobre o autor, jogos de tabuleiro favoritos e um guia de como fazer um site. A página tem texto preto simples sobre fundo branco. Há uma imagem, mas ela não está funcionando direito — no lugar aparece o texto alternativo, “Photograph of space with stars and stardust.”"></p> +<p>Isso acontece porque a gente moveu o arquivo de imagem <code>space.jpg</code> em relação à página inicial. Agora ele está numa pasta chamada <code>images</code>. A gente conserta isso atualizando o valor <code>src</code> da imagem. Coloque o nome da pasta e uma barra antes do nome do arquivo.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<aside class="aside"><p class="aside-label">Mais sobre URLs</p><p>Quando a gente precisa informar o lugar dos arquivos no site — seja um link para outra página ou o caminho de uma imagem — a gente pode usar o que se chama de <em>URL relativa</em>.</p> +<p>Quando você está na página <code>index.html</code>, pense nela como o seu lugar atual. Se quiser apontar para uma imagem, precisa dizer ao navegador como encontrá-la. Uma URL relativa é um jeito de fazer isso. Ela descreve como ir “daqui até lá”, por assim dizer.</p> +<p>Parecido com o URL na barra do navegador, você usa barras para separar os níveis. O URL <code>images/space.jpg</code> significa: “procure uma pasta chamada <code>images</code> neste mesmo nível e, dentro dela, procure um arquivo chamado <code>space.jpg</code>.”</p> +</aside> +<h2 id="adicionando-o-simplecss-a-pagina" tabindex="-1"><a class="header-anchor" href="#adicionando-o-simplecss-a-pagina">Adicionando o Simple.css à página</a></h2> +<p>A gente pode adicionar uma <em>folha de estilo</em> à página de um jeito parecido com o da imagem. Vamos usar uma tag <code><link></code> para apontar para o arquivo CSS. Vamos colocá-la na tag <code><head></code> do site.</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>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>head</span><span class="token punctuation">></span></span></code></pre> +<p>A tag <code><link></code> é <em>self-closing</em> — ela não tem tag de fechamento. A gente precisa dar dois <em>atributos</em>. O <code>rel</code> diz qual é a relação do arquivo que estamos ligando com a nossa página. Arquivos CSS são chamados de <em>stylesheets</em> (folhas de estilo), então a gente informa isso como a relação (no singular). O <code>href</code> é onde a gente indica o arquivo, incluindo o caminho da pasta.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>O que as pessoas costumam chamar de “links” numa página — texto ou imagens clicáveis — é feito com a tag <code><a></code>, como a gente já viu. Em geral, eles apontam para um destino para o qual a gente navega ao clicar.</p> +<p>A tag <code><link></code> indica um arquivo que a gente quer ligar à página e qual é a relação desse arquivo. Aqui a gente está usando ela para conectar uma folha de estilo. Outra relação comum é definir um ícone para o site, por exemplo.</p> +</aside> +<p>Assim, de uma vez, o nosso site se transforma. Agora a gente vê uma página centralizada, texto maior e uma fonte sans-serif.</p> +<p><img src="/assets/img/a-website-with-style-2.webp" alt="Captura de tela da “Blake's Homepage” com o estilo atualizado usando Simple.css. A tipografia mudou: o título “Blake's Homepage” agora está em negrito e maior, formando um cabeçalho mais evidente. A imagem que estava quebrada agora aparece direito, mostrando uma foto colorida de um céu estrelado. O texto está mais organizado, com melhor espaçamento, e as seções ficam claras com títulos em negrito para “Favorite board games” e “How to make a website.” O layout geral parece mais limpo e organizado, com leitura melhor."></p> +<h2 id="adicionando-um-header-um-footer-e-o-conteudo-principal" tabindex="-1"><a class="header-anchor" href="#adicionando-um-header-um-footer-e-o-conteudo-principal">Adicionando um header, um footer e o conteúdo principal</a></h2> +<p>A gente vê que o arquivo Simple.css fez efeito na hora. Mas as coisas ficam ainda melhores quando a gente adiciona algumas seções que o Simple.css espera — um <code><header></code> para o título do site e um <code><main></code> para a área de conteúdo principal. A gente não usou isso antes — não é obrigatório — mas usar é uma boa prática.</p> +<p>E isto é totalmente opcional, mas já que estamos nisso, vale adicionar um <code><footer></code> também. Às vezes as pessoas colocam informação de copyright aqui. Às vezes têm rodapés grandes, com uns montes de links. Às vezes é só o nome. Eu vou manter simples, mas você pode colocar o que quiser.</p> +<p>Então a gente coloca o nome do site numa tag <code><header></code> e o conteúdo principal na tag <code><main></code>. Depois, adiciona um <code><footer></code> com um pouco de informação.</p> +<pre class="language-html"><code class="language-html"><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>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>PAGE CONTENT GOES HERE<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></code></pre> +<p>Depois desses ajustes, o título do site ganha um estilo especial, e parágrafos e listas ficam com um espaçamento mais adequado.</p> +<p><img src="/assets/img/a-website-with-style-3.webp" alt="Captura de tela da “Blake's Homepage” com mais melhorias de estilo. A página agora tem um cabeçalho claro no topo, com um fundo claro, que faz o título “Blake's Homepage” se destacar mais. O espaço entre as seções melhorou a leitura, e um rodapé novo apareceu embaixo, com o texto. Esse rodapé dá um toque pessoal. O layout geral parece mais estruturado e equilibrado visualmente."></p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você estiver acompanhando e notar que o seu site tem fundo escuro com texto claro, tudo bem! O Simple.css reconhece se você (quem visita o site) está com o sistema no modo escuro e, se estiver, usa um tema escuro no site. Para mudar esse comportamento, veja o capítulo bônus <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>.</p> +</aside> +<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2> +<p>Vamos colocar as novidades online! No Neocities, você não consegue enviar pastas pelo botão de upload. Ou você cria a pasta no painel clicando em “New Folder”, ou arrasta a pasta do computador para a área de soltar arquivos.</p> +<p><img src="/assets/img/a-website-with-style-4.webp" alt="Captura de tela do painel do Neocities da “Blake's Homepage.” A página mostra opções de gerenciamento de arquivos, incluindo enviar arquivos, criar arquivos novos e pastas novas. O URL da página do Blake e as opções de edição estão visíveis, com uma seta vermelha apontando para o botão “New Folder.”"></p> +<p>Provavelmente é mais fácil arrastar as pastas. Mas, se você criá-las na mão, precisa abrir cada pasta e enviar o conteúdo dela. Depois que uma pasta é criada, você passa o mouse sobre ela para ver as opções. Você vai querer clicar em “Manage” para abrir a pasta. Dali, pode clicar em “Upload” para enviar os arquivos certos para aquela pasta.</p> +<p>Mova arquivos que já existem renomeando-os. Por exemplo, se eu quiser mover <code>space.jpg</code> para dentro da pasta de imagens, posso clicar em “Rename” e incluir a pasta no caminho: <code>images/space.jpg</code>.</p> +<p><img src="/assets/img/a-website-with-style-5.webp" alt="Uma janela pop-up chamada “Rename / Move” mostra o caminho do arquivo “images/space.jpg” sendo editado."></p> +<p>É um pouco trabalhoso, mas não é tão ruim. Seja qual for o jeito, confira se os arquivos no Neocities batem com o que você tem no computador.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Neste capítulo a gente escreveu pouco código, mas se preparou para o que vem: organizamos as coisas, conseguimos uns estilos e separamos a página em seções.</p> +<p>O resto deste livro-web vai focar em construir o nosso site. No próximo capítulo, vamos adicionar uma página Sobre.</p> + + + <h1 id="adicionar-uma-pagina-sobre" tabindex="-1"><a class="header-anchor" href="#adicionar-uma-pagina-sobre">Adicionar uma página Sobre</a></h1> +<p>Pelo resto deste livro, a gente vai expandir a nossa página inicial pessoal e transformá-la num site completo, com várias páginas e um blog. O exemplo continua sendo a <strong>Blake’s Homepage</strong>, e o conteúdo vai falar de mim. Você vai querer adaptar as coisas para o que quiser ver no seu próprio site.</p> +<p>Se você não quiser fazer uma página pessoal, tudo bem também! Os conceitos que a gente cobre valem para todo tipo de site. Então você pode acompanhar e adaptar do seu jeito.</p> +<p>Se quiser um gostinho do resultado, visite a <a href="https://demo.htmlforpeople.com/">demonstração completa da Blake’s Homepage</a>.</p> +<p>Ela tem as seguintes páginas e recursos:</p> +<ul> +<li>Cabeçalho com navegação</li> +<li>Um blog com três posts</li> +<li>Página Sobre com uma foto</li> +<li>Um currículo digital</li> +<li>Uma página divertida com vídeos do YouTube embutidos</li> +</ul> +<p>Eu vou incluir muitos exemplos de código nos próximos capítulos, mas você também pode ir ao site de demonstração e <a href="https://perma.cc/3WP3-R9XL">ver o código-fonte</a> de qualquer página para consultar a qualquer momento.</p> +<h2 id="paginas-sao-so-arquivos-para-os-quais-voce-cria-um-link" tabindex="-1"><a class="header-anchor" href="#paginas-sao-so-arquivos-para-os-quais-voce-cria-um-link">Páginas são só arquivos para os quais você cria um link</a></h2> +<p>A gente vai criar uma página nova no site criando um arquivo novo. Crie <code>about.html</code> ao lado de <code>index.html</code>. Para digitar menos, copie todo o conteúdo de <code>index.html</code> e cole em <code>about.html</code>.</p> +<p>Agora, vamos limpar um pouco. Eu vou tirar o título “How to make a website” e o parágrafo com o link para o neal.fun. Esta página deve ser sobre mim. Falando nisso, eu também vou trocar a imagem por uma foto minha (se você não se sentir à vontade para usar uma foto sua, use qualquer imagem que quiser aqui).</p> +<p>Vou ampliar o conteúdo adicionando uns parágrafos. Este também é um ótimo lugar para colocar qualquer informação de contato que você quiser. Eu vou adicionar um link para a minha conta no Mastodon (com um emoji de elefante).</p> +<pre class="language-html"><code class="language-html"><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>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>https://social.lol/@bw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Drop me a line on Mastodon<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>p</span><span class="token punctuation">></span></span></code></pre> +<p>Lembre-se: um link é uma tag <code><a></code>. O texto que você envolve com a tag vira clicável. Depois você informa o <em>atributo</em> <code>href</code>, que é o destino do link — em geral, um URL.</p> +<aside class="aside"><p class="aside-label">Seletor de emoji</p><p>Para abrir um seletor de emoji:</p> +<ul> +<li>No Windows, pressione a tecla Windows + ponto (<code>.</code>)</li> +<li>No macOS, pressione <code>fn</code> + <code>e</code>.</li> +</ul> +</aside> +<p>Aqui está o meu código dentro da tag <code><body></code>.</p> +<pre class="language-html"><code class="language-html"><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>h1</span><span class="token punctuation">></span></span>About Blake<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>img</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>images/blake.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>p</span><span class="token punctuation">></span></span> + My name is Blake. I enjoy making websites and teaching others to do the same. I started writing an HTML web book because I think everyone should have a personal website and I want to show that you don't have to be a computer science graduate to make one. + <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>p</span><span class="token punctuation">></span></span> + I'm a side project enthusiast and have put various sites, apps, and (bad) games into the world. My hobbies include web-related nerdery, D&D and board games, and writing. I like to participate in National Novel Writing Month, the annual novel-writing challenge + <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>p</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>https://social.lol/@bw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Drop me a line on Mastodon<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>p</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>Favorite board games<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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></code></pre> +<p>E é assim que fica.</p> +<p><img src="/assets/img/adding-an-about-page-1.webp" alt="Captura de tela da página “About Blake”. O cabeçalho mostra “About Blake.” Abaixo há uma foto do Blake (eu!) sorrindo na frente de um muro de tijolos. O texto apresenta o Blake, falando da paixão por fazer sites e ensinar outras pessoas, além dos hobbies com desenvolvimento web, D&D, jogos de tabuleiro e escrita. Há um link para falar com ele no Mastodon. Uma seção chamada “Favorite board games” lista “Dungeons & Dragons,” “Risk” e “Pandemic.” O rodapé da página diz “Made with ❤️ and ☕ by Blake Watson.”"></p> +<p>Surpresa, sou eu! Enfim, isto já parece uma página Sobre de verdade. Eu admito que está um pouco forçado. Sinta-se à vontade para escrever o quanto quiser aqui.</p> +<h2 id="navegando-entre-as-paginas" tabindex="-1"><a class="header-anchor" href="#navegando-entre-as-paginas">Navegando entre as páginas</a></h2> +<p>A gente já tem uma página Sobre, mas precisa de um jeito de ir de uma página à outra. A gente precisa de um menu de navegação, ou menu nav. Um menu nav é só uma lista de links. O Simple.css parece gostar do menu nav acima do cabeçalho, então eu vou colocar ali. Mas você também pode colocar abaixo, se quiser.</p> +<p>O HTML tem uma tag <code><nav></code> exatamente para isso. Vamos colocar dois links no nosso menu nav — um para a página inicial e um para a página Sobre.</p> +<pre class="language-html"><code class="language-html"><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>about.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>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>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>About Blake<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></code></pre> +<p>Como esta é, no momento, a página Sobre, eu adicionei um atributo especial ao link. ARIA significa Accessible Rich Internet Applications. A gente deixa o site mais acessível adicionando o atributo <code>aria-current="page"</code>. Isso faz um par de coisas por nós.</p> +<ul> +<li>Deixa a página mais acessível para tecnologias assistivas, como leitores de tela.</li> +<li>O Simple.css estiliza o link de outro jeito, para ficar fácil ver em qual página a gente está.</li> +</ul> +<p><img src="/assets/img/adding-an-about-page-2.webp" alt="Captura de tela da parte de cima da página “About Blake”, com botões de navegação. A navegação inclui “Home” e “About,” com o botão “About” em destaque para indicar a página atual. O título “About Blake” aparece em negrito abaixo da barra de navegação."></p> +<p>Vamos adicionar o mesmo menu nav na página inicial. Abra o <code>index.html</code> e coloque o menu como a gente fez na página Sobre. Como esta é a página inicial, a gente deve colocar o atributo <code>aria-current</code> no link Home.</p> +<pre class="language-html"><code class="language-html"><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 attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>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>Blake's Homepage<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></code></pre> +<p>Abra no navegador e admire o seu site de várias páginas! Clique. Clique. Clique…</p> +<h2 id="limpando-a-pagina-inicial" tabindex="-1"><a class="header-anchor" href="#limpando-a-pagina-inicial">Limpando a página inicial</a></h2> +<p>Como agora a gente tem uma página Sobre, parte do conteúdo da página inicial ficou repetido. Um pouco disso já está na página Sobre. Eu vou tirar o texto de bio, o link do Neal.fun e a lista de jogos de tabuleiro. Vou manter a imagem do espaço e adicionar um parágrafo de boas-vindas. E já que estamos nisso, vou manter a lista “how to make a website”.</p> +<p>Falando da imagem do espaço, vamos deixá-la mais interessante. Eu quero dar uma legenda a esta imagem e um link para o lugar de onde eu a tirei. A gente pode marcar melhor uma imagem envolvendo-a numa tag <code><figure></code> e incluindo um <code><figcaption></code>.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>figcaption</span><span class="token punctuation">></span></span> + Space is cool. <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>https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Photo source<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>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span></code></pre> +<p>O meu conteúdo <code><main></code> na página inicial agora fica assim.</p> +<pre class="language-html"><code class="language-html"><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>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<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>figcaption</span><span class="token punctuation">></span></span> + Space is cool. <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>https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Photo source<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>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</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> + Welcome to my website! Here you can find out more about me, read my very interesting and totally not contrived blog posts, and check out some of the fun hobbies I am into. It won't be long until you are wondering what sorcery I have used to create this mind-blowing, web-based experience. The answer is HTML. + <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>h2</span><span class="token punctuation">></span></span>How to make a website<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>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>notice<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>strong</span><span class="token punctuation">></span></span>Quer aprender a fazer um site como este?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Confira o livro-web gratuito <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>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML e Pessoas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Foi feito para todo mundo e ensina a criar uma página de um jeito amigável e acessível. + <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>main</span><span class="token punctuation">></span></span></code></pre> +<p>O que é este <code>class="notice"</code>? Você pode aprender mais sobre classes nos capítulos bônus de CSS no fim deste livro. Mas, em resumo, isso ativa alguns estilos que o Simple.css oferece para fazer uma caixinha com um pouco de texto.</p> +<p><img src="/assets/img/adding-an-about-page-3.webp" alt="Captura de tela da “Blake's Homepage” reorganizada. O cabeçalho inclui botões de navegação para “Home” (em destaque) e “About.” Abaixo há uma imagem grande e colorida de um céu estrelado. O texto de introdução dá as boas-vindas, fala de posts de blog e hobbies, com um tom brincalhão sobre a simplicidade de usar HTML. Uma seção chamada “How to make a website” lista três passos: “Create an HTML file,” “Write some HTML in it” e “Open it with your web browser.” Uma caixa em destaque convida as visitas a conferir o tutorial “HTML for People.”"></p> +<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2> +<p>Se você quiser. Também está tudo bem continuar trabalhando no computador. Muitos sites são feitos assim — a pessoa trabalha no site no próprio computador até terminar e só então publica. Mas tem bastante gente que também constrói o site em público, atualizando o site no ar conforme avança.</p> +<p>Se quiser atualizar, volte ao painel do Neocities e envie tanto o <code>index.html</code> quanto o <code>about.html</code>, já que esses arquivos mudaram. Se você adicionou alguma imagem, precisa entrar na pasta de imagens no Neocities e enviá-las lá (ou pode arrastar a pasta <code>images</code> para a área de soltar arquivos, o que substitui a pasta inteira e o conteúdo).</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>A gente transformou a nossa <em>página</em> num <em>site</em>! A seguir, vamos adicionar um blog e explorar várias tags HTML.</p> + + + <h1 id="adicionar-um-blog" tabindex="-1"><a class="header-anchor" href="#adicionar-um-blog">Adicionar um blog</a></h1> +<p>Blogs são uma parte enorme da web. Você provavelmente já ouviu falar de várias plataformas populares de blog, como WordPress, Tumblr e Blogger. E existem um monte de <a href="https://perma.cc/K3PV-JL9S">plataformas menores e independentes</a>.</p> +<p>Mas você não <em>precisa</em> de uma dessas plataformas para ter um blog. Um blog é só uma série de posts em ordem cronológica (em geral, cronológica <em>inversa</em>, com os posts mais novos primeiro). A gente consegue fazer isso com HTML!</p> +<p>Eu vou adicionar três posts. Não vou colocar todo o código neste capítulo, porque ficaria um pouco longo demais. Você pode olhar o site de demonstração para ver os artigos prontos. Mas eu <em>vou</em> te mostrar como estruturar os arquivos e passar por algumas das tags HTML diferentes que a gente pode usar.</p> +<h2 id="crie-a-home-do-blog" tabindex="-1"><a class="header-anchor" href="#crie-a-home-do-blog">Crie a home do blog</a></h2> +<p>Siga estes passos para deixar o blog disponível em <code>sitename.neocities.org/blog</code>.</p> +<ol> +<li>Crie uma pasta chamada <code>blog</code>; dentro dela, crie um arquivo chamado <code>index.html</code>.</li> +<li>Copie o conteúdo de uma das suas outras páginas e cole neste <code>index.html</code> novo e vazio.</li> +<li>Mude o <code><h1></code> para “Blog”, “Meu blog” ou o nome que você quiser.</li> +<li>Mude o <code><title></code> para alterar o que aparece na aba. Por exemplo, “Blog - Blake’s Homepage.”</li> +<li>Limpe o conteúdo principal para ficar com uma tag <code><main></code> vazia. A gente adiciona conteúdo depois.</li> +</ol> +<p>Vamos abrir no navegador e ver como ficou.</p> +<p><img src="/assets/img/adding-a-blog-1.webp" alt="Captura de tela da página “Blog” no site do Blake. A página tem pouco estilo porque as referências de arquivo estão quebradas. O layout é simples e sem estilo, com texto preto comum sobre fundo branco. O cabeçalho tem links para “Home” e “About” em azul e sublinhados, no estilo padrão do navegador. O título principal “Blog” está em negrito e grande, mas a aparência geral não tem o desenho estruturado das páginas anteriores."></p> +<p>Opa, a gente quebrou; o que aconteceu!? Tem a ver com a estrutura de arquivos. Olhe a tag <code><link></code>, onde a gente adicionou os estilos do Simple.css.</p> +<pre class="language-html"><code class="language-html"><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></code></pre> +<p>Ela está procurando <code>css/simple.css</code>, mas não encontra. Por quê? O caminho que a gente deu é <em>relativo</em> ao arquivo atual. O arquivo atual está na pasta <code>blog</code>, então ela procura <code>blog/css/simple.css</code>, que não existe.</p> +<p>Então, como a gente se refere a arquivos que não estão na pasta atual? A gente pode usar a sintaxe <code>..</code>, assim.</p> +<pre class="language-html"><code class="language-html"><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></code></pre> +<p>Isso significa: “suba um nível e, então, procure css/simple.css.”</p> +<p><img src="/assets/img/adding-a-blog-2.webp" alt="Captura de tela da página “Blog” no site do Blake, agora com o estilo corrigido. A página mostra um cabeçalho claro, com botões arredondados para “Home” e “About,” melhorando a navegação. O título principal “Blog” está bem no centro, em negrito, com uma hierarquia visual clara. O rodapé tem uma linha fina de divisão acima e o texto centralizado."></p> +<p>Bem melhor! Agora, vamos atualizar a navegação. Como a página inicial e a página Sobre não estão na pasta atual, a gente precisa usar a mesma sintaxe <code>..</code> para criar o link até elas.</p> +<pre class="language-html"><code class="language-html"><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>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>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>nav</span><span class="token punctuation">></span></span></code></pre> +<p>Você também precisa atualizar a navegação nas outras páginas para incluir um link para o blog. Por exemplo, o nav da página inicial 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>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 attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>nav</span><span class="token punctuation">></span></span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Como a gente está abrindo os arquivos do site direto no navegador, está usando <em>URLs relativas</em> para formar os links para outras páginas e arquivos. Num capítulo que vem aí, a gente vai aprender a <a href="/intervalo-instalar-um-servidor-local">rodar um servidor web local</a> e como isso nos permite usar <em>URLs absolutas</em>, que são mais diretas.</p> +</aside> +<h2 id="crie-o-primeiro-post" tabindex="-1"><a class="header-anchor" href="#crie-o-primeiro-post">Crie o primeiro post</a></h2> +<p>Eu vou escrever um post bobo sobre ensinar HTML a um gato. Vou criar um arquivo <code>2024-04-12-whiskers.html</code> na pasta <code>blog</code>. Você pode nomear o arquivo do post como quiser. O legal de incluir a data é que, conforme você cria mais posts, eles aparecem em ordem no sistema de arquivos do computador.</p> +<p>Como ponto de partida, a gente copia o conteúdo de <code>blog/index.html</code> para o arquivo novo. Eu vou mudar o <code><h1></code> (e o <code><title></code>) para o nome do meu artigo, “How I taught my cat to make a website with HTML.” Também vou ajustar a navegação. A gente não está na página de listagem do Blog, então não é correto dizer <code>aria-current="page"</code> no link do blog. Mas <em>está</em> dentro da seção Blog do site. Então eu vou mudar o atributo para o mais geral <code>aria-current="true"</code>. Isto é <strong>só para páginas de posts individuais</strong>.</p> +<pre class="language-html"><code class="language-html"><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>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<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>nav</span><span class="token punctuation">></span></span></code></pre> +<p>No fim do post, eu vou adicionar um link de volta ao blog. Como a gente já está na pasta <code>blog</code>, um link para <code>index.html</code> é tudo que a gente precisa para chegar à home do blog.</p> +<pre class="language-html"><code class="language-html"><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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="←">&larr;</span> Back to the blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>O pedaço <code>class="button"</code> é um estilo que o Simple.css oferece e que faz um link de texto parecer um botão. O <code>&larr;</code> é um código especial chamado de <em>entidade HTML</em>. Elas servem para representar caracteres especiais. Esta daqui é uma <em>seta para a esquerda</em>. Você pode ver uma <a href="https://perma.cc/BEA6-LF46">lista de outras entidades aqui</a>.</p> +<p>Eu vou adicionar três posts com uns poucos dias de diferença, só como exemplo. Quando eu terminar, vou ter estes posts.</p> +<ul> +<li><a href="https://demo.htmlforpeople.com/blog/2024-04-12-whiskers.html">How I taught my cat to make a website with HTML</a></li> +<li><a href="https://demo.htmlforpeople.com/blog/2024-04-15-aliens.html">The time I built a website for aliens</a></li> +<li><a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">Why donuts are the best thing ever</a></li> +</ul> +<p>A minha estrutura de arquivos vai ficar assim:</p> +<ul> +<li><code>blog</code> +<ul> +<li><code>2024-04-12-whiskers.html</code></li> +<li><code>2024-04-15-aliens.html</code></li> +<li><code>2024-04-20-donuts.html</code></li> +<li><code>index.html</code></li> +</ul> +</li> +<li><code>css</code> +<ul> +<li><code>simple.css</code></li> +</ul> +</li> +<li><code>images</code> +<ul> +<li><code>blake.jpg</code></li> +<li><code>space.jpg</code></li> +</ul> +</li> +<li><code>about.html</code></li> +<li><code>index.html</code></li> +</ul> +<h2 id="formatacao-de-texto" tabindex="-1"><a class="header-anchor" href="#formatacao-de-texto">Formatação de texto</a></h2> +<p>Vamos ver algumas tags que você pode usar nos posts e em outras páginas.</p> +<p>Para negrito e itálico, a gente pode usar as tags <code><strong></code> e <code><em></code>, nesta ordem.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + After just three days, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Whiskers can now create web pages<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> better than <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>I<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> can! +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p>Isso renderiza assim.</p> +<p><img src="/assets/img/adding-a-blog-3.webp" alt="A captura de tela do texto renderizado mostra o seguinte em negrito: “Whiskers can now create web pages”"></p> +<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2> +<p>A gente pode usar a tag <code><blockquote></code> para citar uma pessoa, um livro, outro site ou até a si mesmo.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span> + "HTML is <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>elementary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> my dear Watson."<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="—">&mdash;</span> Whiskers, probably<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span></code></pre> +<p>Aqui eu estou usando <code><strong></code> para dar ênfase extra. Estou usando a tag <code><cite></code> para mostrar a fonte da citação. A tag <code><br></code>, que é <em>self-closing</em>, cria uma quebra de linha manual, o que empurra o elemento <code><cite></code> para a linha seguinte. Eu usei outro caractere especial, <code>&mdash;</code>, para criar um <a href="https://practicaltypography.com/hyphens-and-dashes.html"><em>travessão</em> (em dash)</a>.</p> +<p><img src="/assets/img/adding-a-blog-4.webp" alt="Uma citação em bloco estilizada, renderizada no navegador. A frase “HTML is elementary my dear Watson.” está em itálico, e a palavra “elementary” também está em negrito. Uma barra vertical azul aparece à esquerda da citação, dando ênfase visual. Abaixo da citação, a atribuição “— Whiskers, probably” aparece numa fonte menor, alinhada à esquerda, criando uma atribuição visualmente distinta."></p> +<p>Citações em bloco costumam ser estilizadas como blocos de texto recuados, muitas vezes com uma borda ou uma cor de fundo para dar mais ênfase. A imagem acima mostra como o Simple.css as estiliza (salvo aviso em contrário, todas as imagens de exemplo que eu posto são HTML estilizado com Simple.css).</p> +<h2 id="recapitulando-titulos-e-listas" tabindex="-1"><a class="header-anchor" href="#recapitulando-titulos-e-listas">Recapitulando: títulos e listas</a></h2> +<p>A gente cobriu isto rapidinho no Capítulo 2, <a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a>, mas vale recapitular. Os nossos posts já usam o título mais alto, o <code><h1></code>, mas se você estiver escrevendo um post que precisa de mais títulos, tudo bem!</p> +<p>Títulos em HTML são hierárquicos. Isso significa que títulos <code><h2></code> devem vir depois de títulos <code><h1></code>, títulos <code><h3></code> devem vir depois de títulos <code><h2></code>, e assim por diante. Tecnicamente, o HTML nos dá seis níveis de título — de <code><h1></code> a <code><h6></code>. Mas a moderação é importante aqui. Pergunte a si mesmo se você <em>realmente</em> está deixando a página mais fácil de entender ao adicionar tantos níveis de título. O meu conselho é ficar com três níveis ou menos.</p> +<p>E, claro, a gente tem listas. A gente cobriu isso no Capítulo 2, mas vamos olhar de novo. Você tem duas opções aqui — uma lista com marcadores (chamada de <em>não ordenada</em>) e uma lista numerada (chamada de <em>ordenada</em>).</p> +<p>Aqui está uma lista com marcadores, ou <em>não ordenada</em>, usando a tag <code><ul></code> para a lista e <code><li></code> para cada <em>item da lista</em>.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Bread<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sugar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Hole<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>Isso renderiza assim.</p> +<ul> +<li>Bread</li> +<li>Sugar</li> +<li>Hole</li> +</ul> +<p>E aqui está uma lista numerada, ou <em>ordenada</em> (com alguns pontos em negrito para dar ênfase).</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Portable Happiness:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Donuts are the perfect grab-and-go + food. You can take them anywhere: to work, to the park, or on a road trip. + They're like little circles of happiness that fit in your hand. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Instant Mood Boost:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Feeling down? Have a donut. It's + scientifically proven* that donuts can turn a frown upside down. (*Not + actually proven, but we all know it's true.) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Endless Creativity:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Donut shops are constantly coming up + with new and exciting flavors. From maple bacon to matcha green tea, the + possibilities are endless. It's like a delicious adventure every time you + visit. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre> +<p>É assim que fica.</p> +<ol> +<li><strong>Portable Happiness:</strong> Donuts are the perfect grab-and-go food. You can take them anywhere: to work, to the park, or on a road trip. They’re like little circles of happiness that fit in your hand.</li> +<li><strong>Instant Mood Boost:</strong> Feeling down? Have a donut. It’s scientifically proven* that donuts can turn a frown upside down. (*Not actually proven, but we all know it’s true.)</li> +<li><strong>Endless Creativity:</strong> Donut shops are constantly coming up with new and exciting flavors. From maple bacon to matcha green tea, the possibilities are endless. It’s like a delicious adventure every time you visit.</li> +</ol> +<p>Você até pode <em>aninhar</em> listas, assim.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + First main point + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sub point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another sub point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + Second main point + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sub-point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another sub-point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> +<p>Isso renderiza mais ou menos assim.</p> +<ul> +<li>First main point +<ul> +<li>Sub point</li> +<li>Another sub-point</li> +</ul> +</li> +<li>Second main point +<ul> +<li>Sub point</li> +<li>Another sub-point</li> +</ul> +</li> +</ul> +<h2 id="separando-o-conteudo" tabindex="-1"><a class="header-anchor" href="#separando-o-conteudo">Separando o conteúdo</a></h2> +<p>Um dos jeitos de adicionar espaço entre elementos na mão é a tag <code><br></code>, ou tag de <em>quebra</em> (<em>break</em>). A tag de quebra adiciona uma quebra de linha. Por exemplo, veja este haicai (de <a href="http://www.npr.org/blogs/thetwo-way/2013/05/02/180532424/send-your-haiku-to-mars-nasa-seeks-poets#comment-882372940">Robert Cole</a>).</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + A timeless red orb + floats lazy in the ether + unimpressed by war. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p>Por padrão, o navegador renderiza tudo numa linha só e ignora a maior parte do espaço em branco no seu HTML.</p> +<p><img src="/assets/img/adding-a-blog-5.webp" alt="Uma única linha de texto renderizada no navegador: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão, sem estilo extra, centralizado na horizontal na página."></p> +<p>Por um lado, isso é bom — significa que a gente pode formatar o código do jeito que quiser sem as visitas verem um monte de quebras de linha e recuos que a gente não pretendia. Mas, às vezes, a gente <em>quer</em> quebras de linha de verdade.</p> +<p>A gente conserta o haicai colocando um par de tags <code><br></code> ali.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + A timeless red orb<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + floats lazy in the ether<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + unimpressed by war. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> +<p><img src="/assets/img/adding-a-blog-6.webp" alt="Texto em várias linhas no navegador, com quebra natural das palavras: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão e está quebrado em três linhas."></p> +<p>Isso ajuda em doses pequenas, mas use com parcimônia. Na maior parte do tempo, o espaço entre elementos deve ser controlado com CSS — aplicando <code>margin</code> ou <code>padding</code>, por exemplo. Por sorte, a nossa folha de estilo Simple.css já tem um espaçamento padrão bom. A gente cobre o uso de CSS para espaçamento personalizado no <a href="/basico-de-css">capítulo bônus</a> no fim deste livro.</p> +<p>Outro jeito de separar o conteúdo na mão é usar uma <em>linha horizontal</em>, ou tag <code><hr></code>. Em geral, ela é estilizada como uma linha na horizontal. Isso pode ajudar quando você quer separar conteúdo — como uma seção nova ou uma cena nova, no caso de uma história. É mais ou menos assim que pode ficar.</p> +<p><img src="/assets/img/adding-a-blog-7.webp" alt="Dois parágrafos de texto de preenchimento renderizados no navegador. Os parágrafos estão separados por uma linha horizontal, o que dá uma divisão visual clara. O texto aparece numa fonte sans-serif padrão, e cada parágrafo tem um espaçamento de linha adequado, o que melhora a leitura."></p> +<aside class="aside"><p class="aside-label">Observação</p><p>O que é esse texto sem sentido? É um texto meio latim chamado <em><a href="https://en.wikipedia.org/wiki/Lorem_ipsum">lorem ipsum</a></em>, que costuma ser usado em situações de design quando você quer ver como o texto fica sem se distrair com o que ele diz.</p> +</aside> +<h2 id="codigo-e-texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#codigo-e-texto-pre-formatado">Código e texto pré-formatado</a></h2> +<p>Eu tenho usado estas tags <em>bastante</em> nas páginas que você está lendo neste livro. Veja este parágrafo:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + By the end of day one, he was familiar with basic tags like <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>html<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>head<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>body<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating + paragraphs and lists. By day three, he had moved on to creating stunning + layouts with <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>article<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>section<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</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></code></pre> +<p>Isso vai mostrar os pedaços de código numa fonte monoespaçada e numa cor diferente, assim.</p> +<p><img src="/assets/img/adding-a-blog-8.webp" alt="Um parágrafo de texto renderizado no navegador, com tags HTML específicas em destaque em vermelho. O texto diz: “By the end of day one, he was familiar with basic tags like html, head, and body.” As palavras em destaque “html,” “head” e “body” estão em vermelho, numa fonte monoespaçada, enquanto o resto do texto permanece preto, chamando a atenção para estes termos."></p> +<p>Você já me viu incluir os símbolos de menor que (<code><</code>) e maior que (<code>></code>) nos elementos de código das páginas deste livro (assim, <code><a></code>). Isso pede um trabalhinho a mais. Tipo, se eu quiser mencionar uma tag <code><a></code>, eu não posso simplesmente escrever <code><code><a></code></code> porque o navegador vai achar que eu estou tentando fazer um link de verdade dentro da tag <code><code></code>. Para incluir os símbolos de menor que e maior que (às vezes chamados de “colchetes angulares”), a gente precisa das entidades HTML <code>&lt;</code> e <span style="text-wrap: nowrap"><code>&gt;</code>, </span>nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + By the end of day one, he was familiar with basic tags like + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>html<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>head<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, and + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>body<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating paragraphs and lists. + By day three, he had moved on to creating stunning layouts with + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>article<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>section<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</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></code></pre> +<p>Isso nos dá o seguinte.</p> +<p><img src="/assets/img/adding-a-blog-9.webp" alt="Um parágrafo parecido com o anterior, mas com as tags HTML cercadas por colchetes angulares, o que enfatiza o papel delas como elementos HTML. O texto diz: “By the end of day one, he was familiar with basic tags like , , and .”"></p> +<p>Como a gente viu antes, ao renderizar o seu conteúdo, o navegador ignora a maior parte do espaço em branco no seu código. Mas, às vezes, você quer preservar o espaçamento e as quebras de linha exatos. Um exemplo divertido é a arte ASCII, que é quando você faz arte com caracteres de texto puro.</p> +<pre class="language-html"><code class="language-html mono"> ___ ___ ___ ___ + /\__\ /\ \ /\__\ /\__\ + /:/__/_ \:\ \ /::L_L_ /:/ / + /::\/\__\ /::\__\ /:/L:\__\ /:/__/ + \/\::/ / /:/\/__/ \/_/:/ / \:\ \ + /:/ / \/__/ /:/ / \:\__\ + \/__/ \/__/ \/__/</code></pre> +<p>O de cima deve aparecer como as letras “HTML” com um efeito 3D. Funciona porque usa uma fonte monoespaçada e preserva todo o espaço em branco. Como eu fiz? Eu usei a tag <code><pre></code>, que é para texto <em>pré-formatado</em>. Use assim.</p> +<pre class="language-html"><code class="language-html mono"><pre> + ___ ___ ___ ___ + /\__\ /\ \ /\__\ /\__\ + /:/__/_ \:\ \ /::L_L_ /:/ / + /::\/\__\ /::\__\ /:/L:\__\ /:/__/ + \/\::/ / /:/\/__/ \/_/:/ / \:\ \ + /:/ / \/__/ /:/ / \:\__\ + \/__/ \/__/ \/__/ +</pre></code></pre> +<p>Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste <a href="https://perma.cc/E5NZ-SV56">gerador de arte em texto</a>.</p> +<h2 id="asides" tabindex="-1"><a class="header-anchor" href="#asides">Asides</a></h2> +<p>A tag <code><aside></code> é divertida porque o Simple.css a estiliza de um jeito interessante. Elas servem para destaques ou <em>apartes</em> em relação ao conteúdo principal. Por exemplo, eu incluí um aside que lista ingredientes no meu <a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">post sobre donuts</a>.</p> +<p><img src="/assets/img/adding-a-blog-10.webp" alt="Captura de tela de um post chamado “Why donuts are the best thing ever,” datado de 20 de abril de 2024. A página tem um menu de navegação com os botões “Home,” “Blog” (em destaque) e “About.” O post fala da alegria e da versatilidade dos donuts, com uma caixa na lateral listando “Donut ingredients” (Bread, Sugar, Hole). O layout é limpo e bem espaçado para a leitura."></p> +<p>O Simple.css estiliza o aside como uma caixa arredondada e o desloca para o lado. É um jeito legal de adicionar notas extras ou conteúdo secundário a uma página.</p> +<h2 id="mark-tachado-exclusao-insercao" tabindex="-1"><a class="header-anchor" href="#mark-tachado-exclusao-insercao">Mark, tachado, exclusão, inserção</a></h2> +<p>Aqui vão mais algumas tags de formatação de texto. Use <code><mark></code> para <mark>destacar texto</mark>. Se quiser tachar texto <s>indesejado</s>, envolva-o na tag <code><s></code>. Se quiser mostrar edições num documento de forma explícita, prefira a tag <code><del></code> para indicar uma exclusão e a tag <code><ins></code> para mostrar texto inserido. Por exemplo, isto vem do meu post sobre donuts.</p> +<p><img src="/assets/img/adding-a-blog-11.webp" alt="Captura de tela de texto com formatação de tachado e sublinhado. A frase “it's vegetables” está tachada, e “donuts” está sublinhado, enfatizando a troca de “vegetables” por “donuts” para destacar uma preferência bem-humorada na frase."></p> +<h2 id="preencha-a-pagina-indice-do-blog" tabindex="-1"><a class="header-anchor" href="#preencha-a-pagina-indice-do-blog">Preencha a página índice do blog</a></h2> +<p>Certo, a gente cobriu várias tags que você pode usar para <em>marcar</em> tipos diferentes de conteúdo. Você pode parar um pouco e brincar com elas. Sem pressa! Eu fico bem aqui quando você estiver pronto. Quando tiver dois ou três posts, vamos colocá-los na página principal do blog.</p> +<p>Se você abrir <code>blog/index.html</code>, ela parece um pouco vazia. A gente conserta isso agora, mostrando o título de cada post, o mais novo primeiro, a data de publicação e um resumo de uma frase. Clicar no título de um post deve levar a pessoa leitora até ele.</p> +<p>Vamos usar a tag <code><article></code> para cada um, porque cada um representa uma composição independente. De brinde, o Simple.css vai estilizá-los como cartões. Vamos usar <code><h2></code> para o título do post, e dentro dele a gente coloca um link (a tag <code><a></code>). Vamos usar a tag <code>time</code> para a data. Vamos usar um parágrafo comum, ou tag <code><p></code>, para o resumo. A marcação final fica assim.</p> +<pre class="language-html"><code class="language-html"><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>article</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> + <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>2024-04-20-donuts.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Why donuts are the best thing ever + <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>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><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-04-20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 20, 2024<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Donuts are the ultimate comfort food because of their versatility, + variety, portability, mood-boosting power, and endless creative flavors. + <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>article</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></code></pre> +<p>O link no título vai receber um <em>atributo</em> <code>href</code>, o destino do link. Como a gente já está na pasta <code>blog</code>, a gente pode usar o nome do arquivo do post como destino.</p> +<p>A gente está usando a tag <code><time></code> para oferecer uma versão da data amigável para máquinas. Isso pode ser útil para mecanismos de busca que vasculham o seu site ou para possíveis recursos do navegador que dependem de datas. A tag <code><time></code> recebe um atributo chamado <code>datetime</code>, no qual você pode informar a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">versão legível por máquina</a>.</p> +<p>Adicione um <code><article></code> como o de cima para cada post ao qual você quiser ligar. Você vai acabar com algo assim.</p> +<p><img src="/assets/img/adding-a-blog-12.webp" alt="Captura de tela de uma página de listagem de blog, com um cabeçalho contendo botões de navegação para “Home,” “Blog” (em destaque) e “About.” O título principal diz “Blog.” Abaixo há três prévias de posts, com títulos em azul: “Why donuts are the best thing ever,” “The time I built a website for aliens” e “How I taught my cat to make a website with HTML,” cada uma com um resumo breve e a data (20 de abril, 15 de abril e 12 de abril de 2024, nesta ordem)."></p> +<h2 id="uma-tabela-dos-elementos-html" tabindex="-1"><a class="header-anchor" href="#uma-tabela-dos-elementos-html">Uma tabela dos elementos (HTML)</a></h2> +<p>Ufa! A gente cobriu um bocado de tags e adicionou bastante conteúdo neste capítulo. Pode ser muita coisa para lembrar. Se você precisar consultar como usar uma tag HTML em particular — ou se quiser ver quais tags HTML existem — dê uma olhada nesta <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">referência de elementos HTML</a> no MDN. O <a href="https://developer.mozilla.org">MDN</a> é, mais ou menos, o manual oficial da web. É só pesquisar qualquer tag, atributo ou conceito sobre o qual você queira saber mais.</p> +<h2 id="atualize-o-site-no-ar-opcional" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar-opcional">Atualize o site no ar (opcional)</a></h2> +<p>Se quiser enviar as mudanças para o Neocities, siga o mesmo processo dos capítulos anteriores. Arraste e solte a pasta <code>blog</code> na área de soltar arquivos para enviar a pasta inteira de uma vez. Como você atualizou o menu nav em todas as páginas, também vai querer enviar de novo as páginas Home e Sobre.</p> +<p>Claro, você também pode continuar trabalhando <em>localmente</em>, em vez de enviar o progresso agora. Você que manda!</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Ufa, a gente terminou o nosso tour rápido de adicionar um blog com várias tags! A seguir, a gente reduz o ritmo e foca na estrutura da página, adicionando uma página de currículo que você pode compartilhar com empregadores em potencial.</p> + + + <h1 id="adicionar-um-curriculo-ou-cv" tabindex="-1"><a class="header-anchor" href="#adicionar-um-curriculo-ou-cv">Adicionar um currículo (ou CV)</a></h1> +<p>Nos capítulos anteriores, a gente aprendeu a colocar vários tipos de conteúdo nas páginas HTML. Agora vamos ver como dar estrutura a uma página grande. Vamos adicionar uma página de currículo (CV).</p> +<p>Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um <em>curriculum vitae</em>. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho.</p> +<p>Não se preocupe se você ainda não tem muita experiência. Dá para criar seções falando da sua formação: diplomas, matérias e atividades da escola. Ou você pode focar em trabalhos de meio período ou no voluntariado.</p> +<p>Outra opção é deixar menos “currículo” e mais portfólio de projetos, se isso fizer mais sentido para você. Inclua habilidades que você já tem (tipo HTML!). Pesquise dicas de currículo na web. A internet está cheia de conselhos para gente em fases diferentes da carreira.</p> +<p>Mas se currículo não é a sua praia, tudo bem. Pegue as ideias de marcação que a gente explora aqui e use do jeito que quiser. O site é seu. É importante que você goste de fazê-lo.</p> +<h2 id="criar-o-arquivo-do-curriculo" tabindex="-1"><a class="header-anchor" href="#criar-o-arquivo-do-curriculo">Criar o arquivo do currículo</a></h2> +<p>Crie um arquivo na raiz do site, <code>resume.html</code>, e copie o conteúdo de uma das outras páginas principais para dentro dele.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você está usando o Visual Studio Code, selecione uma das páginas principais na barra lateral e depois copie e cole. Vai nascer uma cópia da página, e você pode renomear o arquivo.</p> +</aside> +<p>Do jeito que você criar o arquivo, lembre de atualizar o <code><title></code>, o <code><h1></code> e o <code><nav></code>. Eu vou colocar o meu nome no <code><h1></code> e a profissão (ou um resumo) logo abaixo, em uma tag <code><p></code>.</p> +<pre class="language-html"><code class="language-html"><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 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>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>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>Blake Watson<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>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre> +<h2 id="um-documento-com-secoes" tabindex="-1"><a class="header-anchor" href="#um-documento-com-secoes">Um documento com seções</a></h2> +<p>Um currículo quase sempre se divide em seções. As mais comuns são experiência, formação e habilidades. O HTML tem uma ferramenta para criar uma seção genérica de um documento: a tag <code><section></code>. Cada seção deve ter um título, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">segundo a documentação</a>.</p> +<p>Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag <code><section></code> para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas.</p> +<p>Eu vou criar as seções abaixo. Mas lembre: você pode ter mais ou menos, conforme precisar. Elas não precisam ser iguais às minhas, nem na mesma ordem.</p> +<ul> +<li>Habilidades</li> +<li>Experiência</li> +<li>Projetos selecionados</li> +<li>Formação</li> +</ul> +<h2 id="habilidades" tabindex="-1"><a class="header-anchor" href="#habilidades">Habilidades</a></h2> +<p>Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um <code><section></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>Skills<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Isso aparece assim na tela.</p> +<p><img src="/assets/img/adding-a-resume-1.webp" alt="Captura de tela de uma página “Resume” de Blake Watson. O cabeçalho tem botões de navegação para “Home”, “Blog”, “About” e “Resume” (este último destacado). O título “Blake Watson” aparece em negrito, com o subtítulo “Experienced Frontend Engineer” em itálico menor logo abaixo. Em seguida, uma seção chamada “Skills” lista várias habilidades técnicas em tópicos."></p> +<p>É uma lista limpa, com marcadores. Dito isso, eu sinto que sobra um pouco de espaço. Seria legal dividir em colunas. Não existe um jeito estritamente HTML de fazer isso. Mas vale usar um pouquinho de CSS para resolver.</p> +<p>Você já viu várias tags usando <em>atributos</em>. Cada página do nosso site tem links com a tag <code><a></code>, e cada link tem um atributo <code>href</code>, por exemplo. Outro atributo bem útil é o <code>style</code>. Ele deixa a gente aplicar CSS direto em um elemento HTML. Eu falo mais de CSS nos capítulos bônus no fim deste livro. Por agora, vamos usar o atributo <code>style</code> para dividir a lista em colunas.</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>Skills<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>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Assim a lista fica mais agradável e aproveita melhor o espaço.</p> +<p><img src="/assets/img/adding-a-resume-2.webp" alt="Captura de tela da página “Resume” atualizada. A seção “Skills” agora está organizada em duas colunas, cada uma com habilidades técnicas em tópicos, num visual mais compacto e equilibrado."></p> +<h2 id="experiencia" tabindex="-1"><a class="header-anchor" href="#experiencia">Experiência</a></h2> +<p>Eu não sou especialista em currículo. Mas acho que vou colocar a experiência de trabalho em seguida. É provavelmente o que um empregador da minha área mais quer ver. Isso muda se você não tem muita experiência, ou se acha que formação ou outras qualificações pesam mais.</p> +<p>Marcar conteúdo é tanto arte quanto ciência. Não existe um único jeito certo. Um bom princípio para escolher as tags é este: a escolha precisa ter significado. Não vale escolher só pela aparência.</p> +<p>Por exemplo: você pode ficar tentado a usar um <code><h6></code> em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, <code><h6></code> não é a melhor escolha.</p> +<p>Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação.</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>Experience<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>h3</span><span class="token punctuation">></span></span>Frontend Engineer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span>Present + <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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + Build and maintain a document management system for Collins Aerospace + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- ...the rest of the jobs go here --></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>Isso nos dá uma seção com esta cara.</p> +<p><img src="/assets/img/adding-a-resume-3.webp" alt="Captura de tela da seção “Experience” numa página de currículo. O título “Experience” está grande e em negrito. Abaixo, o cargo “Frontend Engineer” aparece em destaque, seguido do nome da empresa “MRI Technologies” em negrito e do período “August 2019–Present”. Uma lista com marcadores descreve responsabilidades e conquistas nessa função."></p> +<p>Eu vou listar vários cargos que já tive. Por isso uso o nome do cargo como título (nível 3, porque ele fica abaixo do título de nível 2 <em>Experience</em>). Em seguida, quero mostrar o empregador e o período. Escolhi um único parágrafo para juntar as duas coisas. Uso uma quebra de linha manual para jogar o período para a segunda linha.</p> +<p>Outro jeito é colocar o nome do empregador no título, depois do cargo. Eu não acho que um jeito seja mais “certo” que o outro. Eu só prefiro reduzir a quantidade de texto grande na página.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente <em>realmente</em> quisesse controlar o visual, adicionaria um CSS personalizado. Não vamos fazer isso agora. Veja os capítulos bônus no fim do livro para saber mais sobre CSS.</p> +</aside> +<p>A gente envolve a data numa tag <code><time></code> e coloca a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">data no formato que o computador entende</a> no <em>atributo</em> <code>datetime</code>. Eu uso uma <em>entidade</em> HTML, <code>&ndash;</code>, para colocar um traço entre a data de início e a de fim. Isso usa o caractere <em>en dash</em> (um traço um pouco mais longo que o hífen comum, <code>-</code>). Na <a href="https://practicaltypography.com/hyphens-and-dashes.html">tipografia, ele serve para intervalos numéricos</a>.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Dê uma olhada nesta <a href="https://perma.cc/BEA6-LF46">lista de entidades HTML</a>. É um guia de caracteres especiais que você pode usar no HTML.</p> +</aside> +<p>Por fim, eu uso uma <em>lista sem ordem</em> para os tópicos sobre o cargo e as responsabilidades.</p> +<p>Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode <a href="https://demo.htmlforpeople.com/resume">ver o currículo de demonstração</a> e <a href="https://perma.cc/3WP3-R9XL">olhar o código-fonte</a>.</p> +<h2 id="projetos-selecionados" tabindex="-1"><a class="header-anchor" href="#projetos-selecionados">Projetos selecionados</a></h2> +<p>Na próxima seção, eu quero destacar alguns projetos em que trabalhei. É a versão currículo de um portfólio: um lugar para mostrar sites que eu fiz e, quando der, linkar para eles. Currículos impressos costumam ser só texto. Mas isto é uma página da web. Você pode colocar uma imagem ou duas nesta seção.</p> +<p>Nesses projetos, vou usar a tag <code><h3></code> para o título do projeto e um parágrafo de descrição junto. Se o projeto está no ar, eu coloco o link. Aqui vai um exemplo.</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>Selected projects<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>h3</span><span class="token punctuation">></span></span>Mississippi Gulf Coast Community College<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> + I worked on this website in my role as designer and developer at Mad Genius. I built out several of the dynamic, data-intensive sections like the searchable course catalog and the comprrehensive "A to Z" index. These sections made heavy use of reactive UI, third-party API integrations, and custom WordPress plugin development. + <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>p</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>https://mgccc.edu/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mgccc.edu<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>p</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- ...the rest of the projects go here --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre> +<h2 id="formacao" tabindex="-1"><a class="header-anchor" href="#formacao">Formação</a></h2> +<p>Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com <code><strong></code> para ênfase e <code><br></code> para quebras de linha manuais.</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>Education<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> + + <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>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, Information Systems, + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre> +<h2 id="exemplo-completo" tabindex="-1"><a class="header-anchor" href="#exemplo-completo">Exemplo completo</a></h2> +<p>Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal.</p> +<pre class="language-html"><code class="language-html"><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 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>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>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>Blake Watson<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>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> +<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>Skills<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>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / a11y<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Experience<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>h3</span><span class="token punctuation">></span></span>Frontend Engineer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span>Present + <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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a document management system for Collins Aerospace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Web Developer/Interactive Designer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Mad Genius<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 2015<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</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> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketching, prototyping, and UI design<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>WordPress theme and plugin development<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Reactive UI with Vue and Knockout<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Third-party API integrations<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Web Developer<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Self employed<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2015<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</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> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Communicated with clients<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Developed usable, standards-based websites<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Made responsive websites<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Volunteered on many non-profit projects<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Education<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> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> + + <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>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, Information Systems, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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> + <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></code></pre> +<p>Você pode ver o resultado no <a href="https://demo.htmlforpeople.com/resume">site de demonstração</a>. Mas aqui vai uma captura da página inteira.</p> +<p><img src="/assets/img/adding-a-resume-4.webp" alt="Captura de tela da página “Resume” completa. O título “Blake Watson” e o subtítulo “Experienced Frontend Engineer” aparecem em destaque. Abaixo, a seção “Skills” lista habilidades técnicas em duas colunas. A seção “Experience” detalha o histórico de trabalho: Frontend Engineer na MRI Technologies, Web Developer/Interactive Designer na Mad Genius e Web Developer (autônomo). A seção “Education” lista diplomas em administração pela Mississippi State University."></p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>A gente tem criado <em>muito</em> conteúdo. No próximo capítulo, vamos fazer um intervalo e ver como rodar um servidor web no computador. Ele deixa o teste do site mais parecido com um site de verdade, no ar.</p> + + + <h1 id="intervalo-instalar-um-servidor-local" tabindex="-1"><a class="header-anchor" href="#intervalo-instalar-um-servidor-local">Intervalo: instalar um servidor local</a></h1> +<p>HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar.</p> +<p>Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos.</p> +<p>O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade.</p> +<p>Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um <em>servidor web local</em> é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet.</p> +<p>Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs.</p> +<h2 id="urls-relativas-e-urls-absolutas" tabindex="-1"><a class="header-anchor" href="#urls-relativas-e-urls-absolutas">URLs relativas e URLs absolutas</a></h2> +<p>Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe <code>..</code> para “subir” um nível e achar a página de destino.</p> +<p>Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o <em>nível mais alto</em> é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim.</p> +<pre class="language-html"><code class="language-html"><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>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to the homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>A barra representa o nível mais alto (eu também poderia ter escrito <code>/index.html</code>, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página <code>about.html</code>, faria assim.</p> +<pre class="language-html"><code class="language-html"><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>Go to the About page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta.</p> +<pre class="language-html"><code class="language-html"><span class="token comment"><!-- imagine we are currently on a blog page /blog/my-post.html--></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My blog post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- instead of this, which *does* work --></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 comment"><!-- we can do this --></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></code></pre> +<p>A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do <em>computador inteiro</em>. Com certeza não era isso que a gente queria.</p> +<p>Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas.</p> +<h2 id="opcoes-de-servidor-web" tabindex="-1"><a class="header-anchor" href="#opcoes-de-servidor-web">Opções de servidor web</a></h2> +<p>Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você.</p> +<ul> +<li><a href="#visual-studio-code-multiplataforma">Visual Studio Code (multiplataforma)</a></li> +<li><a href="#macos">macOS</a></li> +<li><a href="#windows-e-multiplataforma">Windows e multiplataforma</a></li> +<li><a href="#python-e-php-multiplataforma">Python e PHP (multiplataforma)</a></li> +</ul> +<h2 id="visual-studio-code-multiplataforma" tabindex="-1"><a class="header-anchor" href="#visual-studio-code-multiplataforma">Visual Studio Code (multiplataforma)</a></h2> +<p>A Microsoft publica uma extensão do VS Code chamada <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server">Live Preview</a>. Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-1.webp" alt="Captura de tela da loja de extensões do Visual Studio Code na página da extensão “Live Preview”. A extensão é da Microsoft e mostra descrição, avaliações, instruções de uso e o botão de instalação."></p> +<p>Depois de instalar, você vai notar a opção <em>Show Preview</em> quando clicar com o botão direito num arquivo.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-2.webp" alt="Uma janela do VS Code mostra código HTML. O arquivo “index.html” está selecionado na barra lateral esquerda. Um menu de contexto sobre o index.html está aberto, com a opção “Show Preview” destacada."></p> +<p>Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em <em>Open in Browser</em> no menu da barra de endereço.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-3.webp" alt="Captura de tela de uma janela do VS Code. À esquerda, o código HTML de uma página pessoal. À direita, a prévia da página mostra “Blake's Homepage”, com botões de navegação e uma imagem de um céu estrelado. A URL aparece destacada numa barra de navegação."></p> +<h2 id="macos" tabindex="-1"><a class="header-anchor" href="#macos">macOS</a></h2> +<p>Eu uso Mac, então posso recomendar de coração o ótimo aplicativo <a href="https://iconfactory.com/worldwideweb/">WorldWideWeb</a>. É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças.</p> +<p>O funcionamento é assim: você aponta a pasta do site e clica no botão de play.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-4.webp" alt="Captura de tela da janela do app “WorldWideWeb”, com duas seções principais: “Website Folder” e “Web Server”. Em “Website Folder” há um ícone de pasta com o nome “my-site”. Em “Web Server” há um botão de play com o texto “Server is stopped”. Setas vermelhas apontam para cada ícone."></p> +<p>Quando você clica no play, o site fica disponível em algum endereço. Clique em <em>Open Browser</em> para abrir essa URL no navegador padrão.</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>E agora olha só: a gente está vendo o site no nosso endereço novinho em folha.</p> +<p><img src="/assets/img/intermission-installing-a-local-web-server-6.webp" alt="Uma janela do navegador com o título “Blake's Homepage” e links de navegação para Home, Blog, About e Resume. A área principal tem uma imagem de um céu estrelado com nebulosas coloridas. Uma seta vermelha aponta para a barra de endereço no topo da tela."></p> +<h2 id="windows-e-multiplataforma" tabindex="-1"><a class="header-anchor" href="#windows-e-multiplataforma">Windows e multiplataforma</a></h2> +<p>Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft.</p> +<p>Caso contrário, experimente o <a href="https://simplewebserver.org/">Simple Web Server</a>. Depois de instalar, clique no botão para criar um servidor novo.</p> +<img src="/assets/img/intermission-installing-a-local-web-server-7.webp" alt="Captura de tela do aplicativo Simple Web Server. No centro aparece a mensagem “You haven't created any servers yet”, com um ícone de servidor acima. No canto inferior direito, um botão amarelo com o texto “New Server”, destacado por uma seta vermelha." style="max-height: 600px; margin-inline: auto"> +<p>Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa.</p> +<img src="/assets/img/intermission-installing-a-local-web-server-8.webp" alt="A janela “Add Server” do aplicativo Simple Web Server. Há campos para “Folder path” e “Port”, além das opções Basic Options, Advanced Options e Error Pages. Na parte de baixo ficam os botões “Cancel” e “Create Server”." style="max-height: 600px; margin-inline: auto"> +<p>Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão.</p> +<img src="/assets/img/intermission-installing-a-local-web-server-9.webp" alt="Uma janela do Simple Web Server chamada “Edit Server” mostra as opções de um servidor web em execução. A URL destacada é “http://127.0.0.1:8080” e parece clicável. Há campos para o caminho da pasta, a porta (8080) e uma caixa para acesso na rede local. Embaixo ficam os botões de cancelar e salvar." style="max-height: 600px; margin-inline: auto"> +<aside class="aside"><p class="aside-label">Observação</p><p>O Simple Web Server é multiplataforma e também funciona no macOS e no Linux. Dito isso, eu recomendo o WorldWideWeb para quem usa Mac, a menos que você precise de vários servidores rodando ao mesmo tempo.</p> +</aside> +<h2 id="python-e-php-multiplataforma" tabindex="-1"><a class="header-anchor" href="#python-e-php-multiplataforma">Python e PHP (multiplataforma)</a></h2> +<p>Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal.</p> +<h3 id="python" tabindex="-1"><a class="header-anchor" href="#python">Python</a></h3> +<p>Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à <a href="https://www.python.org/downloads/">página de downloads do Python</a> e baixe o instalador do seu sistema (pegue a versão 3).</p> +<p>Abra uma janela do terminal e use <code>cd</code> para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python.</p> +<pre class="language-bash"><code class="language-bash">python3 <span class="token parameter variable">-m</span> http.server</code></pre> +<p>Isso deixa o site disponível em <code>localhost</code>, na porta que ele indicar (em geral 8000). Então o endereço do site fica <code>http://localhost:8000</code>.</p> +<h3 id="php" tabindex="-1"><a class="header-anchor" href="#php">PHP</a></h3> +<p>Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, <a href="/html-reutilizavel-com-php">o PHP é útil para reutilizar pedaços de HTML</a> (tipo o menu de navegação) em várias páginas.</p> +<p>Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python.</p> +<pre class="language-bash"><code class="language-bash">php <span class="token parameter variable">-S</span> localhost:8000</code></pre> +<p>Isso deixa o site disponível em <code>http://localhost:8000</code>.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!</p> + + + <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> + + + <h1 id="conquista-desbloqueada-hipertextista" tabindex="-1"><a class="header-anchor" href="#conquista-desbloqueada-hipertextista">Conquista desbloqueada: Hipertextista</a></h1> +<p>Parabéns — você fez um site de verdade usando HTML! O que começou como uma frase ou duas no Bloco de Notas virou um site completo, com várias páginas. Você aprendeu um monte de coisa:</p> +<ul> +<li>Criar páginas HTML</li> +<li>Estruturar conteúdo com títulos e seções</li> +<li>Ligar uma página à outra</li> +<li>Formatar texto</li> +<li>Citar texto com citações em bloco</li> +<li>Mostrar dados com tabelas</li> +<li>Esconder conteúdo atrás de um resumo clicável</li> +<li>Criar conteúdo secundário com asides</li> +<li>Incorporar imagens</li> +<li>Incorporar vídeo</li> +<li>Usar web components de terceiros</li> +<li>Colocar um site na internet</li> +<li>…e ainda mais!</li> +</ul> +<p>Espero que você se sinta capaz de criar seus próprios sites. Mas, mesmo que você não vá fazer sites do zero, conhecer HTML ajuda. Muitos sistemas de gerenciamento de conteúdo deixam você colocar HTML personalizado numa página. Só saber usar a tag <code><a></code> para criar um link já é um superpoderzinho.</p> +<p>Então, para onde agora?</p> +<h2 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h2> +<p>Terminamos o conteúdo principal que eu queria cobrir em <a href="/"><em>HTML e Pessoas</em></a>. Dito isso, tenho alguns assuntos que quero aprofundar como um apêndice do livro.</p> +<ul> +<li><strong><a href="/personalizar-o-simple-css">Personalizar o Simple.css</a></strong>. Mesmo sem aprender muito CSS, você pode mudar a aparência do seu site Simple sobrescrevendo algumas variáveis.</li> +<li><strong><a href="/basico-de-css">Básico de CSS</a></strong>. Esta missão extra ensina a fazer uma página bem desenhada do zero, usando CSS.</li> +<li><strong><a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a></strong>. Vamos ver como reutilizar pedaços de HTML — como um menu de navegação — usando includes do PHP. É uma introdução bem leve a sites dinâmicos.</li> +</ul> +<h2 id="recursos-deste-livro" tabindex="-1"><a class="header-anchor" href="#recursos-deste-livro">Recursos deste livro</a></h2> +<p>Eu fui espalhando uns links pelo caminho, apontando para demos e documentação. Para facilitar, aqui está uma lista dos principais.</p> +<ul> +<li><strong><a href="https://demo.htmlforpeople.com/">Demo da Homepage do Blake</a></strong>. Esta é a minha versão do site que este livro ensina você a fazer. Se você acompanhou e fez o seu próprio site, <a href="https://blakewatson.com/about/#contact-me">eu adoraria saber</a>.</li> +<li><strong><a href="https://github.com/blakewatson/htmlforpeopledemo">Código-fonte da Homepage do Blake</a></strong>. Este é o repositório de código do site de demonstração. Aqui você pode navegar por todo o código e baixá-lo, se quiser.</li> +<li><strong><a href="https://github.com/blakewatson/htmlforpeopledemo/tree/php">Homepage do Blake, versão PHP</a></strong>. Esta é outra versão do código-fonte, em que eu converti o site para PHP, como descrito no capítulo bônus <a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a>.</li> +<li><strong><a href="https://planets.htmlforpeople.com/">Demo Planets of the Solar System</a></strong>. Esta é a demo da página que vamos construir no capítulo bônus <a href="/basico-de-css">Básico de CSS</a>.</li> +<li><strong><a href="https://github.com/blakewatson/css-basics">Código-fonte de Planets of the Solar System</a></strong>. Este é o repositório de código dessa página.</li> +</ul> +<h2 id="recursos-e-documentacao-uteis" tabindex="-1"><a class="header-anchor" href="#recursos-e-documentacao-uteis">Recursos e documentação úteis</a></h2> +<ul> +<li><strong><a href="https://developer.mozilla.org">MDN</a></strong>. Se você precisa de detalhes sobre uma tag HTML específica, uma propriedade CSS ou outra informação técnica pontual, este é o melhor lugar. O MDN é mais ou menos o manual oficial de quem faz sites.</li> +<li><strong><a href="https://neocities.org/">Neocities</a></strong> e <a href="https://neocities.org/contact">perguntas frequentes do Neocities</a>. Eu escolhi este serviço de hospedagem no livro porque é grátis e tem um espírito parecido (criação de sites pensada em pessoas). As perguntas frequentes têm muita informação boa e uma visão do serviço, se você quiser saber mais.</li> +<li><strong><a href="https://neocities.org/tutorials">Tutoriais do Neocities</a>:</strong> Uma lista de tutoriais e recursos publicados pelo Neocities. Dê uma olhada no <a href="https://neocities.org/tutorial/html/1">curso de HTML</a> excelente deles.</li> +<li><strong><a href="https://simplecss.org/">Simple.css</a></strong>. Este é o framework CSS que usamos ao longo do livro. O site tem documentação de como usar o Simple.css e uma demo de vários elementos HTML.</li> +<li><strong><a href="https://practicaltypography.com/">Butterick’s Practical Typography</a></strong>. Um livro excelente sobre tipografia e design. Se você tem pouco tempo, veja <a href="https://practicaltypography.com/typography-in-ten-minutes.html">Typography in ten minutes</a>.</li> +<li><strong><a href="https://entitycode.com/">EntityCode</a></strong>. Aqui vai uma referência de <em>entidades HTML</em> que você pode usar para reproduzir caracteres especiais e símbolos.</li> +<li><strong><a href="https://coolors.co/contrast-checker">Verificador de contraste do Coolors</a></strong>. Uma ferramenta boa para garantir que as cores do texto e do fundo tenham contraste suficiente para a leitura.</li> +</ul> +<h2 id="hospedagens-para-sites-estaticos" tabindex="-1"><a class="header-anchor" href="#hospedagens-para-sites-estaticos">Hospedagens para sites estáticos</a></h2> +<p>Além do Neocities, existem outras boas opções para hospedar seus sites HTML.</p> +<ul> +<li><strong><a href="https://yay.boo/">Yay.boo</a>:</strong> Nome bobo, publicação de site realmente fácil. Você arrasta e solta uma pasta, escolhe um nome, e o site está no ar. O plano grátis coloca um link yay.boo no cantinho do site.</li> +<li><s><strong><a href="https://glitch.com/">Glitch</a>:</strong> Esta é uma boa opção se você quiser programar tudo direto no navegador. Monta, depois publica.</s> O <a href="https://perma.cc/C5KE-CMZV">Glitch encerrou a hospedagem de apps</a> em 2025.</li> +<li><strong><a href="https://codepen.io/">CodePen</a>:</strong> O CodePen é a alternativa ao Glitch mais amigável para iniciantes que eu conheço. A diferença é que um Pen é uma página só, e não vários arquivos que formam um site inteiro. Se você optar pelo CodePen Pro, porém, pode acessar Projects, que deixam você montar um site com várias páginas no navegador.</li> +<li><strong><a href="https://www.netlify.com/">Netlify</a>:</strong> Mais sofisticado, mas tem um recurso de <a href="https://perma.cc/W3PH-5KRS">arrastar e soltar uma pasta para publicar</a> e oferece mais funções voltadas para quem desenvolve.</li> +</ul> +<h2 id="alternativas-de-editor-de-codigo" tabindex="-1"><a class="header-anchor" href="#alternativas-de-editor-de-codigo">Alternativas de editor de código</a></h2> +<p>Eu usei o <a href="https://code.visualstudio.com/">Visual Studio Code</a> como editor de código ao longo deste livro. E por um bom motivo — é grátis e enormemente popular. Mas não é o único editor por aí.</p> +<p>Eu uso um Mac, então não conheço tanto os editores de outros sistemas. Mas sei de alguns que você deveria conhecer e avaliar. Alguns são grátis, alguns são pagos, e alguns são as duas coisas.</p> +<ul> +<li><strong><a href="https://www.sublimetext.com/">Sublime Text</a>:</strong> Multiplataforma, com teste grátis ilimitado (de vez em quando ele cobra para você pagar). O Sublime Text foi o padrão no desenvolvimento web até o VS Code assumir o trono. Ainda é muito bom. Super rápido e leve. O sistema de plugins/extensões é mais difícil de usar, mas você pode não precisar de nenhum se for fazer HTML/CSS básico, porque o suporte a isso já vem pronto.</li> +<li><strong><a href="https://www.jetbrains.com/webstorm/">WebStorm</a>:</strong> Um dos vários <em>IDEs</em> (ambientes de desenvolvimento integrado) pagos (grátis para uso não comercial) da JetBrains. É multiplataforma e tem um monte de recursos. É caro, mas tem 30 dias de teste grátis. As pessoas adoram. Eu não usei muito, então não tenho muito o que dizer, além de que a reputação é sólida.</li> +<li><strong><a href="https://zed.dev/">Zed</a>:</strong> Multiplataforma (Mac e Linux, com Windows “em breve”) e grátis. Este parece uma mistura de VS Code e Sublime Text, e tem bastante hype no momento em que eu escrevo isto.</li> +<li><strong><a href="https://nova.app/">Nova</a>:</strong> Só para Mac e pago (mas com teste grátis). É a sequência do Coda, um editor de web amado no Mac, do mesmo desenvolvedor (Panic). Os apps da Panic são sempre ótimos, então dê uma olhada no Nova se você usa Mac.</li> +<li><strong><a href="https://notepad-plus-plus.org/">NotePad++</a>:</strong> Editor grátis e de código aberto para Windows. Não tenho muito o que dizer, além de que ele existe há muito tempo.</li> +<li><strong><a href="https://www.barebones.com/products/bbedit/">BBEdit</a>:</strong> Um dos apps mais antigos do Mac que ainda é desenvolvido de fato. O BBEdit é pago, mas tem teste grátis e um modo grátis para sempre, que limita você a um conjunto específico de recursos.</li> +<li><strong><a href="https://glitch.com/">Glitch</a>:</strong> Sim, é o mesmo listado acima em hospedagens. O Glitch é uma boa opção se você quiser trabalhar “na nuvem”. Ele oferece uma interface na web para fazer sites, incluindo criar arquivos e editar código. Tudo fica no navegador, o que é uma boa opção se você não quiser baixar e instalar coisas no computador.</li> +<li>Muitos, muitos outros. São demais para listar. Mas, se nenhum destes te agradar, busque no seu mecanismo de busca favorito e se prepare para a enxurrada de resultados.</li> +</ul> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> + + + <h1 id="personalizar-o-simplecss" tabindex="-1"><a class="header-anchor" href="#personalizar-o-simplecss">Personalizar o Simple.css</a></h1> +<p>O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado <em>propriedades personalizadas</em> (muitas vezes chamadas de <em>variáveis</em>). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.</p> +<h2 id="uma-espiada-no-simplecss" tabindex="-1"><a class="header-anchor" href="#uma-espiada-no-simplecss">Uma espiada no Simple.css</a></h2> +<p>Vamos abrir o arquivo <code>simple.css</code> que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte.</p> +<pre class="language-css"><code class="language-css"><span class="token comment">/* Global variables. */</span> +<span class="token selector">:root, +::backdrop</span> <span class="token punctuation">{</span> + <span class="token comment">/* Set sans-serif & mono fonts */</span> + <span class="token property">--sans-font</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">'Avenir Next'</span><span class="token punctuation">,</span> Avenir<span class="token punctuation">,</span> + <span class="token string">'Nimbus Sans L'</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">'Noto Sans'</span><span class="token punctuation">,</span> <span class="token string">'Segoe UI'</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> + <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">--mono-font</span><span class="token punctuation">:</span> Consolas<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> <span class="token string">'Andale Mono'</span><span class="token punctuation">,</span> <span class="token string">'Ubuntu Mono'</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span> + <span class="token property">--standard-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + + <span class="token comment">/* Default (light) theme */</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> #f5f7ff<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span> + <span class="token property">--text-light</span><span class="token punctuation">:</span> #585858<span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> #898ea4<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> #0d47a1<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> #1266e2<span class="token punctuation">;</span> + <span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--code</span><span class="token punctuation">:</span> #d81b60<span class="token punctuation">;</span> + <span class="token property">--preformatted</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> #ffdd33<span class="token punctuation">;</span> + <span class="token property">--disabled</span><span class="token punctuation">:</span> #efefef<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.</p> +<p>No CSS, o navegador ignora o texto entre <code>/*</code> e <code>*/</code>. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de <em>comentários</em>. Neste caso, os comentários ajudam a separar o código em grupos relacionados.</p> +<p>O trecho que diz <code>:root</code> significa que o bloco de código a seguir — a parte entre as chaves, <code>{}</code> — vale para a página inteira. Ignore o <code>::backdrop</code> por enquanto.</p> +<p>Dentro das chaves, encontramos uma lista de <em>propriedades</em>. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos <code>columns: 2</code> na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, <code>columns</code> é uma <em>propriedade</em> e <code>2</code> é um <em>valor</em>.</p> +<p>Qualquer propriedade que começa com <code>--</code> é uma <em>propriedade personalizada</em>, ou <em>variável</em>. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável <code>--accent: blue</code>, poderíamos usar a cor <code>--accent</code> em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos <code>red</code>, poderíamos atualizar num lugar só — escrevendo <code>--accent: red</code> — e todo elemento que usa a variável <code>--accent</code> seria atualizado sozinho.</p> +<p>Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”.</p> +<p>Vamos falar de fontes depois. Primeiro, as cores.</p> +<p>Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos.</p> +<p>Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do <code>simple.css</code>? Você <em>poderia</em> fazer isso; funcionaria. Mas existe um jeito melhor.</p> +<h2 id="criar-uma-folha-de-estilo-personalizada" tabindex="-1"><a class="header-anchor" href="#criar-uma-folha-de-estilo-personalizada">Criar uma folha de estilo personalizada</a></h2> +<p>CSS significa <em>Cascading Style Sheets</em> (folhas de estilo em cascata). Essa parte da <em>cascata</em> é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe <em>depois</em> do <code>simple.css</code>, as regras que escrevermos ali vão prevalecer. Então não estamos <em>mudando</em> o <code>simple.css</code>. Estamos <em>sobrescrevendo</em> ele.</p> +<p>Crie um arquivo na pasta <code>assets/css</code> chamado <code>custom.css</code>.</p> +<p>Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo <code>index.html</code> do nível mais alto. Na seção <code><head></code>, já estamos referenciando o <code>simple.css</code> com uma tag <code><link></code>. Vamos fazer o mesmo para o nosso novo arquivo <code>custom.css</code>, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele.</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>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/custom.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>head</span><span class="token punctuation">></span></span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Isto vai funcionar na página inicial, mas, nas outras páginas, lembre-se de atualizar o caminho do arquivo de acordo (vai ser o mesmo caminho do arquivo <code>simple.css</code>).</p> +</aside> +<p>Agora vamos adicionar algumas sobrescritas. No arquivo <code>custom.css</code>, primeiro vamos montar um bloco <code>:root</code> parecido com o do <code>simple.css</code>. Depois pegamos uma das variáveis, digamos <code>--bg</code> (a cor de <em>fundo</em>), e definimos como <code>red</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Não há nada de mágico no nome da variável, <code>--bg</code>. Quem criou o Simple.css decidiu chamar assim, então é isso que vamos precisar usar para sobrescrever.</p> +</aside> +<p>Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma <a href="https://www.google.com/search?q=color+picker">ferramenta de escolha de cores</a> na web, usar uma das muitas <a href="https://perma.cc/JF5G-REYD">cores nomeadas do CSS</a> ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.</p> +<p><img src="/assets/img/customizing-simple-css-1.webp" alt="Numa janela do Visual Studio Code, um arquivo CSS chamado "custom.css" está aberto. O editor mostra uma ferramenta de seletor de cores ao lado do código que define a cor de fundo com a propriedade . O seletor exibe vários tons de vermelho, junto com os valores RGB, para facilitar a escolha e o ajuste."></p> +<p>Mas, antes de escolher cores, vamos falar do modo escuro.</p> +<h2 id="modo-escuro" tabindex="-1"><a class="header-anchor" href="#modo-escuro">Modo escuro</a></h2> +<p>O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo <code>simple.css</code>, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.</p> +<pre class="language-css"><code class="language-css"><span class="token comment">/* Dark theme */</span> +<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> + <span class="token selector">:root, + ::backdrop</span> <span class="token punctuation">{</span> + <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> #2b2b2b<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> #dcdcdc<span class="token punctuation">;</span> + <span class="token property">--text-light</span><span class="token punctuation">:</span> #ababab<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> #ffb300<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> #ffe099<span class="token punctuation">;</span> + <span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--code</span><span class="token punctuation">:</span> #f06292<span class="token punctuation">;</span> + <span class="token property">--preformatted</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span> + <span class="token property">--disabled</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token comment">/* Add a bit of transparency so light media isn't so glaring in dark mode */</span> + <span class="token selector">img, + video</span> <span class="token punctuation">{</span> + <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span></code></pre> +<p>Este bloco usa um recurso do CSS chamado <em>media queries</em>. Neste caso, a regra <code>@media</code> diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.</p> +<p>A primeira regra define o esquema de cores padrão como escuro e depois <em>redefine</em> as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”.</p> +<p>Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do <code>simple.css</code> para o seu <code>custom.css</code> e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa.</p> +<h2 id="um-exemplo-de-personalizacao" tabindex="-1"><a class="header-anchor" href="#um-exemplo-de-personalizacao">Um exemplo de personalização</a></h2> +<p>Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana.</p> +<p>Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato <code>rgb</code> aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.</p> +<p>Este é o código que eu coloquei no meu <code>custom.css</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">/* Dark theme */</span> +<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> + <span class="token selector">:root, + ::backdrop</span> <span class="token punctuation">{</span> + <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>17<span class="token punctuation">,</span> 18<span class="token punctuation">,</span> 18<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>80<span class="token punctuation">,</span> 90<span class="token punctuation">,</span> 90<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>35<span class="token punctuation">,</span> 35<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> ghostwhite<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> lightskyblue<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span></code></pre> +<p>Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.</p> +<p><img src="/assets/img/customizing-simple-css-2.webp" alt="Uma imagem em tela dividida mostra duas versões de uma página de blog: à esquerda, a página usa um tema claro personalizado, com rosas vibrantes e verdes pálidos. À direita, usa um tema escuro personalizado, com azul como cor de destaque para links e botões. As duas versões apresentam o mesmo conteúdo da listagem do blog. O uso de cores personalizadas aqui marca uma saída dos temas claro e escuro padrão usados antes."></p> +<h2 id="escolher-cores-acessiveis" tabindex="-1"><a class="header-anchor" href="#escolher-cores-acessiveis">Escolher cores acessíveis</a></h2> +<p>Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo.</p> +<p>Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um <a href="https://perma.cc/KGB2-G7Y4">verificador de contraste como este</a>. Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.</p> +<h2 id="mudar-a-fonte" tabindex="-1"><a class="header-anchor" href="#mudar-a-fonte">Mudar a fonte</a></h2> +<p>Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no <code>simple.css</code>. Uma delas, <code>--sans-font</code>, é responsável pela maior parte do texto da página (a outra, <code>--mono-font</code>, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).</p> +<p>Se você não conhece, fontes <em>sans-serif</em> são aquelas que não têm <em>serifa</em>, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável <code>--sans-font</code> para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.</p> +<p>Primeiro, vamos falar de fontes na web.</p> +<h2 id="fontes-na-web" tabindex="-1"><a class="header-anchor" href="#fontes-na-web">Fontes na web</a></h2> +<p>Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, <em>você</em> vai ver essa fonte na página. Mas quem visita vai ver uma <em>alternativa</em> (<em>fallback</em>), a menos que essa pessoa também tenha a fonte instalada.</p> +<p>É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> + <span class="token comment">/* the first font needs quotes because the name includes spaces */</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Some Rando Font"</span><span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>A regra de estilo acima define a fonte do <code><body></code>. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se <em>essa</em> também não estiver, dissemos ao navegador para usar a fonte <code>serif</code> padrão que ele tiver.</p> +<p>Aqui vai uma boa referência para encontrar <a href="https://practicaltypography.com/system-fonts.html">fontes comuns nos aparelhos das pessoas</a> e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.</p> +<p>Às vezes, você tem uma fonte que <em>realmente</em> quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se <em>fontes da web</em> (<em>web fonts</em>). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, <a href="/basico-de-css">Básico de CSS</a>. Em resumo, é um método de fornecer a fonte automaticamente a quem visita.</p> +<h2 id="sobrescrever-a-variavel-da-fonte" tabindex="-1"><a class="header-anchor" href="#sobrescrever-a-variavel-da-fonte">Sobrescrever a variável da fonte</a></h2> +<p>Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de <code>--sans-font</code>, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.</p> +<p>Podemos sobrescrever a variável <code>--sans-font</code> do Simple dentro do bloco <code>:root</code>, para que valha para a página inteira.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--sans-font</span><span class="token punctuation">:</span> Georgia<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span> + <span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span> + <span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span> + <span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span> + <span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span> + <span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços.</p> +<p>Usamos uma palavra-chave do CSS, <code>serif</code>, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são <code>sans-serif</code>, <code>monospace</code> e <code>cursive</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax">entre outras</a></p> +<p>Aqui vai um dos posts do blog composto em Georgia.</p> +<p><img src="/assets/img/customizing-simple-css-3.webp" alt="Captura de tela de um post de blog intitulado "Why donuts are the best thing ever", datado de 20 de abril de 2024. Ele usa o tema claro personalizado de antes. O texto está numa fonte serifada, e não na sans-serif padrão."></p> +<h2 id="deixe-com-a-sua-cara" tabindex="-1"><a class="header-anchor" href="#deixe-com-a-sua-cara">Deixe com a sua cara</a></h2> +<p>Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas.</p> +<p>Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> + + + <h1 id="basico-de-css" tabindex="-1"><a class="header-anchor" href="#basico-de-css">Básico de CSS</a></h1> +<p>Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita.</p> +<p>Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui.</p> +<h2 id="apresentando-os-planetas-do-sistema-solar" tabindex="-1"><a class="header-anchor" href="#apresentando-os-planetas-do-sistema-solar">Apresentando os planetas do sistema solar</a></h2> +<p>Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar.</p> +<p>Você pode ver o código-fonte no navegador, com o <a href="https://perma.cc/3WP3-R9XL">comando de ver o código-fonte</a>, ou conferindo o <a href="https://github.com/blakewatson/css-basics">código no GitHub</a>. E você pode <a href="https://planets.htmlforpeople.com/">ver o resultado final aqui</a>, se quiser uma espiada do que vai ficar.</p> +<p>Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei).</p> +<h2 id="ponto-de-partida" tabindex="-1"><a class="header-anchor" href="#ponto-de-partida">Ponto de partida</a></h2> +<p>Eu fiz um <code>index.html</code> e coloquei o código a seguir. Ele assume que você tem um <code>styles.css</code> no mesmo diretório. Também assume que você tem uma imagem, <code>PIA06193~large.jpg</code>, no mesmo diretório. Você pode pegar esta imagem no <a href="https://perma.cc/76GH-PWHQ">site da NASA</a>.</p> +<details> + <summary>Abra para ver o código HTML completo</summary> +<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 attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>Planets of the Solar System<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>styles.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>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>main</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>Planets of the Solar System<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>intro<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>caps<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Our solar system<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> is a vast and fascinating place, consisting of the Sun and the various celestial bodies that orbit it, including eight major planets. Each planet offers unique characteristics and features. In this article, we will explore the distinctive attributes of each planet, providing an overview of what makes them unique (and learn a little <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).<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>h2</span><span class="token punctuation">></span></span>Mercury<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> + Mercury is the closest planet to the Sun and the smallest planet in our + solar system. It has a very thin atmosphere and its surface is covered + with craters. + <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>h2</span><span class="token punctuation">></span></span>Venus<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> + Venus is the second planet from the Sun and is known for its thick, + toxic atmosphere and extreme surface temperatures. It's often called + Earth's "sister planet" because of their similar size and composition. + <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>h2</span><span class="token punctuation">></span></span>Earth<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> + Earth is the third planet from the Sun and the only known planet to + support life. It has a diverse climate and surface, with large bodies of + water, mountains, and forests. + <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>blockquote</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> + The Earth is a very small stage in a vast cosmic arena. Think of the + rivers of blood spilled by all those generals and emperors so that in + glory and triumph they could become the momentary masters of a + fraction of a dot. + <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>cite</span><span class="token punctuation">></span></span>— Carl Sagan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</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>Mars<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> + Mars, the fourth planet from the Sun, is often called the "Red Planet" + due to its reddish appearance. It has the largest volcano and canyon in + the solar system. + <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>h2</span><span class="token punctuation">></span></span>Jupiter<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> + Jupiter is the fifth planet from the Sun and the largest in the solar + system. It has a Great Red Spot, which is a giant storm, and dozens of + moons. + <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>h2</span><span class="token punctuation">></span></span>Saturn<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> + Saturn, the sixth planet from the Sun, is famous for its extensive ring + system. It's the second-largest planet in the solar system. + <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>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>PIA06193~large.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This grand mosaic consists of 126 images acquired in a tile-like fashion, covering one end of Saturn's rings to the other and the entire planet in between.<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>figcaption</span><span class="token punctuation">></span></span> + Source: <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>https://images.nasa.gov/details/PIA11141<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>https://images.nasa.gov/details/PIA11141<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>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</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>Uranus<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> + Uranus is the seventh planet from the Sun and has a unique blue-green + color due to methane in its atmosphere. It rotates on its side, making + it unique among the planets. + <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>h2</span><span class="token punctuation">></span></span>Neptune<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> + Neptune is the eighth and farthest known planet from the Sun in our + solar system. It's known for its deep blue color and strong winds, some + of the fastest in the solar system. + <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>h2</span><span class="token punctuation">></span></span>Additional Resources<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> + For more information about the planets, visit the + <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>https://solarsystem.nasa.gov/planets/overview/<span class="token punctuation">"</span></span> + <span class="token punctuation">></span></span>NASA Solar System Exploration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span> + <span class="token punctuation">></span></span> + website. + <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>h2</span><span class="token punctuation">></span></span>Other Major Bodies<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>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pluto<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ceres<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Haumea<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Makemake<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Eris<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ganymede<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Titan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Europa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>Sample Code<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>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>function getPlanetInfo(planet) { + const planets = { + Mercury: 'The smallest planet and closest to the Sun.', + Venus: 'Known for its thick, toxic atmosphere.', + Earth: 'The only planet known to support life.', + Mars: 'The Red Planet with the largest volcano.', + Jupiter: 'The largest planet with a Great Red Spot.', + Saturn: 'Famous for its ring system.', + Uranus: 'Unique for its sideways rotation.', + Neptune: 'Known for its deep blue color and strong winds.' + }; + return planets[planet] || 'Planet not found'; + +}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</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> + A demo website for learning CSS. Part of <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>https://htmlforpeople.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML for People<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> by <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>https://blakewatson.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Check out the <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>https://github.com/blakewatson/css-basics<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>source code on GitHub<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>p</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> +</details> +<p>Como o arquivo <code>styles.css</code> está vazio, só temos os estilos padrão do navegador. É assim que fica:</p> +<p><img src="/assets/img/css-basics-01.webp" alt="Captura de tela do navegador renderizando a página "Planets of the Solar System". Cada planeta tem uma descrição breve, destacando características únicas. A página usa só os estilos padrão do navegador e está completamente sem estilo."></p> +<p>O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”).</p> +<p>Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que <em>eu</em> acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora.</p> +<h2 id="a-tag-style" tabindex="-1"><a class="header-anchor" href="#a-tag-style">A tag style</a></h2> +<p>Podemos escrever CSS direto no arquivo <code>index.html</code> usando uma tag HTML especial, <code><style></code>. Podemos colocar a tag <code><style></code> dentro da seção <code><head></code> do arquivo. Assim:</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>title</span><span class="token punctuation">></span></span>My website<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>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + CSS code goes here + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</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>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> +<p>Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag <code><style></code> em cada página para ter os mesmos estilos em todas. Em vez disso, é comum colocar todo o CSS num arquivo separado e então <em>ligar</em> esse arquivo a cada página com uma tag <code><link></code> na seção <code><head></code> do site.</p> +<pre class="language-html"><code class="language-html"><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>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<h2 id="primeiros-passos-para-melhorar-a-pagina" tabindex="-1"><a class="header-anchor" href="#primeiros-passos-para-melhorar-a-pagina">Primeiros passos para melhorar a página</a></h2> +<p>Se você ainda não fez, crie um arquivo <code>style.css</code>. É aqui que vamos escrever todo o nosso CSS personalizado. Se você não estiver usando o meu HTML de partida, vai precisar adicionar a tag <code><link></code> na seção <code><head></code> da página para ligar os estilos à página, como descrito acima.</p> +<p>Dá para conquistar ganhos grandes logo de cara, com só algumas linhas de CSS. Por exemplo, um problema é que a página fica larga demais numa janela de navegador no desktop. Linhas longas de texto são difíceis de ler. Vamos corrigir isso dando à página uma largura máxima. Segundo o <a href="https://practicaltypography.com/line-length.html">Butterick’s Practical Typography</a>, devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 <em>caracteres</em> de largura.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Esta <em>regra</em> CSS mira o elemento <code><main></code> da nossa página e instrui ele a nunca passar da largura que declaramos.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Beleza, <a href="https://perma.cc/66QM-Q2AF">não é estritamente 65 caracteres de largura</a>. A unidade <code>ch</code> no CSS se baseia na largura do caractere <code>0</code> (zero) na fonte dada. Então, na verdade, estamos dizendo: “não deixe a largura da página passar de 65 caracteres <code>0</code>”.</p> +</aside> +<p>Ignorando a imagem gigante de Saturno — com a qual vamos lidar daqui a pouco — já ficou bem melhor. Mas o gosto moderno prefere uma página centralizada, então vamos fazer isso enquanto estamos nisso.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Em idiomas da esquerda para a direita, como o português, <code>margin-inline</code> é a margem horizontal, ou esquerda e direita. Ao definir como <code>auto</code>, estamos dizendo: “não me importa quão larga seja a margem esquerda e a direita, só deixe iguais”. O navegador sabe quão larga queremos a página, então calcula a margem necessária para deixar igual dos dois lados, centralizando a página.</p> +<p>Também temos um elemento <code><footer></code> que vive fora do elemento <code><main></code>, então vamos estilizá-lo à parte, com a mesma largura e margem.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>O <code>max-width</code> pode ser declarado como uma porcentagem do elemento que contém. Definir como 100% significa: “não deixe elementos de imagem ficarem mais largos do que os seus contêineres”.</p> +<p>E agora a nossa página está bem mais agradável.</p> +<p><img src="/assets/img/css-basics-02.webp" alt="A mesma imagem de antes, mas agora a página está centralizada e limitada a uma largura que torna a leitura mais fácil."></p> +<h2 id="anatomia-de-uma-regra-css" tabindex="-1"><a class="header-anchor" href="#anatomia-de-uma-regra-css">Anatomia de uma regra CSS</a></h2> +<p>Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves (<code>{}</code>). Chama-se <em>seletor</em>, porque <em>seleciona</em> elementos da página para mudar.</p> +<p>A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa <em>propriedade</em> e num <em>valor</em>. Neste caso, há uma declaração. A propriedade é <code>max-width</code>, e o valor é <code>100%</code>.</p> +<h2 id="tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos" tabindex="-1"><a class="header-anchor" href="#tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos">Tamanho do texto, altura da linha e espaço entre elementos</a></h2> +<p>O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento <code>html</code> (ou seja, o documento inteiro) e definir <code>font-size</code> e <code>line-height</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, <code>px</code>. Estou descobrindo agora que <code>1px</code> equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender.</p> +<p>Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco.</p> +<p>Vou definir o <code>line-height</code> usando um valor sem unidade de <code>1.45</code>. É um número que fica bonito. Consulte o <a href="https://practicaltypography.com/line-spacing.html">Butterick’s Practical Typography</a> e o seu próprio olho para achar uma boa altura de linha para a sua fonte específica. Estou usando um número sem unidade em vez de algo como <code>px</code> por causa de <a href="https://perma.cc/7YVZ-53XL">como os elementos filhos herdam o valor</a>, mas você não precisa se preocupar demais com isso agora.</p> +<p>Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento <code><main></code> usando um seletor universal, o asterisco (<code>*</code>).</p> +<pre class="language-css"><code class="language-css"><span class="token selector">main *</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token comment">/* or we could use the shortcut syntax like this */</span> + <span class="token property">margin-block</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Um seletor pode ser uma cadeia de coisas. Por exemplo, <code>main p</code> seleciona todo elemento <code><p></code> <em>dentro</em> do elemento <code><main></code>. Mas eu quero mirar <em>tudo</em> no elemento <code><main></code>, então uso o asterisco.</p> +<p>Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com <code>margin-inline</code>, que controla o espaço horizontal ao redor dos elementos, <code>margin-block</code> controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como <code>0</code> e a margem abaixo deles como <code>1rem</code>. O <code>rem</code> é uma unidade igual ao tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent (o elemento <code><html></code>). Como eu defini o tamanho da fonte raiz como <code>20px</code>, é isso que o valor de <code>1rem</code> se torna.</p> +<p>O legal da unidade <code>rem</code> é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa.</p> +<p>O nosso texto está bonito.</p> +<p><img src="/assets/img/css-basics-03.webp" alt="A mesma imagem de antes, mas agora o texto está maior, com uma altura de linha mais generosa."></p> +<p>Nada contra o Times New Roman, mas ele tem uma cara muito… <em>padrão</em>. Dá para fazer melhor.</p> +<h2 id="instalar-webfonts" tabindex="-1"><a class="header-anchor" href="#instalar-webfonts">Instalar webfonts</a></h2> +<p>Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas <a href="https://practicaltypography.com/system-fonts.html">fontes de sistema comuns</a> e <a href="https://perma.cc/9BMG-EMTU">fontes padrão comuns</a>, temos outra opção para personalizar a fonte. <em>Fontes da web</em> (<em>web fonts</em>) são aquelas disponibilizadas ao serem baixadas junto com o resto do seu site. Além do documento, dos arquivos CSS, dos arquivos JavaScript, das imagens e por aí vai, fontes personalizadas também podem ser baixadas.</p> +<p>Fontes da web precisam estar num formato específico, e ser <em>instaladas</em> de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como <a href="http://fonts.google.com/">Google Fonts</a> (grátis) ou <a href="https://fonts.adobe.com">Adobe Fonts</a> (pago). Há <a href="https://typography.com/webfonts">várias</a> <a href="https://typenetwork.com/">opções</a>, inclusive hospedar as fontes no seu próprio servidor, ao lado dos outros arquivos do site. Só garanta que a licença da fonte cubra isso.</p> +<p>Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até <a href="http://fonts.google.com">fonts.google.com</a>. Busque “Oswald” e selecione nos resultados. Depois clique em <em>Get Font</em>.</p> +<p><img src="/assets/img/css-basics-04.webp" alt="Captura de tela do site Google Fonts mostrando a fonte "Oswald". O botão "Get font" está destacado com uma seta vermelha. O texto de amostra abaixo diz: "Whereas disregard and contempt for human rights have resulted." O menu do site aparece à esquerda."></p> +<p>Depois de selecioná-la, não baixe nada ainda. Busque “source sans”. Source Sans 3 é a versão disponível no momento em que eu escrevo. Selecione e clique em <em>Get Font</em>.</p> +<p>Quando as duas fontes estiverem selecionadas, clique em <em>Get embed code</em>. Estamos procurando o bloco rotulado <em>Embed code in the <code><head></code> of your html</em>.</p> +<p><img src="/assets/img/css-basics-05.webp" alt="Captura de tela da interface do Google Fonts mostrando os detalhes da fonte "Source Sans 3". Há um botão "Copy code" dentro de uma caixa vermelha destacada, que fornece o código de incorporação para HTML. A interface inclui opções de estilo da fonte e instruções de uso."></p> +<p>Copie e cole o código de incorporação na seção <code><head></code> do seu site.</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>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>Planets of the Solar System<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>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com<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>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.gstatic.com<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</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">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap<span class="token punctuation">"</span></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 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>styles.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>head</span><span class="token punctuation">></span></span></code></pre> +<p>Adicione uma declaração <code>font-family</code> ao bloco <code>html</code> para conferir se está funcionando.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Isso vai definir a fonte para o documento inteiro. O navegador primeiro tenta Source Sans 3. Se, por algum motivo, essa fonte não estiver disponível (se, por exemplo, o Google Fonts estiver fora do ar), então <code>sans-serif</code> instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na <em>pilha de fontes</em>. É só separar com vírgulas, como você vê acima.</p> +<p>Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito.</p> +<h2 id="configurar-cores-e-variaveis" tabindex="-1"><a class="header-anchor" href="#configurar-cores-e-variaveis">Configurar cores e variáveis</a></h2> +<p>Se você leu o capítulo <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>, vai lembrar que ele usava variáveis CSS para controlar cor e fontes. Vamos fazer isso aqui também. Isso vai facilitar personalizar depois (o que você pode querer fazer se não gostar das minhas escolhas).</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token property">--text-color</span><span class="token punctuation">:</span> #303036<span class="token punctuation">;</span> + <span class="token property">--muted-text-color</span><span class="token punctuation">:</span> #5e5e67<span class="token punctuation">;</span> + <span class="token property">--heading-color</span><span class="token punctuation">:</span> #cd2807<span class="token punctuation">;</span> + <span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span> + <span class="token property">--background-color</span><span class="token punctuation">:</span> #fffdf7<span class="token punctuation">;</span> + + <span class="token property">--heading-font</span><span class="token punctuation">:</span> <span class="token string">'Oswald'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">--body-font</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Você pode nomear as variáveis como quiser, desde que comecem com <code>--</code>. Aqui, estou definindo várias cores e algumas fontes.</p> +<p>Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--body-font<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Use a função <code>var</code> para usar as variáveis que criamos.</p> +<h2 id="estilos-dos-titulos" tabindex="-1"><a class="header-anchor" href="#estilos-dos-titulos">Estilos dos títulos</a></h2> +<p>Estou usando um <code><h1></code> para o título da página e elementos <code><h2></code> para os subtítulos. Vamos mirar esses e aplicar alguns estilos.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span> + <span class="token property">border-block-start</span><span class="token punctuation">:</span> 10px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">h2</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos <code><h2></code> e um bom tanto de espaço extra acima do <code><h1></code>.</p> +<p>Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo <code>font-weight</code> como <code>normal</code> em vez de <code>bold</code>, que é o padrão dos títulos.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Estamos usando <a href="https://perma.cc/A75H-V4HJ">fontes variáveis</a>, então temos mais opções de peso do que <code>normal</code> ou <code>bold</code>. Experimente 300, 500, 900 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">e por aí vai</a>.</p> +</aside> +<p>Para o <code><h1></code>, estou mantendo o <code>font-size</code> padrão. Para o <code><h2></code>, estou definindo o <code>font-size</code> como <code>1.2em</code>, ou seja, 1,2 vezes o <em>tamanho de fonte atual</em>.</p> +<p>Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente.</p> +<p><img src="/assets/img/css-basics-06.webp" alt="A página intitulada "Planets of the Solar System" recebeu uma atualização de design. A fonte foi mudada, e as cores da fonte foram atualizadas. O fundo foi renovado para combinar com essas mudanças. O cabeçalho agora tem uma borda no topo. A página parece mais polida e desenhada."></p> +<p>Quase poderíamos parar aqui. Não tem nada de tão terrível acontecendo. Mas vamos estilizar alguns dos elementos que ainda não cobrimos.</p> +<h2 id="links" tabindex="-1"><a class="header-anchor" href="#links">Links</a></h2> +<p>Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags <code><a></code>. Um aponta para a fonte da imagem de Saturno que eu usei, e o outro para o site NASA Solar System Exploration. O resto está no rodapé do site.</p> +<p>Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> + <span class="token comment">/* ... other code ... */</span> + + <span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span> + + <span class="token comment">/* ... other code ... */</span> +<span class="token punctuation">}</span></code></pre> +<p>Vou usar isso para definir a cor de todos os elementos <code><a></code>, assim:</p> +<pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--link-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Não é uma regra rígida, mas a maioria das pessoas associa texto azul sublinhado a um link clicável. Eu decidi não me afastar demais disso. Mas eu gostaria de adicionar um efeitozinho em que o sublinhado some quando eu passo o mouse por cima.</p> +<p>Vamos usar o seletor de <em>pseudo-classe</em> <code>:hover</code> para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (<code>:disabled</code>) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">a:hover</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>A propriedade que queremos é <code>text-decoration</code>. Por padrão, os links têm um <code>text-decoration</code> de <code>underline</code>. Você tem <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration">algumas opções</a> aqui, mas eu vou de <code>none</code>.</p> +<p>Isso nos dá uma interação visual sutil com o link.</p> +<video controls> + <source src="/assets/video/css-basics-1.mp4" type="video/mp4"> + Seu navegador não tem suporte à tag de vídeo. O vídeo mostra uma gravação da tela em que eu passo o mouse sobre o link. O sublinhado some e volta conforme eu faço isso. +</video> +<h2 id="abreviacoes" tabindex="-1"><a class="header-anchor" href="#abreviacoes">Abreviações</a></h2> +<p>Falando de efeitos ao passar o mouse, há um que você pode não ter notado. Se olhar o HTML no primeiro parágrafo, vai encontrar a seguinte frase.</p> +<pre class="language-html"><code class="language-html">In this article, we will explore the distinctive attributes of each planet, +providing an overview of what makes them unique (and learn a little +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).</code></pre> +<p>A tag <code><abbr></code> ajuda quem visita a saber o que certas abreviações ou siglas significam. Quando você passa o mouse sobre o termo CSS no documento, recebe uma dica útil mostrando o significado. Você coloca a abreviação dentro das tags e usa o atributo <code>title</code> para o texto completo.</p> +<p>Vamos dar um <code>text-decoration</code> para sugerir que dá para interagir com isso.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">abbr</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> + <span class="token property">text-decoration-style</span><span class="token punctuation">:</span> dotted<span class="token punctuation">;</span> + <span class="token property">text-decoration-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">text-decoration-thickness</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Estamos dando um sublinhado, como os links têm por padrão. Mas vamos deixar na cor vermelha que estamos usando para títulos e usar o estilo <code>dotted</code>, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver.</p> +<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2> +<p>Eu seria irresponsável se não citasse Carl Sagan num artigo sobre o sistema solar — mesmo que isto seja só uma demo técnica. Então incluí um trecho épico dele na seção sobre a Terra.</p> +<p>Já está servindo como está — já vem recuado e parece uma citação. Mas dá para melhorar, com certeza. Vou te mostrar o código e depois explicar o que estou fazendo.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">blockquote</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> 1.5rem 0<span class="token punctuation">;</span> + <span class="token property">border-inline-start</span><span class="token punctuation">:</span> 4px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">padding-inline</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Eu quero controlar o recuo e deixá-lo mais consistente, baseando-o no tamanho da fonte do documento. Em idiomas da esquerda para a direita, <code>margin-inline</code> controla as margens esquerda e direita. Estou fornecendo dois valores, <code>1.5rem</code> e <code>0</code>, para especificar as margens esquerda e direita, respectivamente. A margem esquerda vai ser 1,5 vezes o tamanho da fonte do documento, e vamos remover a margem direita por completo.</p> +<p>Um estilo talvez comum demais de um elemento <code><blockquote></code> é dar a ele uma borda esquerda grossa que usa um destaque. Não vejo motivo para ser inconformista aqui, então vou colocar uma borda esquerda usando <code>border-inline-start</code>. Lembre-se: <code>inline</code> se refere ao eixo horizontal. E <code>start</code> significa o primeiro (que é a <em>esquerda</em> para mim; <code>end</code> seria o da direita).</p> +<p>Vou definir como uma linha sólida de <code>4px</code> de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta.</p> +<p>Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca.</p> +<p><img src="/assets/img/css-basics-08.webp" alt="Imagem com texto que descreve brevemente a Terra, incluindo uma citação em bloco mal estilizada de Carl Sagan, em que a borda esquerda encosta no texto."></p> +<p>Felizmente, podemos corrigir isso adicionando um pouco de <code>padding</code>. Vou te dar uma introdução rápida ao <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model"><em>modelo de caixa</em></a>. Todo elemento tem espaço do lado de fora (margem), espaço ao redor do lado de dentro (preenchimento) e uma camada opcional que separa os dois (a borda).</p> +<p>Com esse conhecimento, vamos adicionar algum espaço <em>dentro</em> do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo <code>padding-inline</code> com só um valor, <code>1rem</code>, que equivale ao tamanho da fonte do documento.</p> +<p>Por fim, vou arredondar o efeito deixando o tamanho da fonte um pouco menor e a cor do texto um pouco mais clara. O resultado final é uma citação em bloco bonita, com um toque de estilo.</p> +<p><img src="/assets/img/css-basics-07.webp" alt="A mesma imagem da citação em bloco de antes, mas o espaço entre a borda e o texto foi aumentado, o tamanho do texto foi reduzido, e a cor do texto ficou um cinza sutil."></p> +<p>Eu desenhei este estilo de citação para caber na maioria dos casos, mas você poderia ir em outra direção — chamadas curtas com texto grande e itálico, por exemplo.</p> +<h2 id="listas" tabindex="-1"><a class="header-anchor" href="#listas">Listas</a></h2> +<p>Vamos resolver rápido a lista com marcadores de Plutão e companhia. Vamos dar à lista um pouco de recuo, como é comum em listas com marcadores. Lembre-se: o HTML também tem listas numeradas. Não estamos usando uma nesta página (se você estiver usando a minha marcação HTML), mas podemos escrever o estilo para os dois tipos de lista.</p> +<p>Você já sabe que o seletor mira os elementos que queremos estilizar. Mas você também pode ter vários seletores! Podemos mirar o elemento <code><ul></code> e o elemento <code><ol></code> e dar o mesmo recuo aos dois, fazendo o seguinte.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">ul, ol</span> <span class="token punctuation">{</span> + <span class="token property">padding-inline-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma <em>lista de seletores</em>. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a <em>listas não ordenadas</em> (com marcadores) e <em>listas ordenadas</em> (numeradas).</p> +<p>Vamos também ajustar o espaço entre os <em>itens de lista</em> individuais (elementos <code><li></code>). Eu gosto de usar a metade do que uso para parágrafos, porque quero os itens de lista mais juntos do que os parágrafos, mas ainda com um pouco de espaço entre eles. Como usei <code>1rem</code> para espaçar os parágrafos e outros elementos, vou usar a metade disso, <code>0.5rem</code>, para a margem de baixo.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span> + <span class="token property">margin-block</span><span class="token punctuation">:</span> 0 0.5rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Lembre-se: <code>margin-block</code> é a margem de cima e de baixo num idioma da esquerda para a direita, como o português. Podemos definir os dois valores ao mesmo tempo. O trecho acima equivale a:</p> +<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Isso significa que, em idiomas da esquerda para a direita, a margem acima do item de lista é zero, e a margem abaixo é uns dez pixels (<code>0.5rem</code> significa 0,5 vezes o tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent, que definimos como <code>20px</code>).</p> +<p>O espaçamento deve estar bem bonito agora, mas vamos fazer uma coisa que deixaria designers web dos anos 2000 com inveja. Vamos mudar a cor dos marcadores. Isso era complicado, mas agora é moleza.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">li::marker</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>O pedaço <code>::marker</code> se chama <em>pseudo-elemento</em>, porque representa um pedaço de um elemento HTML. O <code>::marker</code> é uma parte do <em>item de lista</em>, ou elemento <code><li></code>. Ele contém o marcador (ou o número) do item. Podemos mirá-lo com o nosso seletor e mudar a cor para o vermelho dos títulos.</p> +<p><img src="/assets/img/css-basics-09.webp" alt="Captura de tela da lista com marcadores intitulada "Other Major Bodies", com entradas para Pluto, Ceres, Haumea, Makemake, Eris, Ganymede, Titan e Europa. Há mais espaço entre os itens, o que facilita a leitura. Os marcadores estão vermelhos, enquanto o texto está na mesma cor escura."></p> +<p>Ficou bonito!</p> +<h2 id="texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#texto-pre-formatado">Texto pré-formatado</a></h2> +<p>Na maior parte do tempo, nos nossos documentos HTML, não nos importamos em preservar o espaçamento exato de tudo. Na verdade, isso seria contraproducente, porque em geral recuamos o HTML ou incluímos linhas vazias para deixar o código mais legível. Mas, às vezes, queremos mostrar o texto exatamente como está formatado. Exemplos incluem arte ASCII e código de computador.</p> +<p>Em geral, mostramos esse tipo de texto com a tag <code><pre></code> no HTML. Ela preserva todo o espaçamento e usa uma fonte monoespaçada para deixar tudo consistente. Muitas vezes é combinada com a tag <code><code></code> para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo.</p> +<p>Vamos estilizar a tag <code><pre></code> assim.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #edebe7<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Queremos que o código apareça como se estivesse dentro de um contêiner, então vamos dar preenchimento o tempo todo ao redor. Em seguida, vamos definir uma cor de fundo clara, só o bastante visível contra o fundo da página, mas não tão escura a ponto de prejudicar o contraste do texto. Caixas de canto vivo parecem um pouco antinaturais, então vamos adicionar um <code>border-radius</code> pequeno, que é só um termo chique para quanto queremos arredondar os cantos.</p> +<p>Poderíamos ter linhas longas de código, então precisamos especificar o que deve acontecer se uma linha transbordar pela lateral do contêiner. Neste caso, vamos definir como <code>auto</code>, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar.</p> +<p>Por fim, código monoespaçado pode parecer grande, então vamos baixar o tom dizendo que deve ter três quartos do tamanho do texto padrão.</p> +<p><img src="/assets/img/css-basics-10.webp" alt="O exemplo de uma função JavaScript chamada recebeu um contêiner de fundo sutil e arredondado, e é exibido numa fonte monoespaçada. Esta função recebe o nome de um planeta como entrada e devolve informações sobre o planeta a partir de um objeto 'planets' definido, que guarda fatos únicos sobre cada planeta."></p> +<h2 id="melhorar-o-estilo-das-imagens" tabindex="-1"><a class="header-anchor" href="#melhorar-o-estilo-das-imagens">Melhorar o estilo das imagens</a></h2> +<p>Aqui vai como a imagem de Saturno está agora.</p> +<p><img src="/assets/img/css-basics-11.webp" alt="A imagem de Saturno, o sexto planeta a partir do Sol, mostra o seu extenso sistema de anéis. O planeta aparece com uma porção na sombra e os anéis parcialmente iluminados. O texto acima da imagem informa a posição e o tamanho de Saturno no sistema solar. A imagem é mais estreita do que a coluna de texto e, por padrão, é retangular, com cantos vivos."></p> +<p>Não está tão ruim, mas parece que a tag <code><figure></code> está adicionando margem dos dois lados. Eu quero que a imagem ocupe a largura toda. Também quero que a legenda da foto fique menor.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">figure</span> <span class="token punctuation">{</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">figure img</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">figcaption</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Vamos remover a margem em linha do <code><figure></code>. Depois vamos mirar imagens que estão dentro de figures (só temos uma, mas isso pode ser um padrão legal se adicionarmos mais) e fazer o seguinte:</p> +<ul> +<li>Definir <code>display</code> como <code>block</code>. Imagens vêm como <code>inline</code> por padrão, mas o comportamento de <code>block</code> funciona mais como você esperaria de uma imagem assim.</li> +<li>Definir a margem em linha como <code>auto</code>, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada.</li> +<li>Definir <code>border-radius</code> como <code>4px</code> arredonda os cantos da imagem só um pouquinho.</li> +<li>Por fim, vamos reduzir a margem acima da legenda e reduzir o <code>font-size</code> para 80% do tamanho da fonte do documento.</li> +</ul> +<p><img src="/assets/img/css-basics-12.webp" alt="A mesma imagem de Saturno de antes, só que a margem foi removida e os cantos da imagem foram arredondados."></p> +<p>Ficou chique! Ajustes pequenos podem fazer uma diferença grande.</p> +<h2 id="o-rodape" tabindex="-1"><a class="header-anchor" href="#o-rodape">O rodapé</a></h2> +<p>Já temos alguns estilos de rodapé — antes, definimos a largura e garantimos que ficasse centralizado. Mas podemos melhorar dando a ele espaço para respirar, uma bordinha no topo, texto menor e uma cor de texto mais suave.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> + <span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">padding-block</span><span class="token punctuation">:</span> 1.5rem 3rem<span class="token punctuation">;</span> + <span class="token property">border-block-start</span><span class="token punctuation">:</span> 2px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com <code>margin-block-start</code>. Estamos adicionando uma borda de <code>2px</code> de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando <code>padding-block</code>, estamos adicionando algum espaço entre o texto e a borda, e um bom pedaço de preenchimento embaixo para dar folga na parte de baixo da página. Por fim, vamos usar a mesma cor de texto suave que usamos na citação em bloco.</p> +<p>Como já adicionamos a margem que queremos no próprio elemento <code><footer></code>, vamos remover toda a margem das coisas <em>dentro</em> do rodapé. Vamos usar o nosso amigo, o seletor universal (<code>*</code>).</p> +<pre class="language-css"><code class="language-css"><span class="token selector">footer *</span> <span class="token punctuation">{</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Este seletor vai mirar tudo o que está <em>dentro</em> da tag <code><footer></code>. Vamos definir <code>margin</code> como <code>0</code> e reduzir o texto para 90% do tamanho da fonte do documento.</p> +<h2 id="diversao-tipografica-extra" tabindex="-1"><a class="header-anchor" href="#diversao-tipografica-extra">Diversão tipográfica extra</a></h2> +<p>Poderíamos parar aqui de vez, <em>mas</em>… vamos nos divertir um pouco.</p> +<p>Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe <code>intro</code>. Vamos dar um pouco de ênfase deixando o texto um pouco maior.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">.intro</span> <span class="token punctuation">{</span> + <span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe <code>intro</code>, neste caso). Isso vai deixar o <code>font-size</code> maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo.</p> +<p>Beleza, mas agora vamos ficar <em>bem extra</em>. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag <code><span></code> com uma classe <code>caps</code>.</p> +<pre class="language-css"><code class="language-css"><span class="token selector">.caps</span> <span class="token punctuation">{</span> + <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 0.78em<span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span> + <span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>Isso vai nos dar aquele efeito chique de livro, em que as primeiras palavras ficam em versalete. Em geral, você ia querer usar uma fonte com <a href="https://practicaltypography.com/small-caps.html">versalete de verdade</a>, mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável.</p> +<p>A declaração <code>text-transform</code> vai deixar todas as letras em maiúsculas. É melhor fazer isso com CSS do que digitar tudo em maiúsculas na mão, porque é mais uma coisa de estilo. Para o <code>font-size</code>, eu só fui mexendo até ficar com a cara certa. No fundo, eu queria que as maiúsculas tivessem a mesma altura das letras minúsculas do texto de introdução (ou seja, a <a href="https://en.wikipedia.org/wiki/X-height">altura-x</a>).</p> +<p>Para ajudar no equilíbrio, estou aumentando um pouco o <code>font-weight</code>. Além de valores como <code>normal</code> e <code>bold</code>, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta.</p> +<p>Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade <code>em</code>, que se baseia no <code>font-size</code> atual. Isso é útil porque, se você mudar o <code>font-size</code> no futuro, o espaçamento muda na mesma proporção.</p> +<p><img src="/assets/img/css-basics-13.webp" alt="Captura de tela do título Planets of the Solar System. O texto abaixo descreve o sistema solar. O tamanho do texto foi aumentado, e a primeira frase do parágrafo foi renderizada em versalete."></p> +<p>E aí está. Dos começos humildes como uma página <em>sem estilo</em>, com um charme simples, agora está com cara de artigo de autoridade.</p> +<h2 id="potencial-sem-limite" tabindex="-1"><a class="header-anchor" href="#potencial-sem-limite">Potencial sem limite</a></h2> +<p>Estes são só os estilos que eu escolhi com base nas minhas preferências. Você poderia ir em todo tipo de direção diferente. Não estou necessariamente tentando empurrar um estilo para você — embora eu tenha te apontado para alguns princípios tipográficos geralmente bons de seguir. Eu só queria te dar um gostinho de como você pode aplicar os seus próprios estilos a uma página.</p> +<p>A mágica do CSS é que você poderia pegar o meu HTML exato — sem mudanças — e criar um design completamente diferente a partir do mesmo ponto de partida. Essa é a premissa de um experimento web chamado <a href="https://csszengarden.com/">CSS Zen Garden</a>, em que as pessoas enviam designs com base na mesma marcação.</p> +<figure> + <img src="/assets/img/css-basics-14.webp" alt="Captura de tela de duas páginas do projeto CSS Zen Garden. A página da esquerda tem um design colorido e vibrante, com uma paleta rosa, roxa e laranja. A da direita tem um design minimalista e limpo, com fundo cinza-claro e texto azul. As duas mostram o que o CSS consegue fazer no design."> + <figcaption>Estes dois designs compartilham o mesmo código HTML. <a href="https://www.youtube.com/watch?v=Iloby6ZXRjI">São a mesma foto.</a></figcaption> +</figure> +<p>Espero que este capítulo bônus tenha te dado um gostinho do que é possível com CSS. Assim como com HTML, até um pouco de conhecimento de CSS já vale — uma simples mudança de fonte e cor, por exemplo, pode fazer uma diferença enorme. Eu te animo a continuar explorando CSS se você quiser criar designs personalizados. É uma habilidade recompensadora de ter.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> + + + <h1 id="html-reutilizavel-com-php" tabindex="-1"><a class="header-anchor" href="#html-reutilizavel-com-php">HTML reutilizável com PHP</a></h1> +<p>Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas.</p> +<p>É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa <em>PHP: Hypertext Preprocessor</em>. Sim, <a href="https://en.wikipedia.org/wiki/Recursive_acronym">a sigla faz parte do nome</a>, o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial.</p> +<p>O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS <a href="https://wordpress.org/">WordPress</a> foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. <em>Hypertext preprocessor</em> é uma boa descrição do que ela costuma fazer.</p> +<p>Quando você visita um site <em>estático</em>, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença?</p> +<p>O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em <code>example.com/user/blake</code>. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta.</p> +<p>O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social.</p> +<p>Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução <code>include</code>.</p> +<h2 id="como-executar-php" tabindex="-1"><a class="header-anchor" href="#como-executar-php">Como executar PHP</a></h2> +<p>O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP.</p> +<p>Eu recomendo o que se chama <em>hospedagem compartilhada</em>. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços).</p> +<aside class="aside"><p class="aside-label">Observação</p><p>É possível executar PHP no seu computador para testar o site antes de enviá-lo a um servidor. Porém, configurar isso fica fora do alcance deste livro.</p> +<p>O jeito mais fácil provavelmente é usar um app como <a href="https://www.apachefriends.org/">XAMPP</a> ou <a href="https://www.mamp.info">MAMP</a> (o que eu uso). Você também pode <a href="https://perma.cc/MZB9-GKBD">instalar o PHP direto no sistema</a> e usar o <a href="https://web.archive.org/web/20240711042305/https://www.php.net/manual/en/features.commandline.webserver.php">servidor de desenvolvimento embutido</a>.</p> +</aside> +<p>A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu <a href="https://perma.cc/WAD3-JCNX">perguntei no Mastodon</a>.</p> +<ul> +<li><a href="https://www.dreamhost.com/">DreamHost</a></li> +<li><a href="https://www.siteground.com/">SiteGround</a></li> +<li><a href="https://www.reclaimhosting.com/">Reclaim Hosting</a></li> +<li><a href="https://www.infinityfree.com/">InfinityFree</a></li> +</ul> +<p>E ainda tem o <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech.NET</a>, a hospedagem <a href="https://blakewatson.com/journal/why-i-host-my-websites-with-nearlyfreespeech-net/">que eu uso há anos</a>. Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade.</p> +<p>Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com <a href="https://perma.cc/P7Y7-CR6P">FTP</a>.</p> +<p>Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo.</p> +<p>O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de <code>.html</code> para <code>.php</code>. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma.</p> +<h2 id="deixar-uma-pagina-dinamica" tabindex="-1"><a class="header-anchor" href="#deixar-uma-pagina-dinamica">Deixar uma página dinâmica</a></h2> +<p>Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP.</p> +<p>Por exemplo, aqui vai uma página que mostra o ano atual.</p> +<pre class="language-php"><code class="language-php"><span class="token doctype"><span class="token punctuation"><!</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 attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>My website<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>https://unpkg.com/sakura.css/css/sakura.css<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</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>h1</span><span class="token punctuation">></span></span>My website<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>p</span><span class="token punctuation">></span></span>The current year is: <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">date</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Y'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</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> +<p>Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida.</p> +<p>Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (<code><?php</code> e <code>?></code>).</p> +<p>O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução <code>echo</code> é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função <code>date</code> devolve a data atual — neste caso, estamos dizendo que queremos só o ano.</p> +<p>Então a função <code>date</code> roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução <code>echo</code>, que o insere no documento.</p> +<p>O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado.</p> +<h2 id="reutilizar-partes-do-seu-site" tabindex="-1"><a class="header-anchor" href="#reutilizar-partes-do-seu-site">Reutilizar partes do seu site</a></h2> +<p>Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares.</p> +<p>Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo <code>aria-current</code>, que muda conforme a página em que você está).</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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 attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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/<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 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></code></pre> +<p>Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em <em>cada página</em> e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu.</p> +<p>Primeiro, crie um arquivo chamado <code>nav.php</code>. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta <code>includes</code>, só para organizar.</p> +<p>Copie o menu de navegação da página inicial (<code>index.html</code>) e cole o conteúdo no arquivo <code>nav.php</code>. Por enquanto, remova o atributo <code>aria-current="page"</code>, porque vamos precisar tornar essa parte dinâmica depois.</p> +<p>Você deve ter um arquivo <code>nav.php</code> mais ou menos assim:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>/<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<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.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</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></code></pre> +<p>O trecho acima não é só um recorte. É o <em>conteúdo inteiro</em> de <code>nav.php</code>. Ao contrário de outros arquivos HTML, que precisam de um <code><head></code>, um <code><body></code> etc., arquivos PHP podem conter um fragmento de HTML.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>No processo de converter o site de só HTML para PHP, é uma boa hora de converter todos os links internos entre páginas para URLs absolutos. Comece com uma barra <code>/</code> e escreva o caminho completo. Veja esta <a href="/intervalo-instalar-um-servidor-local/#urls-relativas-e-urls-absolutas">seção sobre URLs relativas e URLs absolutas</a> do capítulo do servidor web, se você ainda não viu.</p> +</aside> +<p>Agora vamos usar. Renomeie <code>index.html</code> para <code>index.php</code>. Apague o bloco <code><nav></code> inteiro e substitua pela seguinte linha de PHP.</p> +<pre class="language-php"><code class="language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake<span class="token entity named-entity" title="’">&rsquo;</span>s Homepage<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></code></pre> +<p>Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas.</p> +<h2 id="converter-paginas-html-em-php" tabindex="-1"><a class="header-anchor" href="#converter-paginas-html-em-php">Converter páginas HTML em PHP</a></h2> +<p>Os passos são, em geral, os mesmos para cada página.</p> +<ol> +<li>Mude a extensão do arquivo de <code>.html</code> para <code>.php</code>.</li> +<li>Substitua a tag <code><nav></code> pela instrução <code>include</code> do PHP.</li> +</ol> +<p>Para páginas do nível mais alto, a instrução <code>include</code> do PHP vai ficar assim:</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre> +<p>Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe <code>..</code> para subir um nível.</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"../includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você se sentir à vontade com mais código, use uma variável embutida do PHP que aponta para o diretório de nível mais alto. O seguinte funciona em qualquer página. O ponto (<code>.</code>) aqui une as duas strings de texto.</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'DOCUMENT_ROOT'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string double-quoted-string">"/includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre> +</aside> +<p>Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o <code>nav.php</code>.</p> +<p>Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção <code><head></code> é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai.</p> +<h2 id="bonus-destacar-dinamicamente-o-link-atual-da-navegacao" tabindex="-1"><a class="header-anchor" href="#bonus-destacar-dinamicamente-o-link-atual-da-navegacao">Bônus: destacar dinamicamente o link atual da navegação</a></h2> +<p>Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo <code>aria-current</code> no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual?</p> +<p>Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o <code>aria-current</code> automaticamente.</p> +<p>Primeiro, vamos recapitular o que este atributo significa. Se alguém vai à página Sobre, queremos que aquele link no menu seja estilizado para indicar que representa a página atual (ou anunciado por um leitor de tela, se a pessoa estiver usando um). Nesse caso, usaríamos o atributo <code>aria-current="page"</code>.</p> +<p>Temos também outro cenário. Se alguém visita um post do blog, gostaríamos de destacar o link Blog na navegação. Não é exatamente a página atual — a pessoa não está na listagem do blog, para onde o link aponta, e sim num post individual. Ainda assim, seria legal destacar o link Blog porque ele representa a seção atual do site — o post é uma subpágina do blog. Nesse caso, poderíamos usar <code>aria-current="true"</code>. Isso é menos específico e mais correto em termos de significado.</p> +<p>Beleza, então como adicionamos isso automaticamente com PHP?</p> +<p>Há muitos jeitos de fazer isso — e nenhum é necessariamente mais certo do que os outros — mas aqui vai o que eu acho o menos complicado.</p> +<p>Esta técnica vai exigir que a gente <em>chame uma função</em> em cada item da navegação. Fica assim.</p> +<pre class="language-php"><code class="language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</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></code></pre> +<p>Vamos precisar de uma <em>função</em> personalizada chamada <code>aria_current</code> (eu te dou o código dessa função daqui a pouco). A função deve receber um <em>argumento</em>, que deve ser o texto do <code>href</code>. Depois, o trabalho da função será comparar esse pedaço de texto com o URL visitado e decidir se deve imprimir, usando <code>echo</code>, o atributo <code>aria-current</code>.</p> +<p>Você pode colocar a função no mesmo arquivo, acima da marcação HTML.</p> +<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> +<span class="token keyword">function</span> <span class="token function-definition function">aria_current</span><span class="token punctuation">(</span><span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// If $url is an exact match for the current URL, return 'aria-current="page"'.</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="page"'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token comment">// Otherwise it might be a sub-page, so check if the current URL contains</span> + <span class="token comment">// $url. If it does, return 'aria-current="true"' to indicate that the link</span> + <span class="token comment">// is an ancestor of the current page. Ignore a lone slash.</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$url</span> <span class="token operator">!==</span> <span class="token string single-quoted-string">'/'</span> <span class="token operator">&&</span> <span class="token function">strpos</span><span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token constant boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="true"'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +<span class="token delimiter important">?></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</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<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</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.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</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></code></pre> +<p>Beleza, vamos por partes. Primeiro, precisamos abrir um par de tags PHP. Dentro, vamos definir uma função chamada <code>aria_current</code> com um argumento: uma variável chamada <code>$url</code>.</p> +<p>Você pode ver onde eu acrescentei algumas notas chamadas <em>comentários</em>. Toda linha que começa com duas barras (<code>//</code>) é considerada comentário e é ignorada — está ali só para quem está olhando o código.</p> +<p>O primeiro pedaço de código é uma <em>instrução if</em>. O PHP tem uma variável global chamada <code>$_SERVER</code> com todo tipo de informação, inclusive qual página está sendo visitada (o que ele chama de <code>REQUEST_URI</code>). Então pegamos isso e vemos se combina com o URL do item de navegação dado (lembre-se: estamos rodando esta função para cada item). Se combinar, vamos imprimir <code>aria-current="page"</code> usando a instrução <code>echo</code>. Nesse caso, a saída aparece no ponto em que chamamos a função (que é dentro da tag <code><a></code>, onde ficam os atributos). Depois da instrução <code>echo</code>, usamos <code>return</code> para parar a função — já terminamos.</p> +<p>Se o primeiro teste não for verdadeiro, há outro teste que queremos tentar. A página atual visitada é uma subpágina do item de navegação dado?</p> +<p>Este teste tem duas partes:</p> +<ol> +<li>Primeiro, queremos ignorar a página inicial (<code>/</code>), porque ela obviamente não é subpágina de nada.</li> +<li>Segundo, vamos testar o URL passado para a função contra o URL visitado, para ver se temos uma combinação.</li> +</ol> +<p>A segunda parte do teste usa uma função chamada <code>strpos</code>. Ela recebe dois argumentos. O primeiro é um pedaço de texto no qual você quer buscar (vamos chamar de <em>palheiro</em>). O segundo é um pedaço de texto que você está procurando (vamos chamar de <em>agulha</em>). A função devolve a posição da agulha no palheiro, se encontrar. Devolve <code>false</code> se não encontrar de jeito nenhum.</p> +<p>Então, de novo, vamos olhar a variável global embutida <code>$_SERVER['REQUEST_URI']</code>. Você pode imaginar isso como algo tipo <code>/blog/my-first-post</code>. Sabemos que a pessoa está numa subpágina do blog se encontrarmos <code>/blog</code> dentro desse caminho.</p> +<p>O teste passa nesse caso, e vamos imprimir <code>aria-current="true"</code> usando a instrução <code>echo</code>.</p> +<p>Se os dois testes falharem, não imprimimos nada.</p> +<p>Para recapitular: quando alguém carrega uma página no nosso site, rodamos uma função em cada item da navegação. Se o <code>href</code> do item combina com o URL atual, ou aparece em algum lugar do URL atual, imprimimos o atributo <code>aria-current</code> adequado. Caso contrário, não imprimimos nada.</p> +<p>Ufa! Se você nunca tinha programado, dê um tapinha nas próprias costas, porque agora você já programou. Se esse tipo de coisa te diverte, explore mais PHP ou dê uma olhada em JavaScript.</p> +<h2 id="conclusao" tabindex="-1"><a class="header-anchor" href="#conclusao">Conclusão</a></h2> +<p>A criação de modelos com <code>include</code> no PHP é um ótimo jeito de escrever HTML sem repetir código. O PHP tem uma barreira de entrada menor do que outras linguagens de programação, e essa é uma das razões de eu trazer o assunto. Porém, sites podem ser feitos com todo tipo de linguagem (JavaScript, Python e Ruby são outras escolhas populares). Este é o mundo dos sites dinâmicos. Fica bem selvagem se você começa a pensar em tudo o que dá para fazer com isso.</p> +<p>Includes de PHP podem ser úteis mesmo para um site pessoal pequeno. Mas também não tem problema ficar só com HTML puro! Editores como o Visual Studio Code têm busca e substituição robustas, o que permite atualizar muitos arquivos de uma vez.</p> +<p>E com isso, você terminou o último capítulo bônus de <a href="/"><em>HTML e Pessoas</em></a>! Obrigado por ler.</p> + + + </main> + + <footer class="site-footer"> + <div class="container"> + <ul class="mb-sm pl-none" style="list-style: none"> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos</a + > + </li> + <li> + <a href="https://github.com/blakewatson/htmlforpeople">GitHub</a> + </li> + <li> + <a href="https://blakewatson.com/about">Sobre o autor</a> + </li> + </ul> + <p> + Livro original de + <a href="https://blakewatson.com">Blake Watson</a> — + <a href="https://htmlforpeople.com">HTML for People</a>.<br /> + 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>.<br /> + Licença + <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" + >CC BY-NC-SA 4.0</a + >. + </p> + </div> + </footer> + + <script> + const tocLinks = Array.from( + document.querySelector('#sumario + ol').querySelectorAll('a'), + ); + tocLinks.forEach((link) => { + link.setAttribute('href', link.getAttribute('href').replace('/', '#')); + }); + </script> + </body> +</html>
A
sitemap.xml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?> +<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" + xmlns:xhtml="http://www.w3.org/1999/xhtml"> + <url> + <loc>https://htmlepessoas.com/introducao/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/introducao/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/intro/"/> + </url> + <url> + <loc>https://htmlepessoas.com/do-zero-a-internet-seu-primeiro-site/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/do-zero-a-internet-seu-primeiro-site/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/zero-to-internet-your-first-website/"/> + </url> + <url> + <loc>https://htmlepessoas.com/adicionar-conteudo-ao-seu-site/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-conteudo-ao-seu-site/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/add-content-to-your-website/"/> + </url> + <url> + <loc>https://htmlepessoas.com/intervalo-melhore-seu-editor-de-texto/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/intervalo-melhore-seu-editor-de-texto/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/intermission-upgrade-your-text-editor/"/> + </url> + <url> + <loc>https://htmlepessoas.com/um-site-com-estilo/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/um-site-com-estilo/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/a-website-with-style/"/> + </url> + <url> + <loc>https://htmlepessoas.com/adicionar-uma-pagina-sobre/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-uma-pagina-sobre/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/adding-an-about-page/"/> + </url> + <url> + <loc>https://htmlepessoas.com/adicionar-um-blog/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-um-blog/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/adding-a-blog/"/> + </url> + <url> + <loc>https://htmlepessoas.com/adicionar-um-curriculo/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-um-curriculo/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/adding-a-resume/"/> + </url> + <url> + <loc>https://htmlepessoas.com/intervalo-instalar-um-servidor-local/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/intervalo-instalar-um-servidor-local/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/intermission-installing-a-local-web-server/"/> + </url> + <url> + <loc>https://htmlepessoas.com/adicionar-uma-pagina-divertida/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-uma-pagina-divertida/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/adding-a-fun-page/"/> + </url> + <url> + <loc>https://htmlepessoas.com/conquista-desbloqueada-hipertextista/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/conquista-desbloqueada-hipertextista/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/achievement-unlocked-hypertexter/"/> + </url> + <url> + <loc>https://htmlepessoas.com/personalizar-o-simple-css/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/personalizar-o-simple-css/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/customizing-simple-css/"/> + </url> + <url> + <loc>https://htmlepessoas.com/basico-de-css/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/basico-de-css/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/css-basics/"/> + </url> + <url> + <loc>https://htmlepessoas.com/html-reutilizavel-com-php/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/html-reutilizavel-com-php/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/reusable-html-with-php/"/> + </url> + <url> + <loc>https://htmlepessoas.com/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/"/> + </url> + <url> + <loc>https://htmlepessoas.com/printable/</loc> + <xhtml:link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/printable/"/> + <xhtml:link rel="alternate" hreflang="en" href="https://htmlforpeople.com/printable/"/> + </url> +</urlset>
A
um-site-com-estilo/index.html
@@ -0,0 +1,520 @@
+<!doctype html> + +<html lang="pt-BR"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="initial-scale=1, width=device-width" /> + + <title>Um site com estilo</title> + + <meta property="og:title" content="Um site com estilo" /> + <meta property="og:description" content="Aprenda sobre CSS e veja como ligar uma folha de estilo externa, como o Simple.css, ao seu site." /> + <meta property="og:image" content="/assets/img/design/og.png" /> + <meta property="og:locale" content="pt_BR" /> + <link rel="canonical" href="https://htmlepessoas.com/um-site-com-estilo/" /> + <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/um-site-com-estilo/" /> + + <link + rel="alternate" + hreflang="en" + href="https://htmlforpeople.com/a-website-with-style/" + /> + <link + rel="alternate" + hreflang="x-default" + href="https://htmlforpeople.com/a-website-with-style/" + /> + + + <!-- 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" + aria-current="page" + >Um site com estilo</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-sobre" + + >Adicionar uma página Sobre</a + > + </li> + <li> + <a href="/adicionar-um-blog" + >Adicionar um blog</a + > + </li> + <li> + <a + href="/adicionar-um-curriculo" + + >Adicionar um currículo</a + > + </li> + <li> + <a + href="/intervalo-instalar-um-servidor-local" + + >Intervalo: instalar um servidor local</a + > + </li> + <li> + <a + href="/adicionar-uma-pagina-divertida" + + >Adicionar uma página divertida</a + > + </li> + <li> + <a + href="/conquista-desbloqueada-hipertextista" + + >Conquista desbloqueada: Hipertextista</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Capítulos bônus</strong> + </p> + <ul> + <li> + <a + href="/personalizar-o-simple-css" + + >Personalizar o Simple.css</a + > + </li> + <li> + <a href="/basico-de-css" + >Básico de CSS</a + > + </li> + <li> + <a + href="/html-reutilizavel-com-php" + + >HTML reutilizável com PHP</a + > + </li> + </ul> + + <p class="menu-heading"> + <strong>Demos e recursos</strong> + </p> + + <ul> + <li> + <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/" + >Demo da homepage do Blake</a + > + </li> + <li> + <a + target="_blank" + rel="noopener" + href="https://planets.htmlforpeople.com/" + >Demo Planetas do Sistema Solar</a + > + </li> + <li> + <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro" + >Recursos e links</a + > + </li> + </ul> + </nav> + + <div class="settings" hidden> + <p class="menu-heading"> + <strong>Ajustes</strong> + </p> + + <theme-toggle> + <label class="checkbox theme-toggle"> + <input type="checkbox" /> Tema escuro + </label> + </theme-toggle> + + <code-wrap> + <label class="checkbox code-wrap"> + <input type="checkbox" /> Quebrar linhas do código + </label> + </code-wrap> + </div> +</details> +</div> + </header> + + + <main id="main-content" class="container"> + + <h1 id="um-site-com-estilo" tabindex="-1"><a class="header-anchor" href="#um-site-com-estilo">Um site com estilo</a></h1> +<p>Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e <em>sem estilo</em>.</p> +<p>O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página.</p> +<p>No mundo do HTML, a gente só se preocupa com <em>o que as coisas são</em> — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir <em>como as coisas parecem</em>, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento.</p> +<p>Um jeito de incluir CSS é usar a tag <code><style></code> e colocar o código CSS direto nela. Por exemplo, olhe isto:</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">body</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Gill Sans'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre> +<p>Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag <code><body></code> — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.”</p> +<aside class="aside"><p class="aside-label">Observação sobre fontes</p><p>Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados <em>serifs</em>, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais.</p> +<p class="sans-serif">Fontes sans-serif são aquelas <em>sem</em> serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.</p> +<p class="mono">Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.</p> +</aside> +<p>Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como <code>styles.css</code>. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag <code><style></code> em cada página que criar.</p> +<p>CSS é uma linguagem poderosa. Todo site que você vê está usando ela. Todos aqueles desenhos detalhados, boa parte da animação e o posicionamento de imagens e tipografia — isso é CSS.</p> +<p>Mesmo assim, CSS também tem uma curva de aprendizado. E embora eu te incentive de verdade a explorar CSS, este livro é <em>HTML</em> e Pessoas — eu quero manter o foco no HTML. Mas tudo bem! A gente ainda pode usar CSS para deixar o site bonito sem escrever tudo na mão.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você tiver vontade de aprender mais sobre CSS, ótimo! Eu tenho <a href="/basico-de-css">um capítulo bônus</a> no fim deste livro que apresenta mais CSS e aponta para outros materiais.</p> +</aside> +<h2 id="frameworks-css" tabindex="-1"><a class="header-anchor" href="#frameworks-css">Frameworks CSS</a></h2> +<p>Até quem desenvolve sites profissionalmente e já sabe CSS usa CSS pronto como ponto de partida. A gente vai fazer algo parecido. Alguns frameworks CSS são feitos para quem desenvolve — eles vêm com um monte de recurso extra e pedem que você escreva o HTML de um jeito específico. Outros frameworks, porém, são pensados para sites mais simples. Eles deixam o seu HTML bonito sem você ter que fazer muito trabalho a mais. São chamados de <em>frameworks CSS classless</em>.</p> +<p>Para o nosso caso, isso é perfeito. Vamos usar um chamado <a href="https://simplecss.org/">Simple.css</a>. Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes.</p> +<ul> +<li><a href="https://perma.cc/5936-VK4J">Water.css</a></li> +<li><a href="https://perma.cc/F6E4-EU58">Sakura</a></li> +<li><a href="https://picocss.com/">Pico</a></li> +</ul> +<p>Eles vão deixar o seu HTML bonito e te dar um ótimo ponto de partida para um site básico. Fique à vontade para usar coisas que outras pessoas já fizeram. Tem muita coisa boa por aí!</p> +<h2 id="simplecss" tabindex="-1"><a class="header-anchor" href="#simplecss">Simple.css</a></h2> +<p>Eu te animo a dar uma olhada no <a href="https://simplecss.org/">site do Simple.css</a>, principalmente na <a href="https://simplecss.org/demo">página de demonstração</a>. Ela mostra como usar diferentes elementos HTML e como eles ficam com o Simple. Vamos baixar o Simple.css.</p> +<p>A <a href="https://perma.cc/XA5E-E59Q">documentação do Simple.css</a> dá algumas formas de começar, mas, pelo bem da simplicidade (viu o que eu fiz?), eu vou te passar o URL do arquivo CSS:</p> +<p><a href="https://cdn.simplecss.org/simple.css">https://cdn.simplecss.org/simple.css</a></p> +<p>Não se intimide com todo o código que tem lá! Você não precisa entender isso agora (nem nunca, de verdade). É só ir em <em>File > Save Page As</em> no navegador (<em>Command-S</em> no macOS e <em>Control-S</em> no Windows) e salvar este arquivo na pasta do projeto do seu site, onde está o <code>index.html</code>.</p> +<p>Pronto, você salvou. A gente vai adicionar isso à página daqui a pouco. Mas, primeiro, vamos organizar a casa.</p> +<h2 id="organizando-nossos-arquivos" tabindex="-1"><a class="header-anchor" href="#organizando-nossos-arquivos">Organizando nossos arquivos</a></h2> +<p>Até agora, a gente só tem três arquivos — a nossa página, um arquivo de imagem e o <code>simple.css</code> que acabamos de baixar. Mas logo vamos adicionar mais arquivos. Vamos criar um par de pastas e mover as coisas. A gente quer que a nova estrutura de arquivos fique assim:</p> +<ul> +<li>pasta <code>css</code> +<ul> +<li><code>simple.css</code></li> +</ul> +</li> +<li>pasta <code>images</code> +<ul> +<li><code>space.jpg</code></li> +</ul> +</li> +<li><code>index.html</code></li> +</ul> +<p>Limpo e organizado. No Visual Studio Code, você pode criar arquivos e pastas direto na barra lateral. Passe o mouse sobre os seus arquivos e você vai ver estes botões.</p> +<img src="/assets/img/vscode-new-folder.webp" alt="Captura de tela da janela do VS Code com uma pasta chamada 'MY-SITE' em destaque. Dentro da pasta há dois arquivos: 'index.html' e 'space.jpg.' Uma seta vermelha grande aponta para o botão 'New Folder' no canto superior direito do editor." style="max-width: 450px"> +<p>Depois que você fizer as mudanças, se recarregar a página no navegador, vai notar que a nossa imagem não funciona mais. Perceba como o navegador recorre ao texto <code>alt</code> que a gente colocou, no lugar da imagem.</p> +<p><img src="/assets/img/a-website-with-style-1.webp" alt="Captura de tela da “Blake's Homepage.” Ela inclui seções: uma frase breve sobre o autor, jogos de tabuleiro favoritos e um guia de como fazer um site. A página tem texto preto simples sobre fundo branco. Há uma imagem, mas ela não está funcionando direito — no lugar aparece o texto alternativo, “Photograph of space with stars and stardust.”"></p> +<p>Isso acontece porque a gente moveu o arquivo de imagem <code>space.jpg</code> em relação à página inicial. Agora ele está numa pasta chamada <code>images</code>. A gente conserta isso atualizando o valor <code>src</code> da imagem. Coloque o nome da pasta e uma barra antes do nome do arquivo.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> +<aside class="aside"><p class="aside-label">Mais sobre URLs</p><p>Quando a gente precisa informar o lugar dos arquivos no site — seja um link para outra página ou o caminho de uma imagem — a gente pode usar o que se chama de <em>URL relativa</em>.</p> +<p>Quando você está na página <code>index.html</code>, pense nela como o seu lugar atual. Se quiser apontar para uma imagem, precisa dizer ao navegador como encontrá-la. Uma URL relativa é um jeito de fazer isso. Ela descreve como ir “daqui até lá”, por assim dizer.</p> +<p>Parecido com o URL na barra do navegador, você usa barras para separar os níveis. O URL <code>images/space.jpg</code> significa: “procure uma pasta chamada <code>images</code> neste mesmo nível e, dentro dela, procure um arquivo chamado <code>space.jpg</code>.”</p> +</aside> +<h2 id="adicionando-o-simplecss-a-pagina" tabindex="-1"><a class="header-anchor" href="#adicionando-o-simplecss-a-pagina">Adicionando o Simple.css à página</a></h2> +<p>A gente pode adicionar uma <em>folha de estilo</em> à página de um jeito parecido com o da imagem. Vamos usar uma tag <code><link></code> para apontar para o arquivo CSS. Vamos colocá-la na tag <code><head></code> do site.</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>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>head</span><span class="token punctuation">></span></span></code></pre> +<p>A tag <code><link></code> é <em>self-closing</em> — ela não tem tag de fechamento. A gente precisa dar dois <em>atributos</em>. O <code>rel</code> diz qual é a relação do arquivo que estamos ligando com a nossa página. Arquivos CSS são chamados de <em>stylesheets</em> (folhas de estilo), então a gente informa isso como a relação (no singular). O <code>href</code> é onde a gente indica o arquivo, incluindo o caminho da pasta.</p> +<aside class="aside"><p class="aside-label">Observação</p><p>O que as pessoas costumam chamar de “links” numa página — texto ou imagens clicáveis — é feito com a tag <code><a></code>, como a gente já viu. Em geral, eles apontam para um destino para o qual a gente navega ao clicar.</p> +<p>A tag <code><link></code> indica um arquivo que a gente quer ligar à página e qual é a relação desse arquivo. Aqui a gente está usando ela para conectar uma folha de estilo. Outra relação comum é definir um ícone para o site, por exemplo.</p> +</aside> +<p>Assim, de uma vez, o nosso site se transforma. Agora a gente vê uma página centralizada, texto maior e uma fonte sans-serif.</p> +<p><img src="/assets/img/a-website-with-style-2.webp" alt="Captura de tela da “Blake's Homepage” com o estilo atualizado usando Simple.css. A tipografia mudou: o título “Blake's Homepage” agora está em negrito e maior, formando um cabeçalho mais evidente. A imagem que estava quebrada agora aparece direito, mostrando uma foto colorida de um céu estrelado. O texto está mais organizado, com melhor espaçamento, e as seções ficam claras com títulos em negrito para “Favorite board games” e “How to make a website.” O layout geral parece mais limpo e organizado, com leitura melhor."></p> +<h2 id="adicionando-um-header-um-footer-e-o-conteudo-principal" tabindex="-1"><a class="header-anchor" href="#adicionando-um-header-um-footer-e-o-conteudo-principal">Adicionando um header, um footer e o conteúdo principal</a></h2> +<p>A gente vê que o arquivo Simple.css fez efeito na hora. Mas as coisas ficam ainda melhores quando a gente adiciona algumas seções que o Simple.css espera — um <code><header></code> para o título do site e um <code><main></code> para a área de conteúdo principal. A gente não usou isso antes — não é obrigatório — mas usar é uma boa prática.</p> +<p>E isto é totalmente opcional, mas já que estamos nisso, vale adicionar um <code><footer></code> também. Às vezes as pessoas colocam informação de copyright aqui. Às vezes têm rodapés grandes, com uns montes de links. Às vezes é só o nome. Eu vou manter simples, mas você pode colocar o que quiser.</p> +<p>Então a gente coloca o nome do site numa tag <code><header></code> e o conteúdo principal na tag <code><main></code>. Depois, adiciona um <code><footer></code> com um pouco de informação.</p> +<pre class="language-html"><code class="language-html"><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>h1</span><span class="token punctuation">></span></span>Blake's Homepage<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>PAGE CONTENT GOES HERE<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></code></pre> +<p>Depois desses ajustes, o título do site ganha um estilo especial, e parágrafos e listas ficam com um espaçamento mais adequado.</p> +<p><img src="/assets/img/a-website-with-style-3.webp" alt="Captura de tela da “Blake's Homepage” com mais melhorias de estilo. A página agora tem um cabeçalho claro no topo, com um fundo claro, que faz o título “Blake's Homepage” se destacar mais. O espaço entre as seções melhorou a leitura, e um rodapé novo apareceu embaixo, com o texto. Esse rodapé dá um toque pessoal. O layout geral parece mais estruturado e equilibrado visualmente."></p> +<aside class="aside"><p class="aside-label">Observação</p><p>Se você estiver acompanhando e notar que o seu site tem fundo escuro com texto claro, tudo bem! O Simple.css reconhece se você (quem visita o site) está com o sistema no modo escuro e, se estiver, usa um tema escuro no site. Para mudar esse comportamento, veja o capítulo bônus <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>.</p> +</aside> +<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2> +<p>Vamos colocar as novidades online! No Neocities, você não consegue enviar pastas pelo botão de upload. Ou você cria a pasta no painel clicando em “New Folder”, ou arrasta a pasta do computador para a área de soltar arquivos.</p> +<p><img src="/assets/img/a-website-with-style-4.webp" alt="Captura de tela do painel do Neocities da “Blake's Homepage.” A página mostra opções de gerenciamento de arquivos, incluindo enviar arquivos, criar arquivos novos e pastas novas. O URL da página do Blake e as opções de edição estão visíveis, com uma seta vermelha apontando para o botão “New Folder.”"></p> +<p>Provavelmente é mais fácil arrastar as pastas. Mas, se você criá-las na mão, precisa abrir cada pasta e enviar o conteúdo dela. Depois que uma pasta é criada, você passa o mouse sobre ela para ver as opções. Você vai querer clicar em “Manage” para abrir a pasta. Dali, pode clicar em “Upload” para enviar os arquivos certos para aquela pasta.</p> +<p>Mova arquivos que já existem renomeando-os. Por exemplo, se eu quiser mover <code>space.jpg</code> para dentro da pasta de imagens, posso clicar em “Rename” e incluir a pasta no caminho: <code>images/space.jpg</code>.</p> +<p><img src="/assets/img/a-website-with-style-5.webp" alt="Uma janela pop-up chamada “Rename / Move” mostra o caminho do arquivo “images/space.jpg” sendo editado."></p> +<p>É um pouco trabalhoso, mas não é tão ruim. Seja qual for o jeito, confira se os arquivos no Neocities batem com o que você tem no computador.</p> +<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2> +<p>Neste capítulo a gente escreveu pouco código, mas se preparou para o que vem: organizamos as coisas, conseguimos uns estilos e separamos a página em seções.</p> +<p>O resto deste livro-web vai focar em construir o nosso site. No próximo capítulo, vamos adicionar uma página Sobre.</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="/adicionar-uma-pagina-sobre/">Adicionar uma página Sobre</a> + </p> + + + + <p> + <strong + ><span role="presentation">←</span> Capítulo anterior:</strong + > + <a href="/intervalo-melhore-seu-editor-de-texto/">Intervalo: melhore seu editor de texto</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>