Curso
HTML 5 Data Attributes: Armazenando informações em elementos HTML
Neste curso vamos aprender a utilizar os Data Attributes, um recurso do HTML 5 que permite definir atributos customizados nas tags. Esses atributos, cujo nome inicia com “data-” podem ser usados para diversas finalidades. Neste curso aprenderemos a usá-los no HTML e como acessá-los via CSS e jQuery.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
8 horas
Curso de HTML5 Data Attributes (8 aulas)
Aula 1 - Introdução e apresentação do projeto
Neste vídeo apresentaremos o projeto que será desenvolvido para manipular os data attributes do HTML5. Durante o curso veremos tanto a definição dos atributos no HTML, quanto a sua utilização via CSS e jQuery.
Aula 2 - Conhecendo a sintaxe dos data attributes
Neste vídeo veremos como são criados os data attributes em um documento HTML. Veremos aqui a sua sintaxe e como definir o seu nome e o seu valor.
Aula 3 - Estrutura do HTML
Neste vídeo analisaremos a estrutura da página HTML do exemplo que será desenvolvido. Nessa página adicionaremos alguns labels que receberão os data attributes via jQuery posteriormente.
Aula 4 - Estilizando a página com CSS
Neste vídeo veremos a folha de estilos CSS que será utilizada para definir a formatação visual da página HTML que vimos anteriormente.
Aula 5 - Inserindo valor nos data attributes
Neste vídeo veremos como adicionar os data attributes às tags HTML via jQuery e como atribuir a eles os valores definidos de acordo com nosso cálculo de bônus.
Aula 6 - Capturando o valor dos data attributes
Neste vídeo veremos como obter, via jQuery, o valor dos data attributes já adicionados às tags HTML. Em seguida enviaremos uma requisição Ajax com esses valores.
Aula 7 - Limpando o campo para novos cálculos
Neste vídeo veremos como limpar o label referente ao bônus para que o usuário possa enviar novas requisições.
Aula 8 - Conclusões
Finalizando nosso curso, veremos neste vídeo um resumo do conteúdo que foi aprendido ao longo dos vídeos. Aqui aprendemos a adicionar data attributes no HTML5 e a utilizar esses atributos no CSS e no jQuery.
Veja outros cursos de HTML e CSS
CSS: Flexbox
CSS: Position relative e absolute
CSS: Position fixed