Jak połączyć HTML z CSS-em

Jeśli chcesz zmienić kolory, szerokość treści albo odstępy, utwórz w tym samym folderze plik style.css. Połącz go z dokumentem HTML w sekcji :

Przykładowy arkusz może wyglądać tak:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  background: #f4f6f8;
}

main {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
}

h1 {
  color: #155eef;
}

Rozdzielenie struktury od wyglądu to jedna z najważniejszych zasad tworzenia stron. Dzięki temu możesz zmienić wygląd wielu podstron bez poprawiania każdego akapitu osobno. Początkujący często próbują stylować wszystko atrybutem style w HTML, ale przy większym projekcie szybko robi się to nieczytelne.

Sprawdź stronę na szerokim monitorze i na telefonie. Responsywność oznacza dopasowanie układu do różnych rozmiarów ekranu. Na początek wystarczy elastyczna szerokość, ograniczenie maksymalnej szerokości treści i poprawnie ustawiony znacznik viewport.

Strona lokalna a publikacja w internecie

Lokalny plik HTML działa tylko na urządzeniu, na którym został zapisany. Aby inni mogli go otworzyć, musisz przesłać pliki na serwer. Przy prostej stronie wystarczą zazwyczaj index.html, style.css oraz folder z obrazami.

Przed publikacją sprawdź, czy ścieżki do plików są względne i poprawne. Jeżeli obraz działa lokalnie, ale znika po wysłaniu strony, przyczyną zwykle jest literówka w nazwie folderu albo różnica między wielkimi i małymi literami.

Do prostej wizytówki nie potrzebujesz od razu systemu CMS. Statyczna strona jest szybka, łatwa do kontroli i ma niewiele elementów, które mogą się zepsuć. CMS zaczyna mieć przewagę wtedy, gdy kilka osób regularnie publikuje artykuły, produkty lub aktualności.

Błędy, które najczęściej blokują początkujących

Najpierw sprawdź nazwę pliku. index.html.txt nie jest dokumentem HTML, nawet jeśli system ukrywa końcówki nazw. W ustawieniach eksploratora plików włącz wyświetlanie rozszerzeń, aby mieć pewność, co naprawdę zapisujesz.

• Brak zamknięcia znacznika, na przykład
  bez .
• Niepoprawna ścieżka do obrazu lub arkusza CSS.
• Używanie polskich znaków i spacji w nazwach plików.
• Brak atrybutu alt przy obrazach.
• Tworzenie całej strony za pomocą pustych elementów
  .
• Testowanie wyłącznie na dużym ekranie.

Gdy coś nie działa, nie zmieniaj od razu połowy kodu. Otwórz narzędzia deweloperskie przeglądarki klawiszem F12 i sprawdź zakładkę Console lub Network. Komunikat o brakującym pliku często prowadzi prosto do przyczyny.

Przydatne jest także przejście przez krótką checklistę. Czy dokument ma tytuł? Czy język ustawiono na polski? Czy nagłówki są ułożone logicznie? Czy linki działają, obrazy mają tekst alternatywny, a strona jest czytelna na telefonie? Takie podstawy robią większą różnicę niż efektowne animacje.

Co rozwijać po pierwszej stronie

Po opanowaniu struktury dokumentu warto nauczyć się selektorów CSS, układu Flexbox i Grid oraz podstaw JavaScriptu. Nie próbowałbym jednak poznawać wszystkiego jednocześnie. Najlepszy postęp daje mały projekt, na przykład strona portfolio z trzema podstronami, formularzem kontaktowym i responsywnym menu.

HTML pozostaje przydatny nawet wtedy, gdy później korzystasz z frameworków albo generatorów kodu. Narzędzia mogą przyspieszyć pracę, ale bez rozumienia struktury trudno ocenić, czy wygenerowana strona jest dostępna, szybka i łatwa do utrzymania.

Na start zapamiętaj prosty podział: HTML opisuje znaczenie treści, CSS odpowiada za prezentację, a JavaScript dodaje zachowanie. Kiedy te role są rozdzielone, łatwiej poprawiać błędy i rozwijać projekt bez przepisywania go od zera.

Od pustego pliku do działającej wizytówki

Najprostsza droga wygląda tak: utwórz folder, dodaj index.html, wpisz poprawny szkielet, uzupełnij treść i otwórz plik w przeglądarce. Potem dołącz CSS, sprawdź wersję mobilną i dopiero na końcu zdecyduj, czy potrzebujesz domeny oraz hostingu.

Nie musisz znać dziesiątek znaczników, żeby zacząć. Wystarczy rozumieć kilka podstawowych elementów i świadomie budować z nich dokument. Każda kolejna strona będzie wtedy nie tylko szybsza do wykonania, ale też bardziej uporządkowana, dostępna i gotowa do dalszej rozbudowy.