### TD4 : "Inserton d'images / Repères des ancres / Positionnement"

## But du TD

À la fin de ce TD vous devriez pouvoir arriver au résultat suivant :

But :
Le but de ce TD est l'insertion d'images et les repères des ancres créées dans le TD précédent. On continuera aussi sur le positionnement grâce aux tables.

Quelques indications :
- Utilisation des "listes".

## Correction

<html>
<head>
<title>Le titre de votre page</title>
</head>
<body>
<h1 align ="center">Le système Solaire</h1>
<table>
<tr>
<td width="450 px"><em>Voici les planètes qui constituent notre système solaire.</em></td>
<td>
<li><a href="#mercure"> Mercure </a></li>
<li><a href="#venus">Vénus </a></li>
<li><a href="#laterre"> La Terre </a></li>
<li><a href="#mars"> Mars </a></li>
<li><a href="#jupiter"> Jupiter </a></li>
<li><a href="#saturne"> Saturne </a></li>
<li><a href="#uranus"> Uranus </a></li>
<li><a href="#neptune"> Neptune </a></li>
<li><a href="#pluton"> Pluton </a></li>
</td>
</tr>
</table>
<h1>Planètes :</h1>
<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:

Premier point : le positionnement : Vous remarquerez que chaque ligne du deuxième tableau (balise <tr>) est composée de deux colonnes, c'est-à-dire deux <td>, c'est pour que la partie texte se retrouve à droite de l'image et non en dessous.

Deuxième point: l'insertion d'images : Rien de bien difficile, on a indiqué le chemin relatif pour l'attribut src, et l'on a pas oublié l'attribut alt.

troisième point : les repères pour les ancres : Vous n'avez pas oublié, dans le TD précédent, on avait créé les ancres mais il faut bien les "liées" à une balise. C'est ce que l'on a fait avec l'attribut id ici. Pour la valeur , il suffit de remettre ce que l'on avait écrit après le # au moment où l'on a créé l'ancre.

retour haut