« Le langage HTML/Bien commencer le HTML » : différence entre les versions
Contenu supprimé Contenu ajouté
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 :
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|<html>}}
{{bleu|<head>}}
{{rouge|<title>}}Premier essai{{rouge|</title>}}
{{bleu|</head>}}
{{bleu|<body>}}
Bonjour le monde.
{{bleu|</body>}}
{{vert|</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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>"> <html> <head> <title> Premier essai </title> </head> <body> Bonjour le monde. </body> </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.
|