Крім комп'ютера і підключення до Інтернету, більшість інструментів, необхідних для створення веб-сайту, - це програми, деякі з яких вже можуть бути на вашому комп'ютері. Вам потрібен текстовий або HTML-редактор, графічний редактор, веб-браузери та FTP-клієнт для завантаження файлів на ваш веб-сервер.
Вибір простого текстового або HTML-редактора
Ви можете написати HTML у текстовому редакторі, такому як Блокнот у Windows 10, TextEdit і Sublime Text на Mac, або Vi або Emacs у Linux. Ви створюєте HTML-код для сторінки, зберігаєте документ як веб-файл і відкриваєте його в переглядачі, щоб переконатися, що він виглядає так, як і має бути.
Якщо ви хочете більше функціональності, ніж пропонує простий текстовий редактор, використовуйте замість цього HTML-редактор. Редактори HTML розпізнають код і можуть визначити помилки кодування перед запуском файла. Вони також можуть додати закриваючі теги, які ви забули, і виділити непрацюючі посилання. Вони розпізнають та підтримують інші мови кодування, такі як CSS, PHP та JavaScript.
Багато HTML-редакторів на ринку варіюються від базового до професійного рівня. Якщо ви новачок у написанні веб-сторінок, один з редакторів WYSIWYG («Що ви бачите, то і отримуєте») може підійти вам найкраще. Деякі редактори показують тільки код, але деякі дозволяють перемикатися між виставами кодування і візуальними виставами. Ось деякі з багатьох доступних веб-редакторів HTML:
- Komodo IDE і його зручний інтерфейс підійдуть як початківцям, так і досвідченим веб-розробникам. Функція автозаповнення в Komodo IDE особливо зручна, коли ви пишете код для загальних елементів, таких як посилання. Програмне забезпечення підтримує кодування кольорів різних мов кодування, таких як HTML, CSS та багато інших. Komodo IDE працює на Windows, Mac і Linux.
- CoffeeCup HTML Editor особливо корисний для нових розробників, які більше зацікавлені у вивченні коду, ніж у візуальному інтерфейсі. Цей надійний редактор постачається з шаблонами і має засоби перевірки правильності, які допомагають уникнути помилок у вашому коді. Він включає завершення коду і підтримує інші мови кодування, які ви можете використовувати в поєднанні з HTML. Програмне забезпечення виділяє помилки, пояснює, чому вони з'явилися, і розповідає, як їх виправити. CoffeeCup HTML Editor працює в Windows.
- Mobirise - це редактор HTML для людей, які не хочуть зв'язуватися з кодом. Вся справа у виборі теми, а потім перетягуванні елементів на сторінці. Додавайте текст так само, як у звичайному текстовому редакторі, і вставляйте зображення, відео або значки - і все це без написання коду; Mobirise робить цю частину для вас. Mobirise доступний для Windows і Mac, і це безкоштовно.
Веб-переглядачі
Веб-сайти можуть виглядати по-різному в різних браузерах, тому вкрай важливо протестувати свої веб-сторінки, щоб переконатися, що вони виглядають і функціонують належним чином. Chrome, Firefox, Safari (Mac), Opera і Edge (Windows) - найпопулярніші браузери.
Ви також повинні перевірити свої сторінки на зовнішній вигляд і функціонування в мобільних браузерах. Більшість настільних переглядачів надають можливість переглядати веб-сайти у вікнах різного розміру. Наприклад, багато інструментів тестування доступно в Google Chrome у View > Developer > Developer Tools. Виберіть значок смартфона в лівому верхньому кутку вікна розробника, щоб побачити будь-яку сторінку у вікнах різного розміру і в мобільних операційних системах.
Графічний редактор
Тип графічного редактора, який вам потрібен, залежить від вашого сайту. Adobe Photoshop є золотим стандартом, але вам може не знадобитися така велика потужність, плюс вам може знадобитися програма векторної графіки для роботи з логотипами та ілюстраціями. Ось кілька графічних редакторів, на які варто звернути увагу при розробці веб-додатків:
- GIMP - це безкоштовна програма для редагування фотографій з відкритим вихідним кодом, яка надає багато функцій своїх більш дорогих конкурентів. Як програмне забезпечення з відкритим вихідним кодом, воно доступне для Windows, Mac і Linux.
- Photoshop Elements для Mac і ПК є полегшеною версією свого тезки, але має безліч функцій.
- Corel PaintShop Pro містить майже всі інструменти, які ви знайдете в Photoshop, у зручному інтерфейсі.
- Inkscape для Windows, Mac і Linux - безкоштовний редактор векторної графіки. Ця альтернатива більш дорогому Adobe Illustrator має більш ніж достатні можливості для простої дизайнерської роботи та веб-графіки.
Клієнт FTP
Вам потрібен клієнт FTP (протокол передачі файлів) для передачі файлів HTML і підтримуючих зображень та графіки на ваш веб-сервер. FTP доступний через командний рядок у Windows, Macintosh і Linux, але виділений FTP-клієнт набагато простіше у використанні. Кращі FTP-клієнти включають в себе:
- FileZilla (безкоштовно) доступна для Windows, Mac і Linux. Він підтримує перетягування файлів і має функцію паузи і відновлення для завантаження великих файлів.
- Cyberduck - це безкоштовне кроссплатформенне програмне забезпечення з відкритим вихідним кодом, відоме своєю безшовною інтеграцією із зовнішніми редакторами та привабливою користь