HTML, CSS i JavaScript — trzy Building Blocks Sieci

Wszystkie strony internetowe, od najprostszej strony docelowej po dużą aplikację internetową, opierają się na tych samych trzech technologiach. Każdy ma swoją rolę i dobrym nawykiem jest ich rozdzielanie: treść oddzielnie, wygląd oddzielnie i zachowanie oddzielnie.

HTML (HyperText Markup Language) opisuje zawartość i jej strukturę: nagłówki, akapity, listy, łącza, obrazy i formularze. Semantyczne HTML oznacza wybieranie elementów na podstawie ich znaczenia — nagłówek powinien być elementem nagłówka, a nie tylko tekst powiększony za pomocą stylów. To pomaga zarówno wyszukiwarkom, jak i czytelnikom ekranu w zrozumieniu strony.

CSS (kaskadowe arkusze stylów) kontroluje wygląd treści: kolory, czcionki, odstępy, układ i responsywny projekt. Nazwa 'kaskadowy' odnosi się do faktu, że reguły mogą dziedziczyć i nadpisywać się nawzajem zgodnie z określonymi regułami priorytetu. Nowoczesne układy są zazwyczaj budowane za pomocą flexbox i grid, które umożliwiają dostosowanie do różnych rozmiarów ekranu.

JavaScript sprawia, że strona jest interaktywna: reaguje na kliknięcia, pobiera dane, aktualizuje zawartość bez przeładowania strony i weryfikuje formularze. Podczas gdy HTML i CSS są statycznymi opisami, JavaScript jest pełnym językiem programowania uruchamianym w przeglądarce i może zmieniać stronę, gdy użytkownik jej używa.

Solidna strona internetowa funkcjonuje w swojej podstawie bez JavaScriptu i zostaje następnie ulepszona, gdzie ma to sens. Myśl o dostępności od samego początku: używaj elementów semantycznych, upewniaj się, że wszystko można obsługiwać za pomocą klawiatury, zapewniaj teksty alternatywne do obrazów i zapewniaj wystarczający kontrast. To nie jest dodatkowa praca na koniec — to część rzemiosła.

“HTML to kości, CSS to skóra, a JavaScript to mięśnie. Dobra strona działa, nawet zanim pojawią się mięśnie.”

— Zwykła reguła nauczania w tworzeniu stron internetowych