Les bases du langage HTML

TABLES DES MATIERES :

Les balises en HTML
La syntaxe du langage HTML5
Affichage d’une page en HTML

Bonjour mes chers amis débutants et développeurs,

Oui, je salue d'abord les débutants car je sais que commencer avec un nouveau langage de programmation peut être intimidant. Mais ne vous inquiétez pas, tout le monde a commencé quelque part et je suis là pour vous aider à comprendre. 😉 En tant que développeur, je sais que la maîtrise de la syntaxe et des balises est essentielle pour créer des pages web de qualité. Car en création de sites web, il est essentiel de comprendre les bases du langage HTML. Dans cet article, je vais vous guider à travers les éléments fondamentaux pour créer des pages web en HTML.

Les Balises en HTML

Les balises en HTML sont utilisées pour structurer et présenter le contenu d'une page web. Les balises sont des éléments clés qui permettent aux navigateurs web de comprendre comment afficher une page. Nous allons voir comment utiliser les balises HTML pour créer des titres, des paragraphes, des images et des liens.

Les balises en HTML peuvent être classées en trois types : les balises ouvrantes, les balises fermantes et les balises auto fermantes.

Les balises ouvrantes : Ce type de balises est utilisé pour commencer un élément sur une page web, tel qu'un titre, un paragraphe ou une liste. Les balises ouvrantes commencent par le signe inférieur "<" suivi du nom de la balise, puis se terminent par le signe supérieur ">". Par exemple, la balise "" est une balise ouvrante qui est utilisée pour définir un paragraphe de texte. Elle est écrite sous la forme "Texte du paragraphe".

Les balises fermantes : Ce type de balises est utilisé pour indiquer la fin d'un élément sur une page web. Elles commencent par le signe inférieur "<" suivi d'un slash "/" et se terminent par le signe supérieur ">". Par exemple, la balise de fermeture pour "" est "". Il est important de noter que toutes les balises ouvrantes doivent avoir une balise de fermeture correspondante.

Les balises auto fermantes : Certaines balises sont conçues pour être utilisées seules, sans avoir besoin d'une balise de fermeture. Ces balises sont appelées balises auto fermantes ou balises vides. Elles sont écrites avec le signe inférieur "<", le nom de la balise, puis un slash "/", et se terminent par le signe supérieur ">". Par exemple, la balise "<img>" est une balise auto fermante utilisée pour insérer des images sur une page web. Elle est écrite sous la forme "<img src="nom-de-fichier.jpg">".

La Syntaxe Du Langage HTML5

Le W3C (World Wide Web Consortium) est l'organisation qui définit les normes pour les technologies web, y compris HTML. Les normes du W3C sont importantes car elles garantissent que les pages web sont accessibles à tous les utilisateurs, qu'elles soient consultées sur un ordinateur de bureau ou un appareil mobile, et qu'elles soient interprétées correctement par les différents navigateurs.

Le W3C définit une structure minimale pour une page HTML valide, qui doit être respectée pour créer une page web conforme aux normes. Cette structure minimale comprend :

· La déclaration DOCTYPE : c'est la première ligne d'un document HTML et elle indique au navigateur quel type de document il est en train de lire. Il est important de spécifier le DOCTYPE correct pour que le navigateur sache quelle version de HTML est utilisée et puisse interpréter la page correctement.

· La balise <html> : c'est la balise racine de la page et elle contient toutes les autres balises.

 · La balise <head> : c'est l'en-tête de la page et elle contient des informations sur la page, on y retrouve les lignes suivantes :

- La ligne <meta charset="UTF-8"> définit l'encodage des caractères de la page. Dans cet exemple, l'encodage est défini sur UTF-8, qui prend en charge de nombreux caractères différents.

- La ligne <meta http-equiv="X-UA-Compatible" content="IE=edge"> spécifie le mode de compatibilité du navigateur Internet Explorer. Dans cet exemple, le mode de compatibilité est défini sur "edge", qui est la dernière version d'Internet Explorer.

- La ligne <meta name="viewport" content="width=device-width, initial-scale=1.0"> définit la largeur de la fenêtre d'affichage de la page sur les appareils mobiles. Cela permet à la page de s'adapter automatiquement à la taille de l'écran du dispositif sur lequel elle est affichée.

- La ligne <title>Document</title> définit le titre de la page qui apparaît dans l'onglet du navigateur et dans les résultats de recherche. Dans cet exemple, le titre est simplement "Document", mais il peut être personnalisé pour chaque page.

· La balise <body> : c'est le corps de la page et elle contient le contenu visible de la page, tel que les titres, les paragraphes, les images et les liens.

Ne vous inquietez pas, vous comprendriez mieux ces notions lorsque vous allez commencer à pratiquer ! 😁
Affichage d'une Page en HTML

Ça y est, nous allons maintenant écrire notre première page html. :

Comme je vous l’ai déjà dans l’article : Choix et installation d’un éditeurde code (je vous invite à le lire si ce n’est pas encore fait), nous utiliserons tout au long de notre parcours l’éditeur Visual studio code. Donc après l’avoir installer, (On l’a fait toujours dans l’article "Choix et installa…") :
- Ouvrez l'Explorateur de fichiers de votre système d'exploitation.
- Créer un premier dossier de travail général, ou l’on stockera tous nos projets ! et oui un développeur doit être ordonne.
- Ensuite, Créer un nouveau dossier que l’on nommera "premier_projet" Nb : On évitera les espaces dans le nom des dossiers, et des fichiers qu’on manipulera lors de notre parcours, cela permet de prévenir bon nombre d’erreurs
 - Faites un clic droit dans le dossier et sélectionnez "Ouvrir avec Visual Studio Code".
 - - Dans Visual Studio Code, ouvrez un nouveau fichier en cliquant sur l'icône "Nouveau fichier" dans la barre latérale gauche ou en utilisant le raccourci clavier "Ctrl+N" (Windows/Linux) ou "Cmd+N" (Mac).
 - Puis nommer le index.html (n’oubliez pas aucun espace dans le nom du fichier), vous vous demander surement pourquoi index.html ? ne vous inquiétez pas vous le saurez bien assez tôt.
 - Générer la structure minimale de la page en écrivant un point d’exclamation "!" comme afficher sur l’image, c’est un raccourcie que Visual studio de part son extension Emmet nous propose
 - Apres, modifier le titre du document, on écrire ici Premier projet, puis dans le body qui représente le contenu de notre page écrive « Hello World ! je crois que certains parmi vous reconnaissent cette phrase (bon écrivez moi en commentaire si vous ne la connaissez pas je vous expliquerai)
 Cliquer sur AutoSave, comme cela notre document se sauvegardera automatiquement
 - Maintenant nous allons lancer un serveur local pour pouvoir visualiser notre page, aller dans Adds-ons et taper dans la barre de recherche Live server puis cliquer sur installer
 - Revenez maintenant sur notre code et cliquer sur l’icône Go live qui se trouve en bas de la page
 
 Le serveur va se lancer et ouvrir automatiquement le navigateur par défaut de votre pc, je vous conseille d’utiliser chrome ou Firefox
 
 Et voilà le résultat ! voici notre page avec pour titre premier projet et avec pour contenu le texte Hello world ! c’est super vous venez de créer votre page page HTML, Facile n’est-ce pas ? et je vous l’assure ce n’est que le début car on fera des choses beaucoup plus merveilleuses, et on le fera pas à pas.
 CONCLUSION
 
 En résumé, comprendre les bases du langage HTML est la première étape pour créer des pages web. Avec cet article, vous aurez les connaissances de base pour créer des pages web simples. J’attends vos retours en commentaires et d’ici là porter vous bien !