Jak Zrobić Stronę Internetową W Notatniku

Written by Fiona Delgado
Updated at: 12 December 2025

Zaczynasz swoją przygodę z tworzeniem stron internetowych i czujesz się przytłoczony? Widzisz skomplikowane terminy jak HTML, CSS, JavaScript i zastanawiasz się, czy to na pewno dla Ciebie? Wiem, jak to jest. Wielu z nas, zaczynając naukę, czuje się jak zagubione dziecko w wielkim supermarkecie technologii. Ale mam dla Ciebie dobrą wiadomość: prawdziwe cuda, te fundamentalne cegiełki każdej strony internetowej, można zbudować nawet za pomocą najprostszego narzędzia, które masz pewnie na swoim komputerze - Notatnika. Tak, dobrze czytasz. Zamiast drogich programów i skomplikowanych interfejsów, zacznijmy od podstaw, tam gdzie zaczynali pionierzy sieci.

Wyobraź sobie, że chcesz napisać list do przyjaciela. Używasz do tego długopisu i kartki. Notatnik to taki cyfrowy długopis i kartka dla twórcy stron internetowych. Pozwala nam pisać kod – język, który "rozumieją" przeglądarki internetowe, by potem wyświetlić nam piękną stronę. Jest to podejście, które pozwala zrozumieć fundamentalne zasady stojące za każdą stroną, którą odwiedzasz. Jak mówiła Marie Curie, jedna z największych naukowczyń w historii: "Nic w życiu nie należy się bać, należy to tylko zrozumieć." To samo dotyczy kodowania. Im lepiej zrozumiemy podstawy, tym mniej będziemy się bać bardziej zaawansowanych narzędzi.

Pierwsze Kroki: Czym Jest Kod i Jak Zacząć?

Zanim otworzymy Notatnik, porozmawiajmy chwilę o tym, co będziemy w nim tworzyć. Kod to zestaw instrukcji. Przeglądarka internetowa (jak Chrome, Firefox, Edge) czyta te instrukcje i na ich podstawie tworzy obraz, który widzisz na ekranie. Podstawowymi językami, których będziemy używać w Notatniku, są:

Must Read

HTML (HyperText Markup Language): To szkielet Twojej strony. Definiuje, co na stronie ma się znaleźć – nagłówki, akapity, obrazy, linki.
CSS (Cascading Style Sheets): To ubranie dla Twojego szkieletu. Określa, jak elementy HTML mają wyglądać – ich kolor, rozmiar, czcionkę, rozmieszczenie.

Na początku skupimy się na HTML, bo od niego wszystko się zaczyna. Zrozumienie, jak budować strukturę, jest kluczowe. Bez dobrej struktury, nawet najpiękniejsze "ubranie" nie będzie dobrze leżeć.

Otwieramy Notatnik: Tworzenie Pierwszego Pliku HTML

Gotowi? Uruchom swój Notatnik. Na Windowsie znajdziesz go, wpisując "Notatnik" w wyszukiwarce Start. Na macOS, możesz użyć TextEdit i upewnić się, że jest w trybie zwykłego tekstu (Format -> Make Plain Text).

Krok 1: Podstawowa Struktura HTML

Wpisz w Notatniku następujący kod. Nie martw się, jeśli nie rozumiesz każdego fragmentu od razu. Skup się na tym, co widzisz – to po prostu tekst z pewnymi specjalnymi znakami.


<!DOCTYPE html>
<html>
<head>
    <title>Moja Pierwsza Strona</title>
</head>
<body>

    <h1>Witaj na Mojej Stronie!</h1>
    <p>To jest mój pierwszy akapit. Jestem podekscytowany, że mogę tworzyć własne strony internetowe!</p>

</body>
</html>

Co tu widzimy?

<!DOCTYPE html>: Mówi przeglądarce, że to jest dokument HTML5.
<html> i </html>: To są znaczniki otwierający i zamykający, które obejmują cały kod HTML strony. Wszystko, co jest "wewnątrz" <html>, jest częścią strony.
<head> i </head>: Zawiera informacje "za kulisami" strony, które nie są bezpośrednio widoczne dla użytkownika, takie jak tytuł strony.
<title>Moja Pierwsza Strona</title>: Tekst widoczny na karcie przeglądarki.
<body> i </body>: Tutaj znajduje się cała treść widoczna na stronie – tekst, obrazy, linki itp.
<h1>Witaj na Mojej Stronie!</h1>: Nagłówek pierwszego poziomu. h1 to największy i najważniejszy nagłówek. Istnieją też h2, h3 itd., które są mniejsze.
<p>To jest mój pierwszy akapit...</p>: Definiuje akapit tekstu.

Ważne: Zauważ, że większość znaczników ma formę pary: otwierający (np. <p>) i zamykający (</p>), który ma ukośnik. To jak otwieranie i zamykanie drzwi – wszystko, co jest w środku, jest "wewnątrz" tego elementu.

Jak zrobić stronę internetową HTML w notatniku – krok po kroku dla każdego

Krok 2: Zapisywanie Pliku

Teraz najważniejsze. Kliknij "Plik" -> "Zapisz jako...". W oknie zapisu, w polu "Nazwa pliku:", wpisz index.html. Kluczowe jest rozszerzenie .html. To ono informuje system i przeglądarkę, że to jest plik strony internetowej. W polu "Zapisz jako typ:" upewnij się, że wybrane jest "Wszystkie pliki (.)". Wybierz miejsce, gdzie chcesz zapisać plik (np. na pulpicie) i kliknij "Zapisz".

Krok 3: Otwieranie Strony w Przeglądarce

Przejdź do miejsca, gdzie zapisałeś plik index.html. Znajdź go i kliknij dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej, prezentując treść, którą wpisałeś!

Gratulacje! Właśnie stworzyłeś swoją pierwszą, działającą stronę internetową w samym Notatniku. To jest Twój pierwszy, ale bardzo ważny krok. Jak powiedział słynny pedagog, John Dewey: "Edukacja nie jest przygotowaniem do życia; edukacja jest samym życiem." W tym przypadku, tworzenie strony to proces nauki przez działanie.

Rozwijanie Twojej Strony: Dodajemy Więcej Elementów

Teraz, gdy masz już działającą stronę, możemy dodać więcej elementów, aby uczynić ją ciekawszą. Wróć do swojego pliku index.html w Notatniku i dodaj poniższy kod wewnątrz <body>, między istniejące znaczniki <h1> i <p>, lub po nich.

Dodawanie Linków

Linki (hiperłącza) pozwalają użytkownikom nawigować między stronami lub przechodzić do innych stron w internecie. Używamy znacznika <a> (anchor).

Jak zrobić stronę HTML w Notatniku – prosty poradnik dla początkujących


<p>Oto link do strony Google: <a href="https://www.google.com">Kliknij tutaj</a></p>

W tym kodzie:

href="https://www.google.com": To atrybut, który określa cel linku – w tym przypadku adres URL.
Kliknij tutaj: To tekst, który będzie widoczny dla użytkownika.

Pamiętaj, aby po wprowadzeniu zmian w Notatniku, ponownie zapisać plik (Ctrl+S na Windowsie, Cmd+S na macOS) i odświeżyć stronę w przeglądarce (klawisz F5 lub przycisk odświeżania).

Dodawanie Obrazów

Obrazy dodają wizualnej atrakcyjności każdej stronie. Używamy znacznika <img>.


<img src="sciezka/do/twojego/obrazka.jpg" alt="Opis obrazka">

Tutaj:

src="sciezka/do/twojego/obrazka.jpg": To adres (ścieżka) do pliku obrazu. Jeśli obraz jest w tym samym folderze co plik index.html, możesz podać tylko nazwę pliku, np. obrazek.jpg. Jeśli jest w podfolderze, np. "images", to będzie to images/obrazek.jpg.
alt="Opis obrazka": To tekst alternatywny. Jest bardzo ważny! Wyświetla się, gdy obraz nie może zostać załadowany, i jest czytany przez czytniki ekranu dla osób niewidomych, co czyni Twoją stronę bardziej dostępną. Jak mówi Tim Berners-Lee, wynalazca World Wide Web: "Sieć dla wszystkich to moja nadzieja."

Praktyczna wskazówka: Aby dodać własny obraz, umieść plik graficzny (np. .jpg, .png) w tym samym folderze co Twój plik index.html. Następnie zmień sciezka/do/twojego/obrazka.jpg na nazwę swojego pliku, np. moj_obrazek.png.

Tworzenie List

Listy pomagają uporządkować informacje.

Lista nienumerowana (punktowana): Użyj znaczników <ul> (unordered list) i <li> (list item).


<ul>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
    <li>Trzeci element listy</li>
</ul>

Lista numerowana: Użyj znaczników <ol> (ordered list) i <li>.


<ol>
    <li>Pierwszy krok</li>
    <li>Drugi krok</li>
    <li>Trzeci krok</li>
</ol>

Ale co z Wyglądem? Wstęp do CSS

Widzisz, że sama strona HTML wygląda dość... surowo. Brakuje jej stylu. Tutaj wchodzi CSS. Na razie możemy zrobić prosty trik i umieścić styl w tym samym pliku HTML, w sekcji <head>, używając znacznika <style>.


<!DOCTYPE html>
<html>
<head>
    <title>Moja Stylowa Strona</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Ustawia czcionkę dla całej strony /
            background-color: #f0f0f0; / Jasnoszary kolor tła /
            margin: 20px; / Dodaje margines wokół treści /
        }
        h1 {
            color: #333; / Ciemnoszary kolor nagłówka /
            text-align: center; / Wyśrodkowuje nagłówek /
        }
        p {
            color: #555; / Ciemniejszy szary kolor dla akapitów /
            line-height: 1.6; / Zwiększa odstęp między liniami tekstu /
        }
        a {
            color: #007bff; / Niebieski kolor dla linków /
            text-decoration: none; / Usuwa podkreślenie linków /
        }
        a:hover { / Styl, który pojawi się po najechaniu myszką /
            text-decoration: underline; / Podkreśla link po najechaniu */
        }
    </style>
</head>
<body>

    <h1>Witaj na Mojej Stylowej Stronie!</h1>
    <p>To jest mój pierwszy akapit. Jestem podekscytowany, że mogę tworzyć własne strony internetowe!</p>
    <p>Oto link do strony Google: <a href="https://www.google.com">Kliknij tutaj</a></p>

    <img src="sciezka/do/twojego/obrazka.jpg" alt="Opis obrazka" width="300">

    <h2>Moje Ulubione Rzeczy</h2>
    <ul>
        <li>Nauka kodowania</li>
        <li>Tworzenie stron</li>
        <li>Eksperymentowanie</li>
    </ul>

</body>
</html>

Co tutaj zrobiliśmy?

body { ... }: Dotyczy całego ciała strony. Zmieniliśmy czcionkę, kolor tła i dodaliśmy marginesy.
h1 { ... }: Dotyczy nagłówka pierwszego poziomu. Zmieniliśmy kolor i wyśrodkowaliśmy tekst.
p { ... }: Dotyczy akapitów. Zmieniliśmy kolor i poprawiliśmy czytelność tekstu przez zwiększenie interlinii.
a { ... } i a:hover { ... }: Określamy wygląd linków, w tym jak będą wyglądać, gdy użytkownik najedzie na nie kursorem myszy.
width="300": W kodzie obrazka dodałem atrybut `width`, który określa szerokość obrazka w pikselach.

CSS może wydawać się skomplikowany, ale jego podstawowa zasada jest prosta: wybierasz element (np. p) i określasz jego właściwości (np. color: blue;). Można go nauczyć się krok po kroku. Pamiętaj, aby zapisywać i odświeżać po każdej zmianie!

Gdzie Dalej? Od Notatnika do Profesjonalnych Narzędzi

Choć nauka w Notatniku jest niezwykle wartościowa dla zrozumienia podstaw, warto wiedzieć, że istnieją narzędzia, które ułatwiają pracę programiście. Nazywane są edytorami kodu.

Jak zrobić stronę internetową w Notatniku krok po kroku | CIS

Przykłady popularnych edytorów kodu to:

Visual Studio Code (VS Code): Darmowy, potężny i bardzo popularny. Posiada funkcje takie jak podświetlanie składni (koloruje kod, ułatwiając czytanie), autouzupełnianie kodu, integrację z systemami kontroli wersji (jak Git).
Sublime Text: Szybki i lekki edytor, ceniony za swoją wydajność.
Atom: Kolejny darmowy i konfigurowalny edytor, rozwijany przez GitHub.

Te narzędzia nie zmienią tego, jak działa kod HTML czy CSS, ale sprawią, że pisanie i zarządzanie nim będzie znacznie przyjemniejsze i efektywniejsze. Nadal jednak opierają się na pisaniu kodu tekstowego, tak jak w Notatniku. Jak mawiał Albert Einstein: "Wiedza jest jedynym skarbem, który nie może zostać skradziony." A zrozumienie podstaw, nawet w najprostszy sposób, jest właśnie takim skarbem.

Podsumowanie i Motywacja

Tworzenie stron internetowych w Notatniku może wydawać się archaiczne, ale jest to najlepszy sposób na zrozumienie fundamentów. Pokazuje Ci, że za każdym kliknięciem, za każdym obrazkiem, za każdym tekstem na stronie internetowej kryje się prosty, logiczny kod. To doświadczenie buduje solidne podstawy, na których możesz budować dalej, ucząc się bardziej zaawansowanych technologii.

Pamiętaj:

HTML to struktura.
CSS to wygląd.
Notatnik to Twoje pierwsze, potężne narzędzie.

Nie zniechęcaj się, jeśli coś nie działa od razu. Programowanie to proces prób i błędów. Każdy doświadczony programista popełnia błędy. Kluczem jest cierpliwość, chęć do nauki i praktyka. Tak jak mówiła Maya Angelou: "Zrobiłam to, co potrafiłam, z tym, co miałam, i tam, gdzie byłam." Wykorzystaj to, co masz – Notatnik – i zacznij tworzyć!

Śmiało eksperymentuj, dodawaj nowe znaczniki, zmieniaj kolory. Świat internetu stoi przed Tobą otworem, a Ty właśnie zdobyłeś klucz do jego budowy, zaczynając od najprostszego zamka. Powodzenia!