msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '67962f8d18'
${ noResults }
Web-Dev-For-Beginners/translations/pt/3-terrarium/1-intro-to-html/assignment.md

4.1 KiB
Raw Blame History Escape

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