Deux bouts de ficelles

Deux bouts de ficelles pour mes Pages Web

Pour "plonger"

Si vous visitez les liens internes proposés, merci de cliquer sur "Précédent" dans votre Navigateur afin de revenir à ces pages-ci. Les liens externes, eux, ouvrent une autre fenêtre qu'il vous suffira de fermer. Enfin, il est possible que nous options, parfois, pour des liens à copier/coller.

Commençons une réelle Page fictive ! (Images et liens internes)

Je ne vous fait pas "le coup" de la page vide ; après tout : nous travaillons dans le Bloc-notes où nous avons tout à saisir à la main, alors, pas de finesses faussement pédagogiques. Par contre, nous allons construire, étape après étape, notre première page. Contrairement aux exemples précédents, j'indique le codage des accents et caractères spéciaux ; cela peut toujours être utile un jour. Voici une première étape où sont indiqués le titre et l'auteur, avec un début d'introduction. Au passage, remarquez l'autre codage possible pour un passage à la ligne (un paragraphe avec saut de ligne ; ligne vide, quoi !...)

Maintenant, ajoutons deux images. Vous voyez, dans le Source, comment se fait le codage. A retenir : les balises image (IMG) et source (SRC). Suit le chemin à suivre pour trouver l'image. Ce chemin a à voir avec les dossiers que vous avez créés et dont nous parlions dans les premières pages de "Deux bouts de ficelles ...". Au passage, vous remarquerez que je n'ai pas créé un dossier images : ne suivez pas les mauvais exemples ! Ici, on pourrait estimer que des éléments, des indications de mise en page manquent. La Page "fonctionne" tout de même ; donc : laissons cela pour le moment.

Par contre, ATTENTION : je parlais, ci-dessus de chemin, alors que dans le Source, aucun n'est indiqué. En effet, lorsque je parlais de mauvais exemples, j'avais aussi une raison. Il semblerait qu'en utilisant le Bloc-notes, nous soyons obligés de placer nos images dans le même Dossier que nos pages HTML. Et que toutes nos pages se trouvent dans le même Dossier.

Même avant de devenir un Site Web, une Page personnelle est, forcément, composée de plusieurs pages dévolues, par exemples, aux différents sujets et, aussi, afin qu'une seule page ne soit pas trop lourde en Ko.
C'est bien de l'annoncer comme dans l'exemple ici ; mais ...
Ah : la page annoncée existe ; c'est déjà ça !...

Bien, maintenant : il faudrait peut-être songer à lier ces deux pages ! Créer un lien hypertexte allant d'une page à l'autre ; et, pendant qu'on y est : créer un Retour, afin que le visiteur ne soit pas obligé de passer par la flèche Précédente de son Navigateur. Contrairement à vous qui devez encore jongler avec ladite flèche !...

Mettre en gras un lien interne (d'une de vos pages à une autre de vos pages) n'est pas la meilleure chose ; vous voyez que, pour le lien RETOUR, je suis revenu aux caractères sans style.

Nous voyons qu'une balise de lien(s) est double (début et fin) et compte une référence : une adresse qui, elle aussi, est un chemin.

Continuons notre fictive Page réelle ! (Liens externes, lien courriel)

Nous avons découvert les liens internes ; ceux menant d'une page à une autre de notre Site. Mais, lorsque l'on parle de quelque-chose, il est possible que l'on veuille envoyer nos visiteurs vers d'autres références, d'autres Sites sur le même sujet ou s'en rapprochant.

Pour ce faire, il nous faut tout d'abord connaître l'URL, l'adresse internet du Site en question. Cette adresse qui se place dans la Barre d'adresses de votre Navigateur et qui commence par http:// suivis ou non des www.

Pour notre exemple, nous choisirons d'envoyer notre visiteur vers le Portail, le fournisseur d'accès (Provider) Free. Vous voyez que j'ai corrigé "l'erreur" sur le lien interne (plus de gras) pour réserver ledit gras au lien externe (vers Free). Il est évident qu'une petite image, un logo dans le cas présent, pour enjoliver le lien ne serait pas du luxe. Oui : même que ça nous montrerait comment placer un lien sur une image... Insatiables que vous êtes !... Je me méfie de la "bête" (Notepad) maintenant et je copie mon logo de Free dans le Dossier où sont rangés les fichiers de cette section. Voici le travail ! Avec, pour le même prix, un Gif animé ! Bon, d'accord : le lien sur le mot Free pointe vers l' acceuil du Portail alors que le lien sur le logo pointe sur la section des pages personnelles de Free. Comme une invitation à y puiser quelques ressources...

Et un second Gif animé pour le dernier élément indispensable à vote Page. Indiquez, si vous en avez une, votre adresse de courrier électronique. Celle-ci, ce lien spécial, a pour fonction d'ouvrir le logiciel de courriel (Outlook, autres) de votre visiteur en y plaçant automatiquement votre adresse dans la plage de saisie "A" (To ; destinataire). C'est moderne !

Nos trois types de liens hypertextes (interne, externe et courrier) s'indiquent (sont encadrés) par des balises semblables. Celle pointant vers une autre de vos pages comprend juste le nom de fichier du document à ouvrir (avec son chemin ; chemin que nous évitons ici en plaçant tout dans le même Dossier) ; celle pointant vers un Site Web est suivie de http:// ; celle destinée à indiquer votre adresse e-mail comporte le mot mailto: (écrire à). Attention aux espaces : aux "pas d'espace" !