HTML, CSS - Kawiarnia
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
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: autoitext-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-heightdla 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 atrybutemclass="klasa".
Jednostki miar: Nauczmy ich, że szerokość możemy podawać w pikselach (
px) dla precyzji lub w procentach (%), aby strona była elastyczna.
Przykładowy kod:
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<style>
body {
background-color: #fffaf0; /* Kolor „floralwhite” */
color: #333;
text-align: center;
padding: 40px;
}
.menu-table {
margin: 20px auto;
border-collapse: collapse; /* Łączy podwójne linie tabeli w jedną */
width: 80%;
}
.menu-table th, .menu-table td {
border: 1px solid #8b4513;
padding: 15px;
}
img {
border: 8px double #8b4513;
border-radius: 15px; /* Zaokrąglone rogi obrazka */
margin: 20px;
}
button:hover {
background-color: #deb887;
cursor: pointer;
}
</style>
</head>
<body>
<h1>☕ Kawiarnia „Kod i Kofeina”</h1>
<p><i>Najlepsze miejsce dla przyszłych programistów!</i></p>
<img src=”https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=300″ alt=”Kawa”>
<h2>Dlaczego my?</h2>
<ul style=”display: inline-block; text-align: left;”>
<li>Szybki internet dla Twojego laptopa</li>
<li>Kawa bez limitu podczas debugowania</li>
<li>Ciasteczka (nie te w przeglądarce!)</li>
</ul>
<h2>Nasze Menu</h2>
<table class=”menu-table”>
<tr>
<th>Produkt</th>
<th>Składniki</th>
<th>Cena</th>
</tr>
<tr>
<td>Espresso Java</td>
<td>Mocna kawa, bez cukru</td>
<td>8 zł</td>
</tr>
<tr>
<td>Sernik CSS</td>
<td>Ser, wanilia, polewa kolorowa</td>
<td>12 zł</td>
</tr>
</table>
<h2>Zarezerwuj stolik</h2>
<form>
Data: <input type=”date”>
Osoby: <input type=”number” min=”1″ max=”10″> <br><br>
Uwagi: <br>
<textarea placeholder=”Np. Stolik przy oknie…”></textarea> <br>
<button type=”submit”>Rezerwuję!</button>
</form>
</body>
</html>
