HTML редакторы и программы
Из предыдущей главы мы узнали, что HTML является языком гипертекстовой разметки, который используется для создания веб-страниц. Для эффективной работы с HTML и написания кода вам понадобятся следующие инструменты и программы:
- текстовый редактор или редактор HTML для написания и редактирования кода
- браузер для просмотра результатов
- валидатор — специальная программа, проверяющая соответствие HTML-кода страниц сайта современным стандартам и выявления ошибок в коде
Рассмотрим эти инструменты подробнее.
Редакторы
Для написания и редактирования HTML кода вам понадобится редактор. Существует довольно много редакторов для написания HTML кода, однако для работы подойдет не каждый. Нужен такой редактор, который может:
- подсвечивать синтаксические конструкции — выделять теги, текст, ключевые слова и параметры текста различными цветами, шрифтами и начертаниями.
- поддерживать работу с вкладками для работы с несколькими документами в одном окне.
- проверять текущий документ на ошибки.
- сворачивать код — скрывать определенный фрагмент редактируемого кода или текста, оставляя лишь одну строку.
Самыe популярныe редакторы:
Пока вы только учитесь, для написания кода подойдет обычный Блокнот (Notepad). Давайте посмотрим, как при помощи этого инструмента можно создать HTML документ.
Для начала создайте папку, где вы будете хранить HTML-файлы, и следуйте приведенным ниже инструкциям.
1. Откройте Блокнот (Notepad)
Нажмите Пуск —> Все приложения —> Стандартные — Windows —> Блокнот.
2. Напишите код
html> html> head> title>Заголовок веб-страницы title> head> body> h1>Заголовок документа h1> p>Абзац текста p> body> html>Результат
3. Сохраните HTML документ
В меню “Файл” выберите “Сохранить”, присвойте имя документу, используя расширение .htm или .html. (Мы рекомендуем использовать расширение .html). Смените кодировку на UTF-8, чтобы код в браузере отображался без ошибок. Сохраните файл в папку, которую создали для хранения HTML-файлов.
4. Откройте HTML документ в браузере
Щелкните правой кнопкой мыши по файлу и в меню выберите “Открыть с помощью”. Потом выберите браузер, на котором хотите посмотреть, как выглядит написанный вами код.
Браузер
Для просмотра созданных вами веб-страниц вам понадобится браузер. Для начала подойдет любой браузер, Google Chrome, Opera или Firefox , но потом вам необходимо будет иметь под рукой весь комплект. Дело в том, что у каждого браузер есть свои особенности, поэтому написанный вами код надо будет проверять в каждом браузере.
Валидатор
Проверка валидности кода HTML — один из важных этапов разработки веб-страниц. Для проверки используются специальные программы, валидаторы, которые выявляют ошибки в синтаксе веб-страницы и расхождение со спецификацией HTML.
Самым популярным онлайн-сервисом является валидатор validator.w3.org. Введите URL документа или сайта в специальной форме, и после проверки сервис укажет ошибки, если таковые имеется, либо выдаст сообщение, что документ прошел валидацию.
Для проверки валидации локальных файлов можно использовать специальные программы, например, Tidy. В некоторых редакторах (PSPad) есть встроенный валидатор, и проверку кода можно выполнить прямо в нем.
Выбираем HTML редактор – путеводитель для новичков
Времена создания HTML страниц в блокноте Windows прошли и сейчас для вебмастеров создано огромное количество разнообразного программного обеспечения, которое призвано упростить процесс разработки и верстки веб-страниц, а также сократить время, затрачиваемое на эту работу, в несколько раз.
Даже самый простой визуальный HTML редактор, не говоря о сложных программных пакетах, имеет ряд преимуществ:
- Выделение синтаксиса популярных языков программирования и верстки;
- Вставка распространенных веб-конструкций в автоматическом режиме;
- Визуальные редакторы HTML позволяют пользователю создать веб-страницы, не обладая навыками программирования;
- Автоматическое исправление ошибок и коррекция кода;
- Работа с несколькими файлами одновременно.
Разновидности HTML редакторов
Все HTML редакторы можно разделить на две основные категории:
- WYSIWYG HTML редактор кода . С помощью программ данного типа можно создавать веб-страницы без знания языков программирования, что следует из названия: What You See Is What You Get (что видишь, то и получаешь). Преимуществом является отсутствие углубления непосредственно в процесс строительства страницы, однако это же является и недостатком. Редакторы этого типа зачастую формируют объёмные HTML коды, в результате чего документ получается невероятно громоздким и время его загрузки увеличивается;
- Редактор HTML тегов . Работая с программами данного типа вы можете наблюдать непосредственный код страницы и изменять его. HTML документ получается гораздо более компактным по сравнению с результатами работы редакторов первого типа. Однако для комфортной работы и получения приемлемого результата вам необходимо знать языки веб-программирования на довольно высоком уровне.
Кроме того, HTML редакторы могут быть выполнены как в виде онлайн сервисов, так и в виде полноценных программных пакетов.
Программы HTML редакторы
Можно выделить две наиболее популярных программы для редактирования HTML кода: Notepad++ и Adobe Dreamweaver .
Notepad++ является бесплатным редактором HTML и разрабатывается open-source сообществом энтузиастов, обладает мультиязычной поддержкой, подсвечивает синтаксис самых распространенных языков веб-программирования (например, CSS, PHP и другие).
Интерфейс данной программы выполнен по принципу вкладок, благодаря чему можно работать сразу с несколькими документами одновременно.
Adobe Dreamweaver — знаменитый WYSIWYG HTML редактор для Mac и Windows, позволяет работать в визуальном, текстовом и смешанном режимах.
Данное приложение успешно развивается на протяжении уже более чем десяти лет, имеет удобный интерфейс и огромные функциональные возможности.
Несмотря на то, что программа является платной, многие веб-мастера считают HTML5 редактор Adobe Dreamweaver лучшим решением на рынке HTML редакторов.
Online редакторы HTML
Если вас по какой-либо причине не устраивает использование программ-редакторов HTML, существуют и аналогичные online сервисы, которые позволят вам полноценно работать вдали от домашнего или офисного ПК.
Рассмотрим пять наиболее популярных сервисов:
Для того чтобы принять правильное решение и выбрать наиболее удобный для вас редактор HTML, следует ознакомиться и опробовать на практике каждый предложенный нами вариант.
Обратите внимание на свои требования к программам подобного рода, такие, как визуальный редактор HTML или текстовый, присутствуют ли функции автоматизации, проверки синтаксиса и прочие, ведь имея чёткое представление о том, что именно вам требуется, выбрать подходящий вариант будет гораздо проще.