Cours HTML/CSS - Répartition de la leçon 1

Leçon 1 : Révision du HTML de base et introduction aux éléments HTML avancés

Objectif:

• Actualisez les balises HTML fondamentales.
• Introduisez des éléments HTML de niveau intermédiaire pour créer des pages Web plus fonctionnelles.

1. Introduction à la structure HTML

Commencez par une brève explication de la façon dont HTML organise le contenu des pages Web à l'aide de balises. Insistez sur le fait que HTML (HyperText Markup Language) est utilisé pour structurer les pages Web, tandis que CSS est utilisé pour le style.

Concepts clés à revoir :

• , ,  : expliquez que chaque document HTML a une structure définie :
  •  : élément racine qui englobe l'intégralité de la page Web.
  •  : contient des méta-informations telles que le titre, des liens vers CSS, des scripts, etc.
  •  : contient tout le contenu visible, tel que le texte, les images et les éléments avec lesquels les utilisateurs interagissent.

2. Récapitulatif des balises HTML de base

• Titres (

  à

  ) :

  Expliquez que les titres structurent le contenu de manière hiérarchique, du plus grand (

  ) au plus petit (

  ).

Exemple:

    
Main Heading
    
Sub Heading

• Paragraphes (

  ) :

  Utilisé pour définir des blocs de texte ou des paragraphes.

Exemple:

    
This is a paragraph.

• Ancres (Click here
  • Images () : Utilisé pour afficher des images. Expliquez l'attribut src pour le lien vers le fichier image et alt pour l'accessibilité.

  Exemple:
  

  3. Introduction aux éléments HTML intermédiaires

  3.1. Formulaires (

  , , )

  • Les formulaires sont utilisés pour collecter les entrées des utilisateurs.

  • Structure de base du formulaire :

    •  :
      Un conteneur pour les éléments de formulaire. Peut inclure des attributs tels que l'action (où les données du formulaire sont envoyées) et la méthode (GET/POST).
    •  : Définit une étiquette pour les éléments d'entrée et améliore l'accessibilité.
    •  : Définit différents types de champs de saisie comme le texte, le mot de passe, la case à cocher, la radio, etc.

  Exemple de formulaire simple avec saisie de texte :
  

  Name: Email:

  3.2. Listes (

  ,
  ,
  1. )
  • Les Listes non ordonnées (
    )
    et les Listes ordonnées (
    )
    aident à organiser les données sous forme de puces ou de listes numérotées.
  • Éléments de liste (
  • )
  définissent chaque élément de la liste.

  Exemple de liste non ordonnée et ordonnée :
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. Tableaux (

  , ,

  ,

  ) Les Tableaux permettent d'afficher des données structurées en lignes et en colonnes.  : Le conteneur de la table.  : Définit une ligne dans le tableau.  : Définit une cellule dans le tableau.  : définit une cellule d'en-tête dans le tableau (facultatif). Exemple de tableau simple : Name Age John 25 4. Activités en classe 4.1. Activité récapitulative : Demandez aux élèves de créer une page Web de base comprenant : Un titre ( ) Un paragraphe ( ) Une image () Exemple: Welcome to My Website This is my first webpage. 4.2. Exercice guidé : Créer un formulaire simple : guidez les étudiants dans la création d'un formulaire simple pour recueillir les commentaires des utilisateurs (nom et adresse e-mail). Incluez , et . 4.3. Listes et tableaux : Demandez aux élèves de créer une liste non ordonnée ( ) de leurs objets préférés et un tableau simple avec quelques lignes de données (nom, âge, couleur préférée). Exemple: Reading Coding Traveling Name Age Alice 30 5. Devoirs Les étudiants doivent étendre leur page Web de : Ajout d'éléments de formulaire comme des cases à cocher, des boutons radio et un bouton d'envoi. Personnalisation du formulaire pour collecter des informations supplémentaires sur l'utilisateur (par exemple, sexe, loisirs). Exemple: Gender: Male Female 6. Conseils supplémentaires Encouragez les étudiants à valider leur code HTML à l'aide d'outils tels que le service de validation de balisage du W3C. Expliquez l'importance du HTML sémantique et pourquoi l'utilisation des balises appropriées est importante pour l'accessibilité et le référencement. Résumé Les étudiants examineront les balises HTML de base telles que les titres, les paragraphes, les images et les liens. Ils seront initiés aux éléments HTML de niveau intermédiaire : formulaires, listes et tableaux. Des exercices pratiques et des devoirs leur donneront une expérience pratique de la création d'une page Web plus structurée.