Помимо компьютера и подключения к Интернету, большинство инструментов, необходимых для создания веб-сайта, включают: программное обеспечение, некоторые из которых уже могут быть на вашем компьютере. Вам понадобится текстовый или 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.
- HTML-редактор CoffeeCup особенно полезен для новых разработчиков, которые больше заинтересованы в изучении кода, чем в визуальном интерфейсе. Этот надежный редактор поставляется с шаблонами и имеет средства проверки, которые помогут защитить ваш код от ошибок. Он включает автозавершение кода и поддерживает другие языки программирования вы можете использовать вместе с HTML. Программа выделяет ошибки, объясняет, почему они появились, и подсказывает, как их исправить. CoffeeCup HTML Editor работает в Windows.
- Mobirise - редактор HTML для людей, которые не хотят связываться с кодом. Все дело в выборе тема а затем перетаскивание элементов на страницу. Добавляйте текст так же, как в обычном текстовом редакторе, и вставляйте изображения, видео или значки - и все это без написания кода; Mobirise сделает это за вас. Mobirise доступен для Windows и Mac, и это бесплатно.
Веб-браузеры
Веб-сайты могут выглядеть по-разному от браузера к браузеру, поэтому очень важно тестировать свои веб-страницы, чтобы убедиться, что они выглядят и функционируют должным образом. Chrome, Firefox, Safari (Mac), Опера, и Edge (Windows) - самые популярные браузеры.
Вам также необходимо протестировать свои страницы на внешний вид и работу в мобильных браузерах. Большинство настольных браузеров предлагают возможность просматривать веб-сайты в окнах разного размера. Например, множество инструментов тестирования доступно в Google Chrome по адресу Вид > Разработчик > Инструменты разработчика. Выберите значок смартфона в верхнем левом углу окна разработчика, чтобы просмотреть любую страницу в окнах разного размера и в мобильных операционных системах.
Графический редактор
Тип графического редактора, который вам нужен, зависит от вашего сайта. 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 это бесплатное кроссплатформенное программное обеспечение с открытым исходным кодом, известное своей бесшовной интеграцией с внешними редакторами и привлекательным пользовательским интерфейсом.
- Бесплатный FTP а также Прямой FTP производятся той же компанией. Free FTP - это минималистичный клиент, отвечающий базовым требованиям к передаче файлов. Direct FTP - это расширенная версия, предлагающая расширенные функции. Обе версии поддерживаются Windows 7, 8 и Vista, но для Windows 10 подходит только Direct FTP.
- Передать это премиальный FTP-клиент только для Mac. Он обеспечивает необычно быстрые переводы и поддерживает Amazon CloudFront.
- Симпатичный FTP это мощный FTP-клиент премиум-класса, который можно использовать для одновременного выполнения до 100 переводов. Он считается одним из самых безопасных доступных FTP-клиентов.