Projekt końcowy - II semestr - strony www

Opis zadania

Nasza szkoła zakłada nową sekcję koszykówki i potrzebuje strony internetowej, na której uczniowie będą mogli zapoznać się z drużyną, terminarzem meczów oraz zapisać się do sekcji. Waszym zadaniem jest przygotowanie kompletnej strony internetowej wraz z odpowiednio przygotowaną grafiką.

Projekt składa się z dwóch części:

Część 1: Przygotowanie grafiki w programie GIMP
Część 2: Strona internetowa HTML + CSS

CZĘŚĆ 1 — Przygotowanie grafiki w GIMP (30 pkt)

Utwórz folder materialy/ z surowymi zdjęciami. Twoim zadaniem jest przygotowanie ich do umieszczenia na stronie.

Zdjęcia pobieramy ze stron:

https://pixabay.com/pl/

https://unsplash.com/

https://www.pexels.com/pl-pl/

Operacje do wykonania

1. Logo sekcji

Plik źródłowy: materialy/logo_surowe.png

Otwórz plik w GIMP
Przeskaluj obraz do wymiarów 200 × 200 pikseli (Obraz → Skaluj obraz)
Zapisz jako logo.png w folderze projektu (Plik → Wyeksportuj jako)

2. Zdjęcie nagłówkowe — hero

Plik źródłowy: materialy/hala_surowe.jpg

Otwórz w GIMP
Skadruj zdjęcie do proporcji 16:9 (narzędzie Kadrowanie z opcją Stały współczynnik proporcji)
Przeskaluj skadrowany obraz do dokładnych wymiarów 1600 × 900 pikseli
Zapisz jako hero.jpg z jakością 80% (kompresja JPG)

3. Zdjęcia zawodników

Pliki źródłowe: materialy/zawodnik1.jpg do zawodnik5.jpg

Dla każdego z pięciu zdjęć:

Skadruj do kwadratu (proporcje 1:1) — wykadruj twarz/sylwetkę w centrum
Przeskaluj do 400 × 400 pikseli
Zapisz jako zawodnik1.jpg, zawodnik2.jpg itd. z jakością 75%

4. Favicon

Plik źródłowy: materialy/logo_surowe.png

Otwórz logo w GIMP
Przeskaluj do 32 × 32 piksele
Zapisz jako favicon.png

5. Obraz tła sekcji

Plik źródłowy: materialy/boisko_surowe.jpg

Otwórz w GIMP
Przeskaluj do szerokości 1920 pikseli (zachowując proporcje)
Zmniejsz jakość JPG do 60% (obraz tła może być mniejszej jakości — oszczędność rozmiaru)
Zapisz jako boisko.jpg

Wymagania dotyczące folderu obrazów

Po zakończeniu części 1 w folderze obrazy/ powinieneś mieć dokładnie 9 plików:

logo.png (200×200)
hero.jpg (1600×900)
zawodnik1.jpg do zawodnik5.jpg (każdy 400×400)
favicon.png (32×32)
boisko.jpg (1920 px szerokości)

CZĘŚĆ 2 — Strona internetowa

Twórz jedną stronę index.html wraz z arkuszem stylów style.css.

Struktura plików projektu

projekt_sekcja/
├── index.html
├── style.css
└── obrazy/
    ├── logo.png
    ├── hero.jpg
    ├── zawodnik1.jpg
    ├── zawodnik2.jpg
    ├── zawodnik3.jpg
    ├── zawodnik4.jpg
    ├── zawodnik5.jpg
    ├── favicon.png
    └── boisko.jpg

Wymagania HTML

1. Podstawowa struktura dokumentu

deklaracja <!DOCTYPE html>
atrybut lang="pl" w tagu <html>
znacznik <meta charset="UTF-8">
znacznik <meta name="viewport" content="width=device-width, initial-scale=1.0">
tytuł strony w <title> (np. „Sekcja Koszykówki — Technikum”)
podpięcie favicony (<link rel="icon" href="obrazy/favicon.png">)
podpięcie arkusza CSS

2. Semantyczna struktura strony

Strona musi zawierać wszystkie poniższe sekcje zbudowane z semantycznych tagów:

<header> — nagłówek strony z logo i nazwą sekcji
<nav> — menu z odnośnikami (kotwice do sekcji poniżej)
<main> — główna zawartość zawierająca:
- <section> „O sekcji” — hero ze zdjęciem hero.jpg + opis (min. 2 akapity)
- <section> „Skład drużyny” — pięciu zawodników z zawodnik1.jpg do zawodnik5.jpg (zdjęcie + imię + pozycja)
- <section> „Terminarz” — tabela z najbliższymi meczami
- <section> „Zapisz się” — formularz kontaktowy
<footer> — stopka z kontaktem i datą

3. Konkretne elementy

Element	Wymaganie	Pkt
Nagłówki	Hierarchia h1 (1×), h2 (4×, jeden na sekcję), h3 (przy zawodnikach)	3
Lista	Co najmniej jedna lista `<ul>` lub `<ol>` (np. lista treningów)	2
Tabela	Terminarz z `<thead>` i `<tbody>` — min. 4 mecze, kolumny: data, godzina, przeciwnik, miejsce	4
Formularz	Pola: imię, nazwisko, klasa, email, lista wyboru pozycji (`<select>`), przycisk wysłania	4
Obrazy	Wszystkie z atrybutem `alt` opisującym treść	2

Wymagania CSS

1. Organizacja arkusza

arkusz zewnętrzny style.css
co najmniej 3 komentarze dzielące kod na sekcje (np. /* === NAGŁÓWEK === */)

2. Selektory

użycie selektora tagu (np. body, h1)
użycie selektora klasy (np. .zawodnik)
użycie selektora id (np. #hero)
użycie pseudoklasy :hover (na linkach menu)

3. Box model

użycie margin, padding, border w co najmniej trzech różnych elementach
ustawienie box-sizing: border-box globalnie

4. Kolorystyka i typografia

własna paleta minimum 3 kolorów (np. kolory szkoły / sekcji)
import jednego kroju z Google Fonts (przykład: Roboto, Montserrat, Bebas Neue)
różne rozmiary czcionek dla nagłówków i tekstu
co najmniej jeden element z text-align, jeden z font-weight: bold

5. Tło i obrazy

nagłówek strony (<header>) z kolorowym tłem
sekcja „O sekcji” wyświetla hero.jpg (np. jako tło lub jako <img>)
sekcja „Terminarz” wyświetla boisko.jpg jako tło (background-image)
zdjęcia zawodników z border-radius: 50% (okrągłe)

6. Layout — Flexbox

menu w <nav> w jednej linii — display: flex
skład drużyny ułożony jako rząd 5 zawodników — display: flex lub grid
stopka z dwiema kolumnami (kontakt / data) — Flexbox

7. Responsywność — @media

Wskazówka dla ucznia: jeśli pierwszy raz piszesz @media, skopiuj poniższy szablon i dostosuj zawartość:
/* Telefony – poniżej 768 pikseli szerokości */
@media (max-width: 768px) {
/* tutaj wpisz reguły dla małych ekranów */
}

Wymagania:

użycie co najmniej jednego zapytania @media (max-width: 768px)
w nim: menu zmienia układ na pionowy (flex-direction: column)
w nim: skład drużyny zmienia się z 5 kolumn na 1 kolumnę (flex-direction: column)

Podgląd strony:

Kontakt: mgzsp22@gmail.com