Ćwiczenia powtórzeniowe z HTML i CSS.

Praca z tabelami i semantycznymi znacznikami HTML

1. Wprowadzenie do tabel w HTML

Tabele HTML służą do wyświetlania danych w formie strukturalnej, w rzędach i kolumnach. Znaczniki używane w tabelach to:

  • <table> – główny znacznik tabeli.
  • <tr> – oznacza wiersz tabeli.
  • <td> – oznacza komórkę tabeli.
  • <th> – oznacza nagłówek tabeli.
  • <thead>, <tbody>, <tfoot> – służą do semantycznego podziału tabeli.

Ćwiczenie 1: Tworzenie prostej tabeli Zadanie: Utwórz tabelę z trzema kolumnami (Imię, Nazwisko, Wiek) oraz trzema wierszami. W pierwszym wierszu będą nagłówki.

Ćwiczenie 2: Tworzenie tabeli z nagłówkiem i stopką Zadanie: Utwórz tabelę, w której zastosujesz znaczniki <thead>, <tbody> i <tfoot>. Nagłówki tabeli będą zawierały opisy kolumn (Produkt, Cena, Ilość), a stopka będzie podsumowaniem.

2. Semantyczne znaczniki HTML

Semantyczne znaczniki HTML służą do lepszego opisywania struktury i znaczenia treści. Zamiast używać ogólnych znaczników, takich jak <div>, lepiej stosować bardziej precyzyjne elementy:

  • <header> – nagłówek strony lub sekcji.
  • <nav> – menu nawigacyjne.
  • <main> – główna część strony.
  • <article> – niezależny fragment treści (np. artykuł, wpis na blogu).
  • <section> – sekcja treści.
  • <aside> – dodatkowa informacja powiązana z główną treścią (np. boczny panel).
  • <footer> – stopka strony.

Ćwiczenie 3: Stworzenie strony z semantycznymi znacznikami Zadanie: Zaprojektuj prostą stronę internetową, korzystając z semantycznych znaczników HTML. Strona powinna zawierać:

  • Nagłówek <header> z tytułem strony.
  • Sekcję <nav> z listą linków nawigacyjnych.
  • Sekcję <main>, w której znajdą się dwa <article>.
  • Panel boczny <aside> z dodatkową informacją.
  • Stopkę <footer> z krótką informacją o autorze strony.

3. Formatowanie tabel z CSS

Aby poprawić wygląd tabel, warto zastosować proste style CSS:

  • Używanie obramowania (border) dla tabeli i komórek.
  • Kolorowanie tła wierszy naprzemiennie (nth-child).
  • Dodawanie odstępów wewnętrznych (padding) dla komórek.

Ćwiczenie 4: Stylizacja tabeli Zadanie: Stwórz tabelę z informacjami o produktach, a następnie nadaj jej estetyczny wygląd za pomocą CSS. Zastosuj różne kolory tła dla nagłówków i komórek, dodaj obramowanie oraz odstępy wewnętrzne.

4. Zaawansowane elementy formularza

W tej części omówimy bardziej zaawansowane elementy formularzy:

  • <textarea> – większe pole tekstowe do wpisywania dłuższych wiadomości.
  • <select> i <option> – lista rozwijana do wyboru spośród kilku opcji.
  • <fieldset> i <legend> – grupowanie powiązanych pól formularza.
  • <input type="radio"> i <input type="checkbox"> – pola wyboru jednokrotnego (radio) i wielokrotnego (checkbox).

Ćwiczenie 5: Formularz zgłoszenia Zadanie: Utwórz formularz zgłoszeniowy na konferencję, zawierający:

  • Pole tekstowe na imię i nazwisko.
  • Pole na adres e-mail.
  • Wieloliniowe pole <textarea> na opis zgłoszenia.
  • Listę rozwijaną <select> do wyboru sesji, w której uczestnik chce wziąć udział.
  • Przycisk do wysłania formularza.

5. Walidacja formularzy HTML5

HTML5 oferuje wiele wbudowanych mechanizmów walidacji formularzy:

  • required – pole musi być wypełnione.
  • pattern – wyrażenie regularne do walidacji niestandardowych wzorców.
  • min, max, maxlength – ograniczenia dotyczące wartości liczbowych i długości tekstu.

Ćwiczenie 6: Formularz z walidacją Zadanie: Zaprojektuj formularz rejestracji na stronie internetowej, zawierający:

  • Pole tekstowe na login (wymagane, maksymalnie 20 znaków).
  • Pole na hasło (wymagane, minimum 8 znaków, musi zawierać cyfry i litery).
  • Pole na e-mail z walidacją formatu.
  • Pole na wiek (liczba w zakresie od 18 do 100).
  • Przyciski radiowe do wyboru płci.
  • Lista rozwijana z wyborem kraju zamieszkania.
  • Walidacja wszystkich pól za pomocą atrybutów HTML5.

7. Formularz z wieloma polami wyboru

Niektóre formularze wymagają wyboru jednej lub wielu opcji, na przykład w ankietach lub quizach.

Ćwiczenie 8: Formularz ankiety Zadanie: Utwórz formularz ankiety dotyczącej ulubionych zajęć:

  • Pola checkbox do wyboru kilku zainteresowań (np. sport, muzyka, filmy).
  • Pole radio do wyboru jednego z ulubionych sportów.
  • Pole <textarea> do wpisania krótkiej opinii na temat ulubionych aktywności.
  • Przycisk do wysłania formularza.

9. Obsługa formularzy z wieloma polami radio i checkbox

W formularzach mogą znajdować się zarówno pola wyboru jednokrotnego (radio), jak i wielokrotnego (checkbox). Pola te powinny być poprawnie zorganizowane i sformatowane, aby były intuicyjne dla użytkownika.

Ćwiczenie 10: Formularz quizu Zadanie: Stwórz formularz quizu z następującymi elementami:

  • Pytanie z odpowiedziami do wyboru (radio).
  • Pytanie wielokrotnego wyboru (checkbox).
  • Pola tekstowe do wpisania krótkich odpowiedzi.
  • Przycisk do wysłania quizu.