Création du site

Les choix

le xhtml

HTML est le langage habituel pour l'affichage des pages sur internet.
XML est un métalangage permettant la description de données sans s'occuper de la forme sous laquelle elle vont sortir : affichage écran, son, impression, graphique … et sur lequel se basent des langages comme SVG (dessin vectoriel) et MathML (description de formules mathématiques). Il semble promis à une importance croissante.

XHTML est du HTML basé sur XML.
Les différences entre les deux langages sont faibles : XHTML demande juste un peu plus de rigueur et quitte à choisir autant prendre le langage le plus pérenne.

Vous trouverez des explications très détaillées sur le site selfhtml.

code original ou produit à partir d'un autre langage

Il est tout à fait possible de produire du html à partir d'autres langages. Ainsi sous Open Office il est possible d'enregistrer son fichier en .html . Une autre possibilité est de transformer du code LaTeX en HTML à l'aide d'un executable comme TeX4ht.

les feuilles de style

XHTML est basé sur l'idée de séparer le fond et la forme. Le fond (contenu sémantique : tout ce qui concerne le sens) est traduit par la page .html et la forme ( l'habillage de la page) est donnée par une feuille de style dont l'extension est .css .

L'intérêt de cette méthode edt évident : pour mettre tous mes titres de second niveau en bleu, il me suffit de rajouter dans ma feuille de style h2{color:blue; } pour que toutes les pages liées à ma feuille de style affichent des titres de second niveau en bleu.

Pour donner envie d'utiliser les feuilles de style, il y a un site extraordinaire qui s'appelle cssgarden et qui est basé sur le principe suivant : il y a une page .html qui est inchangeable et on dispose de plusieurs centaines de feuilles de style proposeés par des concepteurs de site. On peut examiner les sources et apprendre beaucoup de choses.
Un livre fait par les concepteurs du site est sorti : il s'appelle le Zen des css

Visiter cssgarden

les images

On a le choix entre trois formats png, gif et jpeg. J'ai choisi png car c'est un format libre. Il faut dans tous les cas compresser les images pour que leur chargement soit assez rapide.

Les outils

wysiwyg ou wysiwym ?

wysiwyg est l'acronyme de   what you see is what you get  ( ce que vous voyez ( à l'écran ) est ce que vous otenez ); cela correspond aux logiciels qui produisent du code automatiquement à partir de choix faits à la souris sur une interface graphique.

La solution wysiwym  what you see is what you mean  ) consiste à produire le code soi-même avec un éditeur de texte approprié et de contrôler ce qu'on fait à l'aide de son navigateur. Un navigateur ne fonctionne pas que sur internet : vous pouvez très bien créer un fichier texte, lui donner une extension .html et l'ouvrir avec votre navigateur. Il faut donc choisir entre l'automatisé et le cousu main. Dans tous les cas cela demande un apprentissage.

J'ai choisi de taper moi-même mon code source car les cliquodromes me fatiguent vite.

L'éditeur de texte

L'éditeur de texte n'est pas un traitement de texte comme word ou OpenOffice. Il produit du texte brut. Il faut en trouver un qui affiche la coloration syntaxique du html et de css.


coloration syntaxique de css

coloration syntaxique de css


Les captures d'écran montrent la coloration syntaxique que propose SciTE pour le code html et css. La coloration syntaxique évite les erreurs : si par exemple j'oublie un point-virgule, cela va sauter aux yeux car la coloration sera perturbée. Il est important d'avoir une numérotation des lignes car les erreurs sont signalées à l'aide du numéro de ligne.


coloration syntaxique de html

coloration syntaxique de html


Il faut choisir un éditeur qui permet de configurer des raccourcis clavier et qui referme si possible automatiquement les balises. Vous apercevez des balises sur le code HTML : le titre de premier niveau : simuler le hasard est entouré de <h1>(balise ouvrante) et de </h1>(balise fermante).

Les logiciels

Les éditeurs de texte

Je cite sans les connaître :

Sous Linux, j'ai utilisé Kate et SciTE.

Quelque soit le système d'exploitation utilisé, les geek utiliseront Emacs ou vi. Vous trouverez de quoi choisir sur le site de Framasoft. Sur ce même site une autre page bien garnie.

Le client FTP

Pour transférer mes ficiers sur le serveur d'Orange, j'ai utilisé Kasablanca car il est très simple à configurer.

La fenêtre de gauche montre le contenu d'un répertoire de mon ordinateur et la fenêtre de droite montre le contenu d'un répertoire sur le serveur. Il suffit de sélectionner un fichier et d'utiliser l'icône pour le transférer.


la documentation

Les livres utilisés

Il y a aussi chez compétence Micro css un jeu d'enfant créez votre site web numéro 53

des sites pour vous guider

des modèles tout prêts

Des sites qui proposent, (entre autres) des modèles à télécharger : attention de bien lire les licenses et de les respecter : quand tout est partagé, pas la peine de se comporter comme un pillard.

la gamme de couleurs

Pour les couleurs, ces deux sites m'ont bien aidé : colorschemer et defencemechanism.

Il suffit de rentrer le code hexadécimal d'une couleur pour obtenir une gamme qu'on peut lui associer.

les navigateurs

Il est recommendé de travailler avec un navigateur qui respecte assez bien les recommandations du w3c comme Firefox et de tester son code assez rapidement avec Internet Explorer car le novice que je suis n'imaginait pas à quel point leur lecture du code est différente. J'ai testé aussi le site avec Opera et Konqueror.

les validateurs de code

Il y a plusieurs façons de corriger son code :