Notes de la présentation sur HTML, CSS et JavaScript

Introduction

• Vidéo dédiée à trois exercices corrigés : HTML, CSS, JavaScript.
• Premier exercice abordé avec des corrections.

Exercice 1 : Utilisation de onClick

• onClick : Permet de lier le clic sur un élément HTML à une fonction JavaScript.
  • Exemple : Un bouton avec un événement onClick qui appelle une fonction pour afficher une alerte.
• Fonction JavaScript : Exemple avec "clic sur bouton" qui génère une alerte : "Tu as cliqué sur le bouton."

Langages abordés

1. HTML : Structure et squelette de la page.
   • Utilisé pour créer des éléments d'interface utilisateur, comme les titres (h1, h2, etc.) et les paragraphes (p).
2. CSS : Styles et design de la page.
   • Exemple : Changer la couleur du texte en vert avec CSS.
3. JavaScript : Logique et interaction dynamique.
   • Utilisé pour exécuter des fonctions lors d'événements utilisateur.

Exercice 2 : Changer la couleur d'un texte avec CSS

• Créer un texte entouré des balises HTML qui sera stylisé avec CSS.
• Exemple de code :
  • Utilisation d'un paragraphe (p) pour afficher du texte en vert.
  • Changement entre les éléments h1 et p avec le CSS pour modifier les styles.

Exemple de CSS

• Pour mettre du texte en vert :

  p {
      color: green;
  }
  

• Pour d'autres éléments (h2, etc.), suivre le même principe :
  • Exemple : h2 qui devient rouge.

Exercice 3 : Interaction avec JavaScript

• Objectif : Changer la couleur du texte via des boutons qui appellent des fonctions JavaScript.
  • Deux boutons créés pour changer le texte en rouge et bleu.

Fonction JavaScript

1. Création de la fonction couleur :
   • Prend comme argument la couleur à appliquer (red ou blue).
   • Utilisation de getElementById pour sélectionner le texte à modifier.
   • Utilisation de element.style.color pour changer la couleur.

Code exemple

• Application de la fonction lors d'un clic sur un bouton :

  <button onClick="couleur('red')">Mettre en rouge</button>
  <button onClick="couleur('blue')">Mettre en bleu</button>
  

Conclusion

• Importance de comprendre la liaison entre HTML, CSS, et JavaScript.
• Suggestion aux étudiants de poser des questions et de participer dans les forums de discussion.
• Invitation à la prochaine vidéo sur PHP.

Remarques finales

• Encouragement à faire des pauses pour assimiler les informations complexes.
• Proposition d'autres vidéos si souhaité par les étudiants.