-Ms02-
Nous allons nous intéresser aux images
____________________
Nous allons introduire des images sur nos réalisations ...
Commençons par mettre la même couleur à toutes nos cellules ...
<html>
<table width=1000 border=0 align=center bgcolor=#FF5500 cellspacing=2 cellpadding=3>
<tr> <td width=200 bgcolor=#AABBFF rowspan=2> Bonjour </td>
<td width=400 bgcolor=#AABBFF> Comment vas-tu ? </td>
<td width=300 bgcolor=#AABBFF> Moi ça va </td>
<td width=100 bgcolor=#AABBFF rowspan=3> Super </td></tr>
<tr> <td width=800 bgcolor=#AABBFF colspan=2> A bientôt </td> </tr>
<tr> <td width=900 bgcolor=#AABBFF colspan=3> Parfait </td> </tr>
</table>
</html>
Passons aux images ...
Il faut créer un dossier nommé images dans le dossier Monsite et rechercher une petite image dans votre ordinateur ou sur le web que vous placerez à l'intérieur de ce dossier images. Moi, j'ai l'image oeuf.jpg.
Voyez ce que cela donne avec ensuite des améliorations de présentation, au centre puis ces images redimensionnées, l'une avec width et l'autre avec height ...
Simple ... N'est-ce pas !
<html>
<table width=1000 border=0 align=center bgcolor=#FF5500 cellspacing=2 cellpadding=3>
<tr> <td width=200 bgcolor=#AABBFF rowspan=2> <img src=images/oeuf.jpg > </td>
<td width=400 bgcolor=#AABBFF> <img src=images/oeuf.jpg > </td>
<td width=300 bgcolor=#AABBFF> <img src=images/oeuf.jpg > </td>
<td width=100 bgcolor=#AABBFF rowspan=3> <img src=images/oeuf.jpg > </td></tr>
<tr> <td width=800 bgcolor=#AABBFF colspan=2> <img src=images/oeuf.jpg > </td> </tr>
<tr> <td width=900 bgcolor=#AABBFF colspan=3> <img src=images/oeuf.jpg > </td> </tr>
</table>
</html>
Images centrées et un fond blanc, c'est plus beau car l'image a un fond blanc ...
<html>
<table width=1000 border=0 align=center bgcolor=#FF5500 cellspacing=2 cellpadding=3>
<tr><td width=200 align=center bgcolor=#FFFFFF rowspan=2><img src=images/oeuf.jpg ></td>
<td width=400 align=center bgcolor=#FFFFFF><img src=images/oeuf.jpg></td>
<td width=300 align=center bgcolor=#FFFFFF><img src=images/oeuf.jpg></td>
<td width=100 align=center bgcolor=#FFFFFF rowspan=3><img src=images/oeuf.jpg></td></tr>
<tr><td width=800 align=center bgcolor=#FFFFFF colspan=2><img src=images/oeuf.jpg></td></tr>
<tr><td width=900 align=center bgcolor=#FFFFFF colspan=3><img src=images/oeuf.jpg></td></tr>
</table>
</html>
Une largeur de 150px et une hauteur de 400px
<html>
<table width=1000 border=0 align=center bgcolor=#FF5500 cellspacing=2 cellpadding=3>
<tr><td width=200 align=center bgcolor=#FFFFFF rowspan=2><img src=images/oeuf.jpg width=150></td>
<td width=400 align=center bgcolor=#FFFFFF><img src=images/oeuf.jpg></td>
<td width=300 align=center bgcolor=#FFFFFF><img src=images/oeuf.jpg></td>
<td width=100 align=center bgcolor=#FFFFFF rowspan=3><img src=images/oeuf.jpg></td></tr>
<tr><td width=800 align=center bgcolor=#FFFFFF colspan=2><img src=images/oeuf.jpg height=400></td></tr>
<tr><td width=900 align=center bgcolor=#FFFFFF colspan=3><img src=images/oeuf.jpg></td></tr>
</table>
</html>
Vous allez créer un nouveau fichier nommé suite01.htm dans votre dossier Monsite et vous allez l'améliorer en suivant les différentes images proposées ...
Vous découvrirez des liens vers le web pour examiner des couleurs courantes et dans la suite j'utiliserai les couleurs white, green, red ...
Vous créerez un autre fichier nommé suite02.htm
Vous verrez également la possibilité d'appeler un site sur le web en cliquant sur une image ...
Ici, nous mettons juste en place le lien vers le fichier suite01.htm ...
<html>
<table width=1000 border=0 align=center bgcolor=#FF5500 cellspacing=2 cellpadding=3>
<tr><td width=200 align=center bgcolor=#FFFFFF rowspan=2><img src=images/oeuf.jpg width=150></td>
<td width=400 align=center bgcolor=#FFFFFF><img src=images/oeuf.jpg></td>
<td width=300 align=center bgcolor=#FFFFFF><img src=images/oeuf.jpg></td>
<td width=100 align=center bgcolor=#FFFFFF rowspan=3><img src=images/oeuf.jpg></td></tr>
<tr><td width=800 align=center bgcolor=#FFFFFF colspan=2><img src=images/oeuf.jpg height=400></td></tr>
<tr><td width=900 align=center bgcolor=#FFFFFF colspan=3><img src=images/oeuf.jpg></td></tr>
<tr><td width=900 align=center colspan=4><a href=suite01.htm> Suite01 </a></td></tr>
</table>
</html>
Voilà ce que vous devez écrire dans le fichier suite01.htm ...
Je pense que c'est parfaitement compréhensible !
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=30>
<tr><td align=center bgcolor=white><a href=accueil.htm> Accueil </a></td></tr>
</table>
</html>
Améliorons ce fichier suite01.htm avec ces adresses vers des sites expliquant les couleurs sur le web ...
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=30>
<tr><td align=center bgcolor=wheat ><a href=accueil.htm> Accueil </a></td></tr>
</table>
<table width=1000 border=0 bgcolor=white height=60><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=red cellspacing=2 cellpadding=20>
<tr><td align=center bgcolor=wheat >
<a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a></td></tr>
</table>
</html>
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=30>
<tr><td align=center bgcolor=wheat ><a href=accueil.htm> Accueil </a></td></tr>
</table>
<table width=1000 border=0 bgcolor=white height=60><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=red cellspacing=2 cellpadding=20>
<tr><td align=center bgcolor=wheat >
<a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a></td></tr>
</table>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=30>
<tr><td align=center bgcolor=white><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=wheat ><a href=accueil.htm> Accueil </a></td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=30>
<tr><td width=200 align=center bgcolor=wheat >
<a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a></td>
<td width=800 align=center bgcolor=wheat >
<a href=https://www.photo-paysage.com/><img src=images/paysage.jpg width=500> </a></td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=gold><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
On enlève la couleur de fond pour l'image ...
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=wheat ><a href=accueil.htm> Accueil </a></td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=30>
<tr><td width=200 align=center bgcolor=wheat >
<a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a></td>
<td width=800 align=center >
<a href=https://www.photo-paysage.com/><img src=Images/paysage.jpg width=500> </a></td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=gold><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
On imbrique ...
Le fait de placer une table dans un "td.../td" permet de mieux gérer les éléments placés à l'intérieur de cette table de données.
Voyez ce que vous pouvez réaliser avec la dextérité que vous venez d'acquérir ...
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=gold ><a href=accueil.htm> Accueil </a></td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=0>
<tr><td width=200 align=left valign=top bgcolor=wheat>
<table width=150 border=0 cellspacing=2 cellpadding=5>
<tr><td>
<a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a></td></tr>
</table>
</td>
<td width=800 align=center bgcolor=cyan >
<table width=750 border=0 cellspacing=0 cellpadding=20>
<tr><td align=center>
<a href=https://www.photo-paysage.com/><img src=images/paysage01.jpg width=200></a>
<a href=https://www.photo-paysage.com/><img src=images/paysage02.jpg width=100></a>
<a href=https://www.photo-paysage.com/><img src=images/paysage03.jpg width=200></a>
</td></tr>
</table>
</td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=gold><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=gold ><a href=accueil.htm> Accueil </a></td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=0>
<tr><td width=200 align=left valign=top bgcolor=wheat>
<table width=150 border=0 cellspacing=2 cellpadding=5>
<tr><td>
<a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a></td></tr>
</table>
</td>
<td width=800 align=center bgcolor=cyan >
<table width=750 border=0 cellspacing=0 cellpadding=20>
<tr><td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage01.jpg width=200></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage02.jpg width=100></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage03.jpg width=200></a></td>
</tr>
</table>
</td></tr>
</table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=10>
<tr><td align=center bgcolor=gold><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
<html>
<table width=1000 border=0 bgcolor=white height=50><tr></tr></table>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=2>
<tr><td align=center bgcolor=gold><a href=accueil.htm> Accueil </a></td></tr>
</table>
<TABLE width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=0>
<tr>
<td width=200 align=left valign=top bgcolor=wheat >
<table width=150 border=0 cellspacing=0 cellpadding=5>
<tr><td><a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a>
</td></tr>
</table>
</td>
<td width=800 align=center bgcolor=cyan >
<table width=750 border=0 cellspacing=0 cellpadding=20>
<tr><td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage01.jpg width=200></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage02.jpg width=100></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage03.jpg width=200></a></td>
</tr>
<tr><td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage01.jpg width=100></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage03.jpg width=150></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage02.jpg width=200></a></td>
</tr>
</table>
</td>
</tr>
</TABLE>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=2>
<tr><td align=center bgcolor=gold><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
Le body à présent ... avec une belle couleur du fond et une marge de 50 pour remplacer la table ...
<html>
<body style="margin:50; background-color:lavender;"></body>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=2>
<tr><td align=center bgcolor=gold><a href=accueil.htm> Accueil </a></td></tr>
</table>
<TABLE width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=0>
<tr>
<td width=200 align=left valign=top bgcolor=wheat >
<table width=150 border=0 cellspacing=0 cellpadding=5>
<tr><td><a href=http://www.commentcamarche.net/contents/490-codes-couleur-html> Les couleurs </a><BR><BR>
<a href=http://www.toutes-les-couleurs.com/code-couleur-html.php> Autres couleurs </a>
</td></tr>
</table>
</td>
<td width=800 align=center bgcolor=cyan >
<table width=750 border=0 cellspacing=0 cellpadding=20>
<tr><td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage01.jpg width=200></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage02.jpg width=100></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage03.jpg width=200></a></td>
</tr>
<tr><td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage01.jpg width=100></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage03.jpg width=150></a></td>
<td width=250 align=center><a href=https://www.photo-paysage.com/><img src=images/paysage02.jpg width=200></a></td>
</tr>
</table>
</td>
</tr>
</TABLE>
<table width=1000 border=0 align=center bgcolor=green cellspacing=2 cellpadding=2>
<tr><td align=center bgcolor=gold><a href=suite02.htm> Suite02 </a></td></tr>
</table>
</html>
Voir les programmes en action : Cliquez ici
