<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T09:32:10+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "pt"
}
-->
# Tarefa de Prática de HTML: Criar um Mockup de Blog

## Objetivo

Desenhar e codificar manualmente a estrutura HTML para a página inicial de um blog pessoal. Este exercício ajudará a praticar HTML semântico, planeamento de layout e organização de código.

## Instruções

1. **Desenhar o Mockup do Blog**
   - Faça um esboço visual da página inicial do seu blog. Inclua secções principais como cabeçalho, navegação, conteúdo principal, barra lateral e rodapé.
   - Pode usar papel e digitalizar o seu esboço ou utilizar ferramentas digitais (por exemplo, Figma, Adobe XD, Canva ou até PowerPoint).

2. **Identificar os Elementos HTML**
   - Liste os elementos HTML que planeia usar em cada secção (por exemplo, `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, etc.).

3. **Escrever o Código HTML**
   - Codifique manualmente o HTML para o seu mockup. Foque-se na estrutura semântica e nas melhores práticas.
   - Inclua pelo menos 10 elementos HTML distintos.
   - Adicione comentários para explicar as suas escolhas e estrutura.

4. **Submeter o Trabalho**
   - Carregue o seu esboço/mockup e o ficheiro HTML.
   - Opcionalmente, forneça uma breve reflexão (2–3 frases) sobre as suas decisões de design.

## Rubrica

| Critério         | Exemplar                                                                                   | Adequado                                                                         | Necessita de Melhorias                                                          |
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Mockup Visual    | Mockup claro e detalhado com secções identificadas e layout bem pensado                    | Mockup básico com algumas secções identificadas                                  | Mockup mínimo ou pouco claro; falta identificação das secções                   |
| Elementos HTML   | Utiliza 10+ elementos HTML semânticos; demonstra compreensão de estrutura e melhores práticas | Utiliza 5–9 elementos HTML; alguma estrutura semântica                           | Utiliza menos de 5 elementos; falta estrutura semântica                         |
| Qualidade do Código | Código bem organizado, legível e com comentários; segue os padrões HTML                  | Código maioritariamente organizado; poucos comentários                           | Código desorganizado; falta de comentários                                      |
| Reflexão         | Reflexão perspicaz sobre escolhas de design e desafios                                    | Reflexão básica                                                                  | Sem reflexão ou irrelevante                                                     |

## Dicas

- Utilize tags HTML semânticas para melhor acessibilidade e SEO.
- Organize o seu código com indentação e comentários.
- Consulte [Referência de Elementos HTML do MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) para orientação.
- Pense em como o seu layout pode ser expandido ou estilizado em tarefas futuras.

---

**Aviso**:  
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, é importante notar que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.