HTML (HyperText Markup Language) – це мова розмітки, яка використовується для створення веб-сторінок. Вона визначає структуру документа за допомогою тегів.
Основи HTML
HTML-документ складається з елементів, які огортаються тегами. Наприклад:
<!DOCTYPE html>
<html>
<head>
<title>Моя перша сторінка</title>
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Це мій перший HTML-документ.</p>
</body>
</html>
Основні теги HTML
Заголовки
Для створення заголовків використовують теги <h1> – <h6>:
<h1>Це заголовок 1 рівня</h1>
<h2>Це заголовок 2 рівня</h2>
Абзаци
Тег <p> використовується для текстових абзаців:
<p>Це звичайний текстовий абзац.</p>
Посилання
Для створення гіперпосилань використовують тег <a>:
<a href="https://example.com">Перейти на сайт</a>
Зображення
Щоб вставити зображення, використовують тег <img>:
<img src="image.jpg" alt="Опис зображення">
Списки
Списки бувають нумеровані (<ol>) і марковані (<ul>):
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ul>
<ol>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ol>
HTML – це основа будь-якої веб-сторінки. Він визначає її структуру, а стилі та скрипти допомагають зробити сайт функціональним. Якщо ви тільки починаєте знайомство з веб-розробкою, HTML – це перший крок. Краще за все - практика.
Як створити першу веб-сторінку (офлайн)
Щоб створити просту HTML-сторінку та переглянути її в браузері, виконайте наступні кроки:
- Відкрийте будь-який текстовий редактор (наприклад, Notepad, VS Code, Sublime Text).
- Створіть новий файл і вставте в нього такий код:
<!DOCTYPE html>
<html>
<head>
<title>Офлайн-сторінка</title>
</head>
<body>
<h1>Це моя офлайн-сторінка</h1>
<p>Цей текст відображається у вашому браузері без інтернету. Браузер зчитує та інтерпретує код з вашого файлу.</p>
</body>
</html>
- Збережіть файл з розширенням
.html, наприклад,index.html. - Відкрийте теку, де збережений файл, і двічі натисніть на нього. Він відкриється у вашому браузері.
Якщо ви зробили все правильно - ви побачите зміст вашого файлу у браузері.
Верніше сказати - інтерпретований зміст. Ви не будете бачити теги, ви будете бачити те, в що вони інтерпретуються.
Наприклад, ви не побачите цей тег на сторінці:
<title>Офлайн-сторінка</title>
Його зміст буде видно на панелі браузера (назва вкладки або вікна).