République Algérienne Démocratique et Populaire

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

UNIVERSITÉ DE BLIDA 1, Faculté des Sciences, Département d’Informatique

Développement WEB(L2)

TP2
Dr. MIDOUN Khadidja
K_miodun@esi.dz

2020-2021
 Tableaux
Dr. MIDOUN Khadidja 4/30/2021 2
Structure d’un Tableau
 La balise <table>: L’élément essentiel dans la création de tableaux. Elle se compose de
trois parties:
1) Partie head: Défini par la balise <thead>: element defines a set of rows defining the
head of the columns of the table.

2) Partie body : Défini par la balise < tbody >. It encapsulates a set of table rows,
indicating that they comprise the body of the table.

3) Partie foot : Défini par la balise < tfoot >. It encapsulates a set of table rows
summarizing the columns of the table.

Dr. MIDOUN Khadidja 4/30/2021 3

Les balises pour un Tableau

Dr. MIDOUN Khadidja 4/30/2021 4

Les balises pour un Tableau
 La balise <table>: L’élément essentiel dans la création de tableaux.
1. Les attributs:
o<align>: La manière dont la table doit être aligné (left, center, right)
o<bgcolor>: définit la couleur d'arrière-plan de toutes les cellules (#000000)
o<border>: spécifier l'épaisseur de la bordure extérieure.
o< width >: Précise la largeur du tableau. ( indiquée en pixel ou en pourcentage).

Dr. MIDOUN Khadidja 4/30/2021 5

Les balises pour un Tableau
 La balise <table>: L’élément essentiel dans
la création de tableaux.
2. Les balaise
La balise <caption> : Définir un titre au
tableau, l'attribut align a la valeur top ou
bottom.
La balise <cellpadding>: Spécifier
l'espace entre bordures et contenu des
cellules.
La balise <cellspacing>: Spécifier
l'épaisseur des bordures entre cellules.

Dr. MIDOUN Khadidja 4/30/2021 6

Les balises pour un Tableau

 La balise <tr> : (pour table row). Définir chacune des lignes du tableau.
 La balise <th> : (pour table head). Définir des cellules d'entêt
 La balise <td> : (pour table data) Définir chacune des cellules d’une ligne. Les
attribus
1. Les attributs:
o<colspan>: Indique que la cellule courante s'étend sur plusieurs colonnes.
o<rowspan>: Indique que la cellule courante s'étend sur plusieurs lignes.
o<nowrap>: Empêche les sauts de lignes à l'intérieur de la cellule courante.

Dr. MIDOUN Khadidja 4/30/2021 7

Les balises pour un Tableau

Dr. MIDOUN Khadidja 4/30/2021 8

 EXERCICE 02

Dr. MIDOUN Khadidja 4/30/2021 9

Exercice 2
Exercice 2 (Tableaux) :
Reconstituer le tableau suivant :
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.
Note: On n'essaiera pas de tout faire à la fois !

Dr. MIDOUN Khadidja 4/30/2021 10

Exercice 2:
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.

Dr. MIDOUN Khadidja 4/30/2021 11

Exercice 2:
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.

Dr. MIDOUN Khadidja 4/30/2021 12

Exercice 2:
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.

Dr. MIDOUN Khadidja 4/30/2021 13

Les tableaux en HTML

Dr. MIDOUN Khadidja 4/30/2021 14

 EXERCICE 03

Dr. MIDOUN Khadidja 4/30/2021 15

Exercice 3
Exercice 3 (Liens relatives) :
1. Créer les différents dossiers et fichiers de cette arborescence.

Dr. MIDOUN Khadidja 4/30/2021 16

Exercice 3:
Solution:
1. Créer un Nouveau dossier avec le Nom « site »
2. Ouvrir le dossier « site »
3. Créer deux dossiers, Le premier avec le nom « Nos Produits » et le deuxième avec le nom «Societé»
4. Ouvrir le dossier « Nos Produits » et créer un dossiers avec le nom« Détails Produits ».

Dr. MIDOUN Khadidja 4/30/2021 17

Exercice 3
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.

Dr. MIDOUN Khadidja 4/30/2021 18

Exercice 3

Dr. MIDOUN Khadidja 4/30/2021 19

Exercice 3
• 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 :

Dr. MIDOUN Khadidja 4/30/2021 20

Exercice 2:
Solution:
1. Ouvrir le dossier « site »
2. Ouvrir le dossier « Societé »
3. Créer un fichier html avec le Nom «quisommenous.html »

Dr. MIDOUN Khadidja 4/30/2021 21

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

Dr. MIDOUN Khadidja 4/30/2021 22

Exercice 2:
Solution:
1. Ouvrir le dossier « Nos Produits »
2. Créer un fichier html avec le Nom «ListeProduits.html »

Dr. MIDOUN Khadidja 4/30/2021 23

Exercice 3
• 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" :

Dr. MIDOUN Khadidja 4/30/2021 24

Exercice 2:
Solution:
1. Ouvrir le dossier «Nos Produits»
2. Ouvrir le dossier «Détails Produits»
3. Créer des fichiers html avec les noms "produit-1.html" ,"produit-2.html","produit-3.html"

Dr. MIDOUN Khadidja 4/30/2021 25

 Devoir pour TP03

Dr. MIDOUN Khadidja 4/30/2021 26

Exercice 4
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
1. Insérer une vidéo de votre choix dans une page html.

Dr. MIDOUN Khadidja 4/30/2021 27

 Merci pour votre attention

k_midoun@esi.dz

Dr. MIDOUN Khadidja 4/30/2021 28