Quebra-cabeças para ensinar HTML
CC-BY-SA por Mozilla, ginger coons, Mark Lesser, Thomas Park e Karen Smith
30 minutos
Explore as capacidades da Alfabetização Web através dessas atividades de quebra-cabeças desenvolvidas para engajar os participantes com aprendizado offl-ine sobre a web.
Atividade 3 de 6
Leia e participe da Web
Habilidades do Século 21
Colaboração Comunicação Resolução de problemasHabilidades de Alfabetização Web
SintetizarObjetivos
- Aprender as funções das tags HTML.
- Explorar o "básico da web" com tags e componentes de website.
- Explorar a marcação de texto como componente da arquitetura de um site e Mapa de Alfabetização Web.
- Resolver um quebra-cabeça HTML tratando a sintaxe de pesquisa.
Público alvo
- 13+
- Usuários iniciantes da Web
Materiais
- Cartões com abertura e fechamento de tags HTML para elementos comuns como
p,h1, andimg.
-
Preparação
Essas atividades foram preparadas para ambientes off-line. Você pode achar útil imprimir as atividades antecipadamente se for possível.
Escreva um conjunto de tags HTML comumente utilizadas em papéis com etiquetas adesivas. Inclua todas as tags que podem ser encontratadas na estrutura de uma página web padrão (veja exemplos como essa aqui). Cada bloco auto-adesivo deve incluir somente uma tag, como
<p>com sua respectiva tag de fechamento (assim,</p>) em outro bloco auto-adesivo.Ao longo das atividades, os aprendizes podem colaborar ajudando aos outros e trabalhar buscando a solução. Os mentores ou professores podem apresentar a solução correta do quebra-cabeça de combinação de tags HTML nas atividades abaixo ou, se quiser adicionar um componente on-line para qualquer quebra-cabeça, os aprendizes podem verificar seu HTML em busca de erros através do Thimble, um editor de códigos HTML on-line da Mozilla.
-
Quebra-cabeça de Tag HTML, Parte Um
5 minutosDistribua aleatoriamente os papéis com as tags HTML para os participantes. Todos devem ter uma tag.
Peça a todos os participantes encontrarem o outro participante que tem a tag correspondente a sua. Isso significa que a pessoa que estiver com a tag
<p>deve encontrar a pessoa que possui a</p>, a pessoa que possui a tag<h1>deve encontrar a pessoa que tem a tag</h1>, e assim por diante.Uma vez que todos os participantes tenham encontrado seus parceiros, peça que eles conversem um pouco sobre os possíveis significados de suas tags. O que a tag
<h1>signfica? O que ela faz? Qual o objetivo da tag<body>? -
Quebra-cabeça de Tag HTML, Parte Dois
10 minutosO próximo passo, organize a sala em linhas, numeradas de 1-7. Cada linha deve ser bem demarcada, e deve ter espaço suficiente para três pessoas em pé lado a lado.
Tenha certeza que todos os participantes ainda tem uma tag da atividade um. Se não tiver participantes suficientes para fazer o documento todo encontrado aqui, retire algumas tags, começando com
<h1>e</h1>.Peça aos participantes para explicar ao grupo que papéis que as suas tags desempenham em um documento HTML. Com base nas respostas, veja se o grupo entra em um consenso sobre quais tags realizam tais funções.
Depois, baseado nas decisões do passo anterior, peça aos participantes para se direcionarem para a linha que eles achama que pertencem. Se a linha tiver mais de um participantes dentro dela, peça para se organizarem em ordem, da esquerda pra direita, baseado no seus entendimentos de abertura e fechamento de tags.
No fim desta atividade, pare e pergunte para o grupo avaliar seu desempenho coletivamente. Se eles acreditam que criaram um documento HTML funcional? Se existem erros nas suas ordenações? Peça aos participantes para 'depurar' o código, oferecendo sugestões de lugares aos seus pares. Continue essa depuração, auxiliando quando necessário, até que os participantes tenham alcançado a ordem das tags do documento.
-
Misturando Tags
10 minutosInicie a atividade explicando que para que os navegadores web entendam como apresentar uma página web, seu conteúdo precisa ser "marcado" utilizando uma linguagem chamada HTML. Iremos marcar objetos do mundo real de forma similar.
Explique que utilizamos um par de tags para marcar o conteúdo - um no início e um no final do item. Demonstre a atividade através do uso de blocos auto-adesivos com anotações para criar suas próprias tags de abertura e fechamento que descrevam um objeto na sala e "envolvendo-o" com a tag.
Distribua as etiquetas adesivas que foram preparadas com tags de abertura e fechamento em branco: <_______> and </_______>. Deixem os outros inventarem suas próprias tags, separe as tags de abertura e fechamento, e marque os objetos.
Continue a atividade usando fotos ou pôsteres contendo muitos objetos, ou cópias de textos de revistas ou receitas.
Finalmente, distribua etiquetas adesivas com tags HTML de elementos válidos como img, h1, and p. Explique o que cada tag significa, e depois deixe que os participantes marquem uma página web impressa.
-
Reflexão
5 minutosOs participantes podem compartilhar suas soluções para o quebra-cabeça verbalmente durante as sessões ou atividades. Depois eles podem avaliar e refletir sobre seus trabalhos uma vez que tenham terminado e verificado suas soluções com um mentor ou através do Thimble.
Você pode promover a discussão utilizando perguntas como essas:
- Quais os cinco principais pontos sobre HTML que você ensinaria à um amigo?
- O que você aprendeu hoje além de HTML?