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.
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.
.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 dewhat 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
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
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 :- Notepad2 et Notepad++ sous Windows
- TextWrangler sous Mac
Sous Linux, j'ai utilisé Kate et SciTE.
Quelque soit le système d'exploitation utilisé, lesgeekutiliseront 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
- le hors-série de juin 2005 de Linux Pratique consacré au développement web
- compétence Micro créez votre site web numéro 49
- css2 Pratique du design web de Raphaël Goetter chez Eyrolles
- css la référence d'Éric Meyer chez O'Reilly
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 :
- utiliser l'extension HTML Validator basée sur Tidy.
Il affiche automatiquement dans la barre d'état le nombre de fautes et d'avertissements pour la page.
Un clic droit sur l'icône affiche le code source et surligne les erreurs.
Télécharger HTML Validator
- On peut, sur le site du w3c, faire valider sa feuille de style
ainsi que son code html
On se voit proposer une décoration :
