Jak Stworzyć Stronę Internetową Za Pomocą Notatnika

Witaj! Chcesz nauczyć się tworzyć strony internetowe? Brzmi skomplikowanie? Wcale nie musi! W tym artykule pokażę Ci, jak stworzyć prostą stronę internetową, używając jedynie Notatnika (lub innego edytora tekstu) i odrobiny wiedzy o HTML. Bez żadnych drogich programów, bez tajemniczych kodów – tylko Ty, Notatnik i Twój pomysł na stronę!

Na początku, wytłumaczmy sobie kilka podstawowych pojęć.

Czym jest HTML?

HTML, czyli HyperText Markup Language, to język znaczników używany do tworzenia stron internetowych. Działa to tak, że piszemy tekst, a następnie otaczamy go "znacznikami" (ang. tags), które informują przeglądarkę internetową, jak ten tekst ma być wyświetlany. Na przykład, znacznik <h1> oznacza nagłówek pierwszego stopnia (największy), a <p> oznacza akapit.

Czym jest przeglądarka internetowa?

Przeglądarka internetowa to program, który interpretuje kod HTML i wyświetla go w formie, którą widzimy, przeglądając strony internetowe. Popularne przeglądarki to Chrome, Firefox, Safari czy Edge.

Przygotowanie do pracy

Zanim zaczniemy pisać kod, potrzebujemy tylko dwóch rzeczy:

Edytora tekstu: Notatnik (w systemie Windows) jest idealny. Możesz też użyć TextEdit (na Macu) lub dowolnego innego edytora tekstu, który zapisuje pliki w formacie tekstowym (ASCII lub UTF-8). Ważne, żeby to był zwykły edytor tekstu, a nie edytor formatujący tekst jak Microsoft Word, ponieważ Word dodaje do pliku ukryte informacje, które zepsują naszą stronę.
Przeglądarki internetowej: Dowolna, której używasz na co dzień, jest odpowiednia.

Krok po kroku: Tworzymy naszą pierwszą stronę

Otwórz Notatnik (lub inny edytor tekstu): Uruchom program. Powinien być pusty.
Wpisz podstawowy kod HTML: Teraz wklej (lub przepisz) do Notatnika poniższy kod:

<!DOCTYPE html>
<html>
<head>
    <title>Moja Pierwsza Strona</title>
</head>
<body>
    <h1>Witaj świecie!</h1>
    <p>To jest akapit tekstu na mojej pierwszej stronie internetowej.</p>
</body>
</html>

Omówienie kodu: Spójrzmy, co ten kod oznacza linia po linii:
- <!DOCTYPE html>: Informuje przeglądarkę, że używamy standardu HTML5 (najnowsza wersja HTML).
- <html>: Otwiera element HTML. To główny kontener całej strony. Wszystko, co znajduje się na stronie, powinno być zawarte wewnątrz tego elementu.
- <head>: Zawiera informacje o stronie, które nie są widoczne bezpośrednio na stronie (np. tytuł, ustawienia kodowania znaków, odnośniki do arkuszy stylów CSS, ale to już materiał na inny artykuł).
- <title>Moja Pierwsza Strona</title>: Ustawia tytuł strony, który wyświetla się na karcie przeglądarki.
- </head>: Zamyka element head. Pamiętaj, że większość znaczników HTML ma swój znacznik otwierający (<head>) i zamykający (</head>). Zamykający znacznik różni się od otwierającego ukośnikiem /.
- <body>: Zawiera całą treść, która będzie widoczna na stronie internetowej: tekst, obrazy, linki, itp.
- <h1>Witaj świecie!</h1>: Tworzy nagłówek pierwszego stopnia (największy nagłówek). Tekst "Witaj świecie!" zostanie wyświetlony jako duży nagłówek.
- <p>To jest akapit tekstu na mojej pierwszej stronie internetowej.</p>: Tworzy akapit. Akapit to zwykły blok tekstu.
- </body>: Zamyka element body.
- </html>: Zamyka element html.
Zapisz plik: Teraz musimy zapisać nasz kod jako plik HTML. Wybierz "Plik" -> "Zapisz jako..." w Notatniku (lub podobnie w Twoim edytorze tekstu).
- W polu "Nazwa pliku" wpisz coś, np. index.html. WAŻNE: Musisz dodać rozszerzenie .html! To rozszerzenie mówi komputerowi, że to jest plik HTML.
- W polu "Zapisz jako typ" wybierz "Wszystkie pliki" (All Files). W niektórych wersjach Notatnika trzeba wybrać opcję "UTF-8" w polu "Kodowanie", żeby polskie znaki wyświetlały się poprawnie.
Otwórz plik w przeglądarce: Znajdź plik index.html, który właśnie zapisałeś, i kliknij go dwukrotnie. Powinna otworzyć się Twoja przeglądarka internetowa i wyświetlić Twoją pierwszą stronę! Powinieneś zobaczyć nagłówek "Witaj świecie!" i akapit tekstu pod nim.

Co dalej? Edycja i eksperymentowanie!

Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę internetową! Teraz możesz zacząć eksperymentować. Spróbuj:

Zmieniać tekst: Zmień treść nagłówka i akapitu. Zapisz plik i odśwież stronę w przeglądarce (zazwyczaj przyciskiem F5).
Dodawać więcej nagłówków: Spróbuj dodać inne nagłówki, np. <h2>Nagłówek drugiego stopnia</h2> (mniejszy od <h1>) lub <h3>Nagłówek trzeciego stopnia</h3> (jeszcze mniejszy).
Dodawać więcej akapitów: Dodaj więcej elementów <p>...</p>.
Dodawać formatowanie tekstu: Użyj znaczników <b> (pogrubienie) i <i> (kursywa). Na przykład: <p>To jest <b>pogrubiony</b> tekst, a to jest <i>kursywa</i>.</p>.

Dodatkowe znaczniki HTML

Oto kilka innych przydatnych znaczników HTML:

<a>: Tworzy linki (hiperłącza). Przykład: <a href="https://www.google.com">Kliknij tutaj, aby przejść do Google</a>. Atrybut href określa adres URL, na który ma prowadzić link.
<img>: Wstawia obrazek. Przykład: <img src="obrazek.jpg" alt="Opis obrazka">. Atrybut src określa ścieżkę do pliku z obrazkiem. Atrybut alt zawiera tekst alternatywny, który wyświetla się, gdy obrazek nie może zostać załadowany (ważny dla dostępności strony). Pamiętaj, że musisz mieć plik obrazek.jpg w tym samym folderze co plik index.html (lub podać pełną ścieżkę do obrazka).
<ul> i <li>: Tworzą listę nieuporządkowaną (z punktami). Przykład:

<ul>
    <li>Element listy 1</li>
    <li>Element listy 2</li>
    <li>Element listy 3</li>
</ul>

<ol> i <li>: Tworzą listę uporządkowaną (numerowaną). Przykład:

<ol>
    <li>Element listy 1</li>
    <li>Element listy 2</li>
    <li>Element listy 3</li>
</ol>

Podsumowanie

Jak widzisz, tworzenie stron internetowych od podstaw wcale nie jest takie straszne. Potrzebujesz tylko Notatnika i odrobiny wiedzy o HTML. Oczywiście, to dopiero początek. Jest wiele innych rzeczy do nauczenia się, takich jak CSS (do stylizowania wyglądu strony) i JavaScript (do dodawania interaktywności). Ale teraz masz już solidną podstawę i możesz zacząć eksperymentować i rozwijać swoje umiejętności. Powodzenia! Pamiętaj, praktyka czyni mistrza!