Як створити HTML-сторінку з нуля: покрокова інструкція

Щоб створити HTML-сторінку, достатньо текстового редактора й браузера. Напишіть розмітку, збережіть її у файлі index.html і відкрийте його — власна сторінка вже працюватиме на комп’ютері. Купувати домен чи налаштовувати хостинг для першої вправи не потрібно.

Нижче пройдемо цей шлях у Windows: створимо справжній HTML-файл, додамо заголовок, текст, посилання та фотографію. Також розберемо онлайн-редактори, збереження всього проєкту й публікацію сторінки в інтернеті.

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

Що потрібно для створення HTML-сторінки

HTML — мова розмітки, яка описує структуру вебсторінки. Вона позначає заголовки, абзаци, зображення, списки та посилання. Браузер обробляє цю розмітку й показує готовий документ.

Для роботи потрібні два інструменти:

• Текстовий редактор — щоб написати та зберегти код.
• Браузер — щоб відкрити файл і перевірити результат.

Підійде звичайний Блокнот Windows. Якщо плануєте продовжувати навчання, зручніше встановити Visual Studio Code: у ньому є підсвічування синтаксису, автодоповнення й форматування. Для перегляду сторінки використовуйте Chrome, Edge, Firefox або інший сучасний браузер.

Простий документ із текстом працює локально без інтернету. Зовнішні посилання та ресурси, які завантажуються з мережі, уже потребують з’єднання. Для нашого початкового прикладу не знадобляться WordPress, PHP, JavaScript чи локальний вебсервер.

Як створити файл index.html у Windows

Відкрийте «Провідник» і створіть у зручному місці папку my-first-page. У ній зберігатимемо сторінку та пов’язані файли.

Назва index.html часто використовується для головної сторінки каталогу: сервер може відкривати її, коли в адресі не вказано конкретний файл. Це залежить від налаштувань сервера. Інші сторінки можуть називатися about.html чи contacts.html.

Щоб створити файл у Блокноті:

1. Відкрийте меню «Пуск» і запустіть Блокнот.
2. Створіть новий документ.
3. Виберіть «Файл» → «Зберегти як» і відкрийте папку my-first-page.
4. Укажіть ім’я index.html.
5. Якщо в діалозі є ці параметри, виберіть тип «Усі файли» та кодування UTF-8.
6. Збережіть документ.

Поки файл порожній — код додамо на наступному кроці. Зараз перевірте його розширення: потрібне .html, а не .html.txt.

У Windows 11 увімкнути розширення можна через «Вигляд» → «Показати» → «Розширення імен файлів». У Windows 10 відповідний прапорець розташований на вкладці «Вигляд». Назви пунктів можуть відрізнятися залежно від мови системи.

У Visual Studio Code відкрийте папку через File → Open Folder, створіть у ній новий файл і назвіть його index.html. За розширенням редактор розпізнає HTML.

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

Відкрийте index.html у текстовому редакторі та вставте весь приклад:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя перша HTML-сторінка</title>
</head>
<body>
  <h1>Привіт, світе!</h1>

  <p>Це моя перша HTML-сторінка.</p>

  <p>Я створив її самостійно.</p>

  <a href="https://example.com/">Моє перше посилання</a>
</body>
</html>

Натисніть Ctrl + S. Це повний HTML-документ: додаткових файлів для його відображення не потрібно.

Ось за що відповідають основні частини:

• <!DOCTYPE html> потрібен для стандартного режиму відображення в браузері.
• <html lang="uk"> — кореневий елемент; lang="uk" позначає українську мову вмісту.
• <head> містить метадані документа.
• <meta charset="UTF-8"> оголошує кодування. Сам файл також слід зберегти в UTF-8.
• <meta name="viewport"> налаштовує область перегляду, зокрема на мобільних пристроях.
• <title> задає назву вкладки браузера.
• <body> містить вміст сторінки: заголовки, абзаци, посилання та інші елементи.
• <h1> — головний заголовок, <p> — абзац, <a> — посилання. Його адресу задає атрибут href.

У більшості елементів цього прикладу є відкривальний і закривальний теги. Наприклад, абзац починається з <p> та завершується </p>. Елементи <meta> закривального тега не мають.

Не плутайте назву вкладки з текстом на сторінці: зміна <title> не змінить заголовок <h1>. Докладніше про абзаци, виділення та інші текстові елементи — у матеріалі про додавання та форматування тексту в HTML.

Як відкрити сторінку в браузері й побачити зміни

Збережіть код і відкрийте папку my-first-page у «Провіднику». Двічі клацніть index.html. Якщо документ відкрився в редакторі, натисніть на файлі правою кнопкою миші й через «Відкрити за допомогою» виберіть браузер.

Ви побачите заголовок «Привіт, світе!», два абзаци й посилання «Моє перше посилання». Локальна адреса починатиметься з file:///, наприклад:

file:///C:/Users/User/Documents/my-first-page/index.html

Це шлях до файла на вашому комп’ютері. Якщо надіслати іншій людині лише таку адресу, вона не отримає доступу до сторінки — потрібно передати сам файл або опублікувати його.

Тепер поверніться до редактора й замініть заголовок:

<h1>Мій перший сайт</h1>

Натисніть Ctrl + S, перейдіть у браузер і оновіть вкладку через F5 або Ctrl + R. Замість «Привіт, світе!» має з’явитися «Мій перший сайт».

У поточній настільній версії VS Code файл також можна відкрити через Open in Integrated Browser у його контекстному меню. Ця можливість описана в документації HTML у Visual Studio Code. Якщо такого пункту у вашій версії немає, користуйтеся зовнішнім браузером.

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

Як додати текст, фотографію та список

Перетворімо приклад на невелику особисту сторінку. Замініть заголовок і два абзаци всередині <body> такими:

<h1>Моя особиста сторінка</h1>

<p>Привіт! Я вивчаю HTML і створюю свій перший сайт.</p>

<p>Тут будуть мої проєкти та корисні посилання.</p>

Тепер створіть у папці my-first-page підпапку images. Покладіть туди власне зображення у форматі JPEG з ім’ям photo.jpg. Має вийти так:

Після абзаців, перед закривальним тегом </body>, додайте:

<img src="images/photo.jpg" alt="Портрет автора сторінки" width="320">

Атрибут src указує шлях до зображення відносно HTML-файла. У alt напишіть короткий опис саме вашої фотографії. Значення width="320" задає ширину в пікселях; закривальний тег для <img> не потрібен.

Файл photo.jpg повинен справді існувати. Не перейменовуйте PNG на JPG лише заради прикладу: краще залиште справжнє розширення й відповідно змініть src.

Нижче додайте список:

<h2>Мої інтереси</h2>

<ul>
  <li>Веброзробка</li>
  <li>Комп’ютерні технології</li>
  <li>Фотографія</li>
</ul>

Елемент <ul> створює маркований список, а кожен <li> — його пункт. Збережіть файл і знову оновіть браузер.

Оформлення поки залишиться стандартним. Колір, шрифти, відступи та адаптивне розташування елементів задають через CSS. Це наступний крок, для якого є окрема практична інструкція з верстки HTML і CSS.

Як створити HTML онлайн без установлення програм

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

У MDN Playground відкрийте область HTML та вставте:

<h1>Мій HTML онлайн</h1>
<p>Ця сторінка створена просто в браузері.</p>

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

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

Як завантажити HTML-файл і опублікувати сторінку

Збереження на комп’ютер. Якщо ви працювали в Блокноті або VS Code, файл уже лежить у папці проєкту. Окремо завантажувати його не потрібно. Його можна скопіювати на флешку або надіслати іншій людині.

Після додавання фотографії передавайте всю папку, наприклад у ZIP-архіві. Сам index.html не містить зображення: він лише посилається на images/photo.jpg. Те саме стосується окремих файлів CSS і JavaScript.

Якщо працювали в онлайн-редакторі, шукайте функцію Export або Download. Наприклад, у CodePen після входу можна вибрати Export у меню дій Pen. За інструкцією експорту CodePen, ZIP містить вихідні файли в src та результат останньої успішної збірки в dist. Залежності й зовнішні ресурси перевіряйте окремо.

Не плутайте експорт проєкту з атрибутом посилання download: це окрема можливість HTML для завантаження ресурсу за посиланням.

Публікація на хостингу. Щоб сторінка відкривалася через інтернет, перенесіть її файли на вебсервер. Для цього підійде звичайний вебхостинг, зокрема Хостинг Україна — партнерське посилання.

У панелі хостингу визначте кореневу папку потрібного сайту та завантажте туди index.html разом із images. Користуйтеся файловим менеджером або підтримуваним способом передавання, наприклад SFTP. Для проби на вже чинному сайті створіть окремий підкаталог, щоб не замінити його головну сторінку.

Публікація через GitHub Pages. Для статичного прикладу можна обійтися без купівлі окремого хостингу:

1. Увійдіть у GitHub і створіть новий публічний репозиторій, наприклад my-first-page. Під час створення можна додати README, щоб одразу мати початкову гілку.
2. Через Add file → Upload files додайте index.html у корінь репозиторію. Якщо вже додали фотографію, перенесіть також папку images. Підтвердьте зміни.
3. Відкрийте Settings → Pages.
4. У розділі Build and deployment виберіть джерело Deploy from a branch, свою гілку, наприклад main, та папку /(root). Натисніть Save.
5. Дочекайтеся завершення публікації й відкрийте сторінку через Visit site у налаштуваннях Pages.

Вибір гілки й папки описано в інструкції GitHub Pages. Для GitHub Free потрібен публічний репозиторій. Сервіс публікує статичні файли; виконувати PHP на сервері він не буде.

Після публікації відкрийте сторінку за її вебадресою на комп’ютері та телефоні. Перевірте текст, фотографію й посилання. Зміни можуть з’явитися не одразу — GitHub зазначає, що публікація іноді триває до десяти хвилин.

Що робити, якщо HTML-сторінка не працює

Спершу перевірте збереження та шлях до відкритого файла. У двох папках можуть лежати різні документи з однаковим ім’ям index.html.

Якщо документ має назву index.html.txt, виправте розширення. Це допоможе браузеру відкрити його як HTML, але правильність самої розмітки все одно потрібно перевірити.

Для пошуку помилок у коді скористайтеся Nu HTML Checker: завантажте файл або вставте його вміст. Валідатор допомагає знайти помилки розмітки, але не замінює перевірку посилань і зображень у браузері.

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