Introduction à la programmation Web

Objectifs pédagogiques

À l'issue de ce chapitre, l'étudiant sera capable de :

• Distinguer l'infrastructure réseau Internet des services applicatifs, notamment le Web.
• Analyser le cycle de vie d'une requête HTTP/HTTPS et comprendre l'architecture client–serveur.
• Décomposer une URL et expliquer le rôle du DNS.
• Identifier le rôle de HTML, CSS et JavaScript.
• Rédiger un document HTML5 valide, structuré et sémantique.
• Manipuler les balises fondamentales, les attributs id et class, ainsi que les formulaires.

Partie 0 — Pourquoi apprendre le Web à l'ère de l'Intelligence Artificielle ?

Question légitime : « Pourquoi apprendre à coder quand l'IA peut générer du code plus vite ? »

Les assistants d'IA sont d'excellents outils de génération et d'aide au développement. Mais générer du code n'est pas la même chose que comprendre, valider, sécuriser et faire évoluer une application.

1. L'illusion du « clic magique »

2. Le pilote et le copilote

Pour exploiter correctement une IA, le développeur doit comprendre le problème et le code produit.

• Prompt précis : utiliser le vocabulaire technique approprié — Flexbox, Grid, DOM, événements, attributs sémantiques...
• Audit : lire et comprendre le résultat généré.
• Débogage : identifier et corriger les erreurs.
• Optimisation : améliorer performance, sécurité, accessibilité et maintenabilité.

3. Le développeur devient architecte

4. IA vs maîtrise humaine

Partie 1 — Qu'est-ce que le Web ?

Le World Wide Web (WWW) est un système hypertexte public fonctionnant sur Internet. Il permet de consulter des ressources à l'aide d'un navigateur.

Autres services utilisant Internet

Partie 2 — Le protocole HTTP / HTTPS

HTTP (HyperText Transfer Protocol) est un protocole de la couche application utilisé pour les échanges entre clients et serveurs Web.

HTTP est fondamentalement stateless : chaque requête/réponse est indépendante. Des mécanismes comme les cookies et les sessions permettent ensuite de conserver un état applicatif.

HTTP vs HTTPS

Méthodes HTTP principales

Exemple : une requête HTTP

GET /index.html HTTP/1.1
Host: www.exemple.com
Accept: text/html
User-Agent: Mozilla/5.0

HTTP/1.1 200 OK
Content-Type: text/html

<!doctype html>
<html>...</html>

Partie 3 — Architecture Client / Serveur

Partie 4 — Anatomie d'une URL et cycle de vie d'une requête

Décomposition d'une URL

Les 6 étapes du cycle de vie

1. Saisie & DNS : le navigateur transforme le nom de domaine en adresse IP.
2. Connexion : connexion TCP ; en HTTPS, négociation TLS.
3. Requête HTTP : méthode, URL, en-têtes, cookies éventuels, etc.
4. Traitement serveur : logique métier, accès aux données et préparation de la réponse.
5. Réponse HTTP : code de statut, en-têtes et corps de réponse.
6. Rendu : le navigateur analyse le HTML, construit le DOM et charge CSS, JavaScript et images.

Partie 5 — Les trois piliers du Web moderne

<button id="btn">Cliquez-moi</button>

<style>
  button { padding: 10px; }
</style>

<script>
  document.querySelector("#btn")
    .addEventListener("click", () => {
      alert("Bonjour !");
    });
</script>

Partie 6 — Introduction au langage HTML

HTML (HyperText Markup Language) est un langage de balisage, et non un langage de programmation.

Partie 7 — Balises, éléments et attributs HTML

Structure générale

<p class="important">
  Bonjour le Web !
</p>

Un élément HTML standard peut être composé d'une balise ouvrante, d'un contenu et d'une balise fermante.

Balises vides (void elements)

Certaines balises ne contiennent pas de contenu et n'ont pas de balise fermante.

<img src="photo.jpg" alt="Photo de profil">
<br>
<hr>
<input type="text" name="nom">

Les attributs

Les attributs fournissent des informations supplémentaires. Ils sont placés dans la balise ouvrante sous la forme nom="valeur".

<a href="https://example.com"
   target="_blank">
  Visiter le site
</a>

Attributs universels importants

Balises HTML fréquemment utilisées

Partie 8 — Le squelette standard d'un document HTML5

Voici une structure minimale moderne pour démarrer une page HTML5.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Mon premier document HTML5</title>
</head>
<body>
  <h1>Bienvenue sur mon premier document HTML5</h1>
  <p>Ceci est un paragraphe de démonstration.</p>
</body>
</html>

Explication des éléments

HTML sémantique

<header>
  <h1>Portail d'apprentissage du Web</h1>
</header>

<main>
  <section>
    <h2>Introduction à HTML5</h2>
    <p>HTML5 structure le Web moderne.</p>
  </section>
</main>

<footer>
  © 2026 — Tous droits réservés.
</footer>

Partie 9 — Formulaires HTML

Un formulaire permet de recueillir des informations saisies par l'utilisateur.

<form>
  <label for="nom">Nom :</label>
  <input id="nom" name="nom" type="text">

  <label for="email">E-mail :</label>
  <input id="email" name="email" type="email">

  <label for="message">Message :</label>
  <textarea id="message"
            name="message"></textarea>

  <button type="submit">Envoyer</button>
</form>

Types d'input courants

Partie 10 — Synthèse globale

Partie 11 — TP : Création d'un CV en ligne

Objectif : créer une première page Web personnelle valide en HTML5, accessible et sémantique.

Consignes

1. Créer le dossier : TP1_Web, puis créer le fichier index.html.
2. Créer le squelette : utiliser HTML5, lang="fr" et UTF-8.
3. En-tête : ajouter un <h1> avec votre prénom et nom, une image avec un attribut alt pertinent et un paragraphe de présentation.
4. Expériences : créer une section avec une liste non ordonnée et mettre les intitulés importants en évidence.
5. Formations : créer une section contenant un tableau avec les colonnes Année, Diplôme et Établissement.
6. Contact : créer un formulaire avec un champ nom, un champ e-mail, une zone de texte et un bouton d'envoi.
7. Pied de page : ajouter un lien vers LinkedIn ou GitHub avec target="_blank" et une mention de droits d'auteur.
8. Validation : valider le document avec le validateur HTML du W3C et corriger les éventuelles erreurs.

Structure attendue

<body>
  <header>
    <h1>Prénom NOM</h1>
    <img src="photo.jpg" alt="Photo de Prénom NOM">
    <p>Présentation...</p>
  </header>

  <main>
    <section>
      <h2>Expériences</h2>
      <ul>...</ul>
    </section>

    <section>
      <h2>Formations</h2>
      <table>...</table>
    </section>

    <section>
      <h2>Contact</h2>
      <form>...</form>
    </section>
  </main>

  <footer>...</footer>
</body>

À retenir