AULA_6_-_DESENVOLVIMENTO_WEB_FULL_MVC pptx

Prévia do material em texto

Desenvolvimento Web Full MVC
O que é uma Tag HTML?
• Uma tag HTML é o componente básico de qualquer página web. Tags são usadas para marcar o 
início e o fim de um elemento no documento HTML. Elas dizem ao navegador como renderizar o 
conteúdo da página. Cada tag tem um nome específico que define seu propósito (por exemplo, 
para parágrafos, para imagens).
• A maioria das tags HTML tem uma tag de abertura () e uma tag de fechamento (), com o 
conteúdo inserido entre elas. Algumas tags, como , são auto-fechadas e não têm um conteúdo 
entre elas.
• Tags podem ser aninhadas dentro de outras tags, criando uma estrutura hierárquica que define a 
organização e o estilo do conteúdo na página.
O que é uma Tag HTML?
Atributos de uma Tag HTML
• Atributos são propriedades que fornecem informações adicionais sobre uma tag HTML. Eles 
modificam o comportamento ou a apresentação de um elemento. Cada atributo consiste em um 
nome seguido de um valor, separados por um sinal de igual (=). Esses atributos são sempre 
colocados dentro da tag de abertura.
• Eles permite personalizar os elementos HTML, adicionando funcionalidades específicas ou definindo 
parâmetros que afetam como o conteúdo é exibido ou interage com o usuário.
Atributos de uma Tag HTML
• 
○ src: Especifica o caminho da imagem.
○ alt: Fornece um texto alternativo para a imagem, usado se a imagem não carregar ou para 
acessibilidade.
○ width e height: Definem as dimensões da imagem em pixels.
Listas e Tabelas em HTML
• Compreender o uso e a importância de listas em HTML para organizar conteúdo de forma clara e semântica. Você 
aprenderá como utilizar listas ordenadas, não ordenadas e de descrição para diferentes contextos e tipos de dados.
• Explorar a criação e estilização de tabelas em HTML, incluindo a estrutura básica e técnicas avançadas, como a 
mesclagem de células, estilização com CSS, e práticas de acessibilidade.
• Aplicar os conhecimentos adquiridos através de exemplos práticos e questões de revisão, que permitirão a você 
consolidar os conceitos e desenvolver habilidades para criar estruturas HTML bem organizadas e acessíveis.
Introdução às Listas
• As listas são uma das ferramentas mais utilizadas para agrupar e organizar conteúdo relacionado em páginas web. 
Em HTML, podemos criar três tipos principais de listas: listas ordenadas, listas não ordenadas e listas de 
descrição.
• Cada tipo de lista tem um propósito específico e é usado em diferentes cenários. Entender como e quando usar 
cada tipo de lista é essencial para criar páginas web organizadas e fáceis de navegar.
Lista não ordenada
• Uma lista não ordenada é ideal para agrupar itens que não seguem uma ordem específica. Os itens são 
exibidos com marcadores (bullets), que podem ser personalizados usando CSS.
• Este tipo de lista é frequentemente utilizado para menus de navegação, listas de características de 
produtos, ou qualquer outra coleção de itens onde a ordem não é relevante.
 Item 1 
 Item 2 
 Item 3 
Lista ordenada
• Listas ordenadas são usadas quando a sequência dos itens é importante. Cada item é numerado 
automaticamente pelo navegador, refletindo sua posição na lista.
• Exemplos comuns incluem listas de etapas em um tutorial, rankings, ou qualquer conjunto de itens onde 
a ordem é crucial.
 Primeiro 
Segundo 
Terceiro
 
Lista de Descrição
• Listas de descrição são usadas para pares de termos e suas descrições. Este tipo de lista é útil para 
dicionários, glossários, FAQs (perguntas frequentes), e outros casos onde é necessário descrever ou 
definir itens.
• A estrutura de uma lista de descrição consiste em (lista de descrição), (termo de descrição) e 
 (detalhe da descrição).
 
HTML 
Linguagem de Marcação para a Web. 
CSS 
Linguagem de Estilos para a Web. 
Tabelas em HTML
• As tabelas são uma estrutura fundamental em HTML para organizar dados em um formato de grade, 
facilitando a leitura e a comparação de informações. Elas são usadas amplamente em relatórios, 
planilhas, e para exibir dados tabulares em páginas web.
• Ao longo desta seção, vamos explorar a criação e estilização de tabelas, desde a estrutura básica até 
técnicas mais avançadas, como a personalização com CSS e a criação de tabelas responsivas.
Estrutura Básica de uma Tabela
• A estrutura básica de uma tabela em HTML é composta por três elementos principais: (a tabela 
em si), (uma linha na tabela), (um cabeçalho de coluna), e (uma célula de dados).
• Cada linha de uma tabela é definida dentro de um elemento , com os cabeçalhos de coluna definidos 
em e os dados em .
 
 
 
 Cabeçalho 1
 Cabeçalho 2
 
 
 Dado 1
 Dado 2
 
 
 
Cabeçalhos de Tabela
• Os cabeçalhos de tabela, definidos pela tag , são usados para descrever o conteúdo de uma coluna 
ou linha. Eles são geralmente estilizados de forma diferente dos dados para se destacarem, como texto 
em negrito ou centralizado.
• Além de melhorar a legibilidade, os cabeçalhos de tabela também desempenham um papel importante 
na acessibilidade, ajudando leitores de tela a descrever o conteúdo da tabela para usuários com 
deficiência visual.
Células de Dados
• As células de dados, definidas pela tag , contêm os valores ou informações que compõem o corpo 
da tabela. Cada representa uma célula, e múltiplas células compõem as linhas de uma tabela.
• É possível estilizar essas células usando CSS para melhorar a apresentação visual da tabela, incluindo 
bordas, preenchimento e alinhamento.
Mesclagem de Células
• Em algumas situações, você pode precisar que uma célula se estenda por várias colunas ou linhas. Isso é 
feito usando os atributos colspan e rowspan.
• colspan permite que uma célula ocupe o espaço de várias colunas, enquanto rowspan permite que uma 
célula se estenda por várias linhas. Esses atributos são úteis em tabelas complexas, como calendários ou 
relatórios financeiros.
Mesclagem de Células
 
 
 
 Cabeçalho Unificado 1
 
 
 Dado 1
 Dado 2
 
 
 Dado 3
 Dado 4
 
 
 Dado 5
 
 
 
Tabelas com Bordas
 
 
 
 Nome
 Idade
 
 
 João
 30
 
 
 
• Adicionar bordas às tabelas é uma das formas mais simples de melhorar sua legibilidade e separação 
visual entre os dados. Isso pode ser feito diretamente com o atributo border, ou de forma mais avançada 
e estilizada usando CSS.
• Bordas ajudam a definir os limites de cada célula e podem ser ajustadas para diferentes espessuras e 
cores, de acordo com o design da sua página.
Formulários em HTML
• Formulários são uma parte essencial de qualquer site que interage com o usuário. Eles permitem a coleta de dados 
e a comunicação entre o usuário e o servidor. Nesta apresentação, vamos explorar os componentes de um 
formulário HTML, como criar diferentes tipos de campos de entrada e como estilizar esses formulários com CSS 
para melhorar a experiência do usuário.
O que é um Formulário?
• Um formulário em HTML é uma estrutura quepermite ao usuário inserir dados que serão enviados a um servidor 
para processamento. Elementos como caixas de texto, botões de rádio, checkboxes e menus dropdown são usados 
para capturar informações. Esses dados podem ser usados para login, registro, pesquisa, entre outros.
 
 
 
 
Estrutura Básica de um Formulário
• A tag é a base de qualquer formulário HTML. O método (method) de envio dos dados, pode ser GET ou 
POST.
 
 
 
 
Estrutura Básica de um Formulário
• O método GET cria uma seqüência de consulta(query string) e a acrescenta à URL do script no servidor que 
manipula a solicitação.
• O método POST cria um par nome/valor que são passados no corpo da mensagem de pedido HTTP.
Métodos de Envio
• O método GET anexa os dados do formulário à URL, tornando-os visíveis na barra de endereços, o que é útil para 
buscas. Já o método POST envia os dados no corpo da requisição, sendo mais seguro para informações sensíveis 
como senhas.
 
 
 
 
 
 
 
 
Elementos de Entrada: Input
• A tag é usada para criar campos onde o usuário pode inserir dados. O tipo de dado que pode ser inserido é 
definido pelo atributo type, que pode ser text, password, email, number, entre outros. Cada tipo define um 
comportamento específico, como máscaras de entrada ou validações automáticas.
 
 
 
 
 
Atributos Comuns: Input
• Os inputs possuem diversos atributos que podem ser usados para definir características como nomes únicos 
(name), dicas de preenchimento (placeholder), validações obrigatórias (required), entre outros. Esses atributos 
melhoram a acessibilidade e a usabilidade do formulário.
 
 
 
 
Elementos de Entrada: Label
• À tag label representa uma legenda para um item em uma interface de usuário. 
 
 Usuário
 
 Senha
 
 Email
 
 
Campos de Texto: 
• O é usado para capturar entradas de texto mais longas, permitindo ao usuário digitar múltiplas linhas 
de texto. Ele pode ser configurado com atributos como rows e cols para controlar o tamanho da caixa de texto.
 
 
 
Botões de Opção
• Botões de rádio permitem que o usuário selecione apenas uma opção entre várias. Todos os botões de rádio com o 
mesmo nome pertencem ao mesmo grupo, garantindo que apenas uma opção possa ser escolhida de cada vez.
 
 Masculino
 Feminino
 
Caixas de Seleção
• Caixas de seleção permitem a seleção de uma ou mais opções entre várias. Ao contrário dos botões de rádio, 
múltiplas caixas podem ser selecionadas ao mesmo tempo.
 
 Codigo
 Musica
 
Menus Dropdown
• Um menu dropdown, criado com , permite ao usuário escolher uma opção de uma lista suspensa. Cada 
opção é definida pela tag , e você pode configurar um item padrão que será selecionado por padrão.
 
 
 Brasil
 Estados Unidos
 India
 
 
Validação de Formulários
• O HTML5 oferece mecanismos de validação nativa, permitindo que você defina regras de validação diretamente 
nos elementos de entrada. Atributos como required, pattern, minlength e maxlength ajudam a garantir que os 
dados enviados estejam no formato correto antes de serem enviados ao servidor.
 
 
 
 
CSS Grid
• CSS Grid é um sistema de layout bidimensional do CSS que permite organizar elementos em linhas e colunas de 
maneira eficiente e flexível. Ele oferece um controle preciso sobre o posicionamento e o dimensionamento dos 
elementos dentro de um container, tornando mais fácil a criação de layouts complexos e responsivos.
○ Container e Itens:
■ O elemento que contém a grade é chamado de Grid Container (display: grid;).
■ Os elementos internos são chamados de Grid Items.
○ Linhas e Colunas:
■ Definidas com grid-template-rows e grid-template-columns.
■ Exemplo:
.grid-container {
 display: grid;
 grid-template-columns : 1fr 2fr;
 grid-template-rows : auto;
}
CSS Grid
 
 
 Formulário CSS Grid
 
 .form-container {
 display: grid;
 gap: 10px;
 max-width: 300px;
 margin: auto;
 }
 input, select, button {
 padding: 8px;
 }
 button {
 background: green;
 color: white;
 border: none;
 cursor: pointer;
 }
 
CSS Grid
 
 
 
 
 Selecione o gênero
 Masculino
 Feminino
 
 Enviar
 
Estilizando Formulários com CSS
• Para tornar os formulários mais atraentes e fáceis de usar, o CSS pode ser aplicado. Você pode estilizar cada 
elemento do formulário, desde a cor de fundo dos inputs até a aparência dos botões. Estilos responsivos também 
podem ser aplicados para garantir que o formulário funcione bem em dispositivos móveis.
Estilizando Botões
• Personalizar botões de envio ou ação torna-os mais visíveis e intuitivos para o usuário. A utilização de cores, 
sombras e efeitos de hover pode criar uma experiência de usuário mais agradável e interativa.
 
 
 input[type="text"], input[type="email"], textarea {
 width: 100%;padding: 10px;
 margin: 5px 0;
 border: 1px solid #ccc;
 border-radius: 4px;
 }
 button {
 background-color : #4CAF50;
 color: white;
 padding: 10px 20px;
 border-radius: 4px;
 }
 
 
 
 
 
 
 Enviar
 
Estilizando Formulários Completos
• A estilização do formulário como um todo pode incluir a adição de espaçamento entre os elementos, cores de 
fundo para destacar as áreas do formulário e alinhamento consistente dos elementos. Isso cria uma interface 
organizada e fácil de usar.
 
 
 form {
 background-color : #f2f2f2;
 padding: 20px;
 border-radius : 5px;
 max-width: 500px;
 }
 label {
 margin-bottom : 10px;
 font-weight : bold;
 }
 input[type="text"], input[type="email"] {
 width: 100%;
 padding: 12px;
 border: 1px solid #ccc;
 border-radius : 4px;
 }
 
 
 
 
 Nome:
 
 Email:
 
 Enviar
 
 
Estilizando Placeholders e Erro
• Os placeholders fornecem dicas úteis dentro dos campos de entrada, enquanto as mensagens de erro ajudam os 
usuários a corrigir informações incorretas. Estilizá-los pode melhorar significativamente a usabilidade do 
formulário.
 
 
 input::placeholder {
 color: #888;
 font-style: italic;
 }
 .error {
 color: red;
 font-size: 12px;
 display: none;
 }
 input:invalid + .error {
 display: block;
 }
 
 
 
 
 
 Por favor, insira seu nome. 
 Enviar
 
 
Estilizando Seleção e Checkboxes
• Os placeholders fornecem dicas úteis dentro dos campos de entrada, enquanto as mensagens de erro ajudam os 
usuários a corrigir informações incorretas. Estilizá-los pode melhorar significativamente a usabilidade do 
formulário.
 
 
 select, input[type="checkbox"] {
 margin: 10px 0;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
 }
 label {
 display: block;
 margin-bottom: 5px;
 }
 
 
 
 Gênero:
 Masculino
 Feminino
 
 Inscreva-se na nossa newsletter 
 
Estilizando o Formulário com CSS Grid
• O CSS Grid facilita a organização de elementos do formulário em colunas e linhas, proporcionando uma estrutura 
limpa e organizada. Aqui está um exemplo básico que divide os campos do formulário em duas colunas.
 
 
 .simple-grid-form {
 display: grid;
 grid-template-columns : 1fr 1fr;
 gap: 10px;
 }
 .simple-grid-form button {
 grid-column : span 2;
 padding: 10px;
 background-color : #4CAF50;
 color: white;
 border: none;
 border-radius : 4px;
 cursor: pointer;
 }
 .simple-grid-form button:hover {
 background-color : #45a049;
 }
 
 
 
 
 Nome:
 
 Sobrenome: 
 
 Enviar
 
 
Javascript
• JavaScript é uma linguagem de programação essencial para o desenvolvimento web moderno. Ele permite 
adicionar interatividade e funcionalidades dinâmicas às páginas web, tornando-as mais atraentes e responsivas 
para os usuários. Com JavaScript, é possível criar desde simples efeitos de animação até aplicações web 
complexas.
• Imagine um formulário de contato onde, ao preencher os campos e clicar no botão "Enviar", o JavaScript valida os 
dados inseridos e exibe uma mensagem de sucesso sem recarregar a página.
O que é JavaScript?
• JavaScript é uma linguagem de programação interpretada, orientada a objetos e de alto nível. Ele é executado no 
navegador do usuário, permitindo que desenvolvedores criem interações dinâmicas sem a necessidade de 
recarregar a página. Além disso, JavaScript é utilizado no lado do servidor com tecnologias como Node.js, 
expandindo ainda mais suas capacidades.
• Com JavaScript, você pode criar um botão que, ao ser clicado, muda a cor de fundo da página. Isso é feito 
manipulando o DOM (Document Object Model) para alterar estilos CSS em tempo real.
 Exemplo de JavaScript 
 
 let quantidade = 3;
 let precoUnitario = 20;
 let total = quantidade * precoUnitario;
 console.log('Preço Total: R$ ' + total);
 
O que é JavaScript?
 Exemplo de JavaScript 
 Mudar Cor de Fundo 
 
 function mudarCor() {
 document.body.style.backgroundColor = 'lightblue';
 }
 
Inserindo JavaScript
Há três maneiras principais de inserir JavaScript em uma página HTML:
1. Inline: O código é adicionado diretamente em um elemento HTML.
2. Interno: O código é colocado dentro de uma tag no próprio arquivo HTML.
3. Externo: O código é armazenado em um arquivo separado com extensão .js.
Exemplo: Inline: Clique aqui 
Interno:
 
 
 alert("Ola mundo");
 
 
Externo: 
Inserção Inline
● A inserção inline é útil para interações simples, onde o código JavaScript é colocado diretamente dentro de um 
atributo de um elemento HTML. Embora prática, essa abordagem é menos recomendada para projetos maiores, 
pois pode dificultar a manutenção.
 
 Clique aqui
 
Inserção Interna
● O código JavaScript pode ser inserido dentro de uma tag diretamente no arquivo HTML. Isso é útil 
quando você deseja manter o código JavaScript próximo ao HTML que ele manipula, mas ainda separado dos 
elementos HTML.
 
 
 function mostrarMensagem () {
 alert('MensagemInterna' );
 }
 
 Clique aqui
 
Inserção Externa
● A inserção externa envolve a criação de um arquivo .js separado que contém o código JavaScript. Esse arquivo é 
então referenciado dentro do arquivo HTML. Esta abordagem é a mais recomendada para projetos maiores, pois 
facilita a reutilização do código e a manutenção.
 
 
 Clique aqui
 
Estrutura Básica
● Um script básico em JavaScript pode incluir variáveis, operadores e comentários. As variáveis armazenam dados, 
os operadores realizam cálculos ou comparações, e os comentários são usados para explicar o código sem afetar 
sua execução.
 
 
 
// Esta é uma variável que armazena uma mensagem
let saudacao = 'Olá, Mundo!';
// Este é um operador que exibe a mensagem no console
console.log(saudacao);
Manipulação de Elementos HTM
● O JavaScript é fundamental para a manipulação de elementos HTML. Com ele, você pode modificar o texto, 
estilo e outros atributos de qualquer elemento na página, respondendo a eventos do usuário como cliques ou teclas 
pressionadas.
 
 Clique aqui
 Texto original 
 
Variáveis em JavaScript
● Variáveis são usadas para armazenar dados temporários que podem ser manipulados ao longo da execução do 
script. Em JavaScript, você pode declarar variáveis usando var, let, ou const.
 
 
 let nome = 'Maria'; // Pode ser alterada
 const idade = 25; // Constante, não pode ser alterada
 
 
Tipos de Dados
● Os tipos de dados primitivos em JavaScript incluem string (texto), number (números), e boolean (verdadeiro ou 
falso). Esses tipos básicos são usados para armazenar informações simples.
 
 
 let ativo = true; // Booleano
 let preco = 19.99; // Número
 let produto = 'Camiseta'; // String
 
 
Manipulação do DOM
● DOM (Document Object Model) é a estrutura de objetos que representa a estrutura HTML de uma página. Com 
JavaScript, você pode acessar e modificar essa estrutura para alterar o conteúdo, o estilo, ou adicionar novos 
elementos dinamicamente.
 
 texto
 
 document.getElementById ('demo').style.color = 'red';
 
 
Manipulação do DOM
● getElementById: Seleciona um único elemento com base no seu id. É o método mais específico.
● getElementsByClassName: Seleciona todos os elementos que possuem uma determinada classe. Retorna uma 
coleção de elementos.
● querySelector: Seleciona o primeiro elemento que corresponde a um seletor CSS (seja por id, classe, tag, etc.). É 
o mais flexível e permite seleções mais complexas.
getElementById
● Este método retorna um único elemento cujo valor do atributo id corresponda ao valor especificado. É uma 
maneira eficiente de acessar um elemento específico, já que o id de um elemento é único dentro de um documento 
HTML.
 
 Este é um parágrafo. 
 
 let elemento = document.getElementById ('paragrafo1');
 console.log(elemento.innerText); // Exibe: Este é um parágrafo.
 
 
getElementsByClassName
● Este método retorna um único elemento cujo valor do atributo id corresponda ao valor especificado. É uma 
maneira eficiente de acessar um elemento específico, já que o id de um elemento é único dentro de um documento 
HTML.
 
 Este é o primeiro parágrafo. 
 Este é o segundo parágrafo. 
 
 let elementos = document.getElementsByClassName ('texto');
 console.log(elementos[0].innerText); // Exibe: Este é o primeiro parágrafo.
 console.log(elementos[1].innerText); // Exibe: Este é o segundo parágrafo.
 
 
querySelector
● Este método retorna o primeiro elemento que corresponde a um seletor CSS especificado. Ele é muito flexível, 
permitindo que você selecione elementos por id, classe, tag, ou qualquer outro seletor CSS válido.
 
 Primeiro parágrafo. 
 Segundo parágrafo. 
 
 let elemento = document.querySelector('#paragrafo1'); // Seleciona pelo id
 console.log(elemento.innerText); // Exibe: Primeiro parágrafo.
 let primeiroTexto = document.querySelector('.texto'); // Seleciona pelo nome da classe
 console.log(primeiroTexto.innerText); // Exibe: Primeiro parágrafo.
 
 
Eventos do JavaScript
● Eventos são ações ou ocorrências que acontecem no navegador e que podem ser manipuladas com JavaScript, 
como cliques, pressionar teclas, ou mudanças em um campo de texto.
 
 Clique aqui
 
 document.getElementById ('botao').addEventListener ('click', function() {
 alert('Botao clicado!' );
 });
 
 
Manipulação Avançada do DOM: Alterando Estilos Dinamicamente
● Vamos explorar como alterar dinamicamente múltiplos estilos de um elemento HTML usando JavaScript.
 
 
 Alterando Estilos 
 Este elemento terá seus estilos alterados. 
 
 let elemento = document.getElementById ('exemploElemento' );
 elemento.style.backgroundColor = 'lightblue'; // Altera a cor de fundo
 elemento.style.padding = '20px'; // Adiciona espaçamento interno
 elemento.style.borderRadius = '10px'; // Arredonda as bordas
 elemento.style.fontFamily = 'Arial, sans-serif' ; // Altera a fonte
 elemento.style.color = 'darkblue'; // Altera a cor do texto
 
Manipulação do DOM: Trabalhando com Classes
● Como adicionar e remover classes de elementos HTML usando JavaScript.
 
 
 Trabalhando com Classes 
 Este é um div. 
 Adicionar Classe 
 Remover Classe 
 
 function adicionarClasse () {
 document.getElementById ('meuDiv').classList.add('ativo');
 }
 function removerClasse () {
 document.getElementById ('meuDiv').classList.remove('ativo');
 }
 
 
 .caixa {
 width: 200px;
 height: 200px;
 background-color : lightgray;
 }
 .ativo {
 background-color : lightgreen ;
 border: 2px solid green;
 }
 
Alternando Classes com JavaScript
● Um exemplo onde um botão alterna entre adicionar e remover uma classe.
 
 
 Alternando Classes 
class="caixa">Clique no botão para alterar a classe. 
 Alternar Classe 
 
 function alternarClasse () {
 let elemento = document.getElementById ('caixa');
 elemento.classList.toggle('ativo');
 }
 
 
 .caixa {
 width: 200px;
 height: 200px;
 background-color : lightgray;
 }
 .ativo {
 background-color : lightgreen ;
 border: 2px solid green;
 }
 
Manipulação do DOM: Trabalhando com Atributos
● Alterando atributos HTML, como o src de uma imagem ou href de um link, usando JavaScript.
 
 
 Trabalhando com Atributos 
 
 Alterar Imagem 
 
 function alterarImagem() {
 let img = document.getElementById ('minhaImagem');
 img.src = 'imagem2.jpg';
 img.alt = 'Imagem alterada' ;
 }
 
Manipulando Atributos de Links
● Modificando o destino de um link (href) ao clicar em um botão.
 
 
 Manipulando Atributos de Links 
 Visitar Site
 Alterar Link
 
 function alterarLink() {
 let link = document.getElementById ('meuLink');
 link.href = 'https://outroexemplo.com' ;
 link.innerText = 'Visitar Outro Site' ;
 }
 
Interatividade com Formulários: Validação Simples
● Criando uma validação básica de formulários com JavaScript.
 
 
 Validação Simples de Formulários 
 
 Nome: 
 
 
 
 function validarFormulario () {
 let nome = document.getElementById ('nome').value;
 if (nome === "") {
 alert("O campo nome deve ser preenchido!" );
 return false;
 }
 return true;
 }
 
Atividade 1
• Crie um formulário de cadastro simples com os seguintes campos: Nome, Sobrenome, Email e Senha. Utilize CSS 
Grid para organizar os campos em duas colunas e estilize o botão de envio para que tenha uma cor de fundo 
diferente ao passar o mouse sobre ele. Certifique-se de que o formulário tenha uma aparência agradável e esteja 
alinhado ao centro da página.
• Requisitos:
○ Use CSS Grid para organizar os campos em duas colunas.
○ Estilize os campos de entrada e o botão de envio conforme mostrado nos slides.
○ O formulário deve estar centralizado na página.
Atividade 2
• Desenvolva um formulário de contato que contenha os seguintes campos: Nome, Email, Assunto, e uma área de 
texto para a mensagem. Estilize o formulário de forma que o placeholder nos campos de entrada seja de uma cor 
cinza clara e que as mensagens de erro sejam exibidas em vermelho abaixo dos campos inválidos.
• Requisitos:
○ Utilize placeholders para fornecer dicas nos campos de entrada.
○ Estilize as mensagens de erro para que sejam exibidas em vermelho.
○ O formulário deve ser responsivo, ajustando-se bem em telas menores.
Atividade
1. Crie uma página HTML que contenha um parágrafo com o texto "Este parágrafo mudará de estilo ao clicar no 
botão." Adicione um botão que, ao ser clicado, altere o estilo do parágrafo para um fundo amarelo, texto na cor 
vermelha e fonte aumentada para 24px.
Dica: Utilize getElementById para selecionar o parágrafo e style para modificar as propriedades CSS.
2. Crie uma página HTML com um div contendo o texto "Clique no botão para alterar a classe." Crie um botão que, 
ao ser clicado, alterne a classe do div entre "ativo" e "inativo", mudando o estilo de acordo com a classe aplicada.
Dica: Utilize classList.toggle para alternar as classes. Defina as classes "ativo" e "inativo" no CSS com 
diferentes estilos de cor de fundo e borda.
3. Em uma página HTML, insira uma imagem com um atributo src apontando para "imagem1.jpg" e um atributo alt 
como "Imagem inicial". Crie um botão que, ao ser clicado, altere o src da imagem para "imagem2.jpg" e o alt para 
"Imagem alterada".
Dica: Utilize getElementById para acessar a imagem e modifique os atributos src e alt diretamente.
Atividade
4. Crie um formulário HTML com um campo de texto para inserir o nome do usuário. Antes de submeter o formulário, 
verifique se o campo "Nome" está preenchido. Caso contrário, exiba um alerta para o usuário e impeça o envio do 
formulário.
Dica: Utilize o evento onsubmit do formulário para chamar uma função de validação que retorne false se o campo 
estiver vazio.