Université Saad Dahlab Blida (Blida 1)

Département d’informatique
Deuxième année licence

Module : Développement d’applications Web

Série de TP N°1 (partie 1) : HTML
Objectif du TP : Apprendre à manipuler les balises de HTML pour pouvoir créer des pages web
statiques contenant du texte, des tableaux, des images, des vidéos …etc.
Outils :
 Un des éditeurs de texte windows ou bien un éditeur dédié tels que SublimeText
https://www.sublimetext.com/3
 Un navigateur web : internet explorer, google chrome, Mozila Firefox ou tout autre navigateur
web.
Exercice 1 (Mise en forme du texte) :
1. Il est demandé de créer une première page HTML de base, à l'aide du "Notpad++", « BlocNote » de
Windows.
Réaliser une page html composée des éléments suivants (exemple ci-dessous) :
 un titre de niveau 1 composé d'une abréviation "XML" sans oublier de mentionner sa
signification au niveau de l'attribut "title".
 un titre de niveau 2 et un paragraphe.
 le titre "exemple" contient un code xml préformaté (comme illustré sur l'image).
 une ligne horizontale
 un paragraphe contenant : le mot "citation" souligné suivi d'une citation courte et le nom de
l'auteur en italique.
 Des commentaires.

2. Créer un document html contenant des listes numérotées et des listes à puce comme illustré ci-
dessous.
FZ. Zahra
 Exercice 2 (Tableaux) : Reconstituer le tableau suivant :
On n'essaiera pas de tout faire à la fois !
1. Déclarer un tableau de largeur 90% de la largeur de la fenêtre, aligné au centre, avec une
bordure de 1.
2. Déclarer un entête au tableau (balise <thead>), constitué d'une ligne de trois colonnes de type
header.
3. Déclarer un <tbody>.
4. Déclarer une première ligne constituée de trois cellules simples.

5. Déclarer la deuxième ligne constituée de deux colonnes assemblées, et d'une troisième

colonne
6. Aligner le texte à droite dans la première cellule de la ligne
7. Déclarer une troisième "ligne" constituée de deux cellules simples, et d'une cellule assemblant
deux lignes.
8. Aligner le texte en bas dans la dernière colonne.
9. Déclarer une quatrième ligne constituée de deux cellules simples (expérimenter ce qui se passe
en déclarant une cellule de moins, ou une cellule de plus ; interpréter).
10. Déclarer une cinquième ligne constituée d'une cellule simple et d'une cellule regroupant deux
colonnes et deux lignes.
11. Aligner le texte au centre et en haut dans la dernière cellule.
12. Compléter le tableau par une dernière ligne. Combien faut-il de cellule.

Exercice 3 (Liens relatifs) :

1. Créer les différents dossiers et fichiers de cette arborescence.

FZ. Zahra
2. Utiliser les liens relatifs afin de réaliser ce qui suit :
 la page index.html dans le dossier site, contenant un sommaire vers les différentes pages
comme illustré dans la figure ci-dessus.

 la page "qui-somme-nous.html" contient une description de l'équipe et deux liens : un lien vers
la page "list-produits" et un lien vers la page contact comme suit :

 La page "list-produits" affiche des liens vers les 3 produits :

 Les pages "produit-1.html" ,"produit-2.html","produit-3.html" contiennent les détails du

produit et un lien qui renvoie vers la page "list-produits" . Exemple de la page "produit-
1.html" :

 La page "contact.html"

Exercice 4 (Manipulation des images et des vidéos) :

Image-lien
1. Choisir une image sur votre disque local
2. Créer une page HTML ne comportant que cette image.
3. Changer les dimensions de l’image à 500 pixels de largeur et 400 pixels de hauteur.
4. La rendre globalement active : en cliquant sur cette image, on arrive à un URL par défaut au
choix (par exemple un lien externe www.google.com ).
Insertion d’une vidéo
Insérer une vidéo de votre choix dans une page html.

Bon Travail
FZ. Zahra