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.htmle 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.htmle 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.
Adicionando uma Tooltip
- Para adicionar uma tooltip a cada termo, inclua um atributo
titledentro 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.
