F1 — HTML (a estrutura)

Objectivo: construir o esqueleto de uma página — texto, links, imagens, listas e formulários. Resultado final: uma página de perfil simples, só com HTML.

1. O que é HTML

HTML (HyperText Markup Language) é a linguagem que dá estrutura e conteúdo a uma página. Não é programação — é marcação: marcamos cada pedaço de conteúdo com uma etiqueta que diz “isto é um título”, “isto é um link”.

2. Tag, elemento, atributo

<a href="https://dcsc.ao">Visitar a DCSC</a>

Tag — <a> (abre) e </a> (fecha).
Elemento — a tag + o conteúdo lá dentro, tudo junto.
Atributo — informação extra dentro da tag de abertura: href="..." (o destino do link).

A maioria dos elementos abre e fecha. Alguns são “vazios” e não fecham, como a imagem <img>.

3. Estrutura mínima de um documento

<!doctype html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <title>A minha página</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
  </body>
</html>

<head> — informação sobre a página (título, codificação). Não aparece no ecrã.
<body> — o conteúdo visível.

4. Os elementos do dia-a-dia

<h1>Título principal</h1>          <!-- só 1 por página -->
<h2>Subtítulo</h2>                  <!-- h1..h6: níveis de título -->
<p>Um parágrafo de texto.</p>
<a href="/sobre">Ir para Sobre</a>  <!-- link -->
<img src="foto.webp" alt="A minha foto" />   <!-- imagem (alt descreve) -->

<ul>                                <!-- lista NÃO ordenada -->
  <li>Café</li>
  <li>Chá</li>
</ul>

<ol>                                <!-- lista ordenada (1,2,3) -->
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>

5. `div` e `span` (caixas genéricas)

Quando não há etiqueta específica, usam-se contentores neutros:

<div> — bloco (ocupa a linha toda). Para agrupar secções.
<span> — em linha (só o pedaço de texto). Para destacar uma palavra.

6. Semântica (etiquetas com significado)

Em vez de div para tudo, usa etiquetas que dizem o que são — melhor para SEO e acessibilidade:

<header>  <!-- topo: logo, menu --></header>
<main>    <!-- conteúdo principal (só 1) -->
  <section>  <!-- uma secção temática --></section>
  <article>  <!-- conteúdo independente (um post) --></article>
</main>
<footer>  <!-- rodapé: contactos, copyright --></footer>

7. Formulários (receber dados do utilizador)

<form>
  <label for="nome">Nome</label>
  <input id="nome" type="text" placeholder="O teu nome" />

  <label for="email">Email</label>
  <input id="email" type="email" />

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

Regra: cada <input> deve ter um <label> ligado pelo for/id. Em formulários angolanos, pede sempre NIF/BI.

8. Tabelas (dados em grelha)

<table>
  <thead><tr><th>Produto</th><th>Preço</th></tr></thead>
  <tbody>
    <tr><td>Recarga</td><td>1000 Kz</td></tr>
  </tbody>
</table>

✅ Exercícios

Página de perfil — cria um ficheiro perfil.html com a estrutura mínima e adiciona: um h1 com o teu nome · um parágrafo sobre ti · uma imagem · uma lista de 3 hobbies · um link para um site que gostes.
Semântica — envolve o conteúdo em <header>, <main> e <footer>.
Formulário de contacto — cria um formulário com Nome, Email, NIF e um botão Enviar (com <label> em cada campo).

Dica: abre o ficheiro no VSCode, clica com o botão direito → Open with Live Server para ver no navegador.

⚠️ Erros comuns

Esquecer de fechar a tag (<p> sem </p>) — o layout parte.
Usar <div> para tudo — perde-se semântica e SEO. Usa header/main/section/footer.
<img> sem alt — mau para acessibilidade e SEO.
Saltar níveis de título (h1 → h3) — segue h1 → h2 → h3.
Trocar <button> e <a> — <button> para acções, <a> para navegar.

✅ Soluções dos exercícios

Tenta sozinho primeiro.

1 + 2 (perfil com semântica):

<!doctype html>
<html lang="pt">
  <body>
    <header><h1>Ana Sambo</h1></header>
    <main>
      <p>Gosto de tecnologia e de café.</p>
      <img src="ana.webp" alt="Foto da Ana" />
      <ul><li>Programar</li><li>Ler</li><li>Correr</li></ul>
    </main>
    <footer><a href="https://dcsc.ao">O meu site favorito</a></footer>
  </body>
</html>

3 (formulário com NIF):

<form>
  <label for="nome">Nome</label>
  <input id="nome" type="text" />
  <label for="email">Email</label>
  <input id="email" type="email" />
  <label for="nif">NIF</label>
  <input id="nif" type="text" />
  <button type="submit">Enviar</button>
</form>