On joue avec les couleurs☘
Exercice 1☘
Qu'obtiendra-t-on en ouvrant, avec un navigateur, la page un.html contenant le texte ci-dessous.
Répondez tout d'abord sans tester, il est important de vous habituer à décrypter le code.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur 1 </title>
<style>
body{
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Une page colorée.</p>
</body>
</html>
Réponse
Le résultat est une page sur fond jaune avec le texte "Une page colorée" écrit en gras et en rouge.
Le style css s'interprète comme suit:
body{
background-color: yellow; /* couleur de fond en jaune */
color: red; /* couleur du texte en rouge */
font-weight: bold; /* texte en gras */
}
Rappelons ici que l'interprétation du code html et du code css se fait côté client (c'est à dire sur votre machine) par le navigateur.
Exercice 2☘
On modifie la page html précédente en ajoutant un script javascript comme suit:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur 1 </title>
<style>
body{
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Une page colorée.</p>
<script>
const corps = document.querySelector("body");
corps.style.backgroundColor = "black";
corps.style.color = "yellow";
</script>
</body>
</html>
Prévoir ce que sera l'aspect de la page. Vous veillerez là encore à prévoir l'aspect sans exécuter (chercher, si besoin, sur la toile la signification des parties de code que vous ne comprenez pas).
Réponse
La page présente maintenant un fond noir, du texte de couleur jaune, le texte reste en gras.
Le css est en effet lu avant le script. Le script étant exécuté en fin, on écrase la définition donnée pour la couleur de fond et la couleur de texte.
const corps = document.querySelector("body");
corps.style.backgroundColor = "black"; // couleur de fond en noir
corps.style.color = "yellow"; // couleur de texte en jaune
La règle css portant sur l'épaisseur de fonte (texte en gras) n'est pas écrasée et reste donc valide.
Rappelons ici que l'interpréation du code html, du code css et du code javascript se fait côté client (c'est à dire sur votre machine) par le navigateur.
Exercice 3☘
On modifie la page précédente en la page suivante (nommée trois.php):
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur </title>
<style>
body{
background: yellow;
color: red;
font-weight: bold;
}
</style>
<?php
echo "<style>";
echo "body{background: orange; color: brown;}" ;
echo "</style>";
?>
</head>
<body>
<p>Une page colorée.</p>
</body>
</html>
et on envoie cette page par ftp sur un serveur. Qu'obtient-on?
Réponse
Du texte gras, brun sur fond orange. En effet, le serveur interprète le code php et le code reçu par le client est:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur </title>
<style>
body{
background: yellow;
color: red;
font-weight: bold;
}
</style>
<style>body{background: orange; color: brown;}</style></head>
<body>
<p>Une page colorée.</p>
</body>
</html>
Les règles css définies par le code php viennent écraser celles définies initialement par le code css de la balise style (car elles sont lues en second).
On rappelle que l'interprétation du code php est faite côté serveur: le client ne reçoit que les codes html, css construits côté serveur. C'est donc bien directement du css que votre navigateur interprète (sans avoir à interpréter du php) pour les couleurs observées ici.
Exercice 4☘
On modifie la page précédente en la page suivante (nommée quatre.php):
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur </title>
<?php
echo "<style>";
echo "body{background: orange; color: brown;}" ;
echo "</style>";
?>
<style>
body{
background: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Une page colorée.</p>
</body>
</html>
On envoie la page par ftp sur notre serveur. Quelle page obtient-on?
Réponse
On a ici une page sur fond jaune, texte gras rouge.
Le code css obtenu par php est en effet maintenant placé avant celui du code css écrit directement. C'est donc le code
style>
body{
background: yellow;
color: red;
font-weight: bold;
}
</style>
Le code reçu par le client est le suivant:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur </title>
<style>body{background: orange; color: brown;}</style>
<style>
body{
background: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Une page colorée.</p>
</body>
</html>
Exercice 5☘
Qu'obtient-on avec la page cinq.php:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleur 1 </title>
<?php
echo "<style>";
echo "body{background: orange; color: brown;}" ;
echo "</style>";
?>
<style>
body{
background: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Une page colorée.</p>
<script>
const corps = document.querySelector("body");
corps.style.backgroundColor = "black"; // couleur de fond en noir
corps.style.color = "yellow"; // couleur de texte en jaune
</script>
</body>
</html>
Réponse
On obtient un fond noir, texte jaune gras. Le code javascript est en effet exécuté codé client en fin de chargement de page.