Conteúdo do Curso

HTML Definitivo

1. Compreendendo o Desenvolvimento Web

Bem-vindo ao HTML e Desenvolvimento Web O Que É a Internet?Como a Internet Funciona?Compreendendo Como os Sites Funcionam Explicação Sobre Desenvolvimento Frontend e Backend

2. Tags e Atributos HTML

Compreensão das Tags HTML Trabalhando com Atributos HTML Compreensão de Tags Pareadas e Únicas em HTML Marcação e Formatação de Texto em HTML Desafio: Crie o Parágrafo da Sua Primeira Página Web Desafio: Construir uma Página Web de Apresentação Pessoal Desafio: Criar uma Página Web de Exibição de Filmes Usando Links e Botões em HTML Desafio: Criar Links para Sites Populares Validando Seu Código HTML para Melhores Práticas

3. Estrutura do Documento HTML

Os Segredos por Trás de Páginas Web Bem Estruturadas Compreensão da Estrutura do Documento HTML O Papel do Head do Documento Gerenciamento do Fluxo e Layout do Documento Desafio: Estruturar Corretamente um Documento HTML Usando Ferramentas de Desenvolvedor para Inspeção e Depuração de HTML

4. Trabalhando com Mídia e Tabelas

Adicionando Imagens em HTML Desafio: Trabalhar com Imagens Trabalhando com Imagens Clicáveis, Legendas e Otimização Compreendendo Gráficos Vetoriais e Rasterizados Incorporação de Áudio e Vídeo para Conteúdo Multimídia Avançado Desafio: Incorporar Áudio e Vídeo em HTML Criando e Estruturando Tabelas em HTML Desafio: Criar uma Tabela HTML Funcional

5. Formulários HTML e Entrada do Usuário

Introdução aos Formulários HTML Fundamentos da Criação de Formulários em HTML Usando Rótulos para Melhor Acessibilidade de Formulários Aperfeiçoando Formulários com Atributos de Entrada Explorando Diferentes Tipos de Entrada em HTML Desafio: Criar Formulário com Campos e Rótulos Trabalhando com o Elemento Textarea para Entrada Multilinha Usando o Elemento Select para Menus Suspensos Usando o Elemento Datalist para Sugestões de Entrada Predefinidas Agrupamento de Elementos de Formulário para Melhor Estrutura

Desafio: Criar Formulário com Campos e Rótulos

Objetivo

Aprimorar a experiência do usuário no site criando um formulário interativo que exija entradas para nome, e-mail e senha, cada um com seus respectivos rótulos.

Tarefa

Incorporar um formulário intuitivo ao seu site, promovendo maior engajamento e interação do usuário. Sua tarefa é:

Para o campo de nome: criar um campo de texto para coletar os nomes dos usuários. Utilize os atributos corretos para garantir uma experiência fluida.
1. Definir o type apropriado para o campo de texto;
2. Definir o placeholder como John;
3. Garantir que o campo esteja em foco por padrão.
Para o campo de e-mail: criar um campo de e-mail para coletar os endereços de e-mail dos usuários. Assegure a precisão dos dados utilizando os atributos adequados.
1. Definir o type correto para o campo de e-mail;
2. Definir o placeholder como example@gmail.com;
3. Marcar o campo como obrigatório.
Para o campo de senha: criar um campo de senha seguro para proteger os dados do usuário. Utilize os atributos apropriados para reforçar a segurança dos dados.
1. Definir o type correto para o campo de senha;
2. Tornar o campo obrigatório.

index.html

index.css

autofocus: foca automaticamente no campo de entrada ao carregar a página.
required: torna o campo de entrada obrigatório, impedindo o envio do formulário se estiver vazio.
placeholder: fornece uma dica ou texto de exemplo para o campo de entrada.
for e id: associa um rótulo a um campo de entrada para melhorar a acessibilidade.
type: especifica o tipo de dado esperado no campo de entrada (por exemplo, texto, email, senha).

index.html

index.css

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6