Zadanie - plansza szachownicy

Zadanie: „Plansza szachowa w HTML i CSS”

Cel:

Celem zadania jest utrwalenie umiejętności tworzenia struktury strony internetowej w języku HTML, formatowania jej za pomocą CSS, a także wykorzystania przygotowanych grafik w projekcie.

Opis zadania:

Waszym zadaniem jest stworzenie w językach HTML i CSS planszy do gry w szachy. Plansza ma być zbudowana z tabeli HTML, której komórki będą odpowiednio pokolorowane, aby odwzorować układ pól szachowych. W wybranych polach należy umieścić grafiki przedstawiające figury szachowe, które wcześniej przygotujecie samodzielnie w programie GIMP.

Grafika do pobrania: >>TUTAJ<<

Zakres pracy:

1. Przygotowanie grafik figur szachowych:

   • Otwórz pliki z figurami szachowymi w programie GIMP.

   • Wykonaj kadrowanie obrazów, tak aby każda figura zajmowała centralne miejsce.

   • Usuń tło (np. za pomocą narzędzia „Zaznaczenie według koloru” lub „Różdżka”) i zapisz pliki w formacie .png z przezroczystym tłem.

   • Nazwij pliki odpowiednio, np. pionek_bialy.png, krol_czarny.png itp.

2. Stworzenie struktury planszy:

   • W pliku HTML utwórz tabelę 8×8, która będzie reprezentować pola szachownicy.

   • Każde pole powinno mieć jednakową wielkość (np. 80×80 pikseli).

3. Stylizacja planszy w CSS:

   • Użyj selektorów CSS, aby nadać kolor naprzemiennym polom (ciemne i jasne pola szachownicy).

   • Możesz zastosować klasy CSS, np. .czarne i .biale.

4. Umieszczenie figur na planszy:

   • W odpowiednich polach tabeli wstaw przygotowane wcześniej grafiki figur (<img src="..." alt="...">).

   • Rozmieść figury zgodnie z tradycyjnym układem początkowym szachów.

Podpowiedzi:

1. Przygotowanie grafik w GIMP

Aby Twoje figury wyglądały estetycznie i miały przezroczyste tło:

• Usuwanie tła
  Użyj narzędzia „Zaznaczenie według koloru” lub „Różdżka” (Fuzzy Select Tool), a następnie usuń tło klawiszem Delete.
  Pamiętaj, aby wcześniej dodać kanał alfa (Prawy przycisk myszy → „Dodaj kanał alfa”).

• Kadrowanie obrazka
  Narzędzie Kadrowanie pozwoli Ci przyciąć niepotrzebne puste przestrzenie wokół figury.

• Zapis z przezroczystością
  Zapisz plik w formacie .png (np. krol_bialy.png), aby zachować przezroczyste tło.

• Ujednolicenie rozmiarów
  Wszystkie grafiki figur powinny mieć podobny rozmiar (np. 500×500 px), żeby nie zaburzały układu w tabeli.
  Możesz to zrobić: Obraz → Skaluj obraz…

Struktura strony (HTML)

Podczas pisania kodu HTML pamiętaj:

• Używaj tabeli (<table>) do stworzenia planszy 8×8.
  Każdy wiersz to tag <tr>, a każde pole to tag <td>.

• Możesz dodać klasy CSS do pól, np.:
  <td class=”biale”></td>

• Do wstawienia figur używaj tagu <img>

• Staraj się zachować czytelność kodu – używaj wcięć (tabulator lub 2–4 spacje). Jeśli chcesz sprawdzić, czy kolory pól się poprawnie zmieniają — najpierw utwórz planszę bez grafik, a dopiero potem wstaw obrazy.

Stylizacja planszy (CSS)

CSS ułatwi Ci pokolorowanie pól i dopasowanie wyglądu planszy:

– Ustaw szerokość i wysokość pól (width i height)
Nadaj kolory pól przez klasy (bacground-color)
Ustaw figury centralnie w polach (text-align)
Jeśli figury są zbyt duże, możesz je zmniejszyć (width i height)
Aby plansza wyglądała schludnie użyj border

Dla chętnych (rozszerzenie na 6)

Dodaj oznaczenia pól (A–H, 1–8) wokół planszy w kolorze odróżniającym pola od reszty planszy.

Przykład rozwiązania: