Czy marzysz o stworzeniu własnej strony internetowej, ale przeraża Cię wizja skomplikowanych narzędzi i programowania? Mam dla Ciebie dobrą wiadomość! Możesz zacząć swoją przygodę z webmasteringiem, używając najprostszego narzędzia dostępnego w każdym systemie Windows Notatnika. W tym praktycznym poradniku, krok po kroku, pokażę Ci, jak od zera zbudować prostą stronę WWW, poznając podstawy HTML i CSS.

Notatnik Twój pierwszy krok w świecie tworzenia stron

Zastanawiasz się, dlaczego Notatnik, to proste narzędzie, jest idealne na początek przygody z HTML? Odpowiedź jest prosta: minimalizm. Notatnik nie oferuje żadnych rozpraszaczy, kolorowania składni czy autouzupełniania, co zmusza Cię do skupienia się wyłącznie na kodzie. Dzięki temu zrozumiesz, jak naprawdę działa struktura strony internetowej, co jest bezcenną lekcją dla każdego początkującego webmastera. To tak, jakbym uczył się jeździć samochodem na manualnej skrzyni biegów najpierw opanowujesz podstawy, a potem przesiadasz się na automat.

Czym jest HTML i dlaczego nie jest tak trudny, jak myślisz?

HTML (HyperText Markup Language) to nie język programowania w ścisłym tego słowa znaczeniu. To raczej język znaczników, który służy do strukturyzowania treści w internecie. Pomyśl o nim jak o zestawie instrukcji dla przeglądarki, mówiących jej, co jest nagłówkiem, co akapitem, a co linkiem. Opiera się na prostych elementach zwanych tagami, które otaczają i opisują zawartość. Na przykład, aby stworzyć akapit, używasz tagu

Zanim zaczniesz: przygotowanie środowiska pracy

Zanim zanurkujemy w świat kodu, upewnijmy się, że masz wszystko, czego potrzebujesz. To naprawdę niewiele:

1. Otwórz Notatnik: Jest on preinstalowany w każdym systemie Windows. Możesz go znaleźć, wpisując "Notatnik" w pasku wyszukiwania systemu.
2. Przygotuj przeglądarkę internetową: Miej pod ręką dowolną przeglądarkę (np. Chrome, Firefox, Edge), ponieważ będziesz w niej testować swoją nowo stworzoną stronę.

Krok 1: Budujemy szkielet strony podstawa HTML

Każda strona internetowa, niezależnie od jej złożoności, ma pewien podstawowy szkielet. To fundament, na którym opiera się cała jej konstrukcja. Zrozumienie go to klucz do dalszej nauki. Pokażę Ci, jak go stworzyć w Notatniku.

Anatomia dokumentu HTML: poznaj szkielet każdej witryny

Oto podstawowe elementy, które znajdziesz w każdym dokumencie HTML5:

• </code>: To deklaracja typu dokumentu. Mówi przeglądarce, że ma do czynienia z dokumentem HTML5. Zawsze umieszczaj ją na samym początku pliku.
• : To główny element, który obejmuje całą zawartość strony. Wszystko, co tworzysz, musi znajdować się wewnątrz tego tagu.
• : Ta sekcja zawiera metadane strony informacje, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek. Znajdują się tu takie rzeczy jak tytuł strony, informacje o kodowaniu znaków czy linki do plików CSS.
• : To serce Twojej strony! Wszystko, co użytkownik widzi w oknie przeglądarki tekst, obrazy, linki, listy znajduje się w tej sekcji.

Oto jak wygląda podstawowy szkielet:

Klucz do polskich znaków: magiczna linijka

Pamiętam, jak na początku mojej przygody z HTML, polskie znaki diakrytyczne (ą, ę, ć, ł, ń, ó, ś, ź, ż) wyświetlały się jako "krzaczki". Było to frustrujące! Rozwiązaniem jest dodanie jednej prostej linijki kodu w sekcji : . Ta linijka informuje przeglądarkę, że ma użyć kodowania UTF-8, które poprawnie obsługuje wszystkie znaki, w tym polskie. Bez niej Twoja strona będzie wyglądać nieprofesjonalnie, więc zawsze o niej pamiętaj!

Jak poprawnie zapisać plik, by stał się stroną internetową?

To jest jeden z najważniejszych kroków dla początkujących. Jeśli go pominiesz, przeglądarka nie rozpozna Twojego pliku jako strony WWW. Oto jak to zrobić:

1. Po napisaniu kodu w Notatniku, kliknij "Plik", a następnie "Zapisz jako...".
2. W oknie "Zapisz jako" znajdź pole "Zapisz jako typ:". Domyślnie będzie tam "Dokumenty tekstowe (*.txt)". Musisz to zmienić na "Wszystkie pliki (*.*)". To jest kluczowe!
3. W polu "Nazwa pliku:" wpisz nazwę swojej strony, np. index.html. Rozszerzenie .html jest absolutnie niezbędne. Możesz użyć dowolnej nazwy, ale index.html jest standardową nazwą dla strony głównej.
4. Wybierz miejsce, gdzie chcesz zapisać plik (np. na pulpicie lub w nowym folderze).
5. Kliknij "Zapisz".
6. Teraz znajdź swój plik (np. index.html) i kliknij go dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej! Gratulacje, właśnie stworzyłeś swoją pierwszą stronę!

Krok 2: Dodajemy treść poznajemy kluczowe tagi HTML

Szkielet mamy gotowy, ale strona jest pusta. Czas wypełnić ją treścią! Teraz pokażę Ci najważniejsze tagi HTML, których będziesz używać do tworzenia nagłówków, akapitów, linków, obrazków i list. To one sprawią, że Twoja strona zacznie żyć.

Hierarchia i porządek: Jak używać nagłówków od

do

?

Nagłówki służą do strukturyzowania treści i nadawania jej hierarchii. Pomyśl o nich jak o tytułach i podtytułach w książce. Tag

To jest główny nagłówek strony
To jest nagłówek sekcji
To jest podsekcja
Tutaj znajduje się treść pod nagłówkiem h3.

Tworzenie akapitów, czyli serce Twojej treści za pomocą tagu

Tag

Witaj na mojej pierwszej stronie internetowej! Cieszę się, że tu jesteś.
To jest kolejny akapit, który zawiera więcej informacji o tym, co tworzę.

Jak dodać klikalny link (hiperłącze) do innej strony?

Internet bez linków byłby... bezsensowny! Tag (od "anchor") służy do tworzenia hiperłączy. Kluczowym atrybutem jest href (Hypertext Reference), który wskazuje adres docelowy linku. Możesz linkować do innych stron internetowych lub do innych sekcji na tej samej stronie.

Odwiedź moją ulubioną wyszukiwarkę: Google.

Obraz wart tysiąca słów: wstawianie grafiki za pomocą

Obrazki ożywiają każdą stronę. Tag służy do wstawiania grafik. Jest to tzw. "pusty" tag, co oznacza, że nie ma tagu zamykającego (). Ma dwa kluczowe atrybuty:

• src (source): Określa ścieżkę do pliku obrazu.
• alt (alternative text): Zawiera tekst alternatywny, który wyświetli się, jeśli obrazek się nie załaduje, lub jest czytany przez czytniki ekranowe dla osób niewidomych. To bardzo ważne dla dostępności!

Pamiętaj, aby obrazek znajdował się w tym samym folderze co plik HTML, jeśli podajesz tylko jego nazwę, lub podaj pełną ścieżkę.

Porządkowanie informacji: tworzenie list punktowanych i numerowanych

Listy to świetny sposób na prezentowanie informacji w uporządkowany i czytelny sposób. Mamy dwa główne typy:

• Listy nieuporządkowane (punktowane): Użyj tagu
  (unordered list) dla całej listy, a następnie
• (list item) dla każdego elementu listy.
• Listy uporządkowane (numerowane): Użyj tagu
  (ordered list) dla całej listy, a następnie
• dla każdego elementu.

Przykład listy punktowanej:

Moje ulubione języki programowania:
 
HTML
 
CSS
 
JavaScript

Przykład listy numerowanej:

Kroki do stworzenia strony:
 
Otwórz Notatnik
 
Napisz kod HTML
 
Zapisz plik jako .html
 
Otwórz w przeglądarce

Krok 3: Nadajemy styl pierwsze kroki z CSS

HTML daje strukturę, ale CSS (Cascading Style Sheets) nadaje stronie wygląd. Nawet w Notatniku możemy dodać proste style, aby nasza strona wyglądała atrakcyjniej. Pokażę Ci kilka podstawowych sztuczek, które sprawią, że Twoja witryna przestanie być tylko czarno-białym tekstem.

Jak zmienić kolor tekstu i tła bez skomplikowanych narzędzi?

Najprostszym sposobem na dodanie stylu jest użycie atrybutu style bezpośrednio w tagu HTML (tzw. style inline). To świetne na początek, ale pamiętaj, że do większych projektów lepiej używać zewnętrznych arkuszy stylów. Na razie skupmy się na prostocie:

Ten tekst jest niebieski.
Ten nagłówek ma żółte tło i czarny tekst.

Jak widzisz, możesz zmieniać color (kolor tekstu) i background-color (kolor tła). Możesz używać nazw kolorów (red, blue, green) lub kodów szesnastkowych (np. #FF0000 dla czerwonego).

Proste formatowanie tekstu: pogrubienie i kursywa w praktyce

Aby wyróżnić fragment tekstu, możesz użyć tagów do pogrubienia i kursywy:

• Pogrubienie: Użyj tagu (bold) lub . Preferowany jest , ponieważ ma znaczenie semantyczne oznacza, że tekst jest ważny.
• Kursywa: Użyj tagu (italic) lub (emphasized). Podobnie jak w przypadku pogrubienia, jest preferowany ze względu na znaczenie semantyczne (podkreśla fragment tekstu).

To jest bardzo ważna informacja.
Ten fragment tekstu jest lekko podkreślony.

Wprowadzenie do wewnętrznego arkusza stylów - czyli tag

Jeśli chcesz zastosować te same style do wielu elementów na stronie, style inline stają się niewygodne. Lepszym rozwiązaniem jest wewnętrzny arkusz stylów, umieszczony w sekcji za pomocą tagu . Dzięki temu możesz zdefiniować reguły raz, a będą one miały zastosowanie do wszystkich pasujących elementów na stronie. To ogromna oszczędność czasu i znacznie lepsza praktyka!

W powyższym przykładzie ustawiłem domyślną czcionkę, kolor tła i tekstu dla całego , a także kolor dla wszystkich nagłówków

Krok 4: Tworzymy kompletną stronę praktyczny przykład

Teraz, gdy masz już za sobą podstawy HTML i CSS, czas połączyć wszystkie te elementy w jedną, działającą stronę. Przygotowałem dla Ciebie prosty przykład strony "O mnie", którą możesz skopiować, wkleić do Notatnika i zobaczyć, jak wszystko działa razem. To najlepszy sposób, aby utrwalić wiedzę.

Budujemy prostą stronę "O mnie" kod do skopiowania i analizy

Skopiuj poniższy kod, wklej go do Notatnika i zapisz jako omnie.html (pamiętaj o zmianie typu pliku na "Wszystkie pliki (*.*)")!

    

 
 
Witaj na mojej stronie!
   
Kim jestem?
 
Cześć! Nazywam się Łukasz Wójcik i jestem entuzjastą technologii oraz tworzenia stron internetowych. Od zawsze fascynowało mnie, jak z prostych linijek kodu można zbudować coś, co jest dostępne dla milionów ludzi na całym świecie.
 
Moja przygoda z programowaniem zaczęła się właśnie od Notatnika i podstaw HTML. To był pierwszy krok do zrozumienia, jak działa internet.
 
Moje zainteresowania:
 
 
Web Development: Tworzenie stron i aplikacji internetowych.
 
Nowe Technologie: Śledzenie trendów i innowacji.
 
Fotografia: Uwiecznianie piękna świata.
 
Podróże: Odkrywanie nowych miejsc i kultur.
 
 
Skontaktuj się ze mną:
 
Jeśli masz pytania lub chcesz porozmawiać, napisz do mnie!
 
Wyślij e-mail | Mój LinkedIn
 

Objaśnienie kodu linijka po linijce: co dokładnie robi każda część?

Przyjrzyjmy się bliżej temu, co właśnie stworzyłeś:

1. </code> do : To standardowy szkielet, który już znasz.
2. : Zawiera metadane.
   • : Gwarantuje poprawne wyświetlanie polskich znaków.
   • : Tytuł, który pojawi się w zakładce przeglądarki.
   • : To nasz wewnętrzny arkusz stylów CSS.
     • body: Definiuje domyślne style dla całej strony (czcionka, kolor tła, kolor tekstu, marginesy).
     • h1, h2, p, ul, a: Definiują style dla poszczególnych tagów HTML, np. kolor nagłówków, odstępy w akapitach, wygląd linków.
     • a:hover: To specjalna reguła, która zmienia wygląd linku po najechaniu na niego myszką (dodaje podkreślenie).
     • .container: To klasa CSS, którą zastosowałem do elementu
       . Klasy pozwalają stylizować konkretne elementy, a nie wszystkie tagi danego typu. Tutaj ustawiłem maksymalną szerokość, wyśrodkowanie, białe tło, dopełnienie, zaokrąglone rogi i cień, aby treść była ładnie wyeksponowana.
     • img: Stylizuje obrazek, zapewniając, że nie będzie za duży i będzie wyśrodkowany.
     • : Zawiera widoczną treść strony.
       • : To element blokowy, który służy do grupowania treści i zastosowania do niej stylów z klasy .container.

       • Witaj na mojej stronie!

         : Główny nagłówek.
       • : Obrazek. Pamiętaj, aby umieścić plik profilowe.jpg w tym samym folderze co omnie.html, jeśli chcesz, aby się wyświetlił. W przeciwnym razie zmień src na ścieżkę do Twojego obrazka.

       • Kim jestem?

         i

         ...

         : Nagłówki i akapity z Twoją treścią.

       • Moje zainteresowania:

         i
         ...
         : Lista punktowana zainteresowań, z użyciem i do wyróżnienia tekstu.

       • Skontaktuj się ze mną:

         i

         ...

         : Sekcja kontaktowa z linkami.
         • Wyślij e-mail: Link, który po kliknięciu otworzy program pocztowy z predefiniowanym adresem.
         • Mój LinkedIn: Link do profilu LinkedIn. Atrybut target="_blank" sprawia, że link otworzy się w nowej karcie przeglądarki, co jest dobrą praktyką dla linków zewnętrznych.

       Unikaj błędów: najczęstsze pułapki początkujących

       Wiem z doświadczenia, że początki bywają frustrujące. Każdy popełnia błędy, ale znajomość tych najczęstszych pozwoli Ci zaoszczędzić mnóstwo czasu i nerwów. Pamiętaj, że nauka kodowania to często sztuka debugowania, czyli znajdowania i naprawiania błędów.

       Dlaczego moja strona wygląda jak "krzaczki"? Problem z kodowaniem

       To klasyka! Jeśli widzisz dziwne znaki zamiast polskich liter (ą, ę, ć itp.), to niemal na pewno problem z kodowaniem. Upewnij się, że:

       • W sekcji masz linijkę: .
       • Podczas zapisywania pliku w Notatniku wybrałeś "Zapisz jako typ: Wszystkie pliki (*.*)". Notatnik domyślnie zapisuje w kodowaniu ANSI, które nie obsługuje polskich znaków. Po zmianie typu pliku na "Wszystkie pliki", Notatnik powinien domyślnie użyć UTF-8, ale zawsze warto to sprawdzić.

       Obrazek się nie wyświetla? Sprawdź ścieżkę do pliku!

       "Mój obrazek się nie pokazuje!" to jedno z najczęściej słyszanych zdań od początkujących. Zazwyczaj problem leży w atrybucie src tagu . Sprawdź dokładnie:

       • Czy nazwa pliku jest poprawna? Sprawdź wielkość liter (Obrazek.jpg to nie to samo co obrazek.jpg).
       • Czy rozszerzenie pliku jest poprawne? (.jpg, .png, .gif).
       • Czy ścieżka do pliku jest poprawna?
         • Jeśli obrazek jest w tym samym folderze co plik HTML, wystarczy sama nazwa: .
         • Jeśli obrazek jest w podfolderze (np. images), ścieżka powinna wyglądać tak: .
         • Jeśli obrazek jest w folderze nadrzędnym, użyj ../: .

       Zawsze upewnij się, że plik obrazka faktycznie istnieje w miejscu, do którego się odwołujesz. Najlepiej umieść obrazek w tym samym folderze co plik HTML na początek.

       Niezamknięte tagi cichy wróg poprawnego wyświetlania

       HTML opiera się na otwieraniu i zamykaniu tagów (np.

       i
       ). Zapomnienie o zamknięciu tagu to bardzo częsty błąd. Chociaż nowoczesne przeglądarki są bardzo "wyrozumiałe" i często próbują naprawić błędy, może to prowadzić do nieprzewidzianych problemów z układem strony. Zawsze staraj się zamykać każdy otwarty tag (z wyjątkiem tagów pustych, takich jak czy ).

       Dobrą praktyką jest użycie walidatora W3C (validator.w3.org). Wklej tam swój kod, a on wskaże Ci wszelkie błędy i niezgodności ze standardami, co jest nieocenioną pomocą w nauce.

       Co dalej? Rozwijaj swoje umiejętności

       Gratuluję! Właśnie postawiłeś swoje pierwsze kroki w świecie tworzenia stron internetowych. Opanowałeś podstawy HTML i CSS w Notatniku, co jest solidnym fundamentem. Ale to dopiero początek ekscytującej podróży. Pokażę Ci, jak możesz rozwijać swoje umiejętności i ułatwić sobie pracę.

       Poznaj darmowe edytory kodu, które przyspieszą Twoją pracę

       Notatnik był świetny na start, ale teraz, gdy rozumiesz podstawy, czas przesiąść się na narzędzia, które ułatwią Ci życie. Istnieje wiele darmowych i potężnych edytorów kodu, które oferują:

       • Kolorowanie składni: Różne elementy kodu (tagi, atrybuty, wartości) są wyświetlane w różnych kolorach, co znacznie poprawia czytelność.
       • Autouzupełnianie: Edytor podpowiada Ci tagi i atrybuty, oszczędzając czas i zmniejszając liczbę błędów.
       • Wyróżnianie par tagów: Pomaga szybko zlokalizować, gdzie zaczyna się i kończy dany element.

       Moje rekomendacje:

       • Notepad++: Lekki i szybki edytor dla Windows, idealny do przesiadki z Notatnika.
       • Visual Studio Code (VS Code): Bardzo popularny, rozbudowany edytor od Microsoftu, dostępny na wszystkie systemy. Ma mnóstwo rozszerzeń, które dodają funkcjonalności.
       • Sublime Text: Elegancki i wydajny edytor, również dostępny na różne platformy (wersja darmowa ma ograniczenia, ale jest w pełni funkcjonalna).

       Przeczytaj również: Jak połączyć CSS z HTML? 3 metody, błędy i dobre praktyki

       Gdzie szukać dalszej wiedzy i rozwijać swoje umiejętności?

       Świat web developmentu jest ogromny i ciągle się zmienia. Aby być na bieżąco i rozwijać się, polecam następujące zasoby:

       • Dokumentacja W3C: To oficjalne standardy HTML i CSS. Bardzo szczegółowe i wiarygodne źródło wiedzy.
       • MDN Web Docs (Mozilla Developer Network): Fantastyczne, kompleksowe i przystępnie napisane źródło wiedzy o wszystkich technologiach webowych. To moje ulubione miejsce do sprawdzania dokumentacji.
       • Kursy online: Platformy takie jak Udemy, Coursera, FreeCodeCamp czy Codecademy oferują mnóstwo kursów (często darmowych) na temat HTML, CSS, JavaScript i wielu innych technologii.
       • Społeczności programistyczne: Dołącz do grup na Facebooku, forów internetowych (np. Stack Overflow) czy lokalnych meet-upów. Zadawaj pytania, pomagaj innym to świetny sposób na naukę.
       • Walidator W3C (validator.w3.org): Jak już wspomniałem, używaj go regularnie, aby sprawdzać poprawność swojego kodu. To jak mieć osobistego nauczyciela, który wyłapuje błędy!