|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T09:35:14+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "br"
|
|
|
}
|
|
|
-->
|
|
|
# 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á você a praticar HTML semântico, planejamento de layout e organização de código.
|
|
|
|
|
|
## Instruções
|
|
|
|
|
|
1. **Desenhe o Mockup do Seu Blog**
|
|
|
- Faça um esboço visual da página inicial do seu blog. Inclua seções principais como cabeçalho, navegação, conteúdo principal, barra lateral e rodapé.
|
|
|
- Você pode usar papel e escanear seu esboço ou utilizar ferramentas digitais (ex.: Figma, Adobe XD, Canva ou até PowerPoint).
|
|
|
|
|
|
2. **Identifique os Elementos HTML**
|
|
|
- Liste os elementos HTML que você planeja usar em cada seção (ex.: `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, etc.).
|
|
|
|
|
|
3. **Escreva o Código HTML**
|
|
|
- Codifique manualmente o HTML para o seu mockup. Foque na estrutura semântica e nas melhores práticas.
|
|
|
- Inclua pelo menos 10 elementos HTML distintos.
|
|
|
- Adicione comentários para explicar suas escolhas e estrutura.
|
|
|
|
|
|
4. **Envie Seu Trabalho**
|
|
|
- Faça o upload do seu esboço/mockup e do arquivo HTML.
|
|
|
- Opcionalmente, forneça uma breve reflexão (2–3 frases) sobre suas decisões de design.
|
|
|
|
|
|
## Rubrica
|
|
|
|
|
|
| Critério | Exemplar | Adequado | Precisa Melhorar |
|
|
|
|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| Mockup Visual | Mockup claro e detalhado com seções identificadas e layout bem pensado | Mockup básico com algumas seções identificadas | Mockup mínimo ou pouco claro; falta identificação das seções |
|
|
|
| Elementos HTML | Usa 10+ elementos HTML semânticos; demonstra compreensão de estrutura e melhores práticas | Usa 5–9 elementos HTML; alguma estrutura semântica | Usa 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 razoavelmente 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
|
|
|
|
|
|
- Use tags HTML semânticas para melhor acessibilidade e SEO.
|
|
|
- Organize 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 seu layout pode ser expandido ou estilizado em tarefas futuras.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Aviso Legal**:
|
|
|
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. |
