Laboratório prático: construa página de evento
Combine estrutura, mídia e formulário em uma seção realista.
- Compor uma seção de página completa com semântica clara.
Páginas reais combinam vários fundamentos HTML ao mesmo tempo. Este lab junta heading, contexto de mídia e ação de cadastro em uma seção coerente.
1<main>
2 <h1>Community robotics night</h1>
3 <figure>
4 <img src="robotics.jpg" alt="Students testing line-following robots">
5 <figcaption>Hands-on demo stations open from 6 pm.</figcaption>
6 </figure>
7 <form>
8 <label for="name">Name</label>
9 <input id="name" name="name" required>
10 <button type="submit">Reserve a spot</button>
11 </form>
12</main>Community robotics night Students testing line-following robots Hands-on demo stations open from 6 pm. Name Reserve a spot
Mantenha ordem de leitura lógica: introdução, contexto e ação. Isso facilita navegação para pessoas e ferramentas assistivas.
Principais conclusões
Compor uma seção de página completa com semântica clara.
Prefira elementos semânticos para comunicar intenção.
Mantenha estrutura legível para pessoas e ferramentas assistivas.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em HTML
Escreva a marcação, veja a prévia em um frame isolado do navegador e compare o texto visível com os requisitos.
Monte a seção do evento
Crie main com heading Community robotics night, alt Students testing line-following robots, figcaption Hands-on demo stations open from 6 pm., label Name e botão Reserve a spot.
- Texto da seção do evento
Sua marcação aparece em uma prévia isolada. Execute os testes para conferir o texto visível da página.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…