Simulic
Français

Atelier HTML et CSS – contenu, structure et style

InformatiqueApplications numériques17–18 ans

Chargement…

Utiliser avec ma classe ✨ Personnaliser avec l'IA Signaler un problème

Modifiez le contenu, le balisage HTML et une feuille de style CSS dans des panneaux séparés et regardez la page et l’arbre DOM se mettre à jour pendant la saisie. Changez de feuille de style pour voir le même contenu présenté tout autrement ; cliquez sur un élément pour voir quelles règles CSS s’appliquent, leur spécificité et le modèle de boîte. Un validateur signale les balises non fermées ou mal imbriquées et les propriétés ou valeurs CSS invalides. Deux autres onglets montrent un formulaire avec la validation du navigateur et la requête GET/POST envoyée, et des événements click et input qui modifient la page.

Leçon : Créer des pages web avec HTML et CSS : éléments, attributs, sélecteurs, modèle de boîte, formulaires et événements

Ce qu’elle montre

Une page web a trois couches. Le HTML balise le contenu avec des éléments comme h1, p, ul et table, et le navigateur transforme le balisage en arbre DOM. Les règles CSS choisissent des éléments avec des sélecteurs (balise, .classe, #id) et fixent des propriétés comme color, margin et padding ; en cas de conflit, l’importance, la spécificité et l’ordre décident, et certaines propriétés sont héritées. Chaque élément est une boîte faite du contenu, de la marge intérieure, de la bordure et de la marge extérieure. Les formulaires envoient des paires nom=valeur à un serveur avec GET ou POST, et les gestionnaires d’événements JavaScript modifient le DOM après le chargement.

Mode d’emploi

Dans Page et style, choisissez une Page d’exemple et une Feuille de style, puis modifiez le panneau Contenu, HTML ou CSS en observant la page et l’arbre DOM. Cliquez sur un élément de la page ou sur une ligne de l’arbre DOM pour voir ses règles et son modèle de boîte ; cliquez sur un message pour aller à sa ligne. Dans Formulaire, remplissez les champs et envoyez pour voir la requête HTTP. Dans Événements, modifiez les gestionnaires du panneau Événements (JS) et cliquez sur les boutons.

Paramètres modifiables

  • Onglet Page et style, Formulaire, Événements
  • Page d’exemple Article, Cartes de profil, Tableau
  • Feuille de style Classique, Moderne, Sombre, Sans CSS
  • Méthode du formulaire GET, POST
  • Afficher l’arbre DOM
  • Afficher le modèle de boîte

Questions à explorer

  1. Pourquoi l’arbre DOM reste-t-il identique quand vous changez de feuille de style ?
  2. Quelle règle l’emporte, #lamp ou #lamp.on, et quelles sont leurs spécificités ?
  3. Où un formulaire GET place-t-il ses données, et pourquoi est-ce risqué pour un mot de passe ?

Simulations associées