Cel zadania

Zaprojektuj i wykonaj własną stronę internetową poświęconą wybranej pasji, zainteresowaniu lub hobby. Strona powinna być przejrzysta, estetyczna i zawierać wszystkie wymagane elementy HTML.

1. Struktura projektu

Utwórz folder:

MOJA_PASJA
│
├── index.html
├── galeria.html
├── kontakt.html
├── style.css
└── img
    ├── obraz1.jpg
    ├── obraz2.jpg
    └── obraz3.jpg

2. Strona główna – index.html

Strona musi zawierać:

• poprawną strukturę HTML5,
• tytuł strony w <title>,
• nagłówek <header>,
• menu nawigacyjne <nav>,
• sekcję główną <main>,
• co najmniej 3 nagłówki różnego poziomu,
• minimum 3 akapity tekstu,
• listę numerowaną,
• listę punktowaną,
• co najmniej jeden obraz,
• podpis lub opis pod obrazem,
• stopkę <footer>.

3. Menu

Menu powinno umożliwiać przechodzenie pomiędzy stronami:

STRONA GŁÓWNA | GALERIA | KONTAKT

Wykorzystaj odpowiednio element:

<a href="...">

4. Sekcja „O mojej pasji”

Opisz:

• czym jest Twoja pasja,
• od kiedy się nią interesujesz,
• dlaczego ją wybrałeś,
• czego można się dzięki niej nauczyć,
• jakie są jej zalety.

Tekst powinien mieć minimum 150 słów.

5. Lista

Utwórz listę numerowaną przedstawiającą np.:

„5 powodów, dla których warto rozwijać swoją pasję”

oraz listę punktowaną:

„Co jest potrzebne do rozpoczęcia?”

6. Tabela

Na stronie głównej umieść tabelę zawierającą minimum 4 kolumny i 5 wierszy.

Przykład:

Tabela musi posiadać nagłówki <th>.

7. Galeria – galeria.html

Utwórz osobną stronę zawierającą minimum 6 zdjęć związanych z wybraną pasją.

Każde zdjęcie powinno:

• posiadać alt,
• mieć odpowiedni rozmiar,
• być umieszczone w osobnym elemencie,
• posiadać krótki opis.

Przykład:

<figure>
    <img src="img/obraz1.jpg" alt="Opis zdjęcia">
    <figcaption>Opis fotografii</figcaption>
</figure>

Dodaj również link umożliwiający powrót na stronę główną.

8. Formularz kontaktowy – kontakt.html

Utwórz formularz zawierający:

• imię,
• nazwisko,
• adres e-mail,
• pole wyboru tematu,
• pole tekstowe na wiadomość,
• wybór płci lub innej kategorii – jeśli pasuje do projektu,
• checkbox z akceptacją regulaminu,
• przycisk WYŚLIJ,
• przycisk WYCZYŚĆ.

Wykorzystaj m.in.:

<form>
<input>
<label>
<select>
<option>
<textarea>
<button>

Pamiętaj o stosowaniu label powiązanych z odpowiednimi polami formularza.

9. CSS – style.css

Strona musi posiadać zewnętrzny arkusz CSS.

Zdefiniuj własny wygląd:

• kolor tła,
• kolor tekstu,
• rodzaj i rozmiar czcionki,
• wygląd nagłówków,
• wygląd menu,
• wygląd linków,
• wygląd tabeli,
• obramowanie zdjęć,
• wygląd formularza,
• wygląd przycisków,
• marginesy i odstępy.

Nie należy umieszczać całego stylowania bezpośrednio w HTML.

10. Elementy dodatkowe – dla chętnych ⭐

Dodaj co najmniej 3 elementy dodatkowe:

• link do zewnętrznej strony,
• link otwierany w nowej karcie,
• film YouTube poprzez <iframe>,
• mapę poprzez <iframe>,
• cytat <blockquote>,
• znacznik <time>,
• <details> i <summary>,
• efekt :hover dla menu,
• responsywność strony,
• favicon,
• poziomą linię <hr>,
• symbole HTML encji.

Wymagania techniczne

Kod powinien być:

• poprawny składniowo,
• czytelnie sformatowany,
• opatrzony komentarzami w ważniejszych miejscach,
• zapisany w plikach .html i .css,
• pozbawiony niepotrzebnego powtarzania kodu.

Każda strona powinna posiadać prawidłową strukturę:

</html>