TD2 Correction

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 maquette.html
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- index.html

1. Créer une copie du fichier HTML maquette.html.
2. Enregistrer le fichier sous le nom index.html 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, style.css, se trouvant dans le dossier CSS (fichier
actuellement vide à créer).
Dans le corps de la page:

7. Ajouter l'image logo.png 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
http://notepad-plus-plus.org/
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 index.html et les enregistrer dans le dossier HTML avec
les noms suivants:
recherche.html contact.html evaluation.html inscription.html livres.html

11. Mettre à jour les liens hypertextes dans tous les fichiers y compris les liens vers le
fichier CSS.
Fichier index.html- Suite

NB: le contenu texte de ce fichier est à récupérer de la plateforme (td2.txt).
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- livres.html
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:
 http://www.eyrolles.com/Informatique/Livre/html5-et-css3-9782409003837
 http://www.eyrolles.com/Informatique/Livre/html-9782746029705
 http://www.eyrolles.com/Informatique/Livre/reussir-son-referencement-web-
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
Correction
Exercice 1: Page d'accueil de la bibliothèque de l'ESEN- index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Bibliothèque de l'ESEN</title>
<meta name="description" content="Site de la bibliothèque de l'Ecole Supérieure
d'Economie Numérique" />
<meta name="keywords" content="Economie numérique, Informatique, marketing,
e-commerce" />
<link rel="stylesheet" href="CSS/style.css" />
</head>
<body>
<header>
<img src="images/logo.png" alt="Logo de l'ESEN" class="logoESEN" />
<h1 id="titre_principal">Bibliothèque de l'ESEN</h1>
</header>
<nav>
<ul>
<li> <a href="#">Accueil</a> </li>
<li> <a href="HTML/livres.html">Liste des livres</a> </li>
<li> <a href="HTML/recherche.html">Recherche</a> </li>
<li> <a href="HTML/evaluation.html">Evaluation</a> </li>
<li> <a href="HTML/contact.html">Contact</a> </li>
</ul>
<form name="Recherche" method="post" action="recherche.php">
<input type="search" name="recherche" placeholder="Recherche">
<button type="submit" name="envoi">Chercher</button>
</form>
</nav>
<section>
<h2> Accueil de la bibliothèque de l'ESEN</h2>
<article>
<h3>Présentation de la bibiothèque </h3>
<p>La <strong>bibilothèque de l'ESEN</strong> offre un grand nombre
de livres couvrant plusieurs spécialités tels que <em>l'informatique</em>, le
<em>commerce électronique</em>, le <em>marketing</em>, etc.
Ses visiteurs sont toujours ravis par le nombre de livres et la qualité des
références récentes choisies.<br/>
Toutes les collections de la bibliothèque sont à la disposition de tous les
usagers (enseignants et étudiants) à condition de la présentation d’une <em>fiche de
Page 4
consultation</em> soigneusement remplie et de la carte de bibliothèque pour
l’étudiant.</p>
<blockquote><p>Pour plus de détails, veuillez consulter le site de

l'<strong>ESEN</strong> <a href="http://esen.tn" title="site officiel de l'ESEN"
target="_blank">«http://esen.tn»</a></p></blockquote>
</article>
<article>
<h3>Réglement de la bibiothèque</h3>
<p>Voici le réglement interne de la <strong>bibilothèque de
l'ESEN</strong> :</p>
<h4>La consultation sur place</h4>

<ul>
<li>Périodiques : Ils ne sont offerts que pour une consultation sur
place pour tous les usagers de la bibliothèque.</li>
<li>Documents audio-visuels : Les CD-ROM, les cassettes audio, les
cassettes vidéo</li>
<li>Ouvrages de références : Dictionnaires, Encyclopédies,
Lexiques, Index, Guides,…</li>
<li>Les projets de fin d’études</li>
<li>Les ouvrages en un seul exemplaire.</li>
</ul>
<h4>Le prêt à domicile</h4>
<ul>
<li>Etudiants : Un (1) livre pour 3 jours</li>
<li>Enseignants : Trois (3) livres pour une (1) semaine renouvelable à
condition que le (s) document (s) en plus d’un exemplaire.</li>
</ul>
</article>
</section>
<footer>
<div>ESEN © 2018-2019 </div>
</footer>
</body>
</html>
Exercice 2: Page des livres de la bibliothèque de l'ESEN- livres.html

<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Bibliothèque de l'ESEN- Livres</title>
<meta name="description" content="Site de la bibliothèque de l'Ecole Supérieure
d'Economie Numérique" />
Page 5
<meta name="keywords" content="Economie numérique, Informatique, marketing,
e-commerce" />
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<header>
<img src="../images/logo.png" alt="Logo de l'ESEN" class="logoESEN" />
<h1 id="titre_principal">Bibliothèque de l'ESEN</h1>
</header>
<nav>
<ul>
<li> <a href="../index.html">Accueil</a> </li>
<li> <a href="livres.html">Liste des livres</a> </li>
<li> <a href="recherche.html">Recherche</a> </li>
<li> <a href="evaluation.html">Evaluation</a> </li>
<li> <a href="contact.html">Contact</a> </li>
</ul>
<form name="Recherche" method="post" action="recherche.php">
<input type="search" name="recherche" placeholder="Recherche">
<button type="submit" name="envoi">Chercher</button>
</form>
</nav>
<section>
<h2>Présentation des livres de la bibliothèque </h2>
<article>
<h3>Liste des livres de la bibliothèque </h3>
<table>
<caption>Liste des livres de la bibliothèque de
l'<strong>ESEN</strong></caption>
<thead> 
<tr>
<th>Titre</th>
<th>Image</th>
<th>Auteur(s)</th>
<th>Date de parution</th>
<th>Catégorie</th>
<th>Lien sur le Web</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Titre</th>
<th>Image</th>
<th>Auteur(s)</th>
<th>Date de parution</th>
Page 6
<th>Catégorie</th>
<th>Lien sur le Web</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>HTML5 et CSS3</td>
<td><img src="../images/livres/1.png" title="HTML5 et CSS3"
alt="HTML5 et CSS3"> </td>
<td>Christophe Aubry</td>
<td>12/10/2016</td>
<td>Programmation Web</td>
<td>
<a href="http://www.eyrolles.com/Informatique/Livre/html5-et-css3-
9782409003837" target="_blank" title="HTML5 et CSS3">HTML5 et CSS3</a>
</td>
</tr>
<tr>
<td>HTML</td>
<td><img src="../images/livres/2.png" title="HTML" alt="HTML">
</td>
<td>Collectif Eni</td>
<td>28/10/2005</td>
<td>Programmation Web</td>
<td>
<a href="http://www.eyrolles.com/Informatique/Livre/html-
9782746029705" target="_blank" title="HTML">HTML</a>
</td>
</tr>
<tr>
<td>Réussir son référencement web 2015<br/>
Stratégies et techniques SEO.</td>
<td><img src="../images/livres/9.png" title="référencement web"
alt="référencement web"> </td>
<td>Olivier Andrieu</td>
<td>19/02/2015</td>
<td>Référencement Web</td>
<td>
<a href="http://www.eyrolles.com/Informatique/Livre/reussir-son-
referencement-web-2015-9782212141184" target="_blank" title="Réussir son
référencement web 2015">Réussir son référencement web 2015</a>
</td>
</tr>
</tbody>
</table>
</article>
</section>
Page 7
<footer>
<div>ESEN © 2018-2019 </div>
</footer>
</body>
</html>
Page 8

TD2 Correction

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TD2 Correction

Transféré par

Droits d'auteur :

Formats disponibles

Université de la Manouba

Ecole Supérieure d'Economie Numérique

Avant de commencer ...

La structure du site Web doit être créée.

Exercice 1: Page d'accueil de la bibliothèque de l'ESEN- index.html

Dans l'entête de la page:

Dans le corps de la page:

recherche.html contact.html evaluation.html inscription.html livres.html

Fichier index.html- Suite

12. Le premier article a le titre "Présentation de la bibliothèque"

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.

Son aperçu est le suivant:

<blockquote><p>Pour plus de détails, veuillez consulter le site de

<h4>La consultation sur place</h4>

Exercice 2: Page des livres de la bibliothèque de l'ESEN- livres.html

Vous aimerez peut-être aussi