Université de la Manouba
Ecole Supérieure d'Economie Numérique
Programmation Web
TD2- HTML- tableaux, liens, images, listes
Objectifs
-Utiliser un éditeur gratuit (Notepad++1) pour créer des pages Web.
- Développer des pages Web
- Visualiser les pages Web développés avec un ou plusieurs navigateurs
- Valider les pages Web en HTML5
Avant de commencer ...
La présentation avec CSS n’est pas demandée. Il s’agit de créer la structure des pages
uniquement.
La structure du site Web doit être créée.
Créer un dossier Web1 permettant de sauvegarder les travaux de ce cours.
Dans le dossier Web1, créer les dossiers suivants:
1. HTML
2. JS
3. CSS
4. images
Consignes:
Tout fichier HTML doit contenir le code HTML de base, et doit être validé.
Le modèle de la structure d'un fichier HTML5 présenté dans le fichier [Link]
doit être respecté (niveau des titres, titre par section, titre par article...)
Le dossier images est à télécharger de la plateforme (en format .zip)
Exercice 1: Page d'accueil de la bibliothèque de l'ESEN- [Link]
1. Créer une copie du fichier HTML [Link].
2. Enregistrer le fichier sous le nom [Link] dans le dossier Web1 de votre site web.
3. Spécifier que c'est la langue française qui sera utilisée.
Dans l'entête de la page:
4. La balise de titre doit contenir un titre significatif.
5. Ajouter les meta-balises permettant d'ajouter une description et les mots clés de la
page.
6. Ajouter le lien vers le fichier CSS, [Link], se trouvant dans le dossier CSS (fichier
actuellement vide à créer).
Dans le corps de la page:
7. Ajouter l'image [Link] figurant dans le dossier images, avec un texte alternatif et
une classe CSS "logoESEN".
8. Le titre de la page "Bibliothèque de l'ESEN" est identifié par "titre_principal".
1
[Link]
Page 1
9. Dans la zone de navigation, les éléments de la liste sont des liens hypertextes.
Ajouter un formulaire de recherche avec une zone de recherche et un bouton
d'envoi.
10. Créer des copies du fichier [Link] et les enregistrer dans le dossier HTML avec
les noms suivants:
[Link] [Link] [Link] [Link] [Link]
11. Mettre à jour les liens hypertextes dans tous les fichiers y compris les liens vers le
fichier CSS.
Fichier [Link]- Suite
NB: le contenu texte de ce fichier est à récupérer de la plateforme ([Link]).
12. Le premier article a le titre "Présentation de la bibliothèque"
13. Ajouter le paragraphe de présentation de la bibliothèque de l'ESEN, comme présenté
dans l'aperçu (Marquer les mots importants en utilisant les balises adéquates et
créer le décalage avant le texte plus de détails,...).
NB: le lien vers le site de l'ESEN s'ouvre dans une nouvelle fenêtre.
14. Le second article a le titre " Règlement de la bibliothèque"
15. Ajouter le contenu présenté comme présenté dans l'aperçu final.
Page 2
Exercice 2: Page des livres de la bibliothèque de l'ESEN- [Link]
1. Le premier article a le titre " Liste des livres de la bibliothèque". Les livres présentés
figurent dans le site de "Eyrolles" respectivement aux adresses suivantes:
[Link]
[Link]
[Link]
2015-9782212141184
Il est à noter que les images des livres sont dans le dossier images au niveau de
la plateforme.
2. Ajouter 2 autres livres de votre choix (Sauvegarder leurs images dans le dossier livre)
Son aperçu est le suivant:
Page 3