HTML, CSS et JavaScript : les fondamentaux des langages web front-end

Tu t’intéresses à la création de sites web et tu n’arrêtes pas d’entendre parler de HTML, de CSS et de JavaScript, mais tu ne sais pas vraiment le rôle de chacun de ces langages dits de « front-end », à quoi ils peuvent bien servir, ou alors tu en as une vague idée ? Cet article est fait pour toi !

Dans cet article, nous explorerons ensemble ces 3 langages front-end qui sont utilisés pour créer et faire fonctionner un sites web. Prépare-toi à plonger dans l’univers magique de ces 3 langages ! ✨

Le but de cet article n’est pas de t’enseigner ces langages et concepts en profondeur, mais simplement de te les présenter et de te montrer quel est leur rôle. Comprendre ces éléments est essentiel pour saisir de quoi est fait un site web, et pourquoi chacun de ces 3 langages est important pour la création d’une expérience en ligne cohérente et attrayante.

Table des matières

Petit rappel : c’est quoi un langage « front-end » ?

Tout d’abord, ça veut dire quoi « front-end » ?

Un site web est composé de deux parties : le front-end et le back-end.

Dans cet article, je t’explique de quoi il s’agit. Mais comme je suis sympa et que je vais quand même pas te faire lire un autre article alors que tu viens d’atterrir sur celui-ci, résumons cela vite fait en 4 points:

Le front-end est la partie visible et interactive d’un site web. Tout ce que tu peux voir d’un site web est le front-end.
Le front-end est construit à l’aide de code qui est écrit avec un langage front-end et qui est exécuté par le navigateur web (Chrome, Firefox, Safari, Edge, Brave, etc.).
Le back-end est la partie invisible qui gère la logique, les mécanismes et les bases de données du site web.
Il est lui aussi construit à l’aide de code qui est écrit avec un langage back-end est exécuté par le serveur.

Le front-end vs. le back-end d’un site web

Il existe 3 langages front-end principaux pour créer les pages d’un site web :

Le HTML
Le CSS
Le JavaScript (souvent abrégé JS)

Seul le langage HTML est obligatoire pour créer des pages web, MAIS sans CSS et JavaScript, on se retrouve avec un site web très minimaliste, peu pratique, sans mise en forme et inintéressant.

Mais voyons cela plus en détail…

HTML : la structure

HTML (HyperText Markup Language, ou en français, langage de balisage hypertexte) est LE langage principal utilisé pour créer des pages web. Toutes les pages web sont au format HTML. Et oui, le HTML est un langage mais aussi un format. Il sert à créer la structure et les éléments d’un site (ou d’une application) web.

Si notre site web était une maison, le HTML serait un langage magique qui permet de créer la structure de notre maison, à savoir les chambres, murs, les portes, les fenêtres, le toit, la cheminée, etc.

Imagine que tu es un apprenti sorcier à la Harry Potter et que tu prononces des formules magiques et PAF 🪄 des murs apparaissent par magie ! ✨ Une autre et PAF ✨ un toit apparait ! Eh bien, c’est la même chose avec un développeur front-end qui saisit du code HTML au clavier (moins le côté glamour et les effets spéciaux) et crée ainsi la structure de son site web.
Et PAF ✨ un paragraphe de texte, une image, un bouton « Envoyer », etc.

🪄 Magique ! 🪄

Le langage HTML est un un langage qui permet de demander au navigateur web (Chrome ou Firefox ou Edge ou Safari ou Brave ou etc.) de créer des composants web (paragraphes, titres, images, boutons, liens, etc.) dans une page web.

Exemple de code HTML

Voici, de manière très simplifiée, à quoi ressemble le code d’une page HTML ultra-basique :

<!DOCTYPE html>
<html>
  <head>
    <title>Mon site</title>
  </head>
  <body>
    <p>Bienvenue sur mon site !</p>
    <a href="https://www.comprendre-informatique.com">
      Clique ici pour ouvrir un meilleur site
    </a>
  </body>
</html>

Je n’expliquerai pas ce code en détail, mais j’ai colorisé les parties de codes intéressantes :

Le code en orange instruit au navigateur que le titre de la page web sera « Mon site ».
Le code en vert crée un paragraphe avec le texte « Bienvenue sur mon site ! ».
Le code en bleu crée un lien hypertexte avec comme texte « Clique ici pour ouvrir un meilleur site » et comme lien, ce site.

Et voici ce que donne ce code :

Balises : Les parties entre < > s’appellent des balises. Les balises sont des codes qui correspondent à des composants web. Leur syntaxe commence par <balise> (balise ouverte) et finit par </balise> (balise fermée). Ce sont comme deux tranches de pain d’un sandwich. Un contenu se trouve entre les deux. Il arrive qu’une balise n’ait aucun contenu, dans quel cas elle s’écrira <balise /> (balise ouverte et directement refermée).

Attributs : Une balise peut également avoir un ou plusieurs attributs. Par exemple, prenons une balise <img> (image) : <img src="image.jpg" alt="Description de l'image"> utilise les attributs src et alt pour spécifier la source de l’image et sa description. Les attributs apportent des informations supplémentaires sur les éléments HTML.

Bref, pas besoin de retenir tout ça ! Mais au moins maintenant, tu comprends pourquoi le HTML est un langage de balisage.

Voici quelques exemples de balises :

<p>…</p> est une balise pour créer un paragraphe de texte
<a>…</a> est une balise pour créer un lien hypertexte
<img>…</img> pour afficher une image
<table>…</table>, un tableau
<br />, un retour à la ligne

Ainsi, <p>tralala</p> crée un paragraphe avec le texte « tralala ».

➡️ Sur cette page du site de Mozilla, tu trouveras de nombreux exemples de balises HTML.

Imagine si tu pouvais créer ta maison en HTML…

<maison>
  <fondations />
  <plancher>parquet</plancher>
  <facade>
    <piece nom="cuisine" />
    <piece nom="salon">
      <cheminee />
    </piece>
    <piece nom="chambre à coucher" />
    <piece nom="salle de bain" />
    ...
  </facade>
  <toit>
    <panneau_solaire />
    <panneau_solaire />
    <panneau_solaire />
    <panneau_solaire />
  </toit>
  ...
</maison>

Le DOM, ou la structure en arbre du HTML

Tu as sûrement remarqué que ces balises s’emboîtaient les unes dans les autres, comme des poupées russes. Par exemple, la balise <maison></maison> contient la balise <facade></facade> qui contient plusieurs balises <piece></piece>. On appelle cette structure une arborescence ou encore un arbre.

Ainsi, le code HTML d’une page web est structuré sous la forme d’un arbre qu’on appelle le DOM (Document Object Model, ou en français, modèle d’objet du document).

Le DOM (Document Object Model), par ‍Birger Eriksson — Travail personnel

Et tu auras aussi sûrement remarqué qu’il y a des espaces avant la plupart des balises. En effet, rajouter des espaces avant les balises est une bonne pratique qui permet de mieux voir l’imbrication des balises, c’est-à-dire dans quelle balise se trouve telle autre balise.

CSS : la décoration

CSS (Cascading Style Sheets, ou en français, feuilles de style en cascade) est un langage qui permet de définir l’apparence de nos éléments HTML. Les web designers utilisent le langage CSS pour réaliser le design d’un site.

Un site web contient typiquement une voir plusieurs feuilles de style CSS. Une feuille de style CSS est un fichier qui contient du code CSS qui permet de définir comment les différents éléments du site vont apparaître.

Si notre site web était une maison, le CSS serait la décoration de notre maison, dont le rôle est de raffiner tous ses éléments esthétiques, son design et son apparence. Ces éléments esthétiques sont par exemple la peinture des murs, les tableaux et les photos disposés dans la maison, la couleur des meubles, les plantes d’intérieur, etc.

Ainsi, si le langage HTML permet de créer les différents éléments du site on veut créer, le langage CSS, quant à lui, permet de définir l’apparence de ces éléments.

De nos jours, les feuilles de style sont des éléments cruciaux des sites web modernes. Sans elles, ils ne ressembleraient à pas grand-chose et auraient une forme très minimaliste. Prenons un exemple concret :

Voici la page d’accueil d’Amazon.fr :

Et voici ce que ça donne si on désactive ses feuilles de style :

Bonne chance pour t’y retrouver !

Maintenant, voyons à quoi ressemble typiquement un code CSS.

Exemple de code CSS

Voici un exemple de code CSS :

p {
  color: red;
  font-size: 16px;
  margin-bottom: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
}

Le code CSS en orange définit que tous les paragraphes de texte (souviens-toi qu’une balise <p></p> est un paragraphe de texte) doivent avoir le format suivant :
- La couleur du texte doit être rouge (color: red;)
- La taille de la police doit être de 16 pixels (font-size: 16px;)
- Une marge d’une hauteur de 20 pixels doit ajoutée après le paragraphe (margin-bottom: 20px;)
Le code CSS en vert définit que tous les liens (la balise <a></a> est un lien) doivent avoir le format suivant :
- Le texte du lien doit être en bleu (color: blue;)
- Le lien ne doit avoir aucune décoration (text-decoration: none;). Les liens sont habituellement des textes soulignés et le soulignement est considéré comme une décoration. Ici, on veut donc que les liens ne soient pas soulignés.
Le code CSS en bleu définit que les liens qu’on survole avec la souris (a:hover, « hover » signifiant « survol ») doivent être de couleur rouge (color: red;).

Et voici ce que ça donne si on applique cette feuille de style CSS à notre exemple de site HTML que nous avons créé plus haut :

JavaScript : l’interactivité

Avant de plonger dans l’univers passionnant du langage JavaScript, clarifions une chose : JavaScript ne doit pas être confondu avec le langage Java. Bien que leur syntaxe puisse sembler similaire, ce sont deux langages distincts qui accomplissent des tâches différentes. Java est un langage back-end, tandis que JavaScript est principalement utilisé en front-end.

JavaScript est un langage qui permet de créer des éléments interactifs sur un site web. Bien que ces éléments ne soient pas obligatoires, ils sont devenus un atout essentiel pour rendre la visite d’un site plus agréable et fluide. En offrant une interactivité, JavaScript permet de se démarquer des autres sites en enrichissant l’expérience des internautes.

Si on revient à notre analogie de la maison, le JavaScript permettrait de mettre en place les systèmes et dispositifs interactifs de la maison, comme les interrupteurs, les thermostats intelligents ou encore les systèmes de sécurité.

Exemples d’utilisation de JavaScript

Voici quelques exemples d’interactions que JavaScript peut réaliser sur une page web :

📝 Validation de formulaire : Lorsque tu remplis un formulaire sur un site web (par exemple, un formulaire de connexion ou d’inscription), JavaScript peut être utilisé pour vérifier que les champs sont remplis correctement avant de les envoyer au serveur. Par exemple, il peut vérifier si une adresse e-mail est dans un format valide ou si un mot de passe est suffisamment sécurisé.
💻🔄 Affichage dynamique de contenu : Sur de nombreux sites web d’e-commerce, lorsque tu sélectionnes une option dans un menu déroulant ou cliques sur un bouton, JavaScript peut être utilisé pour charger et afficher dynamiquement des informations supplémentaires sans recharger la page entière. Par exemple, lorsque tu sélectionnes une taille de vêtement, le site peut afficher instantanément les options de couleur disponibles.
🖼️ Carrousels d’images : Sur les sites web présentant plusieurs images dans un carrousel, JavaScript est souvent utilisé pour permettre aux internautes de faire défiler les images automatiquement ou de les naviguer manuellement en cliquant sur des boutons.
✨🎬 Effets et animations : Lorsque tu passes ta souris sur un élément d’une page web et qu’il change de couleur, de taille ou d’apparence, c’est généralement grâce à JavaScript. De même, les animations telles que les transitions en douceur entre les pages ou les éléments qui apparaissent progressivement peuvent également être réalisées avec JavaScript.
🔄 Chargement de contenu : Sur les sites web qui affichent des articles, des commentaires ou des messages en continu, JavaScript peut être utilisé pour charger de nouveaux contenus lorsque tu fais défiler la page vers le bas, sans avoir à recharger la page entière. Cela crée une expérience utilisateur fluide et réactive.

Exemple de code JavaScript

Voici un exemple de code JavaScript :

const boutonFuyant = document.getElementById("bouton_fuyant");
boutonFuyant.addEventListener('mouseenter', () => {
  const conteneur = document.getElementById("conteneur");
  const conteneurX = conteneur.getBoundingClientRect().x;
  const conteneurRect = conteneur.getBoundingClientRect();
  const boutonFuyantX = conteneurRect.x;
  const conteneurWidth = conteneurRect.width;
  let nouvellePositionX = boutonFuyantX - conteneurX + 200;
  if (nouvellePositionX > conteneurWidth)
    nouvellePositionX = 0;
  boutonFuyant.style.left = nouvellePositionX + 'px';
});

Il s’agit d’un code malicieux (mais inoffensif… du calme !) qui fait fuir le bouton « Clique-moi ! » dès qu’on l’approche avec le curseur de la souris ! 😈 Voici ce que ça donne :

On ne peut pas dire que cet exemple de code JavaScript améliore l’expérience de l’internaute. Mais il illustre bien le potentiel du langage JavaScript.

Différences entre le langage JavaScript et les langages HTML et CSS

Algorithmes : Contrairement au code HTML et CSS, le code JavaScript est constitué d’algorithmes. Si tu ne sais pas ce qu’est un algorithme, je te recommande de lire mon article dédié à ce sujet. En gros, il s’agit d’une « recette de cuisine » conçue pour qu’un ordinateur puisse accomplir une certaine tâche. HTML et CSS ne permettent pas d’écrire des algorithmes, car ils sont conçus pour définir des composants web et des styles. Ainsi, JavaScript est un véritable langage de programmation, tandis que HTML est un langage de balisage et CSS un langage de style, comme mentionné précédemment.

Répartition du code HTML, CSS et JavaScript

Dans un site web, le code HTML, CSS et JavaScript peuvent se trouver dans des fichiers séparés ou alors dans un même fichier, comme dans l’exemple suivant (le HTML en bleu, le CSS en vert et le JavaScript en orange) :

<!DOCTYPE html>
<html>
  <head>
    <title>Bouton fuyant</title>
    <style type="text/css">
      #bouton_fuyant {
        position:relative;
      }
      #conteneur {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="conteneur">
      <button id="bouton_fuyant">
        Clique-moi !
      </button>
    </div>
    <script type="text/javascript">
      const boutonFuyant = document.getElementById("bouton_fuyant");
      boutonFuyant.addEventListener('mouseenter', () => {
        const conteneur = document.getElementById("conteneur");
        const conteneurX = conteneur.getBoundingClientRect().x;
        const conteneurRect = conteneur.getBoundingClientRect();
        const boutonFuyantX = conteneurRect.x;
        const conteneurWidth = conteneurRect.width;
        let nouvellePositionX = boutonFuyantX - conteneurX + 200;
        if (nouvellePositionX > conteneurWidth)
          nouvellePositionX = 0;
        boutonFuyant.style.left = nouvellePositionX + 'px';
      });
    </script>
  </body>
</html>

Les librairies JS : un monde de possibilités

JavaScript, en plus d’être utilisé pour rendre les sites web interactifs, dispose de nombreuses librairies qui facilitent et accélèrent le développement. Les librairies JavaScript sont des collections de fonctions (parties de code) pré-écrites que les développeurs peuvent utiliser telles quelles pour effectuer des tâches courantes plus facilement et efficacement. Elles permettent de ne pas réinventer la roue pour des fonctionnalités souvent nécessaires et de se concentrer sur les aspects uniques du projet.

Voici quelques exemples de librairies JS populaires :

jQuery simplifie la vie des développeurs en rendant la manipulation du DOM et permet d’ajouter facilement des animations.
React est comme des briques LEGO pour les développeurs web. Elle permet de construire des interfaces utilisateur interactives en créant des composants réutilisables et en gérant efficacement l’état de l’application.
Vue.js est comme un chef d’orchestre du code. Il te permet de construire des interfaces utilisateur élégantes et interactives, un peu comme React mais avec sa propre touche unique.
D3.js est une librairie utilisée pour créer des visualisations de données interactives et époustouflantes en utilisant les standards web.

CodePen : un bon outil pour facilement s’essayer au HTML, CSS et JavaScript

Si tu es curieux-se et que tu désires expérimenter avec le code HTML, CSS et JavaScript facilement sans devoir créer des fichiers et devoir mettre en place un serveur, je te conseille le site CodePen.io (seulement disponible en anglais). Tu peux y écrire du code HTML/CSS/JS qui sera directement interprété et rendu. De cette manière, tu verras en direct le résultat de ton code. Clique sur l’image ci-dessous pour accéder à mon CodePen d’exemple, si ça t’intéresse :

Liens utiles

Si ça t’intéresse d’aller plus loin et que tu désires approfondir tes connaissances sur les langages web front-end, voici quelques ressources externes fiables et recommandées en français :

MDN Web Docs (en français) :
- HTML : Documentation complète sur HTML, comprenant des tutoriels, des références et des guides.
- CSS : Documentation complète sur CSS, avec des exemples et des explications détaillées sur les différentes propriétés et techniques de stylisation.
- JavaScript : Documentation exhaustive sur JavaScript, y compris des guides sur les concepts fondamentaux et avancés, ainsi que des exemples de code.
OpenClassrooms :
- Apprenez à créer votre site web avec HTML5 et CSS3 : Cours complet pour apprendre à créer des sites web en utilisant HTML5 et CSS3.
- Apprenez à programmer avec JavaScript : Cours interactif pour apprendre les bases et les concepts avancés de JavaScript.
Grafikart :
- Tutoriels HTML : Série de tutoriels vidéos pour apprendre et maîtriser HTML.
- Tutoriels CSS : Tutoriels vidéos pour comprendre et appliquer les concepts de CSS.
- Tutoriels JavaScript : Tutoriels vidéos détaillés pour apprendre JavaScript, allant des bases aux concepts plus avancés.
Alsacréations :
- Tutoriels HTML, CSS et JavaScript : Tutoriels écrits pour apprendre HTML, CSS et JavaScript.

Ces ressources te fourniront des informations détaillées et des exercices pratiques pour approfondir tes compétences en HTML, CSS et JavaScript. N’hésite pas à les explorer pour compléter ton apprentissage. 👓📚

Résumé

Pour résumer, voici les points-clés abordés dans cet article :

Le front-end : C’est la partie visible et interactive d’un site web. Il est exécuté par le navigateur web.
Le back-end : C’est la partie invisible du site web qui gère la logique, les mécanismes et les bases de données. Il est exécuté par le serveur.
HTML (HyperText Markup Language) : Utilisé pour créer la structure d’un site web (éléments tels que les paragraphes, images, boutons, etc.). C’est un langage de balisage.
CSS (Cascading Style Sheets) : Utilisé pour définir l’apparence et le design des éléments HTML. Il permet de styliser et de décorer les pages web.
JavaScript : Utilisé pour ajouter de l’interactivité aux pages web. Il permet de créer des fonctionnalités dynamiques comme la validation des formulaires, les carrousels d’images, et les effets visuels.
DOM (Document Object Model) : Représente la structure HTML d’une page sous forme d’arbre, facilitant la manipulation via JavaScript.
Librairies JavaScript : Elles simplifient le développement web en fournissant des fonctions pré-écrites pour des tâches courantes. Exemples : jQuery, React, Vue.js, D3.js.

Cet article t'a plu ? Partage-le !

Web

CSS, front-end, HTML, JavaScript, JS, Web

David

4 réponses à “HTML, CSS et JavaScript : les fondamentaux des langages web front-end”

Oxana dit :

1 juillet 2024 à 12h40

Ahhh, mais voilà j’ai trouvé enfin la réponse sur ma question ! J’étais toujours curieuse de savoir comment les langages sont mélangés entre eux !!! Et leur manière d’interagir pour comprendre à quel moment et quand il faut afficher tel ou tel élément et de quelles formes, couleurs, etc. !
Maintenant, c’est vraiment clair, merci beaucoup pour ces explications !

Répondre
Aurélie la Rousse dit :

1 juillet 2024 à 16h45

Merci pour cet article clair et amusant. J’adore l’exemple de la maison, c’est si parlant ! Et voilà grâce à toi que j’ai tout compris.

Et tout à coup beaucoup de réminiscences « erreur javascript » feuille style gnagna etc. me viennent à l’esprit. A défaut de régler les problèmes je pense pouvoir les comprendre un peu mieux.

Répondre
Académie de la Chanson dit :

1 juillet 2024 à 16h47

Je « fais » au quotidien du html, du css et du javascript, tout comme monsieur Jourdain pour la prose. C’est extraordinaire non ?
Et en plus maintenant je comprends ce que je fais sans le savoir. Excellent !

Répondre
Alex dit :

1 juillet 2024 à 21h33

Cet article est idéal pour quiconque souhaite comprendre le rôle de chaque composant dans la construction d’une expérience utilisateur fluide et engageante en ligne. Une introduction claire et accessible, expliquant comment chaque langage contribue à la structure, à l’apparence et à l’interactivité des pages web. Merci pour cette vulgarisation.

Répondre

COMPRENDRE-INFORMATIQUE.COM

Deviens autonome dans l’utilisation de l’informatique et comprends ce que tu fais !