aulify · Sebenta

UC · Unidade de Competência · UC02634

Criar páginas para a web em hipertexto

Sebenta · HTML, CSS, responsivo, publicação

25h · 2.25 pontos crédito Curso: T. Multimédia ↗ Referencial oficial SNQ

Apresentação

UC02634 (25h · 2,25 pts) do curso Técnico de Multimédia. Ensina a implementar páginas web em HTML5 e CSS — a partir do design (UC02285) ou para usos próprios. Inclui estrutura semântica, estilo, layouts (Flexbox/Grid), responsivo mobile-first, acessibilidade e publicação. É a base prática da componente "construir web" deste curso (a UC02635 cobre CMS).

Esta UC tem grande sobreposição com a UC02833 do TDS. O enfoque é mais aplicado e mais ligado à produção multimédia.

HTML5

Documento base

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Descrição curta da página">
  <title>Título — Aulify</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- conteúdo -->
  <script src="app.js" defer></script>
</body>
</html>

Itens críticos: lang="pt", charset="UTF-8", viewport (mobile), title, meta description (SEO).

Tags semânticas

Tag	Para que serve
`<header>` `<footer>`	cabeçalho/rodapé (de página ou de secção)
`<nav>`	navegação principal
`<main>`	conteúdo principal (uma por página)
`<section>`	secção temática
`<article>`	conteúdo independente (post, notícia)
`<aside>`	conteúdo lateral relacionado
`<figure>` `<figcaption>`	imagem com legenda
`<time>`	data/hora

A semântica é importante para acessibilidade (leitores de ecrã navegam por landmarks) e SEO.

Texto, hierarquia e listas

<h1>Título principal</h1>     <!-- só um por página -->
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
<p>Parágrafo com <strong>importante</strong> e <em>ênfase</em>.</p>

<ul>
  <li>Lista não ordenada</li>
</ul>
<ol>
  <li>Lista ordenada</li>
</ol>

Não saltar níveis (h2→h4); usar h1 único.

Imagens, links, vídeo

<img src="logo.svg" alt="Logo Aulify" width="200" height="60">

<a href="/sobre">Sobre nós</a>
<a href="https://aulify.pt" target="_blank" rel="noopener">Site</a>

<video controls poster="capa.jpg">
  <source src="anim.mp4" type="video/mp4">
  <track kind="subtitles" src="legendas.vtt" srclang="pt">
</video>

alt obrigatório (descritivo; vazio só em decorativas).
target="_blank" + rel="noopener" para links externos.
<picture> para escolher formato (UC00504).

Formulários (resumo)

<form action="/inscrever" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

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

<label for="id"> sempre; tipos HTML5 (email, tel, date).

CSS

Como aplicar

<link rel="stylesheet" href="style.css">   <!-- recomendado -->
<style>p { color: red; }</style>           <!-- pontual -->

Seletores

p {}                  /* elemento */
.card {}              /* classe */
#header {}            /* id (evitar em CSS) */
nav a {}              /* descendente */
ul > li {}            /* filho direto */
a:hover {}            /* estado */
input:focus-visible {} /* foco por teclado */
a[target="_blank"] {} /* atributo */

Especificidade: inline > id > classe > elemento. Evitar !important.

Variáveis CSS e box-sizing

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

*, *::before, *::after { box-sizing: border-box; }

body { font-family: system-ui, sans-serif; color: var(--cor-texto); }
.botao { background: var(--cor-primaria); padding: var(--espaco); border-radius: var(--raio); }

Variáveis = design system manutenível.

Unidades

Unidade	Quando
`rem`	tipografia e espaçamento (relativo à raiz)
`em`	espaçamento relativo ao elemento
`px`	bordas, detalhes finos
`%`	tamanhos relativos ao pai
`vw / vh`	percentagem da viewport
`fr`	fracções (grid)
`clamp()`	mín, ideal, máx

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Layout

Flexbox (uma direção)

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.menu { display: flex; gap: 24px; }

Ideal para navegação, alinhar itens em linha/coluna.

Grid (duas direções)

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.layout {
  display: grid;
  grid-template-areas: "header header" "sidebar main" "footer footer";
  grid-template-columns: 240px 1fr;
}

Ideal para galerias, layouts de página inteira, dashboards.

Regra prática: Flexbox para componentes (1D), Grid para layout (2D).

Responsivo (mobile-first)

/* base: mobile */
.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 32px; }
}

@media (min-width: 1024px) {
  .container { max-width: 1100px; margin: 0 auto; }
}

Princípios: - Começar pelo ecrã pequeno (força priorizar conteúdo). - Breakpoints onde o layout "parte", não por modelos. - Imagens flexíveis: img { max-width: 100%; height: auto; }. - Toque — alvos ≥ 44 px; sem hover essencial.

Acessibilidade essencial

Contraste texto/fundo ≥ 4.5:1 (3:1 para texto grande).
alt em imagens informativas; alt="" em decorativas.
Foco visível (não remover outline sem alternativa).
Navegação por teclado — Tab/Enter/Espaço funcionam em tudo.
Hierarquia de headings sem saltar níveis; um h1 por página.
Labels em todos os campos de formulário.
prefers-reduced-motion em animações.
Não comunicar só pela cor.

Publicar

Hospedagem estática (grátis para começar)

Netlify, Vercel, Cloudflare Pages, GitHub Pages.
Workflow: criar repositório Git → push → deploy automático.
HTTPS automático (Let's Encrypt).
Domínio próprio — registar (.pt em registrar.pt/ANACOM, .com em registar internacional) e apontar para o serviço.

Antes de publicar (checklist)

Validar HTML (validator.w3.org) — zero erros.
Lighthouse (Chrome DevTools) — Performance/A11y/SEO/Best Practices ≥ 90.
Imagens otimizadas (UC00504) — srcset, formatos modernos, loading="lazy".
SEO básico — title, meta description, Open Graph (og:image, og:title, og:description).
404 custom e sitemap.xml + robots.txt (se há indexação).
Backups e versionamento (Git).

Apêndices

A · Snippet base completo

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="...">
  <title>Página — Aulify</title>
  <style>
    *,*::before,*::after { box-sizing: border-box; }
    body { margin:0; font-family: system-ui, sans-serif; line-height:1.6; }
    .container { max-width:1100px; margin:0 auto; padding:16px; }
  </style>
</head>
<body>
  <header><h1>Título</h1></header>
  <main class="container">...</main>
  <footer>...</footer>
</body>
</html>

B · Glossário

Box model. Modelo de caixa (content/padding/border/margin). Flexbox / Grid. Modelos de layout CSS. Hierarquia de headings. Ordem h1→h2→h3 sem saltar. Media query. Regra condicional ao ecrã. Open Graph. Metadados para previews em redes. Semantic HTML. Usar tags com significado.

C · Recursos

MDN Web Docs · developer.mozilla.org — referência.
CSS-Tricks · css-tricks.com — guias Flexbox/Grid.
Flexbox Froggy / Grid Garden — jogos didáticos.
web.dev/learn · Google — performance e a11y.
WebAIM Contrast Checker · contraste WCAG.