Dominando Listas de Definição HTML

Introdução

Neste laboratório, você aprenderá como usar a tag HTML <dfn> para criar uma lista de definição que destaca os termos que estão sendo definidos. A tag <dfn> é comumente usada em tutoriais e websites educacionais para fornecer uma experiência de usuário interativa e informativa.

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.

Configurando o arquivo HTML

Crie um novo arquivo chamado index.html e abra-o no seu editor de código preferido.
Adicione a estrutura HTML básica ao seu arquivo.

<!doctype html>
<html>
  <head>
    <title>HTML Definition List</title>
  </head>
  <body></body>
</html>

Criando a lista de definições

Dentro do elemento <body>, crie um elemento <dl> para conter sua lista de definição.
Dentro do elemento <dl>, crie um conjunto de pares de termo e definição usando os elementos <dt> e <dd>, respectivamente.

<body>
  <dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
      HyperText Markup Language é a linguagem padrão para criar páginas web.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
      Cascading Style Sheets é usado para descrever a apresentação de um
      documento escrito em linguagem de marcação.
    </dd>
    <dt><dfn>JavaScript</dfn></dt>
    <dd>
      Uma linguagem de script usada para criar e controlar conteúdo dinâmico de
      websites.
    </dd>
  </dl>
</body>

Neste exemplo, estamos usando a tag <dfn> para destacar os termos e fazê-los se sobressair.

Para adicionar uma tooltip a cada termo, inclua um atributo title dentro dos elementos <dfn>.

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>HyperText Markup Language é a linguagem padrão para criar páginas web.</dd>

O atributo title criará uma tooltip que exibe o termo completo quando o usuário passa o mouse sobre ele.

Personalizando o estilo CSS

Por padrão, a tag <dfn> tem um estilo de fonte itálico. No entanto, você pode personalizar os estilos usando CSS.
Adicione os seguintes estilos CSS ao seu arquivo.

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

Os estilos acima definirão o font-style de <dfn> para itálico e a font-color para azul. O font-weight de <dt> também é alterado para negrito.

Resumo

Neste laboratório, você aprendeu como usar a tag HTML <dfn> para criar uma lista de definições com termos destacados e tooltips (dicas de ferramentas). Ao usar a tag <dfn>, você pode tornar seu conteúdo educacional mais interativo e visualmente atraente para o usuário.

Termo de Definição HTML

Introdução

Configurando o arquivo HTML

Criando a lista de definições

Adicionando uma Tooltip

Personalizando o estilo CSS

Resumo