Correction _ EXAMEN HTML & CSS
SOLUTION :
Question de Cours :
1. Pour répondre à la question "Qu'est-ce qu'une balise HTML et comment est-elle
utilisée?", une balise HTML est une instruction utilisée pour marquer le contenu
d'un document en indiquant son type (par exemple, titre, paragraphe, image).
Les balises sont utilisées pour structurer et organiser le contenu d'une page
web. Elles sont généralement utilisées en paires, avec une balise d'ouverture
et une balise de fermeture.
2. La différence entre HTML et CSS est que HTML est utilisé pour structurer et
organiser le contenu d'une page web, tandis que CSS est utilisé pour mettre en
forme ce contenu. HTML décrit la structure de la page web, tandis que CSS
décrit sa présentation.
3. Pour utiliser une feuille de style en cascade (CSS) pour mettre en forme un
document HTML, vous devez d'abord créer un fichier CSS séparé, puis lier ce
fichier à votre document HTML en utilisant la balise "link" dans la section
"head" de votre document HTML. Vous pouvez ensuite utiliser des sélecteurs
CSS pour sélectionner les éléments HTML que vous souhaitez mettre en forme,
et utiliser des propriétés CSS pour définir comment ces éléments doivent être
présentés.
4. Un sélecteur CSS est utilisé pour sélectionner les éléments HTML sur lesquels
vous souhaitez appliquer des règles de mise en forme. Il existe plusieurs types
de sélecteurs, tels que les sélecteurs d'élément, les sélecteurs de classe et les
sélecteurs d'ID.
5. Pour utiliser la propriété "display" en CSS pour contrôler l'affichage des
éléments HTML, vous devez d'abord sélectionner l'élément HTML en question
en utilisant un sélecteur approprié, puis définir la valeur de la propriété
"display" sur "none" pour masquer l'élément ou "block" pour l'afficher. Il existe
d'autres valeurs possibles pour "display" qui permettent de contrôler
l'affichage d'autres façons.
Exercice 01 :
<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
</head>
<body>
<h1>Titre de la page</h1>
<p>Voici un paragraphe sur ma page web.</p>
<img src="image.jpg" alt="Image de ma page">
</body>
</html>
Exercice 02 :
<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
p{
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
img {
width: 100%;
}
</style>
</head>
<body>
<h1>Titre de la page</h1>
<p>Voici un paragraphe sur ma page web.</p>
<img src="image.jpg" alt="Image de ma page">
</body>
</html>
Exercice 03 :
<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Titre de la page</h1>
<p id="paragraphe">Voici un paragraphe sur ma page web.</p>
<img src="image.jpg" alt="Image de ma page">
<button
onclick="document.getElementById('paragraphe').classList.toggle('hidden')">Masqu
er/afficher le paragraphe</button>
</body>
</html>
Problème :
un exemple de code HTML pour créer une page web qui affiche une liste de
téléphones avec des images et des détails :
<!DOCTYPE html>
<html>
<head>
<title>Liste de téléphones en vente</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Liste de téléphones en vente</h1>
<ul>
<li>
<h2>Téléphone 1</h2>
<img src="telephone1.jpg" alt="Téléphone 1">
<p>Description : Écran de 5,5 pouces, appareil photo de 12MP, mémoire
interne de 64GB.</p>
<p>Prix : $600</p>
</li>
<li>
<h2>Téléphone 2</h2>
<img src="telephone2.jpg" alt="Téléphone 2">
<p>Description : Écran de 6,1 pouces, appareil photo de 16MP, mémoire
interne de 128GB.</p>
<p>Prix : $800</p>
</li>
<li>
<h2>Téléphone 3</h2>
<img src="telephone3.jpg" alt="Téléphone 3">
<p>Description : Écran de 6,5 pouces, appareil photo de 20MP, mémoire
interne de 256GB.</p>
<p>Prix : $1000</p>
</li>
</ul>
</body>
</html>
Voici un exemple de code CSS pour mettre en forme la page HTML ci-dessus :
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-bottom: 50px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 25px;
padding: 25px;
border: 1px solid gray;
}
h2 {
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
p{
margin-bottom: 5px;
}
