Introduction au langage HTML

Bienvenue dans cette série de tutoriels où vous allez apprendre, pas à pas, à rédiger des documents en HTML 5 pour vous permettre de créer votre premier site internet. L’objectif de la série est de vous apprendre les concepts importants du HTML et de parcourir l’ensemble des balises que vous serez amenés à utiliser pour créer un site de A à Z. Mais tout d'abord, nous allons chercher à comprendre pourquoi le HTML est si important aujourd’hui, et pourquoi c’est en général le premier langage que l’on apprend lorsque l’on entame sa formation web.

À qui s’adresse cette formation ?

Avant cela, vous vous demandez surement ce que contient cette formation et s’il est judicieux de se jeter dedans ? Et vous avez bien raison, cette formation s’adresse à plusieurs types de personnes, et je suis sûr que vous allez vous reconnaître.

Si vous êtes passionnés par le web, étudiant, en reconversion, en recherche de nouvelles compétences, ou que vous souhaitez prendre de l’avance dans vos études, cette formation est faite pour vous. Dans l'idéal, tout le monde devrait être capable de rédiger correctement du code HTML afin de profiter au maximum du potentiel d’internet. Peu importe votre motivation, restez concentré, faites des pauses et allez jusqu’au bout, vous n’en serez que plus fier !

Dans cette formation, nous allons voir tous les prérequis pour que vous soyez à l’aise avec la syntaxe du langage, puis nous verrons comment ajouter du contenu textuel, image et vidéo dans une page web, nous allons ensuite voir comment créer des tableaux de données et des formulaires pour finalement parler d’optimisations et d’accessibilité sur internet. Un programme consistant, mais plaisant qui vous permettra de monter en compétence et devenir autonome rapidement tout en vous sentant accompagné au long de cette formation.

Si vous suivez la formation jusqu’au bout, vous devriez alors être en bonne posture pour continuer avec l’apprentissage du CSS. Ne sautez pas les étapes et surtout, amusez-vous bien. Allez, il est l’heure, on débute, bonne formation à toi !

Un langage pour structurer l’information

Le HTML est le langage utilisé par l’ensemble des sites internet sur lesquels nous naviguons. C’est à l’aide de ce langage que la structure des pages sur les sites internet est rédigée. Le HTML est donc la base de toute page sur internet.

Ce langage permet de définir une structure claire pour chaque élément au sein d’une page en encadrant les éléments par des balises. Une balise est un mot clé entre chevron comme : <div>. Je m’explique, lorsque vous lisez un paragraphe sur internet, en réalité, ces quelques lignes de texte sont encadrées par une balise HTML qui permet de délimiter le début et la fin du paragraphe. C’est en répétant cette opération pour chaque titre, lien ou encore image que les développeurs et intégrateurs web définissent l’ensemble des informations présentent sur un site internet. Voici un exemple de balisage très simple :

Comme vous pouvez vous en douter, on ne peut pas voir ces balises lorsque l’on navigue sur internet, c’est dû au fait que nous utilisons tous un navigateur web pour accéder aux sites. Votre navigateur va alors jouer un rôle d'interprète entre le document HTML qui constitue la page et vous. Chaque balise que votre navigateur va rencontrer sera interprétée et sera transformée visuellement en paragraphe, en titre, en liste à puce, etc. L'exemple ci-dessus donnera donc :

Pour y voir plus clair et comprendre le rôle du HTML et de votre navigateur web, vous pouvez effectuer un clic droit, puis sélectionnez ‘Afficher le code source de la page’ (ou CTRL + U). Vous verrez alors une page de texte avec beaucoup de caractères étranges entre chevrons (comme cette balise <p> par exemple). Les éléments entre < et > représentent les balises, nous verrons dans les prochains épisodes leur structure, leur fonctionnement et leur utilité dans la création d’une page web.

Séparer la structure et l’aspect visuel

Vous l’aurez compris, le HTML ne sert qu'à ranger et organiser les informations dans des cases logiques, ça semble simple et futile, mais croyez-moi, c’est tout un art qu’il va falloir bien maîtriser ! Le souci majeur, lorsque l’on commence l’apprentissage d’un langage, est de comprendre ou s’arrête ses capacités, et de bien définir son périmètre d’action.

Le problème (qui n’en est pas réellement un) est que les navigateurs web décident d’appliquer certains styles par défaut aux balises HTML. Je veux dire par là que, lorsque Google Chrome ou Firefox rencontrent une balise <h1>, permettant de rédiger un titre par exemple, automatiquement, un style visuel de gras et une plus grande taille de texte seront appliqués.

Cela peut paraître être une bonne idée, mais en réalité, les navigateurs rendent floue la définition des balises HTML en mélangeant deux logiques, la structure et l’aspect visuel, qui sont censés être traités par deux langages différents.

Rappelez-vous, en HTML, on parle de structure de page et non de design, si on souhaite styliser notre page (ce qu’il faudra bien entendu faire dans un second temps) il faudra utiliser un autre langage, le CSS. On aura l’occasion de parler de CSS dans cette série, mais de manière très brève, cependant, une série d’épisodes uniquement consacrée au CSS (au design et à la mise en page de site web) sera publiée à la suite de cette formation sur HTML.

Aparté sur les métiers liés au langage HTML

Dans un monde qui évolue constamment vers le numérique, comprendre comment fonctionne un site internet est primordial, savoir en créer un est passionnant.

On a tendance à mettre beaucoup de métiers différents derrière le terme de “webmaster”, qu’il faudra bien entendu ne plus jamais réutiliser après cette formation. Derrière ce gros mot, se cachent en réalité plein divers métiers aux limites souvent floues. On pourra parler alors des intégrateurs web, qui se chargent de coder les interfaces des sites internet, la partie que l’on appelle communément le ‘front-end’. Les développeurs web, qui eux doivent produire les mécanismes et la logique technique derrière un site internet, appelé ‘back-end’ ou encore les référenceurs qui s’occuperont de correctement structurer le site et son contenu afin d’obtenir de meilleures positions sur les moteurs de recherche.

Cette liste de métier est bien entendu non exhaustive, il existe une multitude de métiers que vous découvrirez, tous passionnant les uns les autres et qui, bien fréquemment, travaillent ensemble sur un même projet !