UC00622

Criar aplicações em HTML5

Markup semântico, CSS, JavaScript moderno

Curso profissional · 50h · Fundamentos da web

Plano

  1. Web: como funciona
  2. HTML5 — markup semântico
  3. CSS — design e layout
  4. CSS avançado (Flexbox, Grid)
  5. JavaScript fundamentos
  6. DOM manipulation
  7. Responsive design
  8. Acessibilidade e SEO

Bloco 1 · Web

Como funciona

Browser ── HTTP request ──► Servidor
   ▲                            │
   │                            │
   └──── HTML/CSS/JS ◄──────────┘
  • Browser (Chrome, Firefox): cliente.
  • Servidor: aloja ficheiros.
  • HTTP: protocolo de comunicação.
  • HTML/CSS/JS: linguagens base.

Tecnologias web

  • HTML: estrutura (conteúdo).
  • CSS: apresentação (visual).
  • JavaScript: comportamento (interactividade).

Separação de preocupações = código mais limpo.

Setup

  • Editor: VSCode (recomendado).
  • Browser: Chrome / Firefox com DevTools.
  • Servidor local:
    • VS Code "Live Server" extension.
    • Ou python -m http.server 8000.

Bloco 2 · HTML5

Estrutura básica

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A minha página</title>
</head>
<body>
  <h1>Olá mundo</h1>
  <p>Primeira página!</p>
</body>
</html>

Tags semânticas (HTML5)

<header>     Cabeçalho
<nav>        Navegação
<main>       Conteúdo principal
<article>    Artigo independente
<section>    Secção
<aside>      Lateral / sidebar
<footer>     Rodapé

Usar semântica > divs genéricos.

Tags de conteúdo

<h1> a <h6>    Cabeçalhos
<p>            Parágrafo
<ul> <ol>      Listas
<li>           Item de lista
<a href="">    Link
<img src=""    Imagem
     alt="">   (alt obrigatório!)
<video> <audio>  Mídia

Formulários

<form action="/submit" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="msg">Mensagem:</label>
  <textarea id="msg" name="msg"></textarea>
  
  <button type="submit">Enviar</button>
</form>

Input types: text, email, password, number, date, file, checkbox, radio, range, color...

Bloco 3 · CSS

Sintaxe

selector {
  propriedade: valor;
  outra-propriedade: outro-valor;
}

/* Exemplo */
h1 {
  color: blue;
  font-size: 32px;
  margin-bottom: 20px;
}

Cascata: regras mais específicas sobrepõem-se às gerais.

Selectors

/* Elemento */
p { color: black; }

/* Classe */
.destaque { background: yellow; }

/* ID */
#header { height: 80px; }

/* Descendente */
nav a { color: white; }

/* Pseudo-classes */
a:hover { color: red; }
li:first-child { font-weight: bold; }

/* Combinadores */
.btn + .btn { margin-left: 10px; }

Box model

┌─────────────────────────────┐
│      margin                  │
│  ┌───────────────────────┐  │
│  │     border             │  │
│  │  ┌─────────────────┐  │  │
│  │  │   padding        │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content   │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

box-sizing: border-box → largura inclui padding+border.

Cores e tipografia

/* Cores */
color: #ff5733;             /* hex */
color: rgb(255, 87, 51);    /* RGB */
color: hsl(11, 100%, 60%);  /* HSL */
color: var(--primary);      /* variável */

/* Tipografia */
font-family: 'Inter', Arial, sans-serif;
font-size: 16px;            /* px */
font-size: 1rem;            /* relativo ao root */
font-weight: 600;
line-height: 1.5;

Bloco 4 · CSS avançado

Flexbox

.container {
  display: flex;
  justify-content: center;     /* eixo principal */
  align-items: center;         /* eixo cruzado */
  gap: 20px;
}

.item {
  flex: 1;  /* cresce igualmente */
}

Ideal para: navbar, cards row, centering.

Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

/* Span múltiplos */
.item-grande {
  grid-column: span 2;
}

Ideal para: layouts 2D complexos.

Responsividade

/* Mobile first (recomendado) */
.container {
  display: flex;
  flex-direction: column;
}

/* Tablet+ */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* Desktop+ */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Bloco 5 · JavaScript

Hello world

<script>
  console.log("Olá!");
  alert("Aviso!");
</script>

<!-- Ou externo -->
<script src="script.js"></script>

Variáveis

// const (preferido, imutável)
const nome = "Ana";

// let (mutável)
let idade = 25;
idade = 26;

// var (legacy, evitar)

// Tipos
const numero = 42;
const decimal = 3.14;
const texto = "olá";
const booleano = true;
const nada = null;
const array = [1, 2, 3];
const objecto = { nome: "Ana", idade: 25 };

Funções

// Function declaration
function saudar(nome) {
  return `Olá, ${nome}!`;
}

// Arrow function (moderno)
const saudar = (nome) => `Olá, ${nome}!`;
const dobro = x => x * 2;

// Função sem return
const log = (msg) => {
  console.log(msg);
};

// Default params
const greet = (name = "Mundo") => `Hello, ${name}!`;

Estruturas controlo

// If
if (idade >= 18) {
  console.log("adulto");
} else {
  console.log("menor");
}

// For
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// For of
const frutas = ["maçã", "uva"];
for (const fruta of frutas) {
  console.log(fruta);
}

// While
let i = 0;
while (i < 5) {
  console.log(i++);
}

Bloco 6 · DOM

Seleccionar elementos

// Por ID
const titulo = document.getElementById("titulo");

// Por classe (NodeList)
const items = document.getElementsByClassName("item");

// Query selector (CSS-like)
const primeiro = document.querySelector(".item");
const todos = document.querySelectorAll(".item");

Modificar elementos

// Texto
elemento.textContent = "Novo texto";
elemento.innerHTML = "<b>HTML</b>";

// Atributos
elemento.setAttribute("class", "destaque");
elemento.classList.add("active");
elemento.classList.toggle("hidden");

// Estilos
elemento.style.color = "red";
elemento.style.backgroundColor = "yellow";

Events

// Click
botao.addEventListener("click", () => {
  console.log("Clicado!");
});

// Submit
form.addEventListener("submit", (e) => {
  e.preventDefault();  // não recarregar página
  console.log("Submetido!");
});

// Input change
input.addEventListener("input", (e) => {
  console.log("Valor:", e.target.value);
});

Exemplo prático

<button id="btn">Clica</button>
<p id="contador">0</p>

<script>
  const btn = document.getElementById("btn");
  const display = document.getElementById("contador");
  let count = 0;
  
  btn.addEventListener("click", () => {
    count++;
    display.textContent = count;
  });
</script>

Bloco 7 · Responsive

Viewport

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0">

Obrigatório para mobile.

Breakpoints standard

/* Mobile (< 768px): default */

/* Tablet */
@media (min-width: 768px) {
  /* ... */
}

/* Desktop */
@media (min-width: 1024px) {
  /* ... */
}

/* Large desktop */
@media (min-width: 1440px) {
  /* ... */
}

Imagens responsive

<!-- Tamanho proporcional -->
<img src="foto.jpg" alt="" 
     style="max-width: 100%; height: auto;">

<!-- Diferentes resoluções -->
<img srcset="small.jpg 480w, 
             medium.jpg 800w, 
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.jpg">

Bloco 8 · Acessibilidade + SEO

Acessibilidade (a11y)

  • alt em imagens.
  • label em inputs.
  • aria-label quando necessário.
  • contraste suficiente (WCAG AA = 4.5:1).
  • navegação por teclado (Tab).
  • headings hierárquicos (h1 > h2 > h3).

SEO básico

<head>
  <title>Título descritivo (50-60 chars)</title>
  <meta name="description" 
        content="Descrição (150-160 chars)">
  <meta property="og:title" content="Para Facebook/LinkedIn">
  <meta property="og:image" content="og-image.jpg">
  <link rel="canonical" href="https://example.com/pagina">
</head>

Performance

  • Imagens optimizadas (WebP, lazy load).
  • CSS/JS minificados.
  • Cache apropriado.
  • CDN para assets.
  • Métrica: Lighthouse (Chrome DevTools).

UC00622 · resumo

  • HTML estrutura + CSS estilo + JS comportamento.
  • HTML5 semântico: header, nav, main, article, footer.
  • Flexbox + Grid para layouts modernos.
  • JavaScript: const/let, arrow functions, DOM, events.
  • Responsive com media queries.
  • Acessibilidade + SEO desde o início.
  • Base para qualquer framework (React, Vue).