Les Fondamentaux du Web
1. Introduction au Web
1.1. Qu'est-ce que le Web ?
Le Web est un système mondial d’informations interconnectées, accessible via Internet. Il
repose sur des documents appelés pages web, qui sont reliées entre elles par des liens
hypertextes. Chaque page peut contenir des textes, images, vidéos, et autres contenus
interactifs. Les utilisateurs accèdent aux pages web via des navigateurs comme Chrome,
Firefox, Safari, etc.
1.2. Différence entre site statique et site dynamique
Site statique : Un site web statique est constitué de pages fixes, dont le contenu est codé en
HTML et ne change pas à moins qu'il ne soit modifié manuellement par le développeur.
Site dynamique : Un site dynamique est généré à la volée en fonction des interactions avec
l'utilisateur. Il utilise des bases de données et des technologies côté serveur comme PHP,
Python, ou Node.js pour générer des pages en temps réel.
1.3. Structure d’un site web
Un site web typique est constitué de plusieurs éléments :
1. HTML : Structure du contenu.
2. CSS : Mise en forme de la page.
3. JavaScript : Interactivité et comportement dynamique.
4. Backend : Gestion des requêtes utilisateurs et des bases de données.
2. Navigateur et Serveur
2.1. Rôle d’un navigateur web
Le navigateur web est un logiciel permettant aux utilisateurs d'accéder aux pages web via
Internet. Lorsqu'une URL est entrée dans le navigateur, celui-ci envoie une requête au
serveur web et affiche la réponse (souvent une page HTML).
2.2. Fonctionnement des serveurs web
Un serveur web est un ordinateur qui stocke les fichiers d'un site web. Lorsqu'une requête
est envoyée par un utilisateur via un navigateur, le serveur répond en envoyant les fichiers
nécessaires, comme des pages HTML, des images, ou des fichiers CSS/JS.
2.3. Protocoles de communication (HTTP/HTTPS)
HTTP (HyperText Transfer Protocol) : Le protocole de communication entre le navigateur et
le serveur pour transférer des données.
HTTPS (HyperText Transfer Protocol Secure) : Une version sécurisée d’HTTP, qui chiffre les
données pour assurer la confidentialité et la sécurité de la communication.
3. Frontend et Backend
3.1. Définition du Frontend et technologies clés
Le Frontend est la partie visible d'un site web, l’interface avec laquelle l'utilisateur interagit.
Il inclut :
1. HTML : Langage de balisage pour structurer le contenu de la page.
2. CSS : Langage de style utilisé pour la mise en forme (couleurs, mise en page, etc.).
3. JavaScript : Langage de programmation permettant d'ajouter des interactions et de
rendre les pages dynamiques.
3.2. Définition du Backend et technologies clés
Le Backend est la partie du site web qui n’est pas visible par l’utilisateur. Il traite les
données et gère la logique de l’application. Technologies utilisées :
1. Node.js : Un environnement d'exécution JavaScript côté serveur.
2. PHP : Un langage de programmation côté serveur, largement utilisé pour les sites
dynamiques.
3. Python : Un langage polyvalent pour le développement backend, utilisé avec des
frameworks comme Django.
3.3. Différence et interaction entre Frontend et Backend
Frontend : Responsable de l'interface utilisateur (ce que l'utilisateur voit et avec quoi il
interagit).
Backend : Responsable de la logique, du traitement des données et de la gestion des
requêtes.
Les deux interagissent principalement via des requêtes HTTP. Le frontend envoie des
données au backend, qui les traite et renvoie une réponse.
4. Technologies et Outils
4.1. API (Application Programming Interface)
Une API permet à des applications de communiquer entre elles. Les API sont utilisées pour
échanger des données entre le serveur et le client.
REST : Un style d’architecture pour créer des API web simples et performantes.
GraphQL : Une alternative à REST qui permet de demander exactement les données dont on
a besoin.
4.2. Frameworks
Frontend :
1. React : Une bibliothèque JavaScript pour construire des interfaces utilisateur
dynamiques.
2. Angular : Un framework JavaScript complet pour construire des applications web.
3. Vue.js : Un framework JavaScript léger et flexible pour construire des interfaces
utilisateur.
Backend :
1. Laravel : Un framework PHP pour le développement rapide d’applications web.
2. Django : Un framework Python pour le développement web rapide.
3. Express.js : Un framework minimaliste pour Node.js.
4.3. CMS (Content Management System)
Un CMS est une plateforme permettant de créer et gérer des sites web sans nécessiter de
connaissances approfondies en programmation.
Exemples :
1. WordPress : Le CMS le plus populaire pour créer des blogs et des sites web.
2. Joomla : Un CMS flexible pour créer des sites dynamiques.
3. Drupal : Un CMS robuste utilisé pour des sites web complexes.
4.4. Éditeurs de Code
Un éditeur de code est un outil utilisé pour écrire et modifier le code source.
Exemples populaires :
1. Visual Studio Code : Un éditeur de code léger, extensible, avec de nombreuses
fonctionnalités.
2. Sublime Text : Un éditeur de texte rapide et simple avec des fonctionnalités avancées.
3. Atom : Un éditeur de code open-source créé par GitHub, personnalisable.
5. Bases de Données
5.1. Types de bases de données
Relationnelles : Stockent les données dans des tables. Exemples : MySQL, PostgreSQL.
NoSQL : Conçues pour stocker de grandes quantités de données non structurées. Exemples :
MongoDB, Firebase.
5.2. Rôle des bases de données dans les sites dynamiques
Les bases de données stockent les informations dynamiques d'un site web, comme les
utilisateurs, les articles, les produits, etc. Elles sont utilisées dans le backend pour récupérer
et manipuler les données en fonction des requêtes de l'utilisateur.
