Witaj w świecie tworzenia stron internetowych! Jeśli kiedykolwiek marzyłeś o stworzeniu własnej witryny, ale nie wiedziałeś, od czego zacząć, ten przewodnik jest właśnie dla Ciebie. Pokażę Ci krok po kroku, jak zbudować swoją pierwszą stronę internetową, używając języka HTML i darmowego edytora Notepad++. To idealny start w świat kodowania, dostępny dla każdego, bez żadnych kosztów i skomplikowanych narzędzi.
Tworzenie strony HTML w Notepad++: Twój przewodnik krok po kroku
- Notepad++ to darmowy, lekki edytor kodu, idealny do nauki podstaw HTML.
- HTML służy do budowania struktury strony, a artykuł pokaże, jak dodać podstawowe elementy.
- Kluczowe jest poprawne zapisanie pliku z rozszerzeniem `.html` i kodowaniem UTF-8 dla polskich znaków.
- Poznasz fundamentalną strukturę dokumentu HTML oraz znaczniki do tworzenia nagłówków, akapitów, linków i obrazów.
- Dowiesz się, jak otworzyć swoją stronę w przeglądarce i co robić dalej, włączając w to wprowadzenie do CSS.
Dlaczego warto zacząć od Notepada++ i czystego HTML? Idealny pierwszy krok w świat kodowania
Zapewne zastanawiasz się, dlaczego akurat te narzędzia. W końcu internet pełen jest zaawansowanych programów i frameworków do tworzenia stron. Moje doświadczenie pokazuje, że aby naprawdę zrozumieć, jak działa sieć, trzeba zacząć od podstaw. I właśnie to oferuje nam duet HTML i Notepad++.
Czym tak naprawdę są HTML i Notepad++? Proste wyjaśnienie dla nietechnicznych
Zacznijmy od HTML. To skrót od HyperText Markup Language, czyli w wolnym tłumaczeniu "hipertekstowy język znaczników". Pomyśl o nim jak o szkielecie Twojej strony internetowej. To HTML mówi przeglądarce, co jest nagłówkiem, co jest akapitem, gdzie ma być obrazek, a gdzie link. Nie jest to język programowania w ścisłym tego słowa znaczeniu, ale język służący do strukturyzowania treści.
Notepad++ to z kolei darmowy, bardzo lekki i niezwykle popularny edytor tekstu. Ale nie byle jaki edytor! Jest on specjalnie przystosowany do pracy z kodem. Oznacza to, że oferuje funkcje takie jak kolorowanie składni (różne części kodu mają różne kolory, co bardzo ułatwia czytanie i wykrywanie błędów) czy automatyczne uzupełnianie. Jest to narzędzie, które nie przytłacza nadmiarem opcji, a jednocześnie daje wszystko, czego potrzebujesz na początek.
Zalety tego duetu: Czemu nie potrzebujesz drogich narzędzi, aby postawić pierwsze kroki
Wybór HTML i Notepad++ na start to strzał w dziesiątkę, a oto dlaczego:
- Darmowe i dostępne dla każdego: Zarówno HTML jako język, jak i Notepad++ jako edytor, są całkowicie bezpłatne. Nie musisz wydawać ani grosza, aby rozpocząć swoją przygodę z kodowaniem.
- Lekkość i prostota: Notepad++ nie obciąża systemu, uruchamia się błyskawicznie i ma intuicyjny interfejs. Nie musisz uczyć się skomplikowanych funkcji, aby zacząć pisać kod.
- Bezpośrednie zrozumienie kodu: Pracując z czystym HTML w prostym edytorze, jesteś zmuszony do pisania każdej linijki kodu samodzielnie. To sprawia, że lepiej rozumiesz fundamentalne zasady działania stron internetowych, zamiast polegać na automatycznych generatorach.
- Brak skomplikowanej konfiguracji: Nie musisz instalować serwerów, baz danych ani innych zaawansowanych komponentów. Po prostu piszesz kod w pliku tekstowym i otwierasz go w przeglądarce.
- Solidne podstawy: Zrozumienie HTML to absolutna podstawa dla każdego, kto chce zajmować się web developmentem. Niezależnie od tego, czy później przesiądziesz się na bardziej zaawansowane technologie, HTML zawsze będzie Twoim fundamentem.
Co zbudujesz w tym poradniku? Realny cel dla Twojej pierwszej strony internetowej
Moim celem jest, abyś po przejściu przez ten poradnik miał działającą, prostą stronę internetową. Będzie to strona, która zawierać będzie nagłówek, kilka akapitów tekstu, link do innej strony oraz obrazek. To może brzmieć skromnie, ale uwierz mi, to solidne podstawy, które pozwolą Ci poczuć satysfakcję z własnoręcznie stworzonego projektu i zachęcą do dalszej nauki. Zaczynamy od małych kroków, aby zbudować coś wielkiego!
Przygotowanie warsztatu: Niezbędnik, zanim napiszesz pierwszą linijkę kodu
Zanim zanurzymy się w świat znaczników HTML, musimy przygotować nasze narzędzia pracy. To bardzo prosty proces, który zajmie Ci zaledwie kilka minut.
Jak pobrać i zainstalować Notepad++? (Jest w 100% darmowy)
Instalacja Notepad++ jest banalnie prosta. Oto, co musisz zrobić:
- Otwórz swoją przeglądarkę internetową (np. Chrome, Firefox, Edge).
- W pasku adresu wpisz
notepad-plus-plus.orgi naciśnij Enter. To jest oficjalna strona programu. - Na stronie głównej poszukaj sekcji "Download" lub "Pobierz". Zazwyczaj jest tam przycisk lub link prowadzący do najnowszej wersji.
- Wybierz najnowszą stabilną wersję programu. Zwróć uwagę na architekturę systemu operacyjnego (32-bit lub 64-bit). Jeśli nie wiesz, którą wybrać, zazwyczaj bezpiecznie jest pobrać wersję 64-bitową dla nowoczesnych komputerów. Kliknij na link do pobrania instalatora (np. "Installer").
- Po pobraniu pliku instalacyjnego (zazwyczaj o nazwie podobnej do
npp.8.x.x.Installer.x64.exe) uruchom go. - Postępuj zgodnie z instrukcjami instalatora: wybierz język (polski jest dostępny), zaakceptuj warunki licencji, wybierz miejsce instalacji (domyślne jest zazwyczaj w porządku) i kliknij "Dalej" / "Install".
- Po zakończeniu instalacji możesz odznaczyć opcję "Uruchom Notepad++", jeśli chcesz to zrobić ręcznie, lub zostawić ją zaznaczoną, aby program uruchomił się od razu.
Pierwsza konfiguracja Notepada++ pod kątem HTML: Kodowanie i kolorowanie składni
Kiedy Notepad++ jest już zainstalowany i uruchomiony, warto upewnić się, że jest gotowy do pracy z HTML. Domyślnie Notepad++ jest bardzo dobrze skonfigurowany, ale zawsze warto sprawdzić dwie kluczowe rzeczy.
Po pierwsze, kolorowanie składni dla HTML. Kiedy otworzysz nowy plik i zaczniesz pisać kod HTML, Notepad++ powinien automatycznie rozpoznać język i pokolorować znaczniki, atrybuty i tekst. Jeśli tak się nie dzieje, możesz ręcznie ustawić język, przechodząc do menu "Język" (Language) i wybierając "H" -> "HTML". Zazwyczaj jednak program robi to sam, gdy zapiszesz plik z rozszerzeniem `.html`.
Po drugie, kodowanie znaków. To absolutnie kluczowe, jeśli chcesz, aby polskie znaki (takie jak ą, ć, ę, ł, ń, ó, ś, ź, ż) wyświetlały się poprawnie na Twojej stronie. Upewnij się, że domyślne kodowanie jest ustawione na UTF-8. Możesz to sprawdzić i zmienić, przechodząc do menu "Kodowanie" (Encoding) i upewniając się, że zaznaczona jest opcja "UTF-8". Jeśli nie jest, wybierz ją. To zapewni, że Twoje polskie litery będą zawsze wyglądać tak, jak powinny.
Organizacja pracy: Jak stworzyć folder projektu, by uniknąć bałaganu
Od samego początku warto wyrobić sobie dobre nawyki. Zawsze, gdy zaczynasz nowy projekt, stwórz dla niego oddzielny folder. Ja zazwyczaj tworzę taki folder na pulpicie lub w dedykowanym katalogu "Projekty WWW". Nazwij go na przykład "MojaPierwszaStrona". W tym folderze będziesz przechowywać wszystkie pliki związane z Twoją stroną: plik HTML, obrazki, a w przyszłości także pliki CSS i JavaScript. Dzięki temu unikniesz bałaganu i łatwo znajdziesz wszystkie potrzebne elementy.
Anatomia strony internetowej: Zrozumienie fundamentalnej struktury pliku HTML
Każda strona internetowa, niezależnie od jej złożoności, ma pewną podstawową strukturę. Zrozumienie jej to klucz do efektywnego tworzenia stron. Teraz stworzymy nasz pierwszy plik i poznamy jego szkielet.
Tworzenie pierwszego pliku: Dlaczego "index.html" to właściwa nazwa
W Notepad++ wybierz "Plik" (File) -> "Nowy" (New). Otworzy się pusta karta. Zanim zaczniemy pisać kod, zapiszmy ten plik. Wybierz "Plik" (File) -> "Zapisz jako..." (Save As...). Przejdź do folderu, który stworzyłeś wcześniej (np. "MojaPierwszaStrona"). Nazwij plik index.html. Dlaczego "index.html"? To standardowa nazwa, którą serwery internetowe automatycznie rozpoznają jako główną stronę w danym katalogu. Kiedy ktoś wpisze adres Twojej domeny (np. mojastrona.pl), serwer automatycznie wyświetli właśnie plik index.html, jeśli nie zostanie podana inna nazwa pliku. Pamiętaj, aby wybrać "Wszystkie typy (*.*)" w polu "Zapisz jako typ", a kodowanie ustawić na "UTF-8".
Niezbędny szkielet kodu: Deklaracja `!DOCTYPE`, `html`, `head` i `body` wyjaśnione
Teraz, gdy masz już pusty plik index.html, wpiszmy do niego podstawowy szkielet każdej strony HTML5:
Moja Pierwsza Strona HTML
Przyjrzyjmy się każdemu elementowi:
-
</code>: To nie jest znacznik HTML, ale deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Zawsze umieszcza się ją na samym początku pliku. -
...: To główny znacznik, który obejmuje całą zawartość Twojej strony. Wszystko, co znajduje się na stronie, musi być wewnątrz tego znacznika. Atrybutlang="pl"informuje przeglądarkę i wyszukiwarki, że językiem treści na stronie jest polski, co jest ważne m.in. dla dostępności i SEO. -
...: Sekcjazawiera metadane o stronie czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika w przeglądarce. Znajdują się tu takie rzeczy jak tytuł strony (który pojawia się w karcie przeglądarki), kodowanie znaków, linki do plików CSS czy skryptów JavaScript. -
...: To jest serce Twojej strony! Wszystko, co użytkownik widzi na stronie tekst, obrazy, linki, przyciski, filmy znajduje się wewnątrz znacznika.
Kluczowy znacznik `
W sekcji zauważysz linię . To jest absolutnie kluczowy element, zwłaszcza w języku polskim. Ten znacznik informuje przeglądarkę, że dokument jest zakodowany w standardzie UTF-8. Dlaczego to takie ważne? Ponieważ UTF-8 obsługuje wszystkie znaki, w tym polskie litery diakrytyczne (ą, ć, ę, ł, ń, ó, ś, ź, ż). Bez tego znacznika, zamiast "Żółć" mógłbyś zobaczyć "Å»ółć", co jest oczywiście niepożądane.
Tytuł Twojej strony: Gdzie wpisać tekst, który pojawia się w karcie przeglądarki
W sekcji znajduje się również znacznik
Moja Pierwsza Strona HTML
Budujemy Twoją pierwszą stronę: Od pustego pliku do widocznej treści krok po kroku
Mamy już szkielet, teraz czas wypełnić go treścią! Wszystko, co będziemy dodawać w tej sekcji, umieścimy wewnątrz znacznika .
Jak dodawać tekst? Nagłówki ``, `` oraz akapity `
` w praktyce
Tekst to podstawa każdej strony. HTML oferuje różne znaczniki do strukturyzowania tekstu, z których najważniejsze to nagłówki i akapity.
-
Nagłówki (
do): Służą do tworzenia tytułów i podtytułów.to najważniejszy nagłówek (powinien być tylko jeden na stronie), anajmniej ważny. Używaj ich, aby nadać strukturę swojej treści.
Witaj na mojej pierwszej stronie!
O mnie
-
Akapity (
): Służą do tworzenia zwykłych bloków tekstu. Każdy akapit powinien być umieszczony w osobnym znaczniku.
Witaj na mojej pierwszej stronie!
Cieszę się, że tu jesteś. To jest moja pierwsza strona internetowa, którą tworzę samodzielnie, krok po kroku.
O mnie
Nazywam się Daniel i uczę się podstaw HTML. To fascynujące, jak proste znaczniki mogą tworzyć tak wiele!
Tworzymy pierwszy link: Jak za pomocą znacznika `` przenieść użytkownika na inną stronę
Internet to sieć połączonych ze sobą dokumentów, a za te połączenia odpowiadają linki, czyli hiperłącza. Tworzy się je za pomocą znacznika (od "anchor" - kotwica).
Kluczowym elementem linku jest atrybut href (od "hypertext reference"), który określa adres docelowy czyli dokąd ma prowadzić link. Tekst umieszczony między znacznikami i jest widoczny dla użytkownika i jest klikalny.
Witaj na mojej pierwszej stronie!
Cieszę się, że tu jesteś. To jest moja pierwsza strona internetowa, którą tworzę samodzielnie, krok po kroku.
O mnie
Nazywam się Daniel i uczę się podstaw HTML. To fascynujące, jak proste znaczniki mogą tworzyć tak wiele!
Jeśli chcesz dowiedzieć się więcej o HTML, odwiedź W3Schools HTML Tutorial.
Jak wstawić obrazek na stronę? Znacznik `` i najczęstsze pułapki ze ścieżkami
Obrazki ożywiają każdą stronę. Wstawia się je za pomocą znacznika ).
Dwa najważniejsze atrybuty dla
-
src(od "source"): Określa ścieżkę do pliku obrazka. -
alt(od "alternative text"): Zawiera tekst, który zostanie wyświetlony, jeśli obrazek nie może zostać załadowany (np. z powodu błędu w ścieżce) lub jest czytany przez czytniki ekranowe dla osób niewidomych. Jest to bardzo ważny element dla dostępności i SEO.
Pułapki ze ścieżkami: Jeśli obrazek znajduje się w tym samym folderze co plik HTML, wystarczy podać jego nazwę (np. moj_obrazek.jpg). Jeśli jest w podfolderze (np. images/moj_obrazek.jpg), musisz podać ścieżkę względną. Upewnij się, że nazwa pliku i rozszerzenie są poprawne (np. .jpg, .png, .gif).
Dla przykładu, pobierz jakiś obrazek (np. z darmowych banków zdjęć, jak Pixabay, lub po prostu zrób zrzut ekranu) i zapisz go w folderze "MojaPierwszaStrona" pod nazwą web_dev.jpg.
Witaj na mojej pierwszej stronie!
Cieszę się, że tu jesteś. To jest moja pierwsza strona internetowa, którą tworzę samodzielnie, krok po kroku.
O mnie
Nazywam się Daniel i uczę się podstaw HTML. To fascynujące, jak proste znaczniki mogą tworzyć tak wiele!
Jeśli chcesz dowiedzieć się więcej o HTML, odwiedź W3Schools HTML Tutorial.
Porządkowanie treści: Listy wypunktowane `` i numerowane ` `
Listy to świetny sposób na prezentowanie informacji w uporządkowany sposób. HTML oferuje dwa główne typy list:
-
Listy nienumerowane (
-
Listy numerowane (
Zarówno w (list item).
Witaj na mojej pierwszej stronie!
Cieszę się, że tu jesteś. To jest moja pierwsza strona internetowa, którą tworzę samodzielnie, krok po kroku.
O mnie
Nazywam się Daniel i uczę się podstaw HTML. To fascynujące, jak proste znaczniki mogą tworzyć tak wiele!
Moje zainteresowania:
- Programowanie
- Gry komputerowe
- Czytanie książek
Plan na dziś:
- Napisać kod HTML
Otworzyć stronę w przeglądarce - Pochwalić się znajomym!
Jeśli chcesz dowiedzieć się więcej o HTML, odwiedź W3Schools HTML Tutorial.
Ożywiamy Twoje dzieło: Jak zobaczyć efekt swojej pracy w przeglądarce?
Kodowanie to jedno, ale prawdziwa magia dzieje się, gdy widzisz swoją stronę działającą w przeglądarce! To moment, na który czekałeś.
Prawidłowy zapis pliku w Notepad++: Opcje "Zapisz jako" i kodowanie, o których musisz pamiętać
Aby przeglądarka mogła poprawnie zinterpretować Twój kod, musisz upewnić się, że plik jest prawidłowo zapisany. Oto kroki:
- W Notepad++ wybierz "Plik" (File) -> "Zapisz" (Save) lub po prostu naciśnij Ctrl+S. Jeśli zapisujesz plik po raz pierwszy, otworzy się okno "Zapisz jako".
- Upewnij się, że jesteś w odpowiednim folderze (np. "MojaPierwszaStrona").
- W polu "Nazwa pliku" (File name) wpisz
index.html. - W polu "Zapisz jako typ" (Save as type) wybierz "Wszystkie typy (*.*)". To ważne, aby program nie dodał przypadkowo rozszerzenia `.txt`.
- W polu "Kodowanie" (Encoding) upewnij się, że wybrane jest "UTF-8". To zapewni poprawne wyświetlanie polskich znaków.
- Kliknij "Zapisz" (Save).
Krok po kroku: Jak otworzyć plik `index.html` w Chrome, Firefox lub innej przeglądarce
Teraz, gdy Twój plik jest zapisany, czas go otworzyć!
- Przejdź do folderu "MojaPierwszaStrona" na swoim komputerze.
- Znajdź plik
index.html. Powinien mieć ikonę Twojej domyślnej przeglądarki internetowej. -
Dwukrotnie kliknij na plik
index.html. Powinien otworzyć się automatycznie w Twojej domyślnej przeglądarce. - Alternatywnie, możesz kliknąć prawym przyciskiem myszy na plik
index.html, wybrać "Otwórz za pomocą" (Open with...) i wskazać przeglądarkę, której chcesz użyć (np. Google Chrome, Mozilla Firefox, Microsoft Edge).
Gratulacje! Właśnie uruchomiłeś swoją pierwszą stronę internetową! Zobaczysz nagłówek, tekst, obrazek i linki, dokładnie tak, jak je zapisałeś.
Coś nie działa? Jak odświeżyć stronę w przeglądarce, aby zobaczyć wprowadzone zmiany
Podczas edycji strony będziesz często wprowadzać zmiany w kodzie HTML w Notepad++. Pamiętaj, że po każdej zmianie musisz:
- Zapisać plik w Notepad++ (Ctrl+S).
- Odświeżyć stronę w przeglądarce. Możesz to zrobić, klikając ikonę odświeżania (zazwyczaj okrągła strzałka) obok paska adresu, lub naciskając klawisz F5 (lub Ctrl+R na Windowsie/Linuxie, Cmd+R na Macu).
Dopóki nie odświeżysz strony, przeglądarka będzie wyświetlać jej starą wersję. To bardzo częsty błąd początkujących, więc miej to na uwadze!
To dopiero początek! Co dalej po stworzeniu pierwszej strony w HTML?
Masz już swoją pierwszą stronę HTML! To ogromny sukces i solidna podstawa. Ale zapewne zauważyłeś, że strona jest dość... prosta. Brakuje jej kolorów, ładnych czcionek, ciekawego układu. I tu wkracza kolejny język, który odmieni wygląd Twoich stron CSS.
Krótkie wprowadzenie do CSS: Czym są style i dlaczego zmieniają wszystko?
CSS to skrót od Cascading Style Sheets, czyli Kaskadowe Arkusze Stylów. O ile HTML jest szkieletem i treścią strony, o tyle CSS jest jej ubraniem, makijażem i fryzurą. To CSS odpowiada za to, jak strona wygląda: kolory, czcionki, rozmiary, marginesy, tła, układ elementów, animacje i wiele, wiele więcej. Bez CSS strony internetowe byłyby nudne i jednolite. To właśnie CSS sprawia, że strony są estetyczne, intuicyjne i przyjemne dla oka.
Jak dodać trochę koloru? Twój pierwszy, prosty styl CSS
Aby pokazać, jak działa CSS, dodajmy bardzo prosty styl, który zmieni kolor tekstu w nagłówku na niebieski. Możemy to zrobić bezpośrednio w znaczniku HTML za pomocą atrybutu style (tzw. inline CSS).
Witaj na mojej pierwszej stronie!
Cieszę się, że tu jesteś. To jest moja pierwsza strona internetowa, którą tworzę samodzielnie, krok po kroku.
O mnie
Nazywam się Daniel i uczę się podstaw HTML. To fascynujące, jak proste znaczniki mogą tworzyć tak wiele!
Moje zainteresowania:
- Programowanie
- Gry komputerowe
- Czytanie książek
Plan na dziś:
- Napisać kod HTML
- Otworzyć stronę w przeglądarce
- Pochwalić się znajomym!
Jeśli chcesz dowiedzieć się więcej o HTML, odwiedź W3Schools HTML Tutorial.
Zapisz plik i odśwież przeglądarkę. Widzisz? Nagłówek zmienił kolor! To tylko mała próbka możliwości CSS.
Przeczytaj również: Kolor tekstu w HTML: Opanuj CSS i stylizuj profesjonalnie
Kolejny krok profesjonalisty: Jak podłączyć zewnętrzny plik `style.css` do Twojego HTML
Chociaż inline CSS działa, nie jest to najlepsza praktyka. Mieszanie stylów z treścią HTML szybko prowadzi do bałaganu i utrudnia zarządzanie stroną. Profesjonaliści trzymają style w oddzielnych plikach CSS. Stwórzmy taki plik:
- W Notepad++ wybierz "Plik" -> "Nowy".
- W nowej karcie wpisz prosty styl, np.:
h1 { color: green; text-align: center; } p { font-family: Arial, sans-serif; line-height: 1.6; } - Zapisz ten plik w tym samym folderze co
index.html, nazywając gostyle.css. Upewnij się, że "Zapisz jako typ" to "Wszystkie typy (*.*)" i kodowanie to "UTF-8".
Teraz musimy poinformować plik index.html, że ma używać tego pliku stylów. Robimy to za pomocą znacznika umieszczonego w sekcji Twojego pliku HTML:
Moja Pierwsza Strona HTML
Usuń atrybut style="color: blue;" z nagłówka w pliku index.html. Zapisz oba pliki (index.html i style.css) i odśwież przeglądarkę. Zobaczysz, że nagłówek jest teraz zielony i wyśrodkowany, a akapity mają inną czcionkę. To jest właśnie potęga CSS! Teraz masz czystą strukturę HTML i oddzielną warstwę stylów, co jest podstawą nowoczesnego web developmentu. To otwiera przed Tobą drzwi do nieskończonych możliwości stylizacji i projektowania stron.
