À la fin des années 1980, l'informaticien britannique Tim Berners-Lee développa les composants de base du World Wide Web. Employé à l'Organisation européenne pour la recherche nucléaire (CERN), il s'est d'abord consacré à un projet interne destiné à faciliter les échanges d'informations au sein du réseau entre les laboratoires du CERN, sachant que certains étaient situés en France et d'autres sur le territoire suisse. Pour sa base d'infrastructure de réseau, T. Berners-Lee utilisa alors l'hypertexte, une forme de texte qui transmet les informations par le biais d'hyperliens et qui est écrite en utilisant des langages de balisage. Il développa alors un langage de balisage spécifique qui donna naissance à l'Hypertext Markup Language, soit le HTML.

Un peu moins de trois décennies plus tard, le HTML constitue la base de la mise en réseau numérique mondiale avec de nombreux autres éléments constitutifs tels que le protocole de transfert HTTP, l'URL, les navigateurs et les serveurs Web. Le langage Web est aujourd’hui incontournable pour tout développeur. 

Qu’est-ce que le HTML ?

Le HTML est l'un des langages lisibles par les systèmes informatiques qui permettent des interactions entre les ordinateurs et les êtres humains. Il permet de définir et de structurer les éléments typiques d'un document textuel tels que les titres, paragraphes, listes, tableaux ou graphiques, tout en les marquant en conséquence. La représentation visuelle est réalisée à l'aide du navigateur Web qui interprète les lignes de code pour ensuite afficher les différents éléments. En outre, le code HTML peut contenir des informations sous forme de métadonnées. De nos jours, le HTML est principalement utilisé comme langage de balisage uniquement dans sa fonction descriptive, tandis que les langages pour les feuilles de style comme CSS(Cascading Style Sheets) sont utilisés pour définir le design. Dans les débuts du Web, cependant, il était assez courant de faire les ajustements visuels avec HTML.

HTML a évolué à partir de SGML (Standard Generalized Markup Language), un méta-langage de norme ISO reconnue (8879:1986) qui a largement disparu. Le style des éléments SGML peut donc se retrouver en HTML. La plupart du temps, on aura alors deux balises marquant l’une le début et l’autre la fin, à savoir respectivement <> et . Pour certains éléments, la balise de fin n'est pas nécessaire. Par ailleurs, quelques éléments sans contenu existent, comme le saut de ligne 
. En plus des balises, on retrouve également quelques éléments d’origine dans les propriétés HTML suivantes :

• Déclaration du type de document : indication de la version HTML utilisée, par exemple >.

• Utilisation d'entités de caractères : utilisation d'entités pour les unités récurrentes, telles que < pour « < » ou & pour « & ».

• Marquage des commentaires : les commentaires sont ajoutés en HTML selon le motif .

• Attributs : propriétés complémentaires des balises selon le schéma .

Quels logiciels pour écrire du code HTML ?

Pour commencer notre cours HTML, il est important de clarifier quel logiciel est le plus adapté pour écrire du code HTML. Il n'y a toutefois pas de réponse générale valide pour tous. D'un côté, on note que très peu d’exigences sont requises pour le programme, ce qui signifie qu'un simple éditeur de texte, comme on peut le trouver sur n'importe quel système d'exploitation, est tout à fait suffisant. De l'autre, les applications HTMLdédiées permettent des simplifications considérables dans l'écriture du code. Alors quelle sont les meilleures options pour apprendre le HTML ?

Éditeurs de texte simples

Vous n'avez pas besoin de logiciels sophistiqués pour écrire du code HTML. Un éditeur simple tel que l'éditeur Windows, également connu sous le nom de Notepad, ou son équivalent sur Mac TextEdit (en mode texte brut) sont des bases suffisantes. Vous n'aurez certes pas la possibilité de modifier la mise en page du texte, mais ceci revient toutefois directement au formatage HTML. Vous pouvez aussi en principe utiliser des programmes de traitement de texte tels que Microsoft Word ou OpenOffice Writer, mais vous ne pourrez profiter de leurs fonctionnalités additionnelles en apprenant du HTML. Dans certains cas, des fonctions superflues peuvent même vous ralentir dans votre apprentissage. Pour vos premiers pas dans l’apprentissage des bases HTML, vous pouvez donc préférablement utiliser un éditeur de texte simple préinstallé par défaut sur votre système d'exploitation.

Editeurs HTML

Outre les éditeurs simples et les programmes de traitement de texte complexes, il existe également des éditeurs spéciaux qui peuvent offrir une aide précieuse : des applications vont par exemple mettre en évidence des balises syntaxiques en couleur, ce qui donne une très bonne vue d'ensemble du code écrit. De plus, les erreurs de syntaxe sont également souvent détectées. Une autre caractéristique usuelle est l'auto-complétion, qui soumet des suggestions pour étendre ou compléter votre code lorsque vous écrivez des balises HTML et qui notamment ajoute automatiquement les balises de fin. De plus, les éditeurs HTML ont souvent une fonction de prévisualisation qui permet d’examiner votre travail en cours grâce à un simple clic. Un bon éditeur pour les utilisateurs Windows est par exemple l'éditeur gratuit sous licence GPL Notepad++.

Pour les systèmes de type Unix, une solution gratuite est disponible avec Vim.

Editeurs HTML avec affichage d'images

Une option d'éditeur, qui a son propre attrait et qui est intégrée dans presque tous les systèmes modulaires et systèmes de gestion de contenu, est la représentation d'images réelles, mieux connu sous le nom d’éditeurs WYSIWYG. L'acronyme définit l'idée de base de ces programmes, à savoir „What You See Is What You Get“ (ce que vous voyez est ce que vous obtenez). Ces éditeurs ont été développés spécifiquement pour générer du code HTML, mais nécessitent peu de connaissance du langage de balisage. Comme dans un programme de traitement de texte, vous structurez votre texte à l'aide de boutons prédéfinis dans le menu sans définir une seule balise HTML. Pour apprendre le HTML, ces éditeurs, comme par exemple BlueGriffon ne sont pas adaptés, même si vous pouvez visualiser le code généré à tout moment.

Création de la première page HTML

Dans cette première étape de notre tutoriel HTML, nous vous invitons à créer une première page simple que vous pourrez afficher à l'aide de votre navigateur. Cependant, il ne s'agit pas encore d'une page HTML valide structurée selon certaines normes, mais d'une page de test. Pour créer cette page et pour l’ensemble des exemples HTML de ce tutoriel, nous avons décidé d'utiliser l'éditeur Notepad++ déjà mentionné ci-dessus. Si vous utilisez un autre programme, la procédure peut être légèrement différente.

Ouvrez d'abord l'éditeur et enregistrez le nouveau fichier sous le nom test. Sélectionnez "Fichier Hypertext Markup Language" comme format de fichier, afin que le navigateur sache plus tard qu'il s'agit d'une page HTML. Autrement, si vous utilisez un éditeur simple, vous devez sélectionner le type « Tous les fichiers » (codage: UTF-8) et spécifier qu’il s’agit d’une page HTML directement dans le champ "Nom du fichier" en effectuant la sauvegarde sous le nom test.html.

L’icône du fichier généré va afficher votre navigateur Web.

Vous pouvez ouvrir la page en double-cliquant sur l’icône, mais comme vous n’avez pas encore saisi de contenu, vous ne verrez qu'une page blanche. Maintenant, ajoutez un petit texte test, par exemple "Ceci est ma première page HTML", enregistrez le document, et ouvrez à nouveau le fichier test.html. Le résultat en anglais devrait ressembler à ceci :