Examen HTML & CSS : 01

EXAMEN HTML & CSS TEST 01/XX

Examinateur : Mr Joël_Yk

Question de Cours (05pts):

  1. Qu'est-ce qu'une balise HTML et comment est-elle utilisée ?
  2. Quelle est la différence entre HTML et CSS ?
  3. Comment utiliser une feuille de style en cascade (CSS) pour mettre en forme un document HTML ?
  4. Qu'est-ce qu'un sélecteur CSS et comment est-il utilisé pour sélectionner des éléments HTML ?
  5. Comment utiliser la propriété "display" en CSS pour contrôler l'affichage des éléments HTML ?

Exercice 1 (02pts):

Créez une page HTML simple qui contient un titre, un paragraphe et une image. Utilisez des balises appropriées pour chaque élément.

Exercice 2 (03pts):

Ajoutez une feuille de style en cascade (CSS) à votre page HTML créée dans l'exercice précédent. Utilisez des sélecteurs pour mettre en forme le titre, le paragraphe et l'image.

Exercice 3 (02pts):

Utilisez la propriété "display" pour masquer et afficher certains éléments de votre page HTML en utilisant les boutons.

Problème (08pts):

Vous êtes chargé de créer une page web pour une entreprise qui vend des téléphones. La page doit contenir une liste de tous les téléphones disponibles à la vente, avec des images et des détails sur chaque téléphone. Utilisez HTML et CSS pour créer la page.

 

Contact WhatsApp : +237 658395978 | Réaliser Par Joël_Yk

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')">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;
}

 

 

1 vote. Moyenne 5 sur 5.

Ajouter un commentaire

Anti-spam