cette
fois, je crois qu'on va plonger...
Après avoir réalisé la "structure simplifiée
du Site" avec des petits carrés dessinés sur une feuille, vous
allez maintenant la matérialiser et créer enfin votre répertoire
qui est la partie de votre disque dur où vous stockez tous les éléments
composant votre site.
Lorsque vous déciderez plus tard de l'afficher sur le Web, c'est le
contenu de ce répertoire que vous téléchargerez à
l'aide d'un logiciel adéquat sur une fraction de disque dur attribuée
par le Provider lors de votre inscription. Vous parlez alors de votre page
perso.
En informatique l'ordre est indispensable, et je vous suggère d'ouvrir un dossier appelé "Le Setter" qui correspond au thème du site, pour y déposer toutes les pages concernant ce sujet. Pour les images plus tard.
- Pour la réalisation vous créez
votre page d'accueil ou HomePage. Très importante
étant donné que vos visiteurs vont (théoriquement) l'ouvrir
en premier et après avoir parcouru le sommaire, ils vont choisir un
lien hypertexte pour visualiser la suite... qui si elle n'est pas agréable
et mal renseignée... va les pousser à vous quitter et à
aller voir ailleurs ! La mise en page, la typographie, les couleurs choisies,
les images retenues sont des critères essentiels à ne pas négliger.
- Il reste à concrétiser tous ces petits carrés du brouillon, en ouvrant pour chacun d'eux dans votre traitement de texte, une page dans laquelle vous indiquez pour l'instant simplement le titre prévu et deux trois mots de texte pour le contenu suivant le modèle "essai n°3" donné page précédente. Vous enregistrez avec le même nom, assez court (environ 8/12 caractères), suivi d'un point et de l'extension htm ou html, et surtout sans espace ni accent. exemple : irlandais.htm pour le titre du fichier placé entre TITLE et "chien irlandais" avec ici les deux mots placés entre BODY représentant le contenu de ce fichier.
L'extension des fichiers texte, certains Provider vous l'imposeront : index. htm ou index. html, d'autres vous laisseront libre du choix et dans cette hypothèse préférez index.htm
- Et sans tenir compte des noms, voici un exemple partiel de la structure d'un site qui porte le titre CHIEN IRLANDAIS :
Vous allez à présent réaliser les liaisons
indispensables permettant de naviguer à l'intérieur de
votre site, et pour y parvenir vous devez créer des liens hypertexte.
Comme vous le concevez aisément et pour ce premier envol vous allez
choisir la solution la plus simple consistant à relier la HomePage
"index.htm" avec par exemple une page "chien.htm" d'une
part et la page "lexique.htm" d'autre part.
Par la suite vous pouvez prévoir d'accéder depuis la page "chien.htm"
(ou un autre fichier) vers des Utilitaires et des Jeux.
Il est prévu pour simplifier l'exemple que le sommaire du site se trouve sur la HomePage "index.htm" et à tout moment il est indispensable que vous puissiez y revenir pour choisir la page qui vous convient, et éventuellement permettre au visiteur avant de vous quitter de laisser un message e-mail. Songez à bien placer ces liens sans obliger à chercher dans tous les coins, ce qui reste valable pour l'ensemble des pages du site.
On parle plus de nous, à mon avis 
ils ont changé de thème ?
A partir du lien hypertexte qui se trouve sur la page affichée, vous le cliquez et "pointez" du même coup vers le document "cible" qui va remplacer la page précédente sur votre écran. Il ne reste plus qu'à découvrir les tags qui vont donner au navigateur les instructions correspondantes.
Au préalable, sachez qu'il existe deux types de liens :
- Le lien interne qui va s'appliquer uniquement
aux pages ou documents formant l'ensemble de votre site. (c'est-à-dire
votre répertoire) Sont normalement établis en chemins relatifs
: <A HREF="page33.htm">Lien vers la page 33</A>
- Le lien externe qui tout simplement ira chercher
sa cible à l'extérieur de votre propre site. (sur le répertoire
d'un autre webmaster) Sont normalement établis en chemins absolus :
<A HREF="http://www.aidenet.com">Lien vers aidenet</A>.
Vous allez pour l'instant faire connaissance avec les liens internes, qui offrent deux possibilités :
A.1- Sur la page "animaux",
vous donnez par exemple la possibilité à votre visiteur
de sélectionner un sujet qui l'intéresse sur une autre page
de votre site. Donc seul le nom donné à la page ciblée
vous intéresse, par ex: chien.htm
Faites le distinguo, entre le mot"animaux" qui désigne le titre de la page qui apparaît sur le navigateur, et "chien.htm" qui est le nom du fichier dans le répertoire. Il n'est pas interdit qu'ils soient identiques. C'est pour vous habituer à bien distinguer les appellations que je parle des deux.
A.2- Le code source du lien hypertexte dans BODY de la page "animaux.htm" devient simplement :
Dans la liste des animaux découvrez le < A HREF="chien.htm" > chien </A> qui est l'animal le plus connu...
Le mot "chien" en gras bleu est le mot qui sert de lien et sur lequel il faudra cliquer pour retrouver la page correspondante qui s'affichera en entier en commençant par le haut. Ce qui se traduira sur le navigateur par la mise en couleur (bleue en général) et le soulignage du mot "chien". Vous venez de créer un lien hypertexte.
Voici ce que vous obtenez sur l'écran (ici, lien factice)
Dans la liste des animaux découvrez le chien qui est l'animal le plus connu...
B.1- Pose d'une ancre sur la même page: Votre visiteur est arrivé sur la page "chien.htm" et il souhaite maintenant accéder à la définition du mot "garrot" vu qu'il découvre en parcourant le texte que ce mot fait l'objet d'un lien hypertexte. En effet vous avez en fond de la même page, placé un petit lexique de mots spécialisés pour les chiens.
Pour commencer vous placez le trait clignotant du pointeur sur la ligne au dessus du mot "garrot" (emplacement approximatif) qui en fond de page en donne une définition complète et sert de cible pour y créer cette ancre, ce qui donnera :
< A NAME= "encolure"> </A>
avec NAME qui est l'attribut associé à l'ancre. (Volontairement j'ai placé un mot synonyme à "garrot" pour éviter les erreurs possibles.)
Ci-dessus j'ai placé en vert un "espace insécable" qui correspond à un espace codé entre deux caractères ou balises, pour respecter la présence d'un élément entre deux balises ici en rouge. Et ça peut faciliter une bonne visibilité sur tous les navigateurs.
B.2- Puis vous revenez sur le mot "garrot" qui se trouve dans le texte courant, que vous sélectionnez et créez le lien dans le code source :
<A HREF="#encolure">garrot</A>
avec HREF comme attribut et le dièse #.
Exemple: Vous supposez la phrase suivante consacrée au chien, dans BODY :
Le chien possède aussi une taille appelée le < A HREF="#garrot" > garrot </A > qui se mesure du sol...
Ce qui ressemble fort à un lien hypertexte normal, et le navigateur réagit aussi par la mise en couleur (bleue en général) et le soulignage du (ou des) mot "garrot". Vous venez de créer un lien hypertexte vers une ancre, qui en clair donne ceci :
Le chien possède aussi une taille appelée le garrot qui se mesure du sol... (dont le lien est fictif.)
Avec l'accès à de nouveaux langages et en particulier le CSS,
il est facile de modifier l'apparence (couleur et soulignement), mais restons
classiques pour l'instant.
Retour au départ
Faut aussi et surtout dans ce cas prévoir un lien qui permette au visiteur de revenir à l'endroit où il se trouvait lorsqu'il a cliqué le lien dans la page. Placez une ancre nommée "encolure" environ deux lignes au dessus pour être certain que la lecture de la page pourra reprendre avec le contexte de la phrase entière, ce qui est bien utile.
<A NAME="encolure"> </A>
Ci-dessus j'ai placé en vert un "espace insécable" qui correspond à un espace codé entre deux caractères ou balises, pour respecter la présence d'un élément entre deux balises ici en bleu. Et ça peut faciliter une bonne visibilité sur tous les navigateurs.
Il ne vous reste plus pour finir qu'à transformer en lien les mots "retour texte", ce qui donnera dans le code source :
et dans le texte en clair (ici lien fictif) :
retour texte
Pose d'un lien sur une page qui cible une ancre sur une page différente : Il en ira de même que précédemment pour le lien externe, en ajoutant simplement l'ancre au nom de la page qui est ciblée. On va supposer que se trouvant sur la page "chien.htm" vous offrez la possibilité à votre visiteur de se rendre sur le LEXIQUE qui regroupe tous les mots spécialisés relatifs aux animaux, et d'en revenir ce qui est souhaitable pour conserver votre visiteur. En effet cette fois vous n'avez pas souhaité placer ces mots en fin de chaque page mais plutôt les regrouper dans ce lexique.
1- A réaliser, dans la page "chien.htm"
et juste un peu avant le mot "garrot" qui va servir de lien, pose
de l'ancre pour le retour :
<A NAME= "garrot" > </A>
2- ensuite pose du lien sur le mot lui-même "garrot" vers
la cible du lexique.htm :
< A HREF= lexique.htm#garrot" > garrot </A>
3- puis dans la page "lexique.htm",
un peu avant le mot "garrot" pose de l'ancre :
<A NAME= "garrot" > </A>
4- enfin pose du lien en fin de description du mot "garrot", vers
la page départ "chien" à l'endroit où le visiteur
se trouvait avant de cliquer vers le "lexique":
< A HREF= chien.htm#garrot" > retour texte</A>
Noter que pour éviter les erreurs le mot "garrot" qui est
obligatoirement utilisé pour le lien origine a été remplacé
par "encolure" pour l'ancre placée dans la même page.
Si l'ancre est placée sur une autre page l'erreur n'est plus à
redouter et vous pouvez conserver le mot"garrot" pour le lien et
l'ancre. Quant au lien appelé "retour texte" il est ainsi
explicite et sans besoin d'en rajouter. De plus vous placez ainsi un mot-clé
supplémentaire (encolure) qui peut éventuellement être
copié par les robots des moteurs de recherche.
NOTA - le dièse # n'est utilisé que pour établir des liens ayant pour cible des parties placées à l'intérieur d'une page. Pour information, sachez qu'il ne fait fonction que "d'étiquette".
Pas d'affolement, le sujet demande un peu d'attention mais surtout une bonne préparation des buts recherchés lorsque vous implantez des liens hypertexte. Et un conseil qui vaut de l'or : au départ prenez note des abréviations que vous donnez à chaque ancre et de leur cible respective, par la suite vous nagerez sans gilet de liège.
Ce paragraphe ne couvre pas l'ensemble des applications ayant trait aux liens,
mais je le répète encore... pas à pas ! Il s'imposait
de le traiter maintenant, au même titre que dans un lotissement la viabilité
est réalisée avant la construction des habitations, et ensuite
de découvrir comment vous allez composer le contenu d'une page.
Sommaire Page perso... @ ... Création, tags et attributs
Tous droits réservés © 1997- 2006. www. aidenet.com
|
Page "chien.htm"
|
ancre servant de cible dans la page "lexique.htm" <a name="encolure"> </a> <b>garrot :</b>il s'agit de l'épaule.................... |
- Répertoire : (Directory) ce sont les fichiers multimédia composant votre Site (page perso) que vous allez déposer sur le disque dur du serveur mis à votre disposition par le Provider. Ce répertoire peut contenir autant de fichiers et d'éléments multimédias qu'il vous plaira, dans la limite de l'espace qui vous a été alloué (10 Mo à 50 Mo le plus souvent et 100 Mo maintenant).(retour texte)
- htm-html : MS-DOS est un ancien système d'exploitation (repris par Microsoft), qui équipe des serveurs et ne tolère pas plus de 3 caractères pour les extensions de fichiers, soit htm. Par contre tous les autres serveurs n'utilisant pas MS-DOS ne sont pas limités et portent en général l'extension html. Au départ de l'Internet disons que l'enregistrement d'un dossier Windows devrait être suivi de l'extension htm et , celui d'un dossier Macintosh suivi de l'extension html, distinguo maintenant périmé. (retour texte)
- HomePage : (Page d'accueil) c'est la première page qui s'ouvre par défaut sur l'écran lorsque vous établissez la connexion entre votre Navigateur et le Provider, ou encore lorsque vous demandez à visiter un site Web de l'Internet sans préciser une page particulière. C'est à partir du sommaire affiché sur cette page que vous allez continuer à "surfer" à l'aide des liens hypertexte inclus. (retour texte)
- Ancre ( A ) : c'est le tag qui matérialise l'endroit où vous aboutissez après avoir cliqué sur un lien hypertexte. Ce point d'ancrage peut être utilisé sur la même page que le lien ou sur une des autres pages composant le Site. Pour information : vous pouvez rencontrer des documents où le lien hypertexte est nommé marqueur ou encore Ancre de départ. Et dans ce dernier cas la cible est dotée d'une Ancre d'arrivée. (retour texte)
- Attribut : il arrive que certains tags sont accompagnés d'un ou plusieurs attributs. Le tag <A> obligatoirement, d'autres facultativement pour étendre ou qualifier l'action du tag de base, par ex. <IMG avec ALIGN qui va définir la position du texte par rapport à l'image. Il faut placer un espace entre le Tag et le premier attribut, puis entre les autres attributs s'il y en a. Chaque attribut représente un élément particulier et on doit alors coder ainsi : <IMG SRC="chien.gif"> ce qui précise qu'une image de chien est positionnée à cet endroit de la page.(retour texte)
