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>

<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>

<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:

```

```
— kursywa podkreślająca motto/tytuł
```
<hr>
```
— pozioma linia oddzielająca sekcje
```

```
— pogrubienie ważnego imienia
```

```
— 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
```
 
```
— łamanie linii w ramach jednego paragrafu (lista bez punktorów)
Mieszankę
```

```
i
```

```
dla różnych nacisków

Krok 3: Sekcja ze zdjęciem i podpisem

Dodaj zdjęcie odkrywczyni z podpisem, używając

<figure>

<figcaption>

1<h2>Moje odkrycia</h2>
2
3<figure>
4  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/800px-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><sub>Strona stworzona w ramach kursu CodeWorlds — Świat HTML/CSS</sub></p>
5<p><sup>Ostatnia aktualizacja: 2024</sup></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
```

```
i
```

```
— indeks dolny i górny

Kompletna struktura

Podsumowując, nasza wizytówka zawiera:

Nagłówki (
```
<h1>
```
,
```
<h2>
```
) — organizacja sekcji
Paragrafy (
```

```
) — treść tekstowa
Formatowanie (
```

```
,
```

```
,
```

```
,
```

```
,
```

```
) — wyróżnianie tekstu
Cytat (
```
<blockquote>
```
) — motto odkrywczyni
Linie (
```
<hr>
```
,
```
 
```
) — 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ę!"

Vai a CodeWorlds→