Cette leçon traite de généralités sur les outils de l’intégrateur/développeur web que nous appliquerons dans le TP prévu à la fin du chapitre.

Éditeurs HTML

L’éditeur de fichier texte comme Bloc-Notes sous Windows montre très vite ses limites pour un travail sérieux en HTML & CSS. Pour aller plus loin, il faut d’abord décider si on part sur du Wysiwyg (voir Wikipédia), avec par exemple Dreamweaver d’Adobe ou KompoZer par Mozilla. Ce sont des logiciels dans lesquels vous créer visuellement votre page sans touche au code HTML. Autant dire que cela n’est pas pour nous, sinon ce cours n’aurait pas lieu d’être. Le code produit (car bien sûr, in fine, nous obtenons du HTML) peut être lourd et assez éloigné de ce qu’un bon connaisseur écrirait de façon compacte et lisible.

L’autre solution consiste à adopter un éditeur spécialisé, soit dans le développement en général, prenant en charge de nombreux langages, soit spécialisé en HTML & CSS.

Voici sous forme synthétique quelques bons éditeurs que je vous conseille. Personnellement, et le reste du cours y fera référence, j’ai adopté Brackets pour ses performances, sa simplicité et sa légèreté.

Éditeurs légers et tout langage

C’est une sélection très arbitraires des meilleurs et plus connus. Citons aussi UltraEdit, Bluefish, Fraise (Mac OS).

Environnements de développement lourds

La partie HTML est pour eux plutôt marginale, tellement ces logiciels permettent de gros développement en Java, C++, PHP. Citons, parmi les plus connus, Eclipse et Netbeans en libre et Visual Studio en propriétaire chez Microsoft. N’oublions pas un dérivée d’Eclipse, plus léger et dédié à HTML & CSS, Aptana Studio.

Éditeurs légers et dédiés à HTML

Voici enfin l’essentiel, les éditeurs qui ressemblent beaucoup aux autres mais ont des fonctionnalités dédiées au codage en HTML & CSS, comme par exemple la visualisation de la page en cours d’édition dans un navigateur, intégré au logiciel ou externe.

Éditeurs en ligne

Rubrique un peu anecdotique pour l’intégration web, mais ce type d’éditeur peu s’avérer très utile pour tester rapidement un bout de code HTML et pour apprendre. Donc n’hésitez pas en vous en servir pour ce cours. L’intérêt bien sûr est que la visualisation immédiate du résultat soit possible. En voici quelques uns parmi les meilleurs :

1. codeacademy, bien plus qu’un éditeur car le site permet d’apprendre un langage en pratiquant directement (cours « Learn HTML & CSS »)
2. jsfiddle.net, très pratique pour tester un code HTML, CSS mais aussi Javascript, le résultat est en bas à droite
3. htmleditor.io, éditeur Wysiwig qui permet par une interface de mettre en forme et saisir du texte puis de voir le code HTML correspondant

Codage des caractères

Quels sont les codages utilisés pour le web ?

Tous les fichiers texte sont reconnu par votre système d’exploitation comme tel, c’est-à-dire composés de caractères imprimables, dans une langue en particulier. Mais comme un fichier informatique est une suite d’octets (des 0 et 1 en séquence), il faut « coder » les caractères pour par exemple dire que le code 32 correspond à un espace.

Le plus ancien et répandu codage, à la base de la plupart des codages modernes, est ASCII dont vous avez sans doute entendu parler. En codant 128 caractères, puis 255, il est vite apparu comme insuffisant, et impropre pour les langues non latines (il s’appelle aussi US-ASCII !). Dans cette problématique, il y a deux questions, qui sont souvent confondues :

1. Quel « jeu de caractères » puis-je utiliser pour représenter les signes de ma langue naturelle, est-ce que par exemple je peux utiliser les accents qui ne sont pas présents en anglais ?
2. Quel est le codage de ces caractères, de façon à ce que, l’ayant employé pour enregistrer mon fichier texte, les utilisateurs puissent lire ce fichier et voir les caractères ?

Le propos ici est général, mais on comprend bien que ces questions sont cruciales pour le web à vocation internationale. La première question est maintenant résolu avec Unicode qui est un jeu de caractère à vocation mondiale, qui contient plus de 100000 signes pour une centaine de langues.

La deuxième question renvoie aux codages proprement dits. Dans les années 90, la situation était un peu confuse pour qui n’était pas anglais ou américain. Voici les codages que l’on utilisait et que vous pouvez encore rencontrer :

1. ISO-8859 reprend ASCII et ajoute des symboles de l’alphabet latin; codage utilisé avec l’anglais et possédant des dérivés, comme ISO-8859-15 pour le français (accents).
2. Windows-1252 ou CP1252 jeu de caractères utilisé par Windows, parfois nommé improprement « ANSI ».

Désormais, Unicode est largement utilisé avec plusieurs codages possibles, UTF-8 et UTF-16. Retenons qu’UTF-8, pour sa compatibilité avec ASCII est désormais largement répandu sur le web. C’est cet encodage que nous vous recommandons d’utiliser.

Comment s’en servir en pratique pour l’intégration ?

Il y a deux règles à appliquer pour se servir d’un codage. D’abord, enregistrez votre document HTML, qui est un fichier texte, avec le codage choisi. C’est souvent implicite dans un éditeur de texte. Par exemple le Bloc-Note de Windows travaille par défaut en « ANSI » (Windows 1252), mais vous propose de changer, au moment d’enregistrer, avec une liste de choix « Encodage » en bas. Les éditeurs « modernes » en remplacement du Bloc-Note, par exemple Geany ou Notepad++ vous indique l’encodage du fichier et vous permette d’en changer. Mais attention, ces éditeurs essais de deviner le codage (il n’y a pas d’indicateur dans le fichier) avec plus ou moins de succès. D’où, pour le web, la deuxième règle.

Dans le web, le navigateur reçoit la page et ne peux pas, comme un éditeur de fichier texte, savoir quel codage vous avez utilisé. C’est pourquoi, la balise meta avec l’attribut charset doit être placé dans le code HTML avec le nom du codage employé : <meta charset="utf-8"> par exemple pour UTF-8. Pour rappel (chapitre 3), cela donne la structure type suivante :

<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>Ma page</title>
      <meta charset="utf-8">
   </head>
   <body>
   </body>
</html>

Quelle conséquence côté utilisateur ?

Le navigateur est généralement en mode auto-détection du jeu de caractères et se débrouille pour bien afficher une page. De plus, les caractères que nous utilisons couramment, y compris les accents en français, ont les mêmes codes dans les différents codages que nous avons vus.

L’information meta/charset est tout de même préférable, ne l’oubliez pas !

Et pour les caractères spéciaux ?

Vous avez la possibilité d’utiliser les entités HTML qui sont des caractères spéciaux nommés ou codés en Unicode. Il suffit d’insérer dans votre code à l’endroit où le caractère doit apparaître :

1. &nom; avec le nom d’une entité (sans les espaces autour), par exemple © pour ©
2. &#code; ou &#xcode; avec le code Unicode d’un caractère, en décimal ou en hexadécimal précédé de « x », par exemple Ͼ ou Ͼ pour Ͼ

Les entités d’usage courant sont :

1.  (équivaut à  ) qui représente un espace dit insécable, montré visuellement comme un espace mais empêchant le texte d’être coupé à ce niveau là ; utile par exemple avant dans « 20 € », que l’on écrit 20 € si on ne veut pas que 20 soit sur une ligne et « $ » sur la suivante
2. &gt ou &lt pour « > » et « < » impossibles à écrire directement car interprétés comme marque de balise

Au passage,   permet aussi de « forcer » plusieurs espaces qui sinon seraient réduits à un seul, par exemple    donne deux espaces. A noter que ce caractère peut aussi être directement saisi dans votre page, si vous savez le taper (Alt + code ASCII sur le pavé numérique sous Windows, Ctrl + Maj + code hexadécimal sous Ubuntu).

Navigateur

Édition

Avec l’éditeur HTML, le navigateur est l’outil indispensable pour le développeur ou intégrateur web.

Même si votre éditeur possède un visionnage de page intégré, utilisez plutôt un navigateur éprouvé, Firefox ou Chrome, pour vérifier le rendu de vos pages. Comme nous le verrons dans le TP, Brackets a une synchronisation entre la page éditée et le navigateur très pratique.

Les outils de développement intégrés au navigateur sont d’une aide précieuse. On les sollicite en général par la touche F12 qui affiche un panneau central regroupant plusieurs outils :

1. code présenté sous forme arborescente, avec détails des styles appliqués, et possibilité par un bouton fléché de cliquer sur une zone et de voir le code correspondant (bouton en haut à gauche)
2. console qui affiche les messages et erreurs Javascript (pour le développement côté client)
3. liste des requêtes envoyés au serveur et des réponses HTTP reçues

Pour l’instant, seul le premier outil nous intéresse. Nous verrons toute sa puissance avec les styles au chapitre 3.

Norme HTML

Un point sur lequel je n’ai peut être pas assez insisté, mais il n’est pas trop tard : HTML 5 est une norme bien écrite et précise mais il y a plusieurs facteurs qui font qu’il faut toujours se méfier du rendu d’un navigateur qui marche bien :

1. les navigateurs prennent en charge progressivement toutes les fonctionnalités prévues par HTML, qui par ailleurs évolue en continue, au fur et à mesure des versions qui sortent régulièrement
2. la norme HTML est bien écrite mais peut laisser des marges de manœuvres aux éditeurs de navigateur pour transcrire visuellement tel ou tel effet

On peut donc avoir des différences mineures d’affichage entre navigateur. Mais il y a surtout des fonctionnalités, surtout avec les styles CSS, qui sont prises en charge à partir d’une version et pas avant. Il faut parfois en tenir compte pour choisir ou non d’utiliser une fonctionnalité récente qui n’est pas nécessairement implantée sur tous les navigateurs (voir la section Ressources à la fin).