Accueil
 

Comment faire une jolie page web ?
contacter l'auteur         accéder au tutoriel         télécharger le tutoriel

    La plupart des historiens s'accordent désormais pour considérer l'avènement d'Internet comme l'une des trois révolutions majeures dans le domaine de la diffusion des connaissances.
La première de ces révolutions est bien sûr l'apparition de l'écriture qui marque l'entrée de l'espèce humaine dans l'Histoire.
Avec l'invention de l'imprimerie vers le 15 ème siècle, les écrits peuvent alors être diffusés à plus grande échelle. L'accès à l'édition reste cependant le privilège d'une minorité.
La fin du 20 ème siècle voit quant à elle se développer un nouveau médium, Internet, permettant à toute personne équipée d'un ordinateur et d'une simple ligne téléphonique, d'accéder à une audience quasi-mondiale. Diffuser des informations sur le réseau Internet afin qu'elles soient accessibles aux millions de personnes connectées est devenu aujourd'hui une réalité nécessitant tout de même un minimum de connaissance.
 
C'est ce "minimum de connaissance" que je vous propose d'acquérir dans ce tutoriel.
Vous en rêviez ? Et bien le voilà enfin, un petit cours "clefs en main" sur la fabrication d'un site web.   Une lecture linéaire des chapitres qui suivent devrait vous mener sans trop d'effort à la réalisation et à la mise en ligne de vos pages, mais suivant votre niveau, libre à vous de piquer ce qui vous intéresse dans les chapitres qui suivent...

Je ne compte plus les journées de travail consacrées à cette page.  Cependant, des erreurs doivent inévitablement émailler  ces lignes. Plutôt que de râler sur votre ordinateur ou pire, sur moi, merci de me signaler ce qui foire, un lien mort, une erreur formelle ou une simple faute d'orthographe...
Le résultat n'en sera que meilleur...
SOMMAIRE:

1. AVANT DE COMMENCER

1. AVANT DE COMMENCER
1.1 Pourquoi une page web ?
De quoi je me mêle, me direz vous ... et vous aurez bien raison, tant il est vrai que les motivations sont aussi diverses que variées pour s'afficher sur la Toile.  Depuis l'amateur d'horloges anciennes jusqu'au club des gobeurs de Flanby en passant par l'incontournable Comité de Soutien au Port du String, vous savez déjà qu'on trouve vraiment de tout sut le net. Alors pourquoi rajouter votre contribution ? Parce que vous, vous avez vraiment quelque chose à dire ! Mais c'est bien sûr ! Et puis même si vous n'avez rien à dire, vous aurez toujours la satisfaction de tirer un tant soit peu vous aussi les ficelles du web, et accessoirement de transcender votre modeste condition humaine en partageant avec le monde entier votre recette de la tarte Tatin...
haut de page

1.2 Ce qu'il vaut mieux savoir avant de commencer:
J'ai conçu cette page essentiellement pour les novices.
Comme je l'évoquais plus haut, une lecture linéaire des chapitres qui suivent devrait vous mener sans trop d'effort à la réalisation et à la mise en ligne de vos pages.  Toutefois, quelques pré requis semblent très utiles pour ne pas trop ramer par la suite...
Ainsi, il vaut mieux avoir déjà entendu parler de fichier, et si vous savez les manipuler, les copier, les renommer,  les déplacer d'un dossier à l'autre, la suite ne devrait poser aucun problème... A part cela, un peu de bon sens et cela devrait faire l'affaire. N'oubliez jamais cependant qu'en cas de problème, votre humble serviteur se fera toujours un devoir autant qu'un plaisir de répondre à vos questions...
Pour des raisons d'impact assez évidentes, j'ai conçu ces pages essentiellement pour l'utilisateur Windows "de base". Les équivalences Linux seront mentionnées en italique. Ceux qui ne se sentent pas concernés par ces remarques pourront tout simplement les zapper.
 
haut de page

1.3 Les logiciels utilisés:
Nous verrons plus loin, qu'on peut parfaitement  concevoir une page web avec le plus basique des éditeurs de texte, mais cet exercice est devenu inutilement complexe dans la mesure où il existe aujourd'hui une ribambelle de logiciels simplifiant grandement la tâche: Les éditeurs de page. Le plus connu -mais pas nécessairement le meilleur- est sans doute "Front page", l'éditeur de Microsoft. Vous en trouverez bon nombre d'autres gratuits sur le net.

1.3.1 Mozilla

Personnellement, j'ai toujours utilisé "Mozilla Composer" qui présente à mon sens plusieurs avantages:

- Il fait partie d'une suite logicielle très complète comprenant  un navigateur ainsi qu'un logiciel de mail et de newsgroup.
- Il est gratuit ! Vous le trouverez en "libre téléchargement " sur frenchmozilla.sourceforge.net
Attention, la suite fait tout de même quelques dizaines de Mo, alors soyez patients... Vous pourrez aussi le commander sur CD pour quelques euros symboliques.
NB: Mozilla est déjà installé sur la plupart des distributions Linux. Voilà qui vous fera économiser l'étape pénible du téléchargement et de l'installation...
- Des mises à jours gratuites sont fréquemment disponibles sur les mêmes site.
- Il existe une version de Mozilla pour tous les systèmes d'exploitation. Ainsi, que vous soyez sous Windows, Macintosh, Unix ou Linux, vous aurez toujours accès à une version identique de Mozilla.
- Il vous permettra de suivre ce cours car je vais quand même pas m'amuser à faire autant de pages qu'il n'y a d'éditeurs !

Bon, Mozilla va te permettre d'éditer ta page. Tu pourras alors la conserver sur ton disque dur pour la consulter "en local" ou la graver sur un CD pour la diffuser à tous tes copains. Et déjà, à ce stade, tu auras la satisfaction de te dire que ton CD pourra être lu par toutes les machines, même celles qui tournent sous Macintosh ou Linux, car tous les ordis possèdent un navigateur pour lire ta page tandis qu'ils ne possèdent pas tous "Microsoft Word" pour lire ton fichier .doc ! Et oui, le langage html qui code les pages web, c'est un peu l'espéranto de l'informatique...
C'est bien joli tout ça, mais ça ne te suffit pas ! Tu veux aller plus loin, dépasser les frontières de ton quartier et de ton groupe d'amis ! Tu veux rendre ta prose accessible au monde entier ! En bref, tu veux rentrer dans le sérail des webmasters ! ! . . .
Il te faudra alors transférer tes fichiers sur un serveur distant, c'est à dire les copier sur un disque dur auquel pourront avoir accès tous les Internautes, ce qui n'est pas le cas du tien.
Pour cela, tu devras:
    -D'abord trouver le serveur en question qui hébergera tes pages.
    -Utiliser un logiciel de transfert de fichiers, dit "logiciel FTP" pour y copier tes fichiers. Celui qu'on va utiliser s'appelle WSFTP.

1.3.2 WSFTP

Encore une fois, il en existe plein de gratuits, mais je t'invite à utiliser WSFTP car moi j'ai toujours utilisé ça et que dans le reste de cette page, je te prends par la main avec WSFTP, c'est pas plus compliqué que ça !
De plus, contrairement à Mozilla, il est très léger (125 ko) et te prendra très peu de temps à télécharger.
Sous Linux, gFTP est installé par défaut dans les distributions récentes telles que Mandrake & te rendra les mêmes services. Là encore, pas de téléchargement ni d'installation :-)
Résumons-nous,  à ce stade, tu télécharges Mozilla ou Mozilla en cliquant ici, puis WSFTP en cliquant là, tu installes ces deux logiciels sur ta machine et tu peux alors t'accorder une petite pause avant de passer à la suite.

1.3.3 Alternative

La suite Mozilla et WSFTP te permettront donc de suivre la suite de ce tutoriel. Telle est la situation au moment où j'écris ces lignes -2005- mais le monde du logiciel n'est pas figé: Certains programmes périclitent tandis que d'autres émergent. Ainsi, rien ne dit que dans deux ans, Mozilla soit encore disponible. Il semble d'ailleurs que Mozilla ne souhaite plus sortir de nouvelles versions au delà de la 1.7.6 actuelle, préférant développer son excellent navigateur Firefox.
Toutefois, de la même façon que les traitements de textes se ressemblent tous plus ou moins, la plupart des éditeurs et des logiciels FTP présentent plus ou moins les mêmes fonctionnalités.
Ainsi, toutes les informations qui suivent peuvent être suivies en remplaçant 'Mozilla Navigator' par Internet Explorer ou Firefox, et WSFTP par n'importe quelle autre interface FTP. En ce qui concerne l'édition de la page en elle même, l'excellent éditeur Nvu peut lui aussi remplacer Mozilla composer.
Il s'agit d'un logiciel libre, gratuit et fonctionnant sur tous types de systèmes d'exploitation.  Un effort d'adaptation sera toutefois nécessaire pour 'coller' à mes explications.

haut de page

1.4 Encore un petit rappel sur les images:
Une page web contient essentiellement du texte et des images.  La saisie du texte dans l'éditeur n'a rien de très différent  de celle effectuée dans un traitement de texte. En revanche, l'insertion d'images dans tes documents relève d'une logique un peu différente, comme nous le verrons plus tard. Le format des images, tout d'abord, est soumis à quelques contraintes dictées par l'utilisation même du web.  Afin de limiter les temps de téléchargement, les images doivent être dans un format "comprimé", c'est à dire qu'elles doivent occuper peu de place en mémoire. Sans trop rentrer dans le détail, il existe essentiellement 2 formats répondant à ces exigences: le format jpg et le format gif. Concrètement, soit les images sont déjà dans l'un de ces 2 formats, ce qui est le cas de la plupart des applications modernes telles que scanners et appareils photos numériques, soit il va falloir les convertir. Dans cette tâche, un logiciel tel que "Paint Shop Pro" ou The Gimp pourra s'avérer utile, tant pour convertir les fichiers en question, que pour redimensionner  des images trop "lourdes" et qui mettront fatalement de longues minutes à être téléchargées...
Autre petit truc pour trouver des images "à votre sauce": Les piquer sur d'autres sites ! N'ayez pas trop de scrupules, c'est ce que font la plupart des webmasters, et personne ne vous en tiendra rigueur tant que vous ne gérez pas un site marchand... Avantage de cette petite manœuvre les images sont forcément déjà dans un format compatible et de plus, on trouve vraiment de tout sur le web,  je vous l'avais déjà dit !
A titre indicatif, google.fr contient un moteur de recherche d'images vraiment très puissant... Lorsque vous aurez trouvé l'image de vos rêves, enregistrez là d'un clic-droit bien senti et personne n'en saura jamais rien...


Tout le monde n'est pas d'accord avec moi...

haut de page

1.5 Comment on va s'y prendre ?
Tu trouveras à foison sur le web des sites t'expliquant comment éditer une page, mais on omet bien souvent de t'expliquer comment la mettre en ligne ou trouver un hébergeur. Autant montrer à un chasseur  Bushman comment naviguer dans le menu du dernier Nokia... Il est peu probable qu'il arrive à passer un coup de fil si on ne lui explique pas qu'il va falloir d'abord trouver un opérateur...
Et bien nous, on va tout prendre à l'envers, ce qui me semble plutôt tout prendre à l'endroit d'ailleurs...
On va tout d'abord chercher ensemble un hébergeur, puis on s'entraînera au transfert de fichiers, et en dernier lieu, on fabriquera une jolie page web... 

haut de page

2. COMMENT TROUVER UN HEBERGEUR ?
Comme je le disais plus haut, il s'agit maintenant de trouver quelques Mo sur un disque dur distant afin d'y transférer nos pages, nos images... Le disque dur en question devra être accessible à tous les Internautes. Ceci n'est pas le cas du tien mais c'est le cas de ceux de Wanadoo, Free, club-internet et autres FAI.

2.1 Tu possèdes un abonnement Internet:
La solution la plus simple est alors de solliciter ton FAI. En effet, si tu possèdes un abonnement Internet, cet abonnement t'offre l'accès au réseau, bien évidemment, une ou plusieurs adresses e-mail, comme chacun sait, mais aussi un espace-disque pour héberger tes éventuelles pages web - à l'exception de Wanadoo qui, non content d'être le FAI le plus cher du marché pour de médiocres performances, est le seul à faire payer ses propres abonnés pour l'hébergement de leurs pages !!
La première étape va donc consister à "activer" cet espace en passant directement par la page d'accueil de ton FAI. En règle générale, la rubrique concernée se situe sous le lien "pages perso". On te demandera d'abord de t'identifier avec login et mot de passe, d'accepter une liste de conditions que tu ne prendras pas le temps de lire, puis de choisir un "nom de site". Attention, ne prends pas cette étape à la légère car ce nom apparaîtra dans l'adresse de ton site sur le web -l'adresse URL ! De plus, ce même nom apparaîtra dans l'adresse FTP dont on parlera plus tard...

fig#1

 A titre d'exemple, pour Wanadoo, si tu choisis "sexe" comme nom de site (n'essaye pas, c'est déjà pris), ta future adresse URL sera

http://monsite.wanadoo.fr/sexe
Ton adresse FTP (celle à laquelle tu devras transférer tes fichiers) sera:
monsite-ftp.wanadoo.fr avec "sexe" comme login

 Si Free est ton FAI, l'URL correspondant sera

http://sexe.free.fr
L'adresse FTP sera:
ftpperso.free.fr avec toujours "sexe" pour login

Petit rappel sur lequel on reviendra plus tard: L'adresse URL est celle que les internautes vont taper dans leurs navigateurs pour accéder à ta page.
L'adresse FTP est celle que toi seul va taper dans ton logiciel WSFTP pour transférer tes fichiers !

haut de page

2.2 Tu ne veux pas passer par ton FAI:
Tu peux décider aussi de ne pas solliciter de FAI. Dans ce cas, des solutions existent aussi puisqu'on compte bon nombre de sites proposant plus ou moins gracieusement un hébergement.  La contrepartie sera bien souvent un petit bandeau de pub sur votre page -c'est le cas de l'hébergement proposé par Multimania- , mais on peut aussi trouver des hébergeurs absolument gratuits et sans pub. Dans ce cas, la solution détournée consiste à contracter un abonnement gratuit à un FAI tel que Free ou l'un des multiples du groupe Tiscali, par exemple. Rien ne vous oblige alors à vous connecter via leurs services, mais vous avez tout à loisirs d'utiliser l'espace disque mis à votre disposition.
Une fois l'abonnement contracté, la procédure à suivre est la même que dans la partie précédente.
Quelle que soit la solution que tu adoptes, tu pourras difficilement faire l'économie d'une inscription en ligne -encore que... voir la partie suivante... et là aussi, sois attentif au nom du site.

fig#2


haut de page

2.3 Tu veux essayer avant de te lancer...
Je vois d'ici la mine déconfite de ceux qui s'imaginaient pouvoir continuer sans consacrer, ne serait-ce que 10 minutes, à remplir un formulaire... C'est dommage, mais tel est ton choix, et le plus fort c'est que tu vas malgré tout pouvoir continuer à suivre le cours ! Mais oui, car j'ai fait le boulot pour toi ! J'ai consacré 10 minutes à remplir le formulaire et j'ai ouvert un espace de 50 Mo sur Lycos-Multimania -cf capture d'écran ci-dessus. Alors bien sûr, le revers de la médaille, c'est que comme je vais te donner le mot de passe, et bien n'importe quel visiteur de cette page pourra modifier ou tout simplement effacer l'intégralité du site. Cette solution devra donc être utilisée pour s'entraîner au transfert de fichiers et à la mise en ligne des pages, mais l'hébergement définitif de celles-ci se fera alors à tes risques et périls...
Bon, te voilà prévenu, voici donc le "sésame"  à utiliser dans la partie qui va suivre :
 

Nom de site ou Login: crzb
Adresse URL de la page:    http://membres.lycos.fr/crzb
Adresse FTP: ftp.membres.lycos.fr
Mot de passe: ivalmehvsg


haut de page

 3. LE TRANSFERT DES FICHIERS
Il s'agit là d'une étape indispensable à la mise en ligne d'un site -A moins que tu ne veuilles réaliser que des pages "localement", si c'est le cas, tu peux directement passer au chapitre suivant... et il me semble plus judicieux de l'aborder avant même la conception de la page à proprement parler. Alors bien sûr, comme tu n'as pas forcément de fichiers à transférer, et bien je vais t'en proposer quelques-uns que tu vas d'abord enregistrer sur ton disque local -ton disque dur à toi-, puis copier sur le disque distant évoqué plus haut. Cela nous permettra, de plus, de faire quelques petits rappels nécessaires sur les formats et les noms de fichiers...

3.1 les_noms_de_fichiers
En bureautique autant qu'en ce qui concerne tes photos de vacances, tu as l'habitude de nommer tes fichiers comme bon te semble: 'Mon rapport de stage.doc' ou 'Papa pissant sur la grève.JPEG' sont des noms de fichier acceptables car tu es seul à devoir t'y retrouver sur ton disque dur. Dès qu'on travaille avec des serveurs informatiques comme nous allons le faire désormais, les règles doivent être les mêmes pour tout le monde. Ainsi, il est très fortement recommandé dans tout ce qui va suivre de privilégier la concision pour tes noms de fichiers et de bannir les caractères spéciaux tels que  é è ê à ù... / & % * ~ ... ainsi bien sûr que le caractère 'espace' que l'on remplacera avantageusement par _ . Je vous conseille aussi de ne point utiliser de majuscules pour ne pas aller au devant de problèmes de reconnaissance.
Voilà, vous êtes prévenus, on peut passer à la suite...

haut de page
            

3.2 L'enregistrement des fichiers
Voici donc  une petite liste de fichiers que je te propose d'enregistrer quelque part sur ton disque, selon la procédure décrite à la troisième ligne du tableau...
Pour s'y retrouver plus facilement par la suite, je te propose d'enregistrer localement tous ces fichiers dans un seul & même dossier nommé page. Sous Windows, l'adresse de ce dossier sera quelque chose comme C:\page . Sous Linux, ça pourrait  ressembler à /home/buzz/page
 

ceci est une image gif ceci est une image jpg cliquer ici cliquer ici cliquer ici cliquer ici
image "gif" image "jpg" son "wav" fichier "zip" vidéo "avi" fichier "pdf"
clic droit sur
 l'image puis "enregistrer sous..."		 clic droit sur l'image
 puis "enregistrer sous..."		 clic gauche sur le lien puis "enregistrer sous..." clic gauche sur le lien puis "enregistrer sous..." clic gauche sur le lien puis "enregistrer sous..." clic gauche sur le lien puis "enregistrer sous..."

L'enregistrement ne devrait pas trop poser de problème. La lecture, en revanche, pourra s'avérer plus délicate. En effet, l'ordinateur peut stocker un fichier quel qu'il soit (un octet est un octet), mais la lecture requière quant à elle un logiciel adapté au format du fichier. Les images proposées sont lues par tous les navigateurs. Par contre, les fichiers wav, zip et avi nécessiteront eux, selon le cas, l'usage de logiciels spécifiques tels que Media Player pour lire le wav et l'avi et Winzip pour ouvrir le zip... Le fichier pdf, lui, pourra être lu par le logiciel Acrobat Reader. Ce logiciel a beau être gratuit, si tu ne l'as pas installé sur ta machine, tu ne pourras pas lire le fichier correspondant, encore que les navigateurs récents savent presque tous lire le pdf !

Cette petite manip nous permet de formuler une première remarque importante à propos du web: l'utilisation des fichiers disponibles sur une page dépend de la machine de l'internaute visiteur et des logiciels disponibles sur celle-ci.

A noter: les formats "universellement" reconnus sont jpg, gif et htm (on verra plus tard htm).

Alors nous y sommes: tes fichiers  sont prêts pour le grand saut vers le web. Fébrilement, tu lances le programme WSFTP, et ...

haut de page

3.3 Le paramétrage de WSFTP
...et à propos, ça veut dire quoi FTP ? C'est File Transfert Protocole pour Protocole de transfert de fichiers.
 Au lancement de WSFTP, une fenêtre de paramétrage t'es proposée:

wsftp fig#3

Passée la surprise de découvrir un logiciel en anglais, il s'agit maintenant d'indiquer précisément au logiciel à quel endroit il doit envoyer tes fichiers.
 "Profile Name" contient un nom de ton choix (en général le nom du serveur: Wanadoo, Lycos, Free...).
 "Host Name" indique l'adresse FTP. Dans l'animation ci-dessus, j'ai fait apparaître l'adresse Créée sur Lycos, à savoir ftp.membres.lycos.fr
Je reprécise ici encore que l'adresse FTP n'est pas à confondre avec l'adresse URL ou http que l'on tape dans le navigateur.
 "User ID" correspond au login, c'est à dire au "nom du site": crzb
 "Password" est le mot de passe.
Tu pourras avantageusement cocher "Save Password" & "Auto Save Config", si tu ne veux pas t'embêter à retaper ces infos à chaque fois et si tu ne crainds pas les pirates sous ton propre toit...
Tout est prêt alors tu peux cliquer sur "Ok"...
Tiens, je viens de penser à une petite précision: pour effectuer toutes ces manoeuvres, tu devras bien sûr être connecté à Internet... Ca paraît peut-être con à certain, mais ce qui va sans dire... va encore mieux en le disant!

Sésame, ouvretoi!..
haut de page


3.4 Premiers pas dehors...
Bon, après avoir cliqué sur "Ok", la fenêtre de paramétrage cède la place à celle ci:

wsftp fig#4

 Il s'agit là de l'écran caractéristique de tout logiciel de FTP, à savoir, un affichage coupé en deux avec à gauche l'arborescence de ton disque local et à droite celle de ton disque distant. Sur l'exemple ci-dessus, le disque distant , celui de Lycos, ne contient qu'un seul fichier, à savoir "index.htm". Comme avec ton explorateur de fichiers habituel, tu vas pouvoir ici effacer et renommer des fichiers, créer  dossiers et sous-dossiers, mais aussi et SURTOUT, déplacer des fichiers depuis ton disque local vers ton disque distant. Cette dernière manoeuvre s'effectue en sélectionnant le fichier concerné puis en cliquant sur la flèche --> au centre de la fenêtre.
Tu as aussi la possibilité d'utiliser le "glisser-déposer" avec la souris depuis l'une des fenêtres vers l'autre.
Afin d'effectuer toutes les manoeuvres évoquées, voici la traduction des boutons bordant chaque fenêtre:

"Chgdir": Changer de dossier
"Mkdir": Créer dossier
"View": Visualiser
"Exec": Exécuter
"Rename": Renommer
"Delete": Effacer
"Refresh": Actualiser
"DirInfo": Info Dossier
En pratique, 9 fois sur 10, tu te contenteras de déplacer simplement des fichiers ou des dossiers avec le "glisser-déposer", et ces boutons ne te seront d'aucune utilité...

  - Si tu utilises un disque distant personnel, celui-ci devrait être vierge. Tu peux donc directement t'amuser à y transférer les fichiers enregistrés précédemment. Attention, si ton disque distant contient un fichier "index.htm", commence par effacer ce dernier sous peine d'être vite largué par la suite !

  - Si tu utilises le disque distant que j'ai créé sur Lycos, avant de commencer le transfert, et en guise d'entraînement; je te propose d'effacer complètement le contenu du disque distant -tant pis pour les imprudents qui t'ont précédés... Efface notamment et en priorité le fichier "index.htm", s'il existe... Pour cela, tu sélectionnes les fichiers puis tu cliques sur "Delete". Attention: Pour effacer un dossier complet, il faut d'abord effacer son contenu, puis effacer le dossier lui-même.

Attention, si vous restez plusieurs minutes sans utiliser WSFTP, celui-ci se déconnecte automatiquement et les échanges deviennent alors impossibles. Pour relancer le logiciel, il vous faut alors cliquer sur "Close" en bas à gauche, puis de nouveau sur "Connect" en suivant la procédure déjà vue...
Après avoir fait le vide dans le dossier distant, je te propose d'y transférer le dossier complet page avec ces 6 fichiers enregistrés en 3.1:
En pratique, tu as 2 façons de procéder:

    -la méthode simple: Tu sélectionnes le dossier local page dans la fenêtre de gauche & tu le déposes avec la souris dans la fenêtre de droite en répondant "oui" à l'invite "Do you want to transfer the selected directory structures ?".
    -la méthode-galère: 1) Tu crées un dossier distant page en cliquant sur l'icône Mkdir... 2) Tu rentres dans ce dossier en double-cliquant dessus 3) Tu transfères les 6 fichiers depuis ton dossier local page vers le dossier distant page.

Sauf erreur, tu devrais donc voir bientôt dans la fenêtre de WSFTP, tous tes fichiers classés par ordre alphabétique. Si tu as utilisé les fichiers que je t'ai proposés, ça devrait ressembler à ça:

wsftp fig#5

 Tu constates que le contenu du dossier local page est identique à celui du dossier distant page. Ce principe devra être tout le temps respecté sous peine de grosses embrouilles !
 

Dès lors, mais oui, tes fichiers sont sur le net ! Un Boeing 747 peut s'écraser sur ton ordinateur, tes fichiers sont en lieu sûr... Très bien, mais comment y accéder depuis n'importe quel poste connecté sur Internet, et sans passer par ce maudit WSFTP ?

haut de page

3.5 Mes fichiers sur le web !
Dans la partie qui précède, nous avons donc transféré vers le dossier distant page, les fichiers

avion.pdf
background.jpg
buzz.gif
cominpeace.wav
franklin2.avi
jupiter.zip

 Allons donc faire un tour  sur http://membres.lycos.fr/crzb pour voir un peu ce que ça donne... 

Attention! Certains serveurs comme Wanadoo bloquent désormais l'accès aux pages d'inventaires comme celles qui suivent . Ceci n'est pas un problème majeur., tu peux passer directement à la section suivante.

fig#6

On aurait pu imaginer présentation plus conviviale, mais bon... l'affichage présente ce que contient notre disque distant crzb, à savoir ici essentiellement -si on oublie pour l'instant le "Parent Directory"- un dossier nommé page.  En cliquant sur page, on rentre dans ce dossier & l'affichage présente alors l'inventaire de son contenu:

contenu du dossier distant "page"fig#7

 A ce stade, les utilisateurs de Linux  retrouvent une nomenclature familière: Dans tous les systèmes dérivés d'Unix, le symbole / représente la racine du disque -ce qui pourrait correspondre à C:\ sous Windows. Ainsi, tout naturellement, /crzb/page correspond au sous-dossier page contenu lui-même dans le dossier crzb situé à la racine du disque distant, à savoir le serveur "Lycos" dans notre exemple. Et en effet, pour le serveur, notre "espace disque" nommé crzb ne constitue qu'un dossier parmi tous ceux des clients Lycos...

Cliquons désormais sur buzz.gif...

buzz.gif fig#8
Tu noteras au passage qu'à chaque fichier correspond une et une seule adresse http comme illustré ci-dessus. Nous reviendrons longuement sur ce point sous peu...

Par chance, le navigateur sait lire les images gif. Celle-ci s'affiche donc comme ci-dessus. En revanche, les autres fichiers ne sont pas si dociles puisque le clic renvoie une fenêtre nous demandant ce qu'on veut en faire:
Le télécharger ou l'ouvrir avec un autre logiciel ( typiquement, Acrobat Reader pour le fichier pdf, Winzip pour le fichier zip...).  Bizarre ? Mais non, rien de plus normal !
 

3.5.1 Chacun son boulot
Il faut savoir en effet qu'un logiciel ne sait ouvrir que quelques types de fichiers: Winamp spécialisé dans le son ne peut ouvrir (ouvrir = visualiser) une image, et essayez donc de demander à votre tableur de lire un fichier son...
De même, le navigateur ne sait, à priori, ouvrir QUE les fichiers textes, et encore, pour peu qu'ils soient au format html (on verra ça plus tard)  & les images, pour peu qu'elles soient au format gif ou jpg.
Ainsi donc, lorsque vous demandez  au navigateur d'ouvrir un fichier qu'il ne "reconnaît" pas, et bien il vous demande le plus simplement du monde ce que vous voulez en faire: le télécharger et l'enregistrer ou l'ouvrir tout de suite avec un logiciel de votre choix. Il faut toutefois noter que les navigateurs actuels sont de plus en plus polyvalents: Ainsi, le navigateur de Mozilla sur lequel je vous invite à travailler sait aussi ouvrir les fichiers txt écrits avec le "bloc note" de Windows tandis que les dernières versions du navigateur "Internet Explorer" ouvrent de même les fichiers doc & pdf.
Une première leçon très importante est à tirer de ces constatations:

Suivant ton navigateur et tes logiciels "embarqués", la lecture et l'interprétation des commandes d'une page web pourra être bien différente, voire même impossible à exécuter.
En d'autres termes: C'est pas parce que ça marche bien chez toi que ça marche partout !

Et autant perdre toutes tes illusions tout de suite: Il n'y a pas de solution à ça, ou du moins pas tant que tous les utilisateurs du monde n'auront pas les mêmes programmes tournant sur les mêmes machines...
 
3.5.2 Chacun son adresse
Chaque fichier transféré par FTP est désormais visualisable sur le web à partir de n'importe quel navigateur
A ce titre, chaque fichier possède une adresse  URL ou "adresse http". Tu sais, il s'agit de l'adresse que tu tapes dans la "barre de navigation" de ton navigateur. A titre indicatif, lève un peu les yeux vers le haut de ton écran et tu verras que l'adresse URL de la présente page est
http://abc.free.fr/web.htm
http://abc.free.fr  est le "préfixe" ou "racine" commun à tous les fichiers contenus sur mon site.
Le fichier web.htm quant à lui, est stocké directement à la racine du serveur.
L'adresse de l'image de la fig#8 qui porte le nom de fichier nav1.jpg est http://abc.free.fr/web_fichiers/nav1.jpg. Pour t'en convaincre, clic-droit sur l'image, puis propriétés. Tu peux aussi tout simplement taper l'adresse de l'image dans ton navigateur.
Cela signifie qu'elle appartient au dossier web_fichiers qui est lui-même enregistré à la racine de notre serveur.

Mais ne compliquons pas trop, on parlera de dossier plus tard, et revenons à l'exemple de la fig#7:
L'adresse http qui nous a été attribuée par Lycos est http://membres.lycos.fr/crzb
Cette adresse va constituer ce que nous appellerons la "racine http" de notre répertoire distant -Le fameux / d'Unix...
Par ailleurs, nous avions transféré via FTP le fichier buzz.gif à l'intérieur du répertoire distant page
Dès lors, il est consultable par tous les internautes connectés sur le web & dans tous les navigateurs à l'adresse http://membres.lycos.fr/crzb/page/buzz.gif
Il en va de même pour tous les fichiers transférés, que ceux-ci soient affichés dans le navigateur, comme c'est le cas des images, ou non comme c'est le cas des sons qui appelleront alors une fenêtre de "choix" comme indiqué plus haut...
 
haut de page

3.6 Une galerie-Photos:
Si tout ce qui t'intéressait dans cette "formation", c'était de pouvoir mettre en ligne tes photos de vacances afin que tous tes potes puissent les consulter sans avoir à les leur envoyer à tous par mail et bien tu vas enfin souffler car tu peux t'arrêter là !
Et oui, il te suffit de les transférer toutes sur ton disque distant, d'en communiquer l'adresse http à tes amis
 et le tour est joué !
Tu pourras aussi d'ailleurs utiliser ces mêmes opérations pour sécuriser tes documents: Un enregistrement sur disque dur, disquette ou même CDRom peut toujours être inaccessible suite à la perte ou à la destruction physique du support. Un excellent moyen de protéger tes documents est d'en faire une copie "distante" sur ton disque distant. Tu pourras alors non seulement être sûr de le retrouver intact ( les plantages des serveurs sont rarissimes) & de plus, tu pourras y accéder depuis n'importe où !
N.B: Il y a de fortes chances pour que ton document ne soit pas lu par un navigateur, mais comme tu l'as bien compris maintenant, ce n'est pas un problème: Il te suffira de le télécharger, de l'enregistrer "localement" puis de le lire peinard avec le logiciel de ton choix...

Dans la partie qui suit, nous apprendrons à organiser tous ces fichiers transférés sous une forme agréable et fonctionnelle: une page html, autrement dit une "page web", mais oui, nous y sommes...
 

haut de page

4. EDITER UNE PAGE WEB
Et oui, après tous ces préparatifs, on rentre maintenant dans le vif du sujet: la fameuse, la belle, la tant espérée "page web" pointe enfin le bout de son nez.
Jusqu'à présent, on a essentiellement utilisé deux logiciels:
- Le navigateur (Mozilla Navigator ou Internet Explorer entre autres) pour visualiser les documents ou leur emplacement sur le web.
- Le logiciel de FTP (WSFTP) pour effectuer les tansferts.
Nous allons maintenant utiliser Mozilla Composer, un troisième logiciel pour "composer" ou "éditer" une page, ces deux termes étant synonymes. Ce logiciel appartient à la même suite que  Mozilla Navigator & nous serons amenés à zapper fréquemment de l'un à l'autre, mais il ne faudra pas pour autant les confondre, leurs fonctions étant radicalement différentes. Tant pis si je me répète:
Le composeur ou éditeur permet de fabriquer une page web.
Le navigateur permet de la visualiser telle que le feront les internautes.
Le logiciel de FTP permet lui de transférer vers le serveur la page elle-même ainsi que les fichiers qui lui sont attachés.

NB: Comme pour les autres logiciels, j'ai fait ici le choix de "Mozilla Composer" mais  rien ne t'empêchera à l'avenir d'utiliser un autre logiciel d'édition, d'autant plus que tous les éditeurs se ressemblent fort...
 

4.1 Ouvrir Mozilla Composer:
Pour ouvrir Mozilla Composer, il faut déjà ouvrir le navigateur de Mozilla. Tu peux alors accéder au composeur soit à partir du menu "Fichier", soit en cliquant sur la 4ème petite icône en bas à gauche de la fenêtre:

ouvrir Netscape Composeur fig#9

 Si à l'avenir, tu souhaites que le Composeur s'ouvre au démarrage de Mozilla, tu dois le paramétrer dans le menu Édition -> Préférences -> Aspect...
Enfin, quelle que soit la procédure choisie, tu ouvres alors une fenêtre qui ressemble à ça:

Netscape composeur fig#10

Même si l'habillage de la fenêtre ressemble un peu à celui de Mozilla Navigator, il ne faudra pas les confondre à l'avenir !
haut de page

4.2 Premier jet:
Bon, on se sent quand même un peu moins dépaysé avec ce composeur qu'on ne l'était avec WSFTP. En effet, si tu as un peu l'habitude du traitement de texte, tu vas retrouver ici bon nombre de ses fonctionnalités avec les icônes de la troisième ligne: Gras, italique, taille des caractères, justifier, couleur...

Dans un premier temps, je t'invite à construire une ébauche de document avec un titre, quelques lignes de caractères et un joli fond coloré que tu trouveras sous le menu Format -> Couleur et fond de page...
Au moment d'enregistrer ton travail, le composeur te demandera de fournir un titre de page. Celui ci n'a rien a voir avec celui que tu as pu écrire à l'intérieur de ton document. Il s'agit en effet du titre qui apparaîtra dans le bandeau supérieur de la fenêtre du navigateur. A titre indicatif, le titre de la page que tu as sous les yeux est: "Comment faire une jolie page web ?".
Une fois le titre renseigné, tu enregistres ton document localement dans le dossier page évoqué en 3.1. Appelons index le fichier que tu viens de créer.
Le dossier page accueillera tous les fichiers afférents à ta page: le fichier html que tu viens de créer & tous les fichiers que tu placeras sur ta page -images, sons, vidéos...

Ce dossier local sera le clone de ton dossier distant...

En utilisant l'explorateur de fichiers, tu peux aller vérifier dans le dossier local page que ton fichier index est bien là.
Comme tu as tout bien suivi, le fichier est à sa place, mais avec une drôle d'extension: "index.html".
Il s'agit là du format de tous les fichiers écrits avec un Composeur ou Editeur tel que Mozilla Composer, et par conséquent c'est aussi le format des fichiers lus par les Navigateurs.
Pour t'en convaincre, tu peux t'amuser à ouvrir le fichier "essai.html" du dossier local "page" à l'aide de ton navigateur... (Tu ouvres le navigateur, puis tu vas dans le menu Fichier -> ouvrir un fichier... )
Le fichier présente bien sûr le même aspect que dans le composeur mais fais bien attention à ce qui suit:
le navigateur te permet de consulter ce fichier mais pas de le modifier, cette dernière tâche étant allouée au composeur !
Ceci étant dit, tu brûles désormais de consulter ton premier jet non plus localement comme on vient de le faire, mais "en ligne".
Rien de plus simple ! En utilisant la procédure évoquée dans la partie 3., tu vas transférer ton fichier index.html depuis ton dossier local page vers ton dossier distant page.
Une fois le transfert correctement effectué, Il te suffira alors pour voir le fruit de ta persévérance, de taper l'adresse de la page, à savoir http://membres.lycos.fr/crzb/page/index.html

Génial ! Ca marche ! Ouais... mais comme t'as fait que taper "coucou c'est moi", c'est pas avec ça que tu vas tomber les meufs au boulot...  Alors passons donc aux choses sérieuses, non sans t'avoir dispensé un dernier conseil:
 

Attention, tu sais déjà que l'informatique c'est pas pour les rêveurs -encore que... L'adresse devra être tapée SANS ERREUR, sous peine de voir s'afficher la redoutable page: ERREUR 404 !
Pour avoir animé plusieurs formations sur le thème, je puis te garantir que 90% des problèmes viennent de fautes de frappes: L'adresse tapée dans le navigateur n'est pas rigoureusement la même que celle sur le serveur...

Oublie donc ton fichier précédent index.html... Pour t'entraîner, tu peux même l'effacer selon la procédure vue en 3.3 . Ensuite, & toujours en guise d'exercice, je te propose de créer une page ressemblant à ça:

la page de Buzz ! fig#11

Ca en jette, hein ? Alors ouvre ton composeur & au boulot !

        4.2.1 Une sage précaution:
Tu viens donc d'apporter les dernières modifications à ton fichier index.htm, et tout content, tu l'envoies dans ton dossier distant en écrasant fatalement l'ancienne mouture du même fichier.
Seulement voilà, le navigateur en guise de page d'accueil, te renvoie une page d'erreur: un bug a dû se produire dans ton travail sur le fichier index.htm, ou lors du transfert via FTP.
Tu tentes alors de récupérer ce même fichier "en local", mais celui-ci est bel et bien foiré. Quant au fichier distant, tu viens d'effacer l'ancienne version, certes non encore modifiée (mais valide) par une nouvelle qui est invalide !
Tu réalises alors que tu viens ni plus ni moins de perdre ta page d'accueil !
Cet incident est certes rare, mais point n'est besoin d'être un pro de la mécanique quantique pour savoir que ce qui est rare se produira fatalement un jour -et je te parle malheureusement en connaissance de cause...
Après avoir apporté tes modifications "en local" à ton fichier important.htm, et pour éviter ce genre de désagrément, je ne saurais que trop te conseiller d'adopter la procédure suivante pour tes transferts de fichiers html en FTP:
1\ Tu renommes le fichier distant important.htm en important_old.htm
2\ Tu transfères le fichier important.htm
3\ Si le fichier important.htm est foiré, tu pourras toujours restaurer important_old.htm !!
Tu possèdes alors un backup de toutes tes pages html en cas de problème...

haut de page

4.3 Insérer un tableau:

insérer un tableau fig#12  Pour créer le bandeau supérieur, rien de plus simple, tu vas d'abord insérer en haut de ta page, un joli tableau en cliquant sur la petite icône correspondante du composeur -ou à partir du menu Insérer ->Tableau. Comme tu le vois sur la fig#10, le tableau comporte 1 ligne, 5 colonnes & occupe 100% de la largeur de la fenêtre. De plus, tu indiqueras 0 pixels pour la largeur de la bordure. Ce type de tableau s'appelle "tableau à bords transparents". C'est en général plus esthétique que les tableaux bordés, & on y reviendra plus tard, les tableaux à bords transparents sont d'une grande importance pour la mise en page... Le petit effet de présentation dans cette section, est d'ailleurs obtenu de cette façon...
La bordure apparaît encore en pointillé, me direz-vous... Ceci n'est qu'indicatif: sélectionne l'onglet "Test" dans le bord inférieur de la fenêtre du composeur, & voilà la page telle qu'elle apparaîtra à l'affichage !
Pour remplir les cellules du tableau, comme souvent sur les logiciels modernes, tout s'effectue avec le clic-droit de la souris qui donne accès aux propriétés d'une cellule &/ou du tableau:
Ainsi, tu pourras commencer par créer le damier gris/vert en sélectionnant pour chaque cellule à partir du clic-droit, "couleur d'arrière plan de tableau ou de cellule".
Ensuite, tu pourras écrire le texte pour chaque cellule, sans oublier de le centrer comme sur un traitement de texte classique...

haut de page

4.4 Insérer une image:
Attention: Avant d'insérer la moindre image, tu devras d'abord enregistrer ta page localement. Comme on l'a déjà vu, tu nommeras ce fichier index -il remplacera le précédent fichier du même nom- & tu l'enregistreras dans le dossier local page. Tu peux alors reprendre ton fichier index pour y ajouter une image:

insérer une image
fig#13 		 La procédure pour insérer une image dans une page web est, en apparence, la même que pour insérer une image dans un document classique: Après avoir positionné le curseur à l'endroit souhaité, tu cliques sur l'icône "Image" -sinon, à partir du menu: Insérer -> Image - Une fenêtre comme ci-contre apparaît. Tu parcoures alors ton disque dur à la recherche de l'image souhaitée. Dans notre exemple, il s'agit de l'image buzz.gif  située dans le dossier local page.
 Pour notre exercice, j'ai légèrement augmenté les dimensions de l'image -pas trop tout de même sinon on voit les pixels ! - dans l'onglet  "Dimensions". 
Tu peux également choisir un "texte alternatif" -c'est le texte qui s'affiche avant le chargement de l'image. En fait, tu explores à ta guise cette fenêtre sans toucher pour l'instant à l'onglet "Liens" ni au bouton "Edition avancée". Si tu as cliqué sur OK mais que tu veux modifier un réglage, tu sélectionnes simplement l'image & tu choisis "Image propriétés" dans le menu issu du clic-droit. Une fois que l'image est insérée, n'oublie pas de la centrer comme tu le ferais avec du texte.

Attention: Avant de passer à la suite, vérifie que tu as bien coché le bouton :"L'URL est relative à l'emplacement de la page". Si ce n'est pas le cas, une fois en ligne, la page se chargera bien mais le navigateur s'obstinera à chercher buzz.gif dans le dossier local de l'internaute & non sur ton dossier distant ! Or,  la probabilité pour qu'un fichier buzz.gif situé dans un dossier page existe chez un internaute de passage est très proche de zéro !
Toutefois, même si le bouton est coché, pour que l'image s'affiche une fois en ligne, buzz.gif & son répertoire parent page devront être aussi présents sur ton disque distant -ce qui devrait être le cas si tu as suivi pas à pas toutes les sections de ce manuel. Tu comprends maintenant pourquoi j'insistais lourdement plus haut pour que le dossier local page soit le cône du dossier distant page.

Pour mettre une image en fond de page, la procédure est similaire: Dans le menu, tu sélectionnes Format -> Couleurs et fond de page et tu procèdes de la même façon que précédemment, sans oublier ici aussi de cocher le bouton :"L'URL est relative à l'emplacement de la page".

 haut de page
4.5 Vérification en ligne:
Une fois les images insérées, tu veux légitimement voir si tout se passe bien "en ligne". Après avoir enregistré localement index.html, tu le transfères selon la procédure vue en 3.3, dans le dossier distant page qui doit d'ailleurs déjà contenir buzz.gif & background.jpg. Si ce n'est pas le cas, une solution commode que tu pourras adopter à l'avenir, est de transférer d'un seul coup, l'intégralité du dossier page.
Pour visualiser ta page, il ne te reste plus alors qu'à charger son adresse http://membres.lycos.fr/crzb/page/index.html  dans ton navigateur.
Ca marche ?! Génial ! Tu peux passer à la suite....
Non, pas encore ! Je te disais plus haut que chaque navigateur a ses petites habitudes & ses petits défauts. Je te conseille donc vivement de vérifier l'affichage de tes pages sur le web avec plusieurs navigateurs. Concrètement, 90% des internautes utilisent Internet Explorer. Charge donc ta page avec ce navigateur afin de vérifier que tout va bien.
Si à la place des images s'affichent des cadres vierges, tu dois relire à tête reposée les sections qui précèdent. Bon courage & dis toi bien que c'est le lot de tout webmaster que de galérer un peu ...

4.5.1  Le fichier index.html

Lors de la consultation en ligne de ta page, tu peux essayer de taper simplement http://membres.lycos.fr/crzb/page au lieu de http://membres.lycos.fr/crzb/page/index.html
Ô surprise, c'est la même page qui s'affiche...
En effet, lorsqu'on tape dans un navigateur, l'adresse d'un dossier, le navigateur recherche un fichier nommé index.html ou index.htm situé dans ce même dossier.
- Si ce fichier existe, il l'affiche comme tu t'en rends compte !
- Si ce fichier n'existe pas, le navigateur renvoie l'inventaire des fichiers contenus dans le dossier. On l'a vu à la fig#7
C'est cette petite astuce qui permet d'afficher la page d'accueil d'un site simplement en tapant l'adresse de ce dernier, c'est à dire la "racine http" comme nous l'avons définie dans la section 3.4.2. Dans ce cas, la page d'accueil du site est située à la racine du serveur sous le nom index.htm ou index.html.
Il va de soi que dans un tel cas, les images affichées sur cette page d'accueil devront elles aussi être enregistrées à la racine. -cf 4.4.

ATTENTION: Tu peux nommer indifféremment tes fichiers truc.htm ou truc.html
Par contre, si tu as enregistré ton fichier sous le nom truc.htm & que tu appelles truc.html depuis ton navigateur, ce dernier te renverra un message d'erreur...

ll est plus que temps désormais de passer à un morceau de choix: le "petit lait" du webmaster:
la création de liens... 

haut de page
4.6 La création de liens:
Tu sais sans doute ce que représente un lien dans une page web... Mais oui, c'est quand le curseur en passant sur un objet -typiquement, une portion de texte ou une image- se transforme en main. En cliquant sur l'objet, tu ouvres alors un élément -typiquement, une nouvelle page, une nouvelle fenêtre, une image... en rapport avec l'objet cliqué.

Pour t'entraîner comme on le fait depuis le début, à créer des liens, tu vas d'abord éditer 4 nouvelles pages selon la procédure vue plus haut. Chaque page contiendra le même fond et le même bandeau supérieur que le fichier index.html. Tu enregistreras chacune de ces pages sous un nom différent, à savoir vie.html , oeuvre.html , liens.html , contact.html puis, après les avoir enregistrées dans le dossier local page, tu les transféreras -cf 3.3- dans le dossier distant page.

ASTUCE: Plutôt que de recommencer le travail vu en 4.3 tu peux simplement  ouvrir index.html dans le composeur, effacer l'image buzz.gif, puis sélectionner Fichier -> Enregistrer sous... et enregistrer 4 fois cette page sous 4 noms différents. Au moment de fermer le document, tu n'enregistreras surtout pas les changements sinon c'est index.html qui sera modifié !

ATTENTION: Les noms de fichiers ne devront contenir aucun caractères spéciaux (é ç è à ù ° / ñ...) ni "espace" sous peine de ne pas être reconnus par le navigateur ! Pour éviter les problèmes typographiques, je te conseille aussi de ne jamais utiliser de majuscule, par principe, cela t'évitera bon nombre de déconvenues...

4.6.1 Liens à l'intérieur d'une même page:
Pour avoir une idée de ce dont je veux parler, cliquez donc ici.
Ce type de lien est souvent utilisé pour remonter en haut de page à partir du bas, où dans le cas de pages très longues comme celle-ci, cela peut servir à créer un sommaire comme je l'ai fait au début de ce document.
La procédure est la suivante:

1) Sur la page en question, tu insères à l'endroit où tu souhaites diriger le lien, un "marqueur nommé" -A partir du menu Insérer -> Marqueur nommé... Tu fournis alors un nom du genre "haut de page" & après validation une ancre marqueur nommé apparaît à l'endroit spécifié.
ATTENTION: Le nom du marqueur ne doit pas comporter de caractères spéciaux ou accentués.
2) Tu sélectionnes l'élément à cliquer. Cet élément peut être un mot, une phrase ou même une image.

Propriété du lien
fig#14		 3) Tu cliques alors sur l'icône "Lien" en haut de la fenêtre -ou à partir du menu: Insérer -> Lien... Une fenêtre "Propriété du lien" apparaît.
4) Tu sélectionnes ton marqueur nommé dans la liste déroulante indiquée ci-contre.

Le tour est joué !

Pour vérifier que ça marche, tu dois cliquer sur l'icône "Choisir" en haut de page qui te fait automatiquement basculer dans le navigateur.

4.6.2 Liens à l'intérieur d'un site:
 Ce type de lien, ça peut ressembler à ça: En cliquant ici tu es dirigé vers une autre page, mais en restant toujours sur le même site. En d'autres termes, cela signifie que la page contenant le lien & le fichier vers lequel pointe le lien sont sur le même dossier distant -le fichier en question peut-être une autre page (c'est à dire un fichier html) ou tout autre type de fichier.
Alors bien sûr, pour faire une telle opération, encore faut-il que tu aies fabriqué plusieurs pages comme je te le suggérais en 4.6. Si tel est le cas, la procédure à suivre est la suivante:

1) Tu sélectionnes l'élément à cliquer. Cet élément peut être un mot, une phrase ou même une image.
 Dans l'exemple que je te propose à la fig#11, tu veux qu'en cliquant sur "La vie de Buzz" depuis la page index.html, l'internaute soit dirigé vers une nouvelle page du même site concernant la vie de Buzz. Cette page a pour nom vie.html et est enregistrée localement dans page et à distance dans page.
Tu sélectionnes donc "La vie de Buzz".

créer un lien relatif
fig#15		 2)  Tu cliques alors sur l'icône "Lien" en haut de la fenêtre -ou à partir du menu: Insérer -> Lien... Une fenêtre "Propriété du lien" apparaît.
3) A l'aide du bouton "Choisir le fichier", tu sélectionnes alors dans ton dossier local, le fichier html ciblé par le lien. Dans notre exemple, il s'agira de vie.html
Tu peux aussi taper directement le nom du fichier suivi de son extension.
4) Tu coches la case "L'URL est relative à l'emplacement de la page".

C'est fait ! Pour modifier ou vérifier ce lien, il te suffit de choisir "Liens Propriétés"dans le menu issu du clic-droit sur l'élément lié.

4.6.3 Liens externes:
Tu as dû en 3.6, créer un fichier liens.html, cible du lien "Ses liens préférés", depuis la page d'accueil index.html. Cette page contiendra une liste de liens qui permettront au visiteur de se rendre sur tel ou tel site en cliquant sur le lien en question. Prenons un exemple: à tout super-héros, super héroïne, tu souhaites qu'en cliquant sur le mot Druuna, ton visiteur soit dirigé vers la page d'accueil de la pulpeuse Druuna: http://www.druuna.net
Alors bien sûr, le site druuna.net n'est pas hébergé sur le même serveur que nos pages. Le lien à créer n'est donc pas un lien interne comme en 4.6.2, mais un lien externe. Fort heureusement, la procédure de création du lien est encore plus simple que précédemment: 

Druuna la pulpeuse
fig#16
 1) Tu sélectionnes l'élément à cliquer. Dans l'exemple proposé, cet élément sera le mot Druuna. Cet élément peut être un mot, une phrase, ou même une image. Le grand classique est de sélectionner une image correspondant à la cible du lien: ici, on pourrait sélectionner une image de Druuna pour attiser la curiosité de notre visiteur & l'inciter à cliquer sur notre lien.
2) Tu cliques alors sur l'icône "Lien" en haut de la fenêtre -ou à partir du menu: Insérer -> Lien... Une fenêtre "Propriété du lien" apparaît.

3) Dans le champ "adresse du lien", tu indiques l'adresse URL complète de la cible, avec éventuellement www & sans oublier l'inévitable http://
Le tour est joué ! Tu noteras que la case "L'URL est relative à l'emplacement de la page" reste vide.
Par ailleurs, comme plus haut, pour modifier ou vérifier ce lien, il te suffit de choisir "Liens Propriétés" dans le menu issu du clic-droit sur l'élément lié.

4.6.4 Liens vers le mail:
La page contact.html créée en 3.6 doit permettre au visiteur de contacter le concepteur du site. Il ne s'agit pas bien sûr de laisser son # de téléphone mais son e-mail, et comme l'Internaute est roi, on va même lui mâcher le travail & faire en sorte que la fenêtre de son logiciel de mail s'ouvre toute seule & remplir pour lui les champs "destinataire" et "sujet".
Là encore, un bon exemple remplace de longues explications: Tu veux qu'en cliquant sur la phrase: "écris moi !", ton visiteur puisse envoyer un mail à buzz@star.com. De plus, tu souhaites que le sujet -ou objet- du mail soit coucou  Buzzy !
La procédure à suivre est la suivante:

lien vers le mail
fig#17

1) Tu sélectionnes l'élément à cliquer. Ici, ce sera la phrase: "écris moi !". Plutôt qu'une phrase, il est fréquent de rencontrer dans ce rôle, une image de lettre ou un "gif-animé" représentant une boîte aux lettres qui s'ouvre.
2) Tu cliques alors sur l'icône "Lien" en haut de la fenêtre -ou à partir du menu: Insérer -> Lien... Une fenêtre "Propriété du lien" apparaît.
3) Dans le champ: "adresse du lien", tu saisis:

mailto:buzz@star.com?subject="coucou Buzzy !"

  En procédant de la sorte, l'internaute ayant cliqué sur le lien "écris moi !", et possédant  un logiciel de messagerie bien configuré verra s'ouvrir la fenêtre suivante:
envoi d'un mailfig#18

Si tu veux que la champ "sujet" reste vierge, tu te limiteras à:

mailto:buzz@star.com

ATTENTION: Il serait un peu inconscient de ma part de te livrer l'outil "mailto" sans te mettre en garde contre quelques fléaux du net relatifs au mail. Le sujet est tellement vaste qu'on va y consacrer une section à part entière:

4.6.5 Les fléaux du net:
Si tu lis ces lignes, c'est que tu es déjà conscient du caractère merveilleux d'Internet. Et comme toujours en pareil cas, il y a toujours des connards qui profitent de cet espace de liberté pour transformer l'Eden en enfer.
Parmi tous les fléaux qui nous guettent à la croisée des chemins informatiques, deux gros calibres se nomment Virus et Spam. Il serait bien prétentieux de ma part de vouloir te prémunir définitivement de ces plaies. Je me contenterai de t'indiquer comment "limiter la casse" en adoptant quelques précautions de base...
Tout d'abord, les virus.
Si tu es sous Linux, tu peux passer à la suite.
Sinon, il te faut savoir que ces saloperies se propagent essentiellement en fichier-joint dans les boîtes aux lettres électroniques. Lorsque tu charges tes mails sur ton logiciel de messagerie, avant même de les ouvrir, bien souvent l'ordinateur est déjà infecté. Une parade possible, outre l'usage d'un Antivirus bien sûr -à vos porte-monnaies ! est de ne plus utiliser de logiciel de messagerie ! En effet, la quasi-totalité des FAI proposent une consultation des mails par le procédé webmail, c'est à dire une consultation des mails en ligne sur leur propre site. Vous y perdrez un peu en rapidité & convivialité mais vous y gagnerez en sécurité puisqu'à aucun moment, sauf décision de votre part, le mail ne "touche" votre disque dur...
Autre plaie: Le Spam. Il s'agit des messages publicitaires non sollicités qui inondent nos boîtes aux lettres électroniques. On se demande bien souvent comment ces crétins ont pu récupérer notre e-mail. La solution est simple: Soit tu as commis la maladresse de laisser ton e-mail sur un site douteux, soit tu as participé à des forums de discussion sous ton vrai nom. Dernière possibilité, tu as laissé traîner ton e-mail sur ton site. Celui-ci est alors récupéré automatiquement par des programmes-fouineurs qui traquent les @ puis vendent leurs bases de données aux spammeurs.
Comment donc rester joignable sans faire le jeu des spammeurs ? Une solution consiste à écrire son mail de la sorte: buzzNOSPAM@star.com en précisant bien en dessous de retirer NOSPAM avant l'envoi.
Une autre solution plus élégante consiste à crypter son e-mail. Je consacre en 5.3 une section au cryptage des e-mails.

haut de page

4.7 Bilan provisoire:
Si tu as bien suivi tous les chapitres de ce tutoriel, avec un peu d'entraînement, tu devrais être en mesure de construire & de mettre en ligne un petit site sympa. J'ai moi-même construit le site que tu as sous les yeux avec ces mêmes outils. En effet, la quasi-totalité de mes pages n'utilisent rien de plus qu'images, tableaux -éventuellement à bords transparents- & liens en tous genres, avec parfois quelques finesses qui viendront fatalement avec la pratique.
Tu peux donc en rester là. Cependant, si tu ne veux pas te contenter d'un site "classique", si tu veux des fenêtres qui jaillissent, des menus qui s'ouvrent tout seul, des animations qui se chargent au passage de la souris, & même une musique de fond pour ton site, il va te falloir "soulever le capot" et te retrousser les manches. Mais là encore, tes efforts seront amplement récompensés par la beauté du résultat & la reconnaissance des Internautes.
Alors, donc, si l'aventure te tente, on peut maintenant passer à la suite...

haut de page

5. ALLER PLUS LOIN
Bon, nous y voilà, si tu lis ces lignes, c'est que tu es prêt à te retrousser les manches, alors allons y...

5.1 Le code source:

5.1.1 Afficher le code source:
Nous allons travailler sur une page simple comme celle-ci qu'il te faudra fabriquer en 3 coups de souris: Un titre, une image liée à http://www.druuna.net (lien externe), quelques lignes de texte puis "j'aime la physique" lié encore à http://www.druuna.net
Une fois la page créée, tu prends une inspiration profonde, puis à partir du navigateur, tu lances la commande "Source de la page" sous le menu "Afficher".

Afficher le code source fig#19


La voilà enfin la fameuse partition qui va nous ouvrir les portes du sérail... Impressionnant non ?!
Pas de panique, tu vas voir que ce n'est pas si compliqué qu'il n'y paraît... 

5.1.2 Comprendre le code source:
Une page web quelle qu'elle soit n'est que la traduction par votre navigateur d'une succession de commandes textuelles appelée "code source". Le code source constitue ainsi la "partition" d'une page qui sera interprétée par le Navigateur assimilé ainsi à un chef d'orchestre.
Telles lignes du code source vont correspondre à tel ou tel élément de la page, de la même façon qu'un ensemble de notes de musique sur la partition va correspondre à un air de musique bien précis lorsqu'il sera interprété par le chef d'orchestre puis joué par les musiciens.
A titre purement indicatif, je te présente ci dessous les correspondances entre les éléments du code source à gauche et les éléments de la page à droite.

code source fig#20
 code interprété fig#21

Cette présentation appelle quelques remarques:

Remarque #1:
Tout d'abord, l'image correspond elle aussi à une simple ligne de code.
En effet, le code source ne contient pas les images comme c'est le cas pour un fichier type "traitement de texte" (qui pourra de ce fait "peser" plusieurs Mo contrairement au code source qui ne "pèse" que quelques ko). Le code source ne contient que l'emplacement (l'adresse URL) de l'image à partir duquel le navigateur va aller chercher et afficher l'image. Si l'image n'existe pas à l'adresse appelée (erreur très fréquente) le navigateur affichera un cadre vide.

erreur sur l'image fig#22

Ainsi, lorsque tu enregistres une page avec la commande "enregistrer page...", tu te retrouves avec le code source d'une part sous la forme d'un fichier xxx.html, et les images d'autre part sous la forme de fichier yyy.jpg ou zzz.gif. Ceci est évoqué dans la pop-up "télécharger le tutoriel".

Remarque #2:
L'image du chef d'orchestre est assez efficace puisque de la même façon que deux chefs pourront donner deux interprétations légèrement différentes d'une même partition, il ne faudra pas s'étonner de voir l'affichage d'une page différer légèrement d'un navigateur à l'autre.
Concrètement, les 2 navigateurs les plus répandus sont par ordre de notoriété: Internet explorer et Mozilla. Ainsi, au moment de diffuser ton site, il est fortement recommandé de le tester sur plusieurs navigateurs.
L'image du code source / partition ne conviendra peut être pas à tout le monde. Une autre image tout aussi efficace consiste à comparer le code source au code génétique: tel gène va coder tel ou tel caractère dans le phénotype de l'individu: cheveux lisses ou bouclés, couleur de la peau... De la même façon, telle ligne du code source va coder l'affichage d'une image ou la couleur du fond de page.

5.1.3 Travailler le code source:

Apprendre à composer entièrement une page web à partir du code source -autrement dit: apprendre le langage html- est une activité captivante mais qui dépasse largement du cadre de ce cours. Ce que l'on va faire est plus simple: on va récupérer des lignes de code toutes prêtes -on appelle ça un "script"- et les coller simplement dans le code source de nos pages à un endroit précis -Pour copier Ctrl+c, pour coller: Ctrl+v.
Cet endroit précis sera repéré en fonction des <balises> qui, tu l'as déjà remarqué -cf fig#20-, balisent véritablement le code source </balises>.
Concrètement, pour ajouter des lignes supplémentaires dans le code source d'une page, 2 méthodes s'offrent à nous:
La première consiste à travailler directement dans l'éditeur "Mozilla composer". Un onglet permet en effet de passer directement de l'édition classique de la page sur laquelle on a travaillé jusqu'à présent (on parle d'édition "WYSIWYG", de l'anglais What You See Is What You Get pour Ce Que Tu Vois Est Ce Que Tu Obtiens) à son code source, et inversement. Tu rajoutes tes lignes sous l'onglet "source" puis tu vérifies l'effet obtenu en lançant le navigateur à l'aide de l'icône "Choisir" qui correspond à la commande "Fichier / Parcourir la page".
NB: il faut noter que certains "effets" ne seront visibles qu'une fois la page transférée sur le serveur.

afficher la source fig#23

Une autre méthode moins pratique mais plus fiable ( j'ai constaté personnellement certains bugs de Mozilla sur la modif du code source) consiste à ouvrir la page web, c'est à dire le fichier nom.html avec le plus basique des éditeurs de texte: le blocnote de windows ou bien vi/emacs sous Linux feront parfaitement l'affaire. ( Attention, les traitements de texte comme Word interprétent le code source au lieu de l'éditer. Il est donc indipensable d'utiliser un éditeur basique).
Tu apportes alors les modifications spécifiées, tu enregistres les modifications apportées, puis tu ouvres ce même fichier modifié avec un Navigateur pour visualiser les effets produits.
Bon, je crois t'avoir suffisamment abreuvé de théorie, passons à la pratique en travaillant sur quelques exemples simples.

haut de page

5.2 La fréquentation du site:

Soyons honnêtes: nous sommes tous en quête de reconnaissance, d'autant plus que le travail effectué est important. Ainsi, lorsque tu auras passé plusieurs journées à travailler sur ton site web, tu seras content d'apprendre qu'il a reçu la visite de nombreux Internautes.
Pour mesurer ton audience, un compteur de visite est indispensable. 

5.2.1 Insérer un compteur de visites:

Si tu possèdes un abonnement auprès d'un FAI, celui-ci te propose sûrement les fameuses lignes de script à insérer dans le code source pour obtenir un compteur. Ainsi, le script correspondant chez free est
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[login].dat"> qu'il faudra insérer dans le code source en bas de page. Les infos et la procédure à suivre sont claires sur le site concerné.
Si tu préféres un compteur indépendant -au cas où tu changes de FAI... tu trouveras des centaines de compteur différents sur compteur.com
Toutefois, avant de choisir définitivement un compteur, essaie de te renseigner sur son fonctionnement: certains sont exagérément optimistes, et s'incrémentent d'un simple clic sur le bouton "actualiser" du navigateur tandis que d'autres ne "bougent" que si ton visiteur reste plus de 30 secondes sur la page.
Certains, plus fantaisistes, proposent même de choisir la valeur de départ tant il est vrai que le passage de la première dizaine en une semaine est difficile à assumer...
Enfin, pour la plupart des compteurs, il faudra rebooter la machine et se reconnecter sur le net pour que le compteur s'incrémente, considérant alors une nouvelle adresse IP -désolé pour ces termes un peu barbares, mais on est dans la cour des grands maintenant, non ?. Cette manoeuvre te permettra de vérifier que le compteur marche bien, mais il existe plus efficace et surtout plus naturel pour faire tourner ton compteur en augmentant la fréquentation de ton site. Nous allons maintenant les passer en revue:

5.2.2 La signature de mail:
Tous les logiciels de mail (sur le thème, je vous déconseille formellement Outlook Express, véritable passoire à virus -cf 4.6.5) autant que les serveurs webmail offrent l'option "signature". Il s'agit de rajouter automatiquement une ligne à tous tes mails. Ton site web faisant maintenant partie de ton pedigree, tu pourras rajouter une ligne du genre:
********* rendez-vous sur http://abc.free.fr **********
incitant tes correspondants à visiter ton site (ou le mien !).

5.2.3 Les news (forums de discussion):
Si tu n'as jamais entendu parler des news, une recherche-google sur le thème sera une très bonne entrée en matière. L'aide de Mozilla sur les news (forums) est  aussi très bien documentée et t'expliquera comment configurer Mozilla pour y accéder -sans entrer dans le détail, si wanafree est ton FAI, le nom du compte sera news.wanafree.fr et le serveur sortant sera smtp.wanafree.fr
 En deux lignes, les news sont un moyen simple d'entrer en contact par mail avec un nombre important de personnes inscrites autour d'un même thème.

news fig#24

Tu as enfin bouclé ton site présentant ta dernière théorie alternative à la relativité générale. Pour faire valoir ta découverte, tu pourras te rendre sur les serveurs de news, choisir les listes issues d'une recherche sur les mots-clés: "physique", "cosmologie" et "astrophysique" pour y laisser des messages faisant la promo de ton site. L'effet est assez radical: ton compteur va prendre des couleurs !
Mais ATTENTION: Participer aux news sous son vrai e-mail est la meilleure façon de recevoir des dizaines de pubs dès le lendemain. Une excellente alternative pour contourner le problème est fournie par spamgourmet.

5.2.4 Le référencement:
Le mail et les copains, c'est bien beau. Le web, Google et Yahoo c'est mieux !
Contrairement à l'annuaire qui, par défaut recense tous les # de téléphone, le web, par défaut nous ignore.
Il faut donc se manifester auprès des moteurs de recherche pour se faire valoir. Certains logiciels te proposeront de faire le boulot à ta place, mais personnellement, je ne leur fait aucune confiance, et je ne te conseillerais que trop de consacrer toi-même une petite demi-heure à ton référencement.
Tous les moteurs de recherche proposent un lien pour le référencement.

référencement fig#25

Il te faudra alors réfléchir à quelques mots-clefs définissant ton site, ainsi qu'à un résumé de quelques lignes.
En 2004, les principaux moteurs sont Google, yahoo, Lycos et Voilà.
A partir du moment où tu seras référencé, les moteurs de recherche te rendront des visites régulières afin de vérifier le contenu de ton site. Concrètement, il s'agit d'un petit logiciel fouineur appelé "robot" qui va essentiellement rechercher sur ton site des mots clefs et un résumé contenus entre les balises <meta>  Pour bien faire les choses, il va donc te falloir créer ces balises appelées aussi meta-tags.

5.2.5 Les méta-tags:
Les modifications que l'on va apporter maintenant au code-source ne seront pas visibles dans un navigateur, à moins de demander explicitement son édition en invoquant la commande "afficher source" -cf 5.1.1.
Il s'agit ici de rajouter des lignes au code-source destinées à être lues et enregistrées par les "robots" des moteurs de recherche.
Dans le même ordre d'idée ton site sera aussi à ton insu visité par les "robots" des spammeurs à la recherche d'adresses e-mails à spammer -cf 4.6.5. Il faudra te protéger contre ces "attaques" en protégeant ton e-mail, et pourquoi pas, en tendant également un piège aux robots-spammeurs ! -cf http://caspam.org.
Si tu le souhaites, tu pourras insérer des méta-tags dans toutes tes pages, mais par défaut, elles hériteront des méta-tags de la page d'accueil.
Voici donc les lignes à coller dans le code-source de ta page d'accueil entre les balises <head> et </head>, en modifiant les parties en bleu selon ton cas.

<meta name="Author" content="nom de l'auteur du site">
  <meta name="KeyWords"
 content="mots clés définissant ton site, n'hésite pas à être exhaustif">
  <meta name="Description"
 content="description de ton site en quelques phrases">
  <meta name="Identifier-URL" content="URL de ton site">
  <meta name="Reply-to" content="ton adresse e-mail (à tes risques et périls)">
  <meta name="robots" content="index, follow">

Il existe de nombreuses autres balises que l'on peut insérer dans un site. Une recherche sur le thème "meta tags" t'en fournira une liste exhaustive.

5.2.6 L'essentiel !
A trop parler de tous ces trucs permettant d'augmenter la fréquentation de ton site, on en oublierait presque l'essentiel, ce sans quoi toute autre démarche serait vaine: un contenu riche !
Attention: une liste de liens externes donne une illusion rassurante de richesse mais n'apporte aucun contenu supplémentaire à un site.
De même, si les images agrémentent avantageusement une page, leur multiplication excessive lasse le visiteur.
Il n'existe qu'un cas qui contredit à lui seul les règles précédentes: les sites de cul qui recevront pourtant plus de visiteurs chaque jour que toi et moi en un an :-(
Pour le reste, la médiocrité de mes présentations ne me permet pas de m'étendre outre mesure sur ce sujet.

haut de page

5.3 Le cryptage des e-mails:
Lorsque j'ai ouvert un blog sur ce même site, comme il se doit, j'ai créé un e-mail de contact. Par flemme, j'ai négligé de le crypter. Le résultat ne s'est pas fait attendre:
Au bout de quelques jours, je recevais sur cet e-mail d'alléchantes propositions de crèmes et autres lotions pour augmenter la taille de mon pénis -crèmes qui par ailleurs sont obsolètes compte tenu des proportions éléphantesques de ...
Ainsi donc, le cryptage des adresses e-mail ne relève ni de la frime, ni de la paranoïa. Il s'agit simplement d'opposer quelques résistances à l'un des fléau du net -cf 4.6.5
La procédure à suivre n'est guère compliquée même si elle nécessite tout de même d'intervenir dans le code source de la page.
Pour me contacter, cliquer sur buzz@star.com
Pour réaliser le lien ci-dessus, j'ai utilisé la formulation 'mailto: ' vue en 4.6.4
Dans le code source, ce lien correspond à la ligne: <a  href="mailto:buzz@star.com">buzz@star.com</a> Cette ligne peut-être récupérée par des 'robots-fouineurs'. Il va donc s'agir de la remplacer 'à la main' par un petit script illisible par les robots mais transparent pour l'utilisateur.
Bon nombre de sites proposent de fabriquer ce script à partir de la ligne rouge ci-dessus ou directement à partir de l'adresse e-mail comme c'est le cas avec caspam que j'utilise préférentiellement sur http://caspam.org
Je lui fournis donc l'e-mail et il me renvoie tout un charabia encadré par des balises <script type="text/javascript">...... charabia..... </script>
Dès lors, tu vas remplacer dans le code source, la ligne rouge par la ligne verte.
C'est tout !
Lorsque tu lis la page correspondante à l'aide d'un navigateur, tu retrouves ' Pour me contacter, cliquer sur buzz@star.com ' mais cet e-mail est désormais protégé...

NB: Certains se demandent peut-être comment dans tout le fouillis du code source, j'ai trouvé la correspondance entre buzz@star.com et
<a  href="mailto:buzz@star.com">buzz@star.com</a>
J'ai ouvert dans Mozilla composer une page vierge et j'y ai rentré uniquement buzz@star.com . Je regarde ensuite l'effet produit dans le code source...



haut de page

5.4 La navigation:
Voici maintenant, histoire de se faire la main quelques petits trucs permettant d'améliorer la navigation des visiteurs à l'intérieur du site...

5.4.1 Les fenêtres en cascade:
Allons donc visiter un site, au hasard, en cliquant ici . Pour revenir à cette page, vous avez dû activer le bouton "retour" de votre navigateur. Cette démarche n'est pas toujours commode, et vous aimeriez bien parfois pouvoir consulter une page dans une deuxième fenêtre en gardant l'autre à l'écran, comme c'est le cas en cliquant la .
Pour effectuer cette deuxième démarche, il a suffit d'insérer TARGET="_blank" à l'intérieur de la balise pointant vers le lien.
En résumé, voici le code source de chacun des liens précédents:

ici:    <a href="http://www.aubade.com">ici</a>
la:     <a href="http://www.aubade.com" TARGET="_blank">la</a>

Pour trouver facilement les lignes en question, tu pourras avantageusement utiliser la fonction "Rechercher..." de ton éditeur...

5.4.2 Les redirections:
Il t'es sans doute arrivé de taper une adresse -disons URL1- dans la barre correspondante du navigateur, et de voir une autre adresse apparaître à la place de celle tapée: disons URL2, après un délai plus ou moins long.
Tel est le principe de la redirection.
Ce procédé permet, entre autre, de remplacer une adresse un peu lourde à retenir comme http://perso.wanadoo.fr/pnahmias -mon ancienne adresse- par un nom de domaine plus sympathique tel http://abc.free.fr
Dans ce cas, URL1 est un fichier html qui contient, au minimum, une ligne de script:

<META HTTP-EQUIV="refresh" CONTENT="0;URL=http://URL2">

Cette ligne est à insérer entre les balises <head> et </head> du code source, au même titre que les méta-tags vus en 5.2.5
Ici, la valeur 0 (zéro) indique que la redirection se fait sans délai, mais tu peux aussi rajouter une image dans le fichier html correspondant à URL1, et un petit texte du genre: "patience, vous êtes redirigés vers URL2" qui accompagnera, par exemple la valeur 3 pour 3 secondes.
Sur ce même principe, on peut aussi s'amuser à une petite partie de ping-pong intéressante ...

Ici, le lien ci-dessus pointe vers http://abc.free.fr/ping
Le dossier ping ne contient qu'un fichier: index.htm -cf 4.5.1- ne contenant qu'une seule ligne:

  <META HTTP-EQUIV="refresh" CONTENT="0;URL=http://abc.free.fr/pong">

Le dossier pong est identique à ping, à ceci près que le fichier index.htm qu'il contient comporte lui:

<META HTTP-EQUIV="refresh" CONTENT="0;URL=http://abc.free.fr/ping">

5.4.3 Les images-map:
Il s'agit en fait d'un moyen de rendre les images plus interactives en permettant des clics sur différentes zones de l'image qui déclencheront diverses actions: le chargement d'une nouvelle page, d'une animation, le lancement d'un programme... Vous pourrez trouver des logiciels pour effectuer cette démarche -"The Gimp" logiciel gratuit et libre fait ça très bien-, mais si vous suivez bien ce qui suit, vous aurez la satisfaction de l'avoir fait "à la main", tout seul, et aurez le beau rôle de jouer les "gros bras" devant les gonzesses au bureau... Alors allons y:

 Lorsque vous insérez une image dans une page, cela se traduit dans le code source par:
<img SRC="http://adressedel'image">

Si vous voulez que certaines zones de cette image soient cliquables et pointent vers un lien de votre choix, il suffit de remplacer la ligne précedente par celles qui suivent:
<MAP NAME=" nomdel'image ">
 <area SHAPE="forme" COORDS=" x,y,..." HREF="http://adressedulien" >
 <area ...
 ...
</MAP>
 <img SRC="http://adressedel'image" USEMAP="#nomdel'image " >

 Dans les lignes encadrées, forme peut prendre la valeur CIRCLE pour obtenir ne zone cliquable circulaire ou RECT pour une zone cliquable rectangulaire. Dans le premier cas x,y,... est à remplacer par: abscisse du centre du cercle,ordonnée du centre du cercle, rayon du cercle . Dans le second cas, x,y,... est à remplacer par: abscisse d'un coin du rectangle,ordonnée du même coin,abscisse du coin opposé,ordonnée du coin opposé le tout exprimé en pixels.
Pour connaître les coordonnées en pixels, il faudra éditer l'image dans un logiciel du style "The Gimp" -fourni dans les distributions Linux- ou Photoshop.
Si vous désirez fabriquer plusieurs zones cliquables, il suffit de répéter autant que nécessaire, la ligne <area...

Pour obtenir un exemple de ce genre d'exercice, retournez donc à la page d'accueil et promenez le pointeur de la souris sur le scaphandre de Buzz.
Le code attaché à l'image de Buzz -que vous pouvez retrouver en éditant le code source- est:

 
<map name="bluzz">
 <area shape="CIRCLE" coords="150,109,7"
 href="http://abc.free.fr/spaceranger.wav">
 <area shape="CIRCLE" coords="255,240,15"
 href="http://abc.free.fr/cominpeace.wav">
 <area shape="CIRCLE" coords="227,77,2"
 href="http://abc.free.fr/toinfinity.wav">
 <area shape="CIRCLE" coords="248,80,2"
 href="http://www.buzzlightyear.cjb.net/">
 </map>
 <img src="bluzz.jpg" nosave="" border="0" usemap="#bluzz"
 height="301" width="454" alt="Cliquez sur moi !">

On voit que les 3 premières zones cliquables vont lancer un fichier son (format wav) tandis que la dernière lance une nouvelle page (lien externe).

haut de page
5.5 le multimédia:
Allons bon, puisque tout le monde ne parle que de ça, il va bien falloir que je vous en touche deux mots du multimedia, même si à mes yeux les fondements d'une page web restent avant tout les textes. Alors c'est parti pour un petit peu de son et d'images animées...


5.5.1 Musique de fond
Rajouter une musique de fond à une page web ne me semble pas être une idée très heureuse. Cela me semble un peu trop invasif. Je ne rajoute cette partie qu'en réponse aux nombreux mails que je reçois sur ce thème.
Tu l'auras compris, le langage qui se cache derrière nos pages web est le html. Or, ce dernier ne possède aucune balise propre à insérer du son dans une page. Il va falloir ici avoir recours à un langage un peu plus évolué, à savoir le javascript.
Tout d'abord, tu vas devoir transférer le fichier mp3 de ton choix -disons zik.mp3 - dans le dossier auquel appartient la page à laquelle tu souhaites ajouter la musique de fond.
Ensuite, il va falloir modifier "à la main" le code source de la page en question.
Pour cela, entre les balises <body> et </body> tu insères le code suivant:
<EMBED SRC="zik.mp3" hidden=false autostart=true loop=-1>

Tu enregistres tes changements, transfères la page modifiée dans le même dossier que zik.mp3 et le tour est joué !

Ce script est très rudimentaire. Si tu veux un player qui flashe, une liste de lecture au choix ou aléatoire pour bien exaspérer tes visiteurs, il faudra alors te rendre sur editeurjavascript.com . Une recherche sur les mots 'musique' ou 'mp3' te fournira alors une tripotée de scripts pour arriver à tes fins.

5.5.2 Vidéo embarquée
On a vu en 4.6 comment créer des liens: il suffit de mentionner le nom du fichier cible dans la fenêtre "propriétés du lien", et celui-ci est automatiquement associé à un mot, un texte ou à une image.
A ce titre, on peut fort bien lier un fichier vidéo à une phrase du genre: "cliquez ici pour charger la vidéo". Lors de l'appel du lien, vous aurez alors le choix de lire la vidéo avec votre lecteur habituel, ou bien de la télécharger. C'est ce que j'ai mis en oeuvre dans plusieurs manips de ma page d'expériences sur ce même site.
Mais vous conviendrez que proposer une vidéo embarquée sur une page avec un petit bouton 'play' et un autre pour 'pause', ça en jette quand même un peu plus non ?


Pour cela, rien de bien compliqué, on va mettre à profit les fonctionnalités du site YouTube.
Il faudra donc au préalable s'inscrire sur le site afin de pouvoir télécharger notre vidéo vers le serveur de YouTube (sur le site, il s'agit du lien 'upload videos').
On renseigne alors quelques champs avant d'accéder à la fenêtre d'upload ( faiblesse du français sur ce point: dans la langue de Molière, on utilise "télécharger", que l'on envoie un fichier vers ou depuis une machine. Dans la langue de Bill Gates, on a respectivement "upload" et "download". Dans notre cas, il s'agit donc bien d'upload).
Il est à noter que YouTube digère tous les formats vidéo, issus d'une webcam, d'un gsm, d'un appareil photo numérique ou d'un camescope.
Une fois votre fichier vidéo "uploadé" sur YouTube, vous obtenez la fenêtre suivante:
YouTube fig#26
On dispose alors d'une fenêtre surmontée de "Embed the video on your website" qui signifie littéralement: "Embarquez la vidéo sur votre site web".
C'est précisément ce que l'on cherche à faire !
Il suffit alors de copier le script contenu dans la fenêtre en question et de le coller dans le code source de notre page à l'endroit souhaité. Vous verrez alors un espace vide apparaître dans l'éditeur. Pour vérifier que ça fonctionne bien, il faut alors enregistrer les changements sur votre page puis l'ouvrir dans un navigateur.
Miracle ! On dispose alors d'un joli player vidéo en Flash !
Si vous voulez de plus que le player soit centré, il vous suffit d'encadrer le script par les balises <div style="text-align: center;"> ...le script.... </div>
Merci YouTube...
haut de page

5.6 Bilan:
Je serai peut être amené à rajouter des rubriques dans cette 5eme partie, mais mon objectif à travers les quelques exemples précédents n'est sûrement pas de te montrer tout ce que l'on peut faire sur une page, mais bien plutôt de te montrer la façon dont on procède.
Alors bien sûr, je ne t'ai rien expliqué encore du "dynamic menu" qui surmonte cette page ou du moteur de recherche interne sur ma page d'accueil car pour tout cela, et bien j'ai procédé rigoureusement de la façon dont je t'entretiens dans toute cette 5eme partie: j'ai recherché sur le web les scripts correspondants à ce que je voulais, et puis un "copier/coller" bien senti a fait le reste.
Tu trouveras toi-même bon nombre de sites proposant des scripts "clefs en main".
En ce qui me concerne, j'ai très souvent recours à l'excellent site editeurjavascript.com . Les scripts sont nombreux et variés. De plus, tu visualises les effets avant même de copier la moindre ligne. Enfin, tu as le choix d'éditer le script en ligne, ou de la recevoir par mail.
Il faut tout de même noter que les scripts sont écrits en "javascript" plutôt qu'en html, mais ceci est totalement transparent pour l'utilisateur et ne change en rien la procédure à suivre que tu connais déjà.

haut de page

5.7 Et après ?
Si tu veux encore perfectionner ton site web, ce qui est une noble  entreprise, tu pourras tout d'abord utiliser un éditeur plus performant que Mozilla qui n'en reste pas moins un excellent outil pour débuter.
Il semblerait que Dreamweaver ( littéralement: le "tisseur de rêves" ) soit une référence en la matière, mais je ne peux guère t'en dire plus car personnellement, je continue à travailler avec Nvu qui est très ressemblant à Mozilla.

Une autre moyen de progresser est d'apprendre les langages par eux mêmes afin de créer ses propres scripts. Tu devras inévitablement commencer par le html, et si tu te sens motivé et que l'aventure te tente, tu pourras alors te lancer dans des langages plus élaborés et plus puissants tels que le Php ou le Flash.

Lorsque tu en seras là, ce qui est loin d'être mon cas - mais n'est-ce pas la fierté de tout bon professeur que d'être dépassé par ses élèves- tu auras peut-être une pensée émue pour ce bon vieux Buzzy qui prétendait alors t'apprendre "Comment faire une jolie page web".













REMERCIEMENTS:
Des remerciements dans un tutoriel informatique, ça ressemble à quoi ?
A rien bien sûr ! Toutefois, après avoir effectué un travail conséquent, on se sent parfois la légitimité d'en référer à ceux sans qui rien n'aurait été possible.
Ainsi donc, je voudrais ici remercier du fond du coeur ma mère  qui m'a donné de toutes ces forces et parfois à mon insu, le goût du travail et du travail bien fait.






















Alors, c'est compris ? On est restés sur la même page... Cliquez ici pour revenir au boulot...