TP1 – Partie 1 : Rappel sur les cadres

Ce TP permet de réaliser un petit site web en utilisant la technique des cadres (frameset) en HTML. Il enseigne comment structurer une page web avec plusieurs zones indépendantes, chacune affichant un contenu différent. Pour réaliser ce TP, il faut disposer d’un éditeur de texte et d’un navigateur web, ainsi que des fichiers images nécessaires.

Objectifs

• Créer plusieurs pages HTML distinctes avec des contenus spécifiques.
• Utiliser la balise <FRAMESET> pour organiser un site web en plusieurs cadres.
• Appliquer des styles simples (couleurs de fond, alignements, tailles de titres).
• Gérer les liens qui ciblent des cadres spécifiques.

Prérequis et installation

• Connaissances de base en HTML.
• Un éditeur de texte pour écrire les fichiers HTML.
• Un navigateur web compatible avec la balise <FRAMESET> (ex : Firefox, Internet Explorer).
• Une image nommée photo.jpg placée dans un dossier images à la racine du site.

Création de la page entete.html

Cette page sert d’en-tête du site. Elle doit avoir un fond de couleur #F3DB9C et contenir une image ainsi que deux titres organisés dans un tableau.

• Placez l’image photo.jpg dans le dossier images à la racine.
• Insérez l’image avec une hauteur de 160px et une largeur de 120px.
• Créez un tableau pour aligner l’image à gauche et les titres à droite.
• Le titre principal est un <h1> aligné à gauche, le sous-titre est un <h2> centré.

Une page correcte affiche l’image à gauche sur fond #F3DB9C, avec les titres bien positionnés à côté.

Création de la page menu.html

Cette page contient le menu de navigation. Elle doit avoir un fond #F8E4B1 et un titre « Menu ».

• Le titre « Menu » est un <h2> aligné à gauche.
• Organisez le menu dans un tableau.
• Le menu principal « accueil » est un lien vers index.html qui s’ouvre dans toute la fenêtre.
• Les sous-menus « Mon CV », « Mes Projets », « Inscrivez-vous » et « Contactez-moi » pointent respectivement vers MonCV.html, MesProjets.html, Inscrivez-vous.html et Contactez-moi.html, et s’ouvrent dans le cadre nommé « contenu ».

Le menu doit être visible sur fond #F8E4B1, avec les liens fonctionnels et ciblant les bons cadres.

Création de la page contenu.html

Cette page affiche le contenu principal. Elle doit avoir un fond beige, avec des titres et paragraphes centrés.

• Les trois titres sont des <h2> centrés.
• Les paragraphes sont également centrés.
• Insérez un trait horizontal (<hr>) de largeur 60% après les deux premiers paragraphes.

Le résultat doit montrer des titres et paragraphes centrés sur fond beige, avec un trait horizontal visible après les deux premiers paragraphes.

Création de la page footer.html

Cette page sert de pied de page. Elle doit avoir un fond #F3DB9C et un paragraphe centré.

• Le paragraphe contient l’adresse email « [email protected] ».
• Cette adresse est un lien mailto vers [email protected].

La page doit afficher le texte centré sur fond #F3DB9C, avec un lien email fonctionnel.

Création de la page index.html avec les cadres

Cette page organise les quatre pages précédentes en cadres (frames) selon la disposition suivante :

• Cadre entête : hauteur 25%.
• Cadre menu : largeur 15%.
• Cadre contenu : largeur 85%.
• Cadre footer : hauteur 15%.

Pour cela, remplacez la balise <body> par un <FRAMESET> qui définit les cadres :

<FRAMESET ROWS="25%, 75%">
  <FRAME SRC="entete.html" NAME="entete" NORESIZE>
  <FRAMESET COLS="15%, 85%">
    <FRAME SRC="menu.html" NAME="menu" NORESIZE>
    <FRAME SRC="contenu.html" NAME="contenu">
  </FRAMESET>
</FRAMESET>
<FRAMESET ROWS="85%, 15%">
  <FRAME SRC="contenu.html" NAME="contenu">
  <FRAME SRC="footer.html" NAME="footer" NORESIZE>
</FRAMESET>

Note : Le TP demande d’intégrer le footer dans un cadre de 15% de hauteur. Une solution simple est d’ajouter un <FRAMESET> imbriqué ou d’adapter la structure pour inclure le footer en bas.

Supprimez toutes les bordures des cadres en ajoutant l’attribut frameborder="0" à chaque <FRAME>.

Un exemple simplifié conforme au TP :

<FRAMESET ROWS="25%, 75%" FRAMEBORDER="0">
  <FRAME SRC="entete.html" NAME="entete" FRAMEBORDER="0" NORESIZE>
  <FRAMESET ROWS="85%, 15%" FRAMEBORDER="0">
    <FRAMESET COLS="15%, 85%" FRAMEBORDER="0">
      <FRAME SRC="menu.html" NAME="menu" FRAMEBORDER="0" NORESIZE>
      <FRAME SRC="contenu.html" NAME="contenu" FRAMEBORDER="0">
    </FRAMESET>
    <FRAME SRC="footer.html" NAME="footer" FRAMEBORDER="0" NORESIZE>
  </FRAMESET>
</FRAMESET>

Le résultat doit afficher la page entête en haut (25% hauteur), le menu à gauche (15% largeur), le contenu à droite (85% largeur) et le footer en bas (15% hauteur), sans bordures visibles entre les cadres.

Résultats attendus

• La page index.html affiche quatre cadres distincts : entête, menu, contenu et footer.
• Les couleurs de fond et les alignements des textes correspondent aux spécifications.
• L’image photo.jpg s’affiche correctement dans l’entête avec les dimensions 160x120 px.
• Les liens du menu fonctionnent : « accueil » recharge la page index.html dans toute la fenêtre, les autres liens s’ouvrent dans le cadre « contenu ».
• Le trait horizontal de largeur 60% est visible dans la page contenu.html après les deux premiers paragraphes.
• Le lien email dans le footer est actif et ouvre le client mail.
• Aucune bordure n’est visible entre les cadres.

Erreurs courantes

• Ne pas placer l’image photo.jpg dans le dossier images à la racine, ce qui empêche son affichage.
• Oublier d’ajouter l’attribut NAME aux cadres, ce qui empêche les liens de cibler correctement le cadre « contenu ».
• Utiliser des tailles incorrectes pour les cadres, ne respectant pas les pourcentages demandés.
• Ne pas supprimer les bordures des cadres, ce qui dégrade l’aspect visuel.
• Ne pas centrer les titres et paragraphes dans contenu.html selon les consignes.
• Omettre le trait horizontal après les deux premiers paragraphes dans contenu.html.
• Ne pas faire pointer les liens du menu vers les bonnes pages ou ne pas spécifier la cible « contenu » pour les sous-menus.
• Confondre les balises <FRAMESET> et <BODY> : le fichier index.html doit utiliser <FRAMESET> à la place de <BODY>.