Jak dodać wygląd za pomocą CSS

Czysty HTML spełnia swoją funkcję, ale bez stylów będzie wyglądał bardzo surowo. Utwórz w tym samym folderze plik style.css, a potem połącz go z dokumentem w sekcji .

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

* {
  box-sizing: border-box;
}

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

header,
main,
footer {
  width: min(900px, 92%);
  margin: 0 auto;
}

header {
  padding: 64px 0 32px;
}

main {
  padding: 32px 0 64px;
}

h1,
h2 {
  line-height: 1.2;
}

footer {
  padding: 24px 0;
  border-top: 1px solid #d8dde2;
}

Najważniejsza zasada brzmi prosto: HTML opisuje treść, CSS opisuje prezentację. Nie warto wpisywać kolorów i rozmiarów bezpośrednio w każdym znaczniku, bo przy większej stronie szybko prowadzi to do bałaganu i utrudnia późniejsze zmiany.

Przeczytaj również: Jak zmienić kolor tła HTML? CSS to klucz do nowoczesnej strony!

Responsywność bez komplikowania projektu

Strona powinna działać nie tylko na monitorze. Na początek wystarczy elastyczna szerokość, ograniczenie maksymalnej szerokości treści i obrazy, które nie wychodzą poza ekran.

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

Nie projektuję osobnej, pomniejszonej wersji witryny dla telefonu. Lepiej budować układ responsywny, który płynnie dopasowuje się do różnych szerokości. Test na smartfonie powinien być częścią pracy od początku, a nie kontrolą wykonywaną dopiero przed publikacją.

Jak rozbudować stronę o menu, obraz i formularz

Gdy podstawowy dokument działa, można dodać nawigację i kolejne sekcje. Menu powinno prowadzić do konkretnych miejsc, a nie być wyłącznie dekoracją.

  
O mnie
  
Krótki opis osoby lub projektu.

Przy obrazach pamiętaj o atrybucie alt. Nie powinien zawierać przypadkowego ciągu słów kluczowych, tylko krótko opisywać to, co faktycznie widać. Jeśli grafika jest czysto dekoracyjna, pusty atrybut alt="" jest lepszy niż mylący opis.

Formularz kontaktowy wymaga większej ostrożności, niż często się zakłada. Sam HTML pokaże pola, ale nie wyśle wiadomości bez obsługi po stronie serwera albo zewnętrznej usługi.

  Adres e-mail
  

  Wiadomość
  

  Wyślij wiadomość

Przy projekcie edukacyjnym formularz może być tylko demonstracją. Przy prawdziwej stronie trzeba jeszcze zadbać o walidację danych, ochronę przed spamem, zgodę na przetwarzanie danych i bezpieczne przechowywanie informacji.

Jak sprawdzić stronę przed publikacją

Najczęstszy błąd początkujących polega na tym, że strona jest uznawana za gotową, gdy tylko otwiera się w jednej przeglądarce. Ja sprawdzam ją w kilku szerokościach ekranu, klikam każdy odnośnik i celowo testuję sytuacje, w których tekst jest dłuższy niż zakładano.

• Sprawdź, czy dokument zapisuje się w kodowaniu UTF-8 i poprawnie pokazuje polskie znaki.
• Otwórz stronę na komputerze i telefonie.
• Zweryfikuj, czy obrazy mają opisowy alt.
• Upewnij się, że nagłówki mają logiczną kolejność.
• Przetestuj menu, przyciski i formularze.
• Sprawdź, czy tekst ma odpowiedni kontrast i da się powiększyć.

Warto również użyć walidatora HTML. Taki test wykrywa między innymi niezamknięte znaczniki, błędnie zapisane atrybuty i problemy ze strukturą dokumentu. Brak błędów walidacji nie oznacza jeszcze dobrej strony, ale pozwala usunąć podstawowe usterki, zanim zaczną przeszkadzać użytkownikom.

Nie ignoruję też wydajności. Duże zdjęcie prosto z aparatu może ważyć kilka megabajtów, choć na stronie wystarczyłby plik o wielkości kilkuset kilobajtów. Kompresja obrazów, ograniczenie zbędnych skryptów i czytelny CSS często dają większy efekt niż efektowne animacje.

Jak opublikować stronę w internecie

Lokalny plik HTML działa tylko na Twoim komputerze. Aby inni mogli go otworzyć, potrzebujesz hostingu, czyli miejsca na serwerze, oraz opcjonalnie domeny, czyli własnego adresu strony.

Prosta strona statyczna może zostać opublikowana bezpłatnie na wybranych usługach, ale własna domena i regularny hosting zwykle kosztują. W Polsce trzeba liczyć się orientacyjnie z kilkudziesięcioma złotymi za domenę .pl po promocji oraz od około kilkudziesięciu do kilkuset złotych rocznie za podstawowy hosting, zależnie od odnowienia i parametrów pakietu.

Przed zakupem patrzę nie tylko na cenę pierwszego roku. Promocja może być bardzo tania, a odnowienie wyraźnie droższe. Dla małej wizytówki nie potrzebujesz serwera dedykowanego, dużej bazy danych ani rozbudowanego systemu. Najprostszy pakiet wystarczy, jeśli strona składa się głównie z HTML, CSS i kilku obrazów.

Co najczęściej psuje pierwszą stronę

Jednym problemem jest brak planu treści. Początkujący często zaczynają od kolorów i efektów, a dopiero później zastanawiają się, co użytkownik ma przeczytać lub zrobić. Ja najpierw zapisuję cel strony, główny komunikat i kolejność sekcji, a dopiero potem dobieram wygląd.

• Wszystko w jednym pliku utrudnia rozwój, dlatego CSS warto przenieść do osobnego arkusza.
• Niejasne nagłówki pogarszają czytelność i utrudniają poruszanie się po stronie.
• Brak wersji mobilnej sprawia, że przyciski i tekst mogą być niewygodne na małym ekranie.
• Obrazy bez alt ograniczają dostępność dla osób korzystających z czytników ekranu.
• Formularz bez zabezpieczeń może generować spam albo nie działać po publikacji.
• Kopiowanie przypadkowych fragmentów kodu często wprowadza zależności, których autor nie rozumie.

Nie próbowałbym też od razu budować sklepu, panelu użytkownika czy aplikacji internetowej samym HTML-em. Do takich projektów potrzebne są dodatkowe technologie, baza danych i zabezpieczenia. HTML jest świetnym początkiem, ale nie zastępuje całego zaplecza aplikacji.

Najlepszy pierwszy projekt to mała strona z konkretnym celem

Na start polecam jednostronicową wizytówkę, portfolio albo stronę wydarzenia. Taki projekt pozwala przećwiczyć strukturę dokumentu, CSS, obrazy, menu, responsywność i publikację bez tonęcia w nadmiarze narzędzi.

Ustal jedną funkcję strony, przygotuj folder z trzema plikami, napisz semantyczny HTML, dodaj prosty CSS i przetestuj całość na telefonie. Gotowa, mała witryna nauczy więcej niż kolejny tutorial oglądany bez pisania kodu.

Kiedy ten schemat stanie się zrozumiały, dopiero wtedy warto sięgnąć po JavaScript, frameworki albo system zarządzania treścią. Solidna znajomość podstaw sprawia, że późniejsze narzędzia przyspieszają pracę, zamiast ukrywać problemy pod warstwą gotowych komponentów.