8.2 KiB
Trabalho Prático de HTML: Construir um Modelo de Blog
Objectivos de Aprendizagem
Aplique os seus conhecimentos de HTML ao desenhar e codificar uma estrutura completa para a página inicial de um blog. Este trabalho prático reforçará conceitos de HTML semântico, melhores práticas de acessibilidade e competências de organização profissional de código que usará ao longo da sua jornada no desenvolvimento web.
Ao completar este trabalho, irá:
- Praticar o planeamento de layouts de websites antes de programar
- Aplicar elementos HTML semânticos de forma adequada
- Criar marcação acessível e bem estruturada
- Desenvolver hábitos profissionais de codificação com comentários e organização
Requisitos do Projeto
Parte 1: Planeamento do Design (Modelo Visual)
Crie um modelo visual da página inicial do seu blog que inclua:
- Cabeçalho com o título do site e navegação
- Área principal com pelo menos 2-3 pré-visualizações de publicações do blog
- Barra lateral com informação adicional (secção sobre, publicações recentes, categorias)
- Rodapé com informação de contacto ou links
Opções para criação do modelo:
- Esboço feito à mão: Use papel e lápis, e depois fotografe ou digitalize o seu desenho
- Ferramentas digitais: Figma, Adobe XD, Canva, PowerPoint ou qualquer aplicação de desenho
- Ferramentas de wireframe: Balsamiq, MockFlow ou software similar para wireframing
Identifique as secções do seu modelo com os elementos HTML que planeia usar (ex.: "Cabeçalho - <header>", "Publicações do Blog - <article>").
Parte 2: Planeamento dos Elementos HTML
Crie uma lista que associe cada secção do seu modelo a elementos HTML específicos:
Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>
Elementos Obrigatórios a Incluir: O seu HTML deve conter pelo menos 10 elementos semânticos diferentes desta lista:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer><h1>,<h2>,<h3>,<p>,<ul>,<li>,<a><img>,<time>,<blockquote>,<strong>,<em>
Parte 3: Implementação em HTML
Codifique a sua página inicial do blog seguindo estes padrões:
- Estrutura do Documento: Inclua DOCTYPE, html, head e body corretamente
- Marcação Semântica: Use elementos HTML para os seus fins próprios
- Acessibilidade: Inclua texto alt adequado para imagens e texto significativo para links
- Qualidade do Código: Use indentação consistente e comentários úteis
- Conteúdo: Inclua conteúdo realista do blog (pode usar texto fictício)
Estrutura HTML de exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Blog</title>
</head>
<body>
<!-- Main site header -->
<header>
<h1>My Blog Title</h1>
<nav>
<!-- Navigation menu -->
</nav>
</header>
<!-- Main content area -->
<main>
<!-- Blog posts go here -->
</main>
<!-- Sidebar content -->
<aside>
<!-- Additional information -->
</aside>
<!-- Site footer -->
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
Parte 4: Reflexão
Escreva uma breve reflexão (3-5 frases) respondendo a:
- Quais elementos HTML usou com mais confiança?
- Que desafios encontrou no planeamento ou na codificação?
- Como o HTML semântico ajudou a organizar o seu conteúdo?
- O que faria de diferente no seu próximo projeto HTML?
Lista de Verificação para Entrega
Antes de submeter, certifique-se de que tem:
- Modelo visual com os elementos HTML identificados
- Ficheiro HTML completo com estrutura correta do documento
- Pelo menos 10 elementos HTML semânticos diferentes usados apropriadamente
- Comentários significativos que expliquem a estrutura do seu código
- Sintaxe HTML válida (teste num navegador)
- Reflexão escrita respondendo às perguntas do enunciado
Rubrica de Avaliação
| Critérios | Exemplar (4) | Proficiente (3) | Em Desenvolvimento (2) | Iniciante (1) |
|---|---|---|---|---|
| Planeamento & Design | Modelo detalhado e bem identificado, mostrando compreensão clara do layout e da estrutura semântica HTML | Modelo claro com a maioria das secções identificadas corretamente | Modelo básico com alguma identificação, mostra compreensão geral | Modelo mínimo ou pouco claro, falta identificação adequada das secções |
| Uso de HTML Semântico | Usa 10+ elementos semânticos correcta e apropriadamente, demonstra profundo entendimento da estrutura HTML e acessibilidade | Usa 8-9 elementos semânticos correctamente, mostra bom entendimento da marcação semântica | Usa 6-7 elementos semânticos, alguma confusão no uso adequado | Usa menos de 6 elementos ou faz mau uso dos elementos semânticos |
| Qualidade & Organização do Código | Código excecionalmente bem organizado, com indentação correta, comentários abrangentes e sintaxe HTML perfeita | Código bem organizado com boa indentação, comentários úteis e sintaxe válida | Código maioritariamente organizado com alguns comentários, problemas menores de sintaxe | Pouca organização, comentários mínimos, múltiplos erros de sintaxe |
| Acessibilidade & Melhores Práticas | Excelentes considerações de acessibilidade, texto alt significativo, hierarquia correta de títulos, segue todas as melhores práticas modernas de HTML | Boas características de acessibilidade, uso apropriado de títulos e texto alt, segue a maioria das boas práticas | Algumas considerações de acessibilidade, texto alt básico e estrutura básica de títulos | Acessibilidade limitada, má estrutura de títulos, não segue boas práticas |
| Reflexão & Aprendizagem | Reflexão perspicaz mostrando profundo entendimento dos conceitos HTML e análise ponderada do processo de aprendizagem | Boa reflexão mostrando compreensão dos conceitos chave e algum autoconhecimento no processo de aprendizagem | Reflexão básica com visão limitada sobre conceitos HTML ou processo de aprendizagem | Reflexão mínima ou ausente, mostra pouco entendimento dos conceitos aprendidos |
Recursos de Aprendizagem
Referências Essenciais:
- MDN HTML Elements Reference - Guia completo de todos os elementos HTML
- HTML5 Semantic Elements - Compreender a marcação semântica
- Web Accessibility Guidelines - Criar conteúdos web acessíveis
- HTML Validator - Verifique a sintaxe do seu HTML
Dicas Profissionais para o Sucesso:
- Comece pelo seu modelo antes de escrever qualquer código
- Use as ferramentas de desenvolvimento do navegador para inspecionar a estrutura do seu HTML
- Teste a sua página com diferentes tamanhos de ecrã (mesmo sem CSS)
- Leia o seu HTML em voz alta para verificar se a estrutura faz sentido lógico
- Considere como um leitor de ecrãs interpretaria a estrutura da sua página
💡 Lembre-se: Este trabalho foca-se na estrutura e semântica do HTML. Não se preocupe com o estilo visual – para isso é o CSS! A sua página pode parecer simples, mas deve ser bem estruturada e significativa.
Aviso Legal: Este documento foi traduzido utilizando o serviço de tradução automática Co-op Translator. Embora nos esforcemos para garantir a precisão, pedimos que tenha em conta que traduções automatizadas podem conter erros ou imprecisões. O documento original, na sua língua nativa, deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes da utilização desta tradução.