Après avoir installé le logiciel Notepad++ ou tout autre éditeur de texte, et plusieurs navigateurs pour tester votre site web (google chrome, mozilla Firefox, etc.)

• Ouvrer votre éditeur de texte en occurrence NotePade++

• Ecrire quelque chose sur la page blanche : par exemple ‘‘Hello Word, j’apprends le HTML’’

‘‘vive la programmation web’’

• Enregiqstrer le dans un n’importe quel répertoire sous le nom : test.html

Fichier>enregistrer sous, saisissez le nom du fichier puis clic sur enregistrer.

Enregistrement du fichier test.html

• Aller dans le répertoire ou le fichier a été enregistré puis ouvrer le.

Pour ceux qui sont attentifs, vous aurez remarqué que nous avons découpé cette phrase en deux lignes mais le navigateur a affiché sur une seule ligne.
Que s’est-il passé ? en effet, pour créer une page web il ne suffit pas d’écrire du texte simple il faut donner les instructions au navigateur pour qu’il comprend ceux que vous aimerez faire. Ces instructions se font au moyen de balise.

• Les balises

Les balises sont des mots entourés de chevron ‘‘< >’’ permettant de donner les instructions à l’ordinateur. On distingue deux types de balise à savoir :

• Les balise en paires
• Les balises orphelines
  • Les balise en paires

Elle s’ouvre pour contenir du texte et se referme plus loin. Exemple
 

Dans ce cas on a deux balises, une balise ouvrante et une fermante

• • Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».
Une balise orpheline s'écrit comme ceci :
 

• • Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :
 

Exemple d’attribut dans une balise orpheline
 

Exemple d’attribut dans la balise paire
Dans ce cas, l’on insert les attributs dans la balise ouvrante (la première balise)

• • La structure d’une page HTML

En programmation comme dans beaucoup d’autres disciplines, vous l’aurez compris, il y a des règles.
Ainsi, toute page écrite en HTML5 doit comporter une certaine structure, un « squelette » qui sera toujours le même. Ce squelette est bien évidemment constitué de divers éléments.
Tout d’abord, toute page HTML5 doit commencer par la déclaration de ce qu’on appelle un « doctype ». Le doctype, comme son nom l’indique, sert à indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc :
 

Notez bien le point d’exclamation, il est obligatoire au début de cet élément un peu particulier.

Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois nouveaux éléments : html, head (« en-tête ») et body (« corps de page »).

• L’élément html va contenir toute la page.
• L’élément head contiendra entre autres, le titre de la page, l’encodage utilisé et des meta-data (des données invisibles pour les utilisateurs mais essentielles – nous en reparlerons plus tard).
• L’élément body contiendra tout le contenu de notre page (paragraphes, images, tableaux, etc.).

Ainsi, le code d’une page web la plus simplifier se présente comme ceci :

Il est important d’indenter (décaler son son code vers la droite ‘touche’ tabulatioo’) efin que votre code soit mieux visible et compréhenssible.
Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise

est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec

). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

• : correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.
• : incorrect, les balises s'entremêlent

Explication du code

•  : cette balise représente la page web, elle englobe toutes les autres balise dans le code.
•  : désigne l’entête de la page. Cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !
•  : le corps. Ici se trouve la partie principale de la page, tout ce qui est écrit ici sera affiché sur le navigateur.
• <meta charset="utf-8" /> : cette balise indique l’encodage utilisé dans votre fichier .html. L’encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciauxvont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.)
•  : indique le titre de la page

• • Les commentaires

Le commentaire est un texte que l’on insère dans le code mais qui n’est pas interpréter par le navigateur. Il est important de commenter votre code car :

• Il vous aidera vous aime à comprendre votre code après avoir fait un bon moment sans le consulter.
• Il aide une personne n’ayant pas participer à la conception de cette page web à mieux comprendre le code.

La syntaxe d’un commentaire est la suivante :
 

• • Le code depuis le navigateur

Tout le monde peut voir le code HTML de votre page une fois celle-ci mise en ligne sur le Web. Il suffit de faire un clic droit sur la page et de sélectionner « Afficher le code source de la page » (l'intitulé peut changer selon votre navigateur), comme le montre la figure suivante.

Vous pouvez tester cette manipulation sur n'importe quel site web, cela marche ! Garanti à 100%. Cela s'explique assez facilement : le navigateur doit obtenir le code HTML pour savoir ce qu'il faut afficher. Le code HTML de tous les sites est donc public.
La morale de l'histoire ? Tout le monde pourra voir votre code HTML et vous ne pouvez pas l'empêcher. Par conséquent, ne mettez pas d'informations sensibles comme des mots de passe dans les commentaires…