Webdesign #4 : les hostilités commencent
Rappels
HTML = Hypertext Markup Language
Les liens se trouvent en fin de post.
Nous avons déjà évoqué quelques faits sur le HTML dans la partie 1. Il est maintenant l'heure d'ouvrir...
1) ...un logiciel : guerre ouverte des éditeurs sous le ciel azur
Vous pouvez coder au bloc note. Vous pouvez coder avec un éditeur WYSIWYG. Même les Linuxiens ont de quoi développer un site web.
On va d'abord trouver le logiciel qui vous convient le mieux.
Commençons par les éditeurs WYSIWYG. "C'est quoi ce nom barbare et imprononçable ?" me demanderez-vous. Facile : What You See Is What You Get, c'est-à-dire que vous pouvez créer votre page web avec un visuel permanent, vous ne voyez pas le code, qui se construit automatiquement pendant que vous soulignez tel élément, que vous cliquez sur "créer un tableau", etc. FrontPage, Dreamweaver sont des éditeurs WYSIWYG.
Bien sûr, vous avez tout de même accès au code mais c'est le visuel qui est le plus utilisé sur ces éditeurs.
Avantages
Très aimés des débutants, ces éditeurs permettent de créer son premier site web sans trop se compliquer la vie. Certains possèdent des bibliothèques de codes tout prêts et qui ne nécessitent qu'un clic et deux paramètres pour être appliqués (Dreamweaver fait les liens page par page ou un livre d'or tout seul, si on le lui demande par exemple). Ils permettent aussi de toucher au code si on veut. Certains modifient toutes les pages en rapport avec une modification (si vous renommez une page, tous les liens y pointant seront changés automatiquement).
Inconvénients
Ces logiciels, payants, pourrissent le code en rajoutant des tas de meta dans l'en-tête des pages et demandent certains paramétrages assez nébuleux si vous voulez améliorer ça. Ils sont comme un iceberg : vous ne voyez généralement que le très petit nombre de fonctions qui, certes, vous sont utiles mais ça vous empêche d'aller chercher plus loin. A trop voir, on a tendance à trop en faire. Et puis comme c'est très facile, vous vous imaginez que vous avez atteint un bon niveau alors qu'il n'en est rien et que vous pourriez vous améliorer.
Conclusion
Si vous voulez rester à un niveau médiocre ou ne pas vous casser le cul, c'est votre choix.
Oui, je ne suis pas objective du tout (vous m'aimez pour ça, je vous le rappelle).
Passons maintenant au bloc note. Enfin, pas tout à fait. On a le droit d'être masochiste et de choisir aussi de la Vaseline©. Il existe des éditeurs textes proches du bloc note, très légers, qui permettent aussi la gestion de projets et qui ont une coloration du code. Vous n'avez pas le visuel, certes, mais un bon codeur n'a pas besoin de visuel.
Avantages
Coloration du code, reconnaissance des balises par couple, modèles de documents, etc. Les trucs basiques mais qui servent. Logiciel léger, qui ne met pas trois plombes à s'ouvrir, qui ne plante pas non plus en route. Gratuits.
Inconvénients
Pas de visuel mais c'est pas grave, vous avez vos explorers de toute façon. Logiciels majoritairement en anglais, parfois sans traduction.
Conclusion
Si le code est pourri, ce sera votre faute et vous devrez vous corriger, donc progresser. C'est une méthode barbare mais bien meilleure pour ce qui est de l'apprentissage et qui oblige le cerveau à fonctionner puisqu'il est votre premier visuel.
Pour ma part, j'utilise PSPad. Je n'ai eu à m'en plaindre que lorsque j'ai essayé le CTRL+E. J'ai essayé NotePad++ mais ses encodages de page passaient pas sur Safari. Dans ma période pro-Mozilla-fuck-Microsoft, j'ai aussi essayé Nvu, rebaptisé KompoZer mais j'ai changé d'ordi et le logiciel ne fonctionnait plus avec mon nouvel OS. Dans mes souvenirs, KompoZer ne cassaient pas trois pattes à un canard. Dans une galaxie lointaine, j'ai aussi été une inconditionnelle de Dreamweaver mais il faut bien sortir des jupes de sa mère à un moment ou à un autre.
Je vous laisse choisir un éditeur parmi ceux disponibles en téléchargement (attention : certains sont des démonstrations donc sont limités ; préférez les logiciels libres). N'hésitez pas à en essayer plusieurs.
2) Petit topo avant l'assaut
On va faire un petit point sur les balises utilisées en HTML avant toute chose. Pourquoi ? Parce qu'il faut connaître son ennemi avant d'attaquer.
Nous avons vu quelques balises : html, head, body. On va les oublier pour le moment.
Il faut savoir qu'elles sont pré-formatés, c'est-à-dire qu'elles auront déjà un style à elles, sans utiliser de CSS ou quoi que ce soit d'autre. Avec ça, on peut classer les balises selon deux grands groupes : les balises inline et les block.
Les balises inline sont, comme leur nom l'indique, des balises qui restent "dans la ligne". Elles ne changent rien à l'agencement du texte si on les place dans un paragraphe, par exemple. Vous les connaissez forcément : b/strong, em/i, u, a, q, small, strike, pre, span, input, img, etc. Il en existe beaucoup et je vais pas vous en faire un inventaire complet.
Les balises block changent l'agencement du texte, forment des blocs, des lignes entières. Exemples : p, blockquote, center, ul/ol, li, h1, h2, h3, etc.
Beaucoup de ces balises sont donc formatées par avance. Faites vous une page avec quelques unes des block pour vous en rendre compte : il y a des tailles, des épaisseurs, des marges différentes.
J'avais aussi parlé de balises orphelines : input, img, br et d'autres. Toutes les balises en HTML s'ouvrent (< ... >) et se ferment (< / ... >). Pas les orphelines. Suivant les versions de HTML que vous utilisez, il faut les écrire comme ci (< ... >) ou comme ça (< ... />) mais, honnêtement, ça ne change rien à l'histoire.
Oui, il existe différentes versions du HTML. Actuellement, nous en sommes au HTML5 mais je viens de m'y mettre (c'est nouveau, ça vient de sortir) et je ne maîtrise pas encore suffisamment les nouvelles spécificités pour oser en parler clairement. Du coup, lorsque je parlerai HTML à l'avenir, il s'agira de la version HTML4.
3) On attaque par la tête !
On a déjà vu le squelette d'une page web, avec la tête et le corps. Et bien j'ai menti ! On ne commence pas par < html > ! On commence par déclarer le doctype. C'est le Document Type Declaration. En gros, on dit au navigateur quelle norme on va utiliser. Il va être plus ou moins complexe selon la version HTML que vous utilisez mais, bien souvent, tous les éditeurs créent le squelette d'une page avec une en-tête minimale automatiquement. Voici ce que j'obtiens sur PSPad quand je crée un nouveau document HTML :
Décortiquons tout ça.
#1 D'abord, le doctype, la déclaration qui dit "je suis une page web en HTML 4.01".
#2 Ouverture de html.
#3 Ouverture de head.
#4 Première balise meta. Celle-ci indique quel jeu de caractères la page utilise. PSPad a retenu que je codais en "windows-1250" parce que je manipule des bases de données. Pour des questions pratiques, je vous recommande vivement d'utiliser le charset utf-8. C'est le charset le plus complet, celui avec lequel vous pouvez tout oser, même les kanji.
#5 Une autre balise meta, une sorte de "pub" puisqu'on y trouve le logiciel avec lequel on a fait la page. Elle n'est pas obligatoire mais toujours plus sympa pour les gens qui se cassent le cul à créer des logiciels libres.
#6 Une nouvelle importante : title. C'est le titre de votre page, celui qui s'inscrira tout en haut de votre navigateur, avant le - Mozilla Firefox. C'est aussi une balise très utilisées par les moteurs de recherche, bien plus que les meta alors assurez-vous d'y mettre au moins le nom de votre site.
#7 Fermeture de head.
#8 Ouverture de body.
#9
#10 Fermeture de body.
#11 Fermeture de html.
Il existe un tas de balises meta, comme pour les mots clés, l'auteur du document, en quelle langue il est, etc. Elles ne sont plus vraiment nécessaires mais vous avez de la lecture à propos, dans les liens, si vous voulez.
Pour l'instant, on a pas besoin de plus dans l'en-tête.
4) Ressortons le plan de bataille
Vous avez toujours votre papier avec le schéma de votre site ? Reprenez-le maintenant parce qu'il va servir.
En HTML, il y a une balise dont je n'ai pas encore parlée et qui est très, très, très utilisée. Il s'agit de div. En bon françois, on parle de calque mais ne soyons pas trop chauvins. Les div sont des éléments que l'on peut positionner où on veut, comme on veut et suivant les caprices d'interprétation des explorers. On ne les utilise techniquement pas en HTML5 mais on s'en fout, parce qu'on fait du HTLM4 ici !
Dans l'exemple que j'avais pris dans la partie 2.2, j'avais détaché quatre parties : titre, menu, contenu, sidebar. Et bien j'ai mes quatre div !
Pour les identifier, je leur ai données un "id". Et j'ai surtout fermé toutes les balises pour ne pas avoir de problème plus tard avec des balises non fermées. C'est une habitude à prendre. Ah, tiens, j'ai pas rempli le title >___>
C'est un peu vide tout ça alors je vous laisse remplir un brin vos div en attendant la prochaine fois. Oui, c'est fini pour aujourd'hui ! En tout cas pour moi parce que je vous ai préparé beaucoup de lectures...
Liens
A lire
Evolution du langage HTML (français)
Document type declaration (anglais)
Liste des balises XHTML (français)
Elément meta (français)
Table vs CSS (français)
HTML = Hypertext Markup Language
Les liens se trouvent en fin de post.
Nous avons déjà évoqué quelques faits sur le HTML dans la partie 1. Il est maintenant l'heure d'ouvrir...
1) ...un logiciel : guerre ouverte des éditeurs sous le ciel azur
Vous pouvez coder au bloc note. Vous pouvez coder avec un éditeur WYSIWYG. Même les Linuxiens ont de quoi développer un site web.
On va d'abord trouver le logiciel qui vous convient le mieux.
Commençons par les éditeurs WYSIWYG. "C'est quoi ce nom barbare et imprononçable ?" me demanderez-vous. Facile : What You See Is What You Get, c'est-à-dire que vous pouvez créer votre page web avec un visuel permanent, vous ne voyez pas le code, qui se construit automatiquement pendant que vous soulignez tel élément, que vous cliquez sur "créer un tableau", etc. FrontPage, Dreamweaver sont des éditeurs WYSIWYG.
Bien sûr, vous avez tout de même accès au code mais c'est le visuel qui est le plus utilisé sur ces éditeurs.
Avantages
Très aimés des débutants, ces éditeurs permettent de créer son premier site web sans trop se compliquer la vie. Certains possèdent des bibliothèques de codes tout prêts et qui ne nécessitent qu'un clic et deux paramètres pour être appliqués (Dreamweaver fait les liens page par page ou un livre d'or tout seul, si on le lui demande par exemple). Ils permettent aussi de toucher au code si on veut. Certains modifient toutes les pages en rapport avec une modification (si vous renommez une page, tous les liens y pointant seront changés automatiquement).
Inconvénients
Ces logiciels, payants, pourrissent le code en rajoutant des tas de meta dans l'en-tête des pages et demandent certains paramétrages assez nébuleux si vous voulez améliorer ça. Ils sont comme un iceberg : vous ne voyez généralement que le très petit nombre de fonctions qui, certes, vous sont utiles mais ça vous empêche d'aller chercher plus loin. A trop voir, on a tendance à trop en faire. Et puis comme c'est très facile, vous vous imaginez que vous avez atteint un bon niveau alors qu'il n'en est rien et que vous pourriez vous améliorer.
Conclusion
Si vous voulez rester à un niveau médiocre ou ne pas vous casser le cul, c'est votre choix.
Oui, je ne suis pas objective du tout (vous m'aimez pour ça, je vous le rappelle).
Passons maintenant au bloc note. Enfin, pas tout à fait. On a le droit d'être masochiste et de choisir aussi de la Vaseline©. Il existe des éditeurs textes proches du bloc note, très légers, qui permettent aussi la gestion de projets et qui ont une coloration du code. Vous n'avez pas le visuel, certes, mais un bon codeur n'a pas besoin de visuel.
Avantages
Coloration du code, reconnaissance des balises par couple, modèles de documents, etc. Les trucs basiques mais qui servent. Logiciel léger, qui ne met pas trois plombes à s'ouvrir, qui ne plante pas non plus en route. Gratuits.
Inconvénients
Pas de visuel mais c'est pas grave, vous avez vos explorers de toute façon. Logiciels majoritairement en anglais, parfois sans traduction.
Conclusion
Si le code est pourri, ce sera votre faute et vous devrez vous corriger, donc progresser. C'est une méthode barbare mais bien meilleure pour ce qui est de l'apprentissage et qui oblige le cerveau à fonctionner puisqu'il est votre premier visuel.
Pour ma part, j'utilise PSPad. Je n'ai eu à m'en plaindre que lorsque j'ai essayé le CTRL+E. J'ai essayé NotePad++ mais ses encodages de page passaient pas sur Safari. Dans ma période pro-Mozilla-fuck-Microsoft, j'ai aussi essayé Nvu, rebaptisé KompoZer mais j'ai changé d'ordi et le logiciel ne fonctionnait plus avec mon nouvel OS. Dans mes souvenirs, KompoZer ne cassaient pas trois pattes à un canard. Dans une galaxie lointaine, j'ai aussi été une inconditionnelle de Dreamweaver mais il faut bien sortir des jupes de sa mère à un moment ou à un autre.
Je vous laisse choisir un éditeur parmi ceux disponibles en téléchargement (attention : certains sont des démonstrations donc sont limités ; préférez les logiciels libres). N'hésitez pas à en essayer plusieurs.
2) Petit topo avant l'assaut
On va faire un petit point sur les balises utilisées en HTML avant toute chose. Pourquoi ? Parce qu'il faut connaître son ennemi avant d'attaquer.
Nous avons vu quelques balises : html, head, body. On va les oublier pour le moment.
Il faut savoir qu'elles sont pré-formatés, c'est-à-dire qu'elles auront déjà un style à elles, sans utiliser de CSS ou quoi que ce soit d'autre. Avec ça, on peut classer les balises selon deux grands groupes : les balises inline et les block.
Les balises inline sont, comme leur nom l'indique, des balises qui restent "dans la ligne". Elles ne changent rien à l'agencement du texte si on les place dans un paragraphe, par exemple. Vous les connaissez forcément : b/strong, em/i, u, a, q, small, strike, pre, span, input, img, etc. Il en existe beaucoup et je vais pas vous en faire un inventaire complet.
Les balises block changent l'agencement du texte, forment des blocs, des lignes entières. Exemples : p, blockquote, center, ul/ol, li, h1, h2, h3, etc.
Beaucoup de ces balises sont donc formatées par avance. Faites vous une page avec quelques unes des block pour vous en rendre compte : il y a des tailles, des épaisseurs, des marges différentes.
J'avais aussi parlé de balises orphelines : input, img, br et d'autres. Toutes les balises en HTML s'ouvrent (< ... >) et se ferment (< / ... >). Pas les orphelines. Suivant les versions de HTML que vous utilisez, il faut les écrire comme ci (< ... >) ou comme ça (< ... />) mais, honnêtement, ça ne change rien à l'histoire.
Oui, il existe différentes versions du HTML. Actuellement, nous en sommes au HTML5 mais je viens de m'y mettre (c'est nouveau, ça vient de sortir) et je ne maîtrise pas encore suffisamment les nouvelles spécificités pour oser en parler clairement. Du coup, lorsque je parlerai HTML à l'avenir, il s'agira de la version HTML4.
3) On attaque par la tête !
On a déjà vu le squelette d'une page web, avec la tête et le corps. Et bien j'ai menti ! On ne commence pas par < html > ! On commence par déclarer le doctype. C'est le Document Type Declaration. En gros, on dit au navigateur quelle norme on va utiliser. Il va être plus ou moins complexe selon la version HTML que vous utilisez mais, bien souvent, tous les éditeurs créent le squelette d'une page avec une en-tête minimale automatiquement. Voici ce que j'obtiens sur PSPad quand je crée un nouveau document HTML :
Décortiquons tout ça.
#1 D'abord, le doctype, la déclaration qui dit "je suis une page web en HTML 4.01".
#2 Ouverture de html.
#3 Ouverture de head.
#4 Première balise meta. Celle-ci indique quel jeu de caractères la page utilise. PSPad a retenu que je codais en "windows-1250" parce que je manipule des bases de données. Pour des questions pratiques, je vous recommande vivement d'utiliser le charset utf-8. C'est le charset le plus complet, celui avec lequel vous pouvez tout oser, même les kanji.
#5 Une autre balise meta, une sorte de "pub" puisqu'on y trouve le logiciel avec lequel on a fait la page. Elle n'est pas obligatoire mais toujours plus sympa pour les gens qui se cassent le cul à créer des logiciels libres.
#6 Une nouvelle importante : title. C'est le titre de votre page, celui qui s'inscrira tout en haut de votre navigateur, avant le - Mozilla Firefox. C'est aussi une balise très utilisées par les moteurs de recherche, bien plus que les meta alors assurez-vous d'y mettre au moins le nom de votre site.
#7 Fermeture de head.
#8 Ouverture de body.
#9
#10 Fermeture de body.
#11 Fermeture de html.
Il existe un tas de balises meta, comme pour les mots clés, l'auteur du document, en quelle langue il est, etc. Elles ne sont plus vraiment nécessaires mais vous avez de la lecture à propos, dans les liens, si vous voulez.
Pour l'instant, on a pas besoin de plus dans l'en-tête.
4) Ressortons le plan de bataille
Vous avez toujours votre papier avec le schéma de votre site ? Reprenez-le maintenant parce qu'il va servir.
En HTML, il y a une balise dont je n'ai pas encore parlée et qui est très, très, très utilisée. Il s'agit de div. En bon françois, on parle de calque mais ne soyons pas trop chauvins. Les div sont des éléments que l'on peut positionner où on veut, comme on veut et suivant les caprices d'interprétation des explorers. On ne les utilise techniquement pas en HTML5 mais on s'en fout, parce qu'on fait du HTLM4 ici !
Dans l'exemple que j'avais pris dans la partie 2.2, j'avais détaché quatre parties : titre, menu, contenu, sidebar. Et bien j'ai mes quatre div !
Pour les identifier, je leur ai données un "id". Et j'ai surtout fermé toutes les balises pour ne pas avoir de problème plus tard avec des balises non fermées. C'est une habitude à prendre. Ah, tiens, j'ai pas rempli le title >___>
C'est un peu vide tout ça alors je vous laisse remplir un brin vos div en attendant la prochaine fois. Oui, c'est fini pour aujourd'hui ! En tout cas pour moi parce que je vous ai préparé beaucoup de lectures...
Liens
A lire
Evolution du langage HTML (français)
Document type declaration (anglais)
Liste des balises XHTML (français)
Elément meta (français)
Table vs CSS (français)