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 '12ef6fa5f3'
${ noResults }
Web-Dev-For-Beginners/translations/fr/3-terrarium/1-intro-to-html/assignment.md

4.4 KiB
Raw Blame History Escape

Devoir de pratique HTML : Créer une maquette de blog

Objectif

Concevoir et coder manuellement la structure HTML pour la page d'accueil d'un blog personnel. Cet exercice vous aidera à pratiquer le HTML sémantique, la planification de mise en page et l'organisation du code.

Instructions

  1. Concevez la maquette de votre blog

    • Dessinez une maquette visuelle de la page d'accueil de votre blog. Incluez les sections clés telles que l'en-tête, la navigation, le contenu principal, la barre latérale et le pied de page.
    • Vous pouvez utiliser du papier et scanner votre croquis, ou utiliser des outils numériques (par exemple, Figma, Adobe XD, Canva ou même PowerPoint).

  2. Identifiez les éléments HTML

    • Listez les éléments HTML que vous prévoyez d'utiliser pour chaque section (par exemple, <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a>, etc.).

  3. Écrivez le code HTML

    • Codez manuellement le HTML pour votre maquette. Concentrez-vous sur la structure sémantique et les bonnes pratiques.
    • Incluez au moins 10 éléments HTML distincts.
    • Ajoutez des commentaires pour expliquer vos choix et votre structure.

  4. Soumettez votre travail

    • Téléchargez votre croquis/maquette et votre fichier HTML.
    • Facultativement, fournissez une brève réflexion (2–3 phrases) sur vos choix de conception.

Grille d'évaluation

Critères Exemplaire Adéquat À améliorer
Maquette visuelle Maquette claire et détaillée avec des sections étiquetées et une mise en page réfléchie Maquette basique avec quelques sections étiquetées Maquette minimale ou peu claire ; manque d'étiquettes pour les sections
Éléments HTML Utilise 10+ éléments HTML sémantiques ; démontre une compréhension de la structure et des bonnes pratiques Utilise 5–9 éléments HTML ; structure sémantique partielle Utilise moins de 5 éléments ; manque de structure sémantique
Qualité du code Code bien organisé, lisible avec des commentaires ; respecte les standards HTML Code principalement organisé ; peu de commentaires Code désorganisé ; manque de commentaires
Réflexion Réflexion approfondie sur les choix de conception et les défis Réflexion basique Pas de réflexion ou manque de pertinence

Conseils

  • Utilisez des balises HTML sémantiques pour une meilleure accessibilité et un meilleur référencement.
  • Organisez votre code avec des indentations et des commentaires.
  • Consultez MDN HTML Elements Reference pour obtenir des conseils.
  • Réfléchissez à la manière dont votre mise en page pourrait être étendue ou stylisée dans de futurs exercices.

Avertissement :
Ce document a été traduit à l'aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.