HTML, CSS - Kawiarnia

Zadanie: „Witryna Twojej Wymarzonej Kawiarenki”

Cel: Stwórz stronę internetową dla małego lokalu gastronomicznego. Musisz pokazać menu, godziny otwarcia oraz formularz rezerwacji stolika.

1. Struktura HTML (Treść)

Uczniowie muszą zamieścić następujące sekcje:

• Nagłówek: Nazwa kawiarni w <h1> i krótkie motto w <i> (kursywa).

• Lista nienumerowana (<ul>): Trzy główne zalety lokalu (np. świeża kawa, darmowe Wi-Fi, pyszne ciasta).

• Menu w tabeli (<table>): * Nagłówki: „Produkt”, „Cena”, „Składniki”.

  • Minimum 3 wiersze z danymi.

• Obrazek smacznego jedzenia: <img> z ramką ustawioną w CSS.

• Formularz rezerwacji: * input type="date" (wybór dnia).

  • input type="number" (liczba osób).

  • textarea (dodatkowe uwagi dla kelnera).

  • Przycisk button.

2. Stylizacja CSS (Wygląd)

Skupiamy się na czytelności i estetyce:

• Centrowanie treści: Użycie margin: auto i text-align: center, aby strona nie była przyklejona do lewej krawędzi.

• Ramki (border): Dodanie obramowania do tabeli oraz do obrazka (np. border: 5px solid brown).

• Interakcja (:hover): Bardzo prosta nowość – zmiana koloru tła przycisku po najechaniu myszką.

• Odstępy: Ustawienie line-height dla tekstu, aby lepiej się go czytało.
  
  

Przypomnienie kluczowych pojęć:

• Znaczniki blokowe vs liniowe: Przypomnij uczniom, że <div> czy <h1> zajmują całą szerokość strony (blok), a <a> czy <span> tylko tyle, ile zajmuje ich treść (linia).

• Selektory CSS: * element { ... } – stylizuje wszystkie znaczniki tego typu.

  • .klasa { ... } – stylizuje tylko elementy z atrybutem class="klasa".

• Jednostki miar: Nauczmy ich, że szerokość możemy podawać w pikselach (px) dla precyzji lub w procentach (%), aby strona była elastyczna.