Introduction.
Qu´est-ce que le HTML ?
Concrètement ça donne quoi ?
Oui mais le HTML, c´est pas un peu fastidieux ?
Oui mais encore, le HTML n´est-il pas un peu fastidieux ?
Et les Editeurs web visuels, c´est pas plus simple ?
Mais alors, comment créer une page HTML ?
Existe-t-il des livres traitant du sujet ?
Quel hébergeur choisir ?
Comment référencer son site ?
Cette rubrique n´espère pas tous vous apprendre sur la création d´un site. D´une part parce que je ne suis pas un maître en la matière et d´autre part parce que la taille de ma rubrique dépasserait très largement celle du reste du site dont la vocation première est de parler des chinchillas.
Néanmoins je souhaite vous donner quelques pistes en vous expliquant le principe du HTML et en vous démontrant que cela reste accessible à n´importe qui. Vous aurez également quelques conseils pour héberger votre site et pour le référencer.
N´hésitez pas à me contacter pour avoir plus de précisions sur un problème que vous auriez rencontré (j´espère être en mesure de vous répondre) ou pour avoir quelques tuyaux.
Vous souhaitez créer une page personnelle et la diffuser sur Internet. Pour que les différents internautes puissent consulter cette page sur le Web, ils devront utiliser un navigateur web. Un navigateur web est un programme qui permet d´accéder à Internet et d´afficher les différentes pages présentes sur ce grand réseau. Les deux principaux navigateurs web sont Internet Explorer (qui a la primauté puisqu´il rallie 9 internautes sur 10) et Netscape Navigator.
Pour "dire" au navigateur web comment les pages doivent s´afficher, c´est à dire que tel titre doit être en gras par exemple ou telle image centrée, on utilisera le langage HTML.
Le langage HTML est un langage qui, donc, décrit chaque texte (paragraphes, titres...), image, son ou vidéo que vous souhaitez intégrer dans votre page internet. Puisqu´il reste uniquement descriptif le langage HTML n´est pas une programmation à proprement parler.
Pour décrire la taille des caractères d´un texte donné, ou encore sa couleur ou la police utilisée, vous allez utiliser des balises. Une balise encadre l´objet (texte, image...) dont vous voulez établir les caractéristiques c´est à dire qu´elle précise le début et la fin de l´objet auquel vous souhaitez attribuer le caractère en question (en gras, centré...).
Prenons un exemple :
Vous souhaitez mettre en gras le titre suivant : "Ma page personnelle.", vous écrirez :
<B>Ma page personnelle.</B>
Et cela donnera :
Ma page personnelle.
Sans pour autant vous arrêter au nom de la balise (<B>) que vous ne connaissez peut être pas, vous remarquerez qu´elle encadre bien le titre en question, puisqu´elle est placée en début et en fin de ce titre (pour marquer la fin de la balise on utilise un " / ").
Si de plus, vous souhaitez le centrer, vous écrirez :
<CENTER><B>Ma page personnelle.</B></CENTER>
Et cela donnera :
Ma page personnelle.
Ainsi on peut attribuer plusieurs caractères au titre en question, on l´encadrera d´autant de balises correspondantes.
Il est à noter que j´ai écrit les balises en majuscule, ce qui améliore leur lisibilité car ainsi elles se distinguent du texte, mais elles peuvent très bien être inscrites en minuscule.
Ainsi, en théorie, à chaque titre, à chaque paragraphe..., on doit associer une multitude de balises pour en définir la taille des caractères, la couleur, s´il est en gras ou non, centré ou non... Il est vrai alors que cela peut paraître long et fastidieux. Mais heureusement les feuilles de style viennent nous simplifier la tàche. Une feuille de style permet de définir plusieurs catégories de textes et d´en spécifier une fois pour toute les caractères. On peut par exemple définir une catégorie "Paragraphe" que l´on nommera "<P>", ou "Titre 1" (ça ne vous rappelle pas un peu Word ?) que l´on nommera "<H1>", "Titre 2" appelé "<H2>"... Pour chacune de ces catégories ainsi créée on définira les caractères que l´on souhaite leur attribuer et il ne sera plus la peine de les réécrire par la suite puisqu´il suffira de faire mention du nom de la catégorie précédemment créée.
Vous pouvez créer des feuilles de style au sein d´une page HTML (en la plaçant en début de page) ou au sein du site tout entier (en la plaçant dans un fichier externe).
Reprenons l´exemple précédent :
<CENTER><B>Ma page personnelle.</B></CENTER>
deviendra :
<H1>Ma page personnelle.</H1> à condition que vous ayez créé une telle balise et attribué les caractères précédents à cette balise.
Tous les autres titres dont vous souhaitez attribuer les mêmes caractères seront encadrés de la balise "<H1>".
Ce qu´il y a aussi d´intéressant c´est que s´il vous prend de modifier par exemple la couleur de tous les "Titres 1" de votre site, vous n´aurez qu´à modifier la feuille de style et tous les textes encadrés par la balise "<H1>" seront automatiquement changés.
Non, car lorsque vous aurez créé votre première page HTML et aurez sué pour la faire, pour la deuxième, vous souhaiterez sans doute simplement modifier le texte ou remplacer une image par une autre sans pour autant modifier la trame générale. Il suffit de reprendre la première page, d´y apporter les modifications nécessaires tout en gardant la plupart des balises et de l´enregistrer sous un autre nom. Ca paraît logique non ? Mais c´est surtout pour dire que c´est la création de la première page qui vous prendra du temps (il vous faudra aussi vous familiariser avec les balises et leur utilisation) mais les suivantes verront le jour bien plus rapidement. N´hésitez pas non plus à utiliser la fonction "Copier / Coller" !
Enfin bref, tout ça pour dire que le HTML n´est pas fastidieux !!!
Un éditeur web visuel permet de créer une page internet de façon visuelle et intuitive. Il fonctionne un peu comme un éditeur de texte (Word par exemple) puisqu´il suffit de taper son texte et de choisir dans les différents menus (ou en cliquant sur certains boutons) les fonctions appropriées pour changer la taille du texte, sa police, sa couleur, insérer une image ou un lien..., le programme créera automatiquement les balises correspondantes et les insérera dans votre page.
Front Page Express est l´un de ces programmes, il est livré gratuitement sur la plupart des ordinateurs avec Internet Explorer ; Netscape a aussi le sien.
Un tel programme peut s´avérer utile si vous rechignez vraiment à apprendre le langage HTML (ce n´est plus la peine de lire cette rubrique alors !) ou encore si vous souhaitez vous limiter à la création d´une simple page personnelle et ne souhaitez pas créer un site entier.
Pour ma part j´ai d´abord commencé avec Front Page Express. Très vite, au fur et à mesure que j´avançais dans la création de la première page HTML, je me suis aperçu que cela était peut être proche de ce que je voulais mais que cela restait tout de même approximatif voire même brouillon. En fait, c´est moi qui devais m´adapter au programme en question en fonction de ses limites alors que logiquement cela aurait dû être l´inverse ! Ce qui m´a arrêté, c´est que le programme insérait automatiquement des sauts de lignes alors que je voulais simplement aller à la ligne (il changeait en fait de paragraphe, je l´ai compris par la suite) ou des puces à chaque retraits. La présentation de ma barre de liens ne me satisfaisait pas non plus (avec Front page Express la seule possibilité pour un néophyte est de diviser la page en deux colonnes (en créant un tableau donc) et de mettre les liens à gauche et le texte à droite alors que l´utilisation de cadres est bien plus esthétique et pratique.
Le pire, c´est qu´on m´avait offert un très chouette bouquin sur le HTML mais je me bornais à utiliser un tel programme !
Ce qui est également très embêtant c´est qu´avec ce programme vous ne pouvez pas utiliser les nouvelles balises qui voient régulièrement le jour alors qu´il est très facile de les intégrer au code HTML si vous en connaissez les bases. De plus, un tel programme génère automatiquement des balises que vous ne souhaitiez pas forcément (il se fait sa propre pub entre autre).
Très vite vous vous apercevrez que le temps que vous avez pris à prendre en main et maîtriser un tel programme, qui s´avérera de toute façon vite très approximatif, vous auriez pu le consacrer à apprendre le HTML !
Une page HTML se construit à l´aide d´un simple éditeur de texte puisqu´il suffit de taper le texte que vous souhaitez diffuser, le nom et le chemin (au sein du disque dur) des images, sons... et de les encadrer des différentes balises pour en définir les caractéristiques.
Ainsi, vous pouvez utiliser votre éditeur de texte habituel (Word, WorPad, voire même le Bloc Notes). Lorsque le texte est plutôt long, je vous conseille de le taper brut (je veux dire sans y mettre les balises) sur Word ; vous pourrez alors utiliser le correcteur d´orthographe. Ne le mettez pas en gras, ne changez pas la police ni la taille des caractères, ce serait totalement inutile puisque les balises se chargeront de définir tout cela. Ensuite insérez y les balises. Enfin lorsque votre page est terminée, vous devez l´enregistrer au format *.html ou *.htm (et non pas *.doc comme sur Word et pas non plus *.txt comme sur WordPad ou le Bloc Notes). Votre page web sera alors créée et pourra être lue par votre navigateur préféré.
Bien sûr une multitude ! Voici, par exemple ceux que j´ai moi-même utilisé.
Il est à noter que vous trouverez facilement sur Internet des sites traitant également du sujet mais je trouve le support papier plus intéressant car vous pourrez sans cesse vous y référer.
Editions First Interactive, 1999, Paris. Ecrit par RUTH MARAN.
Ce livre est tout simplement indispensable si vous débutez dans la programmation en HTML.
Il est très bien fait, tout ce qui est nécessaire à savoir y est noté et il est très simple à comprendre, l´apprentissage y est progressif.
Ensuite, lorsque vous aurez épuisé ses innombrables informations et que vous aurez envie de passer à la vitesse supérieure (Java Script…), il vous faudra choisir d´autres ouvrages.
Editions CampussPress, 2001, Paris. Ecrit par MICHEL MARTIN.
Il donne quelques notions sur tous les langages nécessaires à la conception d´un site web mais sans entrer trop dans les détails. Parfait pour une ouverture vers d´autres langages pour le web (XHTML, PHP, WML…) mais très vite limité.
Editions Micro Application, 2000, Paris. Ecrit par MATIN PEIN.
C´a y est, vous avez compris les notions du langage HTML et voulez passer à la vitesse supérieure en utilisant Java Script ; on peut maintenant parler de programmation, vous êtes un pro ! Ce livre est fait pour vous. Il est même indispensable.
Un peu compliqué pour des non avertis (familiarisez-vous d´abord parfaitement avec le HTML et ne brûlez pas les étapes), il est tout de même très bien fait et saura vous guider progressivement vers la conception de votre premier Java Script.
Editions CampussPress, 2001, Paris. Ecrit par JEAN-MARC HERELLIER et CLAUDIA WOLOSIN.
On ne le croira pas mais le référencement n´est pas une étape anodine. Ce livre donne tous les pièges à éviter et par contre toutes les astuces qu´il est indispensable de connaître pour voir son site référencé dans les meilleurs moteurs de recherche.
Bref, indispensable si vous voulez sortir de l´anonymat.
Il y a une multitude d´hébergeur existant sur Internet mais tous n´offrent pas les mêmes services et une même qualité.
Je ne saurais vous en conseiller un en particulier car je ne les connais pas tous.
D´une façon générale il faut proscrire tous les hébergeurs payants (ceux qui offrent uniquement ce service).
Si vous optez pour un hébergeur gratuit il faudra que vous sachiez que vous aurez forcément à supporter de la publicité sur votre site. Cette publicité sera plus ou moins contraignante et inesthétique selon l´hébergeur en question.
Cette solution est tout de même la seule à envisager si vous changez régulièrement de fournisseur d´accès en fonction de leurs tarifs et de l´évolution de leurs performances ; c´était mon cas au début.
Personnellement je déconseille Ifrance car la présence d´une barre de publicité réduit fortement la surface d´affichage de votre site.
J´ai commencé avec Chez.com qui au début n´affichait de temps en temps que quelques pop up (fenêtres qui s´ouvrent automatiquement lorsque vous allez sur une nouvelle page du site). Depuis cela a un peu changé : d´une pop up de temps en temps, on est passé à 5 ou 6 sur la page d´accueil et au moins une chaque fois qu´on accède à une nouvelle page. Je pense quand même que les pop up sont moins contraignantes qu´une barre de publicité que vous ne pourrez jamais fermer. Enfin, leur système de transfert des fichiers depuis votre disque dur vers leur espace alloué (par formulaire) peut paraître intéressants si vous n´avez pas de logiciel ftp (c´est une mauvaise excuse car vous en trouverez facilement un gratuit sur Internet) ou si vous avez du mal à l´utiliser (encore une mauvaise excuse car certains sont vraiment très simple à utiliser et en français). Par contre dès que votre site dépasse la dizaine de page, il faudra utiliser la voie classique qui est également possible (contrairement à ce que je pensais et disais il y a peu).
Si vous avez un fournisseur d´accès dont vous êtes satisfaits, ou si comme moi vous avez l´ADSL (ou bien le câble), ce fournisseur d´accès proposera dans presque tous les cas l´hébergement de votre site et cela gratuitement. La plupart n´imposent aucune publicité puisque vous payez déjà un abonnement pour accéder à Internet.
Une petite astuce : Vous pouvez très bien vous inscrire auprès d´un fournisseur d´accès gratuit (l´accès est gratuit et vous payez les communications au tarif local) comme Free par exemple. Même si vous avez un abonnement auprès d´un autre fournisseur d´accès, vous n´êtes pas obligé de vous connecter avec ce fournisseur d´accès gratuit mais pourrez profiter de l´hébergement de votre site, ceci gratuitement et sans publicité. (Je n´ai jamais utilisé free mais il me semble très bien au vu des différents sites portant ce nom de domaine).
Enfin, voici, pour y voir plus clair, un tableau récapitulatif des principaux hébergeurs. Ce tableau est tiré de Micro Hebdo numéro 201 paru le jeudi 21 février 2002 (page 42). Je n´ai cependant pas répertorié les offres de CiteGlobe, NexenServices et Sivit qui sont des formules payantes et qui n´ont cependant pas plus de services proposés.
Merci à Micro Hebdo !
Pour référencer son site il suffit d´aller sur les moteurs de recherche et annuaires et de cliquer sur le lien "Ajouter votre site" très souvent situé au bas de la page d´accueil. Après quelques formalités votre site sera pris en compte par le moteur de recherche (ou annuaire) qui décidera si oui ou non il méritera d´être indexé ou non dans sa base de donnée et à quelle position.
Evitez les sites qui vous proposent de faire automatiquement cela auprès de plusieurs moteurs de recherche (ou annuaires) car le référencement est souvent incomplet. Il vaut mieux tabler votre référencement sur les moteurs de recherche et annuaires les plus connus mais en le faisant vous-même.
Mais avant de faire cela, il y aura certaines choses à vérifier et à préparer :
Préparez un court descriptif de votre site ainsi qu´une liste de mots-clefs. Vous les avez déjà normalement intégrés dans vos pages HTML (dans la partie HEAD) mais les moteurs de recherche vous les redemanderont.
Si vous avez utilisé des cadres (ou frames) pour la conception de votre site, vous risquez d´avoir des problèmes de référencement. En effet, à part Lycos, les moteurs de recherche ne gèrent pas les cadres et n´iront donc pas visiter les pages situées au-delà (donc très souvent toutes les pages situées après votre page d´accueil).
De plus, certaines personnes qui utiliseront des navigateurs anciens seront bloquées elles aussi (cela est plus rare tout de même).
Vous devrez donc insérer la balise suivante dans la page ou apparaît la division en cadres :
<NOFRAMES>
Si votre navigateur ne gère pas les cadres (ou frames), cliquez <A HREF="*">ici</A>.
</NOFRAMES>
Cela permettra au moteur de recherche de ne pas rester bloqué.
* = ICI METTEZ LE NOM D´UNE PAGE CONTENANT OBLIGATOIREMENT TOUS LES LIENS VERS TOUTES LES PAGES DE VOTRE SITE (OU ENCORE VERS DES PAGES QUI CONTIENDRONT ELLES MEMES LES LIENS VERS CERTAINES PAGES CACHEES).
Si vous avez utilisé des images map (images où se situent plusieurs zones cliquables) vous devez également créer des liens correspondants pour anouveau éviter au moteur de recherche de rester bloqué (ainsi que pour les internautes ayant désactivé les images pour voir les pages s´afficher plus rapidement).
Si, pour créer un lien, vous avez utilisé JavaScript ou encore un bouton de formulaire, vous devez créer un autre lien avec des balises HTML simples (un lien sur un texte ou une image simple).
Pour un programme JavaScript, il doit toujours être entouré des balises suivantes (en rouge) pour ne pas bloquer un visiteur (ou un moteur de recherche surtout) qui aurait un navigateur incapable de lire les scripts :
<SCRIPT LANGUAGE="JavaScript">
<!-- Fonction masquée par les anciens navigateurs.
ICI LE SCRIPT.
// Fin de la fonction masquée par les anciens navigateurs -->
</SCRIPT>
Enfin voici ici un site très intéressant qui vous permettra de naviguer à travers votre site comme si vous étiez un robot utilisé pour le référencement des pages perso par les moteurs de recherche. Pour cela cliquez sur le lien "SiteViewer".
Ainsi, si au cours de la navigation vous restez bloqué sur une page de votre site et que vous ne pouvez plus visiter les suivantes, c´est que ces dernières ne seront jamais indexées par le moteur de recherche en question. Cela veut dire alors que vous avez fait une erreur ou négligé un point cité plus haut.
Merci à @machin qui ma donné ce tuyau sur le Chat de Wanadoo !
Voilà, ce sont les principales erreurs à éviter, pour plus de détail, n´hésitez pas à consulter le livre cité plus haut qui est vraiment très bien fait.
Enfin voici quelques sites qui proposent des référencements gratuits :
