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-редактор — это программный инструмент для создания и изменения HTML-документов. Редакторы HTML можно разделить на три категории: текстовые редакторы , WYSIWYG- редакторы и онлайн-редакторы .
Текстовые редакторы HTML
Текстовые редакторы HTML можно разделить на две категории: простой текстовый редактор и редактор исходного текста .
Особенности базового текстового редактора :
1. Вы можете написать простой текст.
2. Помимо базовых функций обработки файлов (таких как создание новых, открытие, копирование, вставка и т. Д.) Доступны только некоторые другие функции, такие как установка размера шрифта, базовый поиск строки и т. Д.
Примеры некоторых основных текстовых редакторов : Emacs, Nano, Notepad, SciTE, TextMate, UltraEdit, vi, Vim и т. Д.
Особенности исходного текстового редактора :
3. Панели инструментов и сочетания клавиш.
4. Вставка общих элементов HTML (необязательно).
7. Автозаполнение (опционально).
Примеры некоторых текстовых редакторов исходного кода: HTML-редактор Alleycode, Aptana, BlueFish, Coda, Eclipse с платформой веб-инструментов, EditPlus, HTML-Kit, Notepad ++, IDE NetBeans, PHPEdit, Scintilla, TextMate, TextPad и т. Д.
Базовый текстовый редактор HTML
WYSIWYG Редакторы
Этот вид HTML-редактора предоставляет интерфейс, который выглядит так, как страница будет выглядеть в веб-браузере. Этот вид редакторов HTML предлагает все функции, доступные в редакторе исходного текста.
Примеры WYSIWYG-редакторов: Dreamweaver, Amaya, CoffeeCup HTML Editor, KompoZer, Microsoft Visual Web Developer Express, Microsoft Publisher, Opera Dragonfly Quanta Plus, SeaMonkey Composer, TinyMce и т. Д.
Редактор WYSIWYG