### TD5 : "Avec des frames"

## But du TD

But :
Le but de ce TD est en quelque sorte de refaire le TD n°4 mais cette fois-ci, on utilsera les frames. C'est à dire qu'on aura le menu des planètes dans un cadre à gauche, puis les planètes et leur description dans un autre cadre, à droite de celui du menu, avec bien sûr des liens du menu vers ce que l'on appellera le corps de la page.

Quelques indications :
- Ne re-faites pas tout le code, servez-vous des morceaux de code des TD précédents pour faire les pages menu.html et corps.html (menu.html sera dans le cadre de gauche et corps.html dans le cadre de doite).
- N'oubliez pas les liens et le target !

## Correction

<frameset cols="20%,80%" >
<frame src="menu.html" name="menu" />
<frame src="corps.html" name="corps" />
</frameset >

<html>
<head>
<title>Le titre de votre page</title>
</head>
<body>
<p><em>Voici les planètes qui constituent notre système solaire. Pour en savoir plus cliquez sur le lien correspondant.</em></p>
<ul>
<li><a href="corps.html#mercure" target="corps"> Mercure </a></li>
<li><a href="corps.html#venus" target="corps">Vénus </a></li>
<li><a href="corps.html#laterre" target="corps"> La Terre </a></li>
<li><a href="corps.html#mars" target="corps"> Mars </a></li>
<li><a href="corps.html#jupiter" target="corps"> Jupiter </a></li>
<li><a href="corps.html#saturne" target="corps"> Saturne </a></li>
<li><a href="corps.html#uranus" target="corps"> Uranus </a></li>
<li><a href="corps.html#neptune" target="corps"> Neptune </a></li>
<li><a href="corps.html#pluton" target="corps"> Pluton </a></li>
</ul>
</body>
</html>

<html>
<head>
<title>Le titre de votre page</title>
</head>
<body>
<h1 align="center"><u>Le Système Solaire</u></h1>
<h3 align="center">Les Planètes :</h3>
<table>
<tr>
<td><img src="Images/Planetes/mercure.jpg" alt="Mercure" /></td>
<td><h3 id="mercure">Mercure</h3>
<p>De la taille de la lune, Mercure est la planète la plus proche du soleil.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/venus.jpg" alt="Vénus" /></td>
<td><h3 id="venus">Vénus</h3>
<p>Vénus est une planète tourmentée par des vents violents.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/terre.jpg" alt="La terre" /></td>
<td><h3 id="laterre">La Terre</h3>
<p>Notre belle planète !</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/mars.jpg" alt="Mars" /></td>
<td><h3 id="mars">Mars</h3>
<p>Mars est actuellement l'objet de nombreux programmes d'exploration.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/jupiter.jpg" alt="Jupiter" /></td>
<td><h3 id="jupiter">Jupiter</h3>
<p>C'est la plus grosse des planètes du système solaire.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/saturne.jpg" alt="Saturne" /></td>
<td><h3 id="saturne">Saturne</h3>
<p>La fameuse planète facilement reconnaissable à ses grands anneaux.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/uranus.jpg" alt="Uranus" /></td>
<td><h3 id="uranus">Uranus</h3>
<p>Une planète lointaine et mystérieuse.</p>
<p><a href="#" >Retour></a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/neptune.jpg" alt="Neptune" /></td>
<td><h3 id="neptune">Neptune</h3>
<p>La dernière des planètes géantes.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
<tr>
<td><img src="Images/Planetes/pluton.jpg" alt="Pluton" /></td>
<td><h3 id="pluton">Pluton</h3>
<p>Un astre éloigné, froid, accompagnée de son satellite Charon.</p>
<p><a href="#" >Retour</a></p></td>
</tr>
</table>
</body>
</html>

Essayer

#### Explications:

On a donc créé deux cadres horizontaux, gràce à l'attribut cols de la balise <frameset>, on a définit une taille, 20% pour le premier 80% pour le second. Ensuite on a créé nos zones avec les deux balises <frame />.
En ce qui concerne les pages "menu.html" et "corps.html", rien de particulier, ce n'est que des morceaux de code qu'on a déjà vu.

Essayer

retour haut