Nie instaluje się HTML w tradycyjnym sensie – HTML to język znaczników, który interpretują przeglądarki internetowe. Aby rozpocząć korzystanie z HTML, wystarczy odpowiedni edytor tekstowy i dowolna przeglądarka, która wyświetli rezultat twojej pracy. Poniżej znajduje się poradnik krok po kroku, jak zacząć oraz przykłady najczęstszych zastosowań:
Czym jest HTML?
HTML (HyperText Markup Language) to podstawowy język używany do tworzenia stron internetowych. Pozwala zdefiniować strukturę i zawartość strony – nagłówki, paragrafy, tabele, obrazy, linki i wiele innych elementów.
Co jest potrzebne do pracy z HTML?
- Edytor tekstowy – np. Notatnik (Windows), TextEdit (macOS), lub zaawansowany edytor jak Visual Studio Code, Sublime Text czy Atom;
- Przeglądarka internetowa – np. Chrome, Firefox, Safari, Edge.
Nie potrzeba żadnej instalacji dodatkowego programu do „obsługi” HTML.
Instalacja edytora kodu (na przykładzie Visual Studio Code)
Wybierz jeden z darmowych i popularnych edytorów, np. Visual Studio Code –
- Pobierz instalator ze strony producenta,
- Uruchom pobrany plik i postępuj zgodnie z instrukcjami instalatora (wybierz język, zaakceptuj licencję, wybierz miejsce instalacji, klikaj „Next”, a na koniec „Install”),
- Po zakończeniu uruchom edytor.
Tworzenie pierwszego pliku HTML
- Otwórz edytor tekstowy,
- Utwórz nowy plik i zapisz go z rozszerzeniem .html (np.
index.html).
Przykładowa, najprostsza struktura dokumentu HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj w świecie HTML!</h1>
<p>To jest mój pierwszy dokument HTML.</p>
</body>
</html>
Wyświetlanie strony HTML w przeglądarce
- Odszukaj plik HTML na swoim komputerze,
- Dwukrotnie kliknij plik – otworzy się on w domyślnej przeglądarce internetowej,
- Alternatywnie, przeciągnij plik do otwartego okna przeglądarki.
Przykłady zastosowań HTML
HTML wykorzystywany jest do:
- Tworzenia prostych i zaawansowanych stron www (np. blogi, portfolio, strony firmowe);
- Wyświetlania tekstu, obrazów, linków;
- Embedowania filmów, muzyki i map;
- Tworzenia formularzy kontaktowych;
- Strukturyzowania oraz formatowania treści.
Przykłady kodu HTML
Lista elementów –
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>
Wstawianie obrazka –
<img src="obrazek.jpg" alt="Opis obrazka">
Link do innej strony –
<a href="https://twojastrona.pl">Przejdź na moją stronę!</a>
Rozszerzenia i personalizacje
HTML możesz rozwijać i uatrakcyjniać dzięki:
- CSS – odpowiada za wygląd strony (kolory, czcionki, układ);
- JavaScript – służy do dodawania interaktywności (np. animacje, dynamiczne zmiany treści).
Podstawowe wskazówki dla początkujących
- Używaj dobrych praktyk nazewnictwa plików i folderów,
- Przeglądaj kod źródłowy innych stron („Wyświetl źródło strony” w przeglądarce),
- Korzystaj z narzędzi programistycznych w przeglądarce (DevTools) do nauki i testowania.
Podsumowanie
Aby rozpocząć przygodę z HTML, wystarczy edytor tekstowy i przeglądarka. Po przygotowaniu pliku HTML możesz go natychmiast wyświetlić i zobaczyć efekt swojej pracy. Rozwijając umiejętności, dodaj CSS i JavaScript, aby tworzyć coraz bardziej zaawansowane projekty.
