Introduction au développement web

🌐 Qu'est-ce que le web ?

Le web est comme une immense bibliothèque mondiale où chaque livre (site web) est écrit dans des langages spécifiques :

📰 HTML = La structure du livre (titre, chapitres, paragraphes)
🎨 CSS = La mise en page et le design (police, couleurs, mise en forme)
⚡ JavaScript = Les éléments interactifs (pages qui bougent, animations)
🚚 HTTP = Le système de livraison (comment le livre arrive chez vous)
🏪 Serveur = La librairie qui stocke tous les livres

🎯 Pourquoi apprendre le web ?

🌍 Omniprésent : Sites, apps, plateformes
💼 Opportunités : Métiers en forte demande
🚀 Créativité : Donner vie à ses idées
🔧 Accessibilité : Technologies ouvertes
💡 Innovation : Évolution permanente

🌟 Ce que vous allez maîtriser

📋 HTML : Structurer le contenu
🎨 CSS : Styliser et animer
⚡ JavaScript : Rendre interactif
🔗 HTTP : Comprendre les échanges
🏗️ Architectures : Organiser les projets
🔒 Sécurité : Protéger les applications

🌐 L'écosystème web moderne

💻

Frontend
Ce que voit l'utilisateur

⚙️

Backend
La logique serveur

🗄️

Base de données
Stockage des informations

🌐

API
Communication entre services

🧠 À retenir

Une page statique renvoie toujours le même HTML, quelle que soit la personne ou le moment de la consultation. Une page dynamique est générée à la volée côté serveur ou modifiée côté client et varie selon l'utilisateur, les données ou le contexte (ex. tableau de bord, fil d'actualité, recherche).

Glossaire — Termes techniques du cours

Références rapides pour les notions mentionnées dans la formation.

🧩 Fondamentaux

HTML : Langage de balisage qui structure le contenu d’une page (titres, paragraphes, images, liens).
CSS : Langage de styles qui contrôle l’apparence (couleurs, tailles, mise en page, animations).
JavaScript : Langage de programmation qui apporte l’interactivité côté navigateur.
DOM : Représentation en arbre du document HTML manipulable en JavaScript.
Frontend : Partie visible par l’utilisateur (HTML/CSS/JS dans le navigateur).
Backend : Logique côté serveur (exécution, accès base de données, API).
CMS : Système de gestion de contenu prêt à l’emploi (WordPress, Drupal, Joomla).
Base de données : Système de stockage et de requête des informations (MySQL, PostgreSQL).

🌐 Réseau et HTTP

Client : Le navigateur ou l’application qui envoie des requêtes.
Serveur : La machine qui traite la requête et renvoie la réponse.
URL : Adresse d’une ressource sur le web (schéma, domaine, chemin, paramètres).
HTTP/HTTPS : Protocole d’échange de messages entre client et serveur (HTTPS chiffré par TLS).
Requête/Réponse : Dialogue standard HTTP où le client demande et le serveur répond.
Méthodes HTTP : GET (lire), POST (créer), PUT (remplacer), PATCH (modifier partiel), DELETE (supprimer), OPTIONS, HEAD.
En‑têtes HTTP : Métadonnées de la requête/réponse (type de contenu, cache, auth...).
Codes d’état : 2xx succès, 3xx redirections, 4xx erreur client, 5xx erreur serveur.

🔗 API et données

API : Point d’accès permettant à des applications de communiquer entre elles.
REST : Style d’API utilisant les verbes HTTP et des ressources adressables.
JSON : Format texte léger pour échanger des données clé‑valeur.
Formulaire : Ensemble de champs envoyés au serveur pour traitement.
Cookie : Petit fichier stocké par le navigateur pour persistance côté client.
Session : État utilisateur maintenu côté serveur et identifié par un cookie.
LocalStorage : Stockage persistant côté navigateur (clé/valeur) non envoyé au serveur.

🛡️ Sécurité et architecture

Authentification : Vérifier qui est l’utilisateur (login, mot de passe, OAuth...).
Autorisation : Définir ce que l’utilisateur peut faire (rôles, permissions).
Chiffrement : Rendre illisible sans clé (TLS/SSL pour HTTPS, chiffrement des données).
Hash (SHA‑256) : Empreinte irréversible utilisée pour vérifier l’intégrité/mots de passe.
XSS : Injection de scripts côté client via contenu non filtré.
CSRF : Détournement d’une session pour forcer une action non voulue.
Injection SQL : Insertion de requêtes malveillantes dans la base de données.
Monolithique : Application unique regroupant front et back.
Microservices : Application découpée en services indépendants communiquant via API.
Architecture API‑centrée : Le front consomme des données via des API dédiées.
Cloud : Services d’infrastructure/plateforme hébergés (AWS, Azure, GCP).
Nom de domaine : Adresse lisible (ex. monsite.com) pointant vers un serveur via DNS.

1. HTML - La structure

📋 HTML : Le squelette de votre page

HTML (HyperText Markup Language) est comme le plan architectural d'une maison :

🏠 Structure : Où placer les murs, portes, fenêtres
📍 Éléments : Chaque pièce a sa fonction (salon, cuisine, chambre)
🏷️ Balises : Les étiquettes qui définissent chaque élément
🔗 Liens : Les couloirs qui relient les pièces entre elles

🏗️ Structure de base d'un document HTML

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma première page</title> </head> <body> <h1>Bienvenue sur mon site !</h1> <p>Ceci est mon premier paragraphe.</p> <a href="https://example.com">Mon lien</a> </body> </html>

👀 Aperçu dans le navigateur :

Bienvenue sur mon site !

Ceci est mon premier paragraphe.

Mon lien

🏷️ Balises HTML essentielles

📝 Structure et contenu

              <h1> à <h6> - Titres

              <p> - Paragraphe

              <div> - Division générique

              <span> - Élément en ligne

              <ul><li> - Liste non ordonnée

              <ol><li> - Liste ordonnée

              <img> - Image

              <a> - Lien

🧭 Navigation et structure

              <header> - En-tête

              <nav> - Navigation

              <main> - Contenu principal

              <section> - Section

              <article> - Article

              <aside> - Contenu secondaire

              <footer> - Pied de page

💻 Simulateur HTML - Testez vos connaissances !

🎯 Exercice pratique : Modifiez le code HTML ci-dessous et voyez le résultat en temps réel !

2. CSS - Le style et la beauté

🎨 CSS : Le décorateur d'intérieur du web

CSS (Cascading Style Sheets) est comme décorer et aménager votre maison :

🎨 Couleurs : Peindre les murs dans vos couleurs préférées
📐 Dimensions : Définir la taille des meubles et leur disposition
✨ Effets : Ajouter des éclairages, des ombres, des textures
📱 Responsive : Adapter l'aménagement selon la taille de la pièce

🎨 Syntaxe CSS de base

index.html

styles.css

/* Sélecteur de balise */ h1 { color: #2196F3; font-size: 2.5rem; text-align: center; margin-bottom: 20px; } /* Sélecteur de classe */ .highlight { background-color: #ffeb3b; padding: 10px; border-radius: 5px; } /* Sélecteur d'ID */ #main-content { max-width: 800px; margin: 0 auto; padding: 20px; }

📦 Le modèle de boîte (Box Model)

📐 Anatomie d'un élément CSS

MARGIN (marge externe)
              BORDER (bordure)
                PADDING (marge interne)
                  
                    CONTENT
(contenu)
                  

🎛️ Propriétés CSS courantes

🎨 Couleurs et texte

              color: #333;

              background: #f0f0f0;

              font-family: Arial;

              font-size: 16px;

              text-align: center;

📐 Dimensions et espacement

              width: 100px;

              height: 50px;

              margin: 10px;

              padding: 15px;

              border: 1px solid #ddd;

📱 Mise en page

              display: flex;

              justify-content: center;

              align-items: center;

              position: relative;

              z-index: 1;

🎨 Simulateur CSS - Stylisez en direct !

✨ Atelier pratique : Modifiez le CSS et observez les changements sur le texte !

3. JavaScript - L'interactivité

⚡ JavaScript : Le magicien du web

JavaScript est comme le moteur d'une voiture :

🏎️ Vitesse : Rendre les pages web rapides et réactives
🔧 Fonctionnalités : Ajouter des fonctionnalités avancées (formulaires, jeux, animations)
📱 Mobile : Adapter les sites aux appareils mobiles
🌐 API : Communiquer avec d'autres services web

📚 Les bases de JavaScript

script.js

/* Afficher un message de bienvenue */ alert('Bienvenue sur mon site web !'); /* Changer le contenu d'un élément */ document.getElementById('mon-element').innerHTML = 'Bonjour le monde !'; /* Définir une fonction */ function maFonction() { console.log('La fonction a été exécutée !'); } /* Appeler une fonction */ maFonction();

🌐 Travailler avec le DOM

📑 Le Document Object Model (DOM)

DOCUMENT (le fichier HTML)
              ÉLÉMENTS (les balises HTML)
                ATTRIBUTS (les propriétés des balises)
                  
                    NŒUDS
(les points de connexion)
                  

🎮 Événements et interactions

script.js

/* Changer le texte d'un bouton au clic */ document.getElementById('mon-bouton').onclick = function() { this.innerHTML = 'Merci d\'avoir cliqué !'; }; /* Envoyer des données à un serveur */ fetch('https://api.example.com/donnees', { method: 'POST', body: JSON.stringify({ nom: 'John', age: 30 }), headers: { 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data));

⚡ Simulateur JavaScript - Codez et testez !

🚀 Laboratoire de code : Écrivez du JavaScript et voyez les résultats immédiatement !

4. PHP - Le serveur web dynamique

🐘 PHP : Le chef cuisinier du web

PHP (PHP: Hypertext Preprocessor) est comme un chef cuisinier dans un restaurant :

👨‍🍳 Côté serveur : Travaille dans la cuisine (serveur) invisible aux clients
📝 Commandes : Reçoit les commandes (requêtes) des clients (navigateurs)
🍽️ Préparation : Prépare les plats (pages web) selon la commande
🚚 Service : Livre le plat fini (HTML généré) au client
🗄️ Stockage : Accède aux ingrédients (base de données)

🚀 Pourquoi PHP est populaire ?

✅ Avantages de PHP

🆓 Gratuit : Open source et libre d'utilisation
📚 Facile : Syntaxe simple pour débuter
🌐 Universel : Fonctionne sur tous les serveurs
🗄️ Bases de données : Intégration native MySQL
🔧 Mature : Écosystème riche et stable

🎯 Utilisations courantes

🌍 Sites web dynamiques : Blogs, e-commerce
📊 Applications web : CRM, ERP, tableaux de bord
🔗 API REST : Services web et microservices
🎨 CMS populaires : WordPress, Drupal, Joomla
🛒 E-commerce : PrestaShop, Magento

💻 Syntaxe PHP de base

index.php

<?php // Ceci est un commentaire PHP echo "Bonjour le monde !"; // Variables (commencent par $) $nom = "Jean"; $age = 25; // Affichage de variables echo "Je m'appelle " . $nom . " et j'ai " . $age . " ans"; // Condition if ($age >= 18) { echo "Vous êtes majeur"; } else { echo "Vous êtes mineur"; } // Boucle for ($i = 1; $i <= 5; $i++) { echo "Compteur : " . $i . "<br>"; } ?>

🗄️ PHP et bases de données

🔄 Cycle de vie d'une requête PHP

1. CLIENT
Demande une page PHP

→

2. SERVEUR
Exécute le code PHP

→

3. BASE
Consulte les données

→

4. HTML
Génère la réponse

📝 Exemple pratique : Formulaire de contact

contact.php

<?php // Vérifier si le formulaire a été soumis if ($_POST['nom'] && $_POST['email']) { // Récupérer les données du formulaire $nom = $_POST['nom']; $email = $_POST['email']; $message = $_POST['message']; // Valider l'email if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // Envoyer l'email (simulation) $sujet = "Nouveau message de " . $nom; $contenu = "Email: " . $email . "\n\n" . $message; // mail('admin@monsite.com', $sujet, $contenu); echo "<div class='success'>Message envoyé avec succès !</div>"; } else { echo "<div class='error'>Email invalide !</div>"; } } ?> <form method="POST"> <input type="text" name="nom" placeholder="Votre nom" required> <input type="email" name="email" placeholder="Votre email" required> <textarea name="message" placeholder="Votre message"></textarea> <button type="submit">Envoyer</button> </form>

🐘 Simulateur PHP - Testez votre code !

⚡ Laboratoire PHP : Écrivez du code PHP et voyez le résultat !

Note : Ce simulateur est à des fins éducatives. Le vrai PHP s'exécute côté serveur.

5. CMS - Systèmes de Gestion de Contenu

🏗️ CMS : L'architecte de sites web

Un CMS (Content Management System) est comme un kit de construction de maison préfabriquée :

🧱 Fondations : Structure de base déjà construite
🎨 Décoration : Thèmes et templates prêts à utiliser
🔧 Extensions : Modules pour ajouter des fonctionnalités
👥 Multi-utilisateurs : Plusieurs personnes peuvent contribuer
📝 Interface simple : Pas besoin d'être développeur

🌟 Pourquoi utiliser un CMS ?

⚡ Rapidité

🚀 Installation rapide : Site prêt en minutes
📝 Création facile : Interface WYSIWYG
🎨 Thèmes prêts : Design professionnel
🔌 Plugins : Fonctionnalités en un clic

👥 Collaboration

🔐 Gestion utilisateurs : Rôles et permissions
✍️ Rédaction collaborative : Plusieurs auteurs
📊 Workflow : Validation avant publication
📱 Administration mobile : Gérer depuis partout

🔧 Maintenance

🛡️ Sécurité : Mises à jour automatiques
💾 Sauvegarde : Backup automatisé
📈 SEO intégré : Optimisation moteurs
📊 Analytics : Statistiques intégrées

🏆 CMS populaires comparés

🌐 WordPress (43% du web)

✅ Pour : Blogs, sites vitrine, e-commerce
🎨 Thèmes : Des milliers gratuits/premium
🔌 Plugins : 60 000+ extensions disponibles
👥 Communauté : Énorme support communautaire
💻 Hébergement : Compatible partout

🎯 Drupal (Avancé)

✅ Pour : Sites complexes, gouvernement
🔒 Sécurité : Très sécurisé par défaut
⚙️ Flexibilité : Très personnalisable
👨‍💻 Public : Développeurs expérimentés
🏢 Usage : Sites d'entreprise

🎨 Joomla (Équilibré)

✅ Pour : Sites communautaires, portails
👥 Multi-langues : Excellent support
🎭 Templates : Système de templates avancé
⚖️ Complexité : Entre WordPress et Drupal
🏪 E-commerce : VirtueMart intégré

🛒 Shopify/WooCommerce (E-commerce)

✅ Pour : Boutiques en ligne
💳 Paiements : Systèmes intégrés
📦 Gestion stock : Outils professionnels
📊 Analytics : Rapports de ventes
🚚 Livraison : Intégration transporteurs

🔄 Processus d'installation d'un CMS

📋 Étapes d'installation WordPress

1. 🏠 Hébergement - Choisir un hébergeur web (OVH, 1&1, SiteGround...)

2. 🌐 Domaine - Réserver un nom de domaine (monsite.com)

3. 📥 Téléchargement - Récupérer les fichiers WordPress depuis wordpress.org

4. 🗄️ Base de données - Créer une base MySQL via le panneau d'hébergement

5. ⚙️ Configuration - Lancer l'installeur web et suivre les étapes

6. 🎨 Personnalisation - Choisir thème, installer plugins, créer contenu

🎨 Interface d'administration CMS

👀 Tableau de bord WordPress typique :

📋 Menu

🏠 Tableau de bord
📝 Articles
📄 Pages
💬 Commentaires
🎨 Apparence
🔌 Extensions
👥 Utilisateurs
⚙️ Réglages

📊 Tableau de bord

📝 Articles
42

📄 Pages
8

📈 Activité récente
• Article "Mon nouveau post" publié
• Page "Contact" mise à jour
• Plugin "SEO" installé

6. Protocoles HTTP - Les fondations du web

🚚 HTTP : Le facteur du web

HTTP (HyperText Transfer Protocol) est comme le protocole de livraison :

📦 Requêtes : Demander un colis (ressource)
📬 Réponses : Recevoir le colis avec le contenu demandé
🔄 Échanges : Communication entre client et serveur
🔒 HTTPS : HTTP sécurisé (avec un cadenas)

📦 Les méthodes HTTP

🔍 Méthodes courantes

              GET - Récupérer des données

              POST - Envoyer des données

              PUT - Mettre à jour des données

              DELETE - Supprimer des données

⚙️ Méthodes avancées

              PATCH - Modifier partiellement des données

              OPTIONS - Options de communication

              HEAD - Obtenir les en-têtes seulement

              TRACE - Boucler le message reçu

🔄 Le cycle de vie d'une requête HTTP

🌐 De l'URL à la réponse

CLIENT (navigateur)
              REQUÊTE (demande de ressource)
                SERVEUR (hébergeur de la ressource)
                  
                    RÉPONSE
(ressource demandée)
                  

7. Architectures - Les structures du web

🏗️ Architectures web : Les fondations

Une architecture web est comme le plan d'un bâtiment :

🏢 Monolithique : Tout en un (front et back ensemble)
🏗️ Modulaire : Séparé en modules (microservices)
🌐 API-Centrée : Communication par API
☁️ Cloud : Hébergement dans le cloud (AWS, Azure)

🏢 Architecture monolithique

monolithique.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Monolithique</title> </head> <body> <h1>Architecture Monolithique</h1> <p>Tout le code (HTML, CSS, JS) est dans un seul fichier.</p> </body> </html>

🏗️ Architecture modulaire

modulaire.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Modulaire</title> </head> <body> <h1>Architecture Modulaire</h1> <p>Le code est séparé en plusieurs fichiers/modules.</p> <script src="module1.js"></script> <link rel="stylesheet" href="styles.css"> </body> </html>

🌐 Architecture API-Centrée

api-centree.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>API-Centrée</title> </head> <body> <h1>Architecture API-Centrée</h1> <p>Le front-end communique avec le back-end par API.</p> <script> fetch('https://api.example.com/donnees') .then(response => response.json()) .then(data => console.log(data)); </script> </body> </html>

8. Sécurité Web - Protéger vos applications

🔒 Sécurité Web : Les clés de la protection

La sécurité web est comme fermer à clé sa maison :

🔑 Authentification : Vérifier l'identité (login, mot de passe)
🛡️ Autorisation : Contrôler l'accès (qui peut voir quoi)
🔄 Chiffrement : Cacher les données (SSL/TLS)
🚫 Protection contre les attaques : XSS, CSRF, SQLi, etc.

🔑 Authentification et autorisation

auth.js

/* Exemple d'authentification simple */ const utilisateur = { nom: 'John', motdepasse: '1234' }; /* Fonction de connexion */ function seConnecter(nom, motdepasse) { if(nom === utilisateur.nom && motdepasse === utilisateur.motdepasse) { alert('Connexion réussie !'); } else { alert('Nom ou mot de passe incorrect.'); } } /* Appel de la fonction de connexion */ seConnecter('John', '1234');

🛡️ Chiffrement des données

crypto.js

/* Exemple de chiffrement avec CryptoJS */ const motdepasse = '1234'; const motdepasseCrypte = CryptoJS.SHA256(motdepasse).toString(); /* Vérification du mot de passe */ function verifierMotDePasse(motdepasseSaisi) { const hashSaisi = CryptoJS.SHA256(motdepasseSaisi).toString(); return hashSaisi === motdepasseCrypte; } /* Appel de la fonction de vérification */ verifierMotDePasse('1234');

9. Outils du développeur web

🛠️ Outils essentiels : Équiper votre boîte à outils

Les outils du développeur web sont comme les outils d'un artisan :

🔍 Éditeurs de code : Écrire et modifier le code (VSCode, Sublime)
🧪 Navigateurs : Tester et déboguer les sites (Chrome, Firefox)
📦 Gestionnaires de paquets : Gérer les bibliothèques et dépendances (npm, yarn)
☁️ Services cloud : Héberger et déployer des applications (Heroku, Netlify)

🔍 Éditeurs de code

vscode.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Éditeur de code</title> </head> <body> <h1>Visual Studio Code</h1> <p>Un éditeur de code source puissant et gratuit.</p> <a href="https://code.visualstudio.com">Télécharger VSCode</a> </body> </html>

🧪 Navigateurs

chrome.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Navigateurs</title> </head> <body> <h1>Google Chrome</h1> <p>Un navigateur rapide et gratuit.</p> <a href="https://www.google.com/chrome">Télécharger Chrome</a> </body> </html>

💡 Astuce

L’éditeur de code (ex. VSCode) est l’outil principal pour écrire et organiser vos fichiers. Le navigateur sert à tester et déboguer, le gestionnaire de paquets à installer des bibliothèques, et les services cloud à héberger/déployer.

📚 Ressources complémentaires

🎓 Pour aller plus loin dans votre apprentissage

Découvrez une sélection de ressources qualitatives pour approfondir vos connaissances en développement web :

📖 Documentation officielle

MDN Web Docs - La référence Mozilla pour HTML, CSS, JavaScript
W3Schools - Tutoriels et exemples pratiques
Can I Use - Compatibilité des fonctionnalités web
CSS-Tricks - Astuces et guides CSS avancés

🛠️ Outils pratiques

CodePen - Éditeur de code en ligne pour tester
JSFiddle - Playground JavaScript
XAMPP - Serveur local Apache/PHP/MySQL
WordPress.org - Télécharger WordPress
GitHub - Hébergement et versioning de code
Netlify - Déploiement de sites statiques

🚀 Frameworks populaires

React - Bibliothèque JavaScript pour UI
Vue.js - Framework progressif
Angular - Framework complet
Laravel - Framework PHP moderne
Symphony - Framework PHP professionnel
Bootstrap - Framework CSS responsive

🏗️ CMS et plateformes

WordPress - CMS le plus populaire
Drupal - CMS entreprise sécurisé
Joomla - CMS équilibré et flexible
Shopify - Plateforme e-commerce
WooCommerce - E-commerce sur WordPress
Ghost - CMS orienté blog moderne

🎯 Prochaines étapes

Projets pratiques - Créez votre portfolio
Serveur local - Installez XAMPP/MAMP
Premier CMS - Testez WordPress localement
PHP avancé - Objets, MVC, frameworks
Responsive design - Adaptez aux mobiles
Accessibilité - Rendez vos sites inclusifs
Performance - Optimisez la vitesse

💡 Conseils pour continuer votre apprentissage ▼

                           🎯 Méthodologie d'apprentissage efficace
              🏗️ Pratiquez régulièrement : Codez un peu chaque jour, même 15 minutes
📱 Créez des projets : Partez de vos idées et réalisez-les
👥 Rejoignez une communauté : Forums, Discord, meetups locaux
📚 Diversifiez vos sources : Livres, vidéos, podcasts, formations
🔧 Expérimentez : Testez de nouvelles technologies régulièrement
🐛 Déboguez avec méthode : Apprenez à lire et corriger les erreurs
🤝 Partagez vos créations : GitHub, portfolio, réseaux sociaux

            

Les bases du web

🧭 Sommaire de la formation