Ficha 01 · HTML5 semântico e formulários · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Usar HTML semântico
Estruturar páginas
Construir formulários
Aplicar acessibilidade básica

Parte I · Semântica

Exercício 1 · Corrigir markup (20 pts)

Reescreve este código usando HTML semântico:

<div class="topo">
  <div class="titulo">A Minha Loja</div>
  <div class="menu">
    <div class="link">Início</div>
    <div class="link">Produtos</div>
  </div>
</div>
<div class="conteudo">
  <div class="post">
    <div class="post-titulo">Novidades</div>
    <div class="post-texto">Texto...</div>
  </div>
</div>
<div class="rodape">© 2026</div>

<header>
  <h1>A Minha Loja</h1>
  <nav>
    <ul>
      <li><a href="/">Início</a></li>
      <li><a href="/produtos">Produtos</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Novidades</h2>
    <p>Texto...</p>
  </article>
</main>
<footer><p>&copy; 2026</p></footer>

Vantagens: leitores de ecrã navegam por landmarks; SEO melhora; código auto-documentado; links são <a> (navegáveis por teclado), não <div>.

Exercício 2 · Escolher tag (15 pts)

Qual o elemento semântico mais adequado?

a) Barra de navegação principal. ___

b) Notícia independente reutilizável. ___

c) Conteúdo lateral (publicidade, links relacionados). ___

d) Data de publicação de um artigo. ___

e) Imagem com legenda. ___

a) <nav> b) <article> c) <aside> d) <time datetime="2026-05-19">19 Maio 2026</time> e) <figure> + <figcaption>

Parte II · Estrutura

Exercício 3 · Documento completo (15 pts)

Escreve a estrutura mínima de um documento HTML5 válido, com charset, viewport, título e lang em português.

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Minha Página</title>
</head>
<body>
  <h1>Olá mundo</h1>
</body>
</html>

Pontos críticos: - <!DOCTYPE html> — modo standards. - lang="pt" — acessibilidade e SEO. - charset="UTF-8" — acentos. - viewport — responsivo.

Exercício 4 · Hierarquia de headings (10 pts)

Esta estrutura tem problemas de acessibilidade. Identifica e corrige:

<h1>Blog</h1>
<h3>Primeiro artigo</h3>
<h5>Subsecção</h5>
<h2>Segundo artigo</h2>
<h1>Rodapé</h1>

Problemas: - Salta de h1 para h3 (devia ser h2). - h5 depois de h3 salta h4. - Dois h1 na página (deve ser só um).

Corrigido:

<h1>Blog</h1>
  <h2>Primeiro artigo</h2>
    <h3>Subsecção</h3>
  <h2>Segundo artigo</h2>
<h2>Rodapé</h2>   <!-- ou usar <footer> sem heading -->

Regra: um h1 por página, nunca saltar níveis. Leitores de ecrã usam headings para navegar.

Parte III · Formulários

Exercício 5 · Formulário acessível (25 pts)

Constrói um formulário de registo com: - Nome (texto, obrigatório, mín. 2 caracteres). - Email (obrigatório). - Idade (número, 13-120). - Plano (rádio: Grátis/Pro). - Aceitar termos (checkbox obrigatório). - Botão submeter.

Todos os campos com labels associados.

<form action="/registar" method="post">
  <div>
    <label for="nome">Nome</label>
    <input type="text" id="nome" name="nome" required minlength="2">
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="idade">Idade</label>
    <input type="number" id="idade" name="idade" min="13" max="120" required>
  </div>

  <fieldset>
    <legend>Plano</legend>
    <label><input type="radio" name="plano" value="free" checked> Grátis</label>
    <label><input type="radio" name="plano" value="pro"> Pro</label>
  </fieldset>

  <div>
    <label>
      <input type="checkbox" name="termos" required>
      Aceito os termos e condições
    </label>
  </div>

  <button type="submit">Registar</button>
</form>

Pontos avaliados: label for ligado a id; tipos correctos (email, number); validação HTML5 (required, min, max, minlength); fieldset/legend para os radios.

Exercício 6 · Tipos de input (15 pts)

Qual o tipo de input HTML5 ideal para cada caso (e que vantagem traz em mobile)?

a) Número de telefone. ___

b) Data de nascimento. ___

c) Pesquisa no site. ___

d) Avaliação de 1 a 10 (deslizante). ___

e) Cor de fundo preferida. ___

a) type="tel" — teclado numérico em mobile. b) type="date" — date picker nativo. c) type="search" — campo com X para limpar, teclado de pesquisa. d) type="range" min="1" max="10" — slider. e) type="color" — color picker nativo.

Cada tipo melhora UX e mostra o teclado/widget adequado em telemóveis.