Exercice

Données

Soit les informations suivantes relatives à l'histoire de l'informatique :

  • - 3000 Octogone de Fuxi : Il contient les huit premiers nombres représentés sous forme binaire par des traits.

  • -1750 Code d'Hammourabi : Le roi de Babylone a fait graver une stèle composée d'un ensemble de sentences royales sous une forme de type « si alors ».

  • -330 Logique : La logique est définie par le philosophe grec Aristote.

Question

Proposez un fichier HTML permettant d'intégrer ces informations, en utilisant uniquement des éléments div et span dans le body.

Solution

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
      <title>Histoire de l'informatique</title>
5
      <meta charset="utf-8">
6
      <link rel="stylesheet" href="style.css">
7
    </head>
8
    <body>
9
      <div class="event"><span class="date">- 3000</span> <span class="title"> Octogone de Fuxi</span> : <span class="description">Il contient les huit premiers nombres représentés sous forme binaire par des traits.</span></div>
10
      <div class="event"><span class="date">-1750</span> <span class="title">Code d'Hammourabi</span> : <span class="description">Le roi de Babylone a fait graver une stèle composée d'un ensemble de sentences royales sous la forme : SI {personne} ET {action} ALORS {sentence}.</span></div>
11
      <div class="event"><span class="date">-330</span> <span class="title">Logique</span> : <span class="description">La logique est définie par le philosophe grec Aristote.</span></div>
12
    </body>
13
</html>
14
Question
Proposez une feuille de style CSS permettant l'affichage suivant.
  • La couleur par défaut est gray.
  • Chaque événement comporte :
    • une bordure à gauche (border-left) grise de 2 pixels (solid gray 2px),
    • un décalage à gauche par rapport à cette bordure (padding-left) de la moitié de la taille de la police (0.5em),
    • une marge sous le bloc (margin-bottom) de la moitié de la taille de la police.
  • Les dates sont en gras.
  • Les titre sont en noir.
  • Les description sont en italique.
Indice
1
color: gray
2
margin-bottom: 0.5em
3
padding-left: 0.5em
4
border-left: solid gray 2px
5
font-weight: bold
6
font-style: italic
Solution
1
body {
2
  color: gray;
3
}
4
5
.event {
6
  border-left: solid gray 2px;
7
  padding-left: 0.5em;
8
  margin-bottom: 0.5em;
9
}
10
11
.date {
12
  font-weight: bold;
13
}
14
15
.title {
16
  color: black;
17
}
18
19
.description {
20
  font-style: italic;
21
}
22