l'atelier 6
css
Année universitaire : 2023-2024
Exercice 1:
p.hover_example:hoverspan {
color: red;
body {
color: blue;
h1 {
color: green;
.h1 {
color: blue;
span {
color: #14F2AC;
Appliquez le code CSS au code HTML donné.
Exercice 2:
Voici le fichier CSS "[Link]" pour modifier la page HTML
correspondante :
/* [Link] */
body {
background-color: yellow;
h1 {
color: red;
font-style: italic;
p. 1
}
p{
text-align: justify;}
ul, ol {
list-style-type: none;
li {
color: gray;
Exercice 3:
<a href="lien vers le site de l'ISET" class="button">ISET</a>
Ajoutez le code CSS correspondant pour le style du bouton :
.button {
background-color: #aaa;
border: 1px solid #555;
color: #555;
padding: 10px 20px;
text-decoration: none;
.button:hover {
background-color: #555;
color: #aaa;
Exercice 4:
<div class="container">
<imgsrc="chemin de l'image" height="600" width="800" alt="Image">
<p>Texte</p>
p. 2
<div class="histogram">
<div class="bar red"></div>
<div class="bar green"></div>
<div class="bar blue"></div>
</div>
</div>
Ajoutez le code CSS correspondant pour le style de la page :
.container {
position: relative;
.histogram {
position: absolute;
bottom: 20px;
left: 20px;
width: 100%;
.bar {
height: 100px;
width: 1px;
margin-right: 10px;
.red {
background-color: red;
.green {
background-color: green;
p. 3
}
.blue {
background-color: blue;
Exercice 5:
Pour représenter la page de la manière indiquée, utilisez le code HTML
suivant :
<header>
<h1>La page</h1>
</header>
<aside>
<nav>
<!-- Contenu de la navigation -->
</nav>
</aside>
<main>
<section>
<!-- Contenu de la section -->
</section>
</main>
<footer>
<!-- Contenu du pied de page -->
</footer>
Ajoutez le code CSS correspondant pour le style de la page :
header {
width: 600px;
p. 4
float: left;
margin-top: 40px;
margin-right: 60px;
aside {
float: right;
width: 750px;
margin-top: 130px;
footer {
width: 600px;
float: left;
margin-bottom: 300px;
section {
float: left;
margin-top: 120px;
Exercice 6:
Pour réaliser le tableau demandé, utilisez le code HTML suivant :
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
p. 5
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Donnée 3</td>
<td>Donnée 4</td>
</tr>
</table>
Exercice 7:
Pour réaliser le formulaire demandé, utilisez le code HTML suivant :
<form>
<fieldset>
<legend>Titre du formulaire</legend>
<label for="input1">Label 1</label>
<input type="text" id="input1">
<label for="input2">Label 2</label<input type="text" id="input2">
<label for="textarea1">Label 3</label>
<textarea id="textarea1"></textarea>
<label for="select1">Label 4</label>
<select id="select1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<ul>
<li><label><input type="radio" name="radio" value="option1">Option 1</label></li>
<li><label><input type="radio" name="radio" value="option2">Option 2</label></li>
p. 6
<li><label><input type="radio" name="radio" value="option3">Option 3</label></li>
</ul>
<input type="submit" value="Envoyer">
</fieldset>
</form>
p. 7
