Refonte des TP Web pour SNT seconde
- Corrige les erreurs CSS (radius-border, prefixes vendeur obsoletes) - Corrige la typo "La ciel" et les balises dt→dl dans index.html - Ajoute les vrais liens Wikipedia pour les grands noms - Harmonise les references au lycee Charlotte Perriand - Met a jour l'annee dans INTRODUCTION.md (2024→2025) - Remplace les anciens TP (PDFs niveau NSI/BTS) par 3 nouveaux TP adaptes : - TP1 : Decouverte du HTML (structure, balises, CSS) - TP2 : Experience utilisateur (analyse UX, bonnes pratiques) - TP3 : Ma premiere page web en CSS (mini-projet progressif) - Ajoute le schema client/serveur et les templates de demarrage TP3 - Supprime les anciens TP 2/3/4 et intro.pdf (gardes en NSI) - Met a jour le README avec le nouveau sommaire Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,17 +7,39 @@
|
||||
| [Introduction au Web](INTRODUCTION.md) | Surface Web, Deep Web, Dark Web, navigateurs |
|
||||
| [Historique du Web](historique/README.md) | Évolution du Web, archives, Minitel |
|
||||
| [Moteurs de recherche](recherches/README.md) | Google, référencement, alternatives |
|
||||
| [TP HTML/CSS](tp/) | Création de pages web |
|
||||
|
||||
---
|
||||
|
||||
## Travaux pratiques : HTML et CSS
|
||||
|
||||
| TP | Titre | Description | Fichier |
|
||||
|----|-------|-------------|---------|
|
||||
| TP 1 | [Découverte du HTML](tp/tp1_decouverte_html.md) | Structure HTML5, balises de contenu, lien HTML/CSS | Markdown |
|
||||
| TP 2 | [Expérience utilisateur](tp/tp2_experience_utilisateur.md) | UX, analyse de sites web, bonnes pratiques | Markdown |
|
||||
| TP 3 | [Ma première page web en CSS](tp/tp3_css_ma_page.md) | Création d'une page personnelle avec CSS | Markdown + [template HTML](tp/tp3_template.html) + [template CSS](tp/tp3_style.css) |
|
||||
|
||||
### Progression
|
||||
|
||||
1. **TP 1** : Observer et comprendre le code HTML d'une page existante
|
||||
2. **TP 2** : Analyser des sites web du point de vue de l'utilisateur
|
||||
3. **TP 3** : Créer sa propre page web avec HTML et CSS
|
||||
|
||||
### Fichiers de travail
|
||||
|
||||
- [`tp/1/index.html`](tp/1/index.html) : Page HTML de référence (utilisée dans le TP 1)
|
||||
- [`tp/1/style.css`](tp/1/style.css) : Feuille de style associée
|
||||
- [`tp/tp3_template.html`](tp/tp3_template.html) : Template de démarrage pour le TP 3
|
||||
- [`tp/tp3_style.css`](tp/tp3_style.css) : Feuille de style de démarrage pour le TP 3
|
||||
|
||||
---
|
||||
|
||||
### Activité 1
|
||||
|
||||
Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique *Sir Timothy John Berners-Lee* et le Belge *Robert Cailliau* au début des années 90.
|
||||
Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique *Sir Timothy John Berners-Lee* et le Belge *Robert Cailliau* au début des années 90.
|
||||
|
||||
À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte.
|
||||
À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte.
|
||||
|
||||
Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés.
|
||||
Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés.
|
||||
|
||||
Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens".
|
||||
|
||||
@@ -37,20 +59,20 @@ Une chose très importante à bien avoir à l'esprit : beaucoup de personnes con
|
||||
|
||||
## Comment ?
|
||||
|
||||
Les navigateurs interprètent des **codes** (HTML et CSS) afin d’afficher des pages Web. Il s’agit de langages de description (et non pas de programmation) qui permettent de créer des sites web.
|
||||
Les langages **HTML** et **CSS** sont à la base du fonctionnement de tous les sites Web.
|
||||
Les navigateurs interprètent des **codes** (HTML et CSS) afin d'afficher des pages Web. Il s'agit de langages de description (et non pas de programmation) qui permettent de créer des sites web.
|
||||
Les langages **HTML** et **CSS** sont à la base du fonctionnement de tous les sites Web.
|
||||
|
||||
Le langage HTML (HyperText Markup Language, langage de balisage hypertexte) a été inventé par Tim Berners-Lee en 1991.
|
||||
|
||||
Son rôle est de gérer et d’organiser le contenu de la page web (titres, textes, images, etc.). Il répond à une norme très précise.
|
||||
Son rôle est de gérer et d'organiser le contenu de la page web (titres, textes, images, etc.). Il répond à une norme très précise.
|
||||
|
||||
Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte, etc.).
|
||||
Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte, etc.).
|
||||
|
||||
Autrement dit, le contenu est écrit dans le fichier HTML et la mise en forme est écrite dans le fichier CSS.
|
||||
|
||||
Vous pouvez examiner le code html du [SITE DU LYCÉE](https://charlotteperriand.etab.ac-lille.fr) :
|
||||
|
||||
-> clic droit sur la page -> afficher code source
|
||||
-> clic droit sur la page -> afficher code source
|
||||
|
||||
|
||||
|
||||
@@ -76,25 +98,25 @@ Prenez bien le temps de lire.
|
||||
|
||||
Nous allons utiliser le logiciel ***Notepad ++*** afin d'ouvrir le fichier [index.html](index.html)
|
||||
|
||||
Repérez les différents éléments qui forment la structure de base d’une page HTML
|
||||
Repérez les différents éléments qui forment la structure de base d'une page HTML
|
||||
|
||||
· Le doctype < !DOCTYPE html > : il s’agit de la toute première ligne du document. C’est elle qui indique qu’il s’agit bien d’une page web HTML et qu’elle est écrite en HTML5.
|
||||
· Le doctype < !DOCTYPE html > : il s'agit de la toute première ligne du document. C'est elle qui indique qu'il s'agit bien d'une page web HTML et qu'elle est écrite en HTML5.
|
||||
|
||||
· La balise < html > : il s’agit de la balise principale du code. Elle définit un conteneur qui englobe tout le contenu de la page web. Cette balise est fermée à l’aide de la balise </ html> située à la dernière ligne du code.
|
||||
· La balise < html > : il s'agit de la balise principale du code. Elle définit un conteneur qui englobe tout le contenu de la page web. Cette balise est fermée à l'aide de la balise </ html> située à la dernière ligne du code.
|
||||
|
||||
La balise < head > : il s’agit d’une balise définissant le conteneur d’en-tête de la page. Ce conteneur donne des informations générales sur la page comme son titre (donné par la balise < title >), son encodage (donné par la balise < meta charset=... /> et utile pour la gestion de certains caractères), etc.
|
||||
La balise < head > : il s'agit d'une balise définissant le conteneur d'en-tête de la page. Ce conteneur donne des informations générales sur la page comme son titre (donné par la balise < title >), son encodage (donné par la balise < meta charset=... /> et utile pour la gestion de certains caractères), etc.
|
||||
|
||||
· Celles-ci ne sont pas affichées sur la page, mais sont extrêmement importantes puisqu’elles sont nécessaires au navigateur pour une bonne interprétation du code.
|
||||
· Celles-ci ne sont pas affichées sur la page, mais sont extrêmement importantes puisqu'elles sont nécessaires au navigateur pour une bonne interprétation du code.
|
||||
|
||||
· La balise < body > : il s’agit d’une balise définissant le conteneur du corps de la page. Ce conteneur contient tous les éléments qui seront affichés sur la page.
|
||||
· La balise < body > : il s'agit d'une balise définissant le conteneur du corps de la page. Ce conteneur contient tous les éléments qui seront affichés sur la page.
|
||||
|
||||
***Le conteneur d’en-tête***
|
||||
***Le conteneur d'en-tête***
|
||||
|
||||
· Indiquez les lignes correspondantes au conteneur d’en-tête du fichier.
|
||||
· Indiquez les lignes correspondantes au conteneur d'en-tête du fichier.
|
||||
|
||||
· Précisez le titre de la page. Indiquez où il apparaît lorsque la page est exécutée par le navigateur. Modifiez ce titre.
|
||||
|
||||
· Indiquez l’encodage du fichier. Expliquer ce qui se passe sur la page web si vous supprimez la ligne indiquant l’encodage.
|
||||
· Indiquez l'encodage du fichier. Expliquer ce qui se passe sur la page web si vous supprimez la ligne indiquant l'encodage.
|
||||
|
||||
***Le corps de la page web***
|
||||
|
||||
@@ -104,7 +126,7 @@ La balise < head > : il s’agit d’une balise définissant le conteneur d’en
|
||||
|
||||
· Dites comment mettre des mots en gras. Mettez en gras les mots HTML et CSS.
|
||||
|
||||
· Précisez quelle est la balise qui permet d’insérer une image.
|
||||
· Précisez quelle est la balise qui permet d'insérer une image.
|
||||
|
||||
· Indiquez à quoi peut servir la balise < span >.
|
||||
|
||||
@@ -116,14 +138,14 @@ La balise < head > : il s’agit d’une balise définissant le conteneur d’en
|
||||
|
||||
***Fichier CSS***
|
||||
|
||||
· Ouvrez le fichier [style.css](style.css) à l’aide de Notepad++. Précisez comment il est structuré.
|
||||
· Ouvrez le fichier [style.css](style.css) à l'aide de Notepad++. Précisez comment il est structuré.
|
||||
|
||||
· Modifiez le style CSS pour que les balises < h1 > soient écrites en bleu.
|
||||
|
||||
· Indiquez à quoi correspondent les attributs width et height de la balise img. Expliquez comment les modifier pour que l’image soit un rectangle de taille 200 x100 pixels.
|
||||
· Indiquez à quoi correspondent les attributs width et height de la balise img. Expliquez comment les modifier pour que l'image soit un rectangle de taille 200 x100 pixels.
|
||||
|
||||
Les paragraphes sont créés avec les balises < p > .
|
||||
|
||||
· Essayez de modifier la couleur des paragraphes à l'aide du fichier CSS.
|
||||
|
||||
· Indiquez comment modifier les fichiers index.html et style.css pour que les mots HTML et CSS soient écrits en bleu et en italique, mais sans modifier le reste du document.
|
||||
· Indiquez comment modifier les fichiers index.html et style.css pour que les mots HTML et CSS soient écrits en bleu et en italique, mais sans modifier le reste du document.
|
||||
|
||||
Reference in New Issue
Block a user