Cours création de site Web

Nous continuons notre cours d'initiation à la création de site web avec les liens hypertextes.

Les liens hypertextes sont des liens qui permettent à votre site Internet d'être connecté à d'autres sites en les recommandant à vos visiteurs. Mais encore, ce sont aussi des liens à l'intérieur de votre site qui permettent à vos visiteurs d'aller d'une page à une autre.

Nous allons donc voir, dans ce chapitre de notre cours de création de site Internet, les liens internes, les liens externes, les redirection et le rafraîchissement.

Les liens d'ancrage

Avec les liens internes, c'est la possibilité offerte à vos visiteurs de parcourir facilement tout votre site, d'une page à une autre.

La balise utilisée pour tout lien hypertexte est la balise <A> (A comme Adresse Internet). Cette balise s'utilise avec </A> comme balise de fermeture.

La balise <A> s'utilise toujours soit avec l'attribut NAME soit avec l'attribut HREF.

L'attribut NAME s'utilise essentiellement pour la création de liens dits d'ancrage, c'est à dire à l'intérieur d'une même page web.

Alors que l'attribut HREF va servir à la création de liens internes de navigations soit au sein de votre site, soit vers d'autres pages web appartenant à d'autres sites sur la Toile.

Ci-dessous, quelques exemples de liens internes dits liens d'ancrage. Le principe de fonctionnement est simple : en cliquant sur un lien d'ancrage, vos internautes arrivent sur une partie déterminée de la même page visitée.

Le code pour faire des sauts à l'intérieur d'une même page est décrit ic-dessous. Bien sûr, on n'est pas obligé d'avoir une liste. Mais, c'est tout de même la pratique qui est celle des FAQ , Questions Fréquemment Posées.

Faîtes, une fois de plus, l'exercice dans votre fichier test.html.

<OL TYPE="A"> <!-- Pour avoir une liste ordonnée -->
<LI> <A HREF="#A">Noms commençant par A </A>
<LI> <A HREF="#B">Noms commençant par B </A>
<LI> <A HREF="#C">Noms commençant par C </A>

</OL>

Maintenant, voici les ancrages (paragraphes) vers lesquels vont s'effectuer les sauts de navigation et de consultation.

<A NAME="Début"></A>
<A NAME="A"></A>Les noms commençant par A</A>
Armand <BR />
Alain <BR />
Antoine <BR />
Adèle <BR />

<A HREF="#Début">Retour au Début</A>

<A NAME="B"></A>Les noms commençant par B</A>
Bogard <BR />
Bernard <BR />
Boris <BR />
Benjamin <BR />

<A HREF="#Début">Retour au Début</A>

etc...

Un peu d'explications. D'abord, dans ce type de liens hypertextes, vous aurez noté le signe dièze (#) qui permet de comprendre dans votre code HTML que nous avons affaire à un lien dit d'ancrage, et donc que ce lien renvoie à un autre endroit de la même page.

D'autre part, nous avons utilisé pour chaque lien la balise <A> avec l'attribut NAME. Chaque lien d'ancrage utilise le même paramètre dans son attribut NAME que le paragraphe auquel il renvoie. Ainsi, <LI> <A HREF="#B"> va renvoyer au paragraphe <A NAME="B"></A>Les noms commençant par B</A>.

Dans votre document HTML, vous pouvez remplacer le paramètre "B" par n'importe quel mot de votre choix.

Autre chose : quand vous utilisez la balise <A>, n'oubliez pas la balise de fermeture </A>.

Les liens internes et les liens externes

Les liens hypertextes internes et externes sont des liens qui permettent soit de naviguer à l'intérieur d'un même site, soit de visiter une autre page web d'un site autre que le vôtre.

Ici aussi, nous allons utiliser la balise <A> avec ses attributs qui sont HREF et TARGET.

Voici, au hasard, un lien interne à ce site que vous pouvez visiter : http://www.arobasenet.com/creation-de-sites-gratuits.php.

En cliquant sur ce lien, vous devez aller sur une autre page Internet de ce même site sur lequel vous êtes actuellement.

En principe, tous les liens cliquables d'un site web ont la couleur bleue et sont soulignés. Mais, cela peut changer au gré des fantaisies de chaque webmaster.

On peut créer des liens à partir d'un texte mais aussi à partir d'une image. Nous le verrons dans le chapitre suivant sur les images.

Si vous envoyez votre visiteur vers une autre page Web ou vers un autre site et que vous ne souhaitez pas le perdre, il extrêment important de rajouter dans votre balise <A> l'attribut TARGET (cible) avec le paramètre _blank. Ce qui va ressembler à ceci :
<A HREF="http://www.Monadresse.com" TARGET="_blank">Résultat : La page à visiter va s'ouvrir dans une nouvelle fenêtre</A>

Mais, il existe d'autres paramètres à cet attribut TARGET qui ne nous semblent pas utiles. Sauf dans l'utilisation de frames !

Les redirections et rafraîchissements (refresh)

La redirection et le rafraîchissement (refresh) sont une autre forme de lien hypertexte. Seulement, ils restent invisibles et n'ont pas besoin de clic pour afficher la page de destination. Vous vous y retrouvez automatiquement. Par Refresh ou rafraîchissement, il faut comprendre réactualisation.

Ces 2 "liens" s'insèrent dans l'entête de votre document HTML au niveau des balise META.

Nous allons donc voir la balise META avec son attribut HTTP-EQUIV. Et ce, en combinaison avec un autre attribut : CONTENT.

On utilise l'attribut HTTP-EQUIV pour rediriger automatiquement le visiteur vers une autre page web ou un autre site Internet au lieu de la page initialement prévu ou proposé.

Cet attribut n'est plus fréquemment utilisé mais vous pouvez vous en servir de façon temporaire quand une page est indisponible ou quand le site est en maintenance.

Voici le code pour créer votre redirection automatique : copiez-le dans un nouveau fichier test2.html et testez-le dans votre navigateur.

<HTML>
<HEAD>
<TITLE>Cours création site web</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="15; URL=http://www.arobasenet.com/cours-de-creation-de-site-web-les-liens-hypertextes.php">
</HEAD>
<BODY>
... Attention, redirection dans 15 secondes !
</BODY>
</HTML>

Attention : il y a un espace entre le "15;" et "URL".

Le paramètre 15 de l'attribut CONTENT représente le temps en secondes après lequel vous donnez l'ordre au navigateur de rediriger l'internaute vers le site indiquer dans l'attribut URL.

Si vous donnez au temps la valeur zéro, le visiteur sera automatiquement redirigé vers l'autre page sans attente.

On peut aussi utiliser l'attribut HTTP-EQUIV pour rafraîchir ou réactualiser des informations sur la page sur lequel il se trouve. Ci-dessous, le code pour réactualiser votre page :



<HTML>
<HEAD>
<TITLE>Cours création site web</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="20">
</HEAD>
<BODY>
... Réactualisation de la page chaque 20 secondes !
</BODY>
</HTML>

Un tel code avec la balise META et ses attributs HTTP-EQUIV et CONTENT va réactualiser la page en question toutes les 20 secondes.

Les paragraphes, Les listes, les liens hypertextes, les images, les tableaux et les astuces.


Suivez-nous sur :    Facebook    Twitter    Google Buzz    Tumblr    FriendFeed    Youtube

Cliquez sur le bouton FeedBurner ci-après pour vous abonner à notre flux RSS :  

Partagez cet article avec vos amis :

Partager |

Veuillez laisser un commentaire sur cet article dans l'espace prévu ci-dessous afin de partager votre point de vue.

Retrouvez d'autres articles sur Google, la création de site, l'optimisation, le référencement, le trafic web, les mots clés, le nom de domaine et l'hébergement web à partir de notre sélection de liens dans notre Plan de site.