08 – HTML ,CSS – tekst i czcionka, identyfikatory i klasy.
https://www.w3schools.com/css/css_font.asp
Ćwiczenie: „Eksperymentuj z font-family”
Cel: Poznać i zastosować własność font-family w CSS oraz rozróżnić różne rodziny fontów (serif, sans-serif, monospace, cursive, fantasy) W3Schools
Instrukcje dla uczniów:
-
Utwórz plik HTML (np.
index.html) z podstawową strukturą:
Utwórz plik CSS styles.css i przypisz odpowiednie rodziny fontów do klas:
-
(Możesz dobrać inne fonty, o ile zachowasz właściwą rodzinę: serif, sans-serif, monospace, cursive, fantasy).
-
Otwórz plik HTML w przeglądarce i zaobserwuj, jak różne akapity wyglądają.
-
Dalsze zadania rozszerzające:
-
Zmień rozmiar fontu (
font-size) dla akapitów i obserwuj jak wpływa to na czytelność. -
Dodaj własny akapit z font-family: wybierz inny font, który jest dostępny na Twoim komputerze lub w Google Fonts (np. „Roboto”, „Open Sans”).
-
Zastosuj font-fallback: ustaw kolejno dwa/trzy fonty, np.
font-family: "Open Sans", Arial, sans-serif;i sprawdź, co się stanie jeśli pierwszy font nie jest dostępny. W3Schools -
Zastanów się: który rodzaj fontu (serif, sans-serif, monospace…) wydaje Ci się najbardziej czytelny na ekranie komputera? Uzasadnij swoją odpowiedź, odnosząc się do strony W3Schools gdzie wskazano, że sans-serif często bywa łatwiejszy do czytania na ekranie. W3Schools
-
Efekt końcowy: Uczniowie powinni mieć prostą stronę HTML/CSS, w której różne akapity oraz nagłówek są wyświetlone z użyciem różnych rodzin fontów. Powinni zrozumieć zasadę spadku (fallback) w font-family oraz znaczenie wyboru fontu dla czytelności i stylu strony.