Ficha 01 · HTML semântico e CSS

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á".

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>

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>

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"] ___

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.

Parte III · Box model

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

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

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?