Différences entre les versions de « Le langage HTML/Bien commencer le HTML »

aucun résumé de modification
(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...)
 
 
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.
13 425

modifications