Aby zacząć programować w HTML, nie potrzeba specjalistycznego sprzętu ani płatnego oprogramowania – wystarczy komputer, podstawowy edytor tekstu (np. Notepad, Notepad++, VS Code, Sublime Text) oraz przeglądarka internetowa, w której można natychmiast zobaczyć efekty pracy.
Czym jest HTML?
HTML (HyperText Markup Language) to język opisu struktury stron internetowych. Dzięki HTML określasz, które części Twojej strony są nagłówkiem, akapitem, listą, tabelą, obrazkiem itp. Przeglądarka internetowa interpretuje kod HTML i wyświetla go użytkownikowi w postaci wizualnej strony.
Podstawy – od czego zacząć?
-
Zainstaluj edytor kodu
Najlepiej zacząć od wygodnego edytora tekstu – na początek wystarczy prosty Notatnik, Notepad++, Visual Studio Code lub Sublime Text. Edytory te pomagają w czytelniejszym pisaniu kodu i czasem podpowiadają składnię.
-
Poznaj strukturę dokumentu HTML
Najprostszy dokument HTML wygląda tak:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
</head>
<body>
<h1>To jest nagłówek</h1>
<p>To jest akapit tekstu.</p>
</body>
</html>
Każdy dokument HTML otacza zawartość parą znaczników <html>...</html>. Wewnątrz znajdują się sekcje <head> (informacje o stronie, niewidoczne dla użytkownika) oraz <body> (właściwa zawartość strony).
-
Naucz się znaczenia podstawowych znaczników
- Nagłówki –
<h1>do<h6>– od największego do najmniejszego; - Akapity –
<p>Tekst akapitu</p>; - Listy – uporządkowane
<ol>, nieuporządkowane<ul>, elementy listy<li>; - Obrazy –
<img src="adres.jpg" alt="opis obrazka">; - Linki –
<a href="https://adres.pl">kliknij tutaj</a>; - Tabela –
<table>(wraz z<tr>,<th>,<td>); - Komentarze –
<!-- To jest komentarz -->.
- Nagłówki –
-
Atrybuty znaczników
Większość znaczników HTML może mieć atrybuty. Najczęściej spotykane to
id,class,src,href,alt– atrybuty nadają elementom dodatkowe właściwości, np. styl, cel odnośnika, opis alternatywny dla obrazka.Przykład atrybutu w praktyce:
<a href="https://example.com" target="_blank">Otwórz w nowym oknie</a>
-
Sposób testowania i uruchomienia kodu
Gotowy plik HTML zapisz z rozszerzeniem
.html. Otwórz go dowolną przeglądarką (przeciągnij i upuść plik), aby zobaczyć efekt swojej pracy.
Praktyczne przykłady zastosowań
Prosta wizytówka w HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Moja Wizytówka</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Frontend Developer</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<img src="jan.jpg" alt="Zdjęcie Jana Kowalskiego" width="150">
</body>
</html>
Lista zadań
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Moja Lista Zadań</title>
</head>
<body>
<h2>Lista zadań na dziś:</h2>
<ul>
<li>Nauka HTML</li>
<li>Praktyka z CSS</li>
<li>Kawa z przyjaciółmi</li>
</ul>
</body>
</html>
Struktura tabeli z planem dnia
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plan dnia</title>
</head>
<body>
<h2>Plan dnia</h2>
<table border="1">
<tr>
<th>Godzina</th>
<th>Aktywność</th>
</tr>
<tr>
<td>8:00</td>
<td>Śniadanie</td>
</tr>
<tr>
<td>10:00</td>
<td>Praca</td>
</tr>
<tr>
<td>18:00</td>
<td>Relaks</td>
</tr>
</table>
</body>
</html>
Dlaczego warto uczyć się HTML?
- Podstawa każdej strony internetowej – HTML jest fundamentem, na którym zbudujesz swoje portfolio, blog, sklep czy stronę firmową;
- Łatwość nauki – składnia jest logiczna i przejrzysta;
- Bezpośrednie efekty – każda zmiana w kodzie natychmiast widoczna w przeglądarce;
- Dalszy rozwój – znajomość HTML otwiera drzwi do nauki CSS (stylowanie) i JavaScript (interaktywność).
Dalsze kroki
- Ćwicz tworzenie własnych stron, nawet najprostszych, by nabrać biegłości,
- eksperymentuj z różnymi znacznikami i ich atrybutami,
- stopniowo ucz się powiązanych technologii: CSS do stylizowania stron oraz JavaScript do dodawania interaktywności.
Nauka HTML to doskonały start do świata programowania i tworzenia stron internetowych. Pamiętaj, że praktyka czyni mistrza – najlepiej uczyć się poprzez samodzielne tworzenie i modyfikowanie własnych projektów.
