Podstawowe zasady tworzenia stron internetowych — HTML, CSS i CMS

Chociaż jako grafik mediów niekoniecznie musisz kodować sam, pracujesz blisko ze wskazownikami sieci — i im lepiej rozumiesz technologię za witryną, tym lepsze będą twoje decyzje projektowe i współpraca. Internet to nie tylko płótno; jest budowany ze struktur, które mają własne zasady i ograniczenia.

HTML (HyperText Markup Language) to język, który opisuje strukturę zawartości na stronie internetowej: co jest nagłówkiem, co jest akapitem, co jest listą lub obrazem. HTML nie mówi, jak coś powinno wyglądać — tylko co to jest. To ważne rozróżnienie: prawidłowo użyty HTML czyni stronę zrozumiałą zarówno dla przeglądarek, czytników ekranu i wyszukiwarek, niezależnie od tego, jak jest wizualnie projektowany.

CSS (Kaskadowe Arkusze Stylów) steruje wyglądem zawartości HTML: kolory, czcionki, odstępy, umieszczenie. Ponieważ wygląd i zawartość są oddzielone, ta sama zawartość HTML może wyglądać zupełnie inaczej w zależności od CSS — to między innymi to, co umożliwia responsywny design, gdzie strona dostosowuje swój układ do szerokości ekranu.

• 01Model pudełka — każdy element HTML to pudełko z zawartością, wypełnieniem, obramowaniem i marginesem, które kontroluje CSS.
• 02Flexbox i grid — nowoczesne narzędzia CSS do elastycznego umieszczania elementów na stronie lub siatce.
• 03Responsywny design — układ automatycznie dostosowuje się do rozmiaru ekranu, od dużego ekranu komputera do małego telefonu komórkowego.
• 04Punkty podziału — szerokości ekranu, gdzie układ zmienia się z jednego zestawu reguł na inny.

Czysta strona HTML/CSS jest statyczna: zawartość zmienia się tylko wtedy, gdy deweloper edytuje kod. Większość stron internetowych dzisiaj jest budowana na CMS (system zarządzania treścią) — system, który oddziela zawartość od projektu technicznego, tak aby redaktor bez wiedzy programistycznej mógł aktualizować tekst i obrazy poprzez interfejs użytkownika.

Semantyczny HTML oznacza używanie właściwych elementów do tego, do czego są zrobione — nagłówek jako nagłówek, przycisk jako przycisk, nie tylko kwadrat z tekstem, który wygląda jak przycisk. Brzmi to jak szczegół, ale ma kluczowe znaczenie dla dostępności: czytnik ekranu może powiedzieć użytkownikowi niedowidzącemu, że 'tutaj jest przycisk', tylko jeśli kod faktycznie mówi, że to przycisk.

Im lepiej rozumiesz, jak design staje się kodem, tym łatwiej jest współpraca z programistami. Design, który uwzględnia, jak tekst może się różnić długością, jak obrazy powinny być przycięte w różnych rozmiarach ekranu i co jest technicznie realistyczne w ramach czasowych, oszczędza obu stronom powtarzające się poprawki na koniec projektu.

“Piękny projekt, którego nie można zbudować w terminie lub nie działa na urządzeniu mobilnym, to nie gotowy projekt — to dobry pomysł, któremu brakuje ostatniego ogniwa.”

— Zawodowa uwaga na temat współpracy między projektowaniem i rozwojem