Devoir pratique STI n°1 : le site du lycée, une page HTML5 avec listes, image et liens, et la feuille de style du site

Exercice 1 : la page de présentation du lycée (8 pts)

Le lycée Ibn Khaldoun de Sfax veut une page de présentation lycee.html, la page d'accueil de son site, qui contient :

• le titre d'onglet « Lycée Ibn Khaldoun » et le lien vers la feuille de style style.css du site (elle est écrite à l'exercice 2) ;
• un titre de niveau 1 « Lycée Ibn Khaldoun » puis un titre de niveau 2 « Nos sections » ;
• une liste à puces des sections : Sciences de l'informatique, Mathématiques, Sciences expérimentales ;
• une liste numérotée des étapes de l'inscription : Remplir la fiche, Déposer le dossier, Payer les frais ;
• l'image lycee.jpg, de texte alternatif « Façade du lycée », large de 300 pixels ;
• un lien « Site du ministère » vers http://www.education.gov.tn qui s'ouvre dans un nouvel onglet, et un lien « Club des sciences » vers la page club.html du site ;
• un paragraphe de classe intro « La participation au club est gratuite pour tous. » où le mot « gratuite » est mis en valeur (surligné).

• 1) Écrire la page lycee.html (6 pts).
• 2) Choisir la balise de chaque élément : une liste à puces, une liste numérotée, un élément d'une liste, un saut de ligne (2 pts).

Exercice 2 : la feuille de style du site (12 pts)

La page club.html du site est donnée. Comme lycee.html (exercice 1), elle est reliée à la feuille de style style.css :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Club des sciences</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Club des sciences</h1>
  <p class="intro">Le club ouvre ses portes chaque mercredi après-midi.</p>
  <p>Inscriptions auprès de <span class="nom">M. Gharbi</span>, au laboratoire.</p>
  <div id="cadre">Prochaine sortie : la Cité des sciences de Tunis.</div>
  <p><a href="lycee.html">Retour à la page du lycée</a></p>
</body>
</html>

• 1) Écrire la feuille de style style.css, commune aux deux pages du site, qui donne : a) au corps des pages un fond de couleur #f4f6f7 et la police Verdana (ou à défaut une police sans-serif) ; b) au titre h1 un texte centré, de couleur #154360 et de taille 32px ; c) aux paragraphes de classe intro un texte en italique de taille 18px ; d) à l'élément de classe nom un texte en gras et en majuscules ; e) à l'élément d'identifiant cadre une bordure pointillée de 2px de couleur #2e86c1, une marge intérieure de 10px et des coins arrondis de 8px ; f) à l'élément d'identifiant cadre une opacité de 0.9 (9 pts).
• 2) Choisir le sélecteur CSS de chaque cible : l'élément d'identifiant cadre, les éléments de classe intro, tous les paragraphes (3 pts).