Aller au contenu

Initiation HTML et CSS

🎯 Apprendre les bases des langagues HTML et CSS pour créer des sites web responsive.

📚 Plan de cours

Séance 1 (2h) : Introduction au HTML

Théorie (40 min) :

  • 1.1 Architecture client-serveur et le Web
  • 1.2 Qu'est-ce que le HTML ?
  • 1.3 Structure d'une page HTML
  • 1.4 Les balises essentielles
  • 1.5 Les attributs de base
  • 1.6 Les commentaires HTML

Pratique (1h20) :

  • Exercice 1 : Mon CV

Séance 2 (2h) : Liens, images, tableaux et sémantique HTML

Théorie (40min) :

  • 2.1 Les liens hypertextes
  • 2.2 Les images
  • 2.3 Les tableaux
  • 2.4 Balises sémantiques HTML5

Pratique (1h20) :

  • Exercice 2 : Mini-site fan thème libre
  • Exercice 3 : Emploi du temps

Séance 3 (2h) : Formulaires HTML

Théorie (35min) :

  • 3.1 Introduction aux formulaires
  • 3.2 Les inputs de base
  • 3.3 Attributs importants des inputs
  • 3.4 Cases à cocher et boutons radio
  • 3.5 Zones de texte et listes déroulantes
  • 3.6 Boutons
  • 3.7 Organisation et accessibilité
  • 3.8 Validation HTML5

Pratique (1h25) :

  • Exercice 4 : Formulaire d'inscription

Séance 4 (2h) : Introduction CSS, sélecteurs et Box Model

Théorie (40min) :

  • 4.1 Qu'est-ce que le CSS ?
  • 4.2 Les 3 façons d'intégrer du CSS (inline, interne, externe)
  • 4.3 Syntaxe CSS et commentaires
  • 4.4 Sélecteurs de base (élément, classe, ID, universel)
  • 4.5 Sélecteurs combinés (descendant, enfant direct)
  • 4.6 Pseudo-classes (:hover, :focus, :first-child, :nth-child)
  • 4.7 Propriétés de texte, couleurs et polices
  • 4.8 Box Model (content, padding, border, margin)
  • 4.9 Display et positionnement de base
  • 4.10 Spécificité et cascade CSS

Pratique (1h20) :

  • Exercice 5 : Styliser un article de blog

Séance 5 (2h) : Responsive Web Design

Théorie (45min) :

  • 5.1 Qu'est-ce que le Responsive Web Design ?
  • 5.2 Meta viewport et principes Mobile First
  • 5.3 Media Queries
  • 5.4 Grilles fluides avec Flexbox et Grid
  • 5.5 Images flexibles
  • 5.6 Techniques complémentaires : Container Queries, clamp(), aspect-ratio

Pratique (1h15) :

  • Exercice 6 : Card Pokémon Responsive
  • Exercice 7 : Navigation Pokémon Responsive
  • Exercice 8 : Layout avec Sidebar

📊 Modalités d'évaluation

Note 1 : QCM (30% de la note finale)

  • Format : 40 questions environ
  • Contenu : Connaissance et comprhéension des langagues HTML et CSS

Note 2 : Projet final (70% de la note finale)

  • Sujet : Site portfolio/vitrine de 1-3 pages
  • Critères d'évaluation (sur 20 points) :
  • Qualité du code HTML et CSS
  • Responsive design fonctionnel
  • Fonctionnalités (navigation, formulaire, ...)
  • Design et esthétique

🛠️ Outils et ressources

Outils nécessaires

  • Éditeur de code : VS Code (avec extensions Live Server)
  • Navigateurs : Chrome/Firefox (outils de développement F12)
  • Validation : W3C Validator (HTML et CSS)

Ressources documentaires