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 "testStyle.css" pour modifier la page HTML
correspondante :

/* testStyle.css */
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