Инструментарий

Для эффективной работы не обойтись без необходимых и привычных инструментов, в том числе и при написании кода 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

Браузер

Браузер — это программа, предназначенная для просмотра веб-страниц. На первых порах подойдёт любой браузер, но с повышением опыта и знаний потребуется завести целый «зверинец», чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учётом. На сегодняшний день наибольшей популярностью пользуются следующие браузеры: Chrome, Firefox, Internet Explorer, Opera, 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, но работающее прямо в браузере. Это позволяет быстро внести правки в графический файл, не устанавливая дополнительных программ.

https://pixlr.com/editor/