Як створити сайт HTML у Блокноті — це найпростіший спосіб швидко зрозуміти, з чого складається вебсторінка і як працює код у браузері. Для старту потрібні лише текстовий редактор, браузер і кілька базових HTML-тегів.
Що потрібно для першої HTML-сторінки
Щоб створити першу HTML-сторінку в Блокноті, достатньо будь-якого простого текстового редактора та браузера для перевірки результату. На Windows підійде стандартний Блокнот, а на інших системах — будь-який аналог без форматування тексту.
- текстовий редактор без автоматичного форматування;
- браузер для відкриття файлу;
- папка, де ви збережете сайт;
- базове розуміння тегів html, head і body.
Якщо редактор додає зайве форматування, код може працювати неправильно, тому звичайний текстовий режим тут кращий за складні інструменти.
Базовий код 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>Цей код уже можна зберегти як повноцінну вебсторінку, і браузер відобразить заголовок та текст без додаткових налаштувань.
Як правильно зберегти файл, щоб він відкрився як сайт
Як правильно зберегти файл, щоб він відкрився як сайт, визначає розширення .html і правильне кодування. Якщо зберегти документ як звичайний текстовий файл, браузер не сприйме його як вебсторінку.
- Відкрийте Блокнот і вставте HTML-код.
- Натисніть Файл → Зберегти як.
- У полі імені введіть, наприклад, index.html.
- У полі типу файлу виберіть Усі файли.
- За можливості виберіть кодування UTF-8.
Після збереження перевірте результат: файл має відкриватися у браузері подвійним клацанням, а не в Блокноті. Якщо відкривається текст замість сторінки, найчастіше проблема в розширенні файлу або в тому, що він збережений як .txt.
Як додати заголовки, текст і зображення
Як додати заголовки, текст і зображення в HTML-сторінку, залежить від тегів, які ви використовуєте всередині body. Найчастіше для першого сайту вистачає заголовка, кількох абзаців і одного зображення.
Текстові блоки
Текстові блоки в HTML створюють теги h1, h2, p і ul. Вони допомагають структурувати сторінку так, щоб її було зручно читати.
Зображення
Зображення в HTML додають тегом img із шляхом до файлу. Якщо картинка лежить у тій самій папці, що й сайт, шлях буде простішим, наприклад img src=”photo.jpg”.
Після додавання зображення оновіть сторінку в браузері та перевірте, чи файл справді лежить у вказаному місці. Якщо картинка не з’явилася, спершу перевірте назву файлу, розширення і регістр літер у шляху.
Типові помилки новачків
Типові помилки новачків у HTML найчастіше пов’язані не з самим кодом, а з дрібницями під час збереження або написання тегів. Саме ці дрібниці зазвичай заважають сторінці відкритися правильно.
- файл збережено як .txt замість .html;
- помилки в дужках або закриваючих тегах;
- неправильне кодування, через яке псуються українські символи;
- неправильний шлях до зображення;
- використання пробілів і символів у назві файлу, які ускладнюють відкриття.
Якщо сторінка не працює, відкрийте файл ще раз у Блокноті та звірте код рядок за рядком. Найшвидший спосіб перевірки — спростити сторінку до мінімуму і подивитися, чи відкривається базовий шаблон без помилок.
Що робити після першої успішної сторінки
Що робити після першої успішної сторінки, залежить від того, чи хочете ви вчитися далі або зібрати простий сайт для себе. Наступний крок — додати стиль через CSS, створити кілька сторінок і навчитися зв’язувати їх між собою.
Корисно одразу спробувати три практичні речі: змінити заголовок вкладки, додати список із кількох пунктів і створити другу сторінку з посиланням на головну. Якщо все відкривається у браузері без помилок, базова структура сайту вже працює правильно.
Для першого досвіду цього достатньо: Блокнот показує, як виглядає HTML без зайвих інструментів, а браузер одразу підтверджує результат. Саме так найпростіше зрозуміти основу веброзробки.
