Основи HTML для створення простих сторінок

Автор: Проскуряков Ілля | Опубліковано: 25.09.2025 | Категорія: Статті - створення та розробка, SEO, Статті про створення сайту

Вміст сторінки та навігація Сховати

1 Що таке HTML?

2 Базова структура HTML-документа

3 Основні HTML-теги

4 Додавання стилів за допомогою атрибутів

5 Створення простої сторінки: приклад

6 Як протестувати вашу сторінку

7 Рекомендації для початківців

8 Висновок

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

Що таке HTML?

HTML – це не програмна мова, а мова розмітки, яка складається з тегів. Теги вказують браузеру, як відображати контент на сторінці. Наприклад, тег <p> створює параграф, а тег <h1> – головний заголовок. Кожна HTML-сторінка має чітку структуру, яка включає основні елементи, такі як заголовок, тіло сторінки та метадані.

Базова структура HTML-документа

Кожна HTML-сторінка починається з базового шаблону. Ось приклад простого HTML-документа:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя перша сторінка</title>
</head>
<body>
    <h1>Вітаємо на моїй сторінці!</h1>
    <p>Це приклад простої HTML-сторінки.</p>
</body>
</html>

Розберемо основні елементи:

<!DOCTYPE html> – оголошує, що документ є HTML5. Це перший рядок будь-якої HTML-сторінки.
<html lang="uk"> – кореневий елемент, який визначає мову сторінки (в даному випадку українська).
<head> – містить метадані, такі як кодування (<meta charset="UTF-8">), адаптивність для мобільних пристроїв (<meta name="viewport">) та заголовок сторінки (<title>).
<body> – містить вміст сторінки, який бачить користувач, наприклад, заголовки, текст, зображення.

Основні HTML-теги

Для створення простих сторінок достатньо знати кілька ключових тегів:

Заголовки (<h1> до <h6>):
Використовуються для створення заголовків різного рівня. Наприклад: <h1>Головний заголовок</h1> <h2>Підзаголовок</h2>
Параграфи (<p>):
Для текстових блоків: <p>Це приклад тексту в параграфі.</p>
Посилання (<a>):
Створюють гіперпосилання: <a href="https://example.com">Перейти на сайт</a>
Зображення (<img>):
Додають зображення. Атрибут src вказує шлях до файлу, а alt – альтернативний текст: <img src="image.jpg" alt="Опис зображення">
Списки:
- Нек enumeration list (<ul> – невпорядкований список):<ul> <li>Пункт 1</li> <li>Пункт 2</li> </ul>
- Ordered list (<ol> – впорядкований список):<ol> <li>Перший пункт</li> <li>Другий пункт</li> </ol>
Дивізіони (<div>):
Використовуються для групування елементів: <div> <h2>Розділ</h2> <p>Текст у розділі.</p> </div>

Додавання стилів за допомогою атрибутів

HTML дозволяє додавати базові стилі через атрибут style. Наприклад:

<p style="color: blue; font-size: 16px;">Цей текст синій.</p>

Однак для складнішого дизайну краще використовувати CSS (Cascading Style Sheets), підключаючи його через тег <link> у секції <head>:

<link rel="stylesheet" href="styles.css">

Створення простої сторінки: приклад

Ось приклад повноцінної HTML-сторінки з різними елементами:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя перша сторінка</title>
</head>
<body>
    <h1>Ласкаво просимо!</h1>
    <p>Це приклад простої сторінки, створеної за допомогою HTML.</p>
    <img src="example.jpg" alt="Приклад зображення">
    <h2>Що я пропоную:</h2>
    <ul>
        <li>Якісний контент</li>
        <li>Швидке завантаження</li>
        <li>Простий дизайн</li>
    </ul>
    <a href="https://example.com">Дізнайтесь більше</a>
</body>
</html>

Як протестувати вашу сторінку

Створіть файл: Збережіть код у файлі з розширенням .html (наприклад, index.html).
Відкрийте в браузері: Перетягніть файл у браузер або відкрийте через “Файл → Відкрити”.
Використовуйте редактор коду: Для зручності використовуйте редактори, такі як Visual Studio Code, Sublime Text або Notepad++.

Висновок

Основи HTML. HTML – це перший крок до створення веб-сторінок. Освоївши базові теги та структуру, ви зможете створювати прості, але функціональні сторінки. Для подальшого розвитку вивчайте CSS для дизайну та JavaScript для інтерактивності. Практика та експерименти з кодом допоможуть вам швидко прогресувати у веброзробці.