Embedded Files
Prática com Novos Temas: Variáveis + Entrada/Saída de Dados 🙆
📍 Disciplina: Programação para Web
📁 Organização: Pasta aula 11 na Área de Trabalho
🧱 Estrutura: Um arquivo .html para cada exercício
🎯 Objetivos da aula:
Praticar a criação e manipulação de variáveis.
Utilizar prompt() para entrada de dados e document.write() para exibição.
Trabalhar com contextos diversos e mais interessantes para os alunos.
Aplicar CSS básico com comentários explicativos.
✅ Exemplo Resolvido: Exercício - Combustível de Viagem
📄 Arquivo: exemplo.html
🎯 Tema: Calcular quantos quilômetros é possível rodar com combustível.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo - Viagem</title>
<style>
body {
background-color: beige;
text-align: center;
}
h1 {
color: blue;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Viagem com Combustível</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1OBPh-qxH-7PtsHCU1epTfu1qD39svcnB3g&s" alt="gasolina" width="300">
<script>
let litros = prompt("Quantos litros de combustível você tem?");
let consumo = prompt("Quantos km seu carro faz por litro?");
let distancia = litros * consumo;
document.write("<p>Você pode percorrer " + distancia + " km com o combustível disponível.</p>");
</script>
</body>
</html>
Hora do exercício! 🏋️🔥
✏️ Exercícios Propostos (com comentários)
📄 Exercício 1 — Maratona de Filmes
📁 exercicio1.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 1</title>
<style>
body {
/* fundo cinza claro, texto centralizado */
}
h1 {
/* cor laranja escuro, fonte grande */
}
p {
/* espaçamento entre linhas, cor cinza escuro */
}
</style>
</head>
<body>
<h1>Exercício 1 - Maratona de Filmes</h1>
<script>
// Peça ao usuário:
// - a duração média de um filme em minutos
// - a quantidade de filmes que ele vai assistir
// Calcule o tempo total da maratona
// Mostre o resultado na tela com document.write()
</script>
</body>
</html>
📄 Exercício 2 — Consumo de Água por Dia
📁 exercicio2.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 2</title>
<style>
body {
/* fundo azul claro, fonte Arial, texto centralizado */
}
h1 {
/* cor azul escuro, tamanho médio */
}
p {
/* texto preto, tamanho padrão */
}
</style>
</head>
<body>
<h1>Exercício 2 - Hidratação Diária</h1>
<script>
// Peça ao usuário:
// - quantos copos de água ele bebe por dia
// - quantos ml tem cada copo
// Calcule o total de mililitros consumidos por dia
// Mostre o total na tela
</script>
</body>
</html>
📄 Exercício 3 — Pontuação em um Jogo
📁 exercicio3.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 3</title>
<style>
body {
/* fundo escuro, texto branco, alinhado ao centro */
}
h1 {
/* cor verde limão, fonte destacada */
}
p {
/* cor branca, espaçamento de parágrafos */
}
</style>
</head>
<body>
<h1>Exercício 3 - Pontuação Final</h1>
<script>
// Peça ao usuário:
// - quantas moedas ele coletou
// - quantos pontos cada moeda vale
// Calcule a pontuação total
// Exiba a pontuação final com document.write()
</script>
</body>
</html>
📄 Exercício 4 — Cálculo de Refeição por Semana
📁 exercicio4.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 4</title>
<style>
body {
/* fundo amarelo claro, fonte limpa */
}
h1 {
/* cor vermelha escuro, centralizado */
}
p {
/* texto preto, tamanho 15px */
}
</style>
</head>
<body>
<h1>Exercício 4 - Gasto com Alimentação</h1>
<script>
// Peça ao usuário:
// - quantas refeições ele faz fora de casa por semana
// - quanto ele gasta em média por refeição
// Calcule o total gasto na semana
// Exiba o valor total com document.write()
</script>
</body>
</html>
📄 Exercício 5 — Tempo de Uso de Redes Sociais
📁 exercicio5.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 5</title>
<style>
body {
/* fundo branco, texto alinhado ao centro */
}
h1 {
/* cor roxa, fonte em caixa alta */
}
p {
/* tamanho da fonte 14px, cor cinza escuro */
}
</style>
</head>
<body>
<h1>Exercício 5 - Redes Sociais</h1>
<script>
// Peça ao usuário:
// - quantas horas ele passa nas redes sociais por dia
// - quantos dias por semana ele usa
// Calcule o tempo total por semana
// Mostre o total de horas na tela
</script>
</body>
</html>
📝 Instruções para os alunos:
Crie uma pasta chamada aula 11 dentro da sua pasta com o nome completo.
Salve cada exercício como exemplo.html, exercicio1.html, exercicio2.html...
Edite apenas dentro da tag <script>, conforme os comentários.
Rode os arquivos no navegador para ver o resultado.
Desafio! 👺
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Desafio - Horas de Sono</title>
<style>
body {
/* fundo escuro, fonte sem serifa clara, texto centralizado */
}
h1 {
/* cor azul clara, sombra de texto leve, fonte grande */
}
p {
/* fundo azul escuro, cor branca, padding interno, borda arredondada */
}
</style>
</head>
<body>
<h1>Desafio - Meu Sono Semanal</h1>
<script>
// Peça ao usuário:
// - Quantas horas ele dorme por noite
// - Quantos dias por semana ele dorme essa média
// Calcule o total de horas dormidas na semana
// Mostre os dados com document.write():
// - Quantidade de horas por noite
// - Quantidade de dias
// - Total de horas por semana
</script>
</body>
</html>
💡 Dica para os alunos:
Testem diferentes cores e sombras no CSS para deixar o visual mais “tranquilo”, como se fosse um app de sono. Usem padding, border-radius e testem font-size.
Google Sites
Report abuse