Os elementos HTML details e summary permitem que você crie uma interface interativa no estilo sanfona (“accordion“) que pode expandir ou recolher seu conteúdo, mostrando ou ocultando parte do texto ou mesmo outros elementos HTML.

Isso pode ser útil para exibir muitas informações em uma página sem sobrecarregar o usuário com muito texto de uma só vez.

O elemento details (“detalhes”) cria um contêiner para o conteúdo que você deseja expandir ou recolher. Já o elemento summary (“resumo”) é usado para criar o cabeçalho clicável para esse contêiner.

Quando o usuário clica no elemento de resumo, o conteúdo dentro do elemento details será expandido ou recolhido.

Vejamos um exemplo de como usar esses elementos em HTML:

<details>
  <summary>Clique aqui para expandir o conteúdo</summary>
    <p>Conteúdo que expandido ou colapsado ao clicar no texto do elemento summary.</p>
</details>

No exemplo acima, o elemento summary é usado como um cabeçalho clicável e o elemento de parágrafo dentro do elemento details é o conteúdo que será expandido ou recolhido:

Quando o usuário clica no texto do elemento summary, o elemento de parágrafo alterna entre ser exibido ou ocultado:

Podemos adicionar mais conteúdo dentro do elemento details, incluindo outros elementos HTML como cabeçalhos, listas ou imagens. Vejamos um exemplo de uso mais complexo desses elementos:

<details>
  <summary>Exibir lista de livros</summary>
    <h2>Livros</h2>
    <ul>
      <li>Cosmos</li>
      <li>Contato</li>
      <li>Pálido Ponto Azul</li>
      <li>Murmúrios da Terra</li>
    </ul>
    <img src="http://www.bosontreinamentos.com.br/wp-content/uploads/2023/02/cosmos-livro.jpg" alt="Imagem de exemplo">
</details>

Neste exemplo, há um cabeçalho de seção, uma lista e uma imagem dentro do elemento details. Quando o usuário clicar no elemento summary, todo esse conteúdo será expandido ou recolhido. A imagem a seguir mostra o conteúdo desse exemplo expandido:

Também podemos empregar CSS para estilizar os elementos details e summary, como por exemplo para alterar o tamanho da fonte, cor do texto ou cor de fundo. Abaixo temos um exemplo de como estilizar ambos os elementos:

<style>
  details {
    width: 250px;
    height: 250px;
  }
  summary {
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
  }
</style>

Neste exemplo, o elemento summary terá uma cor de fundo cinza e cantos arredondados, e o elemento details tem seu tamanho delimitado em 250 pixels:

No geral, os elementos details e summary são uma forma simples e eficaz de criar um bloco colapsável no estilo sanfona em HTML. Eles podem ajudar a tornar o site mais fácil de usar e organizado, permitindo que os usuários se concentrem em um conteúdo específico por vez.

O post Mostrar e ocultar conteúdo com os elementos details e summary em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

Nesta lição introduzimos a criação de tabelas em HTML. Usamos as tabelas para exibir dados tabulares em uma página, com por exemplo dados de uma planilha. Não devemos jamais usar tabelas para criar a estrutura da página HTML – o que era muito comum antigamente. Para isso, existem elementos muito mais apropriados, além do emprego de CSS (que estudaremos ao longo do curso).

Elementos da tabela HTML

• Uma tabela em HTML é definida com o emprego do elemento <table>.
• Cada linha da tabela é definida com a tag <tr>.
• Um cabeçalho da tabela é definido com a tag <th>. Por padrão, os cabeçalhos das tabelas aparecem em negrito e com o conteúdo centralizado.
• Um dado de tabela em uma coluna (dentro da célula) é definido com a tag <td>.

Estrutura básica de uma tabela HTML

A seguir temos a estrutura de elementos básicos que compõem uma tabela em HTML:

Exemplo de tabela HTML

<table>
  <tr>
    <th>Nome</th>
    <th>Sobrenome</th> 
    <th>Cidade</th>
  </tr>
  <tr>
    <td>Fábio</td>
    <td>dos Reis</td> 
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Paula</td> 
    <td>Rio de Janeiro</td>
  </tr>
  <tr>
    <td>Renata</td>
    <td>Mirelli</td> 
    <td>São Paulo</td>
  </tr>
</table>

Resultado:

Ainda há muito o que se trabalhar nesta tabela, porém sua estrutura básica já está presente – a organização dos dados em linhas e colunas, incluindo um cabeçalho na tabela.

 Veremos mais opções de estrutura e formatação da tabela na próxima lição.

O post Como criar Tabelas em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

Neste tutorial vamos abordar o conceito de Elementos em HTML, assim como introduzir as tags e seus atributos em HTML.

Tags

Tags são símbolos codificados que separam uma parte de conteúdo da outra, além de informar ao navegador com qual tipo de conteúdo ele está lidando.

Os navegadores Web interpretam as tags dentro do documento html e exibem a página de acordo com os tipos utilizados.

Em HTML as tags são envolvidas pelos símbolos < e > para distingui-las do texto comum do documento. Por exemplo, temos a seguir uma tag típica que determina o título de uma página, o qual aparece na barra de título do navegador:

<title>

Em HTML as tags não são case-sensitive, ou seja, não existe a diferenciação entre letras maiúsculas e minúsculas. Porém, é recomendável que se siga um estilo comum ao escrever tags em um documento, para efeitos de clareza de código, como por exemplo sempre escrever as tags em letras minúsculas – que é o padrão que adoto nestes tutoriais.

A maioria das tags vem em pares: uma tag inicia um item de conteúdo da página (tag de início), e outra tag marca o fim desse conteúdo (tag de fechamento). No exemplo anterior, a tag de fechamento é a seguinte:

</title>

O caractere / define a tag de fechamento. Desta forma, poderíamos definir o título de uma página web assim:

<title>Bóson Treinamentos em Tecnologia</title>

Elementos

O conjunto apresentado na seção anterior compõe um Elemento, que é o bloco básico de construção de documentos html.

Um elemento é composto pelas tags de início e fim, mais seu conteúdo, que é o texto contido entre as tags.

Alguns elementos não necessitam da tag de fechamento, e não possuem conteúdo, como por exemplo a tag <br>, que marca uma quebra de linha em um documento. Esse elemento também pode ser representado como <br />, sendo essa representação opcional atualmente. Damos a esse tipo de elemento o nome de Elemento Vazio.

Atributos

A tag de início de um elemento html pode possuir atributos que fornecem mais informações sobre o elemento, como propriedades específicas ou formatação a ser aplicada sobre ele.

Um atributo consiste em um nome de atributo seguido de um valor de atributo, ligados por um sinal de igual (=), como no exemplo:

<th class="cabeçalho">Produto</th>

Neste exemplo a tag <th>, que define um cabeçalho de uma tabela, possui um atributo class cujo valor é igual a “cabeçalho“, o que permite a aplicação de estilos de formatação diferenciados a esse elemento.

O valor de um atributo deve, preferencialmente, ser declarado entre aspas, mesmo que alguns atributos não o exijam.

Um elemento pode ter mais de um atributo, ou pode simplesmente não usar atributo algum.

A partir do próximo tutorial vamos iniciar o estudo dos elementos html individuais, incluindo seus principais atributos.

O post Elementos, Tags e Atributos em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.