Réalisation de pages web

Je ne propose ici que des liens vers des sites utiles et quelques outils pour la réalisation de pages web.

Le respect des standards:

Les navigateurs internet interprêtent le code HTML,... qui doit correspond à des normes de façon à obtenir un résultat à peu près uniforme quel que soit le navigateur utilisé.

Le site du consortium W3C définissant ces normes: http://www.w3.org (en anglais)

Respecter les normes est le rôle (pas toujours respecté) des éditeurs de navigateurs et de logiciels de conception de pages web, mais aussi de ceux qui réalisent des pages.
Pour prendre de bonnes habitudes, respecter des usages sera plus simple à la lecture des pages de l'excellent http://www.openweb.eu.org (à voir absolument) (en français).

A découvrir également pour corriger/indenter votre code: Tidy disponible sur http://tidy.sourceforge.net

Apprendre le HTML:

J'ai pour ma part appris le HTML sur le site http://www.ccim.be/ccim328/ de Luc Van Lancker.
Je ne cite donc que celui là (il propose également des cours DHTML, CSS, XHTML, JavaScript,...).

Il existe énormément d'autres sites.
Une recherche via Google vous permettra de faire votre choix.

Par ailleurs, quand vous savez que telle ou telle balise existe mais que vous ne vous en rappelez pas la syntaxe, c'est le plus souvent en effectuant une recherche via google avec quelque critères bien choisis que vous trouverez votre bonheur le plus rapidement (mais rien ne vous interdit de faire durer;o).

Apprendre les CSS:

Le site déjà cité: http://www.openweb.eu.org (à voir absolument)

Une bonne intro en une page: http://www.webdeveloppeur.com/Tutoriels/CSS/princFeuillesStyle.html
Bien découpé (mais à l'esthétique discutable;o): http://www.ifrance.com/maxpgratuit/web/css/
Un site très bien, mais un peu plus dense: http://www.ccim.be/ccim328/Htmlplus/cssconcp.htm

Un magazine papier CompétenceMicro: Numéro 25: "CSS, le Web avec du style"

Des logiciels de conception de pages web:

En mode WYSIWYG:

Le Composeur de Mozilla:

Simple, pratique, libre et gratuit, il a beaucoup de qualités.
Il permet de travailler en mode WYSIWYG et d'éditer le code HTML également.
Je ne regrette que quelques bricoles:
- le code HTML sans coloration syntaxique (cela ne facilite pas la lecture),
- le fait qu'en passant du mode WYSIWYG à l'édition du code, le curseur ne reste pas au niveau de la page ou on en est (pénible dans les longues pages),
- et enfin, l'impossibilité d'appliquer des styles CSS autrement que par édition du code HTML à la main (il existe par contre un plugin Cascades sur http://cascades.mozdev.org/ pour créer les feuilles de style).

Voir http://www.mozilla.org pour des informations et le téléchargement des dernières versions pour Linux, Mac, Window$,...

Dreamweaver2 via Wine:

"Gratuit" dans cette version (le caractère gratuit est très controversé: il ne le serait pas, mais dans la pratique...), je l'ai acquis avec le magazine PCExpert de ...<<RETROUVER>>, mais il a aussi fait partie d'un pack Wanadoo.
Il propose un code HTML assez propre, les deux modes d'édition WYSIWYG et HTML, la possibilité d'appliquer les styles CSS,... énormément d'autres choses encore.
Inconvénient quand on édite ses pages web depuis Linux (outre quelques bogues via wines), les retours à la ligne dans le code posent des problèmes de présentation lorsque l'on passe de logiciels ne gérant pas de la même façon les fins de lignes Unix/Window$.
Le code produit ne comporte pas de retours à la ligne.
Il est toutefois possible de le corriger à l'aide de Tidy:

[steph@DeepGlue dreamweaver2_et_tidy]$ ./tidy -i -m ma_page_de_test_produite_avec_dreamweaver2_via_wine.htm
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
Info: Document content looks like HTML 3.2
1 warning, 0 errors were found!


To learn more about HTML Tidy see http://tidy.sourceforge.net
Please send bug reports to html-tidy@w3.org
HTML and CSS specifications are available from http://www.w3.org/
Lobby your company to join W3C, see http://www.w3.org/Consortium
[steph@DeepGlue dreamweaver2_et_tidy]$

La page traitée voit son indentation ainsi corrigée.

Je n'utilise plus Dreamweaver2 que pour les pages nécessitant un positionnement précis de cadres DIV les uns par rapport aux autres (c'est en effet possible graphiquement).

Edition du code HTML uniquement:

Quanta+:

Quanta+ est un éditeur de code HTML sous Linux, qui offre la coloration syntaxique, la complétion du code, une prévisualisation à la façon de WebExpert,...
Il propose également la complétion sur les noms de variables dans le code PHP (pratique car ce code est sensible à la casse) et le développement/réduction des boucles en programmation.

Voir http://quanta.sourceforge.net

Kwrite:

Enfin, lorsque je souhaite modifier du code avec juste l'apport de la coloration syntaxique, c'est kwrite sous Linux que j'utilise.

Présent dans toutes les distributions Linux proposant l'interface KDE.