Ajoute le TP HTML + début TP2

Maj template Activité
2025-10-08 20:16:15 +02:00 · 2025-10-08 20:15:49 +02:00
6 changed files with 352 additions and 2 deletions
--- a/src/cours/CIEL1/04-web-statique/tp/images/home.png
+++ b/src/cours/CIEL1/04-web-statique/tp/images/home.png
--- a/src/cours/CIEL1/04-web-statique/tp/images/image.png
+++ b/src/cours/CIEL1/04-web-statique/tp/images/image.png
--- a/src/cours/CIEL1/04-web-statique/tp/images/logo.png
+++ b/src/cours/CIEL1/04-web-statique/tp/images/logo.png
--- a/src/cours/CIEL1/04-web-statique/tp/tp01-html-bases.md
+++ b/src/cours/CIEL1/04-web-statique/tp/tp01-html-bases.md
@ -0,0 +1,209 @@
+# Activité 1 - HTML/CSS - Page d'accueil
+
+## Objectifs
+
+### Objectifs pédagogiques
+
+- Découvrir la structure d'un fichier HTML et la mettre en œuvre
+- Styler quelques éléments avec une feuille de style CSS
+- Découvrir les balises de structure principales
+- Apprendre à utiliser une documentation technique
+
+### Objectifs techniques
+
+- Un petit cabinet d'architectes souhaite développer un site web pour donner de la visibilité à ses réalisations et attirer de nouveaux clients. 
+- Vous développerez la page d'accueil de leur site web.
+
+## Validation
+
+### Livrables
+
+- Le code final
+- Le compte-rendu de l'activité
+
+Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
+- Le compte rendu peut-être livré au format Markdown ou PDF. 
+- Si vous choisissez le Markdown, attention à bien livrer les éventuelles images et à la validité des lien
+
+### Résultats attendus
+
+- [ ] La page web s'affiche sans erreur.
+- [ ] Votre code est versionné sous git, chaque étape fait l'objet d'un commit.
+- [ ] Le code est propre, correctement formaté, les variables, fonctions et paramètres sont bien nommés, les conventions sont respectées.
+- [ ] La page web ressemble au résultat suivant :
+
+### Critères d'évaluation
+
+- 50% Technique (10pts)
+    - Code fonctionnel
+    - Réponses dans le compte-rendu
+    - Questions orale et compréhension générale
+    - Connaissance du cours
+- 50% Professionnalisme (10pts)
+    - Posture professionnelle durant l'activité (3pts)
+    - Qualité du rendu (Compte rendu - Documentation - Code) (3pts)
+    - Respect des délais/horaires (2pts)
+    - Autonomie dans la progression (2pts)
+- Bonus +2pts
+
+## Étapes
+
+### 0 - Structure du projet
+
+**Objectif :** Développer une page HTML comportant simplement un titre
+
+```admonish travail
+1. Créer un nouveau répertoire de travail dans votre espace personnel
+1. Ouvrir ce répertoire avec Visual Studio Code
+1. Ajouter l'extension "HTML CSS Support" par "ecmel"
+1. Initialiser un dépôt git avec la commande `git init`
+1. Créer un nouveau fichier `index.html`
+1. Créer un fichier `compte-rendu.md` pour votre compte rendu, que vous versionnerez en même temps que votre projet.
+1. Créer un premier commit pour enregistrer l'état du projet :
+    - Ajouter tous les fichiers avec `git add .`
+    - Vérifier que vos fichiers sont pris en compte avec `git status` (ils doivent s'afficher en vert)
+    - Faire un commit avec `git commit`. Mettre le message de commit suivant : `Etape 0 - Structure du projet`
+1. Vérifier que votre commit existe bien avec `git log`
+```
+
+```admonish note title="Dans le compte rendu"
+- Rien à écrire pour cette partie
+```
+
+### 1 - Structure de la page HTML
+
+**Objectif :** Développer la structure de la page HTML avec les balises minimales
+
+```admonish travail
+1. Copier le code ci-dessous dans votre fichier `index.html`
+1. Ajouter un titre visible à la page (`Numérobis - Cabinet d'architectes`) en vous aidant de la [documentation](https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs)
+1. Dans un terminal, lancer un serveur web de développement avec la commande `python -m http.server` puis rendez vous sur le lien [http://localhost:8000/](http://localhost:8000/)
+1. Vérifier que votre titre s'affiche en haut de la page
+1. Ajouter un paragraphe sous le titre pour donner la devise du cabinet d'architectes : `Les meilleurs (et les seuls) architectes d'Alexandrie`
+1. Actualisez votre page dans le navigateur pour vérifier qu'elle a été mise à jour
+1. Faites un commit avec le message `1 - Structure de la page HTML` (après avoir complété votre compte-rendu)
+```
+
+```admonish note title="Copier"
+~~~html
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Numérobis - Cabinet d'architectes</title>
+  </head>
+  <body>
+  </body>
+</html>
+~~~
+```
+
+```admonish note title="Dans le compte rendu"
+1. Qu'est-ce qu'une balise HTML, et de quoi est-elle composée ?
+2. À l'aide de la documentation, expliquer le rôle des différentes sections :
+    - `<!doctype html>`
+    - `<html>`
+    - `<head>`
+    - `<body>`
+3. Quelle section est visible dans votre navigateur lorsque vous affichez la page ?
+4. Quelle est la différence entre `title` et `h1` ?
+```
+
+### 2 - Un peu plus de contenu
+
+**Objectif :** Ajouter des élements supplémentaires à la page pour la compléter
+
+```admonish travail
+1. Ajoutez la description ci-dessous sous forme de [paragraphe](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/p). 
+    - [Mettez en gras](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/b) certains mot-clés de votre choix pour aider à mettre certains éléments du texte en valeur. 
+    - [Sautez une ligne](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/br) à un endroit qui vous paraît pertinent
+2. Ajoutez un lien sur le mot `Alexandrie` du sous-titre.
+    - Ce lien pointera vers la [page wikipédia](https://fr.wikipedia.org/wiki/Alexandrie) de la ville d'Alexandrie. 
+    - Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/a).
+3. Ajoutez l'image `home.png` fournie, dans le but d'illustrer votre page. Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/img).
+4. Modifiez la taille de l'image à l'aide de l'attribut `width` de façon à ce qu'elle fasse 800 pixels de large
+5. Faire un nouveau commit (après avoir complété votre compte-rendu).
+```
+
+```admonish note title="Copier"
+Créateurs d'espaces uniques, nous concevons des projets sur mesure qui allient élégance, innovation et durabilité. Notre équipe met son expertise au service de vos idées pour imaginer des lieux inspirants, fonctionnels et adaptés à vos besoins. Découvrez notre univers, où chaque projet raconte une histoire et où chaque détail est pensé pour révéler le meilleur de votre espace.
+```
+
+```admonish note title="Dans le compte rendu"
+1. Quelle est la balise utilisée pour créer des liens ?
+2. Comment préciser le lien vers lequel on veut pointer ?
+3. Qu'est-ce qu'un attribut dans une balise HTML ?
+2. A-t-on besoin de fermer la balise `<img>` ? Quels sont les attributs obligatoires ?
+3. Où doit se trouver le fichier de l'image à afficher ?
+```
+
+### 3 - D'autres pages : contacts et projets
+
+**Objectif :** Ajouter des liens vers d'autres pages
+
+```admonish travail
+1. Ajouter en haut de la page une liste non-ordonnée. 
+1. Ajouter dans cette liste trois éléments : 
+    - `Nos projets`
+    - `Nous contacter`
+    - `À propos`
+1. Créer trois nouveaux fichiers HTML : 
+    - `projets.html`
+    - `contact.html`
+    - `a-propos.html`
+1. Dans chacune de ces pages, ajouter en contenu du bloc `À copier` ci-dessous (en ajustant le titre)
+2. Transformer les trois éléments de la liste en liens vers les pages HTML que l'on vient juste de créer
+3. Faire un nouveau commit (après avoir complété votre compte-rendu).
+```
+
+```admonish note title="À copier"
+<!doctype html>
+<html lang="fr">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Numérobis - Titre</title>
+</head>
+
+<body>
+    <h1>Titre</h1>
+</body>
+
+</html>
+```
+
+```admonish note title="Dans le compte rendu"
+- Quels types de listes existent en HTML ? 
+- Où doivent se trouver les fichiers HTML pour qu'on puisse facilement faire un lien vers une autre page ?
+- Si on met les fichiers dans un sous-répertoire, comment modifier le lien pour qu'il fonctionne toujours ?
+```
+
+### 4 - Formulaire de contact
+
+**Objectif :** Créer la page contact
+
+```admonish travail
+1. Compléter la page `contact.html` en ajoutant un lien qui permette d'envoyer un mail à l'adresse `contact@numerobis.fr`
+2. Ajoutez les coordonnées du cabinet en essayant de respecter la forme suivante. Aidez-vous de ce que vous avez fait dans les parties précédentes.
+```
+
+```admonish success title="Résultat attendu"
+![Contact Screenshot](contact.png)
+```
+
+```admonish note title="Dans le compte rendu"
+- Expliquez ce que vous avez réalisé et les balises utilisées
+```
+
+
+## Pour aller plus loin
+
+### Bonus - Ajouter du contenu à la page "À propos"
+
+**Objectif**: Créer une page "À propos" avec du contenu personnalisé
+
+```admonish travail
+1. Réutilisez les éléments appris lors de cette activité pour créer une page "À propos" qui présente le cabinet d'architectes Numerobis. N'hésitez pas à faire preuve d'imagination.
+```
--- a/src/cours/CIEL1/04-web-statique/tp/tp02-css-bases.md
+++ b/src/cours/CIEL1/04-web-statique/tp/tp02-css-bases.md
@ -0,0 +1,141 @@
+# Titre activité
+
+## Objectifs
+
+### Objectifs pédagogiques
+
+- **Objectif** : Description
+
+### Objectifs techniques
+
+- **Objectif** : Description
+
+## Validation
+
+### Livrables
+
+- Le code final 
+- Le compte-rendu de l'activité
+
+Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
+- Le compte rendu peut-être livré au format Markdown ou PDF. 
+- Si vous choisissez le Markdown, attention à bien livrer les éventuelles images et à la validité des lien
+
+### Résultats attendus
+
+- [ ] Le programme se lance sans erreur.
+- [ ] Chaque fonction contient une docstring minimale expliquant sa fonctionnalité. Bonus : Doctsrings complètes au format Numpy.
+- [ ] Le code est propre, correctement formaté, les variables, fonctions et paramètres sont bien nommés, les conventions sont respectées.
+
+### Critères d'évaluation
+
+- 50% Technique (10pts)
+    - Code fonctionnel
+    - Réponses dans le compte-rendu
+    - Questions orale et compréhension générale
+    - Connaissance du cours
+- 50% Professionnalisme (10pts)
+    - Posture professionnelle durant l'activité (3pts)
+    - Qualité du rendu (Compte rendu - Documentation - Code) (3pts)
+    - Respect des délais/horaires (2pts)
+    - Autonomie dans la progression (2pts)
+- Bonus +2pts
+
+## Documents fournis
+
+- Cours
+- Docs
+- Code préalable
+
+## Étapes
+
+### 3 - Un peu de style
+
+**Objectif :** Ajouter une feuille de style
+
+```admonish travail
+1. Créer un nouveau fichier nommé `style.css` dans votre projet
+2. Ajouter le contenu suivant dans le fichier :
+    ~~~css
+    h1 {
+        color: blue; 
+    }
+    ~~~
+3. Ajouter la ligne suivante dans la section `head` de votre fichier `index.html`
+    ~~~html
+    <link rel="stylesheet" href="style.css">
+    ~~~
+4. Vérifier que le titre de votre site s'affiche désormais en bleu
+5. Faire un nouveau commit (après avoir complété votre compte-rendu).
+```
+
+```admonish note title="Dans le compte rendu"
+1. Que fait la ligne `<link rel="stylesheet" href="style.css">` ?
+1. Pourquoi on ajoute cette ligne dans la section `<head>` ?
+1. Expliquer ce qu'est une feuille de style à l'aide de la [documentation](https://developer.mozilla.org/fr/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content).
+2. Dans l'exemple de `style.css`, dites quel élément est :
+    - le sélecteur
+    - la propriété
+    - la valeur de propriété
+3. En CSS, expliquer ce que sont 
+    - les sélecteurs, 
+    - les propriétés 
+    - les valeurs de propriétés
+```
+
+### 4 - Un peu de créativité
+
+**Objectif :** Compléter le style de votre site web avec la feuille de style CSS
+
+```admonish travail
+1. Utilisez la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/text-align) pour centrer le titre de votre page
+1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet.
+1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).
+1. Utilisez la [documentation de Mozilla](https://developer.mozilla.org/fr/docs/Web/CSS/font-family) pour que la police par défaut de votre page soit `Helvetica`
+1. Utilisez la documentation pour que le lien sur `Alexandrie` devienne vert que lorsqu'on le survole avec la souris. Il doit rester noir sinon.
+1. Encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
+1. À l'aide des propriétés CSS [`margin-right`](https://developer.mozilla.org/fr/docs/Web/CSS/margin) `margin-left` et [`max-width`](https://developer.mozilla.org/fr/docs/Web/CSS/max-width.), essayez de :
+    - centrer le contenu de votre page 
+    - limiter le contenu à 800 pixels de large.
+1. Faites un nouveau commit (après avoir complété votre compte-rendu).
+```
+
+```admonish help title="Aide"
+- Pour selectionner un élément lorsqu'il est survolé, vous pouvez utiliser la pseudo-classe `element:hover`
+```
+
+```admonish note title="Dans le compte rendu"
+1. Expliquez comment selectionner
+    - par type d'élément
+    - par classe
+    - par id
+    - quand on survole avec la souris
+2. Expliquez les propriétés que vous avez utilisées (donnez leur nom et leur rôle)
+3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
+```
+
+
+## Pour aller plus loin
+
+### Bonus facile - titre
+
+**Objectif**:
+
+```admonish travail
+```
+
+
+### Bonus difficile - titre
+
+**Objectif** :
+
+```admonish travail
+```
+
+```admonish help title="Aide"
+```
+
+```admonish note title="Dans le compte rendu"
+```
+
+### Ressources
--- a/src/cours/annexes/template_activite.md
+++ b/src/cours/annexes/template_activite.md
@ -1,6 +1,6 @@
 # Titre activité

-## Objectifs du TP
+## Objectifs

 ### Objectifs pédagogiques

@ -15,7 +15,7 @@
 ### Livrables

 - Le code final 
- Le compte-rendu du TP
+- Le compte-rendu de l'activité

 Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
 - Le compte rendu peut-être livré au format Markdown ou PDF.
Author	SHA1	Message	Date
Alexis Fourmaux	927bdf236d	Ajoute le TP HTML + début TP2	2025-10-08 20:16:15 +02:00
Alexis Fourmaux	e9eca907f0	Maj template Activité	2025-10-08 20:15:49 +02:00