**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)
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).
- 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.
