HTML (HyperText Markup Language) to podstawowy język znaczników używany do tworzenia i strukturyzowania treści na stronach internetowych. Jako fundament sieci World Wide Web, HTML pozwala na budowanie stron, które mogą być wyświetlane w przeglądarkach internetowych. Każdy, kto kiedykolwiek przeglądał internet, korzystał z treści stworzonej w HTML.
Historia HTML
HTML został opracowany na początku lat 90. przez Tima Berners-Lee, naukowca pracującego w CERN (Europejska Organizacja Badań Jądrowych). Pierwsza wersja HTML (HTML 1.0) została opublikowana w 1993 roku. Od tego czasu język ewoluował, przechodząc przez wiele wersji, które wprowadzały nowe elementy i funkcjonalności. Obecnie najnowszą wersją jest HTML5, która została oficjalnie wprowadzona w 2014 roku.
Struktura dokumentu HTML
Dokument HTML składa się z elementów, które są definiowane za pomocą znaczników. Każdy znacznik jest otoczony nawiasami kątowymi < i >. Podstawowa struktura dokumentu HTML wygląda następująco:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
<h1>Witaj, świecie!</h1>
<p>To jest przykładowy paragraf.</p>
</body>
</html>
Opis elementów
<!DOCTYPE html>: Deklaracja typu dokumentu, która informuje przeglądarkę, że dokument jest w HTML5.
<html>: Element główny, który otacza całą zawartość strony.
<head>: Sekcja nagłówkowa dokumentu, zawierająca meta-informacje, tytuł strony i linki do zasobów takich jak arkusze stylów.
<title>: Tytuł strony wyświetlany na karcie przeglądarki.
<body>: Główna zawartość strony, w której znajdują się teksty, obrazy, linki i inne elementy widoczne dla użytkownika.
<h1>: Nagłówek pierwszego poziomu, zwykle używany jako tytuł strony.
<p>: Paragraf tekstu.
Podstawowe elementy HTML
HTML oferuje szeroki wachlarz elementów, które można używać do tworzenia różnych rodzajów treści. Oto kilka z nich:
Nagłówki
Nagłówki są używane do strukturyzowania treści na stronie. Istnieje sześć poziomów nagłówków, od <h1> do <h6>, gdzie <h1> jest najważniejszy, a <h6> najmniej ważny.
<h1>Najważniejszy nagłówek</h1>
<h2>Mniej ważny nagłówek</h2>
<h3>Nagłówek trzeciego poziomu</h3>
Paragrafy
Paragrafy są definiowane za pomocą znacznika <p> i są używane do tworzenia bloków tekstu.
<p>To jest przykładowy paragraf tekstu.</p>
Linki
Linki umożliwiają przechodzenie do innych stron lub zasobów. Są definiowane za pomocą znacznika <a> i atrybutu href.
<a href="https://www.example.com">Kliknij tutaj, aby odwiedzić przykład</a>
Obrazy
Obrazy są dodawane za pomocą znacznika <img> i atrybutu src, który wskazuje na źródło obrazu.
<img src="obrazek.jpg" alt="Opis obrazka">
Listy
HTML oferuje dwa główne typy list: nieuporządkowane (ul) i uporządkowane (ol). Elementy listy są definiowane za pomocą znacznika <li>.
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ul>
<ol>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ol>
HTML5
HTML5 wprowadził wiele nowych elementów i funkcjonalności, które umożliwiają bardziej zaawansowane tworzenie stron internetowych. Niektóre z kluczowych nowości w HTML5 to:
Nowe elementy semantyczne
HTML5 wprowadza elementy semantyczne, które pomagają lepiej zorganizować i opisać zawartość strony:
<header>: Nagłówek sekcji lub dokumentu.
<footer>: Stopka sekcji lub dokumentu.
<article>: Samodzielna jednostka zawartości.
<section>: Sekcja tematyczna.
<nav>: Nawigacja.
Multimedialne
HTML5 ułatwia wbudowywanie multimediów bez potrzeby korzystania z dodatkowych wtyczek. Przykłady to:
<audio>: Wbudowane odtwarzanie dźwięku.<video>: Wbudowane odtwarzanie wideo.
<audio controls>
<source src="muzyka.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje odtwarzania dźwięku.
</audio>
<video controls>
<source src="film.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje odtwarzania wideo.
</video>
Formularze
HTML5 wzbogacił formularze o nowe elementy i atrybuty, które poprawiają interakcję użytkownika:
inputz typami takimi jakemail,url,date.- Atrybuty takie jak
placeholder(tekst wskazówka w polu formularza) irequired(wymagane pole).
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="wpisz email" required>
<input type="submit" value="Wyślij">
</form>
HTML jest fundamentalnym językiem dla tworzenia stron internetowych, umożliwiającym strukturyzowanie i prezentowanie treści w przeglądarkach. Od swojej pierwszej wersji w 1993 roku, HTML przeszedł długą drogę ewolucji, wprowadzając nowe elementy i funkcje, które ułatwiają tworzenie nowoczesnych, interaktywnych i responsywnych stron. Niezależnie od tego, czy jesteś początkującym twórcą stron, czy doświadczonym programistą, znajomość HTML jest niezbędna do pracy w dziedzinie web developmentu.
Dodaj komentarz