class et idL'objectif de cette activité d'introduction est de comprendre le rôle des attributs class et id des éléments HTML. Ces deux attributs sont extrêmement utilisés pour styliser des éléments avec le langage CSS ou pour gérer l'interactivité avec le langage JavaScript (dont vous aurez un premier aperçu cette année en NSI).
Dans cette activité nous nous intéresserons à l'utilisation de ces attributs pour styliser en CSS certains éléments d'une page Web.
Voici le fichier compressé à télécharger qui contient les fichiers HTML, CSS (et JS) nécessaires à l'activité : attributsClassId.zip
La page index.html de cette archive contient le début de code suivant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Activité d'introduction</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Les attributs <code>class</code> et <code>id</code></h1>
<h2>L'attribut <code>class</code></h2>
<p><strong>Il permet de cibler <em>plusieurs</em> balises</strong> pour leur appliquer un style. En CSS, on fera précéder le nom de l'attribut d'un point (.).</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut neque, similique quo molestias velit perspiciatis pariatur, dolorem a quisquam fugit vero voluptatum architecto consequatur adipisci obcaecati placeat natus debitis corrupti!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos commodi corporis eius aut veniam dolore debitis libero deleniti natus voluptates sit inventore suscipit in quos distinctio vero, sunt adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores optio quod quis ratione cum dolorum aut perferendis exercitationem. Minima pariatur, quibusdam laborum excepturi similique tempore eligendi autem a dolorem maxime?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa accusamus aspernatur ex doloribus iusto accusantium fugit possimus blanditiis minima doloremque. Blanditiis laudantium sed reiciendis. Nesciunt ab accusantium exercitationem nulla obcaecati.</p>
[...]
</body>
</html>La page s'affiche de cette manière dans le navigateur :
class et idSi on écrit le code CSS suivant dans le fichier style.css (associé à notre fichier HTML)
p {
color: blue;
}alors tous les paragraphes de la page seront affichés en bleu :
Les attributs class et id vont permettre de cibler uniquement certains éléments d'une page pour les styliser ou les manipuler : par exemple, on va pouvoir cibler un ou plusieurs paragraphes précis pour leur appliquer un style, qui ne s'appliquera pas aux autres.
classL'attribut class permet de cibler plusieurs éléments HTML. Les classes permettent de manipuler les éléments via CSS ou JavaScript.
Exemple : On aimerait que les deux premiers paragraphes en latin (uniquement ceux-là) soient colorés en bleu.
Pour cela, on commence par définir une classe pour ces deux premiers paragraphes :
<p><strong>Il permet de cibler <em>plusieurs</em> balises</strong> pour leur appliquer un style. En CSS, on fera précéder le nom de l'attribut d'un point (.).</p>
<p class="para-bleu">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut neque, similique quo molestias velit perspiciatis pariatur, dolorem a quisquam fugit vero voluptatum architecto consequatur adipisci obcaecati placeat natus debitis corrupti!</p>
<p class="para-bleu">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos commodi corporis eius aut veniam dolore debitis libero deleniti natus voluptates sit inventore suscipit in quos distinctio vero, sunt adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores optio quod quis ratione cum dolorum aut perferendis exercitationem. Minima pariatur, quibusdam laborum excepturi similique tempore eligendi autem a dolorem maxime?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa accusamus aspernatur ex doloribus iusto accusantium fugit possimus blanditiis minima doloremque. Blanditiis laudantium sed reiciendis. Nesciunt ab accusantium exercitationem nulla obcaecati.</p>On peut alors appliquer un style CSS à cette classe. Il faut faire précéder le nom de la classe par un . en CSS :
.para-bleu {
color: blue;
} On obtient alors la page suivante :
idL'attribut id permet de cibler un élément HTML. Il s'agit d'un identifiant qui doit être unique pour l'ensemble du document. Il permet d'identifier un élément que l'on souhaite mettre en forme avec CSS ou manipuler avec un script.
Exemple : On aimerait que le premier titre de niveau h1 soit centré (et pas l'autre).
Pour cela, on commence par définir un attribuer un identifiant à ce titre :
<h1 id="titre-principal">Les attributs <code>class</code> et <code>id</code></h1>On peut alors appliquer un style à ce titre grâce à son attribut id. Il faut faire précéder le nom de l'identifiant par un # en CSS :
#titre-principal {
text-align: center;
}On obtient alors la page suivante :
Défi 1 : Les titres de niveau 2 "L'attribut class" et "L'attribut id" doivent être centrés et en bleu (mais pas ceux des défis !)
Défi 2 : Les 4 paragraphes précédant la première image doivent être écrits en rouge.
Défi 3 : Le deuxième titre de niveau 1 doit avoir une taille de police égale à 50px (mais pas l'autre !).
Défi 4 : Le dernier paragraphe de chaque partie (celui avant l'image) doit être aligné à droite.
Défi 5 : Seul le premier titre de niveau 2 (à savoir "L'attribut class") doit être écrit en blanc sur fond noir au survol de la souris. On pourra chercher de la documentation sur le pseudo-format :hover.
Défi 6 : La deuxième image uniquement doit être centrée. Vous pourrez chercher de la documentation sur le Web.
Cette section est intéressante pour celles et ceux qui souhaitent approfondir les langages HTML et CSS, mais aussi dans le cadre de projets Web qui nécessiteraient davantage de connaissances.
Dès que l'on veut écrire des pages un tant soit peu plus complètes et jolies, il est important de maîtriser les balises universelles <div> et <span>, mais aussi la mise en page avec Flexbox (et Grid Layout), ainsi que la sélection des éléments.
<div> et <span>Voici une vidéo très bien faite qui présente ces deux éléments :
Source : https://youtu.be/_QJx7gOt5iU
Vous trouverez également tout ce qu'il faut savoir sur MDN Web docs : https://developer.mozilla.org/fr/docs/Web/HTML/Element/div et https://developer.mozilla.org/fr/docs/Web/HTML/Element/span
flexbox et gridTout ce que nous avons vu jusqu'à présent ne permet de gérer le positionnement de plusieurs éléments sur une page, ce qui est indispensable sur la plupart des pages Web.
Pour positionner les éléments sur la page, il existe deux modèles natifs : "Flexbox" et "Grid Layout".
Pour découvrir et apprendre ces deux méthodes de positionnement, vous pouvez utiliser les jeux en ligne suivants qui vous guident pas à pas :
Lien vers le jeu Flexbox Froggy : https://flexboxfroggy.com/#fr
Source : https://github.com/thomaspark/flexboxfroggy/.
Lien vers le jeu Grid Garden : https://cssgridgarden.com/#fr
Source : https://github.com/thomaspark/gridgarden/.
Il existe aussi des tutoriels intéressants :
Lorsqu'une page Web devient assez conséquentes, les balises deviennent très nombreuses, et imbriquées les unes dans les autres. Et cela devient plus compliqué pour sélectionner certains éléments en CSS. Pour apprendre à sélectionner les éléments, le jeu interactif CSS Diner est intéressant (en anglais) : https://flukeout.github.io/#.
Source : https://github.com/flukeout/css-diner/.
Germain Becker, Lycée Emmanuel Mounier, Angers.
Voir en ligne : info-mounier.fr/premiere_nsi/web/activite-intro