Université de la Manouba
Ecole Supérieure d'Economie Numérique
Programmation Web
TD1- HTML- Initiation
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 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é.
Exercice 1: Découverte
1. Créer un fichier HTML en utilisant le logiciel Notepad++.
2. Enregistrer le fichier sous le nom TD1.html dans le dossier HTML de votre site web
3. Ecrire dans ce fichier le code HTML de base suivant:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>le titre</title>
</head>
<body>
<p>Bonjour</p>
</body>
</html>
4. Visualiser le résultat dans un navigateur.
5. Valider le code HTML en utilisant le validateur en ligne du W3C,
http://validator.w3.org, à travers Validate by direct input.
6. Quel est le résultat de votre validation correcte?
1
http://notepad-plus-plus.org/
Page 1
Exercice 2: Création d'une maquette d'une page Web structurée avec les nouvelles
balises structurantes HTML5- Site de la bibliothèque de l'ESEN
Rappel:
HTML propose 6 niveaux de titres gras :
<h1> (grande taille) à <h6> (petite taille)
Exemple:
<h1>Titre de niveau 1</h1>
Un paragraphe commence par <p> et se termine par </p>. Le navigateur crée une
ligne blanche au-dessus et en dessous de chaque paragraphe.
1. Créer un fichier HTML en utilisant le logiciel Notepad++.
2. Enregistrer le fichier sous le nom maquette.html dans le dossier HTML de votre site
web.
3. Créer la maquette d'une page Web de votre site (à améliorer lors des prochains TDs),
sachant qu'elle contient:
a. Au niveau de l'entête, le titre: Bibliothèque de l'ESEN
b. Dans la zone de navigation les éléments du menu suivants: Accueil, Liste des
livres, Recherche, Evaluation, Contact
c. Une section avec un titre et un article
d. Au niveau du pied de page la mention: ESEN©2018-2019
4. Visualiser le résultat dans un navigateur.
5. Valider le code HTML en utilisant le validateur en ligne de W3C,
http://validator.w3.org.
Page 2
