Olá, turma! Na nossa última aula (06/07), iniciamos a estruturação de uma tabelas em HTML. Hoje, vamos dar um passo além: vamos transformar aquele conteúdo estático em um sistema interativo!
Para acompanhar a aula, siga os passos abaixo:
Parte 1: A Base (O esqueleto)
Abra o OneCompiler, selecione a linguagem HTML e cole o código abaixo no arquivo index.html. Este código é a base da nossa tabela.
Codigo para copiar e Colar
<table border="1"> <thead> <tr> <th colspan="3">Meu Projeto de Vida: Rumo à Profissão</th> </tr> <tr> <th>Etapa</th> <th>Objetivo</th> <th>Ações Práticas</th> </tr> </thead> <tbody> <tr> <td>Curto Prazo</td> <td>Concluir Ensino Médio</td> <td>Manter notas altas e participar de oficinas.</td> </tr> <tr> <td>Médio Prazo</td> <td>Curso Técnico</td> <td>Fazer o curso de Programação no SENAI.</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Meta Final: Inserção no Mercado de Trabalho até 2028.</td> </tr> </tfoot> </table>
Parte 2: Evolução (A interatividade)
Agora copie e cole o código abaixo no mesmo local do anterior, ou abra uma nova aba.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Projeto de Vida</title>
<style>
/* Estilo rápido para organizar o formulário e a tabela */
body { font-family: Arial, sans-serif; margin: 20px; }
form { margin-bottom: 30px; padding: 15px; border: 1px solid #ccc; width: 300px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #009879; color: white; }
</style>
</head>
<body>
<h2>Cadastrar Etapa do Projeto de Vida</h2>
<!-- Formulário para o aluno inserir dados -->
<form id="formProjeto">
<label>Etapa:</label><br>
<input type="text" id="etapa" required><br><br>
<label>Objetivo:</label><br>
<input type="text" id="objetivo" required><br><br>
<button type="button" onclick="adicionarLinha()">Adicionar à Tabela</button>
</form>
<!-- Tabela vazia que será preenchida -->
<table id="tabelaProjeto">
<thead>
<tr>
<th>Etapa</th>
<th>Objetivo</th>
</tr>
</thead>
<tbody>
<!-- Os dados inseridos aparecerão aqui -->
</tbody>
</table>
<script>
function adicionarLinha() {
// Pega os valores dos campos
var etapa = document.getElementById("etapa").value;
var objetivo = document.getElementById("objetivo").value;
// Cria uma nova linha na tabela
var tabela = document.getElementById("tabelaProjeto").getElementsByTagName('tbody')[0];
var novaLinha = tabela.insertRow();
// Insere as células
var celula1 = novaLinha.insertCell(0);
var celula2 = novaLinha.insertCell(1);
// Adiciona o conteúdo
celula1.innerHTML = etapa;
celula2.innerHTML = objetivo;
// Limpa o formulário
document.getElementById("formProjeto").reset();
}
</script>
</body>
</html>
Desafio de Investigação
Após colar o segundo código, observe o que aconteceu na sua página e responda (anote em seu caderno ou entregue via formulário):
-
Comparação: O que você vê de diferente na apresentação visual e na funcionalidade entre o primeiro e o segundo código?
-
Implementação: Os dois códigos poderiam coexistir no mesmo
index.htmlou eles são formas diferentes de estruturar o mesmo objetivo? -
Análise Técnica: O segundo código é “unicamente HTML”? O que as tags
<style>e<script>fazem que o HTML puro não consegue fazer?
