Skip to main content

Мова гіпертекстової розмітки (HTML)

TL; DR

HTML(HyperText Markup Language) — це мова, яка використовується для створення веб-сторінок. Деякі сторінки можуть бути написані безпосередньо в HTML, в той час як інші можуть використовувати конструктори сторінок або інші інструменти для створення веб-сторінок, які також створюють вихідні дані HTML, які, у свою чергу, можуть бути прочитані браузерами.

Що означає HTML?

HTML означає HyperText Markup Languageі це мова, яка використовується для створення веб-сторінок. Він використовує розмітки для визначення та стилю елементів. Наприклад, він може визначати шрифти, кольори, положення, посилання тощо. Незважаючи на те, що більшість конструкторів веб-сайтів не пишуть безпосередньо в HTML, кінцеві результати, які зчитуються та інтерпретуються веб-браузерами, є у форматі HTML. Ось чому, якщо клацнути правою кнопкою миші на будь-якій веб-сторінці та вибрати «Переглянути джерело сторінки», перший рядок тексту у вікні має бути <!doctype html>.

Яка структура сторінки HTML?

Хоча структури можуть відрізнятися, деякі елементи, які ви повинні знайти в будь-якому HTML, є такими (з поясненнями, виділеними курсивом). Перевірте це на будь-якій веб-сторінці, клацнувши в будь-якому місці правою кнопкою миші та вибравши «Переглянути джерело сторінки»:

<!DOCTYPE html> – це показує веб-браузеру, що це файл HTML, який він може читати

<html lang="en"> - показує мову, якою написана веб-сторінка

<head> - позначає початок розділу заголовка, де розміщуються загальні коди

<title>Назва сторінки</title> - це мета-тег, що показує назву сторінки, яка відображається на вкладці браузера

<meta name="description" content="..." /> - використовується для опису сторінки, для пошукових систем

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - це команда, яка повідомляє, як веб-сторінка має відображатися на різні розміри екрану

<meta name="robots" content="index,follow" /> - це повідомляє ботам, які сканують сторінку, що вони можуть проіндексувати її та додати до результатів пошукової системи

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - це з'єднує HTML з файлом CSS, де розміщується більш детальний стиль для тексту

<script src="/js/random.js" type="text/javascript"></script> - це підключається до файлу JavaScript, який використовується для виконання дії на веб-сторінці

<link rel="canonical" href="https://yourpage.com"/> - якщо є сторінки з подібним вмістом або сторінку можна знайти за більш ніж однією URL-адресою, це показує веб-сканерам, на яку URL-адресу потрібно взяти врахувати в повноваженнях

</head> - це закриває розділ head

<body> - відкриває розділ body, де розміщено фактичний вміст сторінки

<div class="container"> - це відкриває розділ під назвою контейнер, який зазвичай створює фрейм для вмісту

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="Логотип Visitor Analytics" height="52" ширина ="180"></a> - це один із способів розміщення зображення логотипу, яке посилається на вашу домашню сторінку

<div class=”first-text”>Це перші слова, які фактично відображаються на вашому веб-сайті</div> – деякий текст, який можна стилізувати у підключеному файлі CSS

...

</body>