k_ kodly
Wróć do kursu
HTML + CSS

HTML, CSS, JavaScript. Kto za co odpowiada

W poprzedniej lekcji ustaliliśmy, że strona to plik z tekstem. Tylko że ludzie mówią o trzech językach naraz: HTML, CSS i JavaScript. Brzmi to jak trzy rzeczy do nauczenia się jednocześnie.

Spokojnie. To trzy różne roboty na jednej budowie i każdy pilnuje czegoś innego.


Kiedy coś na stronie wygląda nie tak, pierwsze pytanie brzmi: gdzie tego szukać. Zły odstęp to CSS. Brakujący akapit to HTML. Bez tego podziału będziesz przeglądać wszystkie pliki po kolei.

Ten podział przyda Ci się też od razu przy planie kursu. Przez pierwsze 42 lekcje piszemy sam HTML, potem dopiero CSS. Za chwilę zobaczysz, dlaczego taka kolejność ma sens.

Teoria

Trzy języki, trzy zadania:

HTML odpowiada za treść i jej znaczenie. Mówi: tu jest nagłówek, tu akapit, tu zdjęcie, tu tabela. Nie mówi, jak to ma wyglądać.

CSS odpowiada za wygląd. Mówi: nagłówek ma być złoty, tło ciemne, zdjęcia w trzech kolumnach, odstęp między sekcjami 64 piksele.

JavaScript odpowiada za zachowanie, które wymaga liczenia albo pamiętania. Koszyk w sklepie, wyszukiwarka podpowiadająca wyniki, mapa, którą przeciągasz palcem.

Porównanie do domu wystarczy na start. HTML to mury i podział na pokoje. CSS to tynk, kolor ścian i meble. JavaScript to winda i domofon.

Zwróć uwagę na kolejność. HTML da się czytać bez CSS-a i bez JavaScriptu, a CSS bez HTML-a nie ma czego kolorować.

Przykład

Ten sam plik, dwa razy. Najpierw sam HTML:

<h1>Wiedźmin 3: Dziki Gon</h1>
<p>Ostatnia gra o Geralcie z Rivii.</p>

Przeglądarka pokaże czarny napis na białym tle, czcionką z domyślnych ustawień. Treść jest, wyglądu nikt nie ustawiał.

Teraz dokładamy CSS:

h1 {
  color: #C9A227;
  font-size: 56px;
}

p {
  color: #9AA0A6;
}

Napis robi się złoty i duży, akapit szary. W pliku HTML nic się nie zmieniło. Treść dalej brzmi tak samo, doszedł tylko opis wyglądu.

To jest ten sam złoty kolor, którego używa nasze demo. Zobaczysz go w lekcji 49, kiedy będziemy wprowadzać paletę.

Wyjaśnienie

Z rozdzielenia treści od wyglądu biorą się dwie konkretne korzyści.

Pierwsza: jeden plik CSS obsługuje całą stronę. W naszym projekcie będą trzy podstrony i jeden arkusz style.css. Zmieniasz w nim kolor raz, zmienia się wszędzie.

Druga: HTML zostaje czytelny dla programów, które nie oglądają obrazków. Czytnik ekranu dla osoby niewidomej i wyszukiwarka Google czytają dokładnie tę strukturę, którą napiszesz. Dlatego w lekcji 36 robimy audyt semantyki, a nie „poprawianie wyglądu dla Google".

Nasza strona nie ma ani jednej linijki JavaScriptu. A jednak menu się rozwija, karty się unoszą pod kursorem, a zdjęcia w galerii powiększają. To wszystko robi CSS.

Granica między CSS-em a JavaScriptem biegnie tam, gdzie trzeba coś policzyć, zapamiętać albo dopytać serwer. Reakcja na kursor to wygląd, więc robi ją CSS. Sprawdzenie, czy hasło pasuje do konta, to zachowanie, więc robi je JavaScript.

Praktyka

Zobaczmy, co zostanie z demo, jeśli zabierzemy mu CSS.

  1. Otwórz index.html z folderu wiedzmin3-demo w przeglądarce.
  2. Naciśnij F12. Otworzy się panel narzędzi deweloperskich. Jeśli F12 nic nie robi, kliknij prawym przyciskiem gdziekolwiek na stronie i wybierz Zbadaj.
  3. Przejdź na zakładkę Elements (po polsku Elementy).
  4. Na górze zobaczysz <html>, a pod nim <head>. Kliknij szarą strzałkę przy <head>, żeby go rozwinąć.
  5. Znajdź linijkę <link rel="stylesheet" href="css/style.css">.
  6. Kliknij ją prawym przyciskiem i wybierz Delete element (Usuń element).

Strona rozsypie się na jedną długą kolumnę. Czarny tekst, białe tło, podkreślone niebieskie linki, zdjęcia w oryginalnym rozmiarze.

Popatrz na to chwilę. Cała treść dalej tam jest. Nagłówki, akapity, tabela, galeria, formularz. Wszystko w tej samej kolejności. Zniknął wyłącznie wygląd.

Tak właśnie będzie wyglądał Twój projekt przez pierwsze 42 lekcje. I dokładnie to widzi czytnik ekranu.

Odśwież stronę klawiszem F5. Wszystko wraca. DevTools nie zapisuje niczego na dysku, pracuje tylko na kopii otwartej w pamięci przeglądarki.

Uwaga na to

Usunęłam element i teraz nie umiem tego cofnąć. Odśwież stronę. Plik na dysku jest nietknięty. W DevTools da się też cofnąć zmianę skrótem Ctrl + Z, ale odświeżenie jest pewniejsze.

Usunęłam <link> i zmieniła się tylko czcionka. Trafiłaś w linijkę z fonts.googleapis.com. To arkusz z czcionkami Cinzel i Inter, nie nasz. Szukaj tej z href="css/style.css".

Nie widzę zakładki Elements, mam Console i jakieś błędy. Kliknij po prostu w napis Elements na górnym pasku DevTools. Zakładki dają się przełączać.

Panel zajmuje pół ekranu i strona jest nieczytelna. Złap krawędź panelu myszką i przeciągnij. Można go też przenieść na bok albo do osobnego okna, przez menu z trzema kropkami w prawym górnym rogu DevTools.

Podsumowanie

  • HTML to treść i znaczenie, CSS to wygląd, JavaScript to zachowanie wymagające liczenia lub pamiętania.
  • HTML działa sam, CSS bez HTML-a nie ma czego stylować. Stąd kolejność w kursie.
  • Jeden arkusz CSS obsługuje wszystkie podstrony naraz.
  • Nasze demo nie używa JavaScriptu. Menu, hover i animacje robi czysty CSS.
  • Strona z wyłączonym CSS-em pokazuje dokładnie to, co dostaje czytnik ekranu i wyszukiwarka.

Zadanie

Wejdź na dowolną dużą stronę, na przykład sklepową, i zrób na niej to samo. Znajdź <link rel="stylesheet"> w <head> i usuń go. Zastanów się, dlaczego tam efekt jest zwykle gorszy niż na naszym demie.

Sprawdź się

Quiz

Zaloguj się, aby rozwiązać quiz i ukończyć lekcję.

Zaloguj się
Następna lekcja Instalacja VS Code i przeglądarki