FREELANG Magazine - Créer un site internet : ce qu'il faut savoir pour commencer

 Retour au sommaire du magazine

Dossier réalisé par Beaumont pour le CCCL de Vientiane
Publié en décembre 2001 - mise à jour : août 2004
© Beaumont 2001-2004


CRÉER UN SITE INTERNET :
CE QU'IL FAUT SAVOIR POUR COMMENCER

1. Le principe de base : le HTML
2. Les différentes manières de produire du HTML
3. L'organisation d'un site : l'arborescence
4. Le traitement des images
5. L'hébergement du site
6. Les erreurs à ne pas commettre
7. Augmenter la visibilité de votre site
8. Adresses utiles
9. Vos réactions


 

Contrairement aux autres média, Internet est un terrain d'expression que chacun peut utiliser. Un simple particulier peut ainsi, au même titre qu'une entreprise ou une administration, disposer de son propre site Internet. Comme toujours, vous lirez partout qu'il n'y a rien de plus simple à faire, et que créer un site est à la portée de tous. Comme toujours, je vous dirais qu'en informatique rien n'est simple, et que créer un site demande des connaissances et des compétences, que nous allons passer en revue.

 
1. Le principe de base : le HTML

Comment fonctionne un site Internet ? Le principe est assez simple. Il s'agit de texte, au sein duquel figurent des balises de formattage. Par exemple, lorsqu'un mot est écrit en gras, on trouve avant ce mot une balise indiquant un début de gras : <b>, et à la fin du mot une balise indiquant une fin de gras : </b>. L'ensemble de ces balises constitue un langage informatique appelé HTML (hypertext markup language).

Code HTML :Résultat :
<b>important</b>important
<i>important</i>important
<b><i>important</b></i>important

Le rôle du navigateur (Internet Explorer, par exemple), est d'interpréter le code html contenu dans une page et d'afficher la mise en forme correspondant aux indications données par les balises.

Pour créer un lien vers un site, on utilise une balise spéciale :
Code HTML : <a href="http://www.yahoo.fr">cliquez ici</a>

Une image est reférencée par son adresse relative au sein de l'arborescence :
Exemple : <img src="images/logo1.gif">

On peut également insérer une image et la rendre "cliquable" :
Exemple : <a href="http://www.societe.com"><img src="images/logo1.gif"></a>

Dans ce dernier exemple, on voit que la référence de l'image a été placée à l'intérieur des balises du lien, ce qui permet d'obtenir un logo sur lequel on peut cliquer, et qui enverra le visiteur sur le site indiqué.

La liste des balises n'est pas infinie, et il est tout à fait possible de connaître les balises HTML essentielles à la création d'un site.

Parenthèse technique : autres langages pouvant intervenir sur un site

Le HTML est trop limité pour répondre à tous les besoins. Il s'agit avant tout d'un langage concernant la mise en forme, mais pas d'un réel langage de programmation. D'autres langages informatiques peuvent être utilisés, au sein même d'une page HTML, comme par exemple le JavaScript, qui permet de définir des variables, de réagir à des commandes lancées par l'utilisateur ou encore de détecter automatiquement certains paramètres. Le web foisonne de scripts écrits par des programmeurs et mis à disposition des webmasters. Il suffit en général de faire un copier/coller des lignes de code et de les insérer (au bon endroit) dans sa page HTML.

Pour interroger une base de données en ligne, d'autres langages comme le PHP ou l'ASP s'avèrent nécessaires. Ils permettent d'afficher des pages web dynamiques, c'est-à-dire créées en fonction d'une recherche effectuée par l'utilisateur, pour lui seul et à un moment donné.

Bien d'autres langages sont utilisés sur Internet, citons encore Perl, un langage très puissant permettant de programmer des CGI (envoi d'un formulaire, création d'un livre d'or…). Comme pour le JavaScript, de nombreux CGI gratuits sont proposés "clé en main" aux webmasters, souvent en échange d'un affichage publicitaire.

Enfin, vous avez sans doute déjà croisé des animations réalisées en Flash. Le Flash a l'avantage de générer des animations très légères (et donc rapides à afficher) et très puissantes, en revanche il nécessite l'installation par l'utilisateur d'un "plug-in" spécial.
 

 
2. Les différentes manières de produire du HTML

Comme nous l'avons vu, le code HTML n'est pas compliqué en soi mais nécessite un apprentissage un peu rébarbatif. Heureusement, il existe des éditeurs, dont le rôle est de créer pour vous le code HTML correspondant à ce que vous indiquez. Microsoft FrontPage et DreamWeaver (de Macromedia) sont les deux éditeurs les plus connus.

Globalement, on peut distinguer trois manières de créer des pages HTML :

1. La méthode FrontPage : le WYSIWYG (what you see is what you get)
Avec FrontPage (idéal pour les débutants) ou DreamWeaver (plus performant mais plus difficile à prendre en main), vous voyez le résultat à l'écran à mesure que vous tapez et mettez en forme la page. L'éditeur se charge de créer le code HTML. Par exemple, pour mettre un mot en gras, il suffit de le sélectionner, de cliquer sur l'icône correspondante (exactement comme dans Word) et le mot apparaîtra en gras.

2. L'école WebExpert : du code mais en douceur
WebExpert fonctionne de la même manière, mais le résultat final n'apparaît pas à l'écran. WebExpert génère et affiche le code à mesure que vous tapez et mettez en forme le texte. Pour mettre un mot en gras, vous suivez la même procédure qu'avec FrontPage mais le mot n'apparaît pas en gras, il apparaît entouré des balises correspondantes : <b>comme ceci</b>. C'est donc un excellent moyen d'apprendre le code HTML.

3. Le codage direct
Cette méthode consiste à taper directement le code HTML, dans un simple éditeur de texte comme EditPad (similaire au Bloc-Notes de Windows, mais en plus élaboré). Contrairement à ce que l'on peut penser, cette solution n'est pas plus lente et peut même se révéler plus rapide, à condition de bien exploiter le copier/coller, le rechercher/remplacer et les raccourcis clavier. Autre avantage : les pages produites sont plus légères et s'affichent donc plus rapidement. Inconvénient : il faut une connaissance parfaite du code HTML.

Ces trois écoles ont donc chacune leurs avantages et leurs inconvénients. Le choix de l'une ou l'autre relève le plus souvent d'une habitude prise au départ, mais n'a rien à voir avec le niveau de compétence du webmaster. Un professionnel peut travailler avec DreamWeaver et un amateur directement en code, ou vice-versa. Précisons cependant qu'une connaissance de base du code HTML s'avère très vite nécessaire : il y a toujours un moment où il faut "mettre les mains dans le cambouis" !

 
3. L'organisation d'un site : l'arborescence

Pour créer un site, vous devez avoir une maîtrise parfaite de la gestion des fichiers. Créer un dossier, renommer un fichier, connaître les extensions, etc., tout cela ne doit pas vous poser problème. Il faut en effet savoir qu'un site s'organise selon une arborescence : les pages sont classées dans des répertoires thématiques, les images sont le plus souvent regroupées dans des sous-répertoires spécifiques, etc. Il ne s'agit pas d'une obligation absolue, mais d'un simple principe d'organisation, indispensable si le site est amené à se développer.

Cette arborescence se créé tout d'abord sur votre disque dur, et elle sera reproduite à l'identique lorsque vous ferez héberger votre site sur un serveur. La page d'accueil de votre site devra s'appeler "index.html", afin d'être automatiquement détectée.

 
4. Le traitement des images

Autre compétence à avoir ou à acquérir : le traitement des images. Les images d'un site doivent être les plus légères possibles, pour s'afficher rapidement, sans pour autant que leur qualité soit sacrifiée. Un logiciel comme Paint Shop Pro vous permettra, plus ou moins facilement, de modifier la taille d'une image, son format, etc. Les photos devront impérativement être au format "jpeg" (un format qui dispose d'un ratio compression/qualité), les dessins au format "gif".

Parenthèse technique : taille, poids et format des images

La taille d'une image se mesure en pixels (le pixel étant l'unité minimale d'affichage sur un écran, c'est-à-dire le plus petit carré indivisible). Selon la taille de l'écran, l'utilisateur peut choisir sa surface d'affichage (la résolution) : sur un écran 15 pouces, la résolution idéale est de 800 par 600 pixels. Sur un écran 17", la résolution idéale est de 1024x768.
Ces chiffres doivent vous guider pour évaluer la taille d'une image : vous saurez que si une image mesure 800x600 px, elle remplira tout l'écran sur un 15 pouces.
Attention, l'image telle qu'elle apparaît à l'écran n'est pas toujours à sa taille réelle : il arrive que les logiciels appliquent automatiquement un zoom arrière pour vous donner une vue d'ensemble si l'image est trop grande.

Le poids, lui, se mesure en kilo-octets (kilo-bytes en anglais). Une image de bonne qualité en 1024x768 pèse entre 100 et 200 kb, ce qui signifie que l'on peut en mettre une dizaine sur une disquette. Un CD-Rom (650 mb) peut contenir jusqu'à 10 000 photos.
Il est important d'avoir une idée du poids d'une image avant de l'envoyer par email, surtout si votre correspondant ou vous-même disposez d'une connexion lente. Bien entendu, plus l'image pèse lourd, plus il faudra du temps pour la transférer.

Enfin, il existe différents formats d'image. Le plus répandu est le "jpeg" (jpg), qui permet de régler le ratio qualité/compression. Pour les dessins, le format "gif" est recommandé. Le format gif permet également de créer des images ayant un fond transparent, ainsi que de petites animations. Les formats jpeg et gif sont les deux formats les plus courants sur le web.
 

 
5. L'hébergement du site

Une fois le site construit sur votre disque dur, il vous reste à le rendre accessible sur Internet. Pour cela, vous devez faire appel à un hébergeur, comme Multimania ou Free, qui hébergeront gratuitement votre site (souvent en échange d'un affichage publicitaire). L'hébergeur vous fournit également une adresse, du type "www.hebergeur.com/votrenom". Si vous souhaitez disposer d'une adresse propre (votrenom.com), il vous faudra acheter un nom de domaine.

Pour transférer des fichiers sur votre site, la solution la plus classique est d'utiliser un logiciel de FTP (le FTP étant un protocole de transfert). Muni de votre nom et de votre mot de passe, vous vous connectez chez votre hébergeur (généralement ftp.hebergeur.com), et le contenu de votre site apparaît sur une moitié de l'écran. Sur l'autre moitié se trouve votre site en local (sur votre disque dur), et vous pouvez donc facilement passer un fichier de votre PC au serveur.
L'installation d'un logiciel FTP n'étant pas forcément facile, les hébergeurs proposent également une mise à jour via leur site Web (pratique, facile, mais beaucoup plus lent).

 
6. Les erreurs à ne pas commettre

Les débutants commettent souvent les mêmes erreurs, en voici quelques-unes :

- Un site trop lourd qui regorge d'effets. Appliquer des effets spéciaux à profusion est toujours tentant, mais n'oubliez pas que les effets les plus appréciés sont les effets discrets et utilisés à bon escient. Abuser des effets alourdit le site et augmente son temps de chargement.

- Un site creux, n'apportant aucune information utile. Créer un site pour créer un site, c'est bien, mais avoir un vrai sujet, c'est bien mieux. Au lieu de mettre la photo de votre chien sur Internet (très sympathique, mais intérêt limité), réfléchissez à un sujet utile : un site pour un ami qui en aurait réellement besoin, pour une association, etc. Regardez ce qui existe déjà et essayez de faire quelque chose de nouveau ou de complémentaire. N'hésitez pas non plus à contacter d'autres webmasters pour leur proposer votre aide, beaucoup fourmillent de projets mais n'ont pas toujours le temps nécessaire pour les mener à bien.

- Un site se contentant de renvoyer vers d'autres sites. Il est facile de créer un site essentiellement composé de liens vers des sites que l'on affectionne, mais à moins de se spécialiser dans un domaine précis, de faire des recherches poussées et de maintenir régulièrement les liens à jour, ce genre de site n'offre qu'un intérêt très limité.

- De nombreuses pages mais "en construction". Voici un site très alléchant, malheureusement les rubriques ne sont pas encore ouvertes et on tombe trop souvent sur un message indiquant "en construction". Le visiteur est déçu, et ne revient pas. Si la plupart des pages sont en construction, ne les faites pas apparaître. Si vous indiquez qu'une page est en construction, indiquez la date du message et la date prévue pour l'ouverture de cette page.

- Un site non testé. Votre site tourne parfaitement chez vous, mais l'avez-vous testé ailleurs ? Le résultat peut être très différent sur un PC ou sur un Mac, avec Internet Explorer ou avec Netscape, sur un petit ou un grand écran, etc. Vous devez absolument tester votre site avec plusieurs configurations, pour vous assurer que l'affichage et le temps de téléchargement sont corrects.

 
7. Augmenter la visibilité de votre site

Votre site est intéressant et bien conçu, il vous a demandé de nombreuses heures de travail, et la plus belle récompense serait maintenant qu'il reçoive de nombreux visiteurs. Voici donc quelques conseils pour améliorer la visibilité de votre site et établir un contact avec vos visiteurs.

1. Le référencement : mots-clés. Les internautes ont recours à des moteurs de recherche pour trouver l'information dont ils ont besoin. Il faut connaître le fonctionnement des principaux moteurs, et en premier lieu Google, qui référence automatiquement les pages en fonction de mots-clés.
Sachez qu'une page HTML comprend une zone cachée (les méta tags) dans laquelle vous pouvez entrer des mots-clés à destination des moteurs de recherche. Google utilise aussi le titre de votre page et les premières lignes de texte.
Testez régulièrement vos mots-clés et essayez de voir ce que les sites qui vous précèdent ont de plus.

2. Le référencement : popularité. Les mots-clés ne suffisent pas, pour grimper dans le classement et apparaître parmi les premiers résultats, votre site doit être populaire, c'est-à-dire que d'autres sites doivent avoir des liens vers vous. Pour atteindre cet objectif, soignez la qualité de votre site, multipliez les contacts avec d'autres webmasters (pour des échanges de liens), analysez vos statistiques, faites la promotion de votre site au maximum (y compris en dehors du web), et, surtout, faites preuve de patience.

3. Le référencement : stabilité. Pour que le référencement soit efficace, votre site doit être stable. Si vous changez fréquemment d'adresse et si vous passez votre temps à déplacer ou à renommer des pages, les moteurs de recherche auront du mal à suivre, et vos visiteurs se heurteront à des messages d'erreur. Solution : investissez dans un nom de domaine, adoptez une structure stable et mettez en place des redirections en cas de modification de cette structure.

4. L'interactivité. Vos visiteurs doivent pouvoir vous contacter facilement. Indiquer votre adresse email ne suffit pas, un formulaire à remplir est une solution bien plus confortable (y compris pour vous, cela vous évitera d'être spammé). Lorsque vous recevez un message de l'un de vos visiteurs, prenez le temps d'y répondre.

5. Un site vivant. Votre site sera d'autant plus apprécié qu'il est vivant et régulièrement actualisé. Il n'y a rien de plus désagréable que d'arriver sur un site sans aucune date et qui donne l'impression d'être à l'abandon depuis des mois.

6. Un espace d'expression. Pour développer l'aspect interactif de votre site, vous pouvez y ajouter un livre d'or ou même un forum (à la condition toutefois d'être sûr qu'il sera animé). Ce type d'outils est proposé gratuitement par tous les hébergeurs et s'installe facilement.

7. Une liste de diffusion. Enfin, pour garder le contact avec vos visiteurs, vous pouvez leur proposer de s'abonner à une liste de diffusion pour être tenu au courant des modifications apportées au site ou leur transmettre certaines informations. Soyez très prudent car cet outil peut se retourner contre vous si vous harcelez les gens chaque semaine en leur envoyant un message inutile. Et surtout, n'abonnez jamais quelqu'un à votre liste sans son accord explicite.

 
8. Adresses utiles

Editeurs :

  • www.adobe.com/products/dreamweaver : le site officiel du logiciel DreamWeaver.
  • software.visicommedia.com/fr/products/webexpert : le site de l'éditeur WebExpert.
  • www.jgsoft.com : EditPad, un éditeur de texte beaucoup plus performant que le NotePad de Windows.

    Sachez également que le web fourmille de sites donnant des conseils et fournissant des infos aux webmasters, apprentis ou confirmés. N'oubliez pas non plus le menu "Aide" de votre éditeur. Enfin, si vous tombez en admiration devant un effet particulier sur un site, le menu "Affichage, Source" de votre navigateur pourra parfois vous révéler le code html à l'origine de ce que vous voyez !

     
    9. Vos réactions

    Nous espérons que ce petit dossier vous aura été utile. Vous pouvez nous faire part de vos remarques ou de vos questions en utilisant notre formulaire de contact (merci d'indiquer une adresse email valide si vous souhaitez une réponse !).


    Article complet, j'ai pu y trouver toutes les reponses a toutes mes questions!! bravo pour cet article :-)
    Asian


    J'ai trouvé cet article formidable, il résume très bien les questions que je me posais pour la création d'un site.
    Daniel


    Bonjour,
    Rarement vu un article d'une si grande clarte et intelligence. Le principal y est, les details precis et ennuyeux sont evites. Bref tres bonne copie.
    Juste une parenthese... le format Gif, qui est maintenant sous licence, donc plus gratuit, a tendance a etre de - en - utilise. Le format PNG le remplace tres doucement mais surement. Voila, c'est tout.
    Le site Freelang est d'une rare intelligence, pas uniquement dans sa conception mais dans son contenu. Cet article le prouve. Content d'avoir un peu participe a l'expansion et la reussite de Freelang.
    Philippe DIDIER, FcomFRENCH (Chiangmai, Thailande)


    Vous m'avez vraiment éclairé pour les principes de base lors de la création d'un site Web. Merci beaucoup et comme le disent certains, vos articles sont clairs et très bien formulés. Merci.
    Nico (Vendée)


    Créer un site n'est pas difficile. Mais pour qu'il soit agréable, fluide ou même simplement regardable il en faut bien plus. Ces conseils sont les bienvenus parce qu'ils sont réalistes et adaptés à ce qu'un débutant peu rencontrer.


    Il est plus de 2 heures du matin et j'ai enfin trouvé un site d'aide clair, concis, précis : le vôtre.
    Christophe (Nantes, Bretagne)


     

  •