Jupyter Accéder au notebook Jupyter | ⬇️ Télécharger le .ipynb

Introduction au HTML/CSS¶

Les langages fondamentaux du Web¶

DSP - USAL33

Objectifs du cours TEST JB¶

Comprendre l’architecture et le fonctionnement du Web
Maîtriser le HTML pour structurer des pages web
Maîtriser le CSS pour mettre en forme des pages web
Adopter les bonnes pratiques de développement web
Ajout d’un item pour test de la pipeline

Planning détaillé (non définitif)¶

Date	Horaire	Programme	Emplacement
03/02	13h30-17h	Cours : Introduction + Fondamentaux + Structure sémantique	17.1.12
04/02	9h-12h30	Cours : Structure sémantique + Formulaires + Tableaux	61C.2.07
04/02	13h30-17h	TP1 : Structure sémantique + Formulaires	61C.2.07
05/02	9h-12h30	TP2 : Formulaires + Tableaux	61C.2.07

Date	Horaire	Programme	Emplacement
05/02	13h30-17h	Cours : Médias + Attributs globaux + Sélecteurs CSS	61C.2.07
06/02	13h30-17h	TP3 : Exercices de synthèse HTML	61.A.3.16
09/02	9h-12h30	Cours : Box Model + Positionnement
09/02	13h30-17h	TP4 : Sélecteurs + Box Model + Positionnement

Date	Horaire	Programme
11/02	9h-12h30	Cours : Flexbox + Grid Layout
11/02	13h30-17h	TP5 : Flexbox + Grid
12/02	9h-12h30	Cours : Design responsive + Typographie + Couleurs
12/02	13h30-17h	TP6 : Design responsive

Date	Horaire	Programme
13/02	9h-12h30	Cours : Bonnes pratiques + Accessibilité + Performance
13/02	13h30-17h	TP : Mini-Projet (conception + wireframe)
16/02	9h-12h30	TP : Mini-Projet (développement) + DS

Modalités d’évaluation¶

Évaluation continue (25% de la note finale)¶

Tous les TPs sont à rendre
La moyenne des TPs compte pour 25% de la note finale

Évaluation terminale (75% de la note finale)¶

Un DS
Un mini-projet
La moyenne de ces deux évaluations compte pour 75% de la note finale

Partie 1¶

Fondamentaux du Web¶

Qu’est-ce qu’une page web ?¶

« Une page web est une unité de consultation du World Wide Web. Conçue pour être consultée avec un navigateur web et identifiée par une adresse web, elle peut être statique ou dynamique. » (Wikipedia)

En pratique : Une page web est simplement un fichier (ou un ensemble de fichiers) que le navigateur récupère via Internet et rend sous forme de texte, d’images, de vidéos ou d’interactions.

Architecture simplifiée du Web¶

Élément	Rôle	Exemple concret
Client	Navigateur qui demande et affiche le contenu	Firefox, Chrome, Safari, Edge
Serveur	Machine qui héberge les fichiers et les renvoie	Serveur web Apache, Nginx
URL	Adresse unique qui identifie la ressource	https://exemple.com/index.html

Statique ⟷ Dynamique¶

Type	Description	Fichiers
Statique	Le contenu ne change pas sans intervention manuelle	Un fichier `index.html` + `style.css` livrés tels quels
Dynamique	Le contenu est généré à la volée	Scripts côté serveur (PHP, Node.js, Python)

Pour ce cours : Nous ne traiterons que le statique : uniquement HTML + CSS.

HTML / CSS = description de la page¶

Rôles complémentaires¶

HTML décrit la structure (titres, paragraphes, images…)
CSS décrit la présentation (couleurs, marges, polices…)

Le navigateur interprète ces fichiers¶

Parse le HTML → crée le DOM (Document Object Model)
Parse le CSS → crée le CSSOM (CSS Object Model)
Combine DOM + CSSOM → Render Tree
Calcule le layout → Paint → affichage

Le navigateur : un exécutant¶

Le navigateur agit comme un exécutant d’une description.

⚠️ Point important : Il n’y a pas de contrôle de flux (boucles, conditions) comme dans un programme classique.

HTML et CSS sont des langages déclaratifs, pas impératifs.

Cycle de vie d’une page web¶

1. Utilisateur demande une page (URL)
   ↓
2. Navigateur contacte le serveur (DNS → IP)
   ↓
3. Requête HTTP envoyée
   ↓
4. Serveur renvoie la réponse (HTML)
   ↓
5. Téléchargement des ressources (CSS, images, JS)
   ↓
6. Construction du DOM et du CSSOM
   ↓
7. Création du Render Tree
   ↓
8. Calcul du layout (positions, tailles)
   ↓
9. Peinture (painting) → Affichage final

Langages du Web¶

Catégorie	Langage(s)	Rôle
Langage de balisage	HTML	Décrit la structure du document
Langage de feuille de style	CSS	Décrit la présentation
Langage de script côté client	JavaScript	Ajoute de la logique interactive
Langage de description de données	JSON, XML	Transporte des données structurées

Les standards du W3C¶

Qu’est-ce que le W3C ?¶

W3C = World Wide Web Consortium
Organisation internationale fondée en 1994 par Tim Berners-Lee
Mission : développer des standards ouverts pour le Web

Pourquoi respecter les standards ?¶

Compatibilité entre navigateurs
Pérennité du code
Accessibilité pour tous et toutes
SEO amélioré
Maintenance facilitée

Validation : https://validator.w3.org/

Historique rapide — HTML & CSS¶

HTML :

HTML 1.0 (1991) : 18 balises de base
HTML 4.01 (1999) : Séparation structure/présentation
HTML5 (2014) : Balises sémantiques, vidéo/audio natifs
HTML Living Standard (2019+) : Évolution continue

CSS :

CSS 1 (1996) : Propriétés de base
CSS 2 (1998) : Positionnement
CSS 3 (2011+) : Modules (Flexbox, Grid, animations)

💡 Aujourd’hui : Évolution modulaire et continue

Protocoles HTTP vs HTTPS¶

Caractéristique	HTTP	HTTPS
Sécurité	Données en clair	Données chiffrées (TLS/SSL)
Port	80	443
Certificat	Aucun	Certificat SSL/TLS requis
Usage	⚠️ Déprécié	✅ Standard actuel
Navigateur	« Non sécurisé »	Cadenas 🔒

Structure d’un document HTML¶

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon titre</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

Décryptage de la structure HTML¶

<!DOCTYPE html> → indique le standard HTML5
<html lang="fr"> → conteneur racine, attribut de langue
<head> → regroupe les métadonnées, le titre, les liens CSS
<meta charset="UTF-8"> → encodage des caractères
<title> → titre affiché dans l’onglet du navigateur
<link rel="stylesheet"> → lien vers la feuille de style CSS
<body> → contient le contenu visible

Balises de base¶

Balise	Usage	Exemple
`<h1>` à `<h6>`	Titres hiérarchisés	`<h1>Bienvenue</h1>`
`<p>`	Paragraphe	`<p>Texte...</p>`
`<ul>` / `<ol>`	Listes non ordonnées / ordonnées	`<ul><li>Item</li></ul>`
`<a>`	Lien hypertexte	`<a href="https://exemple.fr">Site</a>`
`<img>`	Image	`<img src="photo.jpg" alt="Description">`

Règles importantes :

L’attribut alt de <img> est obligatoire
Respecter la hiérarchie des titres (h1 → h2 → h3)

Introduction au CSS¶

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    margin: 20px;
}

h1 {
    color: #2c3e50;
}

p {
    line-height: 1.5;
}

Structure d’une règle CSS¶

sélecteur {
    propriété: valeur;
}

Sélecteur : cible les éléments HTML (body, h1, p)
Propriété : aspect à modifier (color, margin)
Valeur : ce qu’on applique (#2c3e50, 20px)

Mise en forme simple¶

Propriété	Exemple	Effet
`color`	`color: #333;`	Couleur du texte
`background-color`	`background-color: #e0e0e0;`	Couleur de fond
`margin`	`margin: 10px;`	Espaces externes
`padding`	`padding: 10px;`	Espaces internes
`text-align`	`text-align: center;`	Alignement du texte

Différence margin / padding :

Margin : espace à l’extérieur de la bordure
Padding : espace à l’intérieur de la bordure

Fin de la Partie 1¶

Prochaine étape : HTML approfondi¶

Questions ?

Partie 2¶

HTML approfondi¶

Structure sémantique, formulaires, tableaux et médias

1. Structure sémantique HTML5¶

Pourquoi la sémantique ?¶

HTML sémantique = utiliser les balises pour leur signification et non pour leur apparence.

Avantages¶

Bénéfice	Explication
Accessibilité	Les lecteurs d’écran comprennent mieux la structure
SEO	Les moteurs de recherche identifient les contenus importants
Maintenance	Code plus lisible et compréhensible

⚠️ À éviter : <div> et <span> partout sans signification

Les balises structurelles HTML5¶

<body>
    <header>
        
    </header>
    
    <nav>
        
    </nav>
    
    <main>
        
        <article>
            
        </article>
        
        <section>
            
        </section>
        
        <aside>
            
        </aside>
    </main>
    
    <footer>
        
    </footer>
</body>

`<header>` — En-tête¶

Rôle : Contient l’en-tête d’une page ou d’une section

Contenu typique :

Logo du site
Titre principal
Slogan
Navigation principale

<header>
    <img src="logo.png" alt="Logo MonSite">
    <h1>Bienvenue sur MonSite</h1>
</header>

`<main>` — Contenu principal¶

Rôle : Contient le contenu principal unique de la page

Règles importantes :

Un seul <main> par page
Exclut le contenu répété (header, nav, footer, sidebar)

<main>
    <h1>Titre de la page</h1>
    <p>Contenu principal unique à cette page...</p>
</main>

💡 Accessibilité : Les lecteurs d’écran peuvent sauter directement au <main>

`<article>` — Contenu autonome¶

Rôle : Contenu autonome et réutilisable (article de blog, commentaire, widget)

<article>
    <h2>Titre de l'article</h2>
    <p>Auteur : Jean Dupont</p>
    <p>Contenu de l'article...</p>
</article>

💡 Astuce : Si vous pouvez publier ce contenu ailleurs tel quel, c’est un <article>

`<section>` — Section thématique¶

Rôle : Regroupe un contenu thématique cohérent

<section>
    <h2>Nos services</h2>
    <p>Description des services...</p>
</section>

<section>
    <h2>Notre équipe</h2>
    <p>Présentation de l'équipe...</p>
</section>

⚠️ Différence avec <div> : <section> a une signification thématique

`<aside>` — Contenu complémentaire¶

Rôle : Contenu indirectement lié au contenu principal