Aby stworzyć plan lekcji w HTML, najlepiej wykorzystać do tego celu tabelę, która jest czytelna zarówno dla użytkowników, jak i przeglądarek internetowych. W poniższym poradniku przedstawiam krok po kroku, jak przygotować profesjonalny plan lekcji, uzupełniony o stylowanie CSS i przykłady praktycznych zastosowań.
Podstawowa struktura dokumentu HTML
Każda strona w HTML zaczyna się od zdefiniowania struktury, np.:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Plan lekcji</title>
</head>
<body>
<!-- Zawartość planu lekcji -->
</body>
</html>
Tworzenie tabeli planu lekcji
Plan lekcji najłatwiej przedstawić w postaci tabeli HTML. Przykład dla pięciu dni tygodnia oraz siedmiu lekcji dziennie:
<table border="1">
<caption><strong>Plan lekcji klasy 1A</strong></caption>
<thead>
<tr>
<th>Godzina</th>
<th>Poniedziałek</th>
<th>Wtorek</th>
<th>Środa</th>
<th>Czwartek</th>
<th>Piątek</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00 - 8:45</td>
<td>Matematyka</td>
<td>Polski</td>
<td>Angielski</td>
<td>WF</td>
<td>Plastyka</td>
</tr>
<tr>
<td>8:55 - 9:40</td>
<td>Fizyka</td>
<td>Historia</td>
<td>Matematyka</td>
<td>Angielski</td>
<td>Religia</td>
</tr>
<!-- Dodaj kolejne wiersze na następne godziny -->
</tbody>
</table>
Opis elementów –
<table>– tworzy tabelę;<caption>– tytuł tabeli;<thead>– nagłówek tabeli;<tr>– wiersz tabeli;<th>– komórka nagłówka;<td>– komórka z danymi;border="1"– prosty sposób nadania obramowania (lepiej stosować CSS).
Dodanie stylów CSS dla lepszej czytelności
Dobrą praktyką jest oddzielne stylowanie tabeli z użyciem CSS, np.:
<style>
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
background: #fafaff;
}
th, td {
padding: 10px;
border: 1px solid #333;
text-align: center;
}
th {
background-color: #e0e6ed;
}
caption {
font-size: 1.3em;
margin-bottom: 10px;
color: #223a5e;
}
tbody tr:nth-child(even) {
background-color: #f4f7fb;
}
</style>
Styl umieszczamy w sekcji <head> między znacznikami <style>. Dzięki temu tabela z planem lekcji jest bardziej czytelna i estetyczna.
Przykłady zastosowania
- Plan lekcji dla różnych klas – możesz stworzyć kilka tabel na jednej stronie, każdą z tytułem odpowiadającym innej klasie; pozwoli to na szybki podgląd planów dla różnych grup.
- Plan lekcji nauczyciela – tabela może być dostosowana do prezentacji planu zajęć konkretnego nauczyciela, np. zamiast dni tygodnia – klasy, a w wierszach godziny lub sale.
- Plan sal lekcyjnych – analogicznie, możesz przygotować wizualizację rezerwacji sal w danym tygodniu.
- Plan z kolorami przedmiotów – aby jeszcze bardziej uatrakcyjnić plan, można przypisać każdemu przedmiotowi inny kolor tła.
Przykładowe style CSS dla różnych przedmiotów:
<style>
.matematyka { background-color: #c6e2ff; }
.polski { background-color: #ffecb3; }
.angielski { background-color: #d1ffd6; }
/* Dodaj kolejne style dla różnych przedmiotów */
</style>
I przykładowe użycie klas w tabeli:
<td class="matematyka">Matematyka</td>
<td class="polski">Polski</td>
<td class="angielski">Angielski</td>
Rozszerzenie o funkcje interaktywne
Aby dodać funkcjonalności typu podświetlanie aktualnej godziny lub dnia, można użyć JavaScript, jednak najprostsza wersja planu lekcji w HTML w zupełności wystarczy dla większości zastosowań edukacyjnych.
Podsumowanie zalet
- Czytelność – tabela zapewnia przejrzystość planu i łatwość jego odczytu;
- Łatwość edycji – zmiana treści w planie wymaga tylko modyfikacji odpowiednich komórek;
- Uniwersalność – format ten sprawdza się dla różnych rodzajów planów (klasa, sala, nauczyciel).
Ten poradnik pozwoli Ci szybko stworzyć własny, profesjonalnie wyglądający plan lekcji w HTML, gotowy do użycia na szkolnej stronie internetowej, blogu lub w projekcie edukacyjnym.
