Cet exercice consiste à générer une palette de couleurs avec des outils en ligne puis à la présenter proprement en HTML et CSS.
Consignes de l’exercice
Préparation de l’exercice
Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.
Dans le dossier racine, créez un nouveau fichier .css vierge avec le nom style.css.
Dans le dossier racine créer un nouveau fichier .html avec toute la structure de base d’une page web. Copiez / collez le code fourni ci-dessous :
<!DOCTYPE html>
<html>
<head>
<title>Palette de couleurs</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>Un exemple de contenu</div>
</body>
</html>
Intégrez le fichier .css dans la page web.
Afficher la solutionGardez les deux fichiers .html et .css ouverts dans votre logiciel d’édition et ouvrez la page .html dans votre navigateur pour consulter les modifications.
Choix des couleurs
Créez une palette de couleur de 4 ou 5 couleurs avec un outil de votre choix :
Création du HTML de la palette de couleurs
HTML : Créez un bloc HTML neutre auquel vous ajoutez la classe palette.
HTML : À l’intérieur du bloc créé à la question précédente, insérez pour chacune des couleurs choisies pour votre palette, un bloc neutre contenant le texte du code hexadécimal de la couleur.
HTML : Ajoutez la classe couleur à chaque élément <div> contenant les codes des couleurs.
HTML : Ajoutez une seconde classe à chaque élément <div> contenant les codes des couleurs sous la forme couleur1, couleur2, …
Mise en forme de la palette de couleurs
Important pour la suite de l’exercice !
À ce point d’étape, vous avez donc des éléments HTML, avec le texte des codes couleurs, qui vont pouvoir être modifiés en CSS :
– tous en même temps en utilisant la classe couleur
– individuellement en utilisant la classe correspondante.
À partir de maintenant, sauf mention contraire, vous allez travailler sur le fichier css.
CSS : Définissez la couleur saisie, en tant que texte dans la page html, comme couleur d’arrière-plan de l’élément.
CSS : Transformez le conteneur .palette en boite flexible en lui ajoutant la propriété suivante : display: flex;. Si les boites flexibles n’ont pas encore été abordées en cours, elles le seront prochainement.
CSS : Ajoutez une hauteur et une largeur de votre choix, identique pour les 4 ou 5 blocs colorés.
HTML : Dans la page html, ajoutez un élément span supplémentaire autour de chacun des codes couleurs afin de pouvoir les mettre en forme plus facilement. Ces éléments span vont permettre de modifier le texte des codes couleur indépendamment des blocs avec la couleur en fond.
CSS : Ciblez les span ajoutés à la question précédente afin de les transformer en éléments de type bloc (par défaut span sont des éléments inline). Cette opération va permettre de dimensionner les éléments span en question.
CSS : Ajoutez une couleur d’arrière-plan et une couleur de texte de votre choix aux éléments span pour obtenir un résultat similaire à l’image suivante. Nous ferrons référence à l’affichage des codes en les appelant les étiquettes.
CSS : Dimensionnez les étiquettes et ajoutez leur des marges internes et externes afin d’obtenir le résultat suivant.
Personnalisation de la palette
Essayez maintenant de personnaliser votre palette de couleurs en modifiant le CSS de votre page. Vous pouvez également adapter le HTML si vous pensez que cela est nécessaire. Voici quelques exemples de personnalisation :
Codes de l’exercice
Vous pouvez télécharger les codes de l’exercice ci-dessous :
