W dzisiejszych czasach umiejętność tworzenia stron internetowych staje się coraz bardziej ceniona, a pierwszym i najważniejszym krokiem w świat web developmentu jest opanowanie języka HTML. Ten artykuł to Twój praktyczny przewodnik, który krok po kroku pokaże Ci, jak samodzielnie zbudować prostą stronę internetową, nawet jeśli nigdy wcześniej nie miałeś do czynienia z kodowaniem. Przygotuj się na fascynującą podróż do podstaw tworzenia stron!

HTML: Co to właściwie jest i dlaczego to pierwszy krok w świat kodowania?

HTML, czyli HyperText Markup Language, to fundament każdej strony internetowej, jaką widzisz w sieci. Zawsze powtarzam moim kursantom, że to nie jest język programowania w ścisłym tego słowa znaczeniu, ale język znaczników. Wyobraź sobie, że budujesz dom HTML to jego szkielet, mury, fundamenty. To on definiuje strukturę treści: gdzie jest nagłówek, gdzie akapit, gdzie lista, a gdzie obraz. Jego prostota i logiczna struktura sprawiają, że jest to idealny punkt startowy dla każdego, kto chce rozpocząć swoją przygodę z web developmentem. Bez HTML po prostu nie ma strony!

Różnica między HTML, CSS a JavaScript: Dlaczego sam szkielet to za mało?

W świecie front-endu często mówimy o "świętej trójcy": HTML, CSS i JavaScript. Jak już wspomniałem, HTML to szkielet. Ale czy dom ze szkieletu i murów jest gotowy do zamieszkania? Oczywiście, że nie! Potrzebuje wykończenia, kolorów, mebli. I tu wkracza CSS (Cascading Style Sheets). CSS odpowiada za wygląd i styl strony kolory, czcionki, rozmiary, układ elementów. To dzięki niemu strona staje się estetyczna i przyjemna dla oka. Natomiast JavaScript to serce i mózg interaktywności. Pozwala na dodawanie dynamicznych elementów, takich jak animacje, formularze, które reagują na działania użytkownika, czy gry. Bez JavaScriptu strona jest statyczna i nie reaguje na to, co robisz. Aby stworzyć nowoczesną, w pełni funkcjonalną witrynę, potrzebujemy synergii tych trzech technologii.

Czy naprawdę każdy może się tego nauczyć? Rozwiewamy mity dla początkujących

Wielu początkujących obawia się, że kodowanie jest zarezerwowane tylko dla "umysłów ścisłych" lub osób z wykształceniem informatycznym. Nic bardziej mylnego! Z mojego doświadczenia wynika, że HTML jest niezwykle intuicyjny i łatwy do opanowania na podstawowym poziomie. Kluczem jest cierpliwość, regularna praktyka i chęć eksperymentowania. Nie musisz być geniuszem matematycznym, aby zrozumieć, że znacznik

Zanim napiszesz pierwszą linię kodu: niezbędne i darmowe narzędzia

Twój cyfrowy warsztat: Jaki edytor kodu wybrać na start? (Notepad++, VS Code)

Zanim zaczniemy pisać kod, potrzebujemy odpowiedniego narzędzia. Technicznie rzecz biorąc, możesz pisać kod HTML nawet w zwykłym Notatniku systemowym, ale uwierz mi to będzie droga przez mękę. Zdecydowanie polecam darmowe, dedykowane edytory kodu, które znacząco ułatwiają pracę. Moje ulubione to Visual Studio Code (VS Code), który jest potężny i oferuje mnóstwo rozszerzeń, oraz Notepad++, lżejszy i prostszy, idealny na sam początek. Inne popularne opcje to Sublime Text czy Atom. Co zyskujesz, używając takiego edytora?

• Kolorowanie składni: Różne elementy kodu (znaczniki, atrybuty) są pokazywane w różnych kolorach, co ułatwia czytanie i wykrywanie błędów.
• Autouzupełnianie: Edytor podpowiada Ci nazwy znaczników i atrybutów, oszczędzając czas i minimalizując literówki.
• Wyróżnianie par znaczników: Pomaga sprawdzić, czy każdy otwarty znacznik ma swój zamykający odpowiednik.
• Wbudowany terminal i rozszerzenia: W przypadku VS Code, możliwości są niemal nieograniczone.

Przeglądarka internetowa jako Twoje okno na efekt pracy

Drugim absolutnie niezbędnym narzędziem jest przeglądarka internetowa. Niezależnie od tego, czy używasz Google Chrome, Mozilla Firefox, Microsoft Edge czy innej, to właśnie w niej będziesz podglądać efekty swojej pracy. Przeglądarka interpretuje napisany przez Ciebie kod HTML i wyświetla go w formie, którą znamy jako stronę internetową. Pamiętaj, aby regularnie odświeżać stronę w przeglądarce po każdej zmianie w kodzie, aby zobaczyć aktualny efekt.

Organizacja pracy: Jak stworzyć folder projektu, by nie pogubić plików?

To prosta, ale niezwykle ważna rada, którą zawsze powtarzam. Zanim zaczniesz, stwórz na swoim komputerze dedykowany folder dla każdego projektu. Nazwij go intuicyjnie, np. "moja-pierwsza-strona". W tym folderze będziesz przechowywać wszystkie pliki związane z Twoją stroną: plik HTML, obrazy, a w przyszłości także pliki CSS i JavaScript. Dzięki temu zachowasz porządek, łatwo znajdziesz potrzebne elementy i unikniesz problemów ze ścieżkami do plików, co jest częstą pułapką dla początkujących.

Krok po kroku: budujemy szkielet Twojej pierwszej strony internetowej

Tworzenie pliku index.html: Dlaczego ta nazwa jest tak ważna?

Zaczynamy od stworzenia głównego pliku naszej strony. To bardzo prosty proces:

1. Otwórz swój ulubiony edytor kodu (np. Visual Studio Code).
2. Stwórz nowy plik (zazwyczaj File -> New File lub Ctrl+N / Cmd+N).
3. Zapisz ten plik (File -> Save As... lub Ctrl+S / Cmd+S) w folderze projektu, który wcześniej utworzyłeś.
4. Nazwij plik index.html i upewnij się, że ma rozszerzenie .html.

Dlaczego index.html? Otóż, większość serwerów internetowych automatycznie szuka pliku o nazwie index.html (lub index.htm, default.html) jako strony głównej katalogu. Kiedy ktoś wpisze adres Twojej domeny (np. www.mojastrona.pl), serwer domyślnie wyświetli właśnie ten plik. To uniwersalna konwencja, którą warto zapamiętać.

Anatomia dokumentu HTML: Wyjaśniamy , , i

Każdy dokument HTML ma podstawową, standardową strukturę, którą musimy znać. To jak szkielet, na którym opiera się cała reszta. Oto ona:

Przyjrzyjmy się poszczególnym elementom:

• </code>: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5, czyli najnowszą wersją HTML. Zawsze umieszczaj to na samym początku pliku.
• : Główny element HTML, który obejmuje całą zawartość strony. Atrybut lang="pl" informuje przeglądarki i wyszukiwarki, że język dokumentu to polski, co jest ważne dla dostępności i SEO.
• : Sekcja "głowa" dokumentu. Zawiera metadane, czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są kluczowe dla przeglądarek, wyszukiwarek i innych aplikacji.
• : Sekcja "ciało" dokumentu. To tutaj umieszczamy całą widoczną treść strony teksty, obrazy, linki, nagłówki i wszystko, co użytkownik zobaczy na ekranie.

Sekcja : niewidoczny mózg operacji (tytuł strony i kodowanie znaków)

Sekcja to takie zaplecze Twojej strony. Jak już wspomniałem, nic, co tu umieścisz, nie będzie bezpośrednio widoczne na stronie. Jednakże, jest to niezwykle ważna sekcja, która dostarcza przeglądarce i wyszukiwarkom kluczowych informacji. Dwa podstawowe elementy, które zawsze powinny się tu znaleźć, to:

• : Ten meta tag określa kodowanie znaków dla Twojej strony. UTF-8 to standardowe kodowanie, które obsługuje wszystkie znaki, w tym polskie litery (ą, ę, ś, ć itp.). Bez tego tagu, polskie znaki mogłyby wyświetlać się jako krzaczki.
• : To jest tytuł Twojej strony, który pojawia się w zakładce przeglądarki. Jest to również jeden z najważniejszych elementów dla SEO, ponieważ wyszukiwarki używają go do wyświetlania tytułu w wynikach wyszukiwania. Pamiętaj, aby był on krótki, zwięzły i dobrze oddawał zawartość strony.

Sekcja : płótno, na którym powstanie Twoja treść

Sekcja to Twoje cyfrowe płótno. To tutaj, pomiędzy znacznikiem otwierającym a zamykającym , będziesz umieszczać całą widoczną treść swojej strony. Wszystko, co użytkownik zobaczy na ekranie teksty, nagłówki, obrazy, linki, listy, tabele musi znaleźć się właśnie w tej sekcji. To tu będziemy dodawać większość znaczników, o których opowiem za chwilę, aby nadać strukturę i sens naszej treści.

Wypełniamy stronę treścią: najważniejsze znaczniki HTML w praktyce

Hierarchia jest kluczowa: Jak poprawnie używać nagłówków od

do

?

Nagłówki w HTML służą do strukturyzowania treści i tworzenia hierarchii. Mamy ich sześć poziomów: od

• Główny tytuł mojej strony

• Ważny rozdział

• Podrozdział tematu

• Mniejszy nagłówek

• Jeszcze mniejszy nagłówek

• Najmniej ważny nagłówek

Tworzenie czytelnych bloków tekstu za pomocą akapitów

Akapit to podstawowy znacznik do umieszczania tekstu na stronie. Znacznik

To jest pierwszy akapit mojej strony. Zawiera on wprowadzenie do tematu i jest kluczowy dla zrozumienia dalszej treści.

Jak dodać link, czyli odnośnik do innej strony?

Link, czyli odnośnik, to jeden z najważniejszych elementów internetu. Pozwala użytkownikom przechodzić między stronami, zarówno w obrębie Twojej witryny, jak i do zewnętrznych zasobów. Do tworzenia linków służy znacznik (od anchor). Kluczowym atrybutem jest href, który określa adres docelowy linku.

Odwiedź stronę Google w nowej karcie.

W pierwszym przykładzie link prowadzi do zewnętrznej strony. W drugim, o-nas.html to link wewnętrzny, prowadzący do innej strony w tym samym folderze projektu.

Ożywiamy stronę obrazkami: Znacznik i kluczowy atrybut "alt"

Obrazy sprawiają, że strona jest bardziej atrakcyjna i zrozumiała. Do wstawiania obrazów służy znacznik . Jest to znacznik samodomykający się, co oznacza, że nie potrzebuje znacznika zamykającego . Ma dwa kluczowe atrybuty:

• src (source): Określa ścieżkę do pliku obrazu. Może to być adres URL lub ścieżka względna do pliku w folderze projektu.
• alt (alternative text): To tekst alternatywny, który wyświetla się, gdy obraz nie może zostać załadowany, lub jest czytany przez czytniki ekranowe dla osób niewidomych. Jest to również bardzo ważny element dla SEO, ponieważ pomaga wyszukiwarkom zrozumieć, co przedstawia obraz.

Pamiętaj, aby folder zdjecia znajdował się w tym samym miejscu co plik index.html, jeśli używasz ścieżki względnej.

Porządkowanie informacji: Tworzymy listy wypunktowane

i numerowane

Listy to świetny sposób na prezentowanie informacji w uporządkowany i łatwy do przyswojenia sposób. HTML oferuje dwa główne typy list:

• Listy wypunktowane (nieuporządkowane): Używamy ich, gdy kolejność elementów nie ma znaczenia. Tworzymy je za pomocą znacznika
  (unordered list), a każdy element listy to
• (list item).
• Listy numerowane (uporządkowane): Stosujemy je, gdy kolejność elementów jest ważna (np. kroki instrukcji). Tworzymy je za pomocą znacznika
  (ordered list), a każdy element również jest
• .

Przykład listy wypunktowanej:

• Pierwszy element listy
• Drugi element listy
• Trzeci element listy

Przykład listy numerowanej:

1. Krok pierwszy: Otwórz edytor kodu.
2. Krok drugi: Zapisz plik jako index.html.
3. Krok trzeci: Dodaj podstawową strukturę HTML.

Zapisz i podziwiaj: jak zobaczyć efekty swojej pracy?

Zapisywanie pliku HTML o czym musisz pamiętać?

To może wydawać się oczywiste, ale regularne zapisywanie pliku jest absolutnie kluczowe! Po każdej większej zmianie w kodzie, a najlepiej co kilka minut, zapisuj swój plik (Ctrl+S / Cmd+S). Upewnij się, że plik ma rozszerzenie .html. Niezapisane zmiany nie będą widoczne w przeglądarce, co może prowadzić do frustracji i błędnego przekonania, że coś jest nie tak z Twoim kodem.

Otwieranie lokalnego pliku w przeglądarce (Chrome, Firefox, Edge)

Aby zobaczyć swoją pierwszą stronę, wykonaj następujące kroki:

1. Przejdź do folderu projektu na swoim komputerze, gdzie zapisałeś plik index.html.
2. Dwukrotnie kliknij plik index.html. Domyślnie otworzy się on w Twojej przeglądarce internetowej.
3. Alternatywnie, możesz otworzyć przeglądarkę, a następnie przeciągnąć i upuścić plik index.html bezpośrednio do okna przeglądarki.
4. Po każdej zmianie w kodzie, zapisz plik, a następnie odśwież stronę w przeglądarce (F5 lub Ctrl+R / Cmd+R), aby zobaczyć aktualne efekty.

"Coś nie działa?" czyli jak samodzielnie szukać prostych błędów w kodzie

Nie zniechęcaj się, jeśli Twoja strona nie wygląda dokładnie tak, jak oczekiwałeś, lub jeśli coś w ogóle się nie wyświetla. To normalne! Każdy programista, nawet ten doświadczony, popełnia błędy. Kluczem jest cierpliwość i umiejętność samodzielnego debugowania. Oto kilka najczęstszych błędów, na które warto zwrócić uwagę:

• Literówki: Sprawdź dokładnie nazwy znaczników i atrybutów. Zamiast powinno być
  .
• Brakujące znaczniki zamykające: Upewnij się, że każdy otwarty znacznik (np.
  ) ma swój zamykający odpowiednik (), z wyjątkiem znaczników samodomykających się (np. ).
• Błędne ścieżki do plików: Jeśli obraz się nie wyświetla, sprawdź, czy ścieżka w atrybucie src jest poprawna i czy plik obrazu znajduje się w odpowiednim miejscu.
• Niezapisany plik: Czy na pewno zapisałeś wszystkie zmiany w edytorze kodu przed odświeżeniem przeglądarki?
• Błędy w sekcji : Pamiętaj o , aby polskie znaki wyświetlały się poprawnie.

Ćwicz oko i bądź dokładny. Z czasem nauczysz się szybko wyłapywać takie drobne błędy.

Już wiesz, jak zacząć: co dalej na ścieżce web developera?

Czas na styl! Krótkie wprowadzenie do CSS i nadawania kolorów

Kiedy opanujesz podstawy HTML i będziesz czuć się pewnie w tworzeniu struktury strony, naturalnym kolejnym krokiem jest nauka CSS. CSS (Cascading Style Sheets) to język, który pozwala nadać Twojej stronie styl i wygląd. Dzięki niemu możesz zmieniać kolory tekstu i tła, rozmiary czcionek, marginesy, układ elementów na stronie, a nawet tworzyć responsywne projekty, które dobrze wyglądają na każdym urządzeniu. HTML daje Ci szkielet, a CSS sprawia, że ten szkielet staje się pięknym i funkcjonalnym domem.

Myśl o przyszłości: Jak już teraz zadbać o podstawy SEO w kodzie HTML?

Nigdy nie jest za wcześnie, aby zacząć myśleć o SEO (Search Engine Optimization), czyli optymalizacji pod kątem wyszukiwarek. Już na etapie pisania kodu HTML możesz wdrożyć kilka kluczowych praktyk, które pomogą Twojej stronie być lepiej widoczną w Google:

• Poprawna hierarchia nagłówków: Używaj jednego
  na stronę i logicznie strukturuj resztę nagłówków.
• Znacznik : Pamiętaj o unikalnym, opisowym i zawierającym słowa kluczowe tytule dla każdej strony.
• Meta tag description: Chociaż nie ma bezpośredniego wpływu na ranking, to dobry opis zachęca użytkowników do kliknięcia w wynikach wyszukiwania. Umieść go w sekcji , np. .
• Atrybuty alt dla obrazów: Zawsze uzupełniaj tekst alternatywny dla każdego obrazu, opisując jego zawartość.
• Semantyczne znaczniki HTML5: Używaj znaczników takich jak
  , ,
  ,
  , , aby nadać strukturę stronie, co pomaga wyszukiwarkom zrozumieć jej zawartość.

Przeczytaj również: Pierwsza strona WWW w Notepad++? Prosty poradnik HTML od zera!

Od komputera do internetu: Czym są domena i hosting i jak opublikować swoją stronę?

Stworzyłeś swoją pierwszą stronę na komputerze, ale jak sprawić, żeby inni mogli ją zobaczyć w internecie? Do tego potrzebne są dwa elementy: domena i hosting. Domena to unikalny adres Twojej strony (np. www.mojastrona.pl), który kupujesz i rejestrujesz. Hosting to usługa polegająca na wynajęciu miejsca na serwerze, gdzie będą przechowywane wszystkie pliki Twojej strony (HTML, CSS, obrazy). Po zakupie domeny i hostingu, będziesz musiał przesłać swoje pliki na serwer, najczęściej za pomocą protokołu FTP (File Transfer Protocol) i specjalnego programu (np. FileZilla). To już kolejny etap Twojej przygody, ale pamiętaj, że stworzenie strony w HTML to pierwszy i najważniejszy krok do posiadania własnego miejsca w sieci!