Les bases du HTML - Comment écrire un document HTML correctement?

Bonjour et bienvenue dans cette vidéo. Je vais essayer de vous parler des bases du langage HTML et des outils dont il faut disposer afin de pouvoir l'écrire et l'exécuter correctement. Tout d'abord, sachez que HTML est un langage de description de pages web. Il ne s'agit pas d'un langage de programmation proprement dit, mais d'un langage déclaratif simple qui se base sur les balises et certains mots-clés. Il s'agit d'un langage côté client, ça veut dire qu'il sera exécuté sur le navigateur et non pas sur le serveur. Tout d'abord, afin de pouvoir travailler HTML correctement, il faut disposer de certains outils et principalement un éditeur de texte convenable et un navigateur de votre choix. Pour l'éditeur de texte, c'est un logiciel qui va vous permettre de saisir votre code. Il y a plusieurs éditeurs sur le marché que l'on peut télécharger d'ailleurs sur internet. Moi je peux vous recommander les éditeurs comme Notepad++ qui est assez populaire, Sublime Text ou encore Atom. Et pour exécuter le code que vous avez écrit, vous aurez tout simplement besoin d'un navigateur. Alors moi je vais choisir Sublime Text comme éditeur de code et Chrome comme navigateur pour faire les tests. Un document HTML est principalement constitué de balises. Ce sont les éléments de base qui vont s'imbriquer afin de créer un document qui sera ensuite interprété par par le navigateur. Mais il n'y a pas que les balises, il y a aussi ce qu'on appelle les mots-clés. On va d'abord commencer par les balises de base. Alors tout document HTML doit commencer par le DOCTYPE. Alors le DOCTYPE, c'est tout simplement une directive qui va spécifier le type du document. Ça sert aux validateurs, mais aussi pour les navigateurs pour qu'ils puissent facilement comprendre la version que vous utilisez. Le DOCTYPE n'est pas vraiment une balise, mais c'est tout simplement une directive qui spécifie le type du document. Mais les balises, c'est ce qui va suivre ensuite. Alors on va commencer par la balise HTML qu'on va immédiatement fermer. On entre à l'intérieur et ensuite on va écrire les autres balises. Et vous avez bien sûr remarqué que j'ai mis une tabulation afin que les imbrications soient assez claires. Comme ça, si je reviens vers le code pour le modifier ultérieurement, ça me sera facile d'identifier les différents recoins. Deuxième balise, c'est le head. Le head, c'est une balise qui sert d'en-tête. Ça veut dire je peux y intégrer des informations supplémentaires à l'exécution de mon code. Pour le moment, on va pas accorder beaucoup d'attention à cette balise-là, mais on va plutôt s'intéresser à la balise la plus importante qui est la balise body. Avant de continuer, il faut d'abord enregistrer notre document quelque part. Moi, je vais l'enregistrer dans mon bureau, dans un dossier qui s'appelle HTML par exemple. Et je le nommerai index.html. Le plus important, c'est l'extension du fichier. Il faut que ça soit .htm ou bien .html. C'est tout simplement pour que le navigateur puisse le reconnaître en tant que tel. Pour la première partie du nom, la plupart des développeurs préfèrent appeler leur première page, c'est-à-dire la page d'entrée d'un site web, ils l'appellent index. Mais ce n'est pas obligatoire. Une fois que j'enregistre, vous avez remarqué que la couleur a été changée parce que l'éditeur, il reconnaît bien la syntaxe HTML. Maintenant on va s'intéresser surtout à la balise body. Alors tout d'abord il faut savoir que tout ce que j'ai écrit maintenant à part la balise DOCTYPE, ce sont des balises. Les balises, elles ont une signification que les navigateurs connaissent très bien. Par exemple, imaginez que je vais écrire un texte, bonjour. Maintenant j'enregistre et je vais exécuter mon document index.html. Sur le navigateur, ce que je vais voir c'est le texte bonjour qui est écrit d'une manière basique. Sans couleur, sans graisse, sans arrière-plan ni rien du tout. Imaginez maintenant que je vais écrire ce bonjour en gras. Alors je vais ajouter une balise qui va dire au navigateur, tu dois mettre le texte en gras. Alors avant bonjour, je vais mettre la balise b et après bonjour, je vais mettre la balise \b. Maintenant j'enregistre et quand j'actualise ma page, vous allez voir que bonjour a changé d'allure. Alors vous avez remarqué que ma balise, elle est constituée de 2 parties. Il y a la balise B et la balise /b. On appelle la balise B une balise ouvrante et la balise /b la balise fermante. C'est-à-dire que le navigateur, quand il va lire votre document HTML, il va le lire de haut en bas et de gauche à droite. Alors il va, quand il va rencontrer la balise B, il va se dire que tout ce qui va suivre doit être mis en gras. Et cette graisse va se poursuivre jusqu'à ce que le navigateur rencontre la balise /b. Qui va cesser l'effet de la balise ouvrante. Dans ce cas, quand j'écrirai du texte après, il sera plus en gras. Une balise est constituée principalement de chevron d'ouverture, chevron de fermeture et de nom de balise. Les balises, il y en a des dizaines et des dizaines. Bien sûr, vous n'êtes pas obligé de tout apprendre par cœur, mais il y a des balises qui sont généralement utilisées dans la plupart des pages web. Maintenant, imaginez que je vais écrire le texte Bonjour en italique. Alors ici, il suffit d'éliminer la balise b et je mettrai i. Ensuite, après le b, je mettrai slash i. Quand j'enregistre et que j'actualise ma page, je vais voir que le texte maintenant est devenu oblique. Alors l'effet italique a été appliqué. Si maintenant je veux appliquer l'italique et le gras en même temps, le gras c'était la balise b. Je peux la déclarer au début par exemple, mais à la fin il faut finir par slash b. En fait, il y a une règle très simple, c'est la règle d'imbrication. C'est que si vous avez beaucoup de balises qui se poursuivent ou bien qui s'imbriquent, la première balise ouvrante est la dernière balise à fermer. C'est une règle assez simple qu'il faut retenir, comme ça votre code sera mieux organisé. Si maintenant je veux intégrer un autre texte mais dans la ligne suivante, imaginez que c'est le texte bonsoir. Quand j'enregistre et que j'actualise ma page, Je vais voir que le texte bonsoir est écrit sur la même ligne que le texte précédent qui est bonjour. En fait, même si j'ai mis ici un retour chariot avec le clavier, ce n'est pas suffisant pour indiquer au navigateur qu'il faut réellement retourner à la ligne. Alors il faut spécifier ça par une balise. La balise la plus simple que je peux mettre, c'est la balise br et que je mettrai un slash ici à la fin. Maintenant quand j'actualise, je vais voir que le texte bonsoir va descendre à la ligne suivante. Tout d'abord, vous avez remarqué que br, je l'ai fini par un slash, tout simplement parce que la balise BR, on appelle une balise autofermante ou bien une balise orpheline. Ça veut dire, si on ouvre la balise BR, on n'attend pas que la balise soit fermée par slash BR. Alors on indique au navigateur que c'est une balise orpheline dont l'effet s'applique immédiatement. Alors pour mieux l'écrire, il suffit de mettre un espace et puis un slash sur la même balise. Dans ce cas, il s'agit d'une balise ouvrante et fermante en même temps. Il y a aussi des balises qui contiennent des paramètres, ce qu'on appelle des attributs. Par exemple, imaginez que le texte bonsoir que j'ai intégré ici, je veux le mettre avec la couleur rouge. Alors pour faire ça, j'utilise par exemple la balise font. Voilà, comme ça. N'oubliez pas de fermer la balise /font. Quand j'actualise, bon, je vais vraiment voir qu'il n'y a aucune différence par rapport à ce qui était, parce que la balise font, il lui faut des attributs. Ce sont des paramètres supplémentaires qui vont dicter à la balise comment elle va se conduire sur le navigateur. Là, je veux changer la couleur. Alors il suffit de mettre un espace et je mettrai color égal et je mettrai par exemple le nom de la couleur en anglais red. Alors ça veut dire que le texte bonsoir devrait être écrit en rouge. Quand j'actualise, je vois que le texte est réellement écrit en rouge. Bon, pour les couleurs, en fait, il y a une autre manière de les déclarer, c'est ce qu'on appelle le codage hexadécimal. Et je préfère laisser cette technique par la suite parce que ça demande un peu plus d'explications. Il n'y a pas que les balises en HTML, il y a aussi ce qu'on appelle des mots-clés. C'est-à-dire que, imaginez par exemple que je vais écrire bonsoir à tous, j'enregistre, j'actualise, je vais voir que les espaces ils ont été repris sans aucun problème. Mais imaginez que je vais écrire bonsoir, 3 espaces, et puis à tous. Alors je mettrai un deuxième espace et un troisième. Quand j'enregistre et j'actualise, je vais voir que les 2 espaces supplémentaires n'ont pas été appliqués. Et c'est normal parce que le navigateur, il va prendre en compte qu'un seul espace qui a été déclaré par la touche espace du clavier. Et pour mettre des espaces supplémentaires, alors on va utiliser des mots-clés. Dans ce cas, le mot-clé qu'on va mettre, c'est quoi? C'est-à-dire on peut éliminer 2 espaces supplémentaires et je mettrai un truc du genre& ou bien esperluette nb sp point-virgule. En fait, tout ce qui commence par le& et par point-virgule, c'est un mot-clé du HTML que le navigateur peut comprendre. Et entre les deux, on va tout simplement spécifier quel mot je veux appliquer. Par exemple, ici NBSP pour dire un espace blanc, et j'aurai un espace qui sera intégré immédiatement. Regardez, donc il y a un petit décalage ici, ou bien un petit retrait qui a été rajouté. Maintenant, il suffit de copier ce NBSP une deuxième fois, une troisième, une quatrième. Ça veut dire que je vais intégrer maintenant 4 espaces. Un espace qui a été déclaré avec la touche de l'espace du clavier, et 4 espaces que j'ai déclarés grâce au mot-clé nbsp. Et voilà, donc maintenant les espaces ont été appliqués. Sachez que le langage HTML n'est pas sensible à la casse, c'est-à-dire que les balises, vous pouvez les écrire en minuscule ou en majuscule, le navigateur ne va pas faire de différence. Par exemple, la balise B, je peux l'écrire ici en majuscule, et là encore. Quand j'exécute maintenant ma page, je vais voir que rien n'a changé. La balise B est toujours interprété de la même manière. Par contre, le texte qui n'est pas une balise, comme bonjour ou bien bonsoir, si vous les écrivez en majuscule, alors forcément ils vont s'afficher en majuscule, comme c'est le cas ici. Donc ça donne un texte qui est écrit en majuscule. Autre chose, c'est que les retours à la ligne ne sont pas pris en compte par le navigateur. Les retours à la ligne par le clavier, par la touche Entrée. Par exemple, ici, imaginez que vous trouvez que cette ligne est un peu trop lourde. Parce qu'il y a beaucoup de balises qui s'imbriquent. Alors je peux l'étaler sur plusieurs lignes. Par exemple, je peux mettre ceci. Voilà. Bonjour, ensuite vous avez peut-être remarqué que les tabulations s'intègrent automatiquement, et ça c'est parmi les avantages des éditeurs professionnels comme Sublime Text et aussi Notepad++. Voilà, alors là le code devient plus lisible. Je vais faire la même chose pour la balise font, comme ça. Bien que le nombre de lignes maintenant devenait seize en tout, mais le code est bien plus lisible. Ça veut dire la prochaine fois que je vais revenir sur ce code pour modifier quoi que ce soit, il me sera plus facile de m'y retrouver. Quand j'exécute, je vois qu'il y a rien qui a vraiment changé. On va se contenter de ça pour cette première vidéo. Merci à tous et à la vidéo prochaine.