Stworzenie pierwszej strony internetowej w HTML może wydawać się skomplikowane, ale w rzeczywistości jest to prostsze, niż myślisz. Ten artykuł to Twój praktyczny przewodnik, który krok po kroku pokaże Ci, jak zbudować swoją pierwszą, prostą stronę, używając wyłącznie języka HTML. To fundamentalna umiejętność, która otwiera drzwi do świata web developmentu, a my zaczniemy od absolutnych podstaw od zera.

Dlaczego HTML to absolutny fundament, który musisz poznać, by wejść do świata stron WWW?

Zanim zagłębimy się w techniczne detale, warto zrozumieć, dlaczego HTML jest tak ważny. To właśnie HTML stanowi szkielet każdej strony internetowej, którą widzisz na co dzień. Bez niego nie istniałaby żadna witryna, od prostego bloga po skomplikowane portale informacyjne. Poznanie HTML to pierwszy i absolutnie kluczowy krok dla każdego, kto marzy o tworzeniu własnych stron internetowych lub zrozumieniu, jak działa internet.

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

HTML, czyli HyperText Markup Language (język znaczników hipertekstowych), to podstawowy budulec stron internetowych. Jego głównym zadaniem jest strukturyzowanie treści. Wyobraź sobie go jako zestaw instrukcji, które mówią przeglądarce, które fragmenty tekstu są nagłówkami, które akapitami, a które linkami czy obrazkami. Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania. Nie wykonuje on żadnych obliczeń ani skomplikowanych operacji logicznych. Jego rola ogranicza się do opisywania i organizowania elementów na stronie.

Szkielet, ściany i dach – jak HTML, CSS i JavaScript budują stronę internetową?

Aby lepiej zrozumieć rolę HTML, możemy użyć analogii z budową domu. HTML to szkielet podstawa, która nadaje kształt i strukturę całej konstrukcji. Bez niego nie ma nic. Kiedy szkielet jest już gotowy, przychodzi czas na CSS (Cascading Style Sheets), który można porównać do ścian, dachu i elewacji. CSS odpowiada za wygląd strony kolory, czcionki, układ elementów, marginesy i wszystko, co sprawia, że strona jest estetyczna i przyjemna dla oka. Na końcu mamy JavaScript, który jest jak instalacje elektryczne, hydrauliczne i systemy w domu. JavaScript dodaje interaktywność i dynamiczne zachowania sprawia, że strona reaguje na działania użytkownika, wyświetla animacje, przetwarza formularze i wiele więcej. Ten artykuł skupia się jednak na budowaniu tego fundamentalnego "szkieletu" czyli na samym HTML.

Czego potrzebujesz, by zacząć? Przygotowanie warsztatu pracy w 5 minut

Zacznijmy od tego, co najważniejsze narzędzi. Dobra wiadomość jest taka, że do stworzenia swojej pierwszej strony HTML nie potrzebujesz drogiego ani skomplikowanego oprogramowania. Wszystko, czego potrzebujesz, masz prawdopodobnie już pod ręką lub możesz to zdobyć w mgnieniu oka. Skupimy się na tym, co pozwoli Ci od razu zacząć kodować i widzieć efekty swojej pracy.

Zwykły Notatnik czy zaawansowany edytor kodu? Co wybrać na start?

Kiedy zaczynasz swoją przygodę z kodowaniem, możesz wybrać między dwoma rodzajami narzędzi do pisania kodu: prostym edytorem tekstu, takim jak Notatnik (wbudowany w system Windows) lub TextEdit (na macOS), a bardziej zaawansowanym edytorem kodu, jak Visual Studio Code (VS Code), Sublime Text czy Atom. Na samym początku, gdy uczysz się podstaw HTML, zwykły Notatnik jest absolutnie wystarczający. Pozwala on skupić się wyłącznie na pisaniu kodu, bez rozpraszania się dodatkowymi funkcjami, które oferują zaawansowane edytory. Kiedy nabierzesz wprawy i będziesz chciał tworzyć bardziej złożone projekty, wtedy warto zainteresować się tymi bardziej rozbudowanymi narzędziami, które oferują podświetlanie składni, autouzupełnianie kodu i wiele innych udogodnień.

Przeglądarka internetowa – Twoje okno na cyfrowy świat

Drugim, równie ważnym elementem Twojego warsztatu pracy jest przeglądarka internetowa. Niezależnie od tego, czy używasz Google Chrome, Mozilla Firefox, Microsoft Edge, Safari czy innej, przeglądarka jest narzędziem, które interpretuje Twój kod HTML i wyświetla go w formie, którą widzisz na ekranie. To właśnie w przeglądarce będziesz podglądać efekty swojej pracy, sprawdzać, czy wszystko działa poprawnie i wprowadzać ewentualne poprawki. Bez przeglądarki nie zobaczysz swojej strony, więc jest ona absolutnie kluczowa.

Twoja pierwsza strona HTML – przewodnik krok po kroku

Teraz, gdy masz już przygotowane narzędzia, czas na praktykę! Przejdziemy przez proces tworzenia prostej strony HTML krok po kroku. Nie martw się, jeśli nie rozumiesz wszystkiego od razu kluczem jest praktyka i eksperymentowanie.

Krok 1: Stworzenie pliku, który zrozumie każda przeglądarka

Pierwszym krokiem jest utworzenie pliku, w którym umieścisz swój kod HTML. Otwórz wybrany edytor tekstu (najlepiej zacznij od Notatnika). Następnie, gdy już napiszesz swój kod (na razie pusty lub z podstawową strukturą), musisz go zapisać. Kluczowe jest nadanie plikowi odpowiedniego rozszerzenia. Zapisz go jako plik tekstowy, ale zamiast domyślnego `.txt`, użyj rozszerzenia `.html` lub `.htm`. Na przykład, możesz nazwać swój plik `moja_pierwsza_strona.html`. To właśnie to rozszerzenie informuje system operacyjny i przeglądarkę, że masz do czynienia ze stroną internetową.

Krok 2: Niezbędny szkielet, czyli deklaracja `! DOCTYPE` i struktura `html`, `head` i `body`

Każdy dokument HTML5 powinien zaczynać się od kilku podstawowych elementów, które tworzą jego strukturę. To jak fundament i ściany budynku. Oto one:

1. <! DOCTYPE html>: Ta linijka na samym początku pliku informuje przeglądarkę, że dokument jest napisany w najnowszej wersji HTML, czyli HTML5. Jest to standard, który zapewnia poprawne wyświetlanie strony.
2. : To główny znacznik, który obejmuje całą zawartość Twojej strony internetowej. Wszystko, co znajduje się na stronie, musi być umieszczone wewnątrz tego znacznika.
3. : Sekcja nagłówka zawiera informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek. Znajdują się tu metadane, tytuł strony czy linki do zewnętrznych plików stylów.
4. : To serce Twojej strony. Wszystko, co użytkownik zobaczy na ekranie tekst, obrazy, linki, tabele umieszcza się wewnątrz znacznika ``.

Oto przykład podstawowego szkieletu Twojej pierwszej strony HTML:

<! DOCTYPE html>

 

 

Krok 3: Nadajemy tożsamość – jak ustawić tytuł strony i polskie znaki w sekcji `head`?

Teraz uzupełnimy sekcję `

1. : Znacznik `title` określa tytuł strony, który pojawia się na karcie przeglądarki lub w zakładce. To ważny element, który pomaga użytkownikom zorientować się, na jakiej stronie się znajdują.
2. : Ten znacznik jest absolutnie niezbędny, jeśli chcesz, aby polskie znaki diakrytyczne (takie jak ą, ę, ć, ł, ń, ó, ś, ź, ż) wyświetlały się poprawnie. Określa on kodowanie znaków, używając standardu UTF-8, który obsługuje szeroką gamę znaków z różnych języków.

Oto jak będzie wyglądać Twoja sekcja `

Krok 4: Czas na treść! Tworzymy pierwszy nagłówek i akapit w sekcji `body`

Przejdźmy teraz do sekcji `

• Witaj na mojej stronie!

  : Znacznik `

  ` służy do zdefiniowania najważniejszego nagłówka na stronie. Powinien on pojawić się tylko raz i najlepiej opisuje główną treść strony.

• To jest mój pierwszy akapit tekstu napisanego w HTML. Jestem podekscytowany, że mogę tworzyć własne strony internetowe!

  : Znacznik `

  ` definiuje akapit tekstu. Używamy go do grupowania zdań w logiczne bloki.

Oto jak może wyglądać Twoja sekcja `

 
Witaj na mojej stronie!
 
To jest mój pierwszy akapit tekstu napisanego w HTML. Jestem podekscytowany, że mogę tworzyć własne strony internetowe!

Połączając wszystko, Twój kompletny kod dla pierwszej strony będzie wyglądał tak:

<! DOCTYPE html>

  

 
Witaj na mojej stronie!
 
To jest mój pierwszy akapit tekstu napisanego w HTML. Jestem podekscytowany, że mogę tworzyć własne strony internetowe!

Krok 5: Zapisz i zobacz efekt! Jak otworzyć swoje dzieło w przeglądarce?

Ostatnim krokiem jest zapisanie pliku (upewnij się, że ma rozszerzenie `.html` lub `.htm`) i zobaczenie efektu swojej pracy. Znajdź zapisany plik na swoim komputerze i po prostu kliknij go dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej. Alternatywnie, możesz otworzyć przeglądarkę, a następnie przeciągnąć ikonę pliku HTML bezpośrednio do okna przeglądarki. Podziwiaj! Widzisz teraz swoją pierwszą stronę internetową. To niesamowite uczucie, prawda?

Jak ożywić stronę? Kluczowe znaczniki HTML, które musisz znać

Stworzyliśmy już podstawową strukturę i dodaliśmy tekst. Ale strony internetowe to coś więcej niż tylko nagłówki i akapity. HTML oferuje wiele innych znaczników, które pozwalają na dodawanie różnorodnych treści. Oto kilka najważniejszych, które powinieneś znać:

Hierarchia jest ważna: Jak używać nagłówków od H1 do H6?

Używaliśmy już znacznika `

` do stworzenia głównego nagłówka. W HTML dostępne są również nagłówki od `

` do ``. Służą one do tworzenia hierarchii treści na stronie.

jest najważniejszy i powinien być użyty tylko raz. Następnie używamy

dla głównych sekcji,

dla podsekcji i tak dalej, aż do

. Pomaga to zarówno użytkownikom, jak i wyszukiwarkom zrozumieć strukturę i ważność poszczególnych fragmentów tekstu.

Przykład użycia nagłówków:

Główny tytuł strony
Sekcja pierwsza
Treść w sekcji pierwszej.
Podsekcja w sekcji pierwszej
Treść w podsekcji.
Sekcja druga
Treść w sekcji drugiej.

Tworzenie połączeń – czyli jak dodać klikalny link do innej strony?

Linki, czyli hiperłącza, są sercem sieci WWW. Pozwalają na nawigację między stronami. W HTML służy do tego znacznik (od "anchor" - kotwica). Kluczowym elementem tego znacznika jest atrybut href, który określa adres URL, do którego link ma prowadzić.

Przykład stworzenia linku do strony Google:

Odwiedź stronę Google, aby dowiedzieć się więcej.

Tekst "Google" między znacznikami i będzie klikalnym linkiem.

Obraz wart więcej niż tysiąc słów: Wstawianie grafiki za pomocą znacznika `img`

Obrazy ożywiają strony internetowe. W HTML służy do tego znacznik . Jest to znacznik "samozamykający", co oznacza, że nie potrzebuje on osobnego znacznika zamykającego. Najważniejsze atrybuty tego znacznika to:

• src (source): Określa ścieżkę do pliku obrazu. Może to być adres URL lub ścieżka do pliku na Twoim komputerze.
• alt (alternative text): Tekst alternatywny, który wyświetli się, jeśli obrazek się nie załaduje, a także jest odczytywany przez czytniki ekranu dla osób niedowidzących. Jest to również ważne dla wyszukiwarek.

Przykład wstawienia obrazka (zakładając, że plik `moj_obrazek.jpg` znajduje się w tym samym folderze co plik HTML):

Porządkowanie informacji: Kiedy używać list wypunktowanych, a kiedy numerowanych?

Listy są doskonałym sposobem na prezentowanie grup powiązanych informacji. W HTML mamy dwa główne typy list:

• (unordered list): Lista wypunktowana. Używamy jej, gdy kolejność elementów nie ma znaczenia, na przykład lista zakupów czy cechy produktu.
• (ordered list): Lista numerowana. Stosujemy ją, gdy kolejność elementów jest ważna, na przykład kroki przepisu kulinarnego lub instrukcje.

Każdy element listy definiujemy za pomocą znacznika

 
Pierwszy krok
 
Drugi krok
 
Trzeci krok