Institut Supérieur d'Informatique

et de Mathématiques de Monastir Année universitaire : 2022-2023

SERIE DE TP N° 1

Matière : Programmation Web Filière : CPI2

Enseignant : M. BEN SALEM

Création des documents HTML

Objectif :
Le but de ce TP est de comprendre la structure d'un document HTML et comment créer des
pages HTML.

1. Exercice 1
Créez une page nommée Exercice1.html, dans cette page on fait apparaître plusieurs mises en
forme des titres et des paragraphes. Cette page HTML comprendra trois parties détaillées ci-
dessous. Il est conseillé de vérifier dans le navigateur le travail réalisé après chaque partie. Pour
cela, enregistrez la page avec le bloc-notes et réactualisez la page web dans votre navigateur.
La description de la page (voir la figure 1) à réaliser est donnée comme suit :
 Le fond de la page sera en bleu et le texte par défaut en blanc.
 La mise en forme du document est :

 1ère partie :
o Le titre de niveau 1 « h1 » centré : « PREMIERE PARTIE »
o Un paragraphe ayant le texte suivant en rouge : « Je suis le premier paragraphe, je
suis rouge »
o Une ligne séparatrice de taille 2 et de couleur rouge
 2ème partie :
o Le titre de niveau 2 « h2 » centré : « DEUXIEME PARTIE »

Page 1 / 4
 o Un paragraphe centré composé de trois lignes suivantes avec le texte qui est en jaune
et de taille 5 : « Je suis le 2eme paragraphe au centre en taille 5 et en jaune »
o Une ligne séparatrice horizontale de taille 7, de 300 pixels de longueur et ayant la
couleur noire
 3ème partie :
o Le titre de niveau 3 « h3 » centré : « TROISIEME PARTIE »
o Un paragraphe, aligné à droite avec le texte suivant la police Arial et en taille 7 : « Je
suis le dernier paragraphe de la page, je suis avec la police Arial en taille 7 et aligné
à droite… ».

Figure 1 Résultat de la page Exercice_1.html

2. Exercice 2
Créer le document html qui permet d'obtenir cette hiérarchie :
I. Systèmes d'exploitation
1. Windows
2. Unix
II. Langages de programmation
1. Non orientés objets
 Cobol
C
2. Orientés objets
 Java
 Perl
 Python
 C++
III. Réseaux

Page 2 / 4
3. Exercice 3
Créer le document html qui permet d'obtenir

Libellé Qte Nombre Colis Prix Total

A1 200 Un 2000.25

B1 300 Deux 3000.00

C1 400 Trois 4000.00

4. Exercice 4
Créer le document html qui permet d'obtenir :

Salaires
Années
Sud Nord Total
2005 20M 18M 38M
2006 24M 21M 35M

5. Exercice 5
Créer le document html qui permet d'obtenir :

Comparatif modèle économique

Modèle Vitesse Consommation

en km/heure en litre/100 km
Marque Type Numéro de série
132 5,7
Peugeot 206 B2 234.34
126 5,5
Citroën AX AT67B8 6789

Page 3 / 4
 6. Exercice 6

paris.gif

papillon.gif

venus.gif

papillon.html
Left.html Venus1.html

Travail à faire
1. Développer les liens Venus1, Venus2 et Venus3 vers les pages HTML « Venus1.html »,
« Venus2.html » et « Venus3.html » ;
2. Programmer les liens papillon et bougie respectivement vers la page « papillon.html » et
la page « bougie.html » ;
3. Les images seront toutes enregistrées dans le même répertoire avec les pages HTML
développées ;
4. Programmer la page « Left.html » présentant le menu qui contient tous les liens vers les
autres pages du site ;
5. Diviser la page index.html en 3 cadres et programmer ses liens.

Page 4 / 4