Урок №3. HTML. Редактори коду

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Редактори коду. На чому писати HTML-код?

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

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

Крок 1. Відкрийте програму Блокнот (Windows)

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Відображення HTML-коду в Блокноті
Відображення HTML-коду в Блокноті

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

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

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

Збереження текстового файлу у вигляді html-сторінки в Блокноті
Збереження текстового файлу у вигляді html-сторінки в Блокноті

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

Крок 4. Перегляньте HTML-сторінку у своєму браузері

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

Результат буде виглядати так:

HTML-сторінка в браузері
HTML-сторінка в браузері

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

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

Приклад:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.