what is html
Опубліковано уIT-індустрія

Що таке HTML і яке розширення файлу використовують для web-сторінок

Опубліковано уIT-індустрія

Що таке HTML у практичному сенсі? Це мова розмітки, у якій зберігають структуру веб-сторінки у вигляді текстового файла. Якщо вам важливо не лише почути визначення, а й зрозуміти, яке розширення має такий файл, що всередині документа і як створити першу сторінку, варто дивитися на HTML саме як на основу файла сторінки.

Коротке уточнення теж важливе: HTML не вважають мовою програмування в класичному сенсі. Він не відповідає за складну логіку, а описує, що саме є на сторінці і в якому порядку це має показуватися.

Яке розширення файлу використовують для веб-сторінок

Для веб-сторінок найчастіше використовують розширення .html. Іноді можна зустріти також .htm, але в сучасній практиці частіше беруть саме .html, бо цей варіант зрозуміліший і звичніший.

На практиці ви побачите такі назви файлів:

  • index.html
  • about.html
  • contact.html
  • mypage.html

Якщо ви тільки починаєте, найзручніше зберігати першу сторінку як index.html. Саме таку назву браузери, сервери й хостинги часто сприймають як стартову сторінку сайту.

З яких частин складається HTML документ

Коли браузер відкриває HTML файл, він читає його як структурований документ. У найпростішій версії там є оголошення типу документа, кореневий тег, службова частина з метаданими і видимий вміст сторінки.

Для чого потрібен doctype

<!DOCTYPE html> повідомляє браузеру, що сторінку потрібно обробляти як сучасний HTML документ. Це допомагає уникнути застарілого режиму відображення, у якому верстка може поводитися непередбачувано.

Що містить тег html

Тег <html> охоплює весь документ. Усередині нього знаходяться і службова частина сторінки, і видимий вміст. Зазвичай до нього додають атрибут мови, наприклад lang="uk".

Що знаходиться в head

Блок <head> містить дані для браузера і пошукових систем. Це не той текст, який людина читає прямо на сторінці, а службова інформація документа.

Усередині <head> найчастіше бувають:

  • <meta charset="UTF-8"> для кодування символів
  • <title> для назви сторінки у вкладці браузера
  • <meta name="description"> для короткого опису
  • <link> для підключення стилів або іконок
  • <style> для внутрішніх стилів
  • <script> для підключення сценаріїв

Цього набору досить, щоб зрозуміти базову роль службової частини HTML файла.

Де знаходиться основний вміст сторінки

Видимий вміст сторінки знаходиться в <body>. Саме тут розміщують заголовки, абзаци, зображення, списки, посилання, кнопки та інші елементи, які бачить користувач.

Усередині <body> часто бувають:

  • заголовки
  • текстові абзаци
  • посилання
  • списки
  • зображення
  • кнопки та форми

Для першої сторінки цього вже достатньо, щоб зібрати зрозумілу структуру без зайвого перевантаження.

Де знаходиться заголовок сторінки і що він робить

Початківці часто плутають заголовок сторінки з великим заголовком у тілі документа. Це дві різні речі.

<title> знаходиться в <head> і показується у вкладці браузера. А, наприклад, <h1> знаходиться в <body> і є головним заголовком, який бачить читач на самій сторінці.

Простіше кажучи, <title> називає документ для браузера, а <h1> називає сторінку для людини. Це корисно пам’ятати вже на першому HTML файлі.

Які елементи є в базовому HTML файлі

Щоб створити першу сторінку, не потрібно одразу вчити десятки тегів. На старті вистачає кількох базових елементів, з яких збирається майже будь-який простий документ.

Найчастіше вам знадобляться:

  • <h1> для головного заголовка
  • <p> для абзацу
  • <a> для посилання
  • <img> для зображення
  • <ul> і <li> для списку
  • <br> для переносу рядка, якщо він справді потрібен

Такого набору досить, щоб зібрати першу навчальну сторінку і побачити, як працює структура HTML документа.

Як відкрити HTML файл у браузері

Коли файл уже збережено з розширенням .html, відкрити його нескладно. Найзручніші варіанти такі:

  1. Двічі натиснути на файл у файловому менеджері.
  2. Відкрити браузер і вибрати файл через меню відкриття.
  3. Запустити файл із редактора коду, якщо там є попередній перегляд.
  4. Використати локальний сервер, якщо ви тестуєте кілька файлів одразу.

Для першого знайомства зазвичай вистачає подвійного кліку по файлу або відкриття через браузер.

У якій програмі створити HTML файл

HTML файл можна створити майже в будь-якому текстовому редакторі, але зручність роботи буде різною.

Для старту підійдуть:

  • Notepad у Windows
  • TextEdit на Mac
  • Notepad++
  • Sublime Text
  • Visual Studio Code

Найзручніший універсальний варіант для більшості початківців це Visual Studio Code. У ньому зручно редагувати код, зберігати файл і одразу перевіряти результат.

Як створити першу HTML-сторінку крок за кроком

Найпростіший шлях такий:

  1. Відкрийте текстовий редактор.
  2. Створіть новий файл.
  3. Вставте базову структуру HTML документа.
  4. Збережіть файл як index.html.
  5. Відкрийте його в браузері.
  6. Перевірте, чи видно заголовок і текст сторінки.

Ось мінімальний приклад, з якого можна почати:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Моя перша сторінка</title>
</head>
<body>
  <h1>Привіт, це моя перша HTML-сторінка</h1>
  <p>Я вчуся створювати веб-сторінки.</p>
</body>
</html>

Після цього ви вже можете змінити заголовок, текст і назву вкладки, а потім знову відкрити файл у браузері й побачити результат.

Яких помилок найчастіше припускаються у першому HTML файлі

На старті проблеми зазвичай виникають не через складність HTML, а через дрібні технічні помилки.

Найтиповіші помилки такі:

  • зберегти файл як звичайний .txt, а не .html
  • забути <!DOCTYPE html>
  • переплутати <head> і <body>
  • не додати <title>
  • очікувати, що HTML сам відповідає за дизайн і логіку
  • копіювати фрагменти коду без розуміння, де початок і де кінець елемента

Якщо щось не відкривається або виглядає дивно, спочатку перевірте розширення файла, базову структуру документа і правильність тегів.

Висновок

Що таке HTML у цій темі? Це не просто абстрактне визначення, а реальний файл, з якого починається веб-сторінка. Якщо ви зрозуміли, яке розширення використовують для таких файлів, що лежить у head і body, як відкрити документ у браузері і як зібрати першу сторінку, у вас уже є практична основа для наступного кроку.

Позначки: