Quebra-cabeça de tags HTML no Thimble

15 minutos

Alunos aprendem a ler, escrever e participar da Web neste módulo de seis partes. Descubra os fundamentos da Web através da produção e colaboração.

Atividade 2 de 6

Leia a Web

Habilidades do Século 21

Colaboração Comunicação Resolução de problemas

Habilidades de Alfabetização Web

Sintetizar

Objetivos do aprendizado

Entender e demonstrar como abrir e fechar tags HTML em uma página Web.

Público

13+
Usuários iniciantes da Web

Materiais

Cartões identificados com abertura e fechamento de tags HTML para elementos comuns como p, h1, e img.

Preparação

Escreva tags de “abertura” e “fechamento” em cartões ou etiquetas auto-adesivas (use diferentes cores para cada par, ex: tags <html> em azul, tags <head> em laranja, tags <body> em verde escuro, tags <p> em azul escuro, tags <title> em rosa = 5 pares), e imprima um simples documento HTML para servir como uma folha de dicas.
Atividade

10 minutos

Primeiro, espalhe os cartões ao redor da sala e peça para uma criança escolher uma tag. Se você tiver menos que 10 participantes, use menos tags (exclua tags menos importantes, começando por <h1> e </h1>, e <p> e </p> ou peça para cada criança encontrar um “par perfeito” (ex: <head> e </head>).

Em seguida, peça para os participantes encontrarem seus “pares perfeitos” (ex: criança 1 segura <body> e criança 2 segura </body>) e mande explicar ao resto do grupo qual o papel que a tag desempenha no documento HTML (ainda podendo pedir pela “folha de dicas” em HTML). Depois que os “pares perfeitos” descreverem seus papéis, veja se todo o grupo é capaz organizar as tags na ordem correta. Se você tiver participantes suficientes, pode pedir para eles se posicionarem em linhas na sala. Se o espaço for limitado ou uma criança tiver mais que uma tag, peça que coloquem os cartões em uma superfície (mesa ou chão) e organizem de forma correta. Lembre-os de evitar deixar "cabeças voando" e "corpos abertos"

Finalmente, baseando-se nas respostas, crie uma versão digital do quebra-cabeça de tags HTML no Thimble, enquanto pede ao grupo dicas do que escrever como por exemplo <p> e <h1> (ou, se eles já foram retirados, <head> e <body>).
Reflexão

5 minutos

Peça ao grupo para avaliar coletivamente a performance deles. Eles acreditam que criaram um documento HTML com funcionalidade no Thimble? Se existirem erros na ordenação, peça aos participantes para “depurar” o código, pedindo sugestões de posicionamento ao seu par. Continue esse depuramento, auxiliando quando necessário, até os participantes conseguirem criar um template funcional no Thimble.