Для ефективної роботи не обійтися без необхідних і звичних інструментів, в тому числі і при написанні коду HTML. Тому для розробки веб-сторінок або навіть невеликого сайту (набір сторінок, пов'язаних між собою посиланнями і єдиним оформленням), нам знадобляться наступні програми:
- текстовий редактор для написання коду;
- браузер для перегляду результатів;
- валідатор - сервіс для перевірки синтаксису HTML і виявлення помилок в коді; графічний редактор.
Далі розглянемо ці інструменти докладніше.
Текстовий редактор
HTML-документ можна створювати в будь-якому текстовому редакторі, навіть у Блокноті, проте для цієї мети підійде не всяка програма. Потрібна така, щоб у ній були такі властивості.
- Підсвічування синтаксису - виділення тегів, тексту, ключових слів і атрибутів різними кольорами. Це полегшує пошук потрібного елемента, прискорює роботу розробника і знижує виникнення помилок.
- Робота з вкладками. Сайт - це набір файлів, які доводиться редагувати окремо, для чого потрібен редактор, що вміє одночасно працювати відразу з декількома документами. При цьому файли зручно відкривати в окремих вкладках, щоб швидко переходити до потрібного документу.
- Перевірка поточного документа на помилки.
- Автодоповнення - автоматичне закриття дужок, лапок і тегів. Знову ж таки, це прискорює роботу і знижує число можливих помилок. Деякі редактори також дозволяють швидко вводити теги, визначають їх по першим введеним буквах.
Посилання на найбільш популярні редактори наведені нижче.
Notepad++
Безкоштовний редактор для операційної системи Windows, що володіє багатьма можливостями, при цьому залишається простим для освоєння і дуже жвавим.
Де завантажити
https://notepad-plus-plus.org/download
Brackets
Легкий, швидкий, сучасний текстовий редактор від Adobe, орієнтований на веб-розробку.
Де завантажити:
http://brackets.io
Sublime Text
Популярний серед веб-розробників редактор для Mac, Windows, Linux. Хоча Sublime Text є платним, але можна завантажити з сайту незареєстровану версію і користуватися нею необмежений час.
Де завантажити:
https://www.sublimetext.com/3
Visual Studio Code
Visual Studio Code - редактор вихідного коду, розроблений Microsoft для Windows, Linux і macOS. Розповсюджується безкоштовно, розробляється як програмне забезпечення з відкритим вихідним кодом, але готові збірки платні.
Де завантажити:
https://code.visualstudio.com/download
Браузер
Браузер - це програма, для перегляду веб-сторінок. На перших кроків підійде будь-який браузер, але з підвищенням досвіду і знань потрібно скачати всі найпопулярніші, щоб перевіряти правильність відображення сайту в різних браузерах. Справа в тому, що кожен браузер має свої унікальні особливості, тому для перевірки універсальності коду потрібно переглядати і коригувати код з їх урахуванням. Сьогодні найбільшою популярністю користуються такі браузери: Chrome, Firefox, Internet Explorer, Opera, Safari.
Google Chrome
Браузер, що з'явився на ринку в кінці 2008 року. Розроблено компанією Google.
Де завантажити:
https://www.google.ru/intl/ru/chrome/browser/desktop/
Mozilla Firefox
Перспективний браузер, який отримав визнання у всьому світі. Браузер Firefox є відкритою системою, що розробляється групою Mozilla.
Де завантажити:
https://www.mozilla.org/ru/firefox/products/
Microsoft Internet Explorer (IE)
Один з найстаріших браузерів, який безкоштовно встановлюється разом з операційною системою Windows. Це і визначило його популярність.
Де завантажити:
https://www.microsoft.com/ru-ru/download/internet-explorer.aspx
Microsoft Edge
Новий браузер, який прийшов на зміну IE. Встановлюється з операційною системою Windows 10.
Де завантажити:
https://www.microsoft.com/ru-ru/windows/microsoft-edge
Opera
Швидкий і зручний браузер, що підтримує безліч додаткових можливостей, що допомагають працювати з сайтами.
Де завантажити:
http://ru.opera.com/download/
Safari
Цей браузер встановлюється разом з операційною системою MacOS на комп'ютерах, а також на смартфонах і планшетах Apple.
Де завантажити:
http://www.apple.com/ru/safari/
Валідатор
Валідація HTML-документа призначена для виявлення помилок в синтаксисі веб-сторінок і розбіжностей зі специфікацією HTML. Відповідно, програма або сервіс для такої перевірки називається валідатором.
Для перевірки слід зайти за адресою validator.w3.org і ввести шлях до документу що перевіряється або сайту в спеціальній формі. Після перевірки будуть показані можливі помилки або з'явиться напис, що документ пройшов валідацію успішно.
Графічний редактор
Графічний редактор необхідний для обробки зображень і їх підготовки для публікації на веб-сторінці. Найпопулярнішою програмою такого роду є Photoshop. Але в більшості випадків міць Photoshop-а надлишкова і краще скористатися чимось простішим і швидшим. Зокрема, програма Paint.Net дозволяє зробити всі необхідні маніпуляції із зображеннями, до того ж безкоштовна.
Завантажити Paint.Net
http://www.getpaint.net/download.html
Paint.Net працює тільки під з ОС Windows, для інших операційних системи є редактор Gimp, також безкоштовний.
Завантажити Gimp
https://www.gimp.org/downloads/
З цікавих редакторів є Pixlr, версія якого існує у вигляді веб-додатку, за своїми можливостями віддалено нагадує Photoshop, але працює прямо в браузері. Це дозволяє швидко змінити графічний файл і не встановлювати додаткові програми.
Завнтажити Pixlrhttps://pixlr.com/editor/