Designing simple Web Pages

# Designing simple Web Pages ## Objectifs et prérequis **Objectifs** : À la fin de ce chapitre, l'élève sera capable de : - Expliquer les concepts fondamentaux de la technologie web, y compris l'Internet, les services en ligne et la littératie informationnelle. - Décrire le rôle et la structure de base d'HTML dans la création de pages web. - Écrire du code HTML valide pour structurer du contenu texte, des listes, des liens et des images. - Appliquer les principes de base du CSS pour styliser des éléments HTML (couleur, police, alignement). - Intégrer HTML et CSS dans une activité pratique pour créer une page web simple et fonctionnelle. - Évaluer la crédibilité et la pertinence des informations trouvées en ligne. **Prérequis** : Connaissances de base en utilisation d'un ordinateur (système d'exploitation, navigateur web, traitement de texte), compréhension de base de ce qu'est un fichier et un dossier, capacité à suivre des instructions étape par étape. --- ## Introduction La technologie web constitue aujourd'hui l'une des colonnes vertébrales de la communication, de l'éducation et du commerce mondial. Comprendre comment les pages web sont conçues, structurées et stylisées est essentiel non seulement pour les futurs informaticiens, mais aussi pour tout citoyen numérique actif. Ce chapitre introduit les élèves aux fondements techniques du web : de la manière dont l'Internet fonctionne jusqu'à la création pratique d'une page web utilisant HTML et CSS. L'approche est progressive, commençant par les concepts théoriques nécessaires à la littératie numérique, puis passant à la mise en œuvre concrète à travers des exercices guidés. Chaque leçon s'appuie sur la précédente, assurant une construction cohérente des connaissances et des compétences. --- ## I. Introduction to Web technology, Internet Connectivity, Online Services and Information Literacy ### Définitions clés > **Internet** : Un réseau mondial de réseaux informatiques interconnectés qui utilisent le protocole TCP/IP pour échanger des données. > > **Service en ligne** : Toute application ou ressource accessible via Internet qui fournit une fonction spécifique à l'utilisateur (ex. : courrier électronique, recherche, réseaux sociaux). > > **Littératie informationnelle** : La capacité à reconnaître quand de l'information est nécessaire, à la localiser, à l'évaluer, à l'utiliser efficacement et à la communiquer de manière éthique. ### Fonctionnement de base de l'Internet L'Internet repose sur une architecture client-serveur. Lorsqu'un utilisateur saisit une adresse web (URL) dans un navigateur, ce dernier envoie une requête au serveur hébergeant le contenu demandé. Le serveur répond en transmettant les fichiers nécessaires (HTML, CSS, images, etc.) qui sont ensuite interprétés et affichés par le navigateur. Cette communication utilise des protocoles standardisés comme HTTP (HyperText Transfer Protocol) pour le transfert de données et DNS (Domain Name System) pour traduire les noms de domaine en adresses IP. ### Types de services en ligne Les services en ligne peuvent être catégorisés selon leur fonction : - **Communication** : Courrier électronique (email), messagerie instantanée, visioconférence. - **Recherche et récupération d'information** : Moteurs de recherche (ex. : Google, Bing), encyclopédies en ligne. - **Commerce électronique** : Boutiques en ligne, plateformes de paiement. - **Divertissement** : Services de streaming vidéo/audio, jeux en ligne. - **Éducation** : Plateformes d'apprentissage en ligne (ex. : Moodle, Khan Academy), bibliothèques numériques. ### Littératie informationnelle : étapes clés Pour évaluer l'information trouvée en ligne, suivre ces étapes : 1. **Identifier le besoin** : Quelle question essaie-t-on de répondre ? 2. **Localiser les sources** : Utiliser des mots-clés pertinents dans un moteur de recherche ou consulter des sites connus. 3. **Évaluer la crédibilité** : Vérifier l'auteur, la date de publication, la source (domaine .edu, .gov, .org sont souvent plus fiables que .com pour certains sujets), la présence de références. 4. **Croiser les informations** : Confronter les données avec d'autres sources fiables. 5. **Utiliser de manière éthique** : Citer les sources, éviter le plagiat, respecter les droits d'auteur. > **Règle d'or de la littératie informationnelle** : Si une information semble trop belle pour être vraie, ou si elle provient d'une source inconnue sans vérification possible, traiter-la avec scepticisme. ### Exercices d'application corrigés **Exercice 1** : Un élève cherche des informations sur le changement climatique pour un exposé. Il trouve deux sites : un avec une adresse se terminant par .edu et signé par des professeurs d'une université reconnue, et un autre avec une adresse .com qui affirme que le changement climatique est un canular, sans auteur identifiable ni références. Lequel devrait-il privilégier et pourquoi ? *Corrigé* : L'élève devrait privilégier le site .edu. Il provient d'une institution éducative reconnue, les auteurs sont identifiés et qualifiés, et il est plus probable qu'il contienne des informations basées sur des preuves scientifiques. Le site .com manque de transparence sur ses sources et son auteur, ce qui réduit sa crédibilité, surtout lorsqu'il contredit le consensus scientifique établi. **Exercice 2** : Lors d'une recherche sur les bienfaits du miel, un élève tombe sur un article affirmant qu'il guérit le cancer. Que devrait-il faire avant de partager cette information ? *Corrigé* : Il devrait chercher des confirmation dans des sources fiables comme des sites médicaux gouvernementaux (.gov), des revues scientifiques peer-reviewed, ou des organisations de santé reconnues (OMS, CDC). Un seul article faisant une telle affirmation extraordinaire nécessite une vérification rigoureuse avant d'être considéré comme vrai ou partagé. --- ## II. Introduction to HTML 1 ### Définition et rôle d'HTML > **HTML (HyperText Markup Language)** : Langage de balisage standard utilisé pour créer la structure et le contenu de base des pages web. Il utilise des balises pour définir des éléments comme les titres, paragraphes, listes, liens et images. HTML ne définit pas l'apparence visuelle (c'est le rôle du CSS), mais la signification sémantique du contenu. Un navigateur lit le code HTML et construit une arborescence appelée DOM (Document Object Model) pour afficher la page. ### Structure de base d'un document HTML Tout document HTML commence par une déclaration `<!DOCTYPE html>` suivie de l'élément racine `<html>`. À l'intérieur, on trouve deux sections principales : - `<head>` : Contient des métadonnées (titre de la page, liens vers des feuilles de style, encodage de caractères) qui ne sont pas affichées directement sur la page. - `<body>` : Contient le contenu visible de la page (texte, images, liens, etc.). ### Balises essentielles : texte et structure - `<h1>` à `<h6>` : Titres de niveau 1 (le plus important) à niveau 6 (le moins important). Utilisés pour structurer hiérarchiquement le contenu. - `<p>` : Définit un paragraphe de texte. - `<br>` : Insère un saut de ligne simple (balise vide, pas de fermeture). - `<hr>` : Insère une règle horizontale (thématique break). > **Règle d'imbrication** : Les balises doivent être correctement imbriquées et fermées dans l'ordre inverse de leur ouverture. Exemple : `<p><strong>Texte</strong></p>` est correct ; `<p><strong>Texte</p></strong>` est incorrect. ### Création de liens : l'ancre `<a>` > **Lien hypertexte** : Élément cliquable qui permet de naviguer vers une autre ressource (une autre page, une section de la même page, un fichier, une adresse email). La balise `<a>` nécessite l'attribut `href` (Hypertext REFerence) qui spécifie la destination du lien. - Lien vers une page externe : `<a href="https://www.example.com">Visiter Example</a>` - Lien vers une page du même site : `<a href="about.html">À propos</a>` - Lien vers une section de la même page : `<a href="#contact">Aller à la section Contact</a>` (nécessite un élément avec `id="contact"` ailleurs dans la page) - Lien email : `<a href="mailto:info@example.com">Envoyer un email</a>` ### Insertion d'images : la balise `<img>` > **Balise image** : `<img>` est une balise vide utilisée pour incorporer une image dans une page web. Elle nécessite l'attribut `src` (source) qui indique le chemin vers le fichier image, et l'attribut `alt` (texte alternatif) qui décrit l'image pour l'accessibilité et le référencement. - Chemin relatif : `<img src="images/logo.png" alt="Logo de l'école">` (cherche dans le dossier `images` relatif à la page actuelle) - Chemin absolu : `<img src="https://example.com/photo.jpg" alt="Photo d'un paysage">` - L'attribut `alt` est crucial : il s'affiche si l'image ne peut pas être chargée et est lu par les lecteurs d'écran pour les utilisateurs malvoyants. ### Exercices d'application corrigés **Exercice 1** : Écrire le code HTML d'une page simple contenant : - Un titre de niveau 1 : "Mon premier site web" - Un paragraphe : "Bienvenue sur ma page d'accueil. J'apprends à créer des sites web." - Un lien vers "https://www.wikipedia.org" avec le texte "Aller sur Wikipedia" - Une image située dans le même dossier que la page, nommée "photo.jpg", avec le texte alternatif "Une belle photo" *Corrigé* : ```html <!DOCTYPE html> <html> <head> <title>Mon premier site web</title> </head> <body> <h1>Mon premier site web</h1> <p>Bienvenue sur ma page d'accueil. J'apprends à créer des sites web.</p> <a href="https://www.wikipedia.org">Aller sur Wikipedia</a> <br> <img src="photo.jpg" alt="Une belle photo"> </body> </html> ``` **Exercice 2** : Corriger le code suivant qui contient des erreurs d'imbrication et d'attributs manquants : ```html <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <h1>Mon titre <p>Ceci est un paragraphe.</p> <a href="page2.html">Cliquez ici</a> <img src="image.png" </body> </html> ``` *Corrigé* : ```html <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <h1>Mon titre</h1> <p>Ceci est un paragraphe.</p> <a href="page2.html">Cliquez ici</a> <br> <img src="image.png" alt="Description de l'image"> </body> </html> ``` *Erreurs corrigées* : Fermeture manquante de `<h1>`, attribut `alt` manquant et fermeture manquante de `<img>`. --- ## III. Introduction to HTML 2 ### Listes : ordonnées et non ordonnées > **Liste** : Élément HTML utilisé pour regrouper des éléments connexes sous forme de liste à puces (non ordonnée) ou numérotée (ordonnée). - **Liste non ordonnée** (`<ul>`) : Utilisée lorsque l'ordre des éléments n'a pas d'importance. Chaque élément est défini par `<li>`. ```html <ul> <li>Pommes</li> <li>Bananes</li> <li>Oranges</li> </ul> ``` - **Liste ordonnée** (`<ol>`) : Utilisée lorsque l'ordre des éléments est significatif (ex. : étapes d'une recette, classement). Chaque élément est également défini par `<li>`. ```html <ol> <li>Préchauffer le four à 180°C</li> <li>Mélanger les ingrédients secs</li> <li>Ajouter les ingrédients humides</li> <li>Enfourner pendant 30 minutes</li> </ol> ``` ### Tableaux de base > **Tableau HTML** : Structure utilisée pour présenter des données sous forme de lignes et de colonnes. Composé de : > - `<table>` : Conteneur principal. > - `<tr>` : Définit une ligne de tableau (Table Row). > - `<th>` : Définit une cellule d'en-tête (Table Header), généralement centrée et en gras par défaut. > - `<td>` : Définit une cellule de données standard (Table Data). ```html <table> <tr> <th>Nom</th> <th>Âge</th> <th>Ville</th> </tr> <tr> <td>Alice</td> <td>20</td> <td>Yaoundé</td> </tr> <tr> <td>Bob</td> <td>22</td> <td>Douala</td> </tr> </table> ``` > **Attributs utiles pour les tableaux** : > - `border="1"` (en HTML ancien) ou mieux, utiliser CSS pour les bordures (voir chapitre CSS). > - `cellpadding` et `cellspacing` sont obsolètes ; privilégier CSS. ### Formulaires de base > **Formulaire HTML** : Élément permettant de collecter des données saisies par l'utilisateur (ex. : nom, email, message) pour les envoyer à un serveur. Composé de : - `<form>` : Conteneur du formulaire. Nécessite les attributs : - `action` : URL du script serveur qui traitera les données (ex. : `action="submit.php"`). - `method` : Méthode HTTP d'envoi (`get` ou `post`). `post` est préféré pour les données sensibles ou volumineuses. - Éléments de saisie : - `<input type="text">` : Champ de texte simple. - `<input type="email">` : Champ spécialisé pour les adresses email (validation basique). - `<input type="password">` : Champ de mot de passe (caractères masqués). - `<input type="submit">` : Bouton pour envoyer le formulaire. - `<label>` : Associe une étiquette texte à un élément de formulaire pour l'accessibilité. Utiliser l'attribut `for` qui correspond à l'`id` de l'élément lié. ```html <label for="username">Nom d'utilisateur :</label> <input type="text" id="username" name="username"> ``` ### Exercices d'application corrigés **Exercice 1** : Créer une liste non ordonnée des matières étudiées en Lower Sixth : Informatique, Mathématiques, Physique, Chimie, Anglais. *Corrigé* : ```html <ul> <li>Informatique</li> <li>Mathématiques</li> <li>Physique</li> <li>Chimie</li> <li>Anglais</li> </ul> ``` **Exercice 2** : Créer un tableau montrant les notes de deux étudiants dans trois matières. | Étudiant | Mathématiques | Physique | Anglais | |----------|---------------|----------|---------| | Jean | 15 | 13 | 16 | | Marie | 17 | 15 | 14 | *Corrigé* : ```html <table> <tr> <th>Étudiant</th> <th>Mathématiques</th> <th>Physique</th> <th>Anglais</th> </tr> <tr> <td>Jean</td> <td>15</td> <td>13</td> <td>16</td> </tr> <tr> <td>Marie</td> <td>17</td> <td>15</td> <td>14</td> </tr> </table> ``` **Exercice 3** : Créer un formulaire simple pour collecter le nom et l'email d'un utilisateur, avec un bouton d'envoi. Le formulaire doit envoyer les données vers "process.php" en utilisant la méthode POST. *Corrigé* : ```html <form action="process.php" method="post"> <label for="name">Nom :</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email :</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Envoyer"> </form> ``` --- ## IV. Introduction to CSS 1 ### Définition et rôle du CSS > **CSS (Cascading Style Sheets)** : Langage utilisé pour décrire la présentation d'un document écrit en HTML ou XML (y compris des éléments comme les couleurs, les polices, l'espacement, la disposition). Il permet de séparer le contenu (HTML) de la présentation (CSS). Le terme "cascading" fait référence à la manière dont les règles de style sont appliquées en cascade, avec un ordre de priorité basé sur la spécificité, l'origine et l'ordre d'apparition. ### Trois méthodes d'insertion du CSS 1. **CSS en ligne (inline)** : Appliqué directement sur un élément HTML via l'attribut `style`. ```html <p style="color: blue; font-size: 16px;">Ce texte est bleu et taille 16px.</p> ``` *À utiliser avec modération* : mélange contenu et présentation, difficile à maintenir. 2. **CSS interne (internal)** : Défini dans une balise `<style>` située dans la section `<head>` du document HTML. ```html <head> <style> p { color: green; font-size: 18px; } h1 { color: darkred; } </style> </head> ``` *Utile pour* : une seule page ayant un style unique. 3. **CSS externe (external)** : Défini dans un fichier séparé avec l'extension `.css`, lié à la page HTML via une balise `<link>` dans le `<head>`. ```html <head> <link rel="stylesheet" href="styles.css"> </head> ``` *Méthode préférée* : permet de réutiliser le même style sur plusieurs pages, facilite la maintenance. ### Sélecteurs de base > **Sélecteur** : Modèle utilisé pour choisir quels éléments HTML seront stylisés par une règle CSS. - **Sélecteur de type** : Cible tous les éléments d'un type donné. ```css p { color: black; } /* Tous les paragraphes */ h2 { font-size: 24px; } /* Tous les titres de niveau 2 */ ``` - **Sélecteur de classe** : Cible tous les éléments ayant un attribut `class` spécifique. Déclaré avec un point (`.`). ```html <p class="highlight">Ce paragraphe est mis en évidence.</p> ``` ```css .highlight { background-color: yellow; font-weight: bold; } ``` - **Sélecteur d'ID** : Cible l'élément unique ayant un attribut `id` spécifique. Déclaré avec un dièse (`#`). Un `id` doit être unique dans la page. ```html <h1 id="main-title">Titre Principal</h1> ``` ```css #main-title { text-align: center; color: navy; } ``` > **Principe de spécificité** : Lorsqu'une même propriété est définie par plusieurs règles pour le même élément, celle avec la spécificité la plus élevée l'emporte. Ordre général : ID > Classe > Type. Les styles en ligne ont la plus haute spécificité. ### Propriétés CSS essentielles : texte et couleur - **`color`** : Définit la couleur du texte. ```css p { color: #FF5733; } /* Couleur hexadécimale */ h1 { color: rgb(0, 100, 0); } /* Couleur RGB */ h2 { color: blue; } /* Couleur nommée */ ``` - **`font-family`** : Définit la police de caractères. Fournir une liste de polices de secours. ```css body { font-family: Arial, Helvetica, sans-serif; } ``` - **`font-size`** : Définit la taille de la police. Unités courantes : `px` (pixels), `em`, `%`. ```css p { font-size: 16px; } h1 { font-size: 2em; } /* 2 fois la taille de l'élément parent */ ``` - **`text-align`** : Définit l'alignement horizontal du texte dans un élément de bloc. ```css p { text-align: center; } h1 { text-align: right; } ``` - **`background-color`** : Définit la couleur d'arrière-plan d'un élément. ```css body { background-color: #f0f0f0; } .highlight { background-color: #ffffcc; } ``` > **Règle d'accessibilité pour les couleurs** : S'assurer d'un contraste suffisant entre la couleur du texte et celle de l'arrière-plan pour une lisibilité optimale, surtout pour les utilisateurs ayant une déficience visuelle. Utiliser des outils en ligne pour vérifier le contraste (ex. : rapport de contraste d'au moins 4.5:1 pour du texte normal). ### Exercices d'application corrigés **Exercice 1** : Appliquer du CSS interne pour rendre tous les paragraphes d'une page en texte gris foncé (`#333`) et taille 14px, et tous les titres de niveau 1 en bleu marine et centrés. *Corrigé* : ```html <!DOCTYPE html> <html> <head> <title>Page stylisée</title> <style> p { color: #333; font-size: 14px; } h1 { color: navy; text-align: center; } </style> </head> <body> <h1>Bienvenue</h1> <p>Ceci est un paragraphe stylisé avec du CSS interne.</p> <p>Un autre paragraphe avec le même style.</p> </body> </html> ``` **Exercice 2** : Créer une classe CSS nommée `.important` qui met le texte en gras, en rouge et avec un fond jaune pâle. Puis l'appliquer à un paragraphe dans le HTML. *Corrigé* : HTML : ```html <!DOCTYPE html> <html> <head> <title>Utilisation de classe</title> <style> .important { font-weight: bold; color: red; background-color: #ffffcc; } </style> </head> <body> <p class="important">Cette information est cruciale !</p> <p>Ce paragraphe est normal.</p> </body> </html> ``` **Exercice 3** : Utiliser un sélecteur d'ID pour styliser uniquement l'élément ayant `id="footer"` : texte petit, gris, centré. *Corrigé* : HTML : ```html <!DOCTYPE html> <html> <head> <title>Utilisation d'ID</title> <style> #footer { font-size: 12px; color: #777; text-align: center; } </style> </head> <body> <h1>Contenu principal</h1> <p>Voici du texte important.</p> <footer id="footer">© 2024 Mon Site Web. Tous droits réservés.</footer> </body> </html> ``` --- ## V. Integration Activity ### Objectif de l'activité Créer une page web complète et fonctionnelle intitulée "À propos de moi" qui intègre : - Une structure HTML sémantique (titres, paragraphes, liste, image, lien). - Une présentation stylisée avec du CSS (externé de préférence). - Le respect des bonnes pratiques d'accessibilité (attribut `alt`, contraste des couleurs, utilisation de `<label>` si formulaire présent, bien que non requis ici). - Une démonstration de la littératie informationnelle dans le choix du contenu (informations vérifiables, pertinentes). ### Consignes détaillées 1. **Contenu HTML** : - Un titre de niveau 1 : `"À propos de moi"`. - Un paragraphe d'introduction bref (2-3 phrases) sur soi-même (ex. : nom, classe, intérêt pour l'informatique). - Une liste non ordonnée de 3 à 4 centres d'intérêt ou compétences liées à l'informatique (ex. : Programmation, Conception web, Résolution de problèmes, Apprentissage de nouveaux langages). - Une image (elle peut être une représentation symbolique si une photo personnelle n'est pas disponible, ex. : un icône d'ordinateur ou un dessin lié à la tech) avec un attribut `alt` descriptif. - Un lien vers une ressource éducative en ligne fiable liée à l'informatique (ex. : une page de cours sur Khan Academy, un tutoriel sur W3Schools, la page d'un langage de programmation comme Python.org). Justifier brièvement le choix dans un commentaire HTML si souhaité, mais ce n'est pas obligatoire pour la correction. - Un pied de page (`<footer>`) contenant une mention de copyright simple. 2. **Stylisation CSS** (à mettre dans un fichier externe `style.css` lié) : - Appliquer une police de caractères lisible à tout le corps de la page (`body`). - Définir une couleur de fond douce pour la page entière. - Styliser le titre de niveau 1 (`h1`) : couleur spécifique, alignement centré, éventuellement une taille de police augmentée. - Styliser les paragraphes (`p`) : couleur du texte pour une bonne lisibilité sur le fond, interligne agréable (utiliser `line-height`). - Styliser la liste (`ul` ou `ol`) : éventuellement retirer les points par défaut ou les personnaliser, ajouter un léger retrait intérieur (`padding`). - Styliser l'image : définir une largeur maximale (ex. : `max-width: 150px;`) pour éviter qu'elle ne soit trop grande, ajouter une marge (`margin`) autour. - Styliser le pied de page (`footer`) : taille de police réduite, couleur de texte plus sombre, alignement centré, éventuellement une bordure supérieure fine. 3. **Bonnes pratiques** : - Utiliser des noms de classes et d'ID significatifs si nécessaire (ex. : `.main-content`, `#site-footer`). - S'assurer que le code HTML est valide (balises fermées, imbrication correcte). - S'assurer que le lien CSS est correct (`<link rel="stylesheet" href="style.css">` dans le `<head>`). - Vérifier l'attribut `alt` de l'image est présent et descriptif. - Choisir des couleurs avec un contraste suffisant (tester mentalement ou avec un outil si possible). ### Exemple de corrigé (structure et style suggérés) **Fichier HTML (`index.html`)** : ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>À propos de moi</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>À propos de moi</h1> <p>Je suis un élève de Lower Sixth passionné par l'informatique et ses applications pour résoudre des problèmes réels. J'aime apprendre de nouveaux concepts de programmation et comprendre comment fonctionnent les technologies que nous utilisons chaque jour.</p> <h2>Mes centres d'intérêt en informatique</h2> <ul class="skills-list"> <li>Programmation (Python, JavaScript)</li> <li>Conception de sites web (HTML, CSS)</li> <li>Résolution de problèmes algorithmiques</li> <li>Apprentissage autonome de nouvelles technologies</li> </ul> <img src="computer-icon.png" alt="Icône représentant un ordinateur portable, symbolisant l'intérêt pour l'informatique"> <p>Pour en savoir plus sur la programmation Python, une excellente ressource gratuite est disponible sur le site officiel :</p> <a href="https://www.python.org/" target="_blank">Visiter Python.org</a> <footer> <p>&copy; 2024 Mon Portfolio Scolaire. Tous droits réservés.</p> </footer> </div> </body> </html> ``` **Fichier CSS (`style.css`)** : ```css /* Reset de base pour une meilleure cohérence */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Styles généraux du corps de la page */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; /* Fond très gris clair */ color: #333; /* Texte gris foncé pour bon contraste */ line-height: 1.6; /* Améliore la lisibilité */ padding: 20px; } /* Conteneur pour centrer et limiter la largeur du contenu */ .container { max-width: 800px; margin: 0 auto; /* Centre le conteneur horizontalement */ padding: 20px; background-color: white; /* Fond blanc pour le contenu principal */ border-radius: 8px; /* Coins légèrement arrondis */ box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Légère ombre pour profondeur */ } /* Stylisation du titre principal */ h1 { color: #2c3e50; /* Bleu marine foncé */ text-align: center; margin-bottom: 25px; font-size: 2.2em; } /* Stylisation des titres de niveau 2 */ h2 { color: #34495e; margin-top: 30px; margin-bottom: 15px; font-size: 1.5em; border-bottom: 2px solid #ecf0f1; padding-bottom: 5px; } /* Stylisation des paragraphes */ p { margin-bottom: 15px; color: #555; /* Légèrement plus clair que le corps pour hiérarchie */ } /* Stylisation de la liste des compétences */ .skills-list { background-color: #ecf0f1; /* Fond très léger pour démarquer */ padding: 15px; border-radius: 5px; margin-bottom: 20px; } .skills-list li { margin-bottom: 8px; padding-left: 5px; /* Léger retrait pour les puces si on les garde, ou pour alignement si on les retire */ /* Pour retirer les puces par défaut : list-style-type: none; */ } /* Stylisation de l'image */ img { max-width: 180px; height: auto; display: block; /* Pour éviter l'espace en dessous lié au inline-block */ margin: 20px auto; /* Centre l'image et ajoute de l'espace vertical */ border: 2px solid #ddd; border-radius: 4px; } /* Stylisation du lien */ a { color: #3498db; /* Bleu agréable */ text-decoration: none; /* Pas de soulignement par défaut */ } a:hover { text-decoration: underline; /* Soulignement au survol pour feedback */ } /* Stylisation du pied de page */ footer { text-align: center; margin-top: 30px; padding-top: 15px; border-top: 1px solid #eee; font-size: 0.9em; color: #777; /* Gris moyen pour moins d'importance visuelle */ } ``` ### Exercices d'application corrigés (activité d'intégration) **Exercice 1 (Analyse)** : Dans l'exemple de corrigé ci-dessus, pourquoi l'attribut `alt` de l'image est-il important ? Donnez deux raisons spécifiques. *Corrigé* : 1. **Accessibilité** : Si l'utilisateur utilise un lecteur d'écran (en raison d'une déficience visuelle), l'attribut `alt` permet de lui transmettre le sens de l'image ("Icône représentant un ordinateur portable, symbolisant l'intérêt pour l'informatique"), ce qu'il ne pourrait pas percevoir autrement. 2. **Chargement échoué** : Si l'image ne peut pas être chargée (erreur de chemin, problème de connexion, fichier supprimé), le texte de l'attribut `alt` s'affichera à la place de l'image, permettant à l'utilisateur de comprendre ce qui était censé être affiché, améliorant ainsi l'expérience utilisateur même en cas d'erreur technique. **Exercice 2 (Application)** : Modifier la règle CSS pour le `body` dans l'exemple afin d'utiliser une police système générique qui privilégie une sans-serif disponible sur le système de l'utilisateur, sans spécifier de nom de police particulier comme 'Segoe UI'. *Corrigé* : ```css body { font-family: sans-serif; /* Utilise la police sans-serif par défaut du système */ background-color: #f8f9fa; color: #333; line-height: 1.6; padding: 20px; } ``` *Justification* : `sans-serif` est une famille de polices générique. Le navigateur choisira automatiquement une police sans-serif installée sur le système de l'utilisateur (comme Arial, Helvetica, ou une équivalente), ce qui améliore la portabilité et respecte les préférences système potentielles de l'utilisateur. **Exercice 3 (Évaluation)** : Un élève propose le CSS suivant pour le titre `h1` : `h1 { color: red; background-color: yellow; }`. Évaluez ce choix du point de vue de l'accessibilité et de la lisibilité. *Corrigé* : Ce choix présente des problèmes significatifs d'accessibilité et de lisibilité. - **Contraste insuffisant** : Le texte rouge sur fond jaune a un contraste très faible. Selon les normes WCAG (Web Content Accessibility Guidelines), ce contraste ne passe probablement pas le test pour du texte normal (rapport de contraste bien inférieur à 4.5:1). Cela rendra la lecture difficile, voire impossible, pour de nombreux utilisateurs, notamment ceux ayant une faible vision, une daltonisme (problème de perception du rouge/vert), ou simplement en conditions de luminosité difficile. - **Lisibilité réduite** : Même pour une vision normale, la combinaison rouge sur jaune est souvent perçue comme agressive ou "vibrante", ce qui fatigue les yeux rapidement et réduit la capacité à lire confortablement sur de longues périodes. Ce n'est pas un choix adapté pour un titre principal destiné à être lu facilement. Un meilleur choix serait une combinaison foncé sur clair (ex. : bleu marine sur blanc, noir sur gris clair) ou clair sur foncé avec un contraste vérifié. --- ## Synthèse du chapitre - **Fondamentaux du web** : L'Internet est un réseau mondial utilisant TCP/IP ; les services en ligne (communication, recherche, commerce, etc.) sont accessibles via des navigateurs ; la littératie informationnelle implique de localiser, évaluer (crédibilité, source, date) et utiliser l'information de manière éthique. - **HTML - Structure** : HTML définit la structure sémantique des pages web via des balises. Un document valide commence par `<!DOCTYPE html>`, contient `<html>`, `<head>` (métadonnées) et `<body>` (contenu visible). Les éléments clés incluent les titres (`<h1>-<h6>`), paragraphes (`<p>`), listes (`<ul>`, `<ol>`, `<li>`), tableaux (`<table>`, `<tr>`, `<th>`, `<td>`), liens (`<a href="...">`) et images (`<img src="..." alt="...">`). L'imbrication correcte et l'utilisation d'attributs essentiels comme `href`, `src`, et `alt` sont cruciales. - **CSS - Présentation** : CSS sépare la présentation du contenu. Il peut être appliqué en ligne, interne (dans `<style>`), ou externe (fichier `.css` lié via `<link>`). Les sélecteurs de base (type, `.class`, `#id`) ciblent les éléments à styliser. Les propriétés essentielles couvrent la couleur (`color`, `background-color`), la police (`font-family`, `font-size`) et l'alignement (`text-align`). La spécificité des règles détermine laquelle l'emporte en cas de conflit. L'accessibilité (contraste des couleurs, texte alternatif) est une considération clé dans l'application du style. - **Intégration** : Une page web efficace combine une structure HTML sémantique et accessible avec une présentation CSS soignée, en respectant les principes de lisibilité, d'accessibilité et de bonne pratique technique (fichiers externes, code valide). ---