Ficha 01 · HTML semântico e CSS · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Usar HTML semântico
Estruturar página
Aplicar CSS
Usar variáveis

Parte I · HTML

Exercício 1 · Documento base (15 pts)

Escreve a estrutura mínima de um documento HTML5 válido em português, com charset, viewport, title, ligação a style.css e um h1 "Olá".

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Olá</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Olá</h1>
</body>
</html>

Exercício 2 · Semântica (15 pts)

Reescreve este markup usando HTML semântico:

<div class="topo">
  <div class="titulo">Aulify</div>
  <div class="menu">
    <div class="link"><a href="/">Início</a></div>
    <div class="link"><a href="/recursos">Recursos</a></div>
  </div>
</div>
<div class="conteudo">
  <div class="post"><div class="post-titulo">Novidades</div><div>Texto…</div></div>
</div>
<div class="rodape">© 2026</div>

<header>
  <h1>Aulify</h1>
  <nav>
    <ul>
      <li><a href="/">Início</a></li>
      <li><a href="/recursos">Recursos</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Novidades</h2>
    <p>Texto…</p>
  </article>
</main>
<footer><p>&copy; 2026</p></footer>

Exercício 3 · Hierarquia (10 pts)

Esta estrutura tem problemas. Identifica e corrige:

<h1>Site</h1>
<h3>Secção</h3>
<h5>Subsecção</h5>
<h1>Rodapé</h1>

Problemas: salta de h1 para h3 e de h3 para h5 (sem h2/h4); dois h1.

Corrigido:

<h1>Site</h1>
  <h2>Secção</h2>
    <h3>Subsecção</h3>
<h2>Rodapé</h2>   <!-- ou <footer> sem heading -->

Um único h1; nunca saltar níveis.

Parte II · CSS

Exercício 4 · Selectors (10 pts)

Indica o que selecciona cada um:

a) nav a ___

b) .card > h2 ___

c) input:focus-visible ___

d) a[target="_blank"] ___

a) Todos os <a> dentro de um <nav> (qualquer profundidade). b) <h2> filhos directos de elementos com classe .card. c) <input> com foco recebido por teclado (Tab) — não por rato. d) <a> com atributo target="_blank".

Exercício 5 · Variáveis CSS (15 pts)

Cria um pequeno design system com 3 variáveis (cor primária, cor texto, espaço base) e aplica-as num botão e numa caixa.

:root {
  --cor-primaria: #6366f1;
  --cor-texto: #1a1a2e;
  --espaco: 16px;
}

body { color: var(--cor-texto); }

.botao {
  background: var(--cor-primaria);
  color: #fff;
  padding: var(--espaco) calc(var(--espaco) * 1.5);
  border: 0;
  border-radius: 8px;
}

.caixa {
  padding: var(--espaco);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 15%, transparent);
  border-radius: 8px;
}

Mudar --cor-primaria num sítio propaga ao botão e ao resto.

Parte III · Box model

Exercício 6 · box-sizing (10 pts)

Para que serve *, *::before, *::after { box-sizing: border-box; } e que problema resolve?

Faz com que width/height incluam padding e border (em vez de só o conteúdo, que é o default content-box). Resolve o problema clássico de "uma caixa com width:200px e padding:20px afinal ocupa 240 px" — torna o dimensionamento previsível e os layouts mais simples. Aplica-se a todos os elementos com o seletor *.

Exercício 7 · Especificidade (10 pts)

Esta regra parece não funcionar:

.botao { background: red; }

mas body p .botao está a aplicar verde com green. Que está a passar-se e como resolver sem !important?

body p .botao tem especificidade maior (1 classe + 2 elementos) que .botao (1 classe), por isso prevalece (verde). Soluções:

Subir a especificidade da regra que se quer (ex.: usar uma classe extra coerente: .botao.botao-vermelho).
Reorganizar o CSS — evitar selectors aninhados desnecessários (manter a especificidade baixa e plana).
Não usar !important (esconde o problema; cria novos conflitos).

Em sistemas grandes: convenções como BEM ou utility classes evitam guerras de especificidade.