Strona internetowa — HTML, CSS, dostępność

🎯 Po co Ci to?

Każda strona, którą kiedykolwiek odwiedziłeś, jest zbudowana z tych samych klocków: HTML (struktura i treść) i CSS (wygląd). Zrozumienie ich to zajrzenie za kurtynę internetu — i umiejętność stworzenia własnej obecności w sieci, od bloga po portfolio. Ale ta jednostka niesie coś ważniejszego niż składnia znaczników: zasadę dostępności — projektowania stron tak, by korzystały z nich też osoby niewidome, niedowidzące, niesłyszące, z trudnościami motorycznymi. To nie fanaberia ani „opcja dla wybranych": w wielu krajach to wymóg prawny, a zawsze — miara przyzwoitości. Sieć miała być dla wszystkich; dostępność to dotrzymanie tej obietnicy.

✅ Czego się nauczysz

Po tej jednostce potrafisz:

opisać podział ról: HTML (struktura/treść) vs CSS (wygląd) — i rozpoznać w tym zasadę z 13.3;
przeczytać i napisać prostą stronę: podstawowe znaczniki HTML i reguły CSS;
wskazać podstawowe zasady dostępności i wyjaśnić, komu i czemu służą.

🔁 Przypomnij sobie

Z 13.3: oddziel treść od wyglądu (HTML+CSS to ta zasada w sieci!); z 13.1: grafika w sieci (SVG wektorowe, JPEG/PNG rastrowe); z 11.5/13.5: kontrast i czytelność.

📘 Wyjaśnienie

Dwa języki, dwie role. Strona internetowa to współpraca dwóch języków o rozdzielonych zadaniach:

HTML (HyperText Markup Language) opisuje strukturę i treść: co jest nagłówkiem, akapitem, listą, linkiem, obrazem. Znaczniki (tagi) w nawiasach ostrych otaczają treść:

<h1>Mój przepis na naleśniki</h1>        <!-- nagłówek -->
<p>Naleśniki to <strong>proste</strong> danie.</p>   <!-- akapit z wyróżnieniem -->
<ul>                                      <!-- lista -->
  <li>mąka</li>
  <li>mleko</li>
</ul>
<a href="https://...">przepis wideo</a>   <!-- link -->
<img src="nalesniki.jpg" alt="stos naleśników na talerzu">   <!-- obraz z opisem -->

CSS (Cascading Style Sheets) opisuje wygląd: kolory, czcionki, rozmiary, układ. Reguły przypisują style do elementów:

h1 { color: navy; font-size: 32px; }      /* nagłówki granatowe, duże */
p  { line-height: 1.6; }                   /* akapity z odstępem między wierszami */

Rozpoznajesz? To dokładnie zasada z 13.3 (oddziel treść od wyglądu), tylko w sieci: HTML mówi co (nagłówek, akapit — jak style oznaczają rolę!), CSS mówi jak (granatowe, duże). Ta separacja daje te same zyski: zmieniasz wygląd całej witryny jedną edycją CSS (setki stron, jeden plik stylów — kaskada!), a treść pozostaje czysta i zrozumiała. „Cascading" w nazwie CSS to ta sama kaskada, co w arkuszu (11.1) — reguły spływają i nakładają się.

Publikacja. Gotową stronę (pliki HTML+CSS) umieszcza się na serwerze dostępnym w sieci (hosting), pod adresem (domena) — i świat może ją odwiedzić. Od prostego hostingu po platformy „przeciągnij i upuść" — próg wejścia jest dziś niski; ważniejsze jest, co publikujesz i czy jest dostępne.

Dostępność — sieć dla wszystkich. Osoba niewidoma „czyta" stronę czytnikiem ekranu — programem, który zamienia tekst na mowę i pozwala nawigować po strukturze. Osoba niedowidząca powiększa tekst albo potrzebuje wysokiego kontrastu. Osoba niesłysząca potrzebuje napisów do wideo. Osoba, która nie może używać myszy, nawiguje klawiaturą. Dostępna strona obsługuje ich wszystkich — a osiąga się to garścią zasad, z których większość jest darmowa, jeśli robisz je od początku:

Prawdziwa struktura HTML (nagłówki jako <h1>, nie pogrubiony tekst — echo pułapki z 13.3!) — czytnik zapowiada nagłówki i pozwala po nich skakać. Fałszywa struktura = niewidomy gubi się na stronie.
Tekst alternatywny obrazów (alt="...") — opis, który czytnik przeczyta zamiast obrazu (i który widzisz, gdy obraz się nie załaduje). Obraz bez alt to dla niewidomego pusta dziura. (Zauważ: ryciny w tej książce mają długie, opisowe alt — właśnie po to.)
Kontrast tekstu do tła (jasny szary na białym jest nieczytelny dla wielu — 11.5/13.5 wracają).
Napisy do wideo, obsługa klawiaturą (wszystko klikalne da się osiągnąć Tabem), czytelny język.

💭 Pomyśl: Projektant zrobił „nagłówki" przez pogrubienie zwykłego tekstu (<p><strong>Rozdział 1</strong></p> zamiast <h1>Rozdział 1</h1>). Wygląda identycznie. Kto i jak na tym ucierpi — i jakie inne funkcje się psują?

Sprawdź odpowiedź

Ucierpi osoba niewidoma: jej czytnik ekranu rozpoznaje nagłówki po znacznikach (<h1>, <h2>), nie po wyglądzie — pogrubiony akapit to dla niego zwykły tekst, więc traci mapę strony (nie może „przeskoczyć do rozdziału 3", nie wie, gdzie są sekcje). To dokładnie pułapka z 13.3 („udawanie struktury wyglądem"), tu z konsekwencją wykluczającą realnych ludzi. Psują się też: automatyczny spis/nawigacja, wyszukiwarki (Google czyta strukturę, by zrozumieć stronę — fałszywe nagłówki szkodzą pozycji), responsywność. Wniosek podwójny: (1) prawdziwa struktura HTML to nie estetyka, lecz dostępność i funkcja; (2) dobre praktyki się nakładają — poprawny HTML służy naraz niewidomym, wyszukiwarkom i utrzymaniu strony. Robienie rzeczy właściwie zwykle pomaga wielu naraz.

⚠️ Uwaga, pułapka

„Dostępnością zajmę się później, najpierw niech ładnie wygląda" — to droga do drogiej przeróbki (echo 12.6!). Dostępność wbudowana od początku (prawdziwe nagłówki, alt do obrazów, kontrast) jest darmowa — piszesz <h1> zamiast pogrubionego <p> bez dodatkowego wysiłku. Doklejona później wymaga przebudowy struktury całej witryny. Poza tym „później" zwykle nie nadchodzi. Traktuj dostępność jak poprawność: nie osobny etap, lecz sposób budowania — dokładnie jak testowanie (3.6), bezpieczeństwo (12.6) i style (13.3). Dobre nawyki wchodzą raz i procentują wszędzie.

🌍 Powiązania

HTML i CSS to fundament całej sieci — miliardy stron, w tym ta, którą czytasz (i apki tego systemu: „HTML/CSS" w opisie to właśnie one). Podział „struktura vs wygląd" jest jedną z najważniejszych i najbardziej udanych idei inżynierii oprogramowania — spotkałeś ją jako style w dokumencie (13.3), a tu w skali internetu. Dostępność zaś to część szerszego projektowania uniwersalnego: tworzenia rzeczy użytecznych dla jak najszerszego grona bez potrzeby adaptacji (podjazdy służą wózkom, ale i rodzicom z wózkiem dziecięcym; napisy — niesłyszącym, ale i oglądającym w hałasie). Dobra dostępność cyfrowa czyni świat lepszym dla wszystkich, nie tylko dla osób z niepełnosprawnościami — i o tej odpowiedzialności twórcy jeszcze porozmawiamy w dziale 16.

🛠️ Teraz Ty

Napisz ręcznie (w zwykłym edytorze tekstu, zapisz jako .html, otwórz w przeglądarce) prostą stronę o sobie: nagłówek <h1>, kilka akapitów <p>, listę <ul>, link <a>, obraz <img> z poprawnym alt. Dodaj plik CSS zmieniający kolory i czcionki. Potem sprawdź dostępność: czy każdy obraz ma alt? czy nagłówki są prawdziwe? czy kontrast wystarcza? (Są darmowe narzędzia sprawdzające dostępność — warto puścić.) Bonus: spróbuj nawigować po swojej stronie samą klawiaturą (Tab).

📐 Definicje tej lekcji

HTML — język struktury i treści strony (znaczniki: nagłówki, akapity, listy, linki, obrazy).
CSS — język wyglądu (reguły: kolory, czcionki, układ); „kaskada" jak w arkuszu.
Dostępność — projektowanie stron użytecznych też dla osób z niepełnosprawnościami: prawdziwa struktura, alt, kontrast, napisy, obsługa klawiaturą.

📌 Najważniejsze w pigułce

HTML = struktura (co), CSS = wygląd (jak) — zasada „treść vs wygląd" z 13.3 w skali sieci.
Dostępność to sieć dla wszystkich: prawdziwe nagłówki, alt, kontrast, napisy — darmowe, gdy od początku.
Poprawny HTML służy naraz niewidomym, wyszukiwarkom i utrzymaniu — dobre praktyki się nakładają.

🎒 Zadania

Wskaż, co jest rolą HTML, a co CSS: (a) „ten tekst to nagłówek", (b) „nagłówki są granatowe", (c) „tu jest lista zakupów", (d) „listy mają odstęp 10px". Sformułuj regułę rozpoznawania.

Wskazówka i odpowiedź

HTML (struktura/treść): (a) i (c) — mówią czym jest fragment. CSS (wygląd): (b) i (d) — mówią jak wygląda. Reguła: jeśli zdanie odpowiada na „co to jest / jaka to rola?" → HTML; jeśli na „jak to ma wyglądać?" → CSS. To ten sam test co „treść vs wygląd" w dokumencie (13.3) — jedna zasada, dwa (a właściwie trzy, ze stylami dokumentu) konteksty.

Strona ma obrazek-wykres bez atrybutu alt. Wymień trzy różne sytuacje (trzy różne osoby/konteksty), w których ten brak robi realny problem.

Wskazówka i odpowiedź

(1) Osoba niewidoma z czytnikiem ekranu — usłyszy „obraz" albo nazwę pliku zamiast treści wykresu, traci informację całkowicie. (2) Ktoś z wolnym łączem, gdy obraz się nie załadował — zobaczy pusty prostokąt zamiast opisu, czym był. (3) Wyszukiwarka indeksująca stronę — nie „widzi" obrazów, czyta alt, by zrozumieć treść; bez niego wykres jest dla niej niewidzialny (gorsza pozycja, brak w wyszukiwaniu grafik). Jeden brakujący atrybut, trzy różne szkody — i dokładnie dlatego alt jest obowiązkowy, nie opcjonalny. Dobry alt opisuje treść/funkcję obrazu („wykres: sprzedaż rośnie od stycznia"), nie wygląd („niebieski wykres").

„Projektowanie uniwersalne" mówi, że rozwiązania dla osób z niepełnosprawnościami często pomagają wszystkim. Podaj dwa przykłady z sieci (albo świata fizycznego) i wyjaśnij mechanizm.

Wskazówka i odpowiedź

Sieć: (1) napisy do wideo — dla niesłyszących, ale też dla oglądających w hałaśliwym autobusie, uczących się języka, albo szukających frazy w materiale; (2) wysoki kontrast i duża czcionka — dla niedowidzących, ale też dla każdego w słońcu na telefonie. Świat fizyczny: podjazd (wózki inwalidzkie + wózki dziecięce + walizki + rowery); winda z przyciskami nisko i Braille'em (osoby na wózkach + niewidomi + dzieci). Mechanizm: projektując dla „skrajnego" przypadku, usuwasz bariery, na które w mniejszym stopniu natrafiają wszyscy — więc rozwiązanie służy szerzej, niż zakładano. Dostępność to nie koszt na rzecz mniejszości, lecz inwestycja w jakość dla ogółu. To jedna z piękniejszych zasad projektowania — i dobra nuta na koniec działu o tworzeniu treści.

🔍 Sprawdź, czy umiesz

Rozdzielić role HTML i CSS i napisać prostą stronę z poprawną strukturą.
Wymienić zasady dostępności i wyjaśnić, komu każda służy.
Uzasadnić, czemu poprawna struktura i dostępność opłacają się od początku i pomagają wszystkim.

Ucz się tej jednostki z asystentem