HTML-редактор

Редактор HTML — это программа, используемая для редактирования HTML , разметки веб -страницы . Хотя HTML-разметкой на веб-странице можно управлять с помощью любого текстового редактора , специализированные HTML-редакторы могут обеспечить удобство, дополнительную функциональность и организацию. Например, многие редакторы HTML поддерживают не только HTML, но и связанные с ним технологии, такие как CSS , XML и JavaScript или ECMAScript . В некоторых случаях они также управляют связью с удаленными веб-серверами через FTP и WebDAV , а также с системами контроля версий, такими как Subversion или Git . Многие программы обработки текста , графического дизайна и верстки страниц , не предназначенные для веб-дизайна , такие как Microsoft Word или Quark XPress , также имеют возможность функционировать как редакторы HTML.

Типы редакторов

Существует две основные разновидности HTML-редакторов: текстовые и WYSIWYG (что видишь, то и получаешь).

Текстовые редакторы

Текстовые редакторы, предназначенные для использования с HTML, обычно обеспечивают как минимум подсветку синтаксиса . Некоторые редакторы дополнительно оснащены шаблонами , панелями инструментов и сочетаниями клавиш для быстрой вставки общих HTML элементов и структур . Мастера , всплывающие подсказки и автозаполнение могут помочь в решении типичных задач.

Текстовые редакторы, обычно используемые для HTML, обычно включают либо встроенные функции, либо интеграцию с внешними инструментами для таких задач, как контроль версий , проверка и проверка ссылок , очистка и форматирование кода , проверка орфографии, загрузка по FTP или WebDAV, а также структурирование в виде файла. проект. Некоторые функции, такие как проверка или проверка ссылок, могут использовать онлайн-инструменты , требующие подключения к сети.

Текстовые редакторы требуют от пользователя понимания HTML и любых других веб-технологий, которые дизайнер хочет использовать, таких как CSS, JavaScript и серверные языки сценариев.

Чтобы облегчить это требование, некоторые редакторы позволяют редактировать разметку в более наглядно организованных режимах, чем простое цветовое выделение, но в режимах, которые не считаются WYSIWYG. Эти редакторы обычно включают возможность использования окон палитры или диалоговых окон для редактирования текстовых параметров выбранных объектов . Эти палитры позволяют редактировать параметры в отдельных полях или вставлять новые теги путем заполнения экранной формы и могут включать дополнительные виджеты для представления и выбора параметров при редактировании параметров (например, предварительный просмотр изображений или стилей текста) или редактор структуры для расширения и изменения параметров. свернуть объекты и свойства HTML.

HTML-редакторы WYSIWYG

Редакторы WYSIWYG HTML предоставляют интерфейс редактирования, напоминающий то, как страница будет отображаться в веб-браузере . Поскольку использование редактора WYSIWYG может не требовать каких-либо знаний HTML, неопытному пользователю компьютера зачастую проще начать с него.

Представление WYSIWYG достигается за счет внедрения механизма компоновки . Он может быть написан специально или основан на используемом в веб-браузере. Цель состоит в том, чтобы на всех этапах редактирования визуализированный результат представлял то, что будет видно позже в типичном веб-браузере.

WYSIWYM (что вы видите, то и имеете в виду ) — это парадигма, альтернативная редакторам WYSIWYG. Вместо того, чтобы сосредотачиваться на формате или представлении документа, он сохраняет предполагаемое значение каждого элемента. Например, заголовки страниц, разделы, абзацы и т. д. помечаются как таковые в программе редактирования и соответствующим образом отображаются в браузере.

Трудности в достижении WYSIWYG

Данный HTML-документ будет иметь непоследовательный вид на разных платформах и компьютерах по нескольким причинам:

Разные браузеры и приложения по-разному отображают одну и ту же разметку.: Одна и та же страница может отображаться немного по-другому, например, в Chrome , Safari , Edge , Internet Explorer и Firefox на экране с высоким разрешением, но она будет выглядеть совсем по-другому в совершенно корректном текстовом браузере Lynx . Его снова необходимо отображать по-разному на КПК , телевизоре с доступом в Интернет и на мобильном телефоне . Удобство использования в речевом браузере или браузере Брайля , а также в программе чтения с экрана, работающей с обычным браузером, предъявляет совершенно иные требования. ^{[ нужны разъяснения ]} аспекты базового HTML. Все, что может сделать автор, — это предложить внешний вид.
Веб-браузеры, как и все компьютерные программы, имеют ошибки.: Они могут не соответствовать действующим стандартам . Безнадежно пытаться проектировать веб-страницы с учетом всех текущих ошибок распространенных браузеров: каждый раз, когда выходит новая версия каждого браузера, значительная часть Всемирной паутины будет нуждаться в перекодировании, чтобы учесть новые ошибки и новые исправления. Обычно считается, что гораздо разумнее разрабатывать дизайн в соответствии со стандартами, держаться подальше от «передовых» функций, пока они не приживутся, а затем ждать, пока разработчики браузеров догонят ваши страницы, а не наоборот. ^{[ 1 ]} Например, никто не может утверждать, что CSS по-прежнему является «передовым», поскольку в настоящее время в обычных браузерах широко распространена поддержка всех основных функций. ^{[ 2 ]} даже если многие WYSIWYG и другие редакторы еще не полностью догнали этот процесс. ^{[ 3 ]}
Один визуальный стиль может представлять несколько смысловых значений.: Семантическое значение, полученное из базовой структуры HTML-документа, важно для поисковых систем, а также для различных инструментов обеспечения доступности. На бумаге мы можем определить, исходя из контекста и опыта, представляет ли жирный текст заголовок, выделение или что-то еще. Но передать это различие в редакторе WYSIWYG очень сложно. Простого выделения фрагмента текста жирным шрифтом в редакторе WYSIWYG недостаточно, чтобы сказать читателю, *почему* текст выделен жирным шрифтом — что семантически представляет жирный шрифт.
Современные веб-сайты редко создаются таким образом, чтобы WYSIWYG был полезен.: Современные веб-сайты обычно используют систему управления контентом или какое-либо другое средство на основе процессора шаблонов для создания страниц «на лету» с использованием контента, хранящегося в базе данных. Отдельные страницы никогда не хранятся в файловой системе, поскольку они могут быть разработаны и отредактированы в редакторе WYSIWYG, поэтому некоторая форма абстрактного макета на основе шаблонов неизбежна, что сводит на нет одно из основных преимуществ использования редактора WYSIWYG.

Действительная HTML-разметка

HTML — это структурированный язык разметки . Существуют определенные правила написания HTML, чтобы он соответствовал стандартам W3C для Всемирной паутины. Соблюдение этих правил означает, что веб-сайты доступны на компьютерах всех типов и марок, для трудоспособных людей и людей с ограниченными возможностями, а также на беспроводных устройствах, таких как мобильные телефоны и КПК, с их ограниченной пропускной способностью и размером экрана. Однако большинство HTML-документов в Интернете не соответствуют требованиям стандартов W3C. По данным исследования, проведенного в 2011 году на 350 наиболее популярных веб-сайтах (выбранных по индексу Alexa), 94 процента веб-сайтов не проходят тесты разметки и таблицы стилей веб-стандартов или неправильно применяют кодировку символов. Даже такие синтаксически правильные документы могут оказаться неэффективными из-за ненужного повторения или основанных на правилах, которые устарели уже несколько лет. Текущие рекомендации W3C по использованию CSS с HTML были впервые формализованы W3C в 1996 году. ^{[ 4 ]} и с тех пор были пересмотрены и уточнены. ^{[ 5 ]}^{[ 6 ]}

Эти рекомендации подчеркивают отделение контента (HTML или XHTML) от стиля (CSS). Преимущество этого метода заключается в том, что информация о стиле предоставляется один раз для всего сайта, а не повторяется на каждой странице, не говоря уже о каждом элементе HTML. С тех пор дизайнеры редакторов WYSIWYG бьются над тем, как лучше всего представить эти концепции своим пользователям, не сбивая их с толку, раскрывая основную реальность. Все современные редакторы WYSIWYG в некоторой степени преуспевают в этом, но ни один из них не преуспел полностью.

Независимо от того, была ли веб-страница создана или отредактирована, WYSIWYG или вручную, для того, чтобы иметь успех среди как можно большего числа читателей и зрителей, а также для поддержания «всемирной» ценности самой сети, в первую очередь она должна состоять из допустимой разметки и кода. ^{[ 7 ]} Его не следует считать готовым для Всемирной паутины до тех пор, пока его синтаксис HTML и CSS не будет успешно проверен с использованием бесплатных служб проверки W3C ( W3C HTML Validator и W3C CSS Validator ) или некоторых других надежных альтернатив. ^{[ 7 ]}

Доступность веб-страниц для людей с ограниченными физическими возможностями, зрением или другими нарушениями является не только хорошей идеей, учитывая повсеместность и важность Интернета в современном обществе, но также предусмотрена законом. В США Закон об американцах-инвалидах и в Великобритании Закон о дискриминации инвалидов устанавливают требования к веб-сайтам, управляемым организациями, финансируемыми государством. Во многих других странах подобные законы либо уже существуют, либо скоро появятся. ^{[ 7 ]} Сделать страницы доступными сложнее, чем просто сделать их действительными; это обязательное условие, но есть много других факторов, которые следует учитывать. ^{[ 8 ]} Хороший веб-дизайн, независимо от того, выполнен ли он с использованием инструмента WYSIWYG или без него, также должен учитывать эти факторы.

Какие бы программные инструменты ни использовались для проектирования, создания и обслуживания веб-страниц, качество базового HTML зависит от навыков человека, который работает над страницей. Некоторые знания HTML, CSS и других языков сценариев, а также знакомство с текущими рекомендациями W3C в этих областях помогут любому дизайнеру создавать более качественные веб-страницы с HTML-редактором WYSIWYG или без него. ^{[ 9 ]}

См. также

Ссылки

^ Бос, Берт (6 марта 2003 г.). «Эссе о принципах проектирования W3C» . W3C . Проверено 23 октября 2013 г.
^ «Каскадные таблицы стилей» . W3C . Проверено 23 октября 2013 г.
^ «Каскадные таблицы стилей» . W3C . Проверено 23 октября 2013 г.
^ Хокон Виум Ли; Берт Бос. «Каскадные таблицы стилей, уровень 1» . W3C . Проверено 23 октября 2013 г.
^ «Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1)» . W3C .
^ «XHTML™ 1.1 — XHTML на основе модулей — второе издание» . W3C .
^ Jump up to: ^а ^б ^с Гарольд, Эллиотт Расти (2008). Рефакторинг HTML . Бостон: Эддисон Уэсли. ISBN 978-0-321-50363-3 .
^ «Руководство по обеспечению доступности веб-контента (WCAG) 2.0» . W3C. 2008 год . Проверено 23 октября 2013 г.
^ «Введение Дэйва Рэггетта в HTML» . W3C. 24 мая 2005 года . Проверено 23 октября 2013 г.

[1] Бос, Берт (6 марта 2003 г.). «Эссе о принципах проектирования W3C» . W3C . Проверено 23 октября 2013 г.

[2] «Каскадные таблицы стилей» . W3C . Проверено 23 октября 2013 г.

[3] «Каскадные таблицы стилей» . W3C . Проверено 23 октября 2013 г.

[4] Хокон Виум Ли; Берт Бос. «Каскадные таблицы стилей, уровень 1» . W3C . Проверено 23 октября 2013 г.

[5] «Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1)» . W3C .

[6] «XHTML™ 1.1 — XHTML на основе модулей — второе издание» . W3C .

[RefactoringHtml-7] Jump up to: ^а ^б ^с Гарольд, Эллиотт Расти (2008). Рефакторинг HTML . Бостон: Эддисон Уэсли. ISBN 978-0-321-50363-3 .

[8] «Руководство по обеспечению доступности веб-контента (WCAG) 2.0» . W3C. 2008 год . Проверено 23 октября 2013 г.

[9] «Введение Дэйва Рэггетта в HTML» . W3C. 24 мая 2005 года . Проверено 23 октября 2013 г.

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

[ 7 ]

[ 8 ]

[ 9 ]