Mini-projekt: Wizytówka Egipskiego Odkrywcy

Gratulacje, młody skrybo! Dotarłeś do mini-projektu, w którym połączysz wszystko, czego nauczyłeś się w tym module. Mohamed mówi: "Najlepszy sposób, by utrwalić wiedzę, to zastosować ją w praktyce - tak jak najlepszym sposobem na naukę budowania piramid było... budowanie piramid!"

W tym projekcie stworzysz stronę-wizytówkę fikcyjnego egipskiego odkrywcy - archeologa, który podróżuje po Egipcie, odkrywając starożytne tajemnice. Strona wykorzysta wszystkie poznane elementy HTML: nagłówki, paragrafy, formatowanie tekstu, linki, obrazy i więcej.

Struktura projektu

Zaczynamy od kompletnego szkieletu HTML. Pamiętaj - każda strona HTML potrzebuje <!DOCTYPE html>, znacznika <html>, sekcji <head> i <body>:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <title>Dr. Amara Hassan - Odkrywczyni Egiptu</title>
6</head>
7<body>
8  <!-- Tutaj umieścimy całą treść wizytówki -->
9</body>
10</html>

Krok 1: Nagłówek i wprowadzenie

Rozpocznij od głównego nagłówka z imieniem odkrywcy i krótkiego paragrafu wprowadzającego. Użyj <h1> dla nazwy i <p> z formatowaniem <strong> i <em>:

1<h1>Dr. Amara Hassan</h1>
2<p><em>Archeolog, odkrywczyni i badaczka starożytnego Egiptu</em></p>
3
4<hr>
5
6<p>Witaj na mojej stronie! Jestem <strong>Dr. Amara Hassan</strong> - od 15 lat
7eksploruję tajemnice Starożytnego Egiptu. Moje odkrycia obejmują
8<mark>nieznane dotąd komnaty</mark> w Dolinie Królów oraz unikalne
9artefakty z okresu Nowego Państwa.</p>

Zwróć uwagę na użycie:

• <em> - kursywa podkreślająca motto/tytuł
• <hr> - pozioma linia oddzielająca sekcje
• <strong> - pogrubienie ważnego imienia
• <mark> - wyróżnienie kluczowego osiągnięcia

Krok 2: Sekcja "O mnie" z formatowaniem tekstu

Dodaj sekcję z biografią, wykorzystując różne znaczniki formatowania:

1<h2>O mnie</h2>
2
3<p>Urodziłam się w <strong>Kairze</strong> i od dzieciństwa fascynowały mnie
4starożytne ruiny. Po studiach na <em>Uniwersytecie Kairskim</em> zdobyłam
5doktorat z archeologii na Uniwersytecie Oksfordzkim.</p>
6
7<blockquote>
8  <p>"Każdy kamień w Egipcie ma swoją historię. Naszym zadaniem jest ją
9  usłyszeć i opowiedzieć światu."</p>
10</blockquote>
11
12<p>Moje główne <strong>obszary badań</strong> to:</p>
13<p>
14  Architektura piramid<br>
15  Hieroglify i pisarstwo<br>
16  Rytuały pogrzebowe<br>
17  Życie codzienne w starożytnym Egipcie
18</p>

W tej sekcji zastosowaliśmy:

• <blockquote> - cytat, motto życiowe odkrywczyni
• <br> - łamanie linii w ramach jednego paragrafu (lista bez punktorów)
• Mieszankę <strong> i <em> dla różnych nacisków

Krok 3: Sekcja ze zdjęciem i podpisem

Dodaj zdjęcie odkrywczyni z podpisem, używając <figure> i <figcaption>:

1<h2>Moje odkrycia</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="Wielka Piramida Cheopsa o zachodzie słońca"
6       width="500">
7  <figcaption>Wielka Piramida Cheopsa - miejsce moich najważniejszych badań</figcaption>
8</figure>
9
10<p>W 2019 roku odkryłam <mark>ukrytą komnatę</mark> w pobliżu
11<strong>Piramidy Cheopsa</strong>. Komnata zawierała
12<em>47 papirusów</em> z zapiskami budowniczych piramidy -
13najstarsze znane dzienniki budowy!</p>

Kluczowe elementy:

• <img> z atrybutem src (adres URL obrazu), alt (opis) i width (szerokość)
• <figure> + <figcaption> - semantyczne opakowanie obrazu z podpisem

Krok 4: Sekcja z linkami

Dodaj sekcję z odnośnikami do zewnętrznych zasobów i kontaktu:

1<h2>Przydatne linki</h2>
2
3<p>Chcesz dowiedzieć się więcej o Starożytnym Egipcie?
4Oto moje ulubione źródła:</p>
5
6<p>
7  <a href="https://www.britannica.com/place/ancient-Egypt" target="_blank" rel="noopener noreferrer">
8    Encyklopedia Britannica - Starożytny Egipt
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 - Sztuka Egipska
15  </a>
16</p>
17
18<h2>Kontakt</h2>
19
20<p>Zapraszam do kontaktu:</p>
21<p>
22  Email: <a href="mailto:amara.hassan@egypt-discoveries.com">amara.hassan@egypt-discoveries.com</a><br>
23  Telefon: <a href="tel:+48123456789">+48 123 456 789</a>
24</p>
25
26<p><a href="#top">Powrót na górę strony</a></p>

W linkach zastosowaliśmy:

• target="_blank" i rel="noopener noreferrer" - bezpieczne otwieranie w nowej karcie
• mailto: - link uruchamiający klienta poczty
• tel: - link do dzwonienia (przydatny na telefonach)
• href="#top" - kotwica (anchor link) do góry strony

Krok 5: Stopka z komentarzem HTML

Zakończ stronę stopką i komentarzami w kodzie:

1<hr>
2
3<!-- Stopka strony -->
4<p>Strona stworzona w ramach kursu CodeWorlds - Świat HTML/CSS</p>
5<p>Ostatnia aktualizacja: 2024</p>
6
7<!--
8  TODO: W przyszłości dodać:
9  - Galerię zdjęć z wypraw
10  - Formularz kontaktowy
11  - Mapę odkryć
12-->

Tutaj wykorzystaliśmy:

• Komentarze HTML <!-- --> - notatki dla programisty, niewidoczne na stronie

Kompletna struktura

Podsumowując, nasza wizytówka zawiera:

• Nagłówki (<h1>, <h2>) - organizacja sekcji
• Paragrafy (<p>) - treść tekstowa
• Formatowanie (<strong>, <em>, <mark>) - wyróżnianie tekstu
• Cytat (<blockquote>) - motto odkrywczyni
• Linie (<hr>, <br>) - separatory i łamanie linii
• Obraz (<img>) z <figure> i <figcaption> - zdjęcie z podpisem
• Linki (<a>) - nawigacja, email, telefon, kotwice
• Komentarze (<!-- -->) - notatki w kodzie

Mohamed podsumowuje: "Stworzyłeś swoją pierwszą prawdziwą stronę HTML! Każdy element, którego użyłeś, ma swoje miejsce - jak każdy kamień w piramidzie. Teraz wypróbuj to w edytorze poniżej i stwórz własną wizytówkę!"

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Wizytówka - Mohamed Al-Rashid</title>
6</head>
7<body>
8    <h1>Mohamed Al-Rashid</h1>
9    <p><em>Archeolog i Odkrywca Starożytnych Tajemnic</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="Piramidy w Gizie - miejsce pracy Mohameda"
16             width="500">
17        <figcaption>Piramidy w Gizie - moje ulubione miejsce pracy</figcaption>
18    </figure>
19
20    <h2>O mnie</h2>
21    <p>Jestem <strong>archeologiem</strong> z <mark>30-letnim doświadczeniem</mark>
22       w badaniu starożytnych cywilizacji. Specjalizuję się w
23       <em>odczytywaniu hieroglifów</em> i odkrywaniu zapomnianych grobowców.</p>
24
25    <blockquote>
26        "Każdy kamień w piramidzie opowiada historię - trzeba tylko umieć słuchać."
27    </blockquote>
28
29    <h2>Moje odkrycia</h2>
30    <ul>
31        <li>Grobowiec Nefertiti - <strong>2019</strong></li>
32        <li>Zwoje z Biblioteki Aleksandryjskiej - <strong>2021</strong></li>
33        <li>Podziemna świątynia Ozyrysa - <strong>2023</strong></li>
34    </ul>
35
36    <hr>
37
38    <h2>Kontakt</h2>
39    <p>Email: <a href="mailto:mohamed@piramidy.eg">mohamed@piramidy.eg</a></p>
40    <p>Strona: <a href="https://example.com" target="_blank" rel="noopener noreferrer">www.piramidy.eg</a></p>
41    <p>© 2025 Mohamed Al-Rashid</p>
42</body>
43</html>