Le Web : HTML, CSS et fonctionnement

🎯 Objectifs pédagogiques

À la fin de cette leçon, vous saurez :

• Décrire l'architecture technique du Web et le rôle de ses trois piliers fondamentaux (URL, HTTP, HTML) dans le fonctionnement des pages web conformément aux standards du Référentiel ITAG.
• Maîtriser la syntaxe HTML5 et identifier les principales balises de structuration d'une page web (titres, paragraphes, liens, images, tableaux, formulaires).
• Appliquer les règles CSS pour séparer la mise en forme du contenu et créer des mises en page responsives adaptées aux différents écrans.
• Comprendre le rôle de JavaScript dans l'ajout d'interactivité aux pages web et les principes de manipulation du DOM.
• Analyser les enjeux du référencement SEO, de l'accessibilité numérique et de la protection des données personnelles (RGPD) dans la conception web moderne.

📖 Introduction & contexte officiel

Le World Wide Web, communément appelé « le Web », représente l'une des applications les plus emblématiques et les plus utilisées d'Internet. Inventé en 1989 par Tim Berners-Lee au CERN, le Web a révolutionné notre manière d'accéder à l'information, de communiquer et de collaborer à l'échelle mondiale. Contrairement à une idée reçue, le Web n'est pas synonyme d'Internet : il s'agit d'un service applicatif fonctionnant au-dessus de l'infrastructure Internet, aux côtés d'autres services comme le courrier électronique, le transfert de fichiers (FTP) ou la messagerie instantanée.

Selon le Référentiel ITAG (préparation indépendante), la compréhension du fonctionnement technique du Web constitue un socle de compétences essentielles pour tout citoyen numérique du XXIe siècle. Le programme de formation ITAG met l'accent sur trois dimensions complémentaires : la maîtrise des langages de structuration et de présentation (HTML et CSS), la compréhension des protocoles de communication client-serveur, et l'intégration des bonnes pratiques en matière d'accessibilité et de respect de la vie privée. Ces compétences sont évaluées dans le cadre de l'Évaluation interne ITAG (QCM, exercices appliqués, projet pratique), qui mesure à la fois les connaissances théoriques et les capacités d'application concrète.

Cette leçon s'inscrit dans un parcours pédagogique cohérent où vous avez précédemment exploré l'architecture d'Internet (TCP/IP, routage). Nous allons maintenant nous concentrer sur la couche applicative du Web, en détaillant les mécanismes qui permettent à votre navigateur d'afficher des pages enrichies, interactives et accessibles. Les standards W3C (World Wide Web Consortium) constituent la référence normative internationale pour les technologies web, et leur respect garantit l'interopérabilité et la pérennité des contenus créés.

📚 Concepts clés détaillés

Les trois piliers fondamentaux du Web

URL (Uniform Resource Locator) : L'URL représente l'adresse unique d'une ressource sur le Web. Sa structure normalisée comprend plusieurs composants : le protocole (http:// ou https://), le nom de domaine (www.exemple.fr), le chemin vers la ressource (/dossier/page.html), et éventuellement des paramètres (?id=123) et une ancre (#section). Par exemple, dans l'URL https://itag-cm.com/formations/snt?niveau=seconde#web, on identifie le protocole sécurisé (https), le domaine (itag-cm.com), le chemin (/formations/snt), un paramètre de requête (niveau=seconde) et une ancre vers une section spécifique (#web).

HTTP/HTTPS (HyperText Transfer Protocol) : Ce protocole de communication définit les règles d'échange entre un client (généralement un navigateur) et un serveur web. Le client envoie une requête HTTP contenant une méthode (GET pour récupérer une ressource, POST pour envoyer des données), des en-têtes (headers) précisant les caractéristiques de la requête, et éventuellement un corps (body) avec des données. Le serveur répond avec un code de statut (200 pour succès, 404 pour ressource introuvable, 500 pour erreur serveur), des en-têtes de réponse et le contenu demandé. La version sécurisée HTTPS chiffre ces échanges grâce au protocole TLS/SSL, garantissant la confidentialité et l'intégrité des données transmises.

HTML (HyperText Markup Language) : Langage de balisage permettant de structurer le contenu d'une page web en utilisant des balises (tags). Chaque balise définit la nature sémantique d'un élément : <h1> pour un titre principal, <p> pour un paragraphe, <a> pour un lien hypertexte. L'ensemble des éléments HTML forme une structure arborescente appelée DOM (Document Object Model), qui peut être manipulée dynamiquement par JavaScript.

Le langage HTML5 : structure et sémantique

HTML5, standardisé en 2014, représente la version moderne du langage HTML. Il introduit de nouvelles balises sémantiques qui enrichissent la description du contenu et améliorent l'accessibilité et le référencement. Les balises structurantes principales incluent :

HTML5 a également introduit des balises multimédias natives (<audio>, <video>, <canvas>) qui permettent d'intégrer des contenus riches sans recourir à des plugins externes comme Flash. L'API de géolocalisation, les formulaires enrichis avec validation native, et le stockage local (localStorage, sessionStorage) complètent les capacités du HTML5 moderne.

CSS : la séparation forme et contenu

CSS fonctionne selon un système de sélecteurs et de propriétés. Un sélecteur identifie les éléments HTML à styliser, tandis que les propriétés définissent leur apparence. Les trois types principaux de sélecteurs sont :

• Sélecteur de balise : cible tous les éléments d'un type donné (h1 { color: blue; } applique la couleur bleue à tous les titres de niveau 1)
• Sélecteur de classe : cible les éléments ayant un attribut class spécifique (.important { font-weight: bold; } met en gras tous les éléments de classe "important")
• Sélecteur d'identifiant : cible un élément unique ayant un attribut id (#menu-principal { background: #333; })

Le modèle de boîte CSS (box model) définit comment chaque élément occupe l'espace : le contenu (content) est entouré d'un rembourrage interne (padding), d'une bordure (border) et d'une marge externe (margin). La compréhension de ce modèle est essentielle pour maîtriser la mise en page.

Les techniques modernes de mise en page incluent Flexbox (pour les dispositions unidimensionnelles, en ligne ou en colonne) et CSS Grid (pour les mises en page bidimensionnelles complexes). Le responsive design utilise les media queries pour adapter l'affichage selon les caractéristiques de l'appareil, typiquement la largeur d'écran :

@media screen and (max-width: 768px) {
    .colonne { width: 100%; }
}

JavaScript et le modèle DOM

JavaScript est le langage de programmation du Web côté client. Il permet d'ajouter de l'interactivité aux pages en réagissant aux événements utilisateur (clics, saisies, défilements) et en modifiant dynamiquement le contenu et l'apparence des pages via l'API DOM. Le DOM (Document Object Model) représente la structure de la page HTML comme un arbre d'objets que JavaScript peut manipuler :

// Sélectionner un élément et modifier son contenu
document.getElementById('titre').textContent = 'Nouveau titre';

// Ajouter un gestionnaire d'événement
document.querySelector('.bouton').addEventListener('click', function() {
    alert('Bouton cliqué !');
});

Les requêtes asynchrones (AJAX, Fetch API) permettent de charger des données depuis un serveur sans recharger la page entière, créant ainsi des applications web fluides et réactives. Les frameworks modernes (React, Vue.js, Angular) structurent le développement d'applications complexes en composants réutilisables et proposent une gestion efficace de l'état de l'application.

Référencement et optimisation SEO

Le référencement naturel (SEO - Search Engine Optimization) désigne l'ensemble des techniques visant à améliorer la visibilité d'un site dans les résultats des moteurs de recherche. Les facteurs SEO on-page incluent :

• Balises méta : <title> (titre de la page affiché dans les résultats), <meta name="description"> (description courte incitant au clic)
• Structure hiérarchique : utilisation cohérente des titres <h1> à <h6> pour organiser le contenu
• Balisage sémantique : emploi des balises HTML5 appropriées (<article>, <nav>, etc.)
• Attribut alt des images : description textuelle des images pour l'accessibilité et le référencement
• URL parlantes : adresses explicites et descriptives plutôt que des identifiants cryptiques
• Temps de chargement : optimisation des ressources (compression images, minification CSS/JS) pour accélérer l'affichage

Les données structurées (schema.org) permettent d'enrichir les résultats de recherche avec des informations formatées (étoiles d'avis, prix, disponibilité, etc.), améliorant le taux de clic.

Accessibilité numérique et RGAA

Les principes fondamentaux de l'accessibilité web (WCAG) sont :

1. Perceptible : l'information doit être présentée de manière à être perçue par tous (alternatives textuelles aux images, sous-titres vidéo, contrastes suffisants)
2. Utilisable : toutes les fonctionnalités doivent être accessibles au clavier, les utilisateurs doivent disposer de temps suffisant pour lire et interagir
3. Compréhensible : le contenu et le fonctionnement doivent être compréhensibles (langue déclarée, messages d'erreur clairs)
4. Robuste : le contenu doit être compatible avec les technologies d'assistance (lecteurs d'écran, plages braille)

Concrètement, cela implique d'utiliser l'attribut alt pour toutes les images informatives, de garantir un ratio de contraste minimal de 4,5:1 entre texte et arrière-plan, de permettre la navigation complète au clavier, et de structurer logiquement les formulaires avec des étiquettes (<label>) associées aux champs de saisie.

💡 Exemples pratiques résolus

Exemple 1 : Création d'une page HTML5 sémantique

Résolution pas-à-pas :

Étape 1 : Définir la structure globale avec les balises sémantiques HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Les fondamentaux du Web - Blog ITAG</title>
    <meta name="description" content="Découvrez les technologies HTML, CSS et JavaScript qui constituent les piliers du Web moderne.">
</head>
<body>

Étape 2 : Structurer l'en-tête avec navigation

    <header>
        <h1>Blog ITAG - Sciences Numériques</h1>
        <nav>
            <ul>
                <li><a href="/">Accueil</a></li>
                <li><a href="/articles">Articles</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

Étape 3 : Créer le contenu principal dans une balise <main> avec un <article>

    <main>
        <article>
            <header>
                <h1>Les fondamentaux du Web</h1>
                <p class="chapeau">Le Web repose sur trois technologies complémentaires qui permettent de créer, styliser et rendre interactives les pages consultées par des milliards d'utilisateurs quotidiennement.</p>
            </header>
            
            <section>
                <h2>HTML : la structure</h2>
                <p>Le langage HTML permet de définir la structure sémantique du contenu...</p>
            </section>
            
            <section>
                <h2>CSS : la présentation</h2>
                <p>Les feuilles de style en cascade assurent la mise en forme visuelle...</p>
            </section>
        </article>
    </main>

Étape 4 : Ajouter la barre latérale avec <aside>

    <aside>
        <h2>Articles recommandés</h2>
        <ul>
            <li><a href="/article-1">Architecture TCP/IP</a></li>
            <li><a href="/article-2">JavaScript moderne</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>© 2024 ITAG - Tous droits réservés</p>
    </footer>
</body>
</html>

Points d'attention : La balise <main> ne doit apparaître qu'une seule fois par page. L'attribut lang="fr" dans la balise <html> est essentiel pour l'accessibilité. Le <meta name="description"> améliore le référencement en fournissant un résumé explicite aux moteurs de recherche.

Exemple 2 : Mise en page responsive avec CSS

Résolution :

Étape 1 : Définir le conteneur Flexbox et les styles par défaut (mobile first)

.conteneur {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.colonne {
    flex: 1 1 100%; /* Par défaut : 100% de largeur (mobile) */
    min-width: 0;
    background: #f3f4f6;
    padding: 15px;
    border-radius: 8px;
}

Étape 2 : Ajouter les media queries pour tablettes

@media screen and (min-width: 768px) {
    .colonne {
        flex: 1 1 calc(50% - 10px); /* Deux colonnes avec espacement */
    }
}

Étape 3 : Ajouter les media queries pour écrans larges

@media screen and (min-width: 992px) {
    .colonne {
        flex: 1 1 calc(33.333% - 14px); /* Trois colonnes */
    }
}

Explication technique : L'approche "mobile first" consiste à définir d'abord les styles pour petits écrans, puis à enrichir progressivement pour les écrans plus grands. La propriété flex: 1 1 100% signifie : facteur de croissance 1, facteur de rétrécissement 1, base de 100%. La fonction calc() permet de soustraire l'espace créé par le gap pour obtenir un alignement parfait. Cette approche garantit une expérience utilisateur optimale sur tous les appareils, conformément aux bonnes pratiques ITAG.

Exemple 3 : Formulaire accessible avec validation

Résolution complète :

<form action="/contact" method="POST" novalidate>
    <fieldset>
        <legend>Formulaire de contact</legend>
        
        <div class="champ">
            <label for="nom">Nom complet *</label>
            <input 
                type="text" 
                id="nom" 
                name="nom" 
                required 
                aria-required="true"
                aria-describedby="nom-aide"
            >
            <small id="nom-aide">Entrez votre nom et prénom</small>
        </div>
        
        <div class="champ">
            <label for="email">Adresse e-mail *</label>
            <input 
                type="email" 
                id="email" 
                name="email" 
                required 
                aria-required="true"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                aria-describedby="email-aide"
            >
            <small id="email-aide">Format : exemple@domaine.fr</small>
        </div>
        
        <div class="champ">
            <label for="message">Message *</label>
            <textarea 
                id="message" 
                name="message" 
                rows="5" 
                required 
                aria-required="true"
                minlength="10"
                aria-describedby="message-aide"
            ></textarea>
            <small id="message-aide">Minimum 10 caractères</small>
        </div>
        
        <button type="submit">Envoyer le message</button>
    </fieldset>
</form>

Points clés d'accessibilité : Chaque <input> est associé à un <label> via l'attribut for qui référence l'id du champ. Les attributs ARIA (aria-required, aria-describedby) renforcent l'accessibilité pour les lecteurs d'écran. L'attribut pattern définit une validation par expression régulière. Le regroupement dans un <fieldset> avec <legend> structure logiquement le formulaire. Tous ces éléments sont testables dans l'Évaluation interne ITAG.

⚠️ Pièges fréquents & astuces

• Confusion entre Internet et Web : Internet est l'infrastructure réseau globale, tandis que le Web est une application fonctionnant sur Internet. Ne jamais utiliser ces termes de manière interchangeable dans vos réponses d'examen.