ЮРІЙ ЧЕРНІЄВСЬКИЙ

ПЕРСОНАЛЬНИЙ САЙТ

Створення html-файлу

Пишемо HTML, використовуючи програму Notepad++

Notepad ++
Notepad ++

Веб-сторінки можна створювати та змінювати за допомогою професійних редакторів HTML.
Однак для ефективного вивчення HTML рекомендую використовувати або простий стандартний текстовий редактор, наприклад, Блокнот (ПК) та TextEdit (Mac), або чудовий текстовий редактор Notepad++.

Використання простого текстового редактора – це найкращий спосіб зрозуміти і вивчити HTML.

Виконайте наведені нижче дії, щоб створити свою першу веб-сторінку за допомогою Notepad++.
Нижче подається посилання на офіційну сторінку програми Notepad++, з якої Ви зможете завантажити необхідний дистрибутив:
Сторінка завантаження Notepad++

Крок 1: Відкрийте програму Notepad ++

Запустити програму Notepad ++  можна кількома способами.

Перший – самий простіший спосіб. Запускаємо програму через її ярлик на робочому столі, двічі клацнувши на ньому лівою кнопкою мишки.

Другий спосіб більш складніший – для продвинутих юзерів:

Натисніть кнопки WIN + R одночасно (аналог Пуск – Виконати). При цьому відкриється діалог «Виконати». Впишіть команду notepad++ і натисніть Enter(відкриється програма Notepad ++ ).

Примітка:

На уроках ми будемо застосовувати перший спосіб. Другий спосіб я описую для більш повної інформації.

Перед Вами відкриється головне вікно програми:

Головне вікно програми Notepad ++
Головне вікно програми Notepad ++

Крок 2: Зміна мови інтерфейсу Notepad++

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

Для цього переходимо в меню Settings – Preferences…

У розділі вікна Localization з випадаючого списку вибираємо пункт “Українська”.

Переходимо в меню Settings – Preferences…
Переходимо в меню Settings – Preferences…
У розділі вікна Localization з випадаючого списку вибираємо пункт “Українська”
У розділі вікна Localization з випадаючого списку вибираємо пункт “Українська”

Програма відразу змінить мову інтерфейсу з англійської на українську.

Програма відразу змінить мову інтерфейсу з англійської на українську.
Програма відразу змінить мову інтерфейсу з англійської на українську.

Тепер з програмою можна починати працювати.

Примітка:

Для тих учнів, які дуже добре знають англійську мову цей крок можна пропустити! 🙂

Крок 3: Пишемо кілька рядків HTML тегів.

Примітка:

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

Рекомендується:

<!DOCTYPE html> <!--Декларація повідомляє, що в цьому документі використовується 5 версія HTML-->
<html> <!--Кореневий елемент HTML документа (всі інші елементи повинні бути його нащадками)-->
<head><!--Відкриваємо службовий контейнер <head >-->
<title>Моя перша сторінка</title> <!--Назва для документа-->
</head> <!--Закриваємо службовий контейнер <head>-->
<body> <!--Описує видимий вміст сторінки-->
<h2> Це заголовок </h2> <!--Описує заголовок другого рівня -->
<p> Це параграф. </p> <!--Визначає параграф (абзац)-->
</body><!--Закриваємо тег, який описує видимий вміст сторінки-->
</html> <!--Закриває елемент (після нього не повинно бути будь-яких елементів)-->

Давайте розберемося , що ми зробили в цьому прикладі:

Оголосили декларацію <!DOCTYPE html> , яка визначає тип документа і повідомляє браузеру, що необхідно інтерпретувати код на мові HTML 5.
Додали парні елементи <html> і </ html> , які визначають межі нашого HTML коду.
Зверніть увагу, що після закриваючого тега </html> не має бути ніяких елементів.
У верхній частині нашого документу (між парними тегами <head></head> ) ми розмістили парні елементи <title></title>, які визначають найменування нашої сторінки – “Моя перша сторінка” . Найменування сторінки, яке ви вказали відображається на вкладці будь-якого браузера.
У тілі нашої сторінки, визначеного парними елементами <body></body> ми розмістили видимий вміст нашої сторінки – заголовок другого рівня (<h2></h2>) та параграф (абзац) ( <p></p> ).

Важливо:

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

Крок 4: Включаємо підсвічування коду

Щойно інстальований Notepad++ може не виділяти елементи HTML різними кольорами. Цю функцію потрібно буде активувати наступним чином:
Вибрати опції мови – Меню – Мова – H – HTML

Включаємо підсвічування коду
Включаємо підсвічування коду

Крок 5: Збереження HTML сторінки

Щоб зберегти файл на вашому комп’ютері як HTML документ виберіть в редакторі Файл> Зберегти як (або поєднання Ctrl-Alt-S)

Збереження HTML сторінки
Збереження HTML сторінки

Ви можете вказати в списку другого поля тип файлу, а можете відразу вказати назву файлу з розширенням html. Назвіть файл “index.html” і файл автоматично збережеться як HTML документ в кодуванні UTF-8 .

Назвіть файл “index.html” і файл автоматично збережеться як HTML документ в кодуванні UTF-8
Назвіть файл “index.html” і файл автоматично збережеться як HTML документ в кодуванні UTF-8

Допускається вибрати будь-яке інше ім’я документа на ваш смак і вподобання, але на даному етапі навчання ми відразу надаємо нашому першому файлу назву “index.html” .

ЗВЕРНІТЬ УВАГУ!:

Головні сторінки сайтів, як правило, називають index. * . Це пов’язано з тим, що відсутня необхідність змінювати конфігурацію файлу веб-сервера, встановлену за замовчуванням.

Після того як Ви зберегли ваш текстовий документ як HTML файл, редактор починає виділяти весь HTML код кольором (візуалізація коду) – це одна з тих зручностей, які нам надає Notepad++.

Від автора:

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

Обговорення даної публікації на форумі.