cClaude.rocks ☕ Le blog

[Nouvelles technologies du libre, sciences et coups de gueule…]

Menu
mai
15
2021

Ce billet fait partie d’une série d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prévu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de manière inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Maintenant que nous avons quelques notions d’HTML et de CSS et que l’on a une idée de comment représenter notre image, on va pouvoir ajouter l’élément essentiel : la couleur.

Vous trouverez un complément à ce billet : 👾 Atelier-Web complément ⑥ – Précisions sur le CSS qui a pour objectif d’éclaircir certains concepts, vous pourrez y faire références s’il vous manque de l’information.

État initial

Nous partirons du code attendu dans l'exercice précédent qui permet d’afficher cette page.

  • Code de départ 
    <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>« Poké Ball » en pixel</title>
    <style>

/* Code CSS à adapter */
.essai {
  font-family: monospace;
}

    </style>
  </head>
  <body>
    <div class="essai">

    <!-- Code HTML à adapter -->

<div class="ligne">...............</div>
<div class="ligne">.....GGGG......</div>
<div class="ligne">...GG....GG....</div>
<div class="ligne">..G........G...</div>
<div class="ligne">.G..........G..</div>
<div class="ligne">.G..........G..</div>
<div class="ligne">G.....RR.....G.</div>
<div class="ligne">GRRRRR..RRRRRG.</div>
<div class="ligne">G....R..R....G.</div>
<div class="ligne">G.....RR.....G.</div>
<div class="ligne">.G..........G..</div>
<div class="ligne">.G..........G..</div>
<div class="ligne">..G........G...</div>
<div class="ligne">...GG....GG....</div>
<div class="ligne">.....GGGG......</div>

    </div>
  </body>
</html>
ඏ

Étape 1

Vous l’aurez compris il va valoir ajouter des nouvelles balise HTML appartement à une classe CSS qui permettra d’afficher la couleur choisie.

La balise que nous devons utiliser doit être neutre en termes de rendu, c’est donc span qui est le plus approprié.

Remplacer par
. <span class="blanc">.</span>
G <span class="gris" >G</span> – L’espace après sert uniquement à garder une présentation lisible
R <span class="rouge">R</span>

Pensez à utiliser les capacités de votre éditeur à remplacer un morceau de texte par un autre. Penser également à faire attention aux majuscules et aux minuscules, on parle de la casse des caractères. Si votre éditeur de texte est assez évolué, cela ne vous demandera que 3 remplacements.

On obtient alors ceci : 🔳

ඏ

Étape 2 : les couleurs pour de vrai…

Pour avoir effectivement des couleurs, c’est maintenant très facile. Cela se fait uniquement en modifiant le *CSS. Vous pouvez revoir le premier billet sur le CSS où vous trouverez des indices sur ce qu’il manque.

On obtient alors ceci : 🔳

Cette fois cela commence à ressembler à ce que l’on attend.

ඏ

Étape 3 : des carrés

Mais on souhaiterait avoir des carrées, c’est le principe d’un pixel…

C’est encore au niveau du CSS qu’il va falloir intervenir. Il faut bien sur donner une largeur et une hauteur à chaque case.

Mais cela ne va pas suffire. Il faut ajouter la propriété CSS: display

La propriété display

La propriété CSS display est une propriété très puissante permettant de modifier la façon dont un élément s’affiche dans la page : « en ligne », « sous forme de bloc », etc. Changer cette propriété peut avoir comme conséquence de modifier l’emplacement des éléments voisins.

Je ne vais pas vous expliquer le fonctionnement de display en détail, mais vous pouvez le tester par vous-même.

Sachez que les valeurs que l’on rencontre couramment sont display: inline; et display: block;. Notez également l’existence de display: none; qui permet de cacher un élément (et ces fils).

La propriété display et notre exemple

On utilisera la valeur inline-block

  …
  display: inline-block;
  …

display: inline-block affiche un élément en tant que conteneur de blocs de niveau en ligne. L’élément lui-même est formaté en tant qu’élément en ligne, mais vous pouvez appliquer des valeurs de hauteur et de largeur et c’est exactement notre besoin.

On obtient alors ceci : 🔳

Une autre version du code : 🔳

ඏ

Première version du code CSS

.essai {
  font-family: monospace;
}

.blanc {
  background-color: white;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.gris {
  background-color: grey;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.rouge {
  background-color: red;
  width: 20px;
  height: 20px;
  display: inline-block;
}

Seconde version du code CSS qui est plus courte et utilise la sélection des éléments sur lequel doit s’appliquer une règle basée sur le « chemin ». Ici on sélectionne tous les éléments span étant immédiatement à l’intérieur d’un élément de classe ligne : cela se note '.ligne span'.

.essai {
  font-family: monospace;
}

.ligne span { /* Sélectionne tous les éléments span à l’intérieur d’un élément de classe “ligne” */
  width: 20px;
  height: 20px;
  display: inline-block;
}

.blanc {
  background-color: white;
}

.gris {
  background-color: grey;
}

.rouge {
  background-color: red;
}
ඏ

Références

L’atelier complet

ᦿ

ℹ 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog