Un corrigé de la série 04 sur le CSS, avec le code HTML & CSS

1) Pour avoir un fond de couleur jaune pâle, il faut ajouter le style :
style="background-color:rgb(255,255,128)" à la balise <body>
Ce qui donne :
<body style="background-color:rgb(255,255,128)">
Pour satisfaire le point 8), la balise est en réalité :
<body id='idBody' style="background-color:rgb(255,255,128)">

2) Pour avoir un paragraphe centré
de taille 16 points.

Code :

<div style="text-align:center; font-size:16pt;">
 2) Pour avoir un paragraphe centré<br>
 de taille 16 points.<br>
</div>

3) Pour avoir un paragraphe de couleur de fond bleu foncé,
de texte écrit en jaune, de taille 10 points,
il faut définir le style de paragraphe :

Code :

<div style=" background-color:rgb(0,0,128); 
             color:rgb(255,255,0);
             font-size:10pt;">
 3) Pour avoir un paragraphe de couleur de fond bleu foncé,<br>
 de texte écrit en jaune, de taille 10 points,<br>
 il faut définir le style de paragraphe :<br>
</div>

Autre version :

3b) Pour avoir un paragraphe de couleur de fond bleu foncé,
de texte écrit en jaune, de taille 10 points,
il faut définir le style de paragraphe :

Code :

Autre version :
<div style=" display:inline-block; 
             background-color:rgb(0,0,128); 
             color:rgb(255,255,0);
             font-size:10pt;">
 3b) Pour avoir un paragraphe de couleur de fond bleu foncé,<br>
 de texte écrit en jaune, de taille 10 points,<br>
 il faut définir le style de paragraphe :<br>
</div>

4) Pour aligner une image avec un texte.
Ici, c'est la balise <span> qui est utilisée.
Le code complet est écrit ci-dessous.

Code :

<span style='display:inline-block; vertical-align:middle;'>
4) Pour aligner une image avec un texte.<br>
   Ici, c'est la balise &lt;span&gt; qui est utilisée. &nbsp; <br>
   Le <b>code complet</b> est écrit ci-dessous.<br>
</span>
<img style="vertical-align:middle; width:192px; height:144px;" 
     alt="Accident_de_F1" src="images/accident_de_F1.jpg"> <br>

Autre possibilité :

4b) Pour aligner une image avec un texte.
Ici, l'utilisation de la balise <table> est utilisé, avec
Le code complet est écrit ci-dessous.

Code :

<table>
 <tr>
  <td style="vertical-align:middle;">
   4b) Pour aligner une image avec un texte.<br>
      Ici, l'utilisation de la balise <table> est utilisé, avec   <br>
      Le code complet est écrit ci-dessous.<br>
  </td>
  <td>
  <img style="vertical-align:middle; width:192px; height:144px;"
       alt="Accident_de_F1" src="images/accident_de_F1.jpg"> 
  </td>
 </tr>
</table>

5) Un texte, suivit d'une image ayant un texte écrit sur l'image.
Code :

5) Un texte, suivit d'une image ayant
<span style='display:inline-block; 
             vertical-align:middle; 
             background:url(images/bouton-noir.png) no-repeat;
             color:white;
             width:150px;
             height:50px;
             padding:5px 5px 5px 5px'>
un texte écrit sur l'image.
</span><br>

6) Utilisation d'une table pour centrer trois images.

Code :

6) Utilisation d'une table pour centrer trois images.<br>
<table style="width:100%">
 <tr>
  <td style="text-align:left;">
  <img style="width:60px; height:60px;" src="images/perle_100.png">
  </td>
  <td style="text-align:center;">
  <img style="width:60px; height:60px;" src="images/perle_101.png">
  </td>
  <td style="text-align:right;">
  <img style="width:60px; height:60px;" src="images/perle_102.png">
  </td>
 </tr> 
</table>

7) Modification d'une image lorsque l'on passe dessus avec la souris :
Code :

7) Modification d'une image lorsque l'on passe dessus avec la souris : 
<span class="image_change" 
      style="display:inline-block; vertical-align:middle; width:40px; height:40px; background-position:center;">
</span><br>

Défini dans entre les balise <style> et </style> :

<style>
 .image_change { 
 width:30px;
 height:30px;
 background:url("images/perle_100.png") no-repeat;
}
.image_change:hover {
background:url("images/perle_101.png") no-repeat;
}
</style>

8) Pour les plus avancés, on change la couleur du fond de la page :
Fond blanc .
Fond cyan .
Fond magenta .
Fond jaune clair .
Fond rouge .
Fond vert .
Fond bleu .

Code :

<p>
 <b>8) Pour les plus avancés, on change la couleur du fond de la page :</b><br>
 <span style="background-color:rgb(255,255,255); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(255,255,255)';" > 
       Fond blanc </span>.<br>
 <span style="background-color:rgb(0,255,255); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(0,255,255)';" > 
       Fond cyan </span>.<br>
 <span style="background-color:rgb(255,0,255); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(255,0,255)';" > 
       Fond magenta </span>.<br>
 <span style="background-color:rgb(255,255,128); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(255,255,128)';" > 
       Fond jaune clair </span>.<br>
 <span style="background-color:rgb(255,0,0); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(255,0,0)';" > 
       Fond rouge </span>.<br>
 <span style="background-color:rgb(0,255,0); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(0,255,0)';" > 
       Fond vert </span>.<br>
 <span style="background-color:rgb(0,0,255); color:rgb(0,0,0);"
       onclick="document.getElementById('idBody').style.backgroundColor='rgb(0,0,255)';" > 
       Fond bleu </span>.<br>
</p>

Plan du Site : Home page110c_serie01_corrige_avec_code.html

Page mise à jour le 13 novembre 2019 par Bernard Gisin
Hébergement par : www.infomaniak.ch