Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
Vous êtes sur la page 1/ 8
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:
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>
<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>
<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> <!-- En-tête du tableau --> <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>
