e
para listas não ordenadas e ordenadas, respectivamente.
2. para itens de lista.
3. para divisões genéricas de conteúdo.
4. para agrupar elementos de forma inline.

Imagens:
Para incluir imagens em uma página, você usa a tag e especifica o caminho para a imagem no atributo src.

htmlCopy code
<img src="caminho/para/imagem.jpg" alt="Texto Alternativo">

Listas:
Você pode criar listas ordenadas e não ordenadas usando as tags

e
, respectivamente. Cada item da lista é definido pela tag
1. .

   htmlCopy code
   <ul>
       <li>Item 1li>
       <li>Item 2li>
       <li>Item 3li>
   ul>
   
   <ol>
       <li>Item 1li>
       <li>Item 2li>
       <li>Item 3li>
   ol>
   

2. Comentários:
   Você pode adicionar comentários ao seu código HTML usando . Os comentários não são exibidos na página e são usados para fazer anotações para outros desenvolvedores ou para si mesmo.

   htmlCopy code
   
   

3. Formulários:
   Para coletar informações dos usuários, você usa formulários HTML. As tags básicas incluem

   , , </code>, e <code><button></code>.</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/processar_formulario"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"nome"</span>></span>Nome:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nome"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nome"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"email"</span>></span>Email:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Enviar<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </code></div></div></pre> </li> </ol> <p>Esses são os fundamentos do HTML para criar um site básico. À medida que você se torna mais familiarizado com HTML, pode explorar conceitos mais avançados, como CSS para estilizar sua página e JavaScript para adicionar interatividade. O aprendizado contínuo e a prática são essenciais para se tornar proficiente no desenvolvimento web.</p> </div> </div> <h2>“Mais Informações”</h2> <p><img decoding="async" src="https://meukultura.com/pic/more_info.png" class="center"></p> <div data-message-author-role="assistant" data-message-id="cd5d0e05-e215-4ad5-b895-86c2d6e14a15" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto"> <div class="markdown prose w-full break-words dark:prose-invert light"> <p>Claro, vamos aprofundar um pouco mais nos fundamentos do HTML:</p> <ol start="8"> <li> <p><strong>Tabelas:</strong><br /> Você pode usar tabelas para organizar dados em linhas e colunas. As tabelas são construídas usando as tags <code></p> <table></code> para a tabela em si, <code></p> <tr></code> para as linhas e <code></p> <td></code> para as células.</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">table</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Nome<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Idade<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>João<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>30<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Maria<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>25<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"></<span class="hljs-name">table</span>></span> </code></div></div></pre> </li> <li> <p><strong>Formatação de Texto:</strong><br /> Além dos elementos de cabeçalho (<code></p> <h1></code> a <code></p> <h6></code>), você pode usar outras tags para formatar o texto, como <code><strong></code> para texto em negrito, <code><em></code> para ênfase (italizado), <code><u></code> para sublinhado e <code><strike></code> para texto riscado.</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Texto em negrito<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">em</span>></span>Texto italizado<span class="hljs-tag"></<span class="hljs-name">em</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>Texto sublinhado<span class="hljs-tag"></<span class="hljs-name">u</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strike</span>></span>Texto riscado<span class="hljs-tag"></<span class="hljs-name">strike</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> </code></div></div></pre> </li> <li> <p><strong>Elementos Semânticos:</strong><br /> HTML5 introduziu uma série de novos elementos semânticos que ajudam a descrever melhor a estrutura do conteúdo da página. Alguns exemplos incluem <code></p> <header></code>, <code></p> <footer></code>, <code></p> <nav></code>, <code></p> <article></code>, <code></p> <section></code>, e <code></p> <aside></code>. Esses elementos fornecem significado ao conteúdo, facilitando a compreensão do layout da página para os desenvolvedores e motores de busca.</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Meu Site<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Um breve slogan ou descrição<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/"</span>></span>Página Inicial<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/sobre"</span>></span>Sobre<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/contato"</span>></span>Contato<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> <span class="hljs-tag"><<span class="hljs-name">section</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Últimas Notícias<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">article</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Título da Notícia<span class="hljs-tag"></<span class="hljs-name">h3</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Conteúdo da notícia...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">article</span>></span> <span class="hljs-tag"><<span class="hljs-name">article</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Outro Título da Notícia<span class="hljs-tag"></<span class="hljs-name">h3</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Conteúdo da outra notícia...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">article</span>></span> <span class="hljs-tag"></<span class="hljs-name">section</span>></span> <span class="hljs-tag"><<span class="hljs-name">aside</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Barra Lateral<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Conteúdo da barra lateral...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">aside</span>></span> <span class="hljs-tag"><<span class="hljs-name">footer</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-symbol">©</span> 2024 Meu Site. Todos os direitos reservados.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">footer</span>></span> </code></div></div></pre> </li> <li> <p><strong>Elementos de Multimídia:</strong><br /> Além de imagens, você pode incorporar outros tipos de conteúdo multimídia em uma página HTML, como áudio e vídeo. Isso é feito usando as tags <code><audio></code> e <code><video></code>, respectivamente.</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">audio</span> <span class="hljs-attr">controls</span>></span> <span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"caminho/para/audio.mp3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"audio/mpeg"</span>></span> Seu navegador não suporta o elemento de áudio. <span class="hljs-tag"></<span class="hljs-name">audio</span>></span> <span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">controls</span>></span> <span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"caminho/para/video.mp4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"video/mp4"</span>></span> Seu navegador não suporta o elemento de vídeo. <span class="hljs-tag"></<span class="hljs-name">video</span>></span> </code></div></div></pre> </li> </ol> <p>Esses são alguns elementos adicionais que podem enriquecer o conteúdo e a estrutura de uma página HTML. À medida que você continua a explorar e a praticar, você descobrirá ainda mais recursos e técnicas para criar páginas da web dinâmicas e visualmente atraentes. Lembre-se sempre de manter o código limpo, semântico e acessível para garantir uma ótima experiência para todos os usuários.</p> </div> </div> </p> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">Última Actualização 25/02/2024</span><div class="tie-alignright"><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> lido 3 minutos</span> </div></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&title=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&name=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&description=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&media=https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&title=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&redirect_uri=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&redirect_uri=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML%20https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML%20https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Fundamentos%20do%20Desenvolvimento%20Web%20HTML%20https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Linha" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Linha</span> </a> <a href="mailto:?subject=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&body=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Partilhar Via Email" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Partilhar Via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2024-02-25T17:09:00+03:00","datePublished":"2024-02-25T17:09:00+03:00","dateModified":"2024-02-25T17:09:00+03:00","headline":"Fundamentos do Desenvolvimento Web HTML","name":"Fundamentos do Desenvolvimento Web HTML","keywords":[],"url":"https:\/\/meukultura.com\/fundamentos-do-desenvolvimento-web-html\/","description":"Claro, vou explicar as fundamentos para criar um site utilizando HTML. HTML, que significa HyperText Markup Language (Linguagem de Marca\u00e7\u00e3o de Hipertexto), \u00e9 a espinha dorsal de qualquer p\u00e1gina da web","copyrightYear":"2024","articleSection":"programa\u00e7\u00e3o","articleBody":"Claro, vou explicar as fundamentos para criar um site utilizando HTML. HTML, que significa HyperText Markup Language (Linguagem de Marca\u00e7\u00e3o de Hipertexto), \u00e9 a espinha dorsal de qualquer p\u00e1gina da web. Ele fornece a estrutura b\u00e1sica para organizar o conte\u00fado de um site. Aqui est\u00e3o os princ\u00edpios b\u00e1sicos para come\u00e7ar:Estrutura B\u00e1sica:\nUm documento HTML come\u00e7a com uma estrutura b\u00e1sica que inclui as tags , e . A tag envolve todo o conte\u00fado da p\u00e1gina, enquanto cont\u00e9m informa\u00e7\u00f5es sobre o documento, como o t\u00edtulo da p\u00e1gina e links para arquivos externos. A tag cont\u00e9m todo o conte\u00fado vis\u00edvel da p\u00e1gina.htmlCopy code\n\n\n \n \n T\u00edtulo da P\u00e1gina\n\n\n \n\n\nTags e Elementos:\nHTML consiste em uma variedade de tags e elementos que s\u00e3o usados para estruturar o conte\u00fado da p\u00e1gina. Algumas tags comuns incluem: a para t\u00edtulos de diferentes n\u00edveis. para par\u00e1grafos de texto. para links. para imagens. e para listas n\u00e3o ordenadas e ordenadas, respectivamente. para itens de lista. para divis\u00f5es gen\u00e9ricas de conte\u00fado. para agrupar elementos de forma inline.Links e \u00c2ncoras:\nPara criar links para outras p\u00e1ginas ou recursos, voc\u00ea usa a tag (anchor). O atributo href especifica o destino do link.htmlCopy codeVisite o Exemplo\nImagens:\nPara incluir imagens em uma p\u00e1gina, voc\u00ea usa a tag e especifica o caminho para a imagem no atributo src.htmlCopy code\nListas:\nVoc\u00ea pode criar listas ordenadas e n\u00e3o ordenadas usando as tags e , respectivamente. Cada item da lista \u00e9 definido pela tag .htmlCopy code\n Item 1\n Item 2\n Item 3\n\n\n\n Item 1\n Item 2\n Item 3\n\nComent\u00e1rios:\nVoc\u00ea pode adicionar coment\u00e1rios ao seu c\u00f3digo HTML usando . Os coment\u00e1rios n\u00e3o s\u00e3o exibidos na p\u00e1gina e s\u00e3o usados para fazer anota\u00e7\u00f5es para outros desenvolvedores ou para si mesmo.htmlCopy code\nFormul\u00e1rios:\nPara coletar informa\u00e7\u00f5es dos usu\u00e1rios, voc\u00ea usa formul\u00e1rios HTML. As tags b\u00e1sicas incluem , , , e .htmlCopy code\n Nome:\n \n Email:\n \n Enviar\n\nEsses s\u00e3o os fundamentos do HTML para criar um site b\u00e1sico. \u00c0 medida que voc\u00ea se torna mais familiarizado com HTML, pode explorar conceitos mais avan\u00e7ados, como CSS para estilizar sua p\u00e1gina e JavaScript para adicionar interatividade. O aprendizado cont\u00ednuo e a pr\u00e1tica s\u00e3o essenciais para se tornar proficiente no desenvolvimento web.\"Mais Informa\u00e7\u00f5es\"\n\nClaro, vamos aprofundar um pouco mais nos fundamentos do HTML:Tabelas:\nVoc\u00ea pode usar tabelas para organizar dados em linhas e colunas. As tabelas s\u00e3o constru\u00eddas usando as tags para a tabela em si, para as linhas e para as c\u00e9lulas.htmlCopy code\n \n Nome\n Idade\n \n \n Jo\u00e3o\n 30\n \n \n Maria\n 25\n \n\nFormata\u00e7\u00e3o de Texto:\nAl\u00e9m dos elementos de cabe\u00e7alho ( a ), voc\u00ea pode usar outras tags para formatar o texto, como para texto em negrito, para \u00eanfase (italizado), para sublinhado e para texto riscado.htmlCopy codeTexto em negrito\nTexto italizado\nTexto sublinhado\nTexto riscado\nElementos Sem\u00e2nticos:\nHTML5 introduziu uma s\u00e9rie de novos elementos sem\u00e2nticos que ajudam a descrever melhor a estrutura do conte\u00fado da p\u00e1gina. Alguns exemplos incluem , , , , , e . Esses elementos fornecem significado ao conte\u00fado, facilitando a compreens\u00e3o do layout da p\u00e1gina para os desenvolvedores e motores de busca.htmlCopy code\n Meu Site\n Um breve slogan ou descri\u00e7\u00e3o\n\n\n \n P\u00e1gina Inicial\n Sobre\n Contato\n \n\n\n \u00daltimas Not\u00edcias\n \n T\u00edtulo da Not\u00edcia\n Conte\u00fado da not\u00edcia...\n \n \n Outro T\u00edtulo da Not\u00edcia\n Conte\u00fado da outra not\u00edcia...\n \n\n\n Barra Lateral\n Conte\u00fado da barra lateral...\n\n\n © 2024 Meu Site. Todos os direitos reservados.\n\nElementos de Multim\u00eddia:\nAl\u00e9m de imagens, voc\u00ea pode incorporar outros tipos de conte\u00fado multim\u00eddia em uma p\u00e1gina HTML, como \u00e1udio e v\u00eddeo. Isso \u00e9 feito usando as tags e , respectivamente.htmlCopy code\n \n Seu navegador n\u00e3o suporta o elemento de \u00e1udio.\n\n\n\n \n Seu navegador n\u00e3o suporta o elemento de v\u00eddeo.\n\nEsses s\u00e3o alguns elementos adicionais que podem enriquecer o conte\u00fado e a estrutura de uma p\u00e1gina HTML. \u00c0 medida que voc\u00ea continua a explorar e a praticar, voc\u00ea descobrir\u00e1 ainda mais recursos e t\u00e9cnicas para criar p\u00e1ginas da web din\u00e2micas e visualmente atraentes. Lembre-se sempre de manter o c\u00f3digo limpo, sem\u00e2ntico e acess\u00edvel para garantir uma \u00f3tima experi\u00eancia para todos os usu\u00e1rios.","publisher":{"@id":"#Publisher","@type":"Organization","name":"Meu kultura","logo":{"@type":"ImageObject","url":"https:\/\/meukultura.com\/wp-content\/uploads\/2023\/12\/meu-kultura-high-resolution-logo-transparent-1.png"},"sameAs":["https:\/\/web.facebook.com\/MeuKultura\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/meukultura.com\/fundamentos-do-desenvolvimento-web-html\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/meukultura.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/meukultura.com\/wp-content\/uploads\/2023\/12\/meu-kultura-high-resolution-logo.png","width":2000,"height":1500}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&title=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&name=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&description=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&media=https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&title=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://vk.com/share.php?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="mailto:?subject=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&body=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Partilhar Via Email" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Partilhar Via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div id="read-next-block" class="container-wrapper read-next-slider-4"> <h2 class="read-next-block-title">Ler Próximo</h2> <section id="tie-read-next" class="slider-area mag-box"> <div class="slider-area-inner"> <div id="tie-main-slider-4-read-next" class="tie-main-slider main-slider wide-slider-with-navfor-wrapper wide-slider-wrapper centered-title-slider tie-slick-slider-wrapper" data-slider-id="4" data-autoplay="true" data-speed="3000"> <div class="main-slider-inner"> <div class="container slider-main-container"> <div class="tie-slick-slider"> <ul class="tie-slider-nav"></ul> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37149 tie-slide-1 tie-standard"> <a href="https://meukultura.com/design-de-texto-em-javascript/" class="all-over-thumb-link" aria-label="Design de Texto em JavaScript"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/design-de-texto-em-javascript/">Design de Texto em JavaScript</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37147 tie-slide-2 tie-standard"> <a href="https://meukultura.com/sistema-de-usuarios-seguro-com-express-js/" class="all-over-thumb-link" aria-label="Sistema de Usuários Seguro com Express.js"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/sistema-de-usuarios-seguro-com-express-js/">Sistema de Usuários Seguro com Express.js</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37145 tie-slide-3 tie-standard"> <a href="https://meukultura.com/guia-de-roteamento-express-fundamentos/" class="all-over-thumb-link" aria-label="Guia de Roteamento Express: Fundamentos"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/guia-de-roteamento-express-fundamentos/">Guia de Roteamento Express: Fundamentos</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37143 tie-slide-4 tie-standard"> <a href="https://meukultura.com/gerenciamento-de-sessoes-no-express/" class="all-over-thumb-link" aria-label="Gerenciamento de Sessões no Express"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/gerenciamento-de-sessoes-no-express/">Gerenciamento de Sessões no Express</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37141 tie-slide-5 tie-standard"> <a href="https://meukultura.com/consideracoes-ao-implantar-node-js/" class="all-over-thumb-link" aria-label="Considerações ao Implantar Node.js"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/consideracoes-ao-implantar-node-js/">Considerações ao Implantar Node.js</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37139 tie-slide-6 tie-standard"> <a href="https://meukultura.com/sistema-de-comentarios-com-express/" class="all-over-thumb-link" aria-label="Sistema de Comentários com Express"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/sistema-de-comentarios-com-express/">Sistema de Comentários com Express</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37137 tie-slide-1 tie-standard"> <a href="https://meukultura.com/express-desenvolvimento-de-aplicacoes-web/" class="all-over-thumb-link" aria-label="Express: Desenvolvimento de Aplicações Web"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/express-desenvolvimento-de-aplicacoes-web/">Express: Desenvolvimento de Aplicações Web</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37135 tie-slide-2 tie-standard"> <a href="https://meukultura.com/framework-foundation-desenvolvimento-web-front-end/" class="all-over-thumb-link" aria-label="Framework Foundation: Desenvolvimento Web Front-End"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/framework-foundation-desenvolvimento-web-front-end/">Framework Foundation: Desenvolvimento Web Front-End</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37133 tie-slide-3 tie-standard"> <a href="https://meukultura.com/componentes-de-navegacao-no-framework-foundation/" class="all-over-thumb-link" aria-label="Componentes de Navegação no Framework Foundation"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/componentes-de-navegacao-no-framework-foundation/">Componentes de Navegação no Framework Foundation</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png)" class="slide slide-id-37131 tie-slide-4 tie-standard"> <a href="https://meukultura.com/recursos-do-framework-foundation/" class="all-over-thumb-link" aria-label="Recursos do Framework Foundation"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-42737" href="https://meukultura.com/category/programacao/">programação</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://meukultura.com/recursos-do-framework-foundation/">Recursos do Framework Foundation</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> </div><!-- .tie-slick-slider /--> </div><!-- .slider-main-container /--> </div><!-- .main-slider-inner /--> </div><!-- .main-slider /--> <div class="wide-slider-nav-wrapper "> <ul class="tie-slider-nav"></ul> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="tie-slick-slider"> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">Design de Texto em JavaScript</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">Sistema de Usuários Seguro com Express.js</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">Guia de Roteamento Express: Fundamentos</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">Gerenciamento de Sessões no Express</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-3"> <div class="slide-overlay"> <h3 class="thumb-title">Considerações ao Implantar Node.js</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-4"> <div class="slide-overlay"> <h3 class="thumb-title">Sistema de Comentários com Express</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">Express: Desenvolvimento de Aplicações Web</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">Framework Foundation: Desenvolvimento Web Front-End</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">Componentes de Navegação no Framework Foundation</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">Recursos do Framework Foundation</h3> </div> </div><!-- slide /--> </div><!-- .wide_slider_nav /--> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #wide-slider-nav-wrapper /--> </div><!-- .slider-area-inner --> </section><!-- .slider-area --> </div><!-- #read-next-block --> <div class="prev-next-post-nav container-wrapper media-overlay"> <div class="tie-col-xs-6 prev-post"> <a href="https://meukultura.com/python-trabalho-sem-prompt-de-comando/" style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-390x220.png)" class="post-thumb" rel="prev"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> </a> <a href="https://meukultura.com/python-trabalho-sem-prompt-de-comando/" rel="prev"> <h3 class="post-title">Python: Trabalho sem Prompt de Comando</h3> </a> </div> <div class="tie-col-xs-6 next-post"> <a href="https://meukultura.com/integrando-sqlalchemy-com-flask/" style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-390x220.png)" class="post-thumb" rel="next"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> </a> <a href="https://meukultura.com/integrando-sqlalchemy-com-flask/" rel="next"> <h3 class="post-title">Integrando SQLAlchemy com Flask</h3> </a> </div> </div><!-- .prev-next-post-nav /--> <div id="related-posts" class="container-wrapper"> <div class="mag-box-title the-global-title"> <h3>Artigos Relacionados</h3> </div> <div class="related-posts-list"> <div class="related-item tie-standard"> <a aria-label="Construindo Cabeçalhos de Site Responsivos" href="https://meukultura.com/construindo-cabecalhos-de-site-responsivos/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image default-featured-img" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://meukultura.com/construindo-cabecalhos-de-site-responsivos/">Construindo Cabeçalhos de Site Responsivos</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="Animação de Personagem no Scratch" href="https://meukultura.com/animacao-de-personagem-no-scratch/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image default-featured-img" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://meukultura.com/animacao-de-personagem-no-scratch/">Animação de Personagem no Scratch</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="Desenvolvimento de Aplicativos JavaFX" href="https://meukultura.com/desenvolvimento-de-aplicativos-javafx/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image default-featured-img" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://meukultura.com/desenvolvimento-de-aplicativos-javafx/">Desenvolvimento de Aplicativos JavaFX</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="Programação de Varinha Mágica Scratch" href="https://meukultura.com/programacao-de-varinha-magica-scratch/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image default-featured-img" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://meukultura.com/programacao-de-varinha-magica-scratch/">Programação de Varinha Mágica Scratch</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> </div><!-- .related-posts-list /--> </div><!-- #related-posts /--> <div class="stream-item stream-item-below-post-comments"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-2"><script type="text/javascript"> atOptions = { 'key' : 'c525888d5cea02df4ee1fa4e63106130', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/c525888d5cea02df4ee1fa4e63106130/invoke.js"></script> </div> </div></div> </div><!-- .post-components /--> </div><!-- .main-content --> <div id="check-also-box" class="container-wrapper check-also-right"> <div class="widget-title the-global-title"> <div class="the-subtitle">Veja Também</div> <a href="#" id="check-also-close" class="remove"> <span class="screen-reader-text">Fechar</span> </a> </div> <div class="widget"> <ul class="posts-list-items"> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="Taxonomias e Campos no WordPress" href="https://meukultura.com/taxonomias-e-campos-no-wordpress/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://meukultura.com/taxonomias-e-campos-no-wordpress/">Taxonomias e Campos no WordPress</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="Campos Seleção Múltipla em Flask" href="https://meukultura.com/campos-selecao-multipla-em-flask/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://meukultura.com/campos-selecao-multipla-em-flask/">Campos Seleção Múltipla em Flask</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="Posicionamento Fixo vs. Pegajoso: CSS" href="https://meukultura.com/posicionamento-fixo-vs-pegajoso-css/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://meukultura.com/posicionamento-fixo-vs-pegajoso-css/">Posicionamento Fixo vs. Pegajoso: CSS</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="Filtros Jinja: Manipulação Eficiente de Dados" href="https://meukultura.com/filtros-jinja-manipulacao-eficiente-de-dados/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://meukultura.com/filtros-jinja-manipulacao-eficiente-de-dados/">Filtros Jinja: Manipulação Eficiente de Dados</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="Palavras-Chave em C++: Fundamentais e Significados" href="https://meukultura.com/palavras-chave-em-c-fundamentais-e-significados/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image wp-post-image default-featured-img tie-small-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://meukultura.com/palavras-chave-em-c-fundamentais-e-significados/">Palavras-Chave em C++: Fundamentais e Significados</a> <div class="post-meta"> </div> </div> </li> </ul><!-- .related-posts-list /--> </div> </div><!-- #related-posts /--> </div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script> <!-- defults --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Direitos Autorais 2025, Todos os Direitos Reservados  |  <span style="color:red;" class="tie-icon-heart"></span> <a href="https://meukultura.com/popular/">Popular</a>  |  <a href="https://meukultura.com/last-article/">Último Artigo</a>  |  <a href="https://meukultura.com/categorias/">Categorias</a>  |  <a href="https://meukultura.com/contact-us/">Contacte-nos</a>  |  <a href="https://meukultura.com/report-content/">Reportar Conteúdo</a>  |  <a href="https://meukultura.com/about-us/">Sobre Nós</a>  |  <a href="https://meukultura.com/privacy-policy/">Política de Privacidade</a>  |  <a href="https://meukultura.com/terms-and-conditions/">Termos e Condições</a>  |  <a href="https://meukultura.com/faq/">FAQ</a>  |  <a href="https://meukultura.com/who-we-are/">Quem Somos</a> </footer> </div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://web.facebook.com/MeuKultura/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&title=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&name=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&description=Fundamentos%20do%20Desenvolvimento%20Web%20HTML&media=https://meukultura.com/wp-content/uploads/2023/12/meu-kultura-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&title=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&redirect_uri=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&redirect_uri=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML%20https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://meukultura.com/fundamentos-do-desenvolvimento-web-html/&text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Fundamentos%20do%20Desenvolvimento%20Web%20HTML%20https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Fundamentos%20do%20Desenvolvimento%20Web%20HTML%20https://meukultura.com/fundamentos-do-desenvolvimento-web-html/" rel="external noopener nofollow" title="Linha" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Linha</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Botão Voltar ao Topo</span> </a> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area appear-from-left" aria-label="Sidebar Secundária" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Fechar</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://meukultura.com/"> <label> <span class="screen-reader-text">Pesquisar por:</span> <input type="search" class="search-field" placeholder="Pesquisar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Pesquisar" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://web.facebook.com/MeuKultura/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/jannah\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style> .copy-tooltip { position: absolute; background-color: orange; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 14px; font-family: Arial, sans-serif; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); display: none; z-index: 9999; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(-10px); } .copy-tooltip.show { opacity: 1; transform: translateY(0); } </style> <div class="copy-tooltip" id="copyTooltip"></div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { var tooltip = document.getElementById('copyTooltip'); function showTooltip(e, message) { tooltip.innerHTML = message; tooltip.style.left = e.pageX + 20 + 'px'; tooltip.style.top = e.pageY + 20 + 'px'; tooltip.classList.add('show'); tooltip.style.display = 'block'; setTimeout(function() { tooltip.classList.remove('show'); setTimeout(function() { tooltip.style.display = 'none'; }, 300); }, 3000); // Tooltip will disappear after 3 seconds } document.addEventListener('copy', function (e) { e.preventDefault(); var pageUrl = window.location.href; e.clipboardData.setData('text/plain', pageUrl); showTooltip(e, 'Use os botões de compartilhamento.'); }); document.addEventListener('keydown', function (e) { if (e.ctrlKey && (e.key === 'c' || e.key === 'C')) { e.preventDefault(); var pageUrl = window.location.href; navigator.clipboard.writeText(pageUrl); showTooltip(e, 'Use os botões de compartilhamento.'); } }); document.addEventListener('contextmenu', function (e) { e.preventDefault(); showTooltip(e, 'O clique direito está desativado.'); }); }); </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Consent Preferences" style="background-color:#DC7218"> <button class="cky-btn-revisit" aria-label="Consent Preferences"> <img src="http://meukultura.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#DC7218">We value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#DC7218"> <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customize" data-cky-tag="settings-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218">Customize</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#DC7218;border-color:#DC7218">Accept All</button> </div></div></div></div><div class="cky-preference-wrapper" data-cky-tag="detail" style="color:#DC7218;background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-preference-center"> <div class="cky-preference"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#DC7218">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="http://meukultura.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#DC7218"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyze how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#DC7218">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#DC7218">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#DC7218">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#DC7218">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#DC7218">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#FFFFFF;background-color:#DC7218;border-color:#DC7218"> Accept All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218"> Save My Preferences </button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218"> Reject All </button> </div></div></div></div></div></script><!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//all2.atico-jo.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <div id="reading-position-indicator"></div><div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Fechar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Pesquisar"> <form method="get" class="tie-popup-search-form" action="https://meukultura.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Pesquisar por" autocomplete="off" placeholder="Digite e tecle Enter" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Pesquisar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Fechar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Pesquisar"> <form method="get" class="tie-popup-search-form" action="https://meukultura.com/"> <input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="Pesquisar por" autocomplete="off" placeholder="Pesquisar por" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Pesquisar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="text/javascript" src="https://meukultura.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://meukultura.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-translations"> /* <![CDATA[ */ ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2024-08-13 18:06:19+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"pt"},"This contact form is placed in the wrong place.":["Este formul\u00e1rio de contacto est\u00e1 colocado no s\u00edtio errado."],"Error:":["Erro:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); /* ]]> */ </script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/meukultura.com\/wp-json\/", "namespace": "contact-form-7\/v1" } }; /* ]]> */ </script> <script type="text/javascript" src="https://meukultura.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1" id="contact-form-7-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/meukultura.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"Nada Encontrado","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2" id="tie-scripts-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/js/live-search.js?ver=7.0.2" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://meukultura.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> </body> </html>