Question de Cours :
- 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.
- 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.
- 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.
- 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.
- 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')">Masquer/afficher le paragraphe</button>
</body>
</html>
Probleme :
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;
}