A close-up shot of a person coding on a laptop, focusing on the hands and screen.

HTML (HyperText Markup Language) to hipertekstowy język znaczników, który służy do tworzenia stron internetowych. Jego głównym zadaniem jest organizowanie i strukturalizowanie treści poprzez stosowanie specjalnych znaczników. HTML jest językiem znaczników, co oznacza, że nie jest typowym językiem programowania, ale pozwala na definiowanie elementów w dokumencie przeglądarki internetowej. Każdy element strony, taki jak nagłówki, akapity, obrazy czy hiperłącza, jest definiowany za pomocą odpowiednich tagów. Chociaż HTML sam w sobie nie odpowiada za wygląd strony (tym zajmują się arkusze stylów CSS) ani za jej interaktywność (do tego wykorzystywane jest JavaScript), to stanowi niezbędny fundament każdej witryny internetowej. Zrozumienie jego podstaw jest kluczowe dla każdego, kto chce stworzyć stronę internetową i rozwijać swoje umiejętności jako programista web.

Struktura dokumentu HTML

HTML umożliwia tworzenie dokumentów, które mogą być odczytywane przez przeglądarki internetowe. Każda strona internetowa w HTML składa się z określonych sekcji, które zapewniają jej poprawne funkcjonowanie i ułatwiają jej odczyt zarówno przez przeglądarki internetowe, jak i roboty wyszukiwarek. Oto podstawowy szkielet dokumentu w przeglądarce internetowej:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytuł strony</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest przykładowy tekst.</p>
</body>
</html>

Każdy z tych elementów pełni określoną funkcję:

  • <!DOCTYPE html> – to deklaracja określająca, że dokument jest zapisany w standardzie HTML5, czyli najnowszej wersji HTML.
  • <html lang="pl"> – jest to główny element dokumentu HTML, który obejmuje całą zawartość strony. Atrybut lang="pl" informuje przeglądarki i wyszukiwarki, że strona jest w języku polskim, co może poprawić jej optymalizację SEO.
  • <head> – sekcja nagłówkowa, w której umieszczamy metadane, takie jak kodowanie znaków (<meta charset="UTF-8">), ustawienia responsywności (<meta name="viewport" content="width=device-width, initial-scale=1.0">), a także tytuł strony widoczny na karcie przeglądarki (<title>).
  • <body> – to właściwa treść strony, czyli wszystko to, co użytkownik widzi na ekranie. W tym miejscu znajdują się nagłówki, akapity, obrazy, hiperłącza i inne elementy na stronie.

Podstawowe znaczniki HTML

1. Nagłówki

HTML pozwala na wstawianie nagłówków od <h1> do <h6>, które pomagają w hierarchizacji treści na stronie.

<h1>Główny nagłówek</h1>
<h2>Podtytuł</h2>
<h3>Mniejszy nagłówek</h3>

Nagłówek <h1> jest najważniejszy i powinien być używany tylko raz na stronie. Kolejne nagłówki są wykorzystywane do podziału treści na mniejsze sekcje.

2. Akapity i formatowanie tekstu

Akapity w HTML oznaczamy znacznikiem <p>, który pozwala oddzielać bloki tekstu. Do dodatkowego formatowania służą:

  • <strong> – pogrubienie tekstu,
  • <em> – kursywa,
  • <u> – podkreślenie.
<p><strong>Pogrubiony</strong> tekst i <em>kursywa</em>.</p>

3. Listy

HTML obsługuje listy uporządkowane (<ol>) i nieuporządkowane (<ul>), a każdy element listy oznaczony jest <li>.

<ul>
    <li>Pierwszy element</li>
    <li>Drugi element</li>
</ul>

4. Hiperłącza

Hiperłącza pozwalają na nawigację między stronami.

<a href="https://example.com">Kliknij tutaj</a>

5. Obrazy

HTML umożliwia wstawianie obrazów:

<img src="obraz.jpg" alt="Opis obrazu">

6. Tabele

Tabele pomagają w organizacji danych:

<table border="1">
    <tr>
        <th>Nagłówek 1</th>
        <th>Nagłówek 2</th>
    </tr>
    <tr>
        <td>Dane 1</td>
        <td>Dane 2</td>
    </tr>
</table>

Podsumowanie

HTML, stworzony przez Tima Bernersa-Lee w CERN, umożliwił stworzenie pierwszych stron WWW i rozwinął się do wersji HTML5. Obecnie jest nieodłącznie powiązany z kaskadowymi arkuszami stylów (CSS) i JavaScript, tworząc podstawy nowoczesnego web developmentu. Język ten służy do tworzenia zawartości strony internetowej i jest szeroko stosowany w marketingu, optymalizacji SEO oraz programowaniu. Każdy, kto chce programować strony WWW, powinien znać podstawowe funkcje HTML i jego semantyczne elementy.

Podobne wpisy