Introduction au développement web

Les fondations du web

Chaque site web ou application que vous utilisez est comme une maison numérique. Certains sont de simples cabanes, d'autres des manoirs complexes. Mais tous partagent les mêmes principes de construction. Comprendre ces principes est la première étape pour devenir un développeur web.

Le développement web se divise en deux grands domaines : le front-end et le back-end. Pensez-y comme la différence entre ce que vous voyez et ce qui se passe en coulisses.

Front-end et back-end

Le front-end est la partie visible de la maison : les murs, la couleur de la peinture, les fenêtres, le mobilier. C'est tout ce avec quoi vous interagissez directement dans votre navigateur. On l'appelle aussi le "côté client", car c'est ce que le client (vous) voit et utilise.

Le back-end est la plomberie, le câblage électrique et les fondations de la maison. C'est invisible, mais essentiel pour que tout fonctionne. Il comprend le serveur qui héberge le site, la base de données qui stocke les informations (comme les profils utilisateurs ou les produits) et la logique qui traite vos demandes. On l'appelle le "côté serveur".

Les langages de base

Pour construire la partie front-end d'un site web, trois langages sont incontournables. Ils travaillent ensemble pour créer tout ce que vous voyez et expérimentez en ligne.

HTML (HyperText Markup Language) : C'est le squelette de la page. Il définit la structure et le contenu : les titres, les paragraphes, les images, les liens.

<!DOCTYPE html>
<html>
<head>
    <title>Ma page web</title>
</head>
<body>
    <h1>Bonjour le monde !</h1>
    <p>Ceci est mon premier site.</p>
</body>
</html>

CSS (Cascading Style Sheets) : Ce sont les vêtements et la décoration. Le CSS est utilisé pour styliser le contenu HTML, en gérant les couleurs, les polices, la mise en page et le design général.

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #555;
    font-size: 16px;
}

JavaScript (JS) : C'est ce qui rend la page interactive. Si le HTML est le squelette et le CSS l'apparence, JavaScript est le système nerveux. Il permet de créer des animations, de valider des formulaires, de charger du contenu sans recharger la page, et bien plus encore.

// Ce code affiche une boîte de dialogue lorsque la page se charge
alert("Bienvenue sur mon site !");

Comment ça marche ?

Le fonctionnement d'une application web repose sur un dialogue simple entre votre navigateur (le client) et un ordinateur distant (le serveur).

La requête : Vous tapez une adresse web (comme www.exemple.com) dans votre navigateur et appuyez sur Entrée. Votre navigateur envoie alors une demande, appelée requête HTTP, via Internet à l'ordinateur où le site est stocké (le serveur).
Le traitement : Le serveur reçoit la requête. Il trouve les fichiers nécessaires (HTML, CSS, JavaScript) et prépare une réponse.
La réponse : Le serveur renvoie ces fichiers à votre navigateur.
L'affichage : Votre navigateur reçoit les fichiers. Il lit le code HTML pour construire la structure, applique le CSS pour le style, et exécute le JavaScript pour l'interactivité. Le résultat est la page web que vous voyez à l'écran.

Ce cycle de requête-réponse se produit chaque fois que vous cliquez sur un lien ou interagissez avec une page web. C'est la conversation fondamentale qui alimente l'ensemble du web.

Quiz Questions 1/5

Dans l'analogie de la maison numérique, à quoi correspond le back-end d'un site web ?

Quiz Questions 2/5

Quelle partie d'une application web est principalement responsable du stockage des informations, comme les profils utilisateurs ?

Vous avez maintenant une vue d'ensemble du fonctionnement du web. La prochaine étape consiste à apprendre à écrire ces langages pour commencer à construire vos propres projets.

Créez Votre Première Application Web