8.4 KiB
8.4 KiB
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
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`
- Rien à écrire pour cette partie
1 - Structure de la page HTML
Objectif : Développer la structure de la page HTML avec les balises minimales
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)
~~~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>
~~~
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
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).
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.
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
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).
<!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>
- 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
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.
- 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é
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.