Intro • [Créer son site web] • HTMLJavaScriptPerl
 
 Créer son site web 

Cette rubrique s'adresse à ceux et celles qui après s'être usé les yeux sur les pages des autres, ont décidé à leur tour de sévir sur le web, et qui ne savent pas comment s'y prendre. Je compte réunir ici toutes les informations que j'aurais souhaité avoir eu le jour ou j'ai décidé de créer ma page personnelle. Le vocabulaire sera volontairement "ras des paquerettes" par égard aux débutants qui ont quelque chose à dire...
Crions-le bien fort : "il n'est pas nécessaire d'être une bête de l'informatique pour avoir sa page à soi !

Sommaire :

Comment ça marche, une page perso ? 

Vous vous êtes abonné chez un fournisseur d'accès à internet qui vous propose plusieurs services : Le courrier électronique (envoyer et recevoir des messages personnels), l'accès aux news (forums de discussion publics par thèmes), l'accès au web (la méga foire !). Ce fournisseur d'accès vous donne sans doute la possibilité d'avoir votre propre page d'accueil, si ce n'est pas le cas, arrêtez de lire cette page ou changez de fournisseur !

Le fournisseur d'accès dispose d'un gros ordinateur allumé en permanence et connecté à internet, c'est le "serveur". Sur un disque dur de ce serveur, votre fournisseur d'accès tient à votre disposition un répertoire dans lequel vous devrez copier votre page personnelle pour qu'elle soit accessible à tous. Supposons que votre fournisseur d'accès s'appelle tartempion.fr et que votre login soit toto, votre adresse E-mail est sans doute toto@tartempion.fr. Quand vous aurez installé votre page d'accueil dans le répertoire toto chez tartempion.fr, son adresse (URL) sera probablement : http://toto.tartempion.fr/.

Votre site comportera plusieurs pages, il sera possible d'y accéder sans passer par la page d'accueil, simplement en spécifiant le nom du fichier à la suite de l'URL, par exemple : http://toto.tartempion.fr/gnafron.html

En résumé, vous (et vous seul) avez accès en écriture à un répertoire du serveur. Si vous ne connaissez pas son nom, demandez à votre fournisseur. Vous y copierez les pages et les images de votre site. La page principale doit s'appeler index.html sauf mention contraire de la part de votre fournisseur d'hébergement. Si votre site atteint une taille importante, rien ne vous empêche de créer par la suite des sous-répertoires sur le serveur. C'est même conseillé si votre site contient plusieurs dizaines de pages.

Les premiers outils

Indispensable : l'utilitaire de création de pages

Vous savez peut-être que les pages web sont écrites dans un langage spécial : HTML. Ce sont de simples fichiers texte respectant une syntaxe particulière, propre à ce langage. Votre navigateur interprète ce langage automatiquement, c'est-à-dire qu'il affiche progressivement les pages pendant leur chargement. Pour réaliser vos pages, vous n'avez pas besoin de connaître HTML car de nombreux programmes existent pour vous aider à les créer. Ces logiciels ressemblent à des traitement de texte, ce qui facilite la mise en forme et l'intégration d'images.

Les éditeurs graphiques tels que Netscape Composer ou Microsoft FrontPage, s'ils sont relativement faciles d'accès, présentent certains inconvénients : Avec le temps, on s'aperçoit que le résultat est pas toujours parfait et que de nombreuses options permises par le langage HTML sont absente de l'éditeur, bref on devient perfectionniste. C'est le moment de changer d'outil, d'utiliser un VRAI éditeur HTML. Il en existe plusieurs excellents (HomeSite, DreamWeaver...).

Configurer HomeSite 1.2

Si vous êtes sous Windows, je vous conseille de démarrer avec HomeSite 1.2 car il est gratuit (freeware). Une fois ce fichier téléchargé, il ne vous reste plus qu'à configurer et utiliser HomeSite 1.2.

Indispensable : l'utilitaire de tranfert de fichiers

Vous allez créer et tester la première mouture de votre site sur votre ordinateur personnel. Quand vous aurez contrôlé que tout va bien (orthographe, images, liens...), il faudra copier les fichiers sur le serveur. Pour cela, il vous faut un programme spécial pour effectuer ce transfert vers le serveur. Ce programme se connectera au serveur ftp.tartempion.fr (le nom réel du serveur qui accueillera vos pages vous sera fourni par votre fournisseur d'accès), et vous permettra de copier vos fichiers dans le répertoire qui vous est réservé.

Personnellement, j'utilise FileZilla, il est simplement génial ! L'écran ressemble au gestionnaire de fichiers de Windows en mieux : à gauche votre disque local, à droite le serveur, et on fait glisser les fichiers de l'un vers l'autre avec la souris. En plus d'être intuitif, il est gratuit et facile à configurer, alors...

Pour télécharger FileZilla : http://sourceforge.net/project/showfiles.php?group_id=21558. On y trouve des versions pour plusieurs systèmes d'exploitation.

ATTENTION : Une fois copiés les fichiers vers le serveur, vous testerez le résultat en vous connectant à "http://www.tartempion.fr/~toto/" et tout se passera très bien (pourquoi pas ?). Ce n'est pas suffisant car si certains liens pointent vers des fichiers de votre disque dur, les autres internautes ne les verront pas sur leur navigateur ! Avant de tester vos pages sur le serveur, CHANGEZ LE NOM DU REPERTOIRE LOCAL qui contient les pages originales. Ainsi vos tests seront fiables. Une fois que tout est OK, vous pourrez restaurer son nom initial.

Un utilitaire pour vos images

Le dessin sur ordinateur est accessible à tous, en particulier grâce aux possibilités d'annuler une action malheureuse et de revenir à une version précédente d'un même dessin (pourvu qu'on l'ait sauvegardé !). De nombreux programmes de dessin et de retouche d'image sont disponibles.

Si vous voulez inclure dans vos pages des photos, vous devrez tout d'abord les "scanner". Cette opération qui génère un fichier à partir d'un document papier nécessite un matériel spécial : le scanner. On peut aussi obtenir un fichier image à partir d'une caméra vidéo ou d'un appareil photo numérique.

Dans tous les cas, vous aurez besoin de retoucher des images : changer de format, recadrer, éliminer des détails, incorporer du texte... La seule limite est votre imagination ! Là aussi, je vais faire de la pub pour mon utilitaire préféré : Paint Shop Pro (toujours sous Windows). Il permet de convertir, retoucher, dessiner... et comme les autres, il est simple d'emploi et puissant à la fois.

Pour télécharger PaintShop Pro : http://www.jasc.com/

Les formats d'images GIF et JPEG

Sur Internet, les photos et les dessins des pages web sont tous au format GIF (256 couleurs) ou JPEG (16 millions de couleurs) car ce sont des formats extrêmement compacts (les fichiers sont petits, donc relativement rapides à charger). Un dessin au format BMP ne peut pas être affiché tel quel dans une page web, il faut d'abord le convertir au format GIF ou au format JPEG. Chacun de ces formats a des caractéristiques bien précises, il faut les connaître pour pouvoir choisir entre l'un ou l'autre. Ce choix sera très important pour l'esthétique et le temps de chargement de vos pages.

Pour les photos, pas d'hésitation : le format JPEG (prononcer jipègue pour ne pas avoir l'air d'un blaireau) est parfait, compact, suffisament fidèle. Le format GIF, pas adapté aux photos, doit être impérativement utilisé pour toute image contenant des plages unies (dessin, graphique, logo). La variété des qualités respectives des formats et de leurs options est étonnante : exemples de formats d'images.

Se perfectionner en HTML 

Une multitude de sites existent sur le sujet. Pour les trouver, c'est simple, recherchez par exemple la chaîne de caractère "apprendre html" sur Google. Les guillemets permettent de rechercher la chaîne de caractère exacte et les minuscules vous autorisent une recherche indépendante des majuscules et des minuscules.

Un bon point de départ est d'observer le code HTML des pages qui vous plaisent. Pendant vos ballades sur le web, sauvegardez sur votre disque dur les pages qui vous font demander "mais comment font-ils ça ?". Ouvrez-les ensuite avec un éditeur de texte (style Bloc-notes). Pour ceux qui aiment les petites astuces, il y en a quelques-unes sur ma page expérimentale traitant de HTML et JavaScript.