Pour créer des sites web, nous utilisons différents langages de développement, chacun ayant une utilité spécifique. Mais avant d'aborder ce sujet, regardons un peu les ordinateurs qui sont connectés au Web. Il y a deux types :
Des clients : c’est vous, votre ordinateur qui sert à aller consulter des sites web.
Des serveurs : ce sont des ordinateurs spéciaux (souvent très puissants) qui envoient les sites web aux clients. Les serveurs "possèdent" les sites web et les distribuent à ceux qui veulent les visiter.
Il existe des langages de programmation spécifiques à ces deux types d’ordinateurs. Regardons cela de plus près.
Les langages client
Les langages client servent à fournir des informations de base pour la construction des sites web. C’est un peu comme des plans d’architecte. Ces langages sont principalement :
HTML, qui permet de renseigner le contenu du site (textes ou images…)
CSS, qui permet de définir le visuel du site (les couleurs, la police, les tailles…)
JavaScript, qui permet d’ajouter de l’interaction sur le site (menus déroulants, affichage de messages lors de la validation de formulaires…)
Ces trois langages sont désormais indispensables à la réalisation de tous les sites web. On dit que ce sont des langages client ou encore des langages frontend, car ils sont lus par les machines des clients à travers les navigateurs web.
Nous n’apprendrons pas à nous en servir dans ce cours, mais vous pourrez enchaîner avec d’autres cours accessibles aux débutants si vous voulez vous entraîner à les utiliser !
Les navigateurs
Pour accéder aux sites web, on a besoin de navigateurs web. Il existe notamment :
Google Chrome
Mozilla Firefox
Edge (le successeur d’Internet Explorer)
Safari
Le rôle des navigateurs est de traduire les langages HTML, CSS et JavaScript sous la forme de sites web utilisables par tout le monde.
À quoi ressemble un code HTML ? Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page web</title>
</head>
<body>
<p>Bienvenue sur mon site web !</p>
</body>
</html>Et voici à quoi ressemble ce code HTML traduit par un navigateur :
Avez-vous repéré la phrase "Bienvenue sur mon site web !" dans le code HTML ?
Avec un peu d’entraînement, vous pouvez apprendre à le lire et même à l’écrire, si si ! Rien que dans ce code, je vois des paragraphes, des titres, des informations d’en-tête, etc. 🤓
Les sites sur mobile
Jusqu’ici, nous avons parlé plutôt de sites web que l’on affiche sur un ordinateur. Aujourd’hui, les smartphones et les tablettes sont largement utilisés. Comment peut-on rendre un site web compatible avec ces appareils ?
Vous avez deux options :
Créer « un site web responsive » où votre site (les images, le texte, les boutons, etc.) s'adapte automatiquement à la petite taille des smartphones. Les sites web responsive se développent avec les langages du web : HTML, CSS, JavaScript… et d’autres langages dont vous aurez un aperçu dans ce cours.
Ou bien développer une application « native », c’est-à-dire conçue spécialement et uniquement pour un smartphone ou une tablette. Cette option est plus lourde mais elle offre une meilleure expérience pour un service complexe. Celle-ci se développe avec des langages mobiles spécifiques à Android et IOS (par exemple : Kotlin, Java ou Swift.)
Que devez-vous faire ?
À mon avis, si vous avez un site web, il est aujourd’hui indispensable dans tous les cas de faire un site web responsive. Si votre projet smartphone est complexe, par exemple la création d’un jeu, l'application native est utile. En revanche, pour des pages simples, un site responsive suffit.
Les outils de développement
Vous avez vu un peu de code HTML, mais comment les développeurs écrivent ce code ?
Pour s’aider, ils utilisent plusieurs outils :
Un éditeur de texte ou un IDE : il s’agit d’un outil permettant d’écrire son code.
Quand vous souhaitez écrire un document, vous utilisez Word (ou OpenOffice, LibreOffice, etc.)
De la même manière, les développeurs utilisent un IDE pour écrire le code d’un site.
Les IDE les plus connus sont Visual Studio Code (VSCode) ou encore JetBrains IntelliJ IDEA.Les bibliothèques, ou librairies : ce sont des morceaux de code écrits par d'autres développeurs qui sont réutilisables pour gagner du temps. C'est un peu comme utiliser des sauces toutes faites en cuisine pour préparer le plat plus rapidement ! On les utilise souvent pour des besoins courants, comme pour créer des aspects interactifs d'un site. Mais on peut aussi les utiliser pour des besoins spécifiques, qui nous prendraient d’énormes heures et beaucoup d’efforts et de compétences pour coder de 0. JQuery pour le langage JavaScript est un exemple d'une bibliothèque
Vous pouvez soit télécharger les bibliothèques sur votre ordinateur et les utiliser dans votre IDE, soit chercher le code dont vous avez besoin sur des bibliothèques en ligne et le copier-coller dans votre code.Les frameworks : il s’agit de bibliothèques beaucoup plus élaborées, qui permettent de structurer l’entièreté de son code, comme un kit de construction ! Ils sont utilisés notamment pour des sites web plus importants, qui nécessitent beaucoup de code. Vous avez peut-être déjà entendu parler d’Angular pour JavaScript ? Il s'agit d'un framework assez connu. Pour utiliser des frameworks vous devez les télécharger et les inclure dans les projets sur votre IDE. Si ce n'est pas encore clair ne vous inquiétez pas ! Nous parlerons plus en détail des frameworks dans le prochain chapitre.
À vous de jouer !
Et si vous appreniez à modifier du code HTML ? Voici un petit exercice pour vous faire la main ! Rendez-vous sur cet éditeur CodePen et suivez les étapes suivantes :
Modifiez le paragraphe de bienvenue pour indiquer votre nom (remplacez les XXXX)
Ajoutez un second paragraphe à la suite sur le même modèle, avec les balises <p> et </p> du code HTML qui délimitent un paragraphe.
Ajoutez des balises <strong> et </strong> pour délimiter le mot « Bienvenue » comme ceci : <strong>Bienvenue</strong>. Que se passe-t-il ?
En résumé
Le Web fonctionne à l’aide de nombreux langages informatiques.
HTML, CSS et JavaScript sont des langages client : ils sont lus par votre ordinateur, l’ordinateur d’un visiteur. Ils décrivent l’apparence du site web.
Il est indispensable de créer des sites web responsives pour adapter vos sites aux spécificités des tablettes et des smartphones.
Les IDE, bibliothèques et frameworks sont des outils utilisés par des développeurs pour faire des sites web.
Maintenant que vous avez compris l’utilité des langages frontend, je vous propose de découvrir les langages serveur !
