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

Ajouter des liens
Un livre de Wikilivres.
Navigation interactive dans l’historique
Modification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
Création : {{Programmation HTML}} Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites un faute, la seule conséquence sera en général que vous n'obtiendrez pas le résult...
 
Aucun résumé des modifications
Ligne 12 : Ligne 12 :


Et rendre 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.
Et rendre 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 [[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).

; Exemple
{{vert|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>">}}
{{vert|&lt;html>}}
{{bleu|&lt;head>}}
{{rouge|&lt;title>}}Premier essai{{rouge|&lt;/title>}}
{{bleu|&lt;/head>}}
{{bleu|&lt;body>}}
Bonjour le monde.
{{bleu|&lt;/body>}}
{{vert|&lt;/html>}}
Puis, utilisez la fonction <code>fichier | Enregistrer sous</code>, et sauvez-le dans le fichier <code>bonjour.html</code> (avec Notepad, il faut choisir « '''Tous les fichiers''' » dans le meu 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 :
: « Premier essai » dans la barre de titre ;
: « Bonjour le monde. » dans la fenêtre principale.
Réessayez maintenant avec le texte suivant :
: <code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>"> &lt;html> &lt;head> &lt;title> Premier essai &lt;/title> &lt;/head> &lt;body> Bonjour le monde. &lt;/body> &lt;/html></code>
(sur une seule ligne) — 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, corrigeable. Il convient donc de prendre des « bonnes habitudes de programmation ».

== Bonnes habitudes de programmation ==

Voici quelques conseils
* aérer son code :
** si vous revenez à la ligne, cela correspond à une espace sur le rendu ; n'hésitez dnc pas à revenir à la ligne ;
** si vous mettez plusieurs espace, 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 balis ede 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.

Version du 26 février 2007 à 12:54

Structure de base d'un document HTML Structure de base d'un document HTML
L'en-tête L'en-tête

[ Modifier le sommaire ]

Structure de base d'un document HTML Structure de base d'un document HTML
L'en-tête L'en-tête

Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites un 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.

Toutefois, cela

  • gêne le déverminage : la recherche d'erreur dans le code HTML est compliqué par le non respectd es règles ;
  • empêche la traduction automatique vers d'autre langages, par exemple la convertion du HTML en LaTeX ou en syntaxe wiki.

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

Et rendre 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 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).

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 sauvez-le dans le fichier bonjour.html (avec Notepad, il faut choisir « Tous les fichiers  » dans le meu 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 :

« 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>

(sur une seule ligne) — 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, corrigeable. Il convient donc de prendre des « bonnes habitudes de programmation ».

Bonnes habitudes de programmation

Voici quelques conseils

  • aérer son code :
    • si vous revenez à la ligne, cela correspond à une espace sur le rendu ; n'hésitez dnc pas à revenir à la ligne ;
    • si vous mettez plusieurs espace, 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 balis ede 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.
Récupérée de « https://fr.wikibooks.org/w/index.php?title=Le_langage_HTML/Bien_commencer_le_HTML&oldid=102483 »