Lexique

HTML

HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer et présenter le contenu sur le web. Contrairement à un langage de programmation, il ne contient pas de logique ou d’algorithmes, mais organise les éléments d’une page à l’aide de balises. Ces balises définissent des structures comme des paragraphes, des titres, des images ou des liens, permettant ainsi aux navigateurs web d’afficher les pages correctement.

CSS

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour contrôler l’apparence et la mise en forme des éléments HTML sur une page web. Il permet de définir des styles tels que les couleurs, les polices, les marges ou les alignements, afin de rendre les pages visuellement attrayantes et cohérentes. CSS fonctionne en complément de HTML, en séparant le contenu (HTML) de la présentation (CSS), ce qui facilite la maintenance et l’adaptation du design.

JS

JavaScript (JS) est un langage de programmation principalement utilisé pour ajouter de l’interactivité et des fonctionnalités dynamiques aux pages web. Contrairement à HTML et CSS, qui structurent et stylisent le contenu, JavaScript permet de manipuler les éléments d’une page en temps réel, comme réagir aux actions des utilisateurs, valider des formulaires, créer des animations ou charger du contenu sans recharger la page. C’est un langage côté client, bien qu’il puisse également s’exécuter côté serveur avec des environnements comme Node.js.

PHP

PHP (Hypertext Preprocessor) est un langage de script côté serveur principalement utilisé pour développer des applications web dynamiques. Contrairement à HTML ou JavaScript, PHP s’exécute sur le serveur et génère du contenu HTML ou JSON envoyé au navigateur de l’utilisateur. Il est souvent utilisé pour gérer des bases de données, traiter des formulaires, ou créer des fonctionnalités comme des systèmes de connexion. Son intégration facile avec le HTML en fait un des langages les plus populaires pour les sites web, notamment ceux utilisant des CMS comme WordPress.

BDD

Une base de données est un endroit où l’on stocke des informations de manière organisée, pour pouvoir les retrouver facilement. Par exemple, un site web peut utiliser une base de données pour enregistrer les noms et mots de passe des utilisateurs. Les bases de données relationnelles, comme MySQL, organisent ces informations en tableaux, un peu comme des feuilles de calcul, pour que tout soit clair et facile à gérer.

Note

Un langage de programmation permet d’ajouter des actions conditionnelles et des interactions complexes.

1. Si un utilisateur clique sur un bouton et que la case « Se souvenir de moi » est cochée, alors enregistre son choix dans la mémoire de l’ordinateur (local storage) et affiche un message.
2. Sinon, si la case n’est pas cochée, affiche un autre message ou demande une confirmation.
3. Va chercher dans une base de données l’email d’un utilisateur, compare-le avec le mot de passe qu’il a entré, et si les deux correspondent, connecte-le au site. Sinon, affiche une erreur de connexion.

Ce troisième point montre que le langage de programmation peut interagir avec des données stockées ailleurs (comme une base de données), les analyser et prendre une décision en fonction du résultat. HTML ne peut pas faire cela : il ne fait que décrire ce qui doit être affiché.

Client et Serveur

Le client et le serveur sont deux éléments qui communiquent dans un réseau :

• Le client est l’élément qui envoie une requête, comme un ordinateur ou un navigateur demandant une page web ou des informations.
• Le serveur est l’élément qui reçoit cette requête, traite les données demandées et renvoie une réponse au client.

Par exemple, un client demande une page web en entrant une adresse URL, et le serveur renvoie le contenu de cette page au client.

Front & Back

Front-end : ce sont les langages et services qui permettent de construire le front office, en créant la partie visible et interactive d’un site ou d’une application, comme les boutons, les images et les textes que l’utilisateur voit.

Front office : c’est la partie accessible aux utilisateurs, comme la salle de service d’un restaurant, où les clients choisissent et dégustent les plats. Cela représente l’interface visible et utilisable.

Back-end : ce sont les langages et services qui permettent de construire le back office, en gérant la logique, les calculs, les bases de données et les interactions nécessaires au bon fonctionnement du site ou de l’application.

Back office : c’est la partie cachée, comme la cuisine d’un restaurant, où les plats sont préparés avant d’être servis. Tout le monde ne peut pas y accéder : il faut avoir les accès nécessaires et comprendre comment l’utiliser.

À noter que, dans de nombreux articles, les termes « front-end » et « back-end » sont souvent utilisés pour désigner à la fois le front office et le back office, de même pour le back.

On a tendance à dire que HTML, CSS et JavaScript font partie du front-end, tandis que PHP appartient au back-end. Cependant, dans les faits, et sans entrer dans des explications trop poussées, la distinction est plus ambiguë qu’il n’y paraît. Par exemple, HTML peut être utilisé pour afficher l’interface d’un back office, tandis que PHP, côté serveur, assemble différents morceaux de HTML pour constituer une page complète avant de l’envoyer au navigateur, qui l’affichera.

Front – Client | Back – Serveur

Les termes front-end et back-end sont couramment utilisés en développement web pour distinguer deux aspects complémentaires d’une application ou d’un site web.

• Front-end : également appelé « côté client », il s’agit de la partie visible et interactive avec laquelle les utilisateurs interagissent directement. Cela inclut la structure, le design et le comportement dynamique des pages web, généralement développés à l’aide de langages tels que HTML, CSS et JavaScript.
• Back-end : également appelé « côté serveur », il concerne la gestion des bases de données, la logique métier et le traitement des requêtes. Le back-end assure le bon fonctionnement de l’application en arrière-plan, en traitant les données et en les envoyant au front-end pour affichage. Les langages couramment utilisés pour le back-end incluent PHP, Python, Java et Node.js.

Ces deux composantes sont essentielles et travaillent en tandem pour offrir une expérience utilisateur fluide et fonctionnelle. Le front-end se concentre sur l’interface utilisateur et l’expérience visuelle, tandis que le back-end gère les processus internes, les données et la logique nécessaire au fonctionnement de l’application.

Le premier site web de l’histoire

Le premier site web de l’histoire a été créé par Tim Berners-Lee, l’inventeur du World Wide Web, en 1991. Il était hébergé sur un ordinateur NeXT au CERN (Organisation européenne pour la recherche nucléaire).

Contenu du premier site web :

Le site avait pour but de présenter le concept du World Wide Web, expliquer comment utiliser un navigateur, et comment mettre en place un serveur web.

À quoi ressemblait-il ?

Le site était très simple et ne contenait que du texte avec des liens hypertextes, sans images ni design. Il servait principalement de documentation pour les chercheurs.

Qu’est-ce qu’un lien hypertexte ?

Un lien hypertexte est une connexion dans un document numérique qui permet de passer rapidement à une autre partie du document ou à un autre document en cliquant dessus. Dans le premier site web, les liens hypertextes permettaient de naviguer entre différentes pages ou ressources liées.

Peut-on encore le consulter ?

Une copie du premier site web est toujours accessible aujourd’hui sur :
http://info.cern.ch

C’est un morceau d’histoire qui montre à quel point le web était minimaliste à ses débuts !

Evolution HTML et CSS

Depuis HTML 1.0 (1993) et CSS 1.0 (1996), les évolutions ont transformé le web :

• HTML : de la simple structuration de contenu (HTML 1.0) à des fonctionnalités avancées avec HTML5 (2014), qui prend en charge la vidéo, l’audio, les graphiques, et une meilleure sémantique pour le SEO et l’accessibilité.
• CSS : initialement limité à la mise en forme de base (CSS 1.0), il a évolué avec CSS3 (2011) pour inclure des animations, des transitions, des grilles, et une meilleure gestion de la responsivité.