Mini-projet : Carte de visite d'un explorateur égyptien

Félicitations, jeune scribe ! Tu as atteint le mini-projet où tu vas combiner tout ce que tu as appris dans ce module. Mohamed dit : « La meilleure façon de consolider ses connaissances, c'est de les appliquer en pratique - tout comme la meilleure façon d'apprendre à construire des pyramides était... de construire des pyramides ! »

Dans ce projet, tu vas créer une page de carte de visite pour un explorateur égyptien fictif - un archéologue qui parcourt l'Égypte, découvrant des secrets anciens. La page utilisera tous les éléments HTML que tu as appris : titres, paragraphes, mise en forme du texte, liens, images, et plus encore.

Structure du projet

Nous commençons par un squelette HTML complet. Souviens-toi - chaque page HTML a besoin de <!DOCTYPE html>, de la balise <html>, des sections <head> et <body> :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <title>Dr. Amara Hassan - Exploratrice de l'Égypte</title>
6</head>
7<body>
8  <!-- Nous placerons ici tout le contenu de la carte de visite -->
9</body>
10</html>

Étape 1 : En-tête et introduction

Commence par le titre principal avec le nom de l'exploratrice et un court paragraphe d'introduction. Utilise <h1> pour le nom et <p> avec la mise en forme <strong> et <em> :

1<h1>Dr. Amara Hassan</h1>
2<p><em>Archéologue, exploratrice et chercheuse de l'Égypte ancienne</em></p>
3
4<hr>
5
6<p>Bienvenue sur ma page ! Je suis <strong>Dr. Amara Hassan</strong> - depuis 15 ans
7j'explore les mystères de l'Égypte ancienne. Parmi mes découvertes figurent
8des <mark>chambres jusque-là inconnues</mark> dans la Vallée des Rois et des
9artéfacts uniques de la période du Nouvel Empire.</p>

Remarque l'utilisation de :

• <em> - italique mettant en valeur la devise/le titre
• <hr> - ligne horizontale séparant les sections
• <strong> - gras pour le nom important
• <mark> - surlignage d'une réalisation clé

Étape 2 : Section « À propos de moi » avec mise en forme du texte

Ajoute une section avec une biographie, en utilisant diverses balises de mise en forme :

1<h2>À propos de moi</h2>
2
3<p>Je suis née au <strong>Caire</strong> et depuis l'enfance j'étais fascinée par
4les ruines anciennes. Après avoir étudié à l'<em>Université du Caire</em>, j'ai obtenu
5un doctorat en archéologie à l'Université d'Oxford.</p>
6
7<blockquote>
8  <p>« Chaque pierre en Égypte a son histoire. Notre tâche est de l'entendre
9  et de la raconter au monde. »</p>
10</blockquote>
11
12<p>Mes principaux <strong>domaines de recherche</strong> sont :</p>
13<p>
14  L'architecture des pyramides<br>
15  Les hiéroglyphes et l'écriture<br>
16  Les rituels funéraires<br>
17  La vie quotidienne dans l'Égypte ancienne
18</p>

Dans cette section, nous avons appliqué :

• <blockquote> - citation, la devise de vie de l'exploratrice
• <br> - sauts de ligne au sein d'un seul paragraphe (liste sans puces)
• Un mélange de <strong> et <em> pour différentes emphases

Étape 3 : Section avec photo et légende

Ajoute une photo de l'exploratrice avec une légende, en utilisant <figure> et <figcaption> :

1<h2>Mes découvertes</h2>
2
3<figure>
4  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg"
5       alt="La Grande Pyramide de Khéops au coucher du soleil"
6       width="500">
7  <figcaption>La Grande Pyramide de Khéops - le lieu de mes recherches les plus importantes</figcaption>
8</figure>
9
10<p>En 2019, j'ai découvert une <mark>chambre cachée</mark> près de la
11<strong>pyramide de Khéops</strong>. La chambre contenait
12<em>47 papyrus</em> avec des notes des bâtisseurs de la pyramide -
13les plus anciens journaux de construction connus !</p>

Éléments clés :

• <img> avec l'attribut src (URL de l'image), alt (description) et width (largeur)
• <figure> + <figcaption> - enveloppe sémantique de l'image avec une légende

Étape 4 : Section avec liens

Ajoute une section avec des liens vers des ressources externes et des informations de contact :

1<h2>Liens utiles</h2>
2
3<p>Tu veux en savoir plus sur l'Égypte ancienne ?
4Voici mes sources préférées :</p>
5
6<p>
7  <a href="https://www.britannica.com/place/ancient-Egypt" target="_blank" rel="noopener noreferrer">
8    Encyclopédie Britannica - Égypte ancienne
9  </a>
10</p>
11
12<p>
13  <a href="https://www.metmuseum.org/about-the-met/collection-areas/egyptian-art" target="_blank" rel="noopener noreferrer">
14    Metropolitan Museum - Art égyptien
15  </a>
16</p>
17
18<h2>Contact</h2>
19
20<p>N'hésite pas à me contacter :</p>
21<p>
22  E-mail : <a href="mailto:amara.hassan@egypt-discoveries.com">amara.hassan@egypt-discoveries.com</a><br>
23  Téléphone : <a href="tel:+48123456789">+48 123 456 789</a>
24</p>
25
26<p><a href="#top">Retour en haut</a></p>

Dans les liens, nous avons appliqué :

• target="_blank" et rel="noopener noreferrer" - ouverture sûre dans un nouvel onglet
• mailto: - lien qui ouvre le client de messagerie
• tel: - lien d'appel téléphonique (utile sur les téléphones)
• href="#top" - lien d'ancrage vers le haut de la page

Étape 5 : Pied de page avec commentaire HTML

Termine la page avec un pied de page et des commentaires dans le code :

1<hr>
2
3<!-- Pied de page -->
4<p>Page créée dans le cadre du cours CodeWorlds - Monde HTML/CSS</p>
5<p>Dernière mise à jour : 2024</p>
6
7<!--
8  TODO : À l'avenir, ajouter :
9  - Galerie de photos des expéditions
10  - Formulaire de contact
11  - Carte des découvertes
12-->

Ici, nous avons utilisé :

• Les commentaires HTML <!-- --> - notes pour le programmeur, invisibles sur la page

Structure complète

En résumé, notre carte de visite contient :

• Des titres (<h1>, <h2>) - organisation des sections
• Des paragraphes (<p>) - contenu textuel
• De la mise en forme (<strong>, <em>, <mark>) - emphase du texte
• Une citation (<blockquote>) - la devise de l'exploratrice
• Des lignes (<hr>, <br>) - séparateurs et sauts de ligne
• Une image (<img>) avec <figure> et <figcaption> - photo avec légende
• Des liens (<a>) - navigation, e-mail, téléphone, ancres
• Des commentaires (<!-- -->) - notes dans le code

Mohamed résume : « Tu as créé ta première vraie page HTML ! Chaque élément que tu as utilisé a sa place - comme chaque pierre dans une pyramide. Maintenant, essaie dans l'éditeur ci-dessous et crée ta propre carte de visite ! »

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Carte de visite - Mohamed Al-Rashid</title>
6</head>
7<body>
8    <h1>Mohamed Al-Rashid</h1>
9    <p><em>Archéologue et découvreur de mystères anciens</em></p>
10
11    <hr>
12
13    <figure>
14        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/500px-All_Gizah_Pyramids.jpg"
15             alt="Pyramides de Gizeh - le lieu de travail de Mohamed"
16             width="500">
17        <figcaption>Pyramides de Gizeh - mon lieu de travail préféré</figcaption>
18    </figure>
19
20    <h2>À propos de moi</h2>
21    <p>Je suis <strong>archéologue</strong> avec <mark>30 ans d'expérience</mark>
22       dans l'étude des civilisations anciennes. Je suis spécialisé dans
23       le <em>déchiffrement des hiéroglyphes</em> et la découverte de tombeaux oubliés.</p>
24
25    <blockquote>
26        "Chaque pierre d'une pyramide raconte une histoire - il suffit de savoir l'écouter."
27    </blockquote>
28
29    <h2>Mes découvertes</h2>
30    <ul>
31        <li>Tombeau de Néfertiti - <strong>2019</strong></li>
32        <li>Rouleaux de la bibliothèque d'Alexandrie - <strong>2021</strong></li>
33        <li>Temple souterrain d'Osiris - <strong>2023</strong></li>
34    </ul>
35
36    <hr>
37
38    <h2>Contact</h2>
39    <p>E-mail : <a href="mailto:mohamed@pyramids.eg">mohamed@pyramids.eg</a></p>
40    <p>Site web : <a href="https://example.com" target="_blank" rel="noopener noreferrer">www.pyramids.eg</a></p>
41    <p>© 2025 Mohamed Al-Rashid</p>
42</body>
43</html>