Présentation d'un pays

Objectif

Intégrer des images
Comprendre le fonctionnement de la balise <details>
Réinvestir les notions de structure et de formatage de texte.

Initialisation de l'exercice

Creez un répertoire nommé ex02_pays dans votre répertoire designweb.
Dans ce répertoire créez un répertoire assets et dans celui-ci un sous-répertoire images
Créez un fichier [noDA]_index.html et un fichier [noDA]_paysage.html à la racine du projet avec la structure de base d'une page web.
Effectuez les ajouts suivants dans les deux fichiers.

Important

Pour cette exercice, TOUS vos fichiers doivent avoir le préfixe noDA_ (2541234_index.html, 2541234_Volcan.png, etc.)

Recherche de medias

Dans ce travail vous allez créer une page d'information sur le pays de votre choix et une page affichant des photos de paysage du pays.

Choisissez un pays avec lequel travailler
Demandez à ChatGPT de vous faire un texte de 500 mots sur le pays.
Accédez à la page Wikipedia pour récupérer des informations (vous en aurez besoin plus loin).

La balise `<details>`

Pour ce travail vous allez devoir utiliser la balise <details>. Demandez à Copilot de vous expliquer le fonctionnement de la balise et de vous générer un exemple. Assurez-vous de bien comprendre les explications qui vous sont fournies.

Favicon

Dans votre page [noDA]_index.html vous devez ajouter un favicon en format ICO du drapeau du pays.

L'image du drapeau peut être téléchargée depuis la page Wikipedia de votre pays.
Utilisez le site https://www.favicon.cc/ pour créer votre icône. Vous pouvez facilement téléverser une image et la convertir.

index.html

Utilisez les balises sémantiques qui vous semble les plus appropriées pour faire le découpage de votre page. Voici un exemple du résultat attendu.

Section "En bref"

Utilisez un titre de niveau 2 pour le sous-titre En bref.
Insérez ensuite une liste à puces numérotées.
Chaque items de la liste est une balise <details>.
Le texte des <summary> doit être en caractère gras.
Voici plus de détail sur chaque item de la liste.

1. Information sur le pays

Contient une liste à puces.
Les items sont la Capitale, la Population et la Superficie du pays avec les informations adéquate. (Vous trouverez facilement les informations sur Wikipedia)

2. Paysage

Trouvez une photo d'un paysage de votre pays et utilisez la balise <figure>
Dans une balise <figcaption>, insérez un lien vers la page [noDA]_paysage.html et assurez-vous qu'elle s'ouvre dans un nouvel onglet.
Le texte du lien est Voir plus d'images

3. Sources

Une liste à puces numérotées pour donner les sources de votre recherche
Pour la référence à ChatGPT (que vous allez utiliser pour générer le texte plus bas), demandez lui comment le citer correctement selon la norme APA7 et ajoutez la référence au point 1.
À l'item 2, ajoutez une référence à la page Wikipedia où vous avez trouvé les informations sur votre pays.
Enfin ajoutez une référence au site où vous avez trouvez l'image.
Terminez cette section par un trait horizontale.

Texte descriptif

Demandez à ChatGPT de vous écrire un texte de 500 mots sur votre pays.
Copiez se texte à la suite de la page et formatez le correctement en paragraphes.

Note de bas de page

Inscrivez à la toute fin de la page le texte Conception [Votre Nom] - 2025.
Formatez le texte à votre guise.

paysage.html