À 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".
| <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> |
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.
