НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

HTML5 Підручник

HTML СТАРТ HTML Вступ HTML Редактори HTML Основні приклади HTML Елементи HTML Атрибути HTML Заголовки HTML Параграфи HTML Стилі HTML Форматування HTML Цитати HTML Коментарі HTML Кольори HTML CSS HTML Посилання HTML Зображення HTML Таблиці HTML Списки HTML Блоки HTML Класи HTML Ідентифікатори HTML Фрейми HTML JavaScript HTML Шляхи файлів HTML Голова веб-сторінки HTML Макети HTML Адаптивність HTML Комп'ютерний код HTML Символьні об'єкти HTML Символи HTML Кодування HTML URL кодування HTML XHTML

HTML Форми

HTML Форми HTML Елементи форми HTML Типи вводу HTML Атрибути вводу

HTML5

HTML5 Вступ HTML5 Підтримка HTML5 Нові елементи HTML5 Семантичні елементи HTML5 Перехід з HTML4 HTML5 Гід по стилю

HTML Графіка

HTML Canvas HTML SVG

HTML Медіа

HTML Медіа HTML Відео HTML Аудіо HTML Плагіни HTML YouTube

HTML API

HTML Геолокація HTML Drag/Drop HTML Web сховище HTML Web робітники HTML SSE

HTML Приклади

HTML Приклади HTML Вікторина HTML Вправи HTML Сертифікат HTML Резюме HTML Доступність

HTML Довідники

HTML Список тегів HTML Атрибути HTML Глобальні атрибути HTML Події HTML Кольори HTML Canvas HTML Аудіо/Відео HTML Діючі Doctype HTML Набори символів HTML URL кодування HTML Кодування мови HTTP Повідомлення HTTP Методи PX в EM Конвертер Гарячі клавіши

HTML5. Уроки для початківців

HTML Редактори коду



Писати HTML, використовуючи Блокнот або TextEdit

Писати HTML код можно, використовуючи стандартні програми Блокнот (на Windows) та TextEdit (на MacOS). Але зараз існує досить велика кількість різних професійних редакторів коду, за допомогою яких можна писати HTML-код. Хоча для вивчення мови HTML рекомендується спочатку писати код як-раз за допомогою простих текстових редакторів - стандартних Блокноту або TextEdit. А навчившись писати простий HTML код, потім перейти до більш професійних редакторів або IDE.

Виконайте чотири кроки нижче, щоб створити свою першу веб-сторінку за допомогою Блокнота або TextEdit.

Крок 1: Відкрити Блокнот (на Windows)

Windows 8 або більш пізні версії:

Відкрийте початкове меню (символ вікна зліва внизу на екрані). Оберіть програму Блокнот.

Windows 7 або більш раніші версії:

Натисніть меню Пуск > Програми > Стандартні > Блокнот

Крок 1. Відкрийте TextEdit (Mac)

Відкрийте Finder > Программи > TextEdit.

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

Потім в розділі "Відкрити і зберегти" встановіть прапорець "Відображати HTML-файли як HTML-код замість форматованого тексту".

Потім відкрийте новий документ, щоб розмістити код.

Крок 2. Напишіть HTML код

Перепишіть або скопіюйте даний HTML-код в Блокнот:

<!DOCTYPE html>
<html>
<body>

<h1>Мій перший заголовок</h1>
<p>Мій перший параграф.</p>

</body>
</html>

Блокнот


Крок 3: Збережіть HTML сторінку

Збережіть файл на вашому комп'ютері. Оберіть Файл > Зберегти як в меню Блокноту.

Дайте ім'я файлу "index.html" та встановіть кодування UTF-8 (яке є найкращим кодуванням для HTML файлів).

Вигляд html-сторінки в браузері

Ви можете використовувати розширення файла .html або .htm. Особливої різниці немає, вибір залежить від вас.


Крок 4. Відкрийте і перегляньте створену HTML-сторінку в браузері

Відкрийте збережений HTML файл в браузері (двічі клікніть файл або клацніть правою кнопкою миші - і оберіть "Відкрити за допомогою").

Результат матиме вигляд приблизно такий:

Вигляд html-сторінки в браузері


W3Schools Онлайн редактор

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

Приклад

<!DOCTYPE html>
<html>
<head>
<title>Назва сторінки</title>
</head>
<body>

<h1>Це заголовок</h1>
<p>Це параграф.</p>

</body>
</html>
Спробуйте самі »

Натисніть на кнопку "Спробуйте самі", щоб побачити, як це працює.


Безкоштовні онлайн-редактори коду

В мережі існує багато різних онлайн-редакторів коду, які ви також можете використовувати (безкоштовно). Наприклад, крім онлайн-редактора від w3schools.com, є такі сервіси, як: jsfiddle.net, codepen.io, codesandbox.io, thimble.mozilla.org, jsbin.com, rapprogtrain.com, liveweave.com та ін.


За допомогою яких програм-редакторів пишуть код професійні веб-програмісти і веб-верстальники?

Які редактори коду використовують професійні веб-розробники?

  • Редактор Notepad ++
  • Редактор Brackets
  • Редактор Sublime Text 3
  • IDE Atom
  • IDE Visual Studio Code
  • IDE WebStorm / PHPStorm / Pycharm
  • IDE Dreamweaver
  • IDE Eclipse
  • IDE NetBeans

Зараз існує досить багато різних редакторів HTML-коду. Ще якихось 12-15 років тому багатьох нинішніх найпопулярніших HTML-редакторів навіть не існувало. Багато з колишніх початківців веб-розробників і веб-верстальників починали писати свої перші веб-сторінки за допомогою стандартної програми на Windows - Блокноту. Але зараз, звичайно ж, ніхто з допомогою Блокноту HTML-код вже не пише. Для цього існують інші більш зручні редактори коду з підсвічуванням синтаксису і різними додатковими функціями, які полегшують написання коду.


Редактор Notepad++

Редактор кода Notepad++

Першим HTML-редактором, який раніше використовували після стандартного Блокнота Windows часто ставав Notepad++. Це вільний текстовий редактор з відкритим вихідним кодом для Windows з підсвічуванням синтаксису великої кількості мов програмування і розмітки. Підтримує відкриття більше 100 форматів. Базова функціональність програми може бути розширена як за рахунок плагінів, так і сторонніх модулів, таких як компілятори і препроцесори. Саме за допомогою Notepad++ можна починати писати свої перші веб-сторінки будь-яким новачкам. Саме Notepad++ рекомендують використовувати в українських загальноосвітніх школах при вивченні основ веб-розробки, зокрема, при написанні HTML-коду і створення простих статичних веб-сторінок. Програма невелика, досить зручна, має також і український інтерфейс, її можна скачати безкоштовно з офіційного сайту. Є портативний варіант (portable) програми, який не вимагає установки. Її досить завантажити і розпакувати в будь-яку директорію на жорсткому диску вашого комп'ютера і користуватися.


Редактор Brackets

Редактор кода Brackets

Другий редактор HTML-коду - Brackets від компанії Adobe - також безкоштовний редактор з відкритим кодом для веб-розробників. Brackets орієнтований на роботу з HTML, CSS та JavaScript. Ці ж технології лежать в основі самого редактора, що забезпечує його кросплатформенність, тобто сумісність з операційними системами Mac, Windows і Linux. Велику функціональність цьому редактору дають безліч додатків (плагінів), що додає необхідні інструменти для роботи з кодом. Є вбудована підтримка препроцесорів LESS і SCSS. Завантажити Brackets можна з офіційного сайту.


Редактор SublimeText

Редактор кода SublimeText3

Ще один чудовий редактор HTML-коду - це SublimeText3. Програма умовно-безкоштовна. Її можна скачати з офіційного сайту (або звідси) і користуватись абсолютно безплатно. Єдина незручність в цьому випадку - це періодична поява повідомлення про необхідність придбати програму. Хоча на просторах Інтернету можна запросто знайти ключі активації для SublimeText3. Також на офіційному сайті SublimeText3 є лише англомовна версія програмы. Але в Інтернеті легко можна знайти і скачати пакети з перекладом українською мовою і, дотримуючись рекомендацій, самостійно їх встановити в SublimeText3. В цілому це HTML редактор досить швидкий, простий і зручний у користуванні, але все-таки рекомендується для більш досвідчених користувачів і верстальників сайтів, тому що для збільшення функціональності в SublimeText3 необхідно додатково довстановити деякі додатки - плагіни, яких існує досить велика кількість. Але саме плагіни і дають всі ті зручності та можливості для цього редактора HTML-кода.


Редактор Atom

Редактор кода Atom

Наступний редактор HTML-кода, і він же інтегроване середовище розробки - це Atom. Редактор Атом від команди GitHub надає засоби для крос-платформеного редагування коду, має інтелектуальну систему автододавання вводу і багато іншого. Є велика кількість додатків і в цього редактора. На платформі Atom побудовані середовище розробки Visual Studio Code від компанії Microsoft та Nuclide від Facebook.

Хоча для новачків він буде все ж таки досить складним для користування, тому цей редактор рекомендується для більш досвідчених користувачів. Редактор Atom можна скачати безкоштовно з офіційного сайту.

В Інтернеті можна, звичайно ж, знайти й инші HTML-редактори. Але всі вони, як правило, дуже схожі на вище згадані. Кожен може обрати собі для роботи редактор за своїм смаком і ступенем складності для освоєння.


IDE - Інтегроване середовище розробки

Крім текстових редакторів, які використовуються для написання HTML/CSS - коду, професійні веб-розробники використовують також IDE - (скорочено від англ. Integrated development environment) - Інтегроване середовище розробки. Інтегровані середовища розробки створені для того, щоб максимізувати продуктивність програміста, надавши йому пов'язані інструменти розробки із схожими інтерфейсами як одну програму, в якій відбувається весь процес розробки і котра надає необхідні функції. IDE допомагають збільшити продуктивність розробника і пришвидчити процес розробки й написання коду.

Найбільш популярними IDE серед веб-розробників станом на 2020 рік є такі: VS Code - безкоштовний, Atom - безкоштовний, Dreamweaver - платний, Eclipse - безкоштовний, NetBeans - безкоштовний та ін.

Також існує ціла гілка різних IDE від чеської компанії Jetbrains, кожна з яких призначена для розробки на визначених мовах програмування. Для веб-розробки зазвичай використовуються: WebStorm - HTML+CSS+JavaScript (платний); PHPStorm - HTML+CSS+JavaScript+PHP (платний); Pycharm - Python (платний). Всі ці IDE можна скачати з офіційного сайту Jetbrains.

Деякі із IDE є безплатними, а деякі платними. Хоча IDE від компанії Jetbrains: WebStorm, PHPStorm, Pycharm та ін. мають досить великий період безплатної роботи (trial) - 30 днів, а для студентів та викладачів можна отримати ці IDE на 2 роки безкоштовно в цілях навчання. Також на просторах Інтернету можна знайти ключі активації PHPStorm або різні серійники (кряки, активатори та ін.) до цих програм.


Який редактор коду або IDE обрати?

Якщо ви веб-розробник початківець та тільки вчитеся основам створення веб-сайтів і написання коду, то рекомендується використовувати спочатку найпростіші редактори коду, такі як Notepad++ (для школярів), SublimeText3, Brackets (для студентів), і тільки потім, освоївши основи написання коду, можна переходити до використання більш професійних і складних в налаштуваннях, але більш ефективних у застосуванні, інтегрованих середовищах розробки - IDE. Зазвичай найбільш універсальною і найпростішою для освоєння IDE (після редакторів) для початківців веб-розробників стає VS Code. А потім вибір IDE вже залежить від напрямку програмування і застосовуваних технологій.

Всі редактори коду та IDE багато в чому схожі між собою і відрізняються тільки набором деяких функцій. Тому кожен може обрати собі редактор або інтегроване середовище розробки на свій смак і у відповідності до професійних потреб.