Il existe aujourd’hui des dizaines et des dizaines de langages informatiques et de programmation différents : HTML, CSS, JavaScript, PHP, Python, Ruby on Rails, C, C#, C++, Java, etc. pour ne citer qu’eux.

Certains de ces langages ont des possibilités et des rôles similaires, ce qui signifie qu’ils vont être (dans une certaine mesure) interchangeables : on va pouvoir utiliser un langage ou l’autre pour effectuer une même opération selon notre sensibilité personnelle ou selon l’environnement dans lequel on se trouve.

D’autres langages, en revanche, vont être beaucoup plus exclusifs ou ne pas avoir de concurrent et on va donc obligatoirement devoir passer par eux pour effectuer certaines opérations. Cela va être le cas du HTML et du CSS.

En effet, le HTML et le CSS sont deux véritables standards en informatique qui n’ont à l’heure actuelle aucun concurrent comme cela va pouvoir être le cas pour le langage PHP par exemple (pour lequel il existe des alternatives comme Ruby on Rails ou Python entre autres).

De plus, les langages HTML et CSS vont se trouver à la base de tout projet web car ils ont un rôle qui les rend incontournables : les navigateurs (Google Chrome, Safari, etc.) sont des programmes qui ont été construits pour pouvoir lire du code HTML au départ et qui ne peuvent aujourd’hui lire que du code HTML, CSS et JavaScript et nous allons donc nous appuyer sur ces langages (et sur le HTML en particulier) pour pouvoir afficher nos pages.

En bref : quel que soit votre projet web (blog, site e-commerce, application mobile, etc.), vous devrez forcément utiliser du HTML et du CSS.

Pour être un peu plus précis et pour anticiper un peu sur la suite de ce cours, le HTML est un langage de structure : il permet d’indiquer au navigateur que tel contenu est un titre, que tel autre est un simple texte, que cet objet est une image, que celui-ci est une liste, etc. Le navigateur, qui « comprend » le HTML, va se baser sur ces indications pour afficher les contenus.

Voici un premier exemple de code HTML :

L’idée ici est simplement de commencer à vous familiariser avec la syntaxe du HTML et de voir comment le navigateur va traiter ce code. On va ici se concentrer sur deux lignes : la ligne contenant l’élément HTML h1 qui représente un titre de niveau 1 et celle contenant l’élément p qui représente un paragraphe.

Comme vous pouvez le voir, seul le contenu textuel placé entre <h1> et </h1> et entre <p> et </p> est affiché à l’utilisateur. On voit bien que le navigateur comprend que ces deux contenus ne sont pas équivalents puisqu’il les traite de manière différente en les affichant différemment.

Ajoutons maintenant un peu de CSS à la page. Le CSS est un langage de styles : il permet de modifier l’apparence ou le rendu visuel de nos contenus HTML et donc de nos pages web.

Ce code CSS indique au navigateur que les titres de niveau 1 devra être de couleur bleu. On indique également que les paragraphes doivent avoir une couleur rouge.