UC02634 · Criar páginas para a web em hipertexto
Aulify · Componente Tecnológica

Criar páginas para a web em hipertexto

HTML5 semântico · CSS · responsivo · publicação
UC02634 · 25 horas · 2,25 pontos Nível 4 · T. Multimédia · Ano 3
Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Resultados de aprendizagem

  1. Estruturar páginas com HTML5 semântico.
  2. Estilizar com CSS (Flexbox/Grid).
  3. Construir layouts responsivos.
  4. Publicar num servidor estático.
Saber HTML/CSS é o "ler e escrever" da web. O design (UC02285) torna-se site aqui.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
Bloco 1 · HTML

Estrutura semântica

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Documento base

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

lang, charset, viewport — sempre.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Tags semânticas

Tag Para
<header> <footer> cabeçalho/rodapé
<nav> navegação
<main> conteúdo principal (1 por página)
<article> <section> conteúdo independente / temático
<aside> lateral relacionado
<figure> <figcaption> imagem com legenda
<time> data/hora

Semântica > <div> por defeito (a11y + SEO).

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
<img src="logo.svg" alt="Logo Aulify" width="200" height="60">

<a href="/sobre">Sobre</a>
<a href="mailto:geral@aulify.pt">Email</a>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

alt obrigatório (vazio só se decorativa).

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
Bloco 2 · CSS

Aparência

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Selectors e cascata

p { color: #333; }
.card { padding: 16px; }
nav a:hover { color: #6366f1; }
input:focus-visible { outline: 2px solid blue; }

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

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Variáveis e box model

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

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

.botao {
  background: var(--cor-primaria);
  padding: var(--espaco);
}

Centraliza o design system.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
Bloco 3 · Layout

Flexbox e Grid

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Flexbox (1D)

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

Ótimo para navegação, alinhamento em linha/coluna.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Grid (2D)

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

Responsivo automático sem media queries.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
Bloco 4 · Responsivo + a11y

Funcionar em tudo, para todos

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

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; }
}
Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Acessibilidade essencial

  • Contraste texto/fundo ≥ 4.5:1.
  • alt nas imagens informativas.
  • Foco visível (não remover outline).
  • Navegável por teclado (Tab).
  • Hierarquia de headings (h1 → h2 → h3).
  • Labels em todos os inputs.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
Bloco 5 · Publicar

Pôr no ar

Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Hospedagem estática (grátis)

  • Netlify · Vercel · Cloudflare Pages · GitHub Pages.
  • Push para Git → deploy automático.
  • Domínio (.pt na ANACOM/registar.pt).
  • Certificado HTTPS automático.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto

Boas práticas finais

  • Validar HTML (validator.w3.org).
  • Lighthouse — performance, a11y, SEO ≥ 90.
  • Imagens otimizadas (UC00504).
  • SEO básico — title, meta description, OG image.
  • Backups em Git; versões.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02634 · Criar páginas para a web em hipertexto
Aulify · UC02634 · Fim

HTML semântico, CSS limpo, publicação simples.

📧 geral@aulify.pt
Aulify · Componente Tecnológica · Cursos Profissionais