`, ``, `

` i ``.

HTML najlepszy start w tworzeniu stron internetowych

Moim zdaniem, jeśli dopiero zaczynasz swoją przygodę z tworzeniem stron internetowych, HTML jest absolutnie najlepszym pierwszym krokiem. To fundament, na którym opiera się każda witryna w sieci. Zrozumienie HTML-a pozwoli Ci pojąć, jak treści są strukturyzowane i prezentowane w przeglądarce, zanim przejdziesz do bardziej złożonych zagadnień, takich jak stylizowanie (CSS) czy interaktywność (JavaScript).

Czym jest HTML i dlaczego nie jest to język programowania?

HTML to skrót od HyperText Markup Language, czyli hipertekstowy język znaczników. Jego głównym zadaniem jest strukturyzowanie treści na stronie internetowej. Pomyśl o nim jak o szkielecie to on decyduje, gdzie znajdzie się nagłówek, gdzie akapit tekstu, a gdzie obrazek. Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania. Nie służy do tworzenia logiki, wykonywania obliczeń czy interakcji z użytkownikiem w sposób dynamiczny. Zamiast tego, używasz go do "opisywania" elementów strony za pomocą znaczników (tagów), które przeglądarka interpretuje i wyświetla w odpowiedni sposób.

Co zbudujesz po przeczytaniu tego przewodnika (i czego NIE zbudujesz)?

Po przejściu przez ten przewodnik będziesz w stanie stworzyć swoją pierwszą, prostą stronę internetową. Będziesz umiał dodać nagłówki, akapity tekstu, wstawić obrazy, stworzyć linki do innych stron oraz uporządkować informacje za pomocą list. Będzie to strona statyczna, co oznacza, że jej zawartość nie będzie się zmieniać bez Twojej edycji.

Czego natomiast sam HTML nie jest w stanie zrobić? Nie stworzysz za jego pomocą zaawansowanych animacji, dynamicznych formularzy, które wysyłają dane do serwera, ani interaktywnych elementów, takich jak rozwijane menu czy galerie zdjęć z efektami. Do tego potrzebne są kolejne technologie: CSS (do stylizowania i nadawania wyglądu) oraz JavaScript (do dodawania interaktywności i dynamicznych funkcji). Ale spokojnie, HTML to solidna podstawa, od której warto zacząć!

Narzędzia na start co będzie Ci potrzebne?

Zanim zaczniemy pisać kod, potrzebujemy kilku podstawowych narzędzi. Dobra wiadomość jest taka, że prawdopodobnie już je masz lub możesz je zdobyć za darmo. Nie potrzebujesz niczego skomplikowanego, aby rozpocząć swoją przygodę z HTML-em.

Edytor kodu Twój cyfrowy warsztat (Notatnik vs. darmowy Visual Studio Code)

Edytor kodu to miejsce, w którym będziesz pisać swój kod HTML. Technicznie rzecz biorąc, możesz użyć nawet prostego systemowego Notatnika (Windows) lub TextEdit (macOS), ale ja zdecydowanie odradzam to na dłuższą metę. Dlaczego? Ponieważ zaawansowane edytory kodu oferują mnóstwo udogodnień, które znacznie przyspieszą i ułatwią Twoją pracę. Mówię tu o podświetlaniu składni (kolorowanie kodu, co ułatwia czytanie), autouzupełnianiu, sprawdzaniu błędów i wielu innych funkcjach. Moje rekomendacje darmowych edytorów kodu to:

• Visual Studio Code (VS Code): To mój osobisty faworyt i najpopularniejszy edytor na świecie. Jest darmowy, potężny i ma ogromną społeczność.
• Sublime Text: Szybki, lekki i bardzo konfigurowalny.
• Atom: Stworzony przez GitHub, również darmowy i rozbudowany.

Pobierz jeden z nich i zainstaluj to będzie Twój cyfrowy warsztat!

Przeglądarka internetowa Twoje okno na cyfrowy świat

Drugim absolutnie niezbędnym narzędziem jest przeglądarka internetowa. 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 jako stronę internetową. Nie musisz niczego instalować, jeśli już masz jedną z popularnych przeglądarek. Ważne jest, aby testować swoje strony w różnych przeglądarkach, ponieważ każda z nich może nieco inaczej interpretować kod, choć w przypadku podstawowego HTML-a różnice będą minimalne. Popularne przeglądarki to:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari (dla użytkowników macOS)

Anatomia strony HTML poznaj jej budowę

Każda strona HTML, którą stworzysz, ma swoją podstawową, powtarzalną strukturę, którą lubię nazywać "szkieletem". Zrozumienie tego szkieletu jest kluczowe, ponieważ to on decyduje, gdzie umieścić poszczególne elementy Twojej witryny.

Magiczna pierwsza linia: Co oznacza deklaracja ``?

Pierwsza linia każdego dokumentu HTML to zawsze ``. Może wydawać się tajemnicza, ale jej rola jest prosta: informuje przeglądarkę, że ma do czynienia z dokumentem HTML w wersji 5 (HTML5). Jest to bardzo ważne, ponieważ dzięki temu przeglądarka wie, jak prawidłowo renderować Twoją stronę, stosując najnowsze standardy. Zawsze zaczynaj swój plik HTML od tej deklaracji!

Szkielet Twojej strony: Rola znaczników ``, `` i ``

Po deklaracji `` następuje główny element, który obejmuje całą Twoją stronę znacznik ``. W jego wnętrzu znajdują się dwa kluczowe elementy, które dzielą zawartość na to, co widoczne, i to, co niewidoczne dla użytkownika:

• ``: To element główny, który obejmuje całą zawartość strony. Wszystko, co stworzysz, znajdzie się wewnątrz tego znacznika.
• ``: Ta sekcja zawiera metadane o stronie informacje, które nie są bezpośrednio widoczne dla użytkownika w oknie przeglądarki, ale są kluczowe dla jej działania. Znajdują się tu takie rzeczy jak tytuł strony (widoczny na karcie przeglądarki), linki do arkuszy stylów CSS, skryptów JavaScript, czy informacje dla wyszukiwarek.
• ``: To serce Twojej strony, gdzie umieszczasz całą widoczną zawartość. Wszystko, co użytkownik zobaczy na ekranie tekst, obrazy, linki, listy znajdzie się właśnie tutaj.

Oto jak wygląda podstawowy szkielet, który będziesz wykorzystywać:

Zauważ atrybut `lang="pl"` w znaczniku ``. Informuje on przeglądarkę i wyszukiwarki, że język treści strony to polski. To dobra praktyka!

Niewidoczni bohaterowie w sekcji ``: Tytuł strony i podstawowe meta tagi

Jak wspomniałem, sekcja `

` zawiera informacje niewidoczne dla użytkownika, ale bardzo ważne. Najważniejszym elementem, który zawsze powinien się tam znaleźć, jest znacznik `

Znacznik `` jest również bardzo ważny w dzisiejszych czasach, ponieważ pomaga przeglądarce prawidłowo skalować stronę na różnych urządzeniach (np. smartfonach). Na razie nie musisz wnikać w jego szczegóły, po prostu go dodaj.

Budujemy pierwszą stronę WWW praktyczny przewodnik

Teraz, gdy znasz już podstawową anatomię dokumentu HTML, nadszedł czas, aby zakasać rękawy i zacząć pisać swój pierwszy kod! Krok po kroku zbudujemy prostą stronę, dodając do niej podstawowe elementy.

Zaczynamy od pliku: Jak stworzyć i zapisać swój pierwszy plik `index. html`?

Zacznijmy od stworzenia pliku, w którym będziesz pisać swój kod:

1. Otwórz swój edytor kodu (np. Visual Studio Code).
2. Wybierz opcję "Nowy plik" (zazwyczaj File > New File).
3. Zapisz plik (File > Save As...). Nadaj mu nazwę index.html. To standardowa nazwa dla głównej strony w katalogu, którą przeglądarki automatycznie próbują otworzyć. Upewnij się, że rozszerzenie to .html, a nie .txt!
4. Utwórz w tym samym miejscu folder o nazwie images. Będziemy tam przechowywać nasze obrazki.

Teraz masz już gotowy plik do pracy. Wklej do niego podstawowy szkielet HTML, który poznałeś wcześniej.

Nagłówki, które mają znaczenie: Hierarchia od `` do ``

Nagłówki służą do strukturyzowania treści i nadawania jej hierarchii. Pomyśl o nich jak o tytułach rozdziałów i podrozdziałów w książce. HTML oferuje sześć poziomów nagłówków: od `

` (najważniejszy, główny tytuł strony) do `

` (najmniej ważny, podtytuł). Używaj ich semantycznie, czyli zgodnie z ich znaczeniem, a nie tylko dla uzyskania większej czcionki to ważne dla SEO i dostępności.

 
Witaj na Mojej Pierwszej Stronie!
 
O mnie
 
Cześć! Jestem Łukasz i uczę się HTML.
 
Moje zainteresowania
 
Technologia
 
Programowanie
 
Web Development

Dodajemy treść: Jak formatować tekst za pomocą paragrafów `

`?

Podstawowym znacznikiem do umieszczania tekstu na stronie jest znacznik `

`, czyli paragraf. Każdy blok tekstu, który chcesz wyświetlić jako osobny akapit, powinien być otoczony tymi znacznikami. Przeglądarka automatycznie doda odstęp przed i po każdym paragrafie, co poprawia czytelność.

 
Moja Strona WWW
 
Witaj na mojej nowej stronie internetowej! To jest pierwszy akapit mojego tekstu.
 
Uczę się HTML-a i jestem bardzo podekscytowany możliwościami, jakie daje mi tworzenie w sieci.

Obraz wart tysiąca słów: Wstawianie grafiki znacznikiem `` (i dlaczego atrybut `alt` jest kluczowy)

Strony internetowe to nie tylko tekst! Aby wstawić obrazek, używamy znacznika ``. Jest to znacznik samo domykający się, co oznacza, że nie ma znacznika zamykającego ``. Kluczowe są tutaj dwa atrybuty:

• `src` (source): Określa ścieżkę do pliku graficznego. Może to być ścieżka względna (np. `images/moj_obrazek.jpg`, jeśli obrazek jest w folderze `images` obok pliku HTML) lub bezwzględna (pełny adres URL do obrazka w internecie).
• `alt` (alternative text): To absolutnie kluczowy atrybut! Zawiera tekstowy opis obrazka. Jest on wyświetlany, gdy obrazek nie może zostać załadowany, ale co ważniejsze, jest czytany przez czytniki ekranowe dla osób niewidomych lub niedowidzących. Ma też znaczenie dla SEO, pomagając wyszukiwarkom zrozumieć zawartość obrazka. Nigdy nie pomijaj atrybutu `alt`!

 
Moja Strona WWW
 
Witaj na mojej nowej stronie internetowej!
  
To jest moje zdjęcie. Mam nadzieję, że Ci się podoba!

Atrybuty `width` i `height` służą do określenia szerokości i wysokości obrazka w pikselach. To dobra praktyka, aby przeglądarka mogła zarezerwować odpowiednie miejsce na obrazek, zanim ten się załaduje.

Łączymy świat: Tworzenie linków za pomocą znacznika ``

Hiperłącza (linki) to esencja internetu. Pozwalają one użytkownikom przechodzić między stronami. Tworzymy je za pomocą znacznika `` (anchor). Najważniejszym atrybutem jest `href` (hypertext reference), który wskazuje adres docelowy linku.

 
Moja Strona WWW
 
Odwiedź moją ulubioną wyszukiwarkę: Google.
 
Sprawdź też więcej moich projektów na stronie z projektami.

Pierwszy link prowadzi do zewnętrznej strony (pełny adres URL), drugi do innej strony w ramach Twojej witryny (ścieżka względna). Pamiętaj, że plik `moje_projekty.html` musiałby istnieć w tym samym katalogu co `index.html`.

Porządkujemy informacje: Listy punktowane `` i numerowane ` `

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

• `
  ` (unordered list)
  : Lista nieuporządkowana, czyli punktowana. Każdy element listy jest oznaczony domyślnie kropką.
• `
  ` (ordered list)
  : Lista uporządkowana, czyli numerowana. Każdy element listy jest oznaczony liczbą.

W obu przypadkach poszczególne elementy listy umieszczamy w znacznikach `

` (list item).

 
Moja Strona WWW
 
Moje ulubione języki programowania:
 
 
HTML (oczywiście!)
 
CSS
 
JavaScript
 
 
Kroki do stworzenia strony:
 
 
Napisz kod HTML
 
Dodaj style CSS
 
Dopracuj interakcje JavaScript
 

Zobacz swoją pracę jak otworzyć plik HTML w przeglądarce?

Stworzyłeś już swój pierwszy kod HTML! Teraz pewnie zastanawiasz się, jak zobaczyć efekty swojej pracy w przeglądarce. To bardzo proste:

1. Otwórz folder, w którym zapisałeś plik index.html.
2. Znajdź plik index.html.
3. Kliknij dwukrotnie na ten plik. Domyślnie powinien otworzyć się w Twojej przeglądarce internetowej.

Alternatywnie, możesz otworzyć przeglądarkę, a następnie przeciągnąć plik index.html bezpośrednio do okna przeglądarki. W Visual Studio Code często wystarczy kliknąć prawym przyciskiem myszy na plik w eksploratorze plików i wybrać "Open with Live Server" (jeśli masz zainstalowane odpowiednie rozszerzenie), co jest bardzo wygodne, bo strona odświeża się automatycznie po każdej zmianie w kodzie.

Co dalej po HTML-u? Rozwijaj swoje umiejętności!

Gratulacje! Opanowałeś podstawy HTML-a i wiesz, jak zbudować szkielet strony. To ogromny krok naprzód. Jednak, jak już wspomniałem, sam HTML to dopiero początek. Aby Twoje strony były nowoczesne, estetyczne i interaktywne, musisz poznać kolejne technologie. Pomyśl o tym jak o budowie domu masz już fundamenty i ściany, ale brakuje wykończenia i instalacji.

CSS czyli jak nadać swojej stronie styl i kolory

Jeśli HTML to szkielet Twojej strony, to CSS (Cascading Style Sheets) jest jej ubraniem i wystrojem wnętrz. To dzięki CSS możesz nadać swojej stronie kolory, zmienić czcionki, ustawić rozmiary elementów, rozmieszczać je na stronie (np. obok siebie, a nie tylko jeden pod drugim), dodawać tła, cienie i wiele, wiele więcej. Bez CSS strona HTML wygląda bardzo surowo i nieatrakcyjnie. Nauka CSS to kolejny, naturalny krok po opanowaniu HTML-a, który pozwoli Ci tworzyć strony, które naprawdę przyciągają wzrok.

JavaScript czyli jak ożywić stronę i dodać jej interaktywności

Kiedy masz już szkielet (HTML) i ubranie (CSS), czas na "mięśnie i układ nerwowy" czyli JavaScript. To właśnie JavaScript sprawia, że strony internetowe stają się dynamiczne i interaktywne. Dzięki niemu możesz tworzyć rozwijane menu, formularze, które sprawdzają poprawność danych, animacje, gry, a nawet całe aplikacje webowe. JavaScript pozwala Twojej stronie reagować na działania użytkownika, co jest kluczowe dla współczesnych, angażujących doświadczeń online.

Pokaż światu swoją stronę darmowy hosting dla początkujących

Stworzyłeś swoją pierwszą stronę, widziałeś ją w przeglądarce, ale co dalej? Chciałbyś, żeby inni też mogli ją zobaczyć! Na szczęście, aby opublikować prostą, statyczną stronę HTML, nie musisz wydawać pieniędzy na płatny hosting. Istnieje wiele darmowych opcji, które są idealne dla początkujących.

GitHub Pages: Idealne i darmowe rozwiązanie dla początkujących

Moim zdaniem, GitHub Pages to najlepsze i najprostsze darmowe rozwiązanie do hostowania statycznych stron internetowych dla początkujących. Jeśli planujesz rozwijać się w kierunku web developmentu, i tak prędzej czy później poznasz Git i GitHub (system kontroli wersji i platforma do współpracy). GitHub Pages pozwala Ci opublikować Twoją stronę bezpośrednio z repozytorium Git. Jest to nie tylko darmowe, ale także uczy dobrych praktyk związanych z kontrolą wersji. Wystarczy, że umieścisz swój kod w repozytorium i wykonasz kilka prostych kroków konfiguracji, a Twoja strona będzie dostępna pod adresem URL typu `twojanazwa.github.io/nazwa-repozytorium/`.

Krótki przegląd innych prostych platform hostingowych

Oprócz GitHub Pages, istnieje kilka innych świetnych, darmowych platform, które również pozwalają na łatwe publikowanie statycznych stron. Są to:

• Netlify: Bardzo popularne i proste w użyciu, z intuicyjnym interfejsem.
• Vercel: Podobnie jak Netlify, oferuje szybkie wdrożenia i świetne narzędzia dla deweloperów.
• Cloudflare Pages: Kolejna solidna opcja, szczególnie jeśli już korzystasz z usług Cloudflare.

Wszystkie te platformy oferują bardzo podobne funkcjonalności i są doskonałym wyborem do hostowania Twoich pierwszych projektów.

Uniknij pułapek najczęstsze błędy początkujących

Każdy na początku popełnia błędy to naturalna część procesu nauki. Chcę Ci jednak pomóc uniknąć tych najczęstszych, które mogą frustrować i spowalniać Twoją naukę. Zwróć szczególną uwagę na poniższe kwestie.

Błąd nr 1: Niezamykanie znaczników

To chyba najczęstszy błąd, jaki widzę u początkujących. Pamiętaj, że większość znaczników HTML ma swój znacznik otwierający (np. `

`) i zamykający (

). Niezamknięcie znacznika może prowadzić do dziwnego, nieprzewidywalnego układu strony, ponieważ przeglądarka będzie próbowała "zgadnąć", gdzie dany element się kończy. Zawsze sprawdzaj, czy każdy otwarty znacznik ma swój odpowiednik zamykający (chyba że jest to znacznik samo domykający się, jak `` czy `
`).

Błędny kod:

To jest akapit.
To jest kolejny akapit, ale poprzedni nie został zamknięty!

Poprawny kod:

To jest akapit.
To jest kolejny akapit, poprawnie zamknięty.

Błąd nr 2: Błędne ścieżki do plików graficznych

Często zdarza się, że obrazki nie wyświetlają się na stronie, a powodem jest błędna ścieżka w atrybucie `src` znacznika ``. Upewnij się, że:

• Nazwa pliku w `src` jest dokładnie taka sama jak nazwa pliku obrazka (wielkość liter ma znaczenie!).
• Ścieżka do pliku jest poprawna. Jeśli obrazek jest w folderze `images` obok pliku HTML, ścieżka powinna wyglądać tak: `images/nazwa_pliku.jpg`. Jeśli obrazek jest w tym samym folderze co plik HTML, wystarczy `nazwa_pliku.jpg`.

Błędna ścieżka: (załóżmy, że plik to `zdjecie.jpg` w folderze `images`)

Poprawna ścieżka:

Błąd nr 3: Ignorowanie hierarchii nagłówków

Pamiętasz, jak mówiłem o semantyce nagłówków? To bardzo ważne! Początkujący często używają nagłówków `

`, `` itd. tylko dlatego, że chcą uzyskać mniejszą czcionkę, ignorując ich znaczenie hierarchiczne. To błąd! Zawsze używaj `` dla najważniejszego tytułu, następnie `` dla głównych sekcji, `` dla podsekcji itd. Nie przeskakuj poziomów (np. z `` od razu do ``). Jest to kluczowe dla dostępności (czytniki ekranowe polegają na tej hierarchii) i dla SEO (wyszukiwarki lepiej rozumieją strukturę Twojej strony).

Błędne użycie:

Główny tytuł
Podtytuł, bo chciałem mniejszą czcionkę

Poprawne użycie:

Główny tytuł
Pierwsza sekcja
Przeczytaj również: Tabele HTML: Twórz, stylizuj i scalaj dane responsywnie
Podsekcja w pierwszej sekcji

Jeśli chcesz zmienić rozmiar czcionki nagłówka, użyj do tego CSS, a nie zmieniaj jego poziomu hierarchii!