210 lines
8.4 KiB
Markdown
210 lines
8.4 KiB
Markdown
|
# 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"
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
```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.
|
||
|
|
```
|