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).

Correction détaillée

Sujet original écrit pour Mission Carthage, dans le format d'un devoir pratique d'informatique (3ème Sciences de l'informatique, technologies du web). Ce n'est pas un sujet officiel.

Tout le programme : 3ème année Sciences de l'informatique · Revoir le cours · Tous les devoirs