« Le langage HTML/Bien commencer le HTML » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

Contenu supprimé Contenu ajouté

VisuelWikicode

Intégrés

Version du 1 août 2010 à 21:39

Structure de base d'un document HTML

L'en-tête

Structure de base d'un document HTML

L'en-tête

Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites une faute, la seule conséquence sera en général que vous n'obtiendrez pas le résultat attendu mais le texte s'affichera quand même. Dans le pire des cas, votre contenu ne s'affichera pas, mais vous n'aurez pas de « plantage » comme cela arrive avec la programmation.

Du fait de cette tolérance, certains créateurs, ou même logiciels générant du HTML font volontairement des fautes, par exemple ouvrir une balise et ne pas la fermer, par flemmardise. Cela peut sembler sans importance puisque la page s'affichera quand même.

Toutefois,

des erreurs consécutives peuvent engender un effet boule de neige et il devient alors difficile de trouver d'où vient le vrai problème.
cela empêche la traduction automatique vers d'autre langages, par exemple la conversion du HTML en LaTeX ou en syntaxe wiki.
il n'est pas garantit que la page s'affiche correctement sur tous les navigateurs.

Il faut en fait accorder la même rigueur au HTML qu'aux autres langages de programmation, et pour cela utiliser de bons outils et prendre de bonnes habitudes.

Et prendre du recul lorsque l'on s'inspire de pages déjà existantes : la plupart des navigateurs permettent d'afficher le code source de la page, mais celui-ci peut être peu rigoureux.

Un bon exemple vaut mieux qu'un long discours

Nous allons créer notre première page à partir de la page minimale.

Pour cela, ouvrez votre éditeur de texte préféré — nous parlons bien d'éditeur de texte et pas de logiciel de traitement de texte (comme Microsoft Word). Sous Microsoft Windows, le Bloc-Note (Notepad) fait très bien l'affaire. Prenez le texte ci-dessous, copiez-le, et collez-le dans la page vide (ou bien tapez-le).

Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>
    <title>Premier essai</title>
  </head>

  <body>
    Bonjour le monde.
  </body>

</html>

Puis, utilisez la fonction Fichier | Enregistrer sous, et enregistrez le sous le nom bonjour.html (avec Notepad, il faut choisir « Tous les fichiers » dans le menu déroulant Type de fichier). Si vous double-cliquez dessus depuis l'explorateur de disque (Explorateur Windows, Finder…), cela ouvrira normalement votre navigateur Internet par défaut, et affiche :

« Premier essai » dans la barre de titre ;

« Bonjour le monde. » dans la fenêtre principale.

Réessayez maintenant avec le texte suivant :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Premier essai </title> </head> <body> Bonjour le monde. </body> </html>

(le même texte mais sur une seule ligne, sans mise en forme) — une fois le fichier sauvé, il suffit d'appuyer sur le bouton « rafraîchissement/recharger » du navigateur pour voir la différence. On remarque qu'il n'y en a aucune.

Aucune différence en ce qui concerne le rendu, mais le code source est lui bien moins lisible. Donc moins facilement modifiable, augmentable, corrigible. Il convient donc de prendre des « bonnes habitudes de programmation ».

Bonnes habitudes de programmation

Voici quelques conseils

aérer son code :
- les retours à la ligne n'ont pas d'incidence sur le rendu (si ce n'est un espace) ; n'hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code ;
- si vous mettez plusieurs espaces, cela est interprété comme un seul espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre un ou plusieurs espace en début de ligne (indentation) ; en général, quand un texte est entre une balise d'ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède ;
mettez des commentaires pour pouvoir vous repérer ;
utilisez un éditeur de texte avec
- gestion des indentations : il suffit d'appuyer sur la touche de tabulation pour créer un décalage, et le décalage est appliqué automatiquement aux lignes suivantes ;
- « coloration syntaxique » : les caractères spéciaux et balises sont reconnus et mis en couleur, ce qui facilite la lecture du code.

Voici par exemple un commentaire permettant de se repérer facilement (l'exemple suivant se trouverait au sein d'un code, donc notamment après les balises <!DOCTYPE …> <html> … <body> et avant le </body> </html> final).

…
<!--
*******************
* première partie *
*******************
-->

<h1> Première partie </h1>
…

Le mauvais exemple

Prenez votre traitement de texte favoris. Créez un document vide, et tapez simplement « Bonjour le monde. », puis enregistrez le fichier sous la forme d'un fichier HTML : menu Fichier | Enregistrer sous, et choisissez l'option Page Web (*.htm, *.html) dans le menu déroulant Type de fichier. Appelez ce fichier bonjour1.html.

Ouvrez maintenant ce fichier depuis l'éditeur de texte. Vous voyez que le fichier contient un nombre beaucoup plus important de lignes. Certaines de ces lignes peuvent contenir des informations personnelles, que vous aurez rentrées lorsque vous avez installé votre système d'exploitation, et que vous ne désirez peut-être pas voir figurer sur Internet… Et selon le logiciel (et sa version), vous aurez du code plus ou moins « propre » : dans certains cas, pour un texte long, il redéfinit à chaque paragraphe la police utilisée… Essayez de sauvegarder ainsi au format HTML un texte que vous avez déjà tapé auparavant et constatez les dégâts. Vous remarquez aussi que vous n'avez pas pu définir le titre s'affichant dans la barre de titre.

S'il est simple de générer du code HTML, simple dans le sens « en peu d'opérations et sans connaissance particulières » (« en un clic »), il faut se méfier du résultat, même si le rendu est correct.

Avec quoi écrire un document HTML ?

Comme indiqué plus haut, il existe des éditeurs HTML plus développés, allant de l'amélioration de la présentation du code (exemple : les balises sont distinguées du texte par une couleur spécifique) à l'éditeur WYSIWYG (« What You See Is What You Get », littéralement « ce que vous voyez est ce que vous obtenez », c'est-à-dire que vous voyez directement le résultat apporté par les modifications que vous entreprenez).

Vous devrez tout de même garder en tête la notion (récente) d'encodage des caractères, et faire la différence entre les principaux types (utf-8, ISO-8859-1…), et la nécessité pour votre éditeur de texte de reconnaître et respecter cet encodage, sous peine de voir afficher de drôles de caractères à la place des accents… Voir à ce sujet Caractères spéciaux et entités.

Voici une sélection (à compléter) d'éditeurs libres de qualité :

Notepad++ Coloration syntaxique paramétrable, ouverture simultanée de plusieurs sources, support d'une quarantaine de langages, reconnaissance de l'encodage, macro, plugiciels…
Bluefish
JEdit
Quanta_Plus
NVU et Kompozer Ces derniers seraient plutôt des éditeurs WYSIWYG mais permettent d'éditer directement la source d'une page.

Pour choisir, le mieux est de tester. Quelques éléments à prendre en compte pour faire un choix :

Le logiciel permet-il la coloration syntaxique ? Quels langages sont supportés (php, css, html, javascript ?) ?
Peut-on ouvrir plusieurs fichiers dans différents onglets ?
Peut-on visionner simplement le résultat ? (par exemple avec une touche voir cette page dans le navigateur)
Est-ce que les encodages de caractères sont bien gérés ?
Y'a-t-il une auto-complétion ? (quand vous écrivez une balise : le logiciel écrit directement la balise fermante)
L'indentation est elle facilement modifiable ? Notamment, est-ce que le logiciel comporte une fonction permettant de déplacer tout un bloc de ligne vers la gauche ou vers la droite ?

@@ Ligne 3 : / Ligne 3 : @@
 Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites une faute, la seule conséquence sera en général que vous n'obtiendrez pas le résultat attendu mais le texte s'affichera quand même. Dans le pire des cas, votre contenu ne s'affichera pas, mais vous n'aurez pas de « plantage » comme cela arrive avec la programmation.
-Du fait de cette tolérance, certains créateurs, ou même logiciels générant du HTML font volontairement des fautes, par exemple ouvrir une balise et ne pas la fermer, par flemmardise. Vous me direz, quelle importance ? on ne respecte pas la norme pour la norme et ce n'est pas bien méchant. Certes.
+Du fait de cette tolérance, certains créateurs, ou même logiciels générant du HTML font volontairement des fautes, par exemple ouvrir une balise et ne pas la fermer, par flemmardise. Cela peut sembler sans importance puisque la page s'affichera quand même.
-Toutefois, cela
+Toutefois,
+* des erreurs consécutives peuvent engender un effet boule de neige et il devient alors difficile de trouver d'où vient le vrai problème.
-* gêne le déverminage : la recherche d'erreur dans le code HTML est compliqué par le non respect des règles ;
-* empêche la traduction automatique vers d'autre langages, par exemple la conversion du HTML en [[Programmation LaTeX|LaTeX]] ou en [[w:Aide:Syntaxe|syntaxe wiki]].
+* cela empêche la traduction automatique vers d'autre langages, par exemple la conversion du HTML en [[Programmation LaTeX|LaTeX]] ou en [[w:Aide:Syntaxe|syntaxe wiki]].
+* il n'est pas garantit que la page s'affiche correctement sur tous les navigateurs.
 Il faut en fait accorder la même rigueur au HTML qu'aux autres langages de programmation, et pour cela utiliser de bons outils et prendre de bonnes habitudes.
@@ Ligne 17 : / Ligne 18 : @@
 Nous allons créer notre première page à partir de la page minimale.
-Pour cela, ouvrez votre [[w:éditeur de texte|éditeur de texte]] préféré — nous parlons bien d'''éditeur'' de texte et pas de ''traitement'' de texte. Sous Microsoft Windows, le Bloc-Note (Notepad) fait très bien l'affaire. Prenez le texte ci-dessous, copiez-le, et collez-le dans la page vide (ou bien tapez-le).
+Pour cela, ouvrez votre [[w:éditeur de texte|éditeur de texte]] préféré — nous parlons bien d'''éditeur'' de texte et pas de logiciel de ''traitement'' de texte (comme Microsoft Word). Sous Microsoft Windows, le Bloc-Note (Notepad) fait très bien l'affaire. Prenez le texte ci-dessous, copiez-le, et collez-le dans la page vide (ou bien tapez-le).
 ; Exemple
@@ Ligne 34 : / Ligne 35 : @@
  {{vert|&lt;/html&gt;}}
-Puis, utilisez la fonction '''Fichier | Enregistrer sous''', et sauvez-le dans le fichier <code>bonjour.html</code> (avec Notepad, il faut choisir « '''Tous les fichiers''' » dans le menu déroulant '''Type de fichier'''). Si vous double-cliquez dessus depuis l'explorateur de disque (Explorateur Windows, Finder…), cela ouvre votre navigateur Internet par défaut, et affiche :
+Puis, utilisez la fonction '''Fichier | Enregistrer sous''', et enregistrez le sous le nom <code>bonjour.html</code> (avec Notepad, il faut choisir « '''Tous les fichiers''' » dans le menu déroulant '''Type de fichier'''). Si vous double-cliquez dessus depuis l'explorateur de disque (Explorateur Windows, Finder…), cela ouvrira normalement votre navigateur Internet par défaut, et affiche :
 : « Premier essai » dans la barre de titre ;
 : « Bonjour le monde. » dans la fenêtre principale.
@@ Ligne 49 : / Ligne 50 : @@
 Voici quelques conseils
 * aérer son code :
-** si vous revenez à la ligne, cela correspond à une espace sur le rendu ; n'hésitez donc pas à revenir à la ligne ;
+** les retours à la ligne n'ont pas d'incidence sur le rendu (si ce n'est un espace) ; n'hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code ;
-** si vous mettez plusieurs espace, cela est interprété comme une seul espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre un ou plusieurs espace en début de ligne (indentation) ; en général, quand un texte est entre une balise d'ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède ;
+** si vous mettez plusieurs espaces, cela est interprété comme un seul espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre un ou plusieurs espace en début de ligne (indentation) ; en général, quand un texte est entre une balise d'ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède ;
 * mettez des commentaires pour pouvoir vous repérer ;
 * utilisez un éditeur de texte avec