Co to jest język HTML?
Co oznacza HTML po polsku?
HTML, czyli HyperText Markup Language, stanowi fundament większości stron internetowych. Jest to język znaczników, który definiuje strukturę i organizację treści na stronie. HTML pozwala określić, gdzie pojawią się nagłówki, akapity, obrazy, linki czy listy. Każdy element strony internetowej jest opisany za pomocą specjalnych znaczników zapisanych w nawiasach ostrych < >. W tym artykule przyjrzymy się podstawowym strukturom HTML, takim jak znaczniki, atrybuty, elementy blokowe i liniowe, a także przedstawimy praktyczne przykłady użycia.
1. Znaczniki HTML
Znaczniki HTML są podstawowymi elementami tego języka. Każdy znacznik otwierający ma swoją wersję zamykającą – np. <p> oznacza rozpoczęcie paragrafu, a </p> jego zakończenie. Wyjątkiem są znaczniki pojedyncze, które nie wymagają zamknięcia, np. <br> czy <img>. Znaczniki mogą być zagnieżdżane, co pozwala tworzyć złożone struktury.
Przykład struktury HTML:
<!DOCTYPE html>
<html>
<head>
<title>Moja Pierwsza Strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest pierwszy paragraf mojej strony.</p>
<p>To jest drugi paragraf mojej strony.</p>
</body>
</html>
2. Atrybuty HTML
Atrybuty HTML to dodatkowe informacje umieszczane w znacznikach otwierających, które pozwalają modyfikować ich działanie lub wygląd. Każdy atrybut ma postać nazwa="wartość" i jest umieszczany bezpośrednio po nazwie znacznika. W tym przypadku href określa adres, do którego prowadzi link, a tekst między znacznikami jest widoczny dla użytkownika.
<a href="https://www.przykladowastrona.com">Odwiedź Przykładową Stronę</a>
Najczęściej używane atrybuty to:
- href – adres docelowy w linkach
<a> - src – źródło obrazka w
<img> - alt – tekst alternatywny dla obrazka
- id – unikalny identyfikator elementu
- class – przypisanie klasy CSS do elementu
- title – podpowiedź pojawiająca się po najechaniu kursorem
Atrybuty umożliwiają nie tylko stylowanie za pomocą CSS, ale także identyfikację elementów w JavaScript czy poprawę dostępności strony dla osób korzystających z czytników ekranu. Ich umiejętne wykorzystanie pozwala budować bardziej funkcjonalne i przyjazne użytkownikowi strony internetowe
3. Elementy blokowe i liniowe
Elementy blokowe zajmują całą szerokość dostępnego obszaru i zaczynają się od nowej linii. Przykłady: <div>, <p>, <h1>–<h6>, <table>, <ul>, <ol>. Elementy liniowe mieszczą się w bieżącej linii tekstu i nie powodują przejścia do nowego wiersza. Przykłady: <span>, <a>, <strong>, <em>.
Przykłady użycia w prostych stronach internetowych
Poniżej znajdują się dwa przykłady kodu HTML, które pokazują praktyczne zastosowanie opisanych wcześniej struktur. W tym przykładzie wykorzystano elementy blokowe (<h1>, <p>) do stworzenia przejrzystej struktury z nagłówkiem i akapitem. Każdy z tych elementów pojawi się w osobnej linii, zapewniając czytelność treści
<!DOCTYPE html>
<html>
<head>
<title>Strona Tekstowa</title>
</head>
<body>
<h1>Witaj na Stronie Tekstowej</h1>
<p>To jest przykładowy tekst na mojej stronie.</p>
</body>
</html>
Przykład użycia z hiperłączem:
<!DOCTYPE html>
<html>
<head>
<title>Strona z Hiperłączem</title>
</head>
<body>
<h1>Witaj na Stronie z Hiperłączem</h1>
<p>Odwiedź <a href=”https://www.przykladowastrona.com”>Przykładową Stronę</a>.</p>
</body>
</html>
Tutaj, oprócz nagłówka i akapitu, użyto elementu liniowego <a>, który pojawia się w linii tekstu akapitu i pozwala użytkownikowi przejść pod wskazany adres URL. Ten przykład pokazuje, jak łatwo można łączyć elementy blokowe i liniowe w jednej strukturze, by uzyskać zamierzony efekt wizualny i funkcjonalny
4. Dodatkowe elementy HTML
W HTML dostępnych jest wiele innych znaczników, które rozszerzają możliwości prezentacji treści. Każdy z tych elementów ma określone zastosowanie i wpływa na sposób prezentowania treści w przeglądarce. Umiejętne korzystanie z nich pozwala budować bardziej złożone i atrakcyjne wizualnie strony internetowej:
<div>– uniwersalny kontener blokowy do grupowania i stylowania fragmentów strony za pomocą CSS<table>– pozwala tworzyć tabele, z wierszami<tr>i komórkami<td>, idealne do prezentacji danych<strong>i<em>– wyróżniają tekst przez pogrubienie lub kursywę, nadając mu odpowiednie znaczenie semantyczne<img>– umożliwia wstawianie obrazów, wymaga atrybutusrci zalecanegoaltdla dostępności<br>– wstawia łamanie linii, co bywa przydatne w poezji lub adresach
HTML to język znaczników opisujący strukturę i treść stron internetowych. Opiera się na znacznikach, które mogą mieć atrybuty, oraz na rozróżnieniu elementów blokowych i liniowych. Dzięki prostocie składni i czytelności kodu HTML jest idealny do nauki podstaw tworzenia stron.
Znajomość HTML to pierwszy krok do rozwoju w świecie web developmentu – im więcej eksperymentujesz, tym szybciej zrozumiesz, jak działa Internet.
Czytaj też: Co jest niezbędne do tego, aby móc założyć stronę internetową?
