Detalhes Adicionais em HTML

Introdução

A tag HTML details oferece uma maneira de fornecer detalhes e informações adicionais sobre qualquer título ou texto. A tag <details> oculta o texto dentro dela por padrão e exibe o texto somente quando o usuário clica no botão de seta. Neste laboratório, aprenderemos como usar a tag HTML <details> com um resumo personalizado.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Tag <details> básica

Crie um arquivo index.html no seu editor de texto preferido.

Copie e cole o seguinte código no seu arquivo index.html:

<details>
  <summary>Clique para ver mais</summary>
  <p>Este texto está oculto e pode ser visto clicando no botão de seta.</p>
</details>

Este é um exemplo básico de como usar a tag <details>. O texto dentro da tag <details> estará oculto por padrão e o usuário pode visualizar o texto clicando no botão de seta.

Resumo Personalizado

Agora, vamos criar um resumo personalizado para a tag <details>. Modifique o código existente para que se pareça com isto:

<details>
  <summary>Leia mais sobre o autor</summary>
  <p>
    John Doe é um escritor que publicou inúmeros livros em diferentes gêneros.
  </p>
</details>

No código acima, adicionamos um resumo personalizado "Leia mais sobre o autor" usando a tag <summary> e fornecemos os detalhes do autor dentro da tag <details>.

Adicionar Imagem

Vamos adicionar uma imagem à tag <details>. Copie e cole o seguinte código no seu arquivo index.html:

<details>
  <summary>Clique para ver mais</summary>
  <p>Este texto está oculto e pode ser visto clicando no botão de seta.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

No código acima, adicionamos uma imagem usando a tag <img>. Quando o usuário clica no botão de seta, a imagem e o texto dentro da tag <details> serão visíveis.

Adicionar Atributo 'open'

Agora, vamos adicionar o atributo open à tag <details> para mostrar o texto por padrão. Modifique o código existente para que se pareça com isto:

<details open>
  <summary>Leia mais sobre o autor</summary>
  <p>
    John Doe é um escritor que publicou inúmeros livros em diferentes gêneros.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

O atributo open da tag <details> garante que o texto seja visível na página web por padrão.

Resumo

Neste laboratório, aprendemos como usar a tag HTML <details> para fornecer detalhes e informações adicionais sobre qualquer título ou texto. Também aprendemos como usar resumos personalizados e adicionar imagens na tag <details>.