Ten artykuł to praktyczny przewodnik dla początkujących, który krok po kroku pokaże, jak stworzyć prostą stronę internetową w HTML przy użyciu darmowego edytora Notepad++. Dowiesz się, jak przygotować środowisko pracy, zbudować szkielet strony, wypełnić ją treścią i nadać jej podstawowy wygląd za pomocą CSS, nawet jeśli nigdy wcześniej nie kodowałeś. Moim celem jest przeprowadzenie Cię przez ten proces w sposób jasny i przystępny, tak abyś na koniec mógł/mogła z dumą powiedzieć: "Stworzyłem/Stworzyłam swoją pierwszą stronę internetową!"

Zacznij przygodę z kodowaniem: poznaj narzędzia niezbędne na start

Dlaczego właśnie Notepad++, a nie zwykły Notatnik?

Zaczynając swoją przygodę z kodowaniem, wybór odpowiedniego narzędzia jest kluczowy. Zwykły Notatnik, choć prosty, nie oferuje żadnych udogodnień dla programisty. Notepad++ to zupełnie inna historia. Jest to darmowy i niezwykle lekki edytor kodu, który znacząco ułatwia pisanie HTML i CSS. Jego największą zaletą dla początkujących jest podświetlanie składni. Oznacza to, że różne elementy kodu (np. znaczniki HTML, atrybuty, wartości CSS) są wyświetlane w różnych kolorach, co sprawia, że kod staje się czytelniejszy, a Ty szybciej wychwytujesz ewentualne błędy. To jak mieć nauczyciela, który od razu pokazuje Ci, co jest czym!

Instalacja i konfiguracja: jak przygotować swoje środowisko pracy w 3 minuty?

Przygotowanie Notepad++ do pracy jest banalnie proste. Postępuj zgodnie z tymi krokami:

1. Pobierz Notepad++: Wejdź na oficjalną stronę Notepad++ (np. wpisując "Notepad++ download" w wyszukiwarkę) i pobierz najnowszą stabilną wersję instalatora.
2. Zainstaluj program: Uruchom pobrany plik .exe i postępuj zgodnie z instrukcjami instalatora. Proces jest standardowy i nie powinien sprawić żadnych problemów.
3. Otwórz edytor: Po zainstalowaniu uruchom Notepad++. Zobaczysz czyste okno edytora, gotowe na Twój pierwszy kod!

Przeglądarka internetowa: twoje okno na efekt końcowy

Oprócz edytora kodu, potrzebujesz jeszcze jednego, równie ważnego narzędzia: przeglądarki internetowej. Niezależnie od tego, czy używasz Chrome, Firefox, Edge czy innej, to właśnie w niej będziesz podglądać efekty swojej pracy. Cykl pracy jest prosty: piszesz kod w Notepad++, zapisujesz plik, a następnie odświeżasz stronę w przeglądarce, aby zobaczyć zmiany. To nieustanne "zapisz i odśwież" stanie się Twoim nawykiem, gdy będziesz tworzyć i modyfikować swoją stronę.

Budujemy fundament: tworzymy szkielet dokumentu HTML5

Co to jest HTML i dlaczego jest szkieletem internetu?

HTML, czyli HyperText Markup Language, to podstawowy język, którego używamy do tworzenia stron internetowych. Wyobraź sobie, że budujesz dom. HTML to jego szkielet: ściany, podłogi, dach. To on definiuje strukturę treści na stronie gdzie jest nagłówek, gdzie akapit, gdzie link, a gdzie obrazek. Bez HTML Twoja strona byłaby tylko zbiorem nieuporządkowanego tekstu. To naprawdę fundament całego internetu, na którym opiera się każda witryna, którą odwiedzasz.

Krok 1: stwórz swój pierwszy plik `index.html`

Zaczynamy od stworzenia pliku, który będzie zawierał nasz kod HTML:

1. W Notepad++ wybierz z menu Plik > Nowy (File > New). Otworzy się pusta zakładka.
2. Teraz najważniejsze: zapisz ten plik. Wybierz Plik > Zapisz jako... (File > Save As...).
3. W oknie zapisu wybierz miejsce na dysku, gdzie chcesz przechowywać swoje pliki (np. utwórz nowy folder "MojaPierwszaStrona").
4. W polu "Nazwa pliku" wpisz index.html. To bardzo ważne! Rozszerzenie .html informuje przeglądarkę, że ma do czynienia ze stroną internetową. Nazwa index.html jest standardową nazwą dla strony głównej witryny.
5. Upewnij się, że w polu "Typ" (Save as type) wybrane jest "Hyper Text Markup Language file" lub "All types" (wtedy musisz ręcznie wpisać rozszerzenie). Kliknij "Zapisz".

Gratulacje! Masz swój pierwszy plik HTML.

Magiczna formuła startowa: skopiuj i wklej tę podstawową strukturę kodu

Każda nowoczesna strona HTML5 powinna zaczynać się od pewnej podstawowej struktury. To jest nasz fundament, na którym będziemy budować resztę strony. Poniżej przedstawiam Ci "magiczną formułę" skopiuj ją i wklej do swojego nowo utworzonego pliku index.html w Notepad++.

Krótko wyjaśnię, co oznaczają poszczególne elementy:

• </code>: To deklaracja typu dokumentu. Mówi przeglądarce, że ma do czynienia z dokumentem HTML5.
• : To główny znacznik, który obejmuje całą stronę. Atrybut lang="pl" informuje przeglądarkę, że język treści strony to polski.
• : To sekcja "głowy" dokumentu. Zawiera metadane o stronie, które nie są widoczne bezpośrednio dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek.
• : Niezwykle ważna linijka, o której opowiem za chwilę.
• : Ten znacznik jest ważny dla responsywności strony, czyli jej poprawnego wyświetlania na różnych urządzeniach (telefony, tablety).
• : Tutaj umieszczasz tytuł swojej strony, który pojawi się na karcie przeglądarki.
• : To sekcja "ciała" dokumentu. Tutaj umieszczamy całą widoczną treść strony tekst, obrazy, linki, listy itp.

Klucz do polskich znaków: dlaczego linijka `` jest tak ważna?

Zauważyłeś/aś linijkę w sekcji ? To absolutnie kluczowy element, jeśli chcesz, aby polskie znaki diakrytyczne (ą, ć, ę, ł, ń, ó, ś, ź, ż) wyświetlały się poprawnie na Twojej stronie. Bez tej deklaracji przeglądarka może interpretować tekst w inny sposób, co skutkowałoby wyświetlaniem "krzaczków" zamiast prawidłowych liter. Zawsze pamiętaj o tej linijce to mały detal, który robi wielką różnicę!

Sekcja `` vs ``: gdzie umieszczać tytuł, a gdzie treść?

Podstawowa struktura HTML dzieli dokument na dwie główne sekcje: i . Jak już wspomniałem, sekcja to miejsce na metadane informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika. To tutaj umieszczamy tytuł strony (w znaczniku ), deklarację kodowania znaków, linki do plików CSS czy skryptów JavaScript. Natomiast to serce Twojej strony. Wszystko, co użytkownik widzi i z czym wchodzi w interakcję teksty, obrazy, linki, przyciski, formularze umieszczamy właśnie wewnątrz znacznika . Pamiętaj o tym rozróżnieniu, aby Twoja strona była dobrze zorganizowana i łatwa do zarządzania.

Wypełnij stronę treścią: najważniejsze znaczniki HTML dla początkujących

Skoro mamy już szkielet naszej strony, czas wypełnić ją widoczną treścią! Będziemy dodawać elementy do sekcji . Pokażę Ci teraz najważniejsze znaczniki HTML, które pozwolą Ci zbudować podstawową, ale funkcjonalną stronę.

Nagłówki H1, H2, H3: jak stworzyć logiczną hierarchię treści?

Nagłówki służą do tworzenia hierarchii treści na stronie, podobnie jak w książce masz tytuły rozdziałów i podrozdziałów. Mamy nagłówki od

(najważniejszy, zazwyczaj jeden na stronę) do

(najmniej ważny). Używaj ich zgodnie z ich znaczeniem semantycznym, a nie tylko dla wyglądu. To ważne dla czytelności i SEO.

Witaj na mojej pierwszej stronie!

O mnie

Moje hobby

Kontakt

Akapity, czyli jak dodać tekst za pomocą znacznika `

`

Najczęściej używanym znacznikiem do wstawiania zwykłego tekstu jest

, czyli akapit (paragraph). Każdy blok tekstu, który chcesz wyświetlić jako osobny akapit, powinien być umieszczony wewnątrz tego znacznika.

Cześć! Nazywam się Jerzy i to jest moja pierwsza strona internetowa, którą tworzę w Notepad++.

Uczę się podstaw HTML i CSS, aby móc tworzyć własne projekty.

Dodajemy pierwszy obrazek: znacznik `` i jego kluczowe atrybuty `src` i `alt`

Strony internetowe bez obrazków byłyby nudne, prawda? Do dodawania obrazków służy znacznik . Jest to znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego . Ma on dwa kluczowe atrybuty:

• src (source): Wskazuje ścieżkę do pliku obrazka. Może to być adres URL obrazka z internetu lub ścieżka do pliku na Twoim komputerze.
• alt (alternative text): To tekst alternatywny, który wyświetla się, gdy obrazek nie może zostać załadowany (np. z powodu błędu ścieżki) lub jest używany przez czytniki ekranowe dla osób niewidomych. Zawsze go dodawaj!

Jeśli obrazek znajduje się w tym samym folderze co Twój plik index.html, wystarczy podać jego nazwę. Jeśli jest w podfolderze, np. "images", ścieżka będzie wyglądać tak: images/moj_obrazek.jpg.

Tworzenie hiperłączy: jak podlinkować inną stronę za pomocą ``?

Linki to serce internetu! Dzięki nim możemy przechodzić między stronami. Do tworzenia linków służy znacznik (anchor) z atrybutem href (hypertext reference). Wartość atrybutu href to adres URL, do którego link ma prowadzić.

Odwiedź moją ulubioną wyszukiwarkę: Google.

Listy uporządkowane i nieuporządkowane: kiedy używać ``, a kiedy ` `?

Listy to świetny sposób na uporządkowanie informacji. Mamy dwa główne typy:

• Listy nieuporządkowane (`
  ` - unordered list):
  Elementy są oznaczane punktami (domyślnie). Używamy ich, gdy kolejność elementów nie ma znaczenia.
• Listy uporządkowane (`
  ` - ordered list):
  Elementy są numerowane (domyślnie). Używamy ich, gdy kolejność jest ważna (np. instrukcja krok po kroku).

Każdy element listy, niezależnie od jej typu, umieszczamy w znaczniku

(list item).

Moje ulubione języki programowania:

• HTML
• CSS
• JavaScript

Kroki do stworzenia strony:

1. Napisz kod HTML.
2. Dodaj style CSS.
3. Opublikuj stronę!

Wyróżnianie tekstu: różnica między `` a ``

Często chcemy wyróżnić pewne fragmenty tekstu. Mamy do tego kilka znaczników:

• : Ten znacznik służy do semantycznego podkreślenia ważności tekstu. Domyślnie przeglądarki wyświetlają go jako pogrubiony, ale jego głównym celem jest wskazanie, że dany fragment jest istotny.
• : Ten znacznik służy do wizualnego pogrubienia tekstu, bez nadawania mu dodatkowego znaczenia semantycznego. Używaj go, gdy chcesz po prostu pogrubić tekst, ale nie jest on szczególnie ważny.

Podobnie jest z kursywą: (emphasis) nadaje tekstowi nacisk semantyczny, a (italic) służy tylko do wizualnego pochylenia.

Pamiętaj, aby zawsze zamykać wszystkie tagi. To jest bardzo ważna zasada.

Nadaj stronie kolory: wprowadzenie do stylów CSS

Czym jest CSS i dlaczego HTML go potrzebuje?

Skoro HTML jest szkieletem, to CSS (Cascading Style Sheets) jest "ubraniem" i "makijażem" Twojej strony. HTML definiuje strukturę, a CSS odpowiada za wygląd i prezentację kolory, czcionki, rozmiary, marginesy, układ elementów. Bez CSS Twoja strona byłaby tylko czarno-białym tekstem na białym tle, bez żadnego stylu. Dzięki CSS możemy sprawić, że strona będzie atrakcyjna, czytelna i przyjemna dla oka. To właśnie CSS pozwala nam oddzielić strukturę od wyglądu, co jest bardzo dobrą praktyką w tworzeniu stron.

Twoje pierwsze style: gdzie i jak dodać znacznik `` w dokumencie HTML?

Dla początkujących najprostszą metodą dodawania stylów CSS jest umieszczenie ich bezpośrednio w sekcji dokumentu HTML, wewnątrz znacznika . To tak zwane "style wewnętrzne". Pozwala to na szybkie eksperymentowanie i natychmiastowe zobaczenie efektów. W przyszłości nauczysz się umieszczać style w oddzielnych plikach, co jest bardziej profesjonalnym podejściem.

Zobacz, jak to wygląda:

Jak zmienić kolor tła i tekstu na swojej stronie? (`background-color`, `color`)

Dwie podstawowe właściwości CSS, które od razu zmieniają wygląd strony, to background-color (kolor tła) i color (kolor tekstu). Możesz je zastosować do całego ciała strony (body) lub do konkretnych elementów.

Kontrola nad czcionką: zmiana rozmiaru i kroju (`font-size`, `font-family`)

Czcionki mają ogromny wpływ na czytelność i estetykę strony. Za ich kontrolę odpowiadają właściwości font-size (rozmiar czcionki) i font-family (krój czcionki).

Wyrównanie elementów: proste centrowanie za pomocą `text-align`

Wyrównanie tekstu to kolejna podstawowa rzecz, którą możesz kontrolować za pomocą CSS. Właściwość text-align pozwala na wyrównanie tekstu do lewej (left), prawej (right), wyśrodkowanie (center) lub wyjustowanie (justify). Jest to szczególnie przydatne dla nagłówków czy akapitów.

Unikaj pułapek: najczęstsze błędy początkujących

Tworzenie stron internetowych to proces, w którym błędy są nieodłączną częścią nauki. Nie zrażaj się nimi! Z mojego doświadczenia wiem, że początkujący często wpadają w te same pułapki. Znając je, możesz ich uniknąć i przyspieszyć swoją naukę.

Mój obrazek się nie wyświetla! Problem ze ścieżkami do plików

To chyba najczęstszy problem początkujących. Obrazek po prostu nie chce się pokazać! Najczęściej winna jest niepoprawna ścieżka w atrybucie src znacznika . Sprawdź dokładnie:

• Czy nazwa pliku obrazka jest poprawna (wielkość liter ma znaczenie!)?
• Czy plik obrazka znajduje się w tym samym folderze co plik HTML, czy może w podfolderze?
• Jeśli jest w podfolderze, czy ścieżka (np. images/moj_obrazek.jpg) jest poprawna?

Wskazówka od Jerzego: Aby sprawdzić, czy ścieżka do obrazka jest poprawna, spróbuj otworzyć plik obrazka bezpośrednio w przeglądarce, wpisując jego pełną ścieżkę w pasku adresu. Jeśli się otworzy, to plik istnieje i ścieżka jest dobra. Problem leży gdzie indziej.

Strona "rozsypała się" po dodaniu nowego elementu: plaga niezamkniętych tagów

HTML jest językiem znaczników, a każdy znacznik otwierający (np.

) powinien mieć swój znacznik zamykający (

), chyba że jest to znacznik samodomykający się (jak czy ). Zapomnienie o zamknięciu tagu, zwłaszcza

,

czy

, może spowodować, że przeglądarka "zgubi się" i wyświetli stronę w sposób zupełnie inny, niż zamierzałeś/aś. Notepad++ pomaga, podświetlając składnię, ale zawsze dokładnie sprawdzaj, czy wszystkie tagi są poprawnie zamknięte.

Dlaczego widzę "krzaczki" zamiast polskich liter?

Jeśli zamiast pięknych polskich znaków (ą, ć, ę...) widzisz dziwne symbole lub "krzaczki", to niemal na pewno zapomniałeś/aś o deklaracji kodowania znaków. Wróć do sekcji swojego dokumentu HTML i upewnij się, że masz tam linijkę: . To rozwiązuje problem w 99% przypadków.

Pamiętaj o rozszerzeniu .html: pułapka domyślnych ustawień Windows

Wielu początkujących zapisuje plik jako "index.html", ale system Windows, domyślnie ukrywając znane rozszerzenia plików, może faktycznie zapisać go jako index.html.txt. Wtedy przeglądarka nie rozpozna go jako strony internetowej. Aby tego uniknąć, upewnij się, że w oknie "Zapisz jako" w Notepad++ w polu "Typ" (Save as type) wybierasz "Hyper Text Markup Language file" lub "All types" i ręcznie wpisujesz pełną nazwę z rozszerzeniem .html.

Twoja pierwsza strona HTML gotowa! Co dalej?

Praktyczny przykład: budujemy prostą stronę-wizytówkę krok po kroku

Teraz, gdy znasz już podstawy, zachęcam Cię do stworzenia swojej pierwszej, prostej strony-wizytówki. To świetny sposób na utrwalenie wiedzy. Spróbuj stworzyć stronę, która będzie zawierać:

• Nagłówek
  z Twoim imieniem i nazwiskiem.
• Krótki akapit
  o sobie (np. kim jesteś, co lubisz).
• Obrazek (np. Twoje zdjęcie lub logo).
• Listę
  z Twoimi zainteresowaniami.
• Link do Twojego profilu w mediach społecznościowych lub adresu e-mail.
• Kilka podstawowych stylów CSS (kolor tła, kolor tekstu, wyśrodkowanie nagłówka).

Eksperymentuj, zmieniaj kolory, czcionki baw się kodem! To najlepsza metoda nauki.

Gdzie szukać inspiracji i dalszej wiedzy o HTML i CSS?

To dopiero początek Twojej przygody! Internet jest pełen wspaniałych zasobów do nauki. Oto kilka, które z czystym sumieniem mogę polecić:

• MDN Web Docs (Mozilla Developer Network): To encyklopedia dla web deweloperów. Znajdziesz tam szczegółowe opisy każdego znacznika HTML i właściwości CSS.
• W3Schools: Świetne, interaktywne samouczki z przykładami kodu, które możesz od razu wypróbować.
• Kursy online: Platformy takie jak Udemy, Coursera czy darmowe kursy na YouTube oferują mnóstwo wiedzy.
• Społeczności programistyczne: Dołącz do grup na Facebooku, forów internetowych czy Discorda. Pytaj, dziel się wiedzą, ucz się od innych.

Przeczytaj również: Ile kosztuje strona ze sklepem? Pełna analiza cen i ukrytych kosztów

Kiedy warto przesiąść się z Notepad++ na bardziej zaawansowane edytory?

Notepad++ jest fantastyczny na start, ale w miarę rozwoju Twoich umiejętności i złożoności projektów, szybko zauważysz, że potrzebujesz bardziej zaawansowanych narzędzi. Edytory takie jak Visual Studio Code (VS Code) oferują znacznie więcej funkcji: wbudowany terminal, rozszerzenia, zaawansowane podpowiedzi kodu, integrację z systemami kontroli wersji. Kiedy zaczniesz pracować nad większymi projektami, z pewnością docenisz te udogodnienia. Pomyśl o tym jako o kolejnym etapie w swojej podróży Notepad++ to rower do nauki jazdy, a VS Code to profesjonalny samochód wyścigowy. Na razie ciesz się jazdą na rowerze i budowaniem solidnych podstaw!