W dzisiejszym cyfrowym świecie umiejętność tworzenia stron internetowych staje się coraz bardziej cenna. Jeśli stawiasz swoje pierwsze kroki w tej dziedzinie i zastanawiasz się, jak stworzyć prostą stronę HTML od podstaw, ten przewodnik jest dla Ciebie. Pokażę Ci, jak wykorzystać darmowy i intuicyjny edytor Notepad++, aby krok po kroku zbudować swoją pierwszą witrynę. To idealny sposób, by zdobyć fundamentalne umiejętności kodowania i zrozumieć, jak działają strony internetowe.

HTML i Notepad++: Twój idealny start w świat tworzenia stron

Zacznijmy od podstaw. HTML (HyperText Markup Language) to język znaczników, który stanowi fundament każdej strony internetowej. To właśnie HTML definiuje strukturę i zawartość witryny nagłówki, akapity, obrazy, linki czy listy. Bez niego przeglądarka nie wiedziałaby, co i w jaki sposób ma wyświetlić. Jest to więc absolutna podstawa, którą moim zdaniem każdy początkujący twórca stron powinien opanować.

Do pisania kodu HTML potrzebujemy edytora. Na rynku jest ich wiele, ale dla osób stawiających pierwsze kroki w systemie Windows, Notepad++ to doskonały wybór. Jest to darmowy, lekki i niezwykle intuicyjny edytor kodu źródłowego, który znacznie ułatwia naukę i pracę. Nie obciąża systemu, a jednocześnie oferuje funkcje, które są nieocenione dla początkującego kodera.

Dlaczego polecam Notepad++? Przede wszystkim ze względu na kolorowanie składni. Różne elementy kodu (znaczniki, atrybuty, wartości) są wyświetlane w różnych kolorach, co sprawia, że kod jest znacznie bardziej czytelny i łatwiej jest dostrzec ewentualne błędy. Dodatkowo, program oferuje numerowanie linii, co jest nieocenione przy debugowaniu, oraz łatwe zarządzanie wieloma plikami w jednym oknie. Możesz mieć otwartych kilka plików HTML, CSS czy JavaScript i swobodnie się między nimi przełączać. To wszystko sprawia, że nauka i tworzenie stron staje się znacznie przyjemniejsze i efektywniejsze.

Przygotuj swój warsztat: Instalacja i konfiguracja Notepad++

Zanim zaczniemy pisać kod, musimy przygotować nasze narzędzie pracy. Instalacja Notepad++ jest prosta i szybka. Oto jak to zrobić:

1. Pobierz Notepad++: Wejdź na oficjalną stronę programu (notepad-plus-plus.org) i pobierz najnowszą stabilną wersję instalatora.
2. Uruchom instalator: Po pobraniu pliku `.exe` uruchom go. Wybierz język instalacji (np. polski) i postępuj zgodnie z instrukcjami na ekranie. Zazwyczaj wystarczy klikać "Dalej", akceptując domyślne ustawienia.
3. Uruchom program: Po zakończeniu instalacji, uruchom Notepad++. Powinieneś zobaczyć puste okno edytora.
4. Ustaw kodowanie UTF-8: To jest krytyczny krok, szczególnie jeśli będziesz używać polskich znaków (ą, ę, ć, ł, ń, ó, ś, ź, ż). Bez prawidłowego kodowania, zamiast polskich liter zobaczysz "krzaczki". Aby to ustawić, przejdź do menu Ustawienia -> Preferencje. W oknie preferencji znajdź sekcję Nowy dokument/Domyślny katalog. W sekcji "Kodowanie" wybierz UTF-8. Upewnij się, że opcja "Zastosuj do otwartych plików ANSI" jest odznaczona lub ustawiona odpowiednio. Po zmianie kliknij "Zamknij". Od teraz każdy nowy dokument będzie domyślnie kodowany jako UTF-8.

Zawsze polecam stworzenie dedykowanego folderu na dysku, np. "MojaPierwszaStrona", w którym będziesz przechowywać wszystkie pliki projektu pliki HTML, obrazy, style CSS. To pomoże Ci zachować porządek i uniknąć problemów ze ścieżkami do plików w przyszłości. Dobra organizacja to podstawa w każdym projekcie programistycznym.

Szkielet strony: Poznaj podstawową strukturę HTML

Każda strona HTML ma swoją podstawową strukturę, która jest jak szkielet dla całej zawartości. Zrozumienie jej jest kluczowe. Zaczynamy od deklaracji </code>. To prosta linia kodu, która informuje przeglądarkę internetową, że ma do czynienia z dokumentem HTML5, czyli najnowszą i najbardziej powszechną wersją HTML. Bez tej deklaracji przeglądarka może próbować renderować stronę w trybie zgodności, co może prowadzić do nieoczekiwanych rezultatów.

Cały dokument HTML jest zamknięty w znacznikach i . Wewnątrz nich znajdują się dwie główne sekcje: i .

• : Ta sekcja zawiera metadane strony informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika w oknie przeglądarki, ale są niezwykle ważne. Tutaj ustawiamy kodowanie znaków (, pamiętasz? To kluczowe dla polskich znaków!), tytuł strony (), który pojawia się na karcie przeglądarki, oraz linki do zewnętrznych plików CSS czy JavaScript.
• : To jest serce Twojej strony! Wszystko, co umieścisz w tej sekcji, będzie widoczne dla użytkownika w oknie przeglądarki tekst, obrazy, linki, nagłówki, listy i cała reszta treści.

Oto przykład podstawowego kodu HTML, który powinieneś napisać w Notepad++:

   

 
Witaj na mojej stronie!
 
To jest mój pierwszy akapit tekstu.

Po napisaniu kodu, musisz go zapisać i otworzyć w przeglądarce, aby zobaczyć efekty:

1. Zapisz plik: W Notepad++ przejdź do Plik -> Zapisz jako.... W oknie "Zapisz jako" wybierz swój folder projektu (np. "MojaPierwszaStrona"). W polu "Nazwa pliku" wpisz index.html. Bardzo ważne: w polu "Typ" wybierz "All Files (*.*)", a w polu "Kodowanie" upewnij się, że jest wybrane UTF-8. Kliknij "Zapisz". Plik index.html jest standardową nazwą dla strony głównej witryny.
2. Otwórz w przeglądarce: Otwórz folder, w którym zapisałeś plik index.html. Kliknij dwukrotnie na ten plik. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej (np. Chrome, Firefox, Edge), wyświetlając "Witaj na mojej stronie!" i "To jest mój pierwszy akapit tekstu."

Tworzymy treść: Niezbędne znaczniki HTML w praktyce

Teraz, gdy masz już szkielet strony, możemy zacząć dodawać do niej prawdziwą treść, używając różnych znaczników HTML. Pamiętaj, że każdy znacznik ma swoje przeznaczenie i pomaga przeglądarce zrozumieć strukturę informacji.

Nagłówki (

do

)

Nagłówki służą do tworzenia hierarchii treści na stronie, podobnie jak w książce.

Tytuł główny mojej strony
Podtytuł sekcji
Nagłówek podsekcji

Akapity (

)

Znacznik

To jest pierwszy akapit tekstu na mojej stronie. Tutaj mogę pisać o czym tylko zechcę, dzieląc moje myśli na logiczne bloki.
Kolejny akapit, który zawiera więcej informacji. Pamiętaj, aby tekst był czytelny i dobrze sformatowany.

Obrazy ()

Znacznik służy do wstawiania obrazów. Jest to znacznik samodomykający się, co oznacza, że nie potrzebuje znacznika zamykającego (). Wymaga dwóch kluczowych atrybutów:

• src (source): Określa ścieżkę do pliku obrazu.
• alt (alternative text): Jest to tekst alternatywny, który wyświetla się, gdy obraz nie może zostać załadowany, oraz jest czytany przez czytniki ekranowe dla osób niewidomych. Jest to kluczowe dla dostępności i SEO.

Pamiętaj, aby plik obrazek.jpg znajdował się w tym samym folderze co Twój plik HTML, lub podaj poprawną ścieżkę do niego.

Linki ()

Znacznik (anchor) służy do tworzenia hiperłączy, które przenoszą użytkownika do innych stron lub sekcji na tej samej stronie. Wymaga atrybutu href (hypertext reference), który określa adres docelowy linku.

Odwiedź Google w nowej karcie.
Dowiedz się więcej o naszej firmie.

Atrybut target="_blank" sprawia, że link otwiera się w nowej karcie przeglądarki.

Listy (

i

)

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

• (unordered list): Lista nieuporządkowana, wyświetlana z punktorami.
• (ordered list): Lista uporządkowana, wyświetlana z numeracją.

Każdy element listy jest umieszczany w znaczniku

Moje ulubione owoce:
 
Jabłka
 
Banany
 
Truskawki
 
Przeczytaj również: Jak zmienić czcionkę w Windows 10? Prosty poradnik krok po kroku
Kroki do sukcesu:
 
Ucz się HTML
 
Ucz się CSS
 
Twórz wspaniałe strony!

    

 
Moja strona z nowym wyglądem!
 
Ten akapit ma teraz inny kolor tekstu i większy odstęp między liniami. Widzisz, jak CSS zmienia wygląd?
 
Cała strona ma też jasnoniebieskie tło, co sprawia, że jest przyjemniejsza dla oka.