Mais tags HTML

Prof. Me. Danilo Bueno

Interface sanfona

• Uma interface sanfona (“accordion”) é um padrão de design que permite que os usuários expandam e recolham seções de conteúdo.
• É comumente usada em aplicativos da web e móveis para economizar espaço na tela e melhorar a usabilidade.
• As tags <details> e <summary> são usadas para criar esse efeito de sanfona.

Exemplo

<details>
  <summary>Seção 1</summary>
  <p>Conteúdo da seção 1</p>
</details>

<details>
  <summary>Seção 2</summary>
  <p>Conteúdo da seção 2</p>
</details>

O famoso modal

• Um modal é uma janela que aparece sobre o conteúdo da página, geralmente para exibir informações adicionais ou solicitar uma ação do usuário.
• Os modais são frequentemente usados para formulários, confirmações e mensagens importantes.
• Tag <dialog> incorporada no HTML5.

Exemplo

<button 
  onclick="document.querySelector('dialog').showModal()">
  Abrir Modal
</button>

<dialog>
  <form method="dialog">
    <p>Conteúdo do modal</p>
    <button>Fechar</button>
  </form>
</dialog>

Audio e vídeo

• Tags <audio> e <video> são usadas para incorporar mídia em páginas web.
• Elas fornecem controles integrados para reprodução, pausa, volume e outros recursos.

Exemplo de audio e vídeo

<video src="video.webm" controls>
  <p>Seu navegador não suporta a tag de vídeo.</p>
</video>

<audio src="audio.mp3" controls>
  <p>Seu navegador não suporta a tag de áudio.</p>
</audio>

Outros recursos de vídeo

<video controls autoplay loop muted poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
  <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English" />
  <p>Seu navegador não suporta a tag de vídeo.</p>
</video>

Incorporação

• A tag <iframe> é usada para incorporar outro documento HTML dentro do documento atual.
• Comumente usada para incorporar vídeos do YouTube, mapas do Google Maps, entre outros.

Exemplo

<iframe 
  src="https://www.youtube.com/embed/9STeegpxSb0?si=UgD9UL-96B-MkshF" 
  title="YouTube video player" 
  frameborder="0"
  allowfullscreen
  width="560" height="315">
</iframe>

Estruturando documento

Como planejar uma estrutura básica do site e escrever o HTML para representar essa estrutura.

Layout Santo Graal

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>Holy Grail Layout</title>
  </head>
  <body>
    <header>Header</header>
    <nav>Nav</nav>
    <main>Content</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
  </body>
</html>

Seções básicas de um HTML

• header: uma grande faixa na parte superior com um grande cabeçalho, geralmente com o logotipo ou um slogan do site;
• nav: links para as principais seções do site;
• main: uma área principal que contém a maior parte do conteúdo exclusivo de uma determinada página; Esta é a parte que vai variar de página para página;

Seções básicas de um HTML

• aside: algumas informações periféricas, links, citações, anúncios etc. Geralmente é contextual ao que está contido no conteúdo principal;
• footer: uma faixa na parte inferior para colocar informações comuns (como o cabeçalho), mas geralmente essas são secundárias ao site.

Mais tags semânticas

• article: define um conteúdo independente em um documento que é em princípio, distribuível e reutilizável.

• section: representa uma seção genérica contida em um documento HTML, geralmente com um título;

<article>
  <h2>Article heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  <section>
    <h3>Subsection</h3>
  </section>
</article>

Divs e spans

• São contêineres genéricos utilizados para agrupar elementos e não possuem significado semântico.

• A principal diferença entre eles é com relação ao seu comportamento visual

• O <div> é um elemento de bloco (block-level)

• O <span> é um elemento de inline (inline-level)

Block vs Inline

Bloco (gera quebra de linha)

• Ocupa toda a largura disponível
• Largura e altura são respeitadas

Inline (sem quebra de linha)

• Ocupa apenas a largura necessária
• Largura e altura não são respeitadas

Obrigado!

[email protected] · website/docs · github