· TP 4: Les Cadres

· Nom de l’enseignant : Pr Majdoulayne HANIFI

· Niveau : CPI - 2ème année

TP n° 4
Développement Web HTML\CSS
Les Cadres

Objectif :

L’objectif de ce TP est de se familiariser avec les balises de base du langage HTML.

D’une autre part le but est de mieux comprendre le fonctionnement de ces balises.

Nous allons nous intéresser à ce qui suit :

· Les cadres

Déroulement du TP :

Durant ce TP nous allons travailler avec l’éditeur de texte ‘Sublime-text’. Nous allons
voir les diffèrent cadre ‘inline frame’.

CPI2-UIR 2023/2024 Page 1

 · TP 4: Les Cadres
· Nom de l’enseignant : Pr Majdoulayne HANIFI
· Niveau : CPI - 2ème année

Exercice 1:
· Ecrire le code HTML permettant d’obtenir le résultat ci-dessous :
◦ La Page du Navigateur est divisée en 2 cadres.
◦ Le cadre de gauche comporte une liste comportant 4 liens.
◦ Chaque lien charge une page HTML différente dans le cadre de droite.

Exercice 2
Réaliser le "frameset" illustré par la copie d'écran ci-dessous :
◦ La zone de "pied de page" doit avoir 30 pixels de haut, et cette hauteur ne doit
pas être modifiable ; cette zone ne doit pas avoir d'ascenseurs
◦ La zone de "navigation" (à gauche) doit avoir 160 pixels de large, et cette
largeur doit pouvoir être modifiable
◦ Les zones de "navigation" et de page (à droite) proprement dite doivent avoir
des ascenseurs si nécessaire
◦ Les bordures entre frames doivent avoir 2 pixels de large
◦ Donnez des couleurs de fond différentes à chacun de ces frames
◦ Lorsque l'on clique sur "111" ou "222" dans le cadre de navigation, la page
correspondante doit s'afficher dans la zone de page ; par contre lorsque l'on
clique sur "back" la page de début doit remplir toute la fenêtre.

CPI2-UIR 2023/2024 Page 2

 · TP 4: Les Cadres
· Nom de l’enseignant : Pr Majdoulayne HANIFI
· Niveau : CPI - 2ème année

Exercice 3
Ecrire le code HTML qui permet de réaliser la page suivante :

CPI2-UIR 2023/2024 Page 3