|
|
<!--
|
|
|
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. |
