Tableau et liens

Avant de travailler sur les tableaux, il est bon de se rappeler quelques notions HTML de base.

La balise (TAG) qui définit le tableau est <TABLE> avec celle de la fin de la définition du tableau, à savoir </TABLE> : bien connaître celles-ci vont vous permettre de travailler sur les codes du tableau (par exemple, centrer l'entièreté du tableau etc.).

L'attribut "BORDER" definit les bordures du tableau.

Pour les lignes individuelles, celles-ci commencent par la balise <TR> (Table Row) et se termine par </TR> : dans cette balise sont définies les cellules qui vont composer la ligne, par <TD> et </TD> (Table Data). Vous pouvez aussi rencontrer <TH> et </TH> (Table Header), la différence entre les deux balises est que pour <TH>, le contenu des cellules créées est affiché en caractères gras et normal pour <TD>.

Premier tableau

Créons maintenant un tableau avec une seule rangée (ligne) et une seule colonne : un cadre par exemple. Pour ce faire, vous choisissez l'onglet "Tableaux, cadres et listes",

ensuite cliquez sur le bouton "Insérer un tableau",

vous obtenez ainsi la fenêtre de dialogue suivante :

 Laisser les options par défaut, mais encodez dans "Esquisse", la phrase suivante "Tableau d'une seule ligne et d'une seule colonne (cadre)" : les codes suivants sont insérés dans votre page HTML :

<TABLE>
<TR>
<TD>Tableau d'une seule ligne et d'une seule colonne (cadre)</TD>
</TR>
</TABLE>

Vous constatez l'apparition des balises <TABLE>,<TR> et <TD>. Voyons ce que cela donne si je choisis deux colonnes et deux rangées :

<TABLE>
<TR>
<TD>
Colonne 1, rangée 1
</TD>
<TD>
Colonne 2, rangée 1
</TD>
</TR>
<TR>
<TD>
Colonne 1, rangée 2
</TD>
<TD>
Colonne 2, rangée 2
</TD>
</TR>
</TABLE>

Vous constatez dans cet exemple que les balises de rangées (lignes) <TR> contiennent celles des deux colonnes <TD>. Il est important pour vous de bien connaître ces balises car si, bien sûr, vous allez construire vos tableaux avec votre éditeur HTML, parfois vous devrez modifier ces tableaux et dans certains cas de tableaux compliqués, le faire "à la main" pourra être plus facile. Cependant, je vous rappelle que WebExpert est non seulement capable de créer vos tableaux directement, après le choix des fenêtres de dialogue, mais également de reprendre l'entièreté du tableau, pour autant que vous sélectionnez les codes de celui-ci : il est donc primordial de connaître au-moins les balises de début de tableau (<TABLE>) et de fin (</TABLE>) pour le sélectionner complètement avant de cliquer sur le bouton "Insérer un tableau" qui reprendra alors toutes les caractéristiques du tableau que vous aviez créé.

Vous pouvez ainsi fusionner des cellules, ajouter un bord autour du tableau (dans l'exemple, j'avais laissé expressément l'option du bord vide), mais encore centrer le texte dans les cellules (en cliquant sur le bouton de gauche "propriétés de la cellule ou de la rangée") et attribuer toutes sortes de propriétés pour l'ensemble du tableau comme ajouter un titre etc. Vous découvrirez celles-ci, par l'usage, mais sachez déjà que certaines propriétés ne sont possibles que dans un navigateur et pas l'autre : par exemple, vous pouvez attribuer un fond de cellule spécial dans Microsoft Internet Explorer et cette option n'est pas possible avec Netscape.

Vous pouvez centrer le tableau entier en sélectionnant le tableau entièrement, autrement dit en mettant en surbrillance les codes HTML depuis et y compris <TABLE> et </TABLE>. Ensuite vous cliquez sur le bouton "Centrer"   ou le raccourci clavier "CTRLM+E".

Les balises <DIV ALIGN="center"> et </DIV> entoureront ainsi les balises du tableau, ce qui donnera :

<DIV ALIGN="center"><TABLE>…codes du tableau…</TABLE></DIV>

Si vous désirez "cacher" le tableau, c'est-à-dire faire en sorte que votre texte et/ou vos images soient placées à certains endroits de votre page, il est intéressant d'employer un tableau pour effectuer cette opération mais bien sûr, ne pas ajouter de bord pour que celui-ci n'apparaisse pas.

On emploie la solution du tableau dans beaucoup de cas où justement, on n'arrive pas à formater son texte ou sa page comme on le désire.

C'est vrai que l'on peut aussi employer les cadres (frames) mais c'est une autre technique, que nous verrons dans une autre chronique, mais celle-ci n'est pas toujours la meilleure solution. Il reste le positionnement en CSS, par des feuilles de styles, mais dans ce cas, votre document ne sera pas correctement visionné par les visiteurs dont les navigateurs ne gèrent pas cette fonction. Pour de plus amples informations sur le positionnement dynamique, consultez le tutoriel "TutorDHTML".

Enfin, sachez que vous pouvez imbriquer des tableaux entre eux mais dans ce cas, WebExpert ne peut actuellement pas reprendre les codes d'un tableau déjà créé et auquel vous voudriez ajouter des modifications : de nouveau, dans ce cas, la connaissance des codes HTML du tableau sera nécessaire…

Voici les codes du tableau, mais cette fois avec un bord de "6" :

<TABLE BORDER=6>
<TR>
<TD>
Colonne 1, rangée 1
</TD>
<TD>
Colonne 2, rangée 1
</TD>
</TR>
<TR>
<TD>
Colonne 1, rangée 2
</TD>
<TD>
Colonne 2, rangée 2
</TD>
</TR>
</TABLE>

Vous pouvez visionner directement le résultat de ces différents tableaux…

Nous avons vu dans la chronique 7 "Images en coordonnées" comment insérer un lien vers notre adresse e-mail.

Insérer un lien (externe) vers notre page d'accueil, à partir d'une autre page, n'est pas plus difficile : on parle de "lien externe" lorsque l'appel se fait vers une autre page et "lien interne" lorsque l'appel se fait vers une autre partie de la page en cours.

Dans le cas du retour vers notre page d'accueil, il s'agit bien d'un "lien externe". Choisissez le texte ou l'image qui va constituer le lien proprement dit, sélectionnez-le et cliquez sur l'onglet "Spécialisés" et ensuite sur le quatrième bouton "Lien externe" ,  la boîte de dialogue apparaît, que vous connaissez maintenant (chronique 7) : cliquez sur le bouton de sélection du fichier qui servira de cible, en l'occurrence ici ce sera le fichier "index.html". 
Pour rappel, Internet Explorer peut rendre visible un attribut "TITLE" dans le code de votre lien, qui a pour effet de donner une petite bulle explicative (comme l'attribut "alt" pour les images) lorsque le curseur de votre souris est placé sur le lien. Pour l'instant, Netscape 4.x ne sait pas montrer cette petite bulle, contrairement à l'attribut "alt" qui est visible maintenant par les versions 4.x.

Les codes suivants sont insérés dans la page :

<A HREF="index.html" TITLE="Page d'accueil">Retour vers la page d'accueil</A>

J'ai choisi ici un texte pour constituer le lien "Retour vers la page d'accueil" mais vous pouvez choisir une image et dans ce cas, c'est le code de l'image qui sera entouré des balises <A HREF="index.html"> et </A>, comme nous avons fait dans la chronique 7 pour une image d'e-mail.

Par exemple :

Il est souvent intéressant de pouvoir permettre à l'utilisateur d'aller à un endroit précis de la page : dans ce cas, il s'agit d'un "lien interne".

En premier lieu, vous devez constituer le lien, soit par un texte, soit par une image : lorsque celui-ci est tapé ou l'image insérée, vous sélectionnez le texte (ou le code de l'image) et choisir l'onglet "Spécialisés" mais cette fois, en cliquant sur le bouton "Lien interne" .

Supposons que vous désirez, à partir d'une ligne du document, permettre par un clic de vous rendre à un autre endroit de la page : "Visionnez le résultat" par exemple !

Sélectionnez la phrase qui va constituer le lien, ici "Visionnez le résultat", ensuite, cliquez sur le bouton "Lien interne" .

Dès que vous encodez, dans la fenêtre proposée, le nom du lien interne, ici "retour", les lignes de codes de la page apparaissent dans la partie inférieure de la fenêtre...

Choisissez alors sur la page, l'endroit où vous désirez que le lien interne renvoie, comme dans l'image ci-dessous, vers "lien interne"

WebExpert crée automatiquement le lien interne et la cible en créant deux codes distincts :

D'une part, celui de l'endroit (ligne de destination ou cible) où doit se rendre le visiteur, après avoir cliqué sur le lien interne :

<A NAME="retour">Lien interne</A>

et d'autre part, le code de lien interne proprement dit, que vous avez obtenu après avoir sélectionné le texte (ou l'image) et cliqué sur le bouton "Lien interne" :

<A HREF="#retour">Visionnez le résultat</A>

Résumons : en cliquant sur le lien hypertexte, constitué par le texte "Visionnez le résultat", vous vous rendez immédiatement à l'endroit de la page où se trouve placé le code <A NAME="interne">Lien interne</A>. Pour plus de facilité ici, j'ai d'abord matérialisé la cible par le texte "Lien interne" mais ce n'est pas nécessaire et vous pouvez l'enlever ensuite, car sinon, le texte sera apparent dans votre page : si la ligne que vous avez choisie existe réellement, c'est bon sinon, créez d'abord une ligne fictive comme ici, "Lien interne" et ensuite, enlevez les mots des codes HTML, pour ne plus obtenir que ceux-ci : <A NAME="interne"></A>. Dans la page exemple, j'ai enlevé le texte…

Bien sûr, vous pouvez combiner les deux, c'est-à-dire cible et lien : en effet, si je permets un lien hypertexte vers la fin de la page, je dois permettre de revenir au point de départ ! Cela s'effectue en créant deux liens internes, dont la cible est le lien de l'appel et inversement.

Lien externe vers un lien interne d'une page...

Enfin, je peux combiner lien externe et interne, dans le cas fréquent où je veux aller sur une page (par un lien externe) mais à un endroit précis de la page (lien interne).

Vous avez sûrement remarqué que dans la fenêtre de dialogue des liens externes, il existe un onglet "Destination(s) existante(s)" : il suffit que lorsque vous créez votre lien externe, vous cliquiez sur cet onglet et choisissez la destination qui vous intéresse : bien sûr, vous aurez du au préalable créer le lien interne dans cette page, sinon, WebExpert ne connaîtra pas l'existence de ce lien futur ;-)

Donc, première étape, créer le lien interne dans la page de destination, et en deuxième étape, créer dans la page d'appel le lien externe avec la destination voulue. En fait, le code "#destination" sera ajouté au code du lien externe :

Le code qui nous intéresse maintenant est "#lien" qui a été ajouté pour préciser au navigateur qu'il doit se rendre sur la page de destination, à l'endroit de la cible "lien". 
Le code TARGET="pageweb" correspond à l'onglet "Cible pour cadre" qui existe aussi dans la boîte de dialogue des liens externes et qui ne sont nécessaires que dans le cas de l'existence de cadres. 
L'attribut alt="Retour vers la chronique 8" constitue le contenu de la bulle qui s'affiche quand vous placez le curseur de votre souris sur l'image ou celui qui apparaît quand l'image n'est pas chargée.

Voilà, vous êtes capable de créer un lien externe vers une page extérieure, précisez même l'endroit où vous désirez que le navigateur parvienne et enfin, créer un ou des liens internes au sein d'une même page.

Dans la prochaine chronique, nous parlerons des cadres (frames) et comment les créer.