Ministère de l’Enseignement Supérieur

Direction Générale des Etudes Technologiques

Institut Supérieur des Etudes Technologiques de Sfax
Classes : L1 TI Date : 29/10/2018
Matière : Programmation Web1 Documents : Non autorisés
Durée : 1 heure Nbre pages : 2
Enseignants : S. Hammami, H. Lamine, S. Feki, S. Hadhri
*Il sera tenu compte de la présentation

Devoir de contrôle
Etude de cas :
On suppose que le site « SC » est composé de :

• Une page nommée « accueil.html ».

• Dossier « inscription » contenant une page nommée « inscrire.html ».
• Dossier « images » contenant les différentes images et qui sont respectivement :
« logo.png », « img_pres.png » et « img_cont.png » relatives à la page « accueil.html » et
« retour.png » relative à la page « inscrire.html ».

Exercice 1 :
Voici l’aperçu de la page « accueil.html » :
Entête
Navigation
Entête

Infos complémentaires
Section

Article
Pied

Donner le code HTML5 de cette page, sachant que :

Page 1 /2
 • Logo « Computer » présenté par l’image « logo.png » est un lien hypertexte vers l’email « contact@sc.fr ».
• Les tableaux sont de bordure 2.
• Les titres « Accueil », « Menu », « Présentation » et « Contact » sont des titres H1, les autres parties texte
sont des paragraphes.
• Dans la zone navigation : Accueil, présentation et contact sont des liens hypertextes internes. De même
pour les deux liens retour qui ramènent vers le titre « Menu ». les quatre ancres qui doivent être créées
sont : « A-A » pour le titre « Accueil » dans la zone entête, « A-M » pour le titre « Menu » dans la zone
navigation, « A-P » pour le titre « Présentation » dans la zone section et « A-C » pour le titre « Contact »
dans la zone infos complémentaires.
• Le lien inscrire dans la zone infos complémentaire est un lien hypertexte vers la page « inscrire.html ».

Exercice 2 :
Voici l’aperçu de la page « inscrire.html » :

Donner le code HTML5 de cette page sachant que :

• Le champ « Civilité » est une liste de taille 1, et contient les valeurs M pour Marié(e), C pour
célibataire.
• Les champs « Nom » et « Prénom » sont obligatoires.
• Le champ du formulaire « Commune de naissance », est renseigné par le message « ville ou
municipalité ».
• Ajouter l’info bulle « Tél mobile » pour le champ « Téléphone ».
• Le champ « Courriel » est de type email.
• Le champ « Site Web » est de type url.
• Le champ « autres : » est une zone de texte ayant au max 25 colonnes.
• Le lien de « retour » présenté par l’image « retour.png » est un lien hypertexte vers la page
« accueil.html ».

Page 2 /2