1. Description de la balise <div>
La balise <div> est une balise HTML utilisée pour diviser ou grouper le contenu d'une page web en sections ou en conteneurs logiques. Le terme "div" est une abréviation de "division". La balise <div> elle-même n'ajoute généralement aucune mise en forme ou style à son contenu, mais elle est essentielle pour créer une mise en page web propre et structurée, en particulier lorsque vous travaillez avec des feuilles de style CSS, elle permet d'ajouter des classe css sous forme d'attributs afin d'améliorer la mise en former et organiser le contenu d'une page web.
2. syntaxe et usage de la balise <div>
Voici comment la balise <div> est généralement utilisée :
|
1 2 3 |
<div> <!-- Le contenu à l'intérieur de la balise div --> </div> |
3. Exemples d'usages de la balise <div>
Voici quelques utilisations courantes de la balise <div> :
Mise en page et structuration : Vous pouvez utiliser des balises <div> pour diviser votre page web en sections logiques, telles que l'en-tête, la barre de navigation, le contenu principal, le pied de page, etc. Chaque section peut être enveloppée dans une balise <div> pour une organisation propre.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="header"> <!-- Contenu de l'en-tête --> </div> <div id="main-content"> <!-- Contenu principal de la page --> </div> <div id="footer"> <!-- Contenu du pied de page --> </div> |
Styling CSS : Les balises <div> sont souvent utilisées en conjonction avec des feuilles de style CSS pour appliquer des styles et des mises en forme à des sections spécifiques de la page. En ajoutant des classes ou des identifiants à vos balises <div>, vous pouvez les cibler avec des règles CSS.
|
1 2 3 4 5 6 7 |
<div class="article"> <!-- Contenu d'un article --> </div> <div id="sidebar"> <!-- Contenu de la barre latérale --> </div> |
JavaScript : Les balises <div> sont également souvent utilisées comme conteneurs pour des éléments interactifs ou des widgets JavaScript. Vous pouvez utiliser JavaScript pour manipuler le contenu à l'intérieur des balises <div> en fonction des interactions de l'utilisateur.
La balise <div> peut être utilisée avec JavaScript pour créer un élément interactif simple. Dans cet exemple, nous allons utiliser JavaScript pour créer un bouton qui change la couleur de fond d'une <div> lorsque l'utilisateur clique dessus:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Exemple de balise <div> avec JavaScript</title> </head> <body> <div id="maDiv" style="width: 200px; height: 200px; background-color: lightblue;"> <p>Cliquez sur le bouton pour changer la couleur de fond.</p> </div> <button id="boutonChangerCouleur">Changer la couleur</button> <script> // Sélectionner la balise <div> et le bouton par leur ID const maDiv = document.getElementById('maDiv'); const boutonChangerCouleur = document.getElementById('boutonChangerCouleur'); // Fonction pour changer la couleur de fond function changerCouleur() { const couleurs = ['lightblue', 'lightcoral', 'lightgreen', 'lightyellow']; const couleurAleatoire = couleurs[Math.floor(Math.random() * couleurs.length)]; maDiv.style.backgroundColor = couleurAleatoire; } // Ajouter un gestionnaire d'événements au bouton boutonChangerCouleur.addEventListener('click', changerCouleur); </script> </body> </html> |
Younes Derfoufi
CRMEF OUJDA
-
Langage Python pour les Nuls, 3e éd - John Paul Mueller
€ 24,00 Acheter le livre -
Ouvrage de Référence Python : Exploration Approfondie du Langage Python
€ 42,00 Acheter le livre -
Routeur Tenda avec Carte SIM 4G09 AC1200 Bi- bandd 4G + Cat6 300Mbps, Connectivité Jusqu'à 64 Appareils
€ 89,00 Acheter le produit
1 thought on “La balise <div> HTML”