Comment créer sa page Web
et la diffuser sur Internet
Note: nous vous proposons le dernier article sur le sujet
paru dans le magazine Atout Micro en février 2002
Note: nous vous proposons le dernier article sur le sujet
paru dans le magazine Atout Micro en février 2002
Une activité à la portée de (presque) tous
par François Picard
Beaucoup de gens aimeraient avoir leur propre site Web mais pensent que c'est trop difficile à faire et ils ne profitent même pas de l'espace disque que leur réserve leur fournisseur de services Internet pour leur page Web personnelle. Une fois qu'on sait créer une page Web, on sait du même coup comment faire un montage en HTML pour envoyer par courrier électronique et vice-versa. Avec les logiciels disponibles aujourd'hui, faire une page Web est un jeu d'enfant. Pourquoi se priver d'un mode de communication moderne, multimédia si désiré, alors qu'on peut en maîtriser les bases avec quelques minutes d'apprentissage seulement puis se perfectionner doucement au fil des semaines?
UN SITE WEB OU PAS
La plupart des fournisseurs de services offrent à leurs clients de mettre en accès leur page Web personnelle à l'intérieur même du prix de leur abonnement mensuel. Selon le fournisseur, l'espace disque offert varie alors entre un mégaoctet (Mo) et 10 mégaoctets. Pour un espace disque destiné à un site Web commercial, d'entreprise ou d'organisme, on peut trouver des services d'hébergement avec 10 Mo d'espace disque pour une vingtaine de dollars par mois, davantage si on a besoin de quelque chose de plus gros. Une entreprise qui veut avoir pignon sur Internet peut donc le faire pour une trentaine de dollars par mois, taxes incluses si elle crée et entretient ses pages Web elle-même.
La première chose à faire est de déterminer si on veut avoir une page Web personnelle ou d'entreprise. Pour un individu ou une famille, c'est un moyen simple de mettre en accès des photos, des documents, des nouvelles et même de courts vidéos pour les amis ou d'autres membres de la famille. On prend vite du plaisir à le faire et ceux qui ont créé leur page Web personnelle sont fiers de l'avoir fait. Pour une entreprise, il faut bien comprendre que de plus en plus de gens se servent d'Internet pour trouver ce dont ils ont besoin le plus près possible de chez eux aussi bien que de l'autre bout du monde. Quel que soit le produit qu'on vende ou le service qu'on offre, il ne peut y avoir que des avantages à avoir au moins une page de présentation sur Internet car Internet est comme un immense répertoire de pages jaunes dans lequel on fait de la recherche par mots clés.
LE CHOIX D'UN HÉBERGEUR
Lorsqu'on a décidé de faire un site Web, il faut trouver un hébergeur qui offre un bon service à un prix concurrentiel. Le fournisseur de services Internet sur lequel on installe son site Web peut logiquement être situé n'importe où dans le monde mais il est quand même préférable de le choisir dans le même pays. Si le site Web se trouve au Canada, par exemple, il y a de fortes chances pour que l'accès aux données soit plus rapide pour des Canadiens que pour des gens d'autres pays et en plus il y a peu de risques que les renseignements transmis soient interceptés. Par contre, si le site Web personnel ou commercial se trouve dans un autre pays, les données qui s'y trouvent se promènent en réalité à travers plusieurs pays où elles peuvent être interceptées, copiées ou utilisées avant d'atteindre l'ordinateur de la personne qui veut les lire. Si on veut pouvoir mettre des renseignements personnels en toute tranquillité sur un site Web ou avoir un site Web commercial sécurisé, il est préférable de choisir un fournisseur de services Internet le plus près possible de chez soi ou du public visé.
Pour les pages personnelles aussi bien que commerciales, on peut trouver des services entièrement gratuits mais il faut bien comprendre qu'ils rentabilisent leur affaire soit en faisant afficher de la publicité dans vos pages, soit en récupérant des informations sur les visiteurs de vos pages pour les revendre par la suite. Il n'y a aucun mécène dans ce domaine. Le mieux est souvent de payer quelques dollars pour être tranquille et être sûr du service offert. Les fournisseurs de services Internet indiquent habituellement à leurs clients qu'ils offrent de l'espace pour un site Web personnel ou pour un site commercial et sous quelles conditions. Dans le cas d'un site Web commercial, il faut bien insister pour avoir une soumission comportant tous les coûts car certains fournisseurs de services Internet facturent en plus pour l'espace disque occupé par le fichier de statistiques, selon le nombre d'accès aux fichiers ou même selon le temps d'accès à l'ordinateur-serveur alors que d'autres ne font payer qu'un prix global. Il faut aussi prévoir des coûts supplémentaires si on veut utiliser un serveur sécurisé, obtenir un certificat d'authentification, avoir son propre nom de domaine, faire des transactions en ligne, etc.
Au moment du choix, on peut en profiter pour demander quel support technique est offert. Il faut au moins pouvoir consulter un petit guide expliquant comment transférer les fichiers de ses pages sur l'ordinateur serveur. La plupart du temps, cela se fait par l'entremise d'un accès FTP, autrement dit un système de transfert de fichiers standard, mais parfois certains fournisseurs veulent recevoir les fichiers de pages personnelles sous forme de fichiers attachés à un message de courrier électronique et avec des noms prédéterminés. Pour la conception d'un site Web commercial, qui doit transmettre l'image d'une entreprise, il est parfois préférable de faire appel à un service de conception de pages, ce qu'offrent beaucoup de fournisseurs de services Internet; si vous le faites, n'oubliez pas de demander à voir quelques exemples de réalisations et indiquez le prix maximum que vous êtes prêt à payer.
LE LANGAGE HTML
Le HTML est le mode d'expression graphique de base utilisé sur les serveurs Web. Comme cette façon de combiner les images et les textes à l'écran paraît un peu spectaculaire, on serait tenté de croire que c'est difficile à faire mais ce n'est pas le cas grâce au langage HTML, un véritable langage de programmation inventé au début des années 1990 et devenu un standard par la suite. C'était important d'arriver à un standard pour qu'un maximum d'utilisateurs à travers le monde puissent en profiter. Les documents en HTML s'affichent à peu près de la même façon sur les différents types d'ordinateurs.
L'HyperText Markup Language (HTML) consiste en l'ajout de simples suites de caractères prédéfinies, appelées balises ou étiquettes (tags en anglais), à l'intérieur d'un document pour entraîner l'affichage d'une couleur ou d'une image de fond, un retour à la ligne ( <BR> ), l'affichage d'une image ou d'un extrait de film, la liaison avec un autre document, etc. On peut utiliser le HTML pour produire toutes sortes de documents: du courrier électronique avec des images intégrées, des nouvelles, des documents de présentation, des articles de journaux ou même des livres électroniques. Les serveurs de type World Wide Web donnent accès à des fichiers encodés en langage HTML qui peuvent établir automatiquement des liens avec des informations, des images ou des sons produits par des fichiers installés sur le même serveur aussi bien que sur d'autres serveurs du même type n'importe où dans le monde. C'est très pratique et d'une efficacité impressionnante.
Un document en langage HTML comporte donc du texte standard et des balises ou étiquettes placées entre deux crochets avec un nom de référence et des attributs. Pour chaque action particulière, on trouve une balise marquant son début (exemple: <center>) et la plupart du temps une autre indiquant sa fin (exemple: </center>) qui comporte une barre oblique. D'autres balises ou étiquettes entraînent une action ponctuelle comme <BR> pour un retour à la ligne ou <HR> pour le traçage d'une ligne horizontale. Au langage HTML de base, qui a évolué avec de nouvelles fonctions complémentaires, on a ajouté des scripts, qui sont de petits programmes en différents langages, ainsi que des langages plus évolués (Java, JavaSript, VB Script, VML, ASP, PHP...).
LES LOGICIELS DE CRÉATION DE PAGES
À la limite, une personne qui connaît les commandes du langage HTML peut se servir d'un simple éditeur de texte pour préparer le fichier HTML d'une page Web. Il existe aussi une trentaine de logiciels conçus presque exclusivement pour créer des pages Web, la plupart en anglais à part quelques exceptions. Parmi les quelques logiciels spécialisés en français, on note FrontPage Express de Microsoft qui est distribué gratuitement avec Microsoft Internet Explorer, Netscape Composer fourni sans frais avec Netscape Navigator, Web Construction Kit de Pierre Geneves, WebExpert de Visicom vendu sous forme de partagiciel (shareware) ou en magasin, Microsoft FrontPage 2002 qui est la version commerciale très développée de l'éditeur de pages Web de Microsoft et GoLive d'Adobe pour Mac ou pour PC. GoLive est le plus complet mais en même temps le plus cher (500 $CAN environ). La version commerciale de FrontPage est vendue de façon autonome (250 $CAN environ) ou comme partie intégrante de certaines versions de Microsoft Office tout comme Adobe GoLive peut être acheté seul ou à l'intérieur de l'ensemble Web Collection d'Adobe. Parmi les logiciels en anglais les plus connus, il y a le petit éditeur gratuit EasyHTML, Dreamweaver, Homesite, Namo WebEditor, Web Construction Kit et Htmledit. Bien entendu, FrontPage Express, WebExpert, FrontPage et GoLive sont aussi disponibles en anglais.
=======
Difficile de trouver FrontPage Express
C'est malheureusement devenu difficile de trouver FrontPage Express car Microsoft ne l'offre plus comme option de téléchargement dans Windows Update. Il est cependant sur le disque CD-ROM de FrontPage 2002 dans le fichier compressé FPESETUP.CAB du répertoire IE5 ainsi que sur les CD d'Office 2002 ou de Publisher 2002 dans le répertoire \Files\OSP\1036\IE5. Il était aussi dans le répertoire \IE5\FR d'Office 2000. Si on n'a pas l'un de ces produits, on peut le trouver de différentes autres façons. D'abord, il peut déjà être sur l'ordinateur et, dans ce cas, on le trouve habituellement dans c:\Program Files\Microsoft Internet Explorer. Le nom du fichier exécutable du logiciel est FPXPRESS.EXE et ils se trouvent dans le sous-répertoire BIN. Il peut aussi avoir été placé ailleurs lors de son installation mais avec le même nom de fichier. Quand on le trouve, on peut ajouter un raccourci vers FrontPage Express sur le bureau de Windows. Ceux qui utilisent déjà Microsoft Internet Explorer 5 peuvent récupérer FrontPage Express en faisant une installation complémentaire de ce logiciel. À ce moment-là, il s'agit de trouver le module d'installation ie5setup.exe et de cliquer dessus. On accepte ensuite les termes du contrat et on choisit «Installation minimale ou personnalisée du navigateur» puis «FrontPage Express» dans les options de mises à jour de Microsoft Internet explorer. Ce n'est pas disponible dans la version 6 du logiciel. Enfin, dernière possibilité: faire de la recherche sur Internet pour trouver un site qui en a mis une copie en accès; utilisez les mots clés «télécharger FrontPage Express».
=======
Selon ce qu'on veut faire au niveau de la production de pages Web, on peut se tourner vers l'un ou l'autre de ces produits. Certaines interfaces plairont à certaines personnes mais pas à d'autres. Certains préféreront les caractéristiques d'un des logiciels mais pas celles d'un autre. Il est donc très important de bien se renseigner avant de faire un choix, en particulier en allant visiter le site Web des producteurs de ces logiciels. Il faut aussi prendre en considération le prix de chacun de ces logiciels qui peut varier énormément de l'un à l'autre. DreamWeaver de Macromedia est par exemple agréable à utiliser mais il coûte 500 $CAN alors que le logiciel québécois WebExpert est un outil de programmation HTML très puissant, sans flafla ni affichage WYSIWYG (What You See Is What You Get, autrement dit où l'on peut voir à l'écran ce que cela donne au fur et à mesure qu'on ajoute de nouveaux éléments), mais il ne coûte que 89,95 $CAN en magasin ou dix dollars de moins par téléchargement.
Pour moi, l'idéal serait un logiciel qui aurait à la fois les caractéristiques de logiciels simples et très fonctionnels comme FrontPage Express ou Netscape Composer, qui sont WYSIWYG, et les fonctionnalités très développées de WebExpert pour un coût total inférieur à 100 $CAN mais je n'en ai pas trouvé si bien que j'utilise conjointement FrontPage et WebExpert. Même la version commerciale de FrontPage ne dispose pas de l'ensemble des fonctions de ces deux logiciels utilisés en complément l'un de l'autre. On peut se servir de la version commerciale de Microsoft FrontPage pour créer des pages Web pour n'importe quel type de serveur mais elle est plus tournée vers des applications Web utilisant un serveur avec les extensions FrontPage Server installées, ce que préfèrent ne pas faire la plupart des fournisseurs de services pour des questions de sécurité ou de support supplémentaire qu'ils devraient assurer.
À côté de ces logiciels spécialisés, il existe cependant une foule de logiciels d'édition graphique ou de montage graphique qui permettent de créer une page Web d'un seul clic de la souris une fois que le montage est fait à l'écran. Au nombre de ces logiciels, on en compte plusieurs dont nous avons parlé ces derniers mois: PhotoImpact de Ulead Systems, CorelDRAW de Corel, Publisher de Microsoft, PageMaker, Illustrator, Photoshop et PhotoDeluxe d'Adobe, PhotoSuite de MGI, etc. La plupart de ces logiciels ont l'avantage de permettre de créer une page très facilement mais il faut absolument recourir par la suite à un éditeur de pages Web comme WebExpert ou FrontPage pour modifier des éléments, en déplacer ou en ajouter à moins de repartir du montage de base sauvegardé dans un format propre au logiciel utilisé. Les pages faites avec ces logiciels sont souvent plus longues à charger que des pages faites avec des éditeurs HTML.
LA PRÉPARATION DES ÉLÉMENTS
L'ébauche de la page
Avant de commencer, il faut décider à qui on veut s'adresser et quel message ou quelles informations on veut transmettre au lecteur de nos pages Web. Si on veut avoir un ensemble de plusieurs pages, il faut faire un plan, structurer les différentes parties en pensant bien que le lecteur ne verra qu'un écran à la fois. Comme c'est également quelqu'un de pressé, qui veut obtenir de l'information le plus efficacement possible, il faut éviter toutes les grosses images qui nécessitent un long temps de chargement. Beaucoup trop de sites Web sont encombrés pas de gros fichiers graphiques. C'est sûr que c'est beau une fois que tout est chargé, plusieurs minutes plus tard parfois pour ceux qui ne sont qu'à 56K, mais la plupart des internautes auront cliqué sur Stop bien avant d'en arriver là. Une belle photo peut être petite et parler tout autant qu'une photo pleine page. Le plus important c'est la facilité de lecture du message, donc de chaque page écran et la rapidité d'accès aux informations.
D'abord, faire un plan de travail
La première chose à faire, c'est de mettre ses idées noir sur blanc. Pour cela, le plus simple est de prendre quelques feuilles de papier blanc, de les placer à l'horizontale pour qu'elles aient la forme d'un écran et d'y écrire et dessiner ce qu'on aimerait que voient les visiteurs d'Internet. Sur le premier écran, on place un titre, un nom, un sigle et quelques informations de base introduisant le visiteur aux autres pages du dossier. Ce sera votre premier fichier qui correspondra à la page d'accueil de votre site Web. Autour de lui, vous placerez vos autres ensembles de pages, en regroupant vos thèmes et vos idées pour que le tout ait une certaine logique et se tienne, ce qu'apprécieront beaucoup les visiteurs de votre site. Pour avoir des idées, si elles ne viennent pas facilement, le mieux est de se rendre sur Internet et de visiter toutes sortes de sites en prenant le temps d'observer comment les textes et les images sont présentés, où ils sont placés dans la page, et ce qui attire le plus notre attention.
Rassembler tous les éléments
Dès ce moment, vous pouvez commencer à rédiger le texte qui devra apparaître dans les différentes pages. Une fois que c'est fait, vous sauvegardez dans des fichiers individuels le texte correspondant à chacune des sections d'information de votre site Web en utilisant le mode de sauvegarde en mode texte simple de votre éditeur de texte. C'est alors le temps de décider quels dessins ou photos vous allez incorporer à vos pages. Pensez que vos illustrations doivent être de petites dimensions pour abréger le temps de chargement, qu'elles doivent apporter un plus au niveau de l'information ou de la mise en page et qu'elles doivent être de la meilleure qualité possible. Tous ces points sont importants pour satisfaire le visiteur de votre site. Il est nécessaire d'utiliser un logiciel d'édition graphique pour préparer les images mais un logiciel de bas de gamme, comme Microsoft Paint vendu avec Windows, peut suffire dans la plupart des cas.
De préférence, vous sauvegarderez vos images en format GIF (256 couleurs) ou en format JPEG (jusqu'à 16 millions de couleurs) qui sont les deux formats graphiques les plus souvent supportés sur Internet. Dans la plupart des cas, sauf pour des photos, on ne peut pas voir de différence entre une image en 256 couleurs et une image en couleurs 24 bits parce que ce sont les 256 couleurs dominantes d'une image qui sont retenues par l'éditeur graphique au moment de la sauvegarde. La principale différence devrait se situer au niveau du temps de téléchargement du fichier de l'image qui sera plus court si le fichier est moins gros. Pour les photos, il est souvent préférable de sauvegarder en JPEG pour conserver un maximum de couleurs et de nuances.
L'étape de programmation
Il existe des livres qu'on peut acheter en librairie et diverses informations sur Internet pour ceux qui veulent en savoir plus avant de «programmer» leur page Web. C'est très facile de trouver un guide de programmation HTLM en français mais il y en a de plus complets en anglais. Le guide de programmation HTML proposé par l'Université Laval est l'un des meilleurs en français (voir coordonnées ci-dessous).
Comme nous l'avons expliqué plus haut, on peut créer le fichier HTML avec toutes sortes de logiciels. Il s'agit de trouver ceux qui correspondent le mieux à nos besoins et à nos moyens.
Demandez au fournisseur de services Internet le nom du répertoire de stockage et la méthode de transfert
Comme vos fichiers HTML seront stockés sur l'ordinateur d'un fournisseur de services, vous devez lui demander dans quel répertoire de son ordinateur ils seront placés. Selon le cas, on vous donnera seulement un simple nom de répertoire ou toute une série de sous-répertoires à traverser pour arriver à vos fichiers. Demandez donc au fournisseur de service, ce que vous devez donner comme préfixe (chemin à suivre) à vos noms de fichiers lorsque vous effectuerez des liens hypertextes entre eux durant la programmation HTML. De même, si vous souhaitez établir des liens hypertextes avec des pages HTML sur d'autres sites, pensez à bien noter le chemin à suivre pour y accéder. Attention! La moindre faute de frappe empêchera l'établissement du lien.
UN EXEMPLE DE PAGE SIMPLE
Fabrication d'une page avec FrontPage Express (c'est à peu près la même chose avec Netscape Composer)
1. On ouvre le logiciel et on demande la création d'une nouvelle page
2. On descend à Propriétés de la page dans la première colonne de menus déroulants. Là, on indique le titre de la page qui apparaîtra en haut de l'écran durant la consultation de la page Web. On peut aussi configurer la page avec une couleur de fond ou de la musique d'ambiance.
3. On commence par écrire ce qu'on veut comme titre puis on sélectionne ce texte, on choisit un type de caractère, une grosseur de caractère, une couleur de caractère. On clique ensuite sur l'icône de centrage pour placer ce titre au milieu de la page. Par la suite, on pourra ajouter n'importe quel texte en s'y prenant de la même façon.
4. Pour ajouter une image, on se sert de la fonction Insère > Image puis, en cliquant sur l'image avec le bouton droit de la souris, on arrive à un menu contextuel qui permet d'ajuster la position de l'image et, dans le cas de notre exemple, par exemple, d'ajouter un hyperlien vers un site Web sur l'Abitibi.
5. Lorsqu'on décide d'ajouter d'autres pages au site Web, on crée un menu, si possible vers le haut de la première page, avec le nom des autres pages et des hyperliens qui y mènent.
QUELQUES RECOMMANDATIONS
Se méfier des variations d'affichage
Pendant la programmation d'une page, il faut en tester régulièrement l'affichage avec les deux navigateurs Web les plus répandus, soit Microsoft Internet Explorer et Netscape Navigator. Comme chacun d'eux a ses propres fonctions non disponibles dans l'autre, il se peut que la même page HTML s'affiche différemment selon celui qu'on utilise et c'est habituellement ce qu'on veut éviter. Il existe aussi des problèmes possible lors du passage d'un PC à un Macintosh ou vice-versa. Les personnes qui font la conception des pages en hypertexte doivent donc prévoir de telles variations et vérifier l'affichage de leur document avec plusieurs logiciels s'ils ne veulent pas que ceux qui consultent leurs pages trouvent qu'ils ne sont pas très bons pour créer une page Web.
Attention aux renseignements personnels
Pour les pages personnelles, il est recommandé d'éviter de diffuser des renseignements trop personnels comme l'adresse complète, les dates où l'on préfère habituellement partir en vacances, des photos détaillées de ce qui pourrait attirer des voleurs dans la maison ou l'appartement, etc. Il ne faut pas non plus se laisser prendre au piège de répertorier ses pages Web personnelles dans les principaux moteurs de recherche. Par contre, c'est indispensable de le faire pour un site commercial.
Ne violez pas le copyright des autres
Sur beaucoup de sites Web commerciaux ou personnels, on note la présence de documents, de dessins ou de photographies numérisées qui ont été récupérés soit dans des revues, soit sur d'autres sites Web, soit même par des saisies d'écrans lors d'émissions de télévision. Cette pratique est illégale et elle risque fort de causer de sérieux problèmes à ceux qui en usent. On n'a pas le droit de diffuser sans autorisation sur Internet le moindre extrait d'un livre ou même d'un article, un dessin, une image, une page Web ou une photo faits par quelqu'un d'autre. On n'a même pas le droit de récupérer sans autorisation une icône ou une ligne personnalisée dans une page Web pour s'en resservir dans sa propre page. Néanmoins, certains auteurs accepteront que vous établissiez un lien avec leur document ou leur image en indiquant sa source et, bien entendu, après en avoir demandé l'autorisation. Le copyright, c'est sacré; respectez-le, s'il vous plaît.
QUELQUES BONNES ADRESSES
(ces adresses ont été validées au moment de la publication de l'article seulement)
http://www.sit.ulaval.ca/logi/outilshtml.html
Outils et documentation pour la production d'une page Web (Université Laval, Québec), le premier site à consulter avant d'entamer la création d'une page Web et pendant qu'on fait du développement en HTML
http://guide.ungi.net/
Un nouveau guide Internet en français de Gilles Maire (malgré son nom, il existe depuis plusieurs années et il a une excellente réputation)
http://www.asi.fr/~ericbon/htmldoc.htm
Malibu's Home Page: Réaliser sa page Web (une excellente ressource en français)
http://www.uco.fr/services/biblio/cdps/web_composer.html
Création d'une page Web simple avec Netscape Composer
http://www.philgate.com/phil_Web/construire.html
Philgate: Astuces pour construire sa page d'accueil sur le Web
http://www.htmlhelp.com/fr/faq/html/
FAQ de la création de pages HTML (en français)
http://www.edunet.ch/creersapage/
Créer sa page Web, des conseils proposés par Édunet
http://www.florimont.ch/coursCep/creationPageWEB_index.html
Un cours de création de pages Web en ligne
http://www.tashian.com/htmlguide/index.html
Quelques bons trucs de programmation de pages Web en anglais
http://webservices.web.cern.ch/WebServices/AuthoringDoc/RefDocs/html/cover.html
Les spécifications officielles du HTML 4 (anglais)
http://www.pierresoft.com/fr/index.htm
Site de téléchargement de Web Construction Kit (son auteur a également créé le logiciel d'édition graphique Adesign)
http://www.visic.com/webexpert/
Site de téléchargement de Web Expert
http://www.memoclic.com/divers/download/telecharge38.php
Site de téléchargement de FrontPage Express en français
http://www.agers.cfwb.be/pedag/tice/logiciels/editeurhtml/editeurhtml.asp
Site de téléchargement de plusieurs éditeurs de pages Web
http://home.fr.netscape.com/fr/communicator/4.6/
Site de téléchargement de Netscape Communicator 4.6 en français intégrant Netscape Composer
http://home.netscape.com/fr/download/index.html?cp=up61frnv
Site de téléchargement de Netscape Communicator 6.2 en français intégrant Netscape Composer; il est compatible Windows XP mais un peu lent sous Windows 98
http://www.aidenet.com/frftp.htm/frftp01.htm
Site de téléchargement du logiciel de transfert FTP gratuit FR FTP
|
Depuis 21 ans, Atout Micro est un magazine destiné aux utilisateurs d'ordinateurs
francophones à la maison, à l'école ou au bureau. |
Copyright © 1996-2008 - PICSHA - Éditeur du magazine Atout Micro
Retour à la page principale du site Web d'Atout Micro