Les Ancres
Les ancres sont une forme
de lien qui permet d'envoyer l'utilisateur exactement où vous
voulez dans votre site. Ce n'est pas une page qui est visé mais
un point précis d'une page de votre site.
Exemple : cliquez
ici
les ancres sont très
pratiques pour faire un menu en début de page, permettant ainsi
à l'utilisateur d'aller directement là où il veut.
Voyons comment
créer une ancre :
Tout d'abors choisissez
un point spécifique de votre page. Dans notre cas je vais créer
une ancre en bas de page. Je vais écrire ceci : <a
name="ancre">Ancre en bas de page</a> On
utilise donc les balises <a></a>. Pour appeller cette ancre
je vais faire un lien vers celle-ci en écrivant ceci : <a
href="#ancre">Aller en bas de page</a> On
utilise la méthode classique pour faire un hyperlien, mais à
la différence que l'on ne met pas l'url de la page mais le nom
de l'ancre précédé d'un #.
Aller en bas de page
Pour aller à une ancre qui se trouve sur une autre
page de votre site on va utiliser un hyperlien classique en y ajoutant
le nom de l'ancre visée. Dans l'exemple du début j'ai
écrit ceci : <a href="bmp.htm#decomp">cliquez
ici</a> Vous pouvez voir que j'ai fait un
lien vers la page bmp.htm et que j'ai coller le nom de l'ancre visée
qui est ici decomp précédé d'un #. Je vous rappelle
que l'on peut aussi visée une page d'un autre site en utilisant
l'url complet de la page visée.
Les tableaux
Sachez que j'utilise les tableaux pour ma mise en page,
mais que cette méthode est dépassé depuis l'arrivé
du CSS ainsi que pour... euh... faire des tableaux.
Le squelette d'un tableau
:
<table border="1" width="75%"></table>
Ici nous avons donc un tableau vide de bordure de 1 et
de largeur égale à 75% de la largeur de la fenêtre
du navigateur. Vous pouvez ainsi modifier à convenance ces valeurs.
Exemple : <table border="3" width="50%"></table>
Il est possible aussi de définir la largeur
du tableau en pixel comme ceci : <table border="2"
width="500px"></table> Il suffit
de mettre px après la valeur désirée.
Il est possible aussi de définir
l'espacement du contenu du tableau en pixel à l'aide de cellpadding="10px"
et même de définir l'espacement entre chaque cellules à
l'aide de cellspacing="10px".
Notez que j'ai pris des valeurs au hazard en pixel. pour effectuer ces
modifications il suffit de les intégrer dans la balise <table>
comme ceci : <table border="2"
width="500px" cellpadding="5" cellspacing="5"
></table>
On peut modifier la couleur du fond
d'un tableau en ajoutant à la balise <table> la commande
bgcolor="#0000FF". On
peut aussi définir la couleur de la bordure du tableau avec la
commande bordercolor="#FF00FF". Et
rien ne vous empêche de mettre une image en fond de votre tableau
avec la commande background="image.jpg"
Le contenu d'un tableau
: les cellules
Bon, c'est bien beau tout ça
mais avec la première partie on peut pas faire un tableau. Pour
pouvoir en faire un, il faut ajouter des balises <tr></tr>
pour les lignes et des balises <td></td> pour les colones.
Voici un exemple simple de tableau
:
Et voici le code de ce tableau :
<table width="40%"
border="1" bordercolor="#0000FF">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
</table>
Et maintenant un tableau composé de 2*2 cellules
:
| cellule 1 |
cellule 2 |
| cellule 3 |
cellule 4 |
Et voici le code de ce tableau :
<table width="40%" border="1"
bordercolor="#FF0000" bgcolor="#FFFF00">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
Vous pouvez voir l'effet des commandes que l'on
ajoute au tableau (ici la couleur de la bordure et celle du fond). Regardez
attentivement comment le code est écrit. C'est la méthode
la plus simple pour ne pas ce tromper : une balise par ligne !
On peut ajouter aux balises <td></td>
des commandes comme bgcolor, background, width, height (semblable à
width mais pour la hauteur)
Exemple :
| cellule 1 |
cellule 2 |
| cellule 3 |
cellule 4 |
Voici le code de ce tableau :
<table width="40%" border="1"
bordercolor="#9900FF" bgcolor="#CCFFCC">
<tr>
<td bgcolor="#00FFFF">cellule
1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td bgcolor="#6666FF">cellule
4</td>
</tr>
</table>
C'est très bien tout ça, mais comment on
fait pour centrer le contenu des cellules ?
C'est simple il suffit d'utiliser la commande align="center"
. Pour aligner vers la droite on utilisera align="right",
vers la gauche align="left". Les
commandes align servent à aligner le contenu horizontalement.
Exemple :
| cellule 1 |
cellule 2 |
| cellule 3 |
cellule 4 |
Le code :
<table width="40%" border="1"
bordercolor="#9900FF" bgcolor="#CCFFCC">
<tr align="center">
<td bgcolor="#00FFFF">cellule 1</td>
<td>cellule 2</td>
</tr>
<tr align="right">
<td>cellule 3</td>
<td bgcolor="#6666FF">cellule 4</td>
</tr>
</table>
Maintenant voyons voir comment se servir d'un tableau pour de la mise
en page.
Voici un exemple de tableau sans bordure :
|
Cellule
1 |
Cellule
2
Cellule 2
Cellule 2 |
Cellule
3
Cellule 3
|
Voici le code :
<table width="500px" height="400px"
border="0" background="../Image/mirmoalone.JPG">
<tr align="center" valign="middle">
<td width="49%" rowspan="2">
<p><font color="#0000FF" size="7">Cellule
1</font></p>
</td>
<td width="51%" height="237"
background="../Image/mirmoplaymini.JPG"><p><font
color="#FF0000" size="5">Cellule 2</font></p>
<p><font color="#0000FF" size="5">Cellule
2</font></p> <p><font color="#00FF00"
size="5"><strong>Cellule 2</strong></font></p>
</td>
</tr>
<tr align="center" valign="middle">
<td valign="top" background="../Image/mai.JPG"><p><font
color="#333333" size="4">Cellule 3</font><br>
<font color="#009900" size="7"><strong>Cellule
3</strong></font></p>
</td>
</tr>
</table>
Comme vous pouvez le constater, ça se complique un peu. Pour
avoir un tableau sans bordure, il suffit de mettre border="0".
Dans ce tableau, j'ai utilisé la commande background pour séparer
les cellules. Vous remarquerez que le remplissage du tableau se fait
en additionnant autant de fois possible l'image de fond. (Je vous recommande
d'ailleurs de ne pas mettre une grosse image en arrière plan
pour ne pas que votre page soit longue à charger.). vous pouvez
aussi notez que le contenu d'une cellule ne différe pas d'un
contenu de page normal, il est donc possible de concidérer une
cellule comme une page HTML.
Vous remarquerez l'utilisation de la commande rowspan. Cette commande
permet de diviser la cellule en plusieurs cellules. Ici la cellule est
divisée en 2 cellules verticalement.
Quand les cellules comptent plus d'une ligne on utilise les commandes
valign qui servent à aligner le contenu verticalement. Les commutateur
possible sont : top, bottom et middle. Les commandes align et valign
se complétent très bien.
Pour résumer rapidement les commandes vu dans ce cours voici
un tableau récapitulatif :
| Balises |
Commandes |
Fonctions |
| <table></table> |
width |
défini la lageur du tableau en % ou en px |
| height |
défini la hauteur du tableau en % ou en px |
| border |
défini la taille de la bordure en pixel (px) |
| bordercolor |
défini la couleur de la bordure |
| background |
défini l'image d'arrière plan du tableau |
| bgcolor |
défini la couleur d'arrière plan |
| cellpadding |
défini l'espacement entre les bordures et le contenu |
| cellspacing |
défini l'espacement entre les cellules |
| <tr></tr> |
align |
aligne le contenu horizontalement des lignes (left, center, right) |
| valign |
aligne le contenu verticalement des lignes (top, middle, bottom) |
| <td></td> |
align |
aligne le contenu horizontalement des colonnes (left, center,
right) |
| valign |
aligne le contenu verticalement des lignes (top, middle, bottom) |
| rowspan |
fractionne la cellule en plusieurs cellules |
| width |
défini la largeur de la cellule |
| height |
défini la hauteur de la cellule |
| bgcolor |
défini la couleur de fond |
| background |
défini l'image de fond de la cellule |
Ainsi que le code de ce tableau :
Ancre en bas de page
