Skip to main content

Język znaczników hipertekstu (HTML)

TL;DR

HTML (HyperText Markup Language) to język używany do tworzenia stron internetowych. Niektóre strony mogą być napisane bezpośrednio w języku HTML, podczas gdy inne mogą korzystać z kreatorów stron lub innych narzędzi do tworzenia stron internetowych, które również generują dane wyjściowe w języku HTML, które z kolei mogą być odczytywane przez przeglądarki.

Co oznacza skrót HTML?

HTML to skrót od HyperText Markup Language i jest to język używany do tworzenia stron internetowych. Wykorzystuje znaczniki do definiowania i stylizowania elementów. Na przykład można w nim definiować czcionki, kolory, położenie, łącza itp. Mimo że większość twórców witryn nie pisze bezpośrednio w języku HTML, końcowe dane wyjściowe, które są odczytywane i interpretowane przez przeglądarki internetowe, mają format HTML. Dlatego po kliknięciu prawym przyciskiem myszy dowolnej strony WWW i wybraniu opcji "Wyświetl źródło strony", w pierwszym wierszu tekstu w oknie wynikowym powinien znaleźć się napis <!doctype html>.

Jaka jest struktura strony HTML?

Choć struktury mogą się różnić, niektóre z elementów, które powinieneś znaleźć w każdym języku HTML, są następujące (z objaśnieniami pisanymi kursywą). Można to sprawdzić na dowolnej stronie internetowej, klikając prawym przyciskiem myszy w dowolnym miejscu i wybierając opcję "Wyświetl źródło strony":

<!DOCTYPE html> - pokazuje przeglądarce internetowej, że jest to plik HTML, który może odczytać

<html lang="en"> - wskazuje język, w którym napisana jest strona internetowa

<head> - oznacza początek sekcji head, w której umieszczane są kody ogólne

<title>Tytuł strony</title> - jest to znacznik meta pokazujący tytuł strony, który pojawia się w zakładce przeglądarki

<meta name="description" content="..." /> - służy do opisania, o czym jest strona, dla wyszukiwarekinternetowych

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - jest to polecenie mówiące, jak strona ma być wyświetlana na ekranach o różnej wielkości

<meta name="robots" content="index,follow" /> - to mówi botom, które przeszukują stronę, że mogą ją indeksować i dodawać do wyników wyszukiwarek.

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - łączy to HTML z plikiem CSS, w którym umieszcza się bardziej szczegółową stylizację tekstu

<script src="/js/random.js" type="text/javascript"></script> - łączy z plikiem JavaScript, używanym do uruchamiania akcji na stronie internetowej

<link rel="canonical" href="https://yourpage.com"/> - jeśli istnieją strony o podobnej treści lub daną stronę można znaleźć pod więcej niż jednym adresem URL, wskazuje to robotom indeksującym, który adres URL ma być brany pod uwagę dla celów autorytetu

</head> - zamyka sekcję head

<body> - otwiera sekcję body, w której umieszczana jest rzeczywista zawartość strony

<div class="container"> - otwiera sekcję zwaną container, która zazwyczaj tworzy ramkę dla treści

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="alt text" height="52" width="180"></a> - jest to jeden ze sposobów umieszczenia logo, które odsyła do strony głównej.

<div class="first-text">To są pierwsze słowa wyświetlane w witrynie</div> - tekst, który może być stylizowany w podłączonym pliku CSS

...

</body>