Cześć! Jeśli szukasz gotowego rozwiązania, które pozwoli Ci szybko stworzyć swoją pierwszą stronę internetową, to trafiłeś idealnie. W tym artykule dostarczam kompletny, działający wzór prostej strony w HTML i CSS, który możesz od razu skopiować, wkleić i zacząć modyfikować. To idealne rozwiązanie dla początkujących, którzy chcą szybko zobaczyć efekty swojej pracy i zrozumieć, jak poszczególne elementy kodu wpływają na wygląd i funkcjonalność witryny.

Gotowy wzór strony w HTML i CSS: skopiuj, wklej i stwórz swoją pierwszą witrynę

Zacznijmy od tego, co najważniejsze kodu! Przygotowałem dla Ciebie dwa pliki: index.html, który stanowi szkielet Twojej strony, oraz style.css, odpowiedzialny za jej wygląd. Skopiuj je do osobnych plików w tym samym folderze na swoim komputerze, a następnie otwórz index.html w przeglądarce. Zobaczysz swoją pierwszą, w pełni funkcjonalną stronę!

Krok 1: Kompletny kod HTML, na który czekałeś

Plik `index.html` szkielet Twojej strony

Poniżej znajdziesz cały kod HTML. Zwróć uwagę na jego strukturę używamy tutaj nowoczesnych, semantycznych tagów HTML5, które pomagają zarówno przeglądarkom, jak i wyszukiwarkom zrozumieć, co znajduje się na Twojej stronie. To fundament, który zaraz wspólnie rozłożymy na czynniki pierwsze.

    

 
 
 
Witaj na mojej stronie!
 
Twoje miejsce w sieci.
 
 
  
 
 
O mnie
 
Cześć! Jestem Kazimierz i to jest moja pierwsza prosta strona internetowa. Uczę się HTML i CSS i jestem podekscytowany możliwościami, jakie daje tworzenie stron.
 
Moim celem jest dzielenie się wiedzą i pomaganie innym w stawianiu pierwszych kroków w świecie web developmentu.
 
 
 
Moje projekty
 
Na razie to tylko prosty szablon, ale w przyszłości planuję tutaj prezentować swoje projekty. Bądź na bieżąco!
 
 
Projekt 1: Strona wizytówka
 
Projekt 2: Blog osobisty (w przygotowaniu)
 
 
 
 
Kontakt
 
Masz pytania? Skontaktuj się ze mną!
 
Email: kontakt@mojastrona.pl
 
 
 

Krok 2: Podstawowy kod CSS, który ożywi Twój projekt

Plik `style.css` serce wizualnej części strony

Ten kod CSS sprawi, że Twoja strona będzie wyglądać estetycznie i nowocześnie. Zastosowałem tutaj podstawowe style, resetowanie domyślnych ustawień przeglądarki, a także Flexbox do ułożenia nawigacji. Zmienne CSS pozwolą Ci łatwo zmieniać kolory w całym projekcie.

/* Resetowanie domyślnych stylów przeglądarki */
* { margin: 0; padding: 0; box-sizing: border-box;
} /* Zmienne CSS dla łatwej zmiany kolorów */
:root { --main-bg-color: #f4f4f4; --header-bg-color: #333; --nav-bg-color: #444; --text-color: #333; --light-text-color: #fff; --accent-color: #007bff; --footer-bg-color: #333; --container-width: 960px;
} body { font-family: 'Arial', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--main-bg-color);
} .container { width: 100%; max-width: var(--container-width); margin: auto; overflow: hidden; padding: 0 20px;
} /* Header */
header { background: var(--header-bg-color); color: var(--light-text-color); padding: 20px 0; text-align: center;
} header h1 { margin-bottom: 10px;
} /* Navigation */
nav { background: var(--nav-bg-color); color: var(--light-text-color); padding: 15px 0;
} nav .container { display: flex; justify-content: center; /* Centrowanie elementów nawigacji */ align-items: center;
} nav ul { list-style: none;
} nav ul li { display: inline; margin-right: 20px;
} nav ul li a { color: var(--light-text-color); text-decoration: none; font-weight: bold; transition: color 0.3s ease;
} nav ul li a:hover { color: var(--accent-color);
} /* Main content sections */
main section { padding: 30px 0; margin-bottom: 20px; background: #fff; border-bottom: 1px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} main section:last-of-type { border-bottom: none; margin-bottom: 0;
} main h2 { color: var(--accent-color); margin-bottom: 15px; text-align: center;
} main p { margin-bottom: 10px;
} main ul { list-style: inside disc; margin-left: 20px;
} /* Footer */
footer { background: var(--footer-bg-color); color: var(--light-text-color); text-align: center; padding: 20px 0; margin-top: 30px;
}

Anatomia naszego wzoru: jak to wszystko działa?

Teraz, gdy masz już działającą stronę, nadszedł czas, aby zrozumieć, co tak naprawdę skopiowałeś. Przejdziemy przez każdy kluczowy element kodu, wyjaśniając jego rolę i znaczenie. Zobaczysz, że to wcale nie jest takie skomplikowane, jak mogłoby się wydawać!

Sekcja `` niewidoczne, ale kluczowe centrum dowodzenia

Sekcja `

` to jak "mózg" Twojej strony. Chociaż jej zawartość nie jest bezpośrednio widoczna dla użytkownika w oknie przeglądarki, pełni ona kluczową rolę w konfiguracji i działaniu witryny. To tutaj podajesz przeglądarce i wyszukiwarkom ważne informacje o stronie, takie jak jej tytuł, opis, sposób kodowania znaków czy połączenie z plikami stylów CSS.

`` Dlaczego polskie znaki to nie problem?

Ten mały, ale potężny tag jest odpowiedzialny za prawidłowe wyświetlanie wszystkich znaków na Twojej stronie, w tym polskich liter (ą, ę, ć, ł, ń, ó, ś, ź, ż) oraz innych znaków specjalnych z różnych języków. Użycie gwarantuje, że Twoja treść będzie czytelna dla użytkowników na całym świecie, niezależnie od ich ustawień językowych. Zawsze umieszczaj go na początku sekcji !

`` Sekret idealnego wyglądu na każdym ekranie

W dzisiejszych czasach strony internetowe muszą wyglądać dobrze zarówno na dużych monitorach, jak i na małych ekranach smartfonów. Tag to klucz do osiągnięcia responsywności. Mówi on przeglądarce, aby szerokość strony dostosowała się do szerokości urządzenia (width=device-width) i aby początkowe powiększenie wynosiło 100% (initial-scale=1.0). Dzięki temu Twoja strona będzie automatycznie skalować się i układać elementy tak, aby były czytelne i użyteczne na każdym urządzeniu.

`` Most łączący HTML ze stylami CSS

Ten tag jest odpowiedzialny za połączenie Twojego pliku HTML z zewnętrznym arkuszem stylów CSS (style.css w naszym przypadku). To bardzo dobra praktyka, ponieważ oddziela treść (HTML) od prezentacji (CSS). Dzięki temu kod jest bardziej uporządkowany, łatwiejszy do zarządzania i modyfikowania. Zmiana wyglądu całej strony sprowadza się wtedy do edycji jednego pliku CSS, zamiast przeszukiwania wielu plików HTML.

Sekcja `` wszystko to, co widzi użytkownik

Sekcja to serce Twojej strony, jeśli chodzi o widoczną treść. Wszystko, co użytkownik widzi i z czym może wchodzić w interakcję tekst, obrazy, linki, przyciski znajduje się właśnie tutaj. To w budujemy całą strukturę wizualną naszej witryny.

`

` Jak zrobić dobre pierwsze wrażenie?

Tag

służy do tworzenia nagłówka strony. Zazwyczaj umieszcza się w nim najważniejsze elementy identyfikacyjne, takie jak logo, główny tytuł strony (często jako

) oraz ewentualnie krótki opis lub slogan. W naszym wzorze to właśnie

wita użytkownika głównym tytułem "Witaj na mojej stronie!" i jest pierwszym elementem, który przyciąga wzrok.

`

Element

jest przeznaczony do grupowania linków nawigacyjnych, czyli menu, które pozwala użytkownikom przemieszczać się po stronie. W naszym przykładzie używamy go do stworzenia prostego menu z linkami do sekcji "O mnie", "Moje projekty" i "Kontakt". Dzięki niemu użytkownik zawsze wie, gdzie się znajduje i dokąd może się udać. Dobra nawigacja to podstawa użytecznej strony.

`

` i `

` Organizacja treści jak u profesjonalisty

Tag

jest przeznaczony do przechowywania głównej, unikalnej treści strony. Oznacza to, że na jednej stronie powinien znajdować się tylko jeden tag

. Wewnątrz

używamy tagów

do logicznego grupowania powiązanych ze sobą treści. Każda

w naszym wzorze (np. "O mnie", "Moje projekty") stanowi odrębną część tematyczną strony, co zwiększa jej czytelność i semantykę, ułatwiając zarówno użytkownikom, jak i wyszukiwarkom zrozumienie struktury treści.

`

Tag

to stopka strony, czyli sekcja znajdująca się na samym dole. Zazwyczaj zawiera ona informacje o prawach autorskich, dane kontaktowe, linki do polityki prywatności, regulaminu, czy też ikony mediów społecznościowych. W naszym wzorze dumnie prezentuje informację o prawach autorskich, stanowiąc eleganckie zakończenie każdej podstrony.

Magia stylów: zrozumienie kluczowych reguł CSS z naszego wzoru

Poznaliśmy już strukturę HTML, ale to CSS sprawia, że strona wygląda tak, a nie inaczej. Teraz zagłębimy się w plik style.css i zrozumiemy, jak poszczególne reguły wpływają na wygląd naszej witryny. Zobaczysz, że dzięki CSS możesz kontrolować każdy aspekt wizualny, od kolorów po rozmieszczenie elementów.

Resetowanie marginesów i paddingów: Dlaczego to pierwszy krok każdego webdevelopera?

Zauważyłeś na początku pliku CSS regułę * { margin: 0; padding: 0; box-sizing: border-box; }? To absolutna podstawa i pierwszy krok, który powinien wykonać każdy webdeveloper. Przeglądarki internetowe domyślnie dodają własne marginesy (margin) i wypełnienia (padding) do różnych elementów HTML (np. do nagłówków, list, akapitów). Powoduje to, że ta sama strona może wyglądać nieco inaczej w Chrome, Firefoxie czy Safari. Resetowanie tych wartości do zera daje nam pełną kontrolę nad layoutem i zapewnia spójny wygląd na wszystkich przeglądarkach. Właściwość box-sizing: border-box; dodatkowo ułatwia pracę z szerokościami i wysokościami, sprawiając, że padding i border są wliczane w podaną szerokość elementu.

Flexbox w praktyce: Jak łatwo stworzyć responsywne menu nawigacyjne?

W naszym wzorze wykorzystujemy Flexbox do ułożenia elementów nawigacji. Spójrz na reguły dla nav .container:

nav .container { display: flex; justify-content: center; /* Centrowanie elementów nawigacji */ align-items: center;
}

Właściwość display: flex; przekształca kontener (w tym przypadku .container wewnątrz

) w elastyczny kontener Flexbox. Dzięki temu jego elementy potomne (czyli lista

z linkami) stają się elastycznymi elementami (flex items). Następnie:

• justify-content: center; centruje elementy wzdłuż osi głównej (poziomo).
• align-items: center; centruje elementy wzdłuż osi poprzecznej (pionowo).

To sprawia, że nasze menu jest łatwe do wyśrodkowania i automatycznie dostosowuje się do dostępnej przestrzeni, co jest ogromną zaletą Flexboxa, zwłaszcza dla początkujących, którzy chcą szybko tworzyć responsywne układy.

Kolory, fonty i tło: Podstawy personalizacji wyglądu

Zmiana wyglądu strony zaczyna się od podstawowych właściwości CSS:

• color: var(--text-color);: Określa kolor tekstu. W naszym przykładzie używamy zmiennej CSS --text-color, co ułatwia zarządzanie kolorami.
• font-family: 'Arial', sans-serif;: Definiuje rodzaj czcionki. Możesz tutaj wpisać nazwy innych czcionek dostępnych w systemie lub zaimportować własne (np. z Google Fonts).
• background-color: var(--main-bg-color);: Ustawia kolor tła dla elementu.
• background-image: url('sciezka/do/obrazka.jpg');: Pozwala ustawić obrazek jako tło.

Jak wspomniałem wcześniej, w naszym kodzie CSS używamy zmiennych CSS (zdefiniowanych w :root, np. --main-color: #333;). To fantastyczna praktyka! Zamiast zmieniać ten sam kolor w dziesięciu miejscach, wystarczy zmodyfikować wartość zmiennej w jednym miejscu, a zmiany zostaną zastosowane w całym projekcie. To ogromna oszczędność czasu i sposób na utrzymanie spójności wizualnej.

Proste centrowanie i odstępy: Klucz do czytelnego i estetycznego layoutu

Centrowanie elementów i zarządzanie odstępami to podstawy estetycznego designu. W naszym wzorze zobaczysz kilka technik:

• Centrowanie bloków: Dla elementów blokowych, takich jak .container, używamy margin: auto; w połączeniu z określoną szerokością (max-width: var(--container-width);). To klasyczna metoda centrowania bloku poziomo na stronie.
• Centrowanie zawartości kontenera: Jak już omówiliśmy, Flexbox z justify-content: center; i align-items: center; świetnie radzi sobie z centrowaniem elementów wewnątrz kontenera.
• Odstępy (padding i margin):
  • padding (wypełnienie) to przestrzeń wewnątrz elementu, między jego zawartością a krawędzią. Używamy go np. w header i section, aby tekst nie "przyklejał się" do krawędzi.
  • margin (margines) to przestrzeń na zewnątrz elementu, oddzielająca go od innych elementów. Używamy go np. do oddzielania sekcji od siebie (margin-bottom: 20px;).

Dzięki tym prostym właściwościom możesz kontrolować, jak elementy są rozmieszczone i jak "oddychają" na stronie, co znacząco wpływa na jej czytelność i ogólne wrażenie estetyczne.

Twój ruch! Jak samodzielnie spersonalizować ten szablon?

Teraz, gdy rozumiesz już podstawy, nadszedł czas, abyś przejął stery! Ten szablon to tylko punkt wyjścia. Pokażę Ci, jak łatwo możesz go spersonalizować, aby stał się Twoją własną, unikalną stroną. Nie bój się eksperymentować to najlepszy sposób na naukę!

Zmiana tekstów i nagłówków: Wypełnij stronę własną treścią

To najprostsza i najbardziej oczywista forma personalizacji. Aby zmienić teksty na stronie:

1. Otwórz plik index.html w edytorze kodu (np. VS Code, Sublime Text, Notepad++).
2. Zlokalizuj nagłówki (
   ,
   ) i akapity (
   ), które chcesz zmodyfikować.
3. Zastąp przykładową treść ("Witaj na mojej stronie!", "O mnie") swoimi własnymi tekstami.
4. Zapisz plik index.html i odśwież stronę w przeglądarce, aby zobaczyć zmiany.

Pamiętaj, aby zawsze edytować tylko zawartość między tagami, a nie same tagi!

Jak podmienić obrazek w tle lub dodać własne logo?

Chcesz dodać własne elementy graficzne? To proste!

• Zmiana obrazka w tle: W pliku style.css możesz dodać właściwość background-image do wybranego elementu (np. body lub header). Przykładowo, aby dodać obrazek w tle do sekcji nagłówka:

  header { background: var(--header-bg-color); background-image: url('images/moje-tlo.jpg'); /* Zmień ścieżkę do swojego obrazka */ background-size: cover; /* Dopasowuje obrazek do rozmiaru elementu */ background-position: center; /* Centruje obrazek */ color: var(--light-text-color); padding: 20px 0; text-align: center;
  }

  Upewnij się, że ścieżka do obrazka (images/moje-tlo.jpg) jest poprawna.
• Dodanie własnego logo: Otwórz index.html. W sekcji
  (lub innym miejscu, gdzie chcesz umieścić logo) wstaw tag :

   
    
  Witaj na mojej stronie!
   
  Twoje miejsce w sieci.
   
  

  Następnie możesz stylować to logo w style.css, aby dopasować jego rozmiar i położenie.

Paleta kolorów: Gdzie i jak modyfikować barwy, by pasowały do Twojej marki?

Zmiana kolorów to jeden z najszybszych sposobów na nadanie stronie unikalnego charakteru. Dzięki temu, że użyłem zmiennych CSS, jest to niezwykle proste:

1. Otwórz plik style.css.
2. Na samym początku pliku znajdziesz sekcję :root, gdzie zdefiniowane są wszystkie zmienne kolorów:

   :root { --main-bg-color: #f4f4f4; --header-bg-color: #333; --nav-bg-color: #444; --text-color: #333; --light-text-color: #fff; --accent-color: #007bff; --footer-bg-color: #333; --container-width: 960px;
   }

3. Zmień wartości szesnastkowe (np. #333, #007bff) na swoje ulubione kolory. Możesz użyć narzędzi online do wyboru kolorów (np. Color Picker w Google) lub generatorów palet.
4. Zapisz plik style.css i odśwież stronę. Zobaczysz, że cała paleta kolorów zmieniła się natychmiast, bez konieczności edytowania każdego pojedynczego elementu! To jest właśnie siła zmiennych CSS.

Co dalej? Od prostego wzoru do w pełni funkcjonalnej strony internetowej

Gratulacje! Masz już swoją pierwszą, spersonalizowaną stronę internetową. Ale to dopiero początek Twojej przygody z web developmentem. Poniżej podpowiadam, jakie kroki możesz podjąć, aby rozwijać swój projekt i zdobywać nowe umiejętności.

Jak dodać kolejne podstrony i połączyć je linkami?

Większość stron internetowych składa się z wielu podstron (np. "O mnie", "Galeria", "Kontakt"). Tworzenie ich jest proste:

1. Utwórz nowy plik HTML: W tym samym folderze, co index.html, stwórz nowy plik, np. o-mnie.html.
2. Skopiuj podstawową strukturę: Skopiuj cały kod z index.html do o-mnie.html.
3. Zmień treść: Edytuj sekcję
   w o-mnie.html, aby zawierała unikalną treść dla tej podstrony (np. szczegółowe informacje o sobie).
4. Zaktualizuj nawigację: W pliku index.html (i w każdym innym pliku HTML, który będzie miał menu nawigacyjne) zmień linki w sekcji , aby wskazywały na nowe pliki, np.:

   O mnie
   Moje projekty
   Kontakt

5. Powtórz dla każdej podstrony: Dla każdej nowej podstrony powtórz te kroki.

W ten sposób zbudujesz całą witrynę z wieloma sekcjami, połączonymi ze sobą logiczną nawigacją.

Gdzie szukać inspiracji i darmowych zasobów (zdjęcia, ikony)?

Aby Twoja strona wyglądała profesjonalnie, będziesz potrzebować dobrych zdjęć i ikon. Oto kilka sprawdzonych źródeł darmowych zasobów:

• Darmowe zdjęcia wysokiej jakości:
  • Unsplash
  • Pexels
  • Pixabay
• Darmowe ikony:
  • Font Awesome (ikony jako fonty, łatwe do stylowania)
  • Flaticon (ikony w różnych formatach)

Pamiętaj, aby zawsze sprawdzać licencje użytkowania, choć wymienione przeze mnie serwisy oferują zasoby do użytku komercyjnego i osobistego bez konieczności podawania autorstwa.

Przeczytaj również: Jak dodać linki do HTML? Opanuj hiperłącza raz na zawsze

Kiedy HTML i CSS to za mało? Krótkie wprowadzenie do roli JavaScriptu

HTML i CSS są fundamentem każdej strony, ale jeśli chcesz, aby Twoja witryna była interaktywna, dynamiczna i reagowała na działania użytkownika, będziesz potrzebować JavaScriptu. JavaScript to język programowania, który pozwala na dodawanie takich funkcji jak:

• Animacje i efekty wizualne (np. wysuwane menu, karuzele zdjęć).
• Walidacja formularzy (sprawdzanie, czy użytkownik poprawnie wypełnił pola).
• Dynamiczne ładowanie treści bez przeładowywania strony.
• Interaktywne mapy, wykresy i gry.

Na tym etapie nie musisz się tym martwić, ale warto wiedzieć, że gdy poczujesz, że sam HTML i CSS to za mało, JavaScript będzie kolejnym ekscytującym krokiem w Twojej podróży z web developmentem!