diff --git a/sequences/web/INTRODUCTION.md b/sequences/web/INTRODUCTION.md index 32cf188..7366b0d 100644 --- a/sequences/web/INTRODUCTION.md +++ b/sequences/web/INTRODUCTION.md @@ -67,7 +67,7 @@ Un **navigateur** est un logiciel qui permet d'afficher des pages web. Il interp Faites une recherche sur Internet pour répondre aux questions suivantes : -1. Quel est le navigateur le plus utilisé dans le monde en 2024 ? Quel est son pourcentage d'utilisation ? +1. Quel est le navigateur le plus utilisé dans le monde en 2025 ? Quel est son pourcentage d'utilisation ? 2. Quel est le navigateur le plus utilisé sur mobile ? 3. Pourquoi la domination d'un seul navigateur peut-elle poser problème ? 4. Qu'est-ce qu'un navigateur "open source" ? Citez-en deux. diff --git a/sequences/web/README.md b/sequences/web/README.md index d8985a8..01957ba 100644 --- a/sequences/web/README.md +++ b/sequences/web/README.md @@ -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 ![afficher_source](assets/afficher_source.png) @@ -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 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 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. \ No newline at end of file +· 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. diff --git a/sequences/web/assets/client_serveur.jpg b/sequences/web/assets/client_serveur.jpg new file mode 100644 index 0000000..679865e Binary files /dev/null and b/sequences/web/assets/client_serveur.jpg differ diff --git a/sequences/web/index.html b/sequences/web/index.html index 4308568..bdbae15 100644 --- a/sequences/web/index.html +++ b/sequences/web/index.html @@ -62,7 +62,7 @@ - <dt> + <dl> @@ -88,19 +88,19 @@ -

La ciel est bleu comme la mer.

+

Le ciel est bleu comme la mer.

Les grands noms de l'informatique

diff --git a/sequences/web/style.css b/sequences/web/style.css index 6f5cd45..dea8c22 100644 --- a/sequences/web/style.css +++ b/sequences/web/style.css @@ -6,13 +6,11 @@ h1 color: #090; padding:16px; font-weight:lighter; - -moz-box-shadow: 2px 2px 6px #888; - -webkit-box-shadow: 2px 2px 6px #888; - box-shadow:2px 2px 6px #888; + box-shadow:2px 2px 6px #888; text-align:center; display:block; margin:16px; - background-color: #76d7c4; + background-color: #76d7c4; } #banniere @@ -23,8 +21,6 @@ h1 color:#6bf; padding:24px 32px 32px 32px; font-weight:lighter; - -moz-box-shadow: 2px 2px 6px #888; - -webkit-box-shadow: 2px 2px 6px #888; box-shadow:2px 2px 6px #888; text-align:center; display:block; @@ -46,7 +42,7 @@ table tr:nth-child(odd) td h2, h3 { background-color: gray; color: navy; - radius-border : 5px; + border-radius: 5px; } ul,ol{ diff --git a/sequences/web/tp/1/index.html b/sequences/web/tp/1/index.html index b1fc9ca..bdbae15 100644 --- a/sequences/web/tp/1/index.html +++ b/sequences/web/tp/1/index.html @@ -62,7 +62,7 @@ - <dt> + <dl> @@ -88,19 +88,19 @@ -

La ciel est bleu comme la mer.

+

Le ciel est bleu comme la mer.

Les grands noms de l'informatique

@@ -111,7 +111,7 @@
  • HTML5, CSS3, javaScript, AJAX
  • OpenClassroom
  • grafikart
    • -
  • Site du lycée Thierry Maulnier de Nice
    • +
  • Site du lycée Charlotte Perriand de Genech
    • diff --git a/sequences/web/tp/1/style.css b/sequences/web/tp/1/style.css index 6f5cd45..dea8c22 100644 --- a/sequences/web/tp/1/style.css +++ b/sequences/web/tp/1/style.css @@ -6,13 +6,11 @@ h1 color: #090; padding:16px; font-weight:lighter; - -moz-box-shadow: 2px 2px 6px #888; - -webkit-box-shadow: 2px 2px 6px #888; - box-shadow:2px 2px 6px #888; + box-shadow:2px 2px 6px #888; text-align:center; display:block; margin:16px; - background-color: #76d7c4; + background-color: #76d7c4; } #banniere @@ -23,8 +21,6 @@ h1 color:#6bf; padding:24px 32px 32px 32px; font-weight:lighter; - -moz-box-shadow: 2px 2px 6px #888; - -webkit-box-shadow: 2px 2px 6px #888; box-shadow:2px 2px 6px #888; text-align:center; display:block; @@ -46,7 +42,7 @@ table tr:nth-child(odd) td h2, h3 { background-color: gray; color: navy; - radius-border : 5px; + border-radius: 5px; } ul,ol{ diff --git a/sequences/web/tp/2/Experience client.pdf b/sequences/web/tp/2/Experience client.pdf deleted file mode 100644 index 6825173..0000000 Binary files a/sequences/web/tp/2/Experience client.pdf and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images.7z b/sequences/web/tp/2/ExperienceClient_images.7z deleted file mode 100644 index 3d65971..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images.7z and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img1.PNG b/sequences/web/tp/2/ExperienceClient_images/img1.PNG deleted file mode 100644 index f924888..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img1.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img2.PNG b/sequences/web/tp/2/ExperienceClient_images/img2.PNG deleted file mode 100644 index 1064daa..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img2.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img3.PNG b/sequences/web/tp/2/ExperienceClient_images/img3.PNG deleted file mode 100644 index 958f5b6..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img3.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img4.PNG b/sequences/web/tp/2/ExperienceClient_images/img4.PNG deleted file mode 100644 index d3e7d22..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img4.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img5.PNG b/sequences/web/tp/2/ExperienceClient_images/img5.PNG deleted file mode 100644 index 762f948..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img5.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img6.PNG b/sequences/web/tp/2/ExperienceClient_images/img6.PNG deleted file mode 100644 index f1cc3cc..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img6.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img7.PNG b/sequences/web/tp/2/ExperienceClient_images/img7.PNG deleted file mode 100644 index 8663cb3..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img7.PNG and /dev/null differ diff --git a/sequences/web/tp/2/ExperienceClient_images/img8.PNG b/sequences/web/tp/2/ExperienceClient_images/img8.PNG deleted file mode 100644 index f7142ff..0000000 Binary files a/sequences/web/tp/2/ExperienceClient_images/img8.PNG and /dev/null differ diff --git a/sequences/web/tp/3/TP 3 - CSS et sections.pdf b/sequences/web/tp/3/TP 3 - CSS et sections.pdf deleted file mode 100644 index eaf3d88..0000000 Binary files a/sequences/web/tp/3/TP 3 - CSS et sections.pdf and /dev/null differ diff --git a/sequences/web/tp/3/images/bangkok.jpg b/sequences/web/tp/3/images/bangkok.jpg deleted file mode 100644 index 16c109d..0000000 Binary files a/sequences/web/tp/3/images/bangkok.jpg and /dev/null differ diff --git a/sequences/web/tp/3/images/bulle.png b/sequences/web/tp/3/images/bulle.png deleted file mode 100644 index 915d928..0000000 Binary files a/sequences/web/tp/3/images/bulle.png and /dev/null differ diff --git a/sequences/web/tp/3/images/facebook.png b/sequences/web/tp/3/images/facebook.png deleted file mode 100644 index 5d0ae32..0000000 Binary files a/sequences/web/tp/3/images/facebook.png and /dev/null differ diff --git a/sequences/web/tp/3/images/flecheblanchedroite.png b/sequences/web/tp/3/images/flecheblanchedroite.png deleted file mode 100644 index 420e75c..0000000 Binary files a/sequences/web/tp/3/images/flecheblanchedroite.png and /dev/null differ diff --git a/sequences/web/tp/3/images/flickr.png b/sequences/web/tp/3/images/flickr.png deleted file mode 100644 index cb621e8..0000000 Binary files a/sequences/web/tp/3/images/flickr.png and /dev/null differ diff --git a/sequences/web/tp/3/images/fond_jaune.png b/sequences/web/tp/3/images/fond_jaune.png deleted file mode 100644 index f9d9d01..0000000 Binary files a/sequences/web/tp/3/images/fond_jaune.png and /dev/null differ diff --git a/sequences/web/tp/3/images/ico_epingle.png b/sequences/web/tp/3/images/ico_epingle.png deleted file mode 100644 index 79508ae..0000000 Binary files a/sequences/web/tp/3/images/ico_epingle.png and /dev/null differ diff --git a/sequences/web/tp/3/images/pastor.png b/sequences/web/tp/3/images/pastor.png deleted file mode 100644 index ebc218f..0000000 Binary files a/sequences/web/tp/3/images/pastor.png and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_1.JPG b/sequences/web/tp/3/images/photo_1.JPG deleted file mode 100644 index 6825d27..0000000 Binary files a/sequences/web/tp/3/images/photo_1.JPG and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_2.JPG b/sequences/web/tp/3/images/photo_2.JPG deleted file mode 100644 index c56976f..0000000 Binary files a/sequences/web/tp/3/images/photo_2.JPG and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_3.JPG b/sequences/web/tp/3/images/photo_3.JPG deleted file mode 100644 index e1524d6..0000000 Binary files a/sequences/web/tp/3/images/photo_3.JPG and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_4.JPG b/sequences/web/tp/3/images/photo_4.JPG deleted file mode 100644 index 63be7ca..0000000 Binary files a/sequences/web/tp/3/images/photo_4.JPG and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_min_1.jpg b/sequences/web/tp/3/images/photo_min_1.jpg deleted file mode 100644 index 53e5d3a..0000000 Binary files a/sequences/web/tp/3/images/photo_min_1.jpg and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_min_2.jpg b/sequences/web/tp/3/images/photo_min_2.jpg deleted file mode 100644 index 8f2cf89..0000000 Binary files a/sequences/web/tp/3/images/photo_min_2.jpg and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_min_3.jpg b/sequences/web/tp/3/images/photo_min_3.jpg deleted file mode 100644 index 2e4df44..0000000 Binary files a/sequences/web/tp/3/images/photo_min_3.jpg and /dev/null differ diff --git a/sequences/web/tp/3/images/photo_min_4.jpg b/sequences/web/tp/3/images/photo_min_4.jpg deleted file mode 100644 index d653c81..0000000 Binary files a/sequences/web/tp/3/images/photo_min_4.jpg and /dev/null differ diff --git a/sequences/web/tp/3/images/rss.png b/sequences/web/tp/3/images/rss.png deleted file mode 100644 index bf7f13d..0000000 Binary files a/sequences/web/tp/3/images/rss.png and /dev/null differ diff --git a/sequences/web/tp/3/images/separateur.png b/sequences/web/tp/3/images/separateur.png deleted file mode 100644 index cbd99e8..0000000 Binary files a/sequences/web/tp/3/images/separateur.png and /dev/null differ diff --git a/sequences/web/tp/3/images/twitter.png b/sequences/web/tp/3/images/twitter.png deleted file mode 100644 index 3a580bc..0000000 Binary files a/sequences/web/tp/3/images/twitter.png and /dev/null differ diff --git a/sequences/web/tp/3/images/vimeo.png b/sequences/web/tp/3/images/vimeo.png deleted file mode 100644 index 9032dd0..0000000 Binary files a/sequences/web/tp/3/images/vimeo.png and /dev/null differ diff --git a/sequences/web/tp/4/TP 4 - sujet calculatrice.pdf b/sequences/web/tp/4/TP 4 - sujet calculatrice.pdf deleted file mode 100644 index 07b2618..0000000 Binary files a/sequences/web/tp/4/TP 4 - sujet calculatrice.pdf and /dev/null differ diff --git a/sequences/web/tp/4/image/GRAPH35.png b/sequences/web/tp/4/image/GRAPH35.png deleted file mode 100644 index edcbf39..0000000 Binary files a/sequences/web/tp/4/image/GRAPH35.png and /dev/null differ diff --git a/sequences/web/tp/4/image/img_header.PNG b/sequences/web/tp/4/image/img_header.PNG deleted file mode 100644 index 34da9a4..0000000 Binary files a/sequences/web/tp/4/image/img_header.PNG and /dev/null differ diff --git a/sequences/web/tp/4/image/ti83.png b/sequences/web/tp/4/image/ti83.png deleted file mode 100644 index 2f39741..0000000 Binary files a/sequences/web/tp/4/image/ti83.png and /dev/null differ diff --git a/sequences/web/tp/intro.pdf b/sequences/web/tp/intro.pdf deleted file mode 100644 index 9b3ac28..0000000 Binary files a/sequences/web/tp/intro.pdf and /dev/null differ diff --git a/sequences/web/tp/tp1_decouverte_html.md b/sequences/web/tp/tp1_decouverte_html.md new file mode 100644 index 0000000..6c284ca --- /dev/null +++ b/sequences/web/tp/tp1_decouverte_html.md @@ -0,0 +1,274 @@ +# TP 1 : Decouverte du HTML + + + +--- + +## Objectifs + +- Comprendre la structure de base d'une page HTML5 +- Decouvrir les principales balises HTML +- Savoir modifier le contenu d'une page web +- Comprendre le lien entre HTML et CSS + +--- + +## Partie 1 : Mise en situation (5 min) + +### Qu'est-ce qu'une page web ? + +Quand vous consultez un site web, votre **navigateur** (Chrome, Firefox, Edge...) recoit du **code** depuis un **serveur** et l'interprete pour afficher la page. + +![client_serveur.jpg](../assets/client_serveur.jpg) + +Ce code est principalement ecrit en deux langages : +- **HTML** (HyperText Markup Language) : definit le **contenu** (texte, images, liens...) +- **CSS** (Cascading Style Sheets) : definit la **mise en forme** (couleurs, tailles, polices...) + +### A vous ! + +Ouvrez le site du lycee dans votre navigateur. Faites un **clic droit** sur la page, puis choisissez **"Afficher le code source"**. + +Vous voyez le code HTML de la page ! C'est ce code que le navigateur interprete pour produire ce que vous voyez a l'ecran. + +--- + +## Partie 2 : Structure de base d'une page HTML5 (10 min) + +### Ouvrir le fichier + +1. Lancez **Notepad++** +2. Ouvrez le fichier `tp/1/index.html` +3. Ouvrez egalement ce meme fichier dans votre navigateur (double-clic dessus) + +### La structure HTML5 + +Toute page HTML5 respecte cette structure de base : + +```html + + + + + Titre de la page + + + + + +``` + +| Element | Role | +|---------|------| +| `` | Indique qu'il s'agit d'une page HTML5 | +| `` | Balise principale qui englobe tout le contenu | +| `` | En-tete : informations pour le navigateur (non affichees) | +| `` | Encodage des caracteres (accents, etc.) | +| `` | Titre affiche dans l'onglet du navigateur | +| `<body>` | Corps de la page : tout ce qui est affiche | + +### Exercice 2.1 + +En observant le fichier `index.html` dans Notepad++ : + +1. Reperer les lignes correspondant au conteneur d'en-tete (`<head>`). +2. Quel est le titre de la page ? Ou apparait-il dans le navigateur ? +3. Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ? +4. Que se passe-t-il si vous supprimez la ligne `<meta charset="utf-8" />` ? (Testez puis remettez-la !) + +--- + +## Partie 3 : Les balises de contenu + +### Les titres + +HTML propose 6 niveaux de titres, de `<h1>` (le plus grand) a `<h6>` (le plus petit) : + +```html +<h1>Titre principal</h1> +<h2>Sous-titre</h2> +<h3>Sous-sous-titre</h3> +``` + +### Exercice 3.1 + +Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat dans le navigateur. Remettez `<h1>`. + +### Les paragraphes et la mise en forme + +```html +<p>Ceci est un paragraphe.</p> +<p>Voici du texte <strong>en gras</strong> et du texte <em>en italique</em>.</p> +``` + +| Balise | Effet | Exemple | +|--------|-------|---------| +| `<p>` | Paragraphe | `<p>Un texte.</p>` | +| `<strong>` | Texte important (gras) | `<strong>important</strong>` | +| `<em>` | Texte mis en valeur (italique) | `<em>attention</em>` | +| `<br />` | Retour a la ligne | `Ligne 1<br />Ligne 2` | +| `<hr />` | Ligne horizontale de separation | `<hr />` | + +> **Bonne pratique** : Utilisez `<strong>` plutot que `<b>` et `<em>` plutot que `<i>`. Ces balises sont plus modernes et accessibles. + +### Exercice 3.2 + +Dans le fichier `index.html`, reperer la phrase avec "Le ciel est bleu comme la mer". Comment le mot "mer" est-il mis en gras ? + +### Les listes + +```html +<!-- Liste non ordonnee (puces) --> +<ul> + <li>Premier element</li> + <li>Deuxieme element</li> +</ul> + +<!-- Liste ordonnee (numerotee) --> +<ol> + <li>Etape 1</li> + <li>Etape 2</li> +</ol> +``` + +### Les liens hypertextes + +Les liens permettent de naviguer entre les pages. C'est le principe fondamental du Web ! + +```html +<a href="https://fr.wikipedia.org">Aller sur Wikipedia</a> +``` + +- `href` : l'adresse (URL) vers laquelle le lien pointe +- Le texte entre `<a>` et `</a>` : ce qui est affiche et cliquable + +### Les images + +```html +<img src="images/photo.jpg" alt="Description de l'image" /> +``` + +- `src` : chemin vers le fichier image +- `alt` : texte alternatif (affiche si l'image ne charge pas, utile pour l'accessibilite) + +### Exercice 3.3 + +Dans le fichier `index.html`, observez la section "Les grands noms de l'informatique" : + +1. Combien de liens y a-t-il dans cette liste ? +2. Cliquez sur un lien. Vers quelle page mene-t-il ? +3. Quel attribut contient l'adresse du lien ? +4. Quel attribut affiche une info-bulle au survol de la souris ? + +### Les tableaux + +```html +<table> + <tr> + <th>En-tete 1</th> + <th>En-tete 2</th> + </tr> + <tr> + <td>Donnee 1</td> + <td>Donnee 2</td> + </tr> +</table> +``` + +| Balise | Role | +|--------|------| +| `<table>` | Definit le tableau | +| `<tr>` | Definit une ligne (table row) | +| `<th>` | Cellule d'en-tete (table header) | +| `<td>` | Cellule de donnees (table data) | + +--- + +## Partie 4 : Decouvrir le CSS + +### Le lien entre HTML et CSS + +Dans le `<head>` du fichier `index.html`, reperer cette ligne : + +```html +<link rel="stylesheet" href="style.css" /> +``` + +C'est elle qui relie la page HTML a sa feuille de style CSS. + +### Exercice 4.1 + +1. Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ? +2. Remettez la ligne et sauvegardez. + +### Le fichier CSS + +Ouvrez le fichier `tp/1/style.css` dans Notepad++. Le CSS fonctionne ainsi : + +```css +selecteur { + propriete: valeur; +} +``` + +Exemple : +```css +h1 { + color: blue; /* couleur du texte */ + font-size: 32px; /* taille du texte */ + background-color: #76d7c4; /* couleur de fond */ +} +``` + +### Exercice 4.2 + +1. Dans `style.css`, trouvez la regle qui s'applique aux balises `<h1>`. Quelle est la couleur du texte ? +2. Modifiez la couleur du `<h1>` en bleu (`color: blue;`). Sauvegardez et rafraichissez. +3. Dans le CSS, ajoutez une regle pour les paragraphes : + +```css +p { + color: darkgreen; + font-size: 16px; +} +``` + +4. Sauvegardez et observez le resultat. + +> **Pour choisir des couleurs** : vous pouvez utiliser des noms (`red`, `blue`, `navy`...) ou des codes hexadecimaux (`#FF0000`, `#0000FF`...). Voir : https://htmlcolorcodes.com/fr/ + +--- + +## Partie 5 : Synthese (10 min) + +### Exercice final : Completer le tableau des balises + +Dans le fichier `tp/1/index.html`, vous trouverez un tableau intitule "Les balises HTML que j'ai decouvertes". Les deux premieres lignes sont deja remplies. + +**Completez les lignes restantes** en vous aidant de ce que vous avez appris durant ce TP. + +Pour chaque balise, indiquez : +- Sa **description** (a quoi elle sert) +- Un **exemple d'utilisation** (un petit bout de code) + +Les balises a completer : `<h1>` a `<h6>`, `<br />`, `<strong>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<table>`, `<a>`, `<img />`, `<hr />`. + +### Aide + +| Balise | Description | +|--------|-------------| +| `<h1>` a `<h6>` | Titres de niveau 1 (le plus grand) a 6 (le plus petit) | +| `<br />` | Retour a la ligne | +| `<strong>` | Texte important, affiche en gras | +| `<ul>` | Liste non ordonnee (a puces) | +| `<ol>` | Liste ordonnee (numerotee) | +| `<li>` | Element d'une liste | +| `<dl>` | Liste de definitions | +| `<table>` | Tableau | +| `<a>` | Lien hypertexte | +| `<img />` | Image | +| `<hr />` | Ligne horizontale de separation | + +--- + + <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>. diff --git a/sequences/web/tp/tp2_experience_utilisateur.md b/sequences/web/tp/tp2_experience_utilisateur.md new file mode 100644 index 0000000..a873dac --- /dev/null +++ b/sequences/web/tp/tp2_experience_utilisateur.md @@ -0,0 +1,251 @@ +# TP 2 : L'experience utilisateur (UX) + + + +--- + +## Objectifs + +- Comprendre ce qu'est l'experience utilisateur (UX) +- Savoir evaluer la qualite d'un site web +- Identifier les bonnes et mauvaises pratiques de conception web +- Developper un regard critique sur les interfaces numeriques + +--- + +## Partie 1 : Qu'est-ce que l'UX ? (10 min) + +### Definition + +**L'experience utilisateur** (en anglais *User eXperience*, abregee **UX**) designe la qualite de l'experience vecue par une personne lorsqu'elle utilise un site web, une application ou un produit numerique. + +Une bonne UX, c'est quand : +- On trouve facilement ce qu'on cherche +- Le site est agreable a utiliser +- On n'est pas perdu dans la navigation +- Le site fonctionne bien sur tous les appareils + +### Les 4 criteres essentiels + +| Critere | Question a se poser | Exemple | +|---------|---------------------|---------| +| **Lisibilite** | Le texte est-il facile a lire ? | Taille de police suffisante, contraste texte/fond | +| **Navigation** | Trouve-t-on facilement ce qu'on cherche ? | Menu clair, fil d'Ariane, liens visibles | +| **Rapidite** | Le site charge-t-il vite ? | Pas d'attente excessive, images optimisees | +| **Adaptabilite** | Le site s'affiche-t-il bien sur mobile ? | Design responsive, boutons assez grands | + +### Exercice 1.1 + +Repondez aux questions suivantes : + +1. Citez un site web que vous trouvez agreable a utiliser. Pourquoi ? +2. Citez un site web que vous trouvez penible a utiliser. Pourquoi ? +3. Parmi les 4 criteres ci-dessus, lequel vous semble le plus important ? Justifiez. + +--- + +## Partie 2 : Analyse de sites web (25 min) + +### Consigne + +Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessous. Pour chaque site, attribuez une note de 1 a 5 pour chaque critere. + +**Echelle de notation :** +- 1 = Tres mauvais +- 2 = Mauvais +- 3 = Moyen +- 4 = Bon +- 5 = Tres bon + +### Sites a evaluer + +| N. | Site | Adresse | +|----|------|---------| +| 1 | Wikipedia | https://fr.wikipedia.org | +| 2 | Site du lycee | https://charlotteperriand.etab.ac-lille.fr | +| 3 | Un site de votre choix | (jeu video, sport, musique...) | + +### Grille d'evaluation + +Recopiez et completez ce tableau pour **chacun des 3 sites** : + +**Site 1 : Wikipedia** + +| Critere | Note /5 | Justification | +|---------|---------|---------------| +| Lisibilite | | | +| Navigation | | | +| Rapidite | | | +| Adaptabilite (testez en redimensionnant la fenetre) | | | +| **Total** | **/20** | | + +**Site 2 : Site du lycee** + +| Critere | Note /5 | Justification | +|---------|---------|---------------| +| Lisibilite | | | +| Navigation | | | +| Rapidite | | | +| Adaptabilite | | | +| **Total** | **/20** | | + +**Site 3 : ..................** + +| Critere | Note /5 | Justification | +|---------|---------|---------------| +| Lisibilite | | | +| Navigation | | | +| Rapidite | | | +| Adaptabilite | | | +| **Total** | **/20** | | + +### Questions de synthese + +4. Quel site a obtenu la meilleure note ? Pourquoi selon vous ? +5. Pour le site le moins bien note, proposez **2 ameliorations concretes**. +6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12) + +--- + +## Partie 3 : Bonnes et mauvaises pratiques (15 min) + +### Comparaison avant/apres + +Voici des exemples de **mauvaises pratiques** courantes et comment les corriger : + +#### Exemple 1 : La lisibilite + +**Mauvais** : +``` +Texte jaune sur fond blanc, police taille 10px, pas d'espacement. +Tout est colle, illisible, fatigant pour les yeux. +``` + +**Bon** : +``` +Texte sombre sur fond clair, police taille 16px, interlignes aeres. +Le texte respire, on a envie de lire. +``` + +**Regle** : Toujours avoir un bon **contraste** entre le texte et le fond. La taille minimale recommandee est **16px**. + +#### Exemple 2 : La navigation + +**Mauvais** : +- Pas de menu visible +- Liens caches ou non cliquables +- On ne sait pas ou on est dans le site + +**Bon** : +- Menu toujours visible en haut de page +- Liens soulignes ou en couleur +- Fil d'Ariane ("Accueil > Rubrique > Page") + +**Regle** : L'utilisateur doit toujours savoir **ou il est** et **comment revenir en arriere**. + +#### Exemple 3 : L'adaptabilite mobile + +**Mauvais** : +- Le site deborde de l'ecran sur telephone +- Il faut zoomer pour lire le texte +- Les boutons sont trop petits pour etre cliques au doigt + +**Bon** : +- Le contenu s'adapte a la taille de l'ecran +- Le texte reste lisible sans zoom +- Les boutons sont assez grands (minimum 44x44 pixels) + +**Regle** : Plus de la moitie du trafic web se fait sur mobile. Un site **doit** s'adapter a toutes les tailles d'ecran. + +### Exercice 3.1 + +Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique : + +| Situation | Bonne / Mauvaise ? | +|-----------|---------------------| +| Un menu de navigation avec 25 liens | | +| Un bouton "Retour en haut" sur une longue page | | +| Du texte gris clair sur fond blanc | | +| Des images qui mettent 10 secondes a charger | | +| Un formulaire qui indique clairement les erreurs en rouge | | +| Un site qui fonctionne uniquement sur ordinateur | | +| Un lien qui change de couleur quand on l'a deja visite | | +| Une page d'accueil avec 3 pop-ups publicitaires | | + +--- + +## Partie 4 : Quiz recapitulatif (10 min) + +Repondez aux questions suivantes : + +**Question 1** : Que signifie UX ? +- a) Universal eXchange +- b) User eXperience +- c) Ultra eXpress +- d) Unified eXtension + +**Question 2** : Quelle taille de police minimale est recommandee pour le texte d'un site web ? +- a) 8px +- b) 12px +- c) 16px +- d) 24px + +**Question 3** : Pourquoi est-il important qu'un site s'adapte aux mobiles ? +- a) Parce que c'est plus joli +- b) Parce que plus de la moitie du trafic web est sur mobile +- c) Parce que Google l'exige +- d) Ce n'est pas important + +**Question 4** : Lequel de ces elements ameliore la navigation ? +- a) Supprimer le menu +- b) Ajouter un fil d'Ariane +- c) Mettre tous les liens en noir sans soulignement +- d) Cacher le bouton retour + +**Question 5** : Un bon contraste signifie : +- a) Texte et fond de la meme couleur +- b) Texte clair sur fond clair +- c) Texte sombre sur fond clair (ou inversement) +- d) Utiliser uniquement du noir et blanc + +**Question 6** : Quel outil du navigateur permet de simuler un affichage mobile ? +- a) Le gestionnaire de telechargements +- b) Les outils de developpement (F12) +- c) Le mode navigation privee +- d) Le gestionnaire de favoris + +--- + +## Correction + +<details> +<summary><strong>Correction Exercice 3.1</strong></summary> + +| Situation | Reponse | +|-----------|---------| +| Un menu de navigation avec 25 liens | **Mauvaise** - Trop de choix, le menu doit etre simplifie | +| Un bouton "Retour en haut" sur une longue page | **Bonne** - Facilite la navigation | +| Du texte gris clair sur fond blanc | **Mauvaise** - Contraste insuffisant, illisible | +| Des images qui mettent 10 secondes a charger | **Mauvaise** - Trop lent, les images doivent etre optimisees | +| Un formulaire qui indique clairement les erreurs en rouge | **Bonne** - L'utilisateur comprend ce qu'il doit corriger | +| Un site qui fonctionne uniquement sur ordinateur | **Mauvaise** - Doit etre adaptatif (responsive) | +| Un lien qui change de couleur quand on l'a deja visite | **Bonne** - L'utilisateur sait ou il est deja alle | +| Une page d'accueil avec 3 pop-ups publicitaires | **Mauvaise** - Intrusif et desagreable | + +</details> + +<details> +<summary><strong>Correction Quiz</strong></summary> + +1. **b) User eXperience** +2. **c) 16px** +3. **b) Parce que plus de la moitie du trafic web est sur mobile** +4. **b) Ajouter un fil d'Ariane** +5. **c) Texte sombre sur fond clair (ou inversement)** +6. **b) Les outils de developpement (F12)** + +</details> + +--- + + <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>. diff --git a/sequences/web/tp/tp3_css_ma_page.md b/sequences/web/tp/tp3_css_ma_page.md new file mode 100644 index 0000000..de19ad9 --- /dev/null +++ b/sequences/web/tp/tp3_css_ma_page.md @@ -0,0 +1,287 @@ +# TP 3 : Ma premiere page web en CSS + + + +--- + +## Objectifs + +- Creer une page web personnelle en HTML +- Decouvrir le CSS pour la mise en forme +- Appliquer des couleurs, des polices, des bordures et des marges +- Decouvrir les balises semantiques HTML5 + +--- + +## Presentation du projet + +Vous allez creer **votre propre page web** sur le theme de votre choix : +- Un sport +- Un artiste ou un genre de musique +- Un pays ou une destination de voyage +- Un jeu video +- Tout autre sujet qui vous passionne ! + +Vous partirez d'un fichier HTML de base (`tp3_template.html`) et d'un fichier CSS (`tp3_style.css`) que vous allez completer etape par etape. + +### Preparation + +1. Ouvrez les fichiers `tp3_template.html` et `tp3_style.css` dans **Notepad++** +2. Ouvrez `tp3_template.html` dans votre navigateur +3. A chaque modification, sauvegardez dans Notepad++ (Ctrl+S) puis rafraichissez le navigateur (F5) + +--- + +## Etape 1 : La structure HTML (15 min) + +### Consigne + +Ouvrez le fichier `tp3_template.html`. Vous verrez une structure de base deja en place. Votre travail est de **remplir le contenu** selon votre theme. + +### A faire + +1. **Modifiez le titre** de la page (balise `<title>`) avec le nom de votre sujet +2. **Modifiez le titre principal** (`<h1>`) avec le nom de votre sujet +3. **Redigez le premier paragraphe** : presentez votre sujet en 2-3 phrases +4. **Completez la section "Pourquoi j'aime..."** : + - Modifiez le sous-titre `<h2>` + - Ajoutez au moins **3 elements** dans la liste `<ul>` +5. **Ajoutez une image** : + - Trouvez une image libre de droits sur Internet + - Enregistrez-la dans le meme dossier que votre fichier HTML + - Completez la balise `<img>` avec le bon chemin et une description +6. **Ajoutez des liens** : + - Dans la section "Pour en savoir plus", ajoutez au moins **2 liens** vers des sites en rapport avec votre sujet + +### Verifiez ! + +Sauvegardez et rafraichissez le navigateur. Votre page doit afficher : +- Un titre +- Un paragraphe de presentation +- Une liste a puces +- Une image +- Des liens cliquables + +--- + +## Etape 2 : Decouvrir le CSS (15 min) + +### Comment ca marche ? + +Le fichier `tp3_style.css` est deja lie a votre page HTML grace a cette ligne dans le `<head>` : + +```html +<link rel="stylesheet" href="tp3_style.css" /> +``` + +Le CSS s'ecrit sous cette forme : + +```css +selecteur { + propriete: valeur; +} +``` + +Le **selecteur** cible un element HTML. La **propriete** definit ce qu'on modifie. La **valeur** definit comment on le modifie. + +### A faire + +Ouvrez `tp3_style.css` et effectuez les modifications suivantes : + +**1. Couleur de fond de la page** + +Trouvez la regle `body` et modifiez la couleur de fond (`background-color`). Choisissez une couleur qui correspond a votre theme ! + +Exemples de couleurs : +- `#f0f8ff` (bleu tres clair) +- `#fff8dc` (creme) +- `#f0fff0` (vert tres clair) +- `#fff0f5` (rose tres clair) + +> Outil pratique : https://htmlcolorcodes.com/fr/ + +**2. Couleur et police du titre** + +Modifiez la regle `h1` : +- Changez la couleur du texte avec `color` +- Changez la police avec `font-family` (exemples : `Arial`, `Georgia`, `Verdana`, `"Trebuchet MS"`) + +**3. Couleur du texte** + +Modifiez la regle `p` pour changer la couleur des paragraphes. + +**4. Style des liens** + +Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement : + +```css +a { + color: darkorange; + text-decoration: none; +} +``` + +### Verifiez ! + +Votre page devrait maintenant avoir : +- Une couleur de fond personnalisee +- Un titre colore avec une police de votre choix +- Des paragraphes d'une couleur harmonieuse +- Des liens d'une couleur differente + +--- + +## Etape 3 : Ameliorer la presentation (15 min) + +### Les marges + +En CSS, deux proprietes controlent l'espace autour des elements : +- **`margin`** : espace **exterieur** (entre l'element et ses voisins) +- **`padding`** : espace **interieur** (entre le bord de l'element et son contenu) + +``` ++------ margin ------+ +| +--- padding ---+ | +| | Contenu | | +| +---------------+ | ++--------------------+ +``` + +### A faire + +**1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords : + +```css +body { + /* ... vos proprietes existantes ... */ + padding: 20px 40px; +} +``` + +**2. Ajoutez une bordure et un fond au titre** : + +```css +h1 { + /* ... vos proprietes existantes ... */ + background-color: #333; + color: white; + padding: 15px; + border-radius: 8px; + text-align: center; +} +``` + +**3. Mettez en forme l'image** : + +```css +img { + border: 3px solid #333; + border-radius: 10px; + max-width: 400px; +} +``` + +`max-width: 400px` empeche l'image d'etre trop grande. `border-radius` arrondit les coins. + +**4. Stylisez la liste** : + +Ajoutez cette regle dans votre CSS : + +```css +ul { + background-color: #eee; + padding: 15px 30px; + border-radius: 5px; +} +``` + +### Verifiez ! + +Votre page devrait maintenant etre bien plus agreable visuellement, avec des espaces, des bordures et des couleurs harmonieuses. + +--- + +## Etape 4 : Les sections HTML5 (15 min) + +### Introduction aux balises semantiques + +HTML5 propose des balises qui donnent du **sens** a la structure de la page : + +| Balise | Role | +|--------|------| +| `<header>` | En-tete de la page (titre, logo, banniere) | +| `<nav>` | Zone de navigation (menu, liens principaux) | +| `<main>` | Contenu principal de la page | +| `<footer>` | Pied de page (auteur, mentions, liens secondaires) | + +Ces balises fonctionnent comme des `<div>` mais elles indiquent clairement le role de chaque section. + +### A faire + +Dans votre fichier HTML, reorganisez votre page avec ces balises : + +1. **Entourez votre titre `<h1>` avec `<header>`** : + +```html +<header> + <h1>Mon sujet</h1> +</header> +``` + +2. **Ajoutez un `<footer>` en bas de page** : + +```html +<footer> + <p>Page creee par [votre prenom] - SNT 2025</p> +</footer> +``` + +3. **Stylisez le footer** dans votre CSS : + +```css +footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px; + margin-top: 30px; + border-radius: 5px; +} +``` + +--- + +## Bonus : Creer une deuxieme page + +Si vous avez termine en avance, voici un defi supplementaire : + +1. **Creez un nouveau fichier** `page2.html` avec la meme structure de base (copiez `tp3_template.html`) +2. **Liez-le au meme CSS** (`tp3_style.css`) +3. **Ajoutez du contenu** sur un aspect precis de votre sujet (par exemple : les regles d'un sport, la discographie d'un artiste, les personnages d'un jeu video...) +4. **Reliez les deux pages** avec des liens : + - Dans `tp3_template.html`, ajoutez : `<a href="page2.html">Voir la page 2</a>` + - Dans `page2.html`, ajoutez : `<a href="tp3_template.html">Retour a l'accueil</a>` + +Felicitations, vous avez cree votre premier **site web** de plusieurs pages ! + +--- + +## Recapitulatif des proprietes CSS vues dans ce TP + +| Propriete | Effet | Exemple | +|-----------|-------|---------| +| `background-color` | Couleur de fond | `background-color: #f0f0f0;` | +| `color` | Couleur du texte | `color: navy;` | +| `font-family` | Police de caracteres | `font-family: Arial;` | +| `font-size` | Taille du texte | `font-size: 18px;` | +| `text-align` | Alignement du texte | `text-align: center;` | +| `text-decoration` | Decoration (soulignement...) | `text-decoration: none;` | +| `padding` | Espace interieur | `padding: 10px;` | +| `margin` | Espace exterieur | `margin: 20px;` | +| `border` | Bordure | `border: 2px solid black;` | +| `border-radius` | Coins arrondis | `border-radius: 8px;` | +| `max-width` | Largeur maximale | `max-width: 400px;` | + +--- + + <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>. diff --git a/sequences/web/tp/tp3_style.css b/sequences/web/tp/tp3_style.css new file mode 100644 index 0000000..93a3586 --- /dev/null +++ b/sequences/web/tp/tp3_style.css @@ -0,0 +1,32 @@ +/* === Couleur de fond de la page === */ +body { + background-color: #f5f5f5; + font-family: Arial, sans-serif; +} + +/* === Titre principal === */ +h1 { + color: #333; + font-size: 32px; +} + +/* === Sous-titres === */ +h2 { + color: #555; +} + +/* === Paragraphes === */ +p { + color: #333; + font-size: 16px; +} + +/* === Liens === */ +a { + color: blue; +} + +/* === Images === */ +img { + max-width: 300px; +} diff --git a/sequences/web/tp/tp3_template.html b/sequences/web/tp/tp3_template.html new file mode 100644 index 0000000..0c00ec4 --- /dev/null +++ b/sequences/web/tp/tp3_template.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="stylesheet" href="tp3_style.css" /> + <title>Ma page - [Votre sujet] + + + + +

    [Le titre de votre sujet]

    + + +

    Presentation

    +

    + [Ecrivez ici 2 a 3 phrases pour presenter votre sujet. + De quoi s'agit-il ? Pourquoi avez-vous choisi ce theme ?] +

    + + + [Description de l'image] + + +

    Pourquoi j'aime [votre sujet]

    + + + +

    Pour en savoir plus

    + + + +