Инструменты для Web-разработки

О разметке Web-документа

 

Язык HTML прошел большой путь с того момента, как в 1991 году Тим Бернерс-Ли (Tim Berners-Lee) создал его в качестве простого способа передачи смысла и структуры гипертекстовых документов. За весьма короткий срок конкурирующие производители браузеров добавили новые элементы к исходному минимальному их набору, а первые Web-дизайнеры стали использовать HTML как визуальный инструмент разработки.

XHTML - это переработка HTML в соответствии с требованиями XML. Иными словами, в нем используется тот же словарь (те же элементы и атрибуты), как в HTML, но синтаксические правила взяты из XML, который является более строгим языком, чем HTML.

 

World Wide Web Consortium

Видя необходимость упорядочить разработку HTML, Бернерс-Ли в 1994 году основал World Wide Web Consortium (W3C). W3C продолжает надзирать за HTML и связанными с ним Web-технологиям и выпускает обновленные и стандартизованные версии HTML в виде публикаций, которые с 1995 года называются рекомендациями (Recommendations).

 

Разметка документа

Говорят, что размеченный HTML-документ образует структурный уровень Web-страницы. Это основа, над которой надстраиваются уровень представлений (инструкции по передаче и отображению элементов) и уровень поведения (скрипты и интерактивная работа).

Одна из этих важных концепций, которая формируют способ восприятия и обработки HTML состоит в том, что базовой целью HTML как языка разметки является предоставление семантического описания (смысла) материала и формирование структуры документа. Оно не связано с представлением, т. е. с тем, как документ будет выглядеть в браузере. Представление - это функция каскадных таблиц стилей (Cascading Style Sheets, CSS).

В том, что инструкции, связанные с представлением, должны храниться отдельно от семантической и структурной разметки, нет ничего нового. Это было назначением HTML с самого его появления как приложения SGML.

 

Отделение представления от структуры документа

 

До HTML существовал язык SGML (Standard Generalized Markup Language), который представлял собой сложный язык для описания структуры документов независимо от их внешнего вида. SGML - это обширный набор правил разработки языков разметки, например, таких, как HTML, но HTML использует лишь малую часть его возможностей.

Поскольку HTML является лишь частным случаем системы разметки SGML, принцип хранения информации, связанный с представлением, отдельно от структуры документа является внутренне присущим и HTML. В ранние годы развития Web этот идеал был нарушен созданием HTML-тегов, содержащих прямые стилевые инструкции, такие, как элемент font и атрибут bgcolor.

При такой системе W3C интенсивнее, чем когда-либо, работает над очисткой стандарта HTML, чтобы этот стандарт заработал так, как это изначально планировалось. Постепенно к этой работе подключаются и создатели инструментов разработки и производители браузеров.

 

Начните с «хорошей» разметки

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

 

Создание документов в соответствии со стандартами

Это означает использование HTML и XHTML в соответствии с правилами, определяемыми рекомендациями, а также обеспечение проверки документов на соответствие заявленному DTD. Следование стандартам обеспечит для ваших документов совместимость вперед, с развивающимися технологиями и возможностями браузеров.

 

Использование семантической разметки

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

Семантическая разметка не синоним следования стандартам. Можно создать документ с элементами font, br и i, который прекрасно пройдет проверку, но это ничего не будет значить с точки зрения осмысленности разметки. Семантическая разметка гарантирует доступ к документу для широкого диапазона браузеров, от настольных компьютеров до мобильных телефонов и средств чтения с экрана. Она также позволит автоматизированным системам, таким, как средства индексирования в поисковых системах, правильно анализировать ваши материалы и принимать решения, связанные с их обработкой.

 

Логическое структурирование документов

Обеспечивайте чтение ваших материалов в логической последовательности, чтобы повысить удобство чтения в разных браузерных средах. Информация, которая должна читаться первой, должна находиться в начале документа. Вы всегда можете использовать таблицы стилей для размещения элементов там, где вы хотели бы их видеть.

 

Храните инструкции представления отдельно от структуры

Используйте для управления представлением таблицы стилей. Если хранить всю стилевую информацию документа в отдельном документе таблицы стилей, это упростит изменение дизайна или изменение назначения документа. Для разметки это означает, что нужно избегать использования стилевых (X)HTML-элементов и атрибутов, которые все еще присутствуют в рекомендациях (например, элемент b для жирного шрифта), и использовать соответствующую семантическую альтернативу (например, strong) в правиле таблицы стилей.

 

Основы разметки

HTML пли XHTML-документ представляет собой документ ASCII (обычный текст) или, что более часто, Unicode (например, UTF-8), который размечается при помощи тегов, обозначающих элементы и другие необходимые объявления (например, язык разметки, на котором документ написан).

Элемент - представляет собой структурный компонент (например, абзац) или нужную функцию (например, перенос строки).

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

 

Элементы

Элементы обозначаются в тексте путем вставки специальных заключенных в скобки HTML-тегов. Большинство элементов используют следующий синтаксис:

 

<имя_элемента>содержимое</имя_элемента>

 

Имя элемента указывается в начальном теге (который также называется открывающим тегом), а затем также в конечном (или закрывающем) теге, и в последнем случае перёд ним ставится слеш (/). Конечный тег работает примерно как «отключение» элемента.

Ничего из того, что заключено в скобки, в браузере или другом пользовательском агенте не отображается. Важно отметить, что элемент включает в себя как содержимое, так и свою разметку (начальный и конечный теги).

 

В XHTML все имена элементов и атрибутов должны быть в нижнем регистре. HTML регистр не учитывает.

 

Рассмотрим пример HTML-разметки, в котором текст, находящийся в начале этого раздела, рассматривается как заголовок второго уровня и как элемент-абзац.

<h2>Элементы</h2>

<p>Элементы обозначаются в тексте путем вставки специальных заключенных в скобки HTML-тегов Большинство элементов используют следующий синтаксис </p>

 

В HTML конечный тег для некоторых элементов является необязательным, и браузер определяет окончание элемента по контексту. Такая практика наиболее распространена применительно к элементу p (абзац). Большинство браузеров автоматически завершает абзац, когда встречает новый начальный тег. В XHTML использование конечных тегов является обязательным.

Некоторые элементы не имеют содержимого, поскольку используются в качестве простой директивы. Говорят, что такие элементы пустые. Примером такого элемента является элемент-изображение (img). Он заставляет браузер включить в текущую страницу внешний графический файл. К другим пустым элементам относятся перевод строки (br), горизонтальная линейка (hr) и элементы, содержащие информацию о документе и не влияющие на отображение материалов, такие, как meta и base.

К пустым элементам относятся: <area />, <frame />, <link />, <base />, <hr />, <meta />, <basefont />, <img />, <param />, <br />, <input />, <col />, <isindex />.

В HTML пустые элементы просто не имели закрывающего тега. В XML закрывающий тег необходим для каждого элемента. Используется соглашение, по которому слеш применяется внутри тега, обозначая его окончание, например <img/>, <br/> и <hr/>.

Для обеспечения обратной совместимости рекомендуется добавлять пробел перед слешем. Пробел является обязательным, если вы отправляете XHTML-документ, указав в заголовке Content-Type тип text/html.

Прекрасным ресурсом с информацией по HTML-элементам является сайт (www.blooberry.com/indexdot/html/), который был создан и поддерживается Брайаном Уилсоном (Brian Wilson). На этом сайте предлагается алфавитный перечень всех HTML-элементов и их атрибутов, с объяснениями, сведениями о стандартах и информацией о поддержке браузерами.

 

Атрибуты

Атрибут уточняет или изменяет работу элемента. Атрибуты обозначаются парами из имени атрибута и значения, добавляемыми к начальному тегу элемента (конечные теги никогда не содержат атрибутов). Имена атрибутов и допустимые для них значения объявляются в DTD. Иными словами, вы не можете создавать свои собственные. Вы можете добить несколько атрибутов и один открывающий тег. Атрибуты, если они есть, указываются после имени тега и разделяются одним или несколькими пробелами. Порядок их следования значения не имеет.

Синтаксис элемента с атрибутами следующий:

 

<элемент атрибут = ”значение”>содержание</элемент>

 

Большинство браузеров не могут обрабатывать значения атрибутов, если их длина превышает 1024 символа. В значениях может учитываться регистр, особенно если это имена файлов или URL.

В HTML разрешается использовать некоторые значения без кавычек, например, если значение представляет собой одно слово, содержащее только буквы (a-z и A-Z), цифры (0-9), тире (-), точки (.), символы подчеркивания (_) и двоеточия (:). Лучше всего заключать в кавычки все значения, независимо от рекомендаций, которым вы следуете.

 

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

 

Вложенные элементы

HTML-элементы могут содержать другие элементы. Это называется вложенностью, и, чтобы данная возможность применялась правильно, весь элемент, включая его разметку, должен помещаться между начальным и конечным тегами другого элемента (родителя).

Правильное использование вложенности - это один из критериев хорошо сформированного документа.

В данном примере пункты списка (li) вложены в элемент - неупорядоченный список (ul).

<ul>

<li>Example 1</li>

<li>Example 2</li>

</ul>

 

Распространенная ошибка - закрытие родительского элемента до того, как будет закрыт элемент, который в него вложен (потомок). Это приводит к неверному перекрытию элементов и XHTML-документ становится плохо сформированным и может привести к ошибкам в отображении HTML-документов. В данном примере элементы вложены неверно, поскольку элемент strong должен быть закрыт до элемента a ( анкер)

 

Неверно: <а href=”#”>Click <strong>here.</a></strong>

Информация, которую браузеры игнорируют

 

Часть информации в HTML-документе, включая определенную разметку, игнорируется и оказывает очень малое или не оказывает никакого влияния на представление, когда документ отображается в браузере или в другом пользовательском агенте. Сюда относятся:

 

Переносы строки

Переносы строки в HTML-документе рассматриваются как пробелы, которые, как правило, объединяются с другими пробелами. Текст и элементы выводятся непрерывно, пока в тексте документа не встретится элемент p или br. Однако переносы строк отображаются, если текст размечен как предварительно отформатированный (pre) или если в таблице стилей используется свойство white-space: pre.

Табуляторы и множественныепробелы

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

 

очень, очень далеко

 

браузер выведен на экран:

 

очень, очень далеко

 

Дополнительные пробелы можно добавлять в текст, используя символьную сущность (&nbsp;). Однако несколько пробелов отображаются, если текст размечен как предварительно отформатированный (pre) или если в таблице стилей используется свойство white-space: pre. Обработка табуляторов в исходном коде документа достаточно проблематична для некоторых браузеров, и этого лучше избегать.

 

Пустые элементы p

Пустые элементы абзацев (<p>... </p> или только <p>), без содержащегося в них текста, интерпретируются большинством браузеров как избыточные и отображаются как одно завершение абзаца. Большинство браузеров отображают несколько элементов br в виде нескольких переносов строки.

 

Нераспознанный элемент

Браузер просто игнорирует любой элемент, который он не понимает или который был неверно указан. В зависимости от элемента и браузера это может приводить к разным результатам. Браузеры, как правило, отображают содержимое элемента и разметку как обычный текст, хотя некоторые более старые браузеры могут вообще ничего не отображать.

 

Текст комментариев

Браузеры не отображают текст, заключенный между специальными элементами: <!-- и -- > которые используются для обозначения комментария. Вот простой пример комментария:

 

<!-- Это комментарий -->

<!-- Это многострочный

комментарий, который

заканчивается здесь. -->

Между начальным тегом <!-- и конечным тегом --> должен быть пробел, но в комментарий можно вставлять практически все, что угодно. Вложенные коммёнтарии не допускаются. Комментарии полезны для размещения примечаний в длинном HTML-файле.

 

HTML-разметка, которая содержится внутри комментариев, не отображается, следовательно, комментарии можно использовать для временного скрытия материалов без их полного удаления из документа.

 

Ниже приводится обзор требований, предъявляемых к хорошо сформированному XHTML, а также даются некоторые советы по обеспечению обратной совместимости с более старыми браузерами.

 

Все имена элементов и атрибутов - в нижнем регистре

В XML в именах элементов и атрибутов учитывается регистр, т. е. <img>, <Img> и <IMG> при анализе оказываются разными элементами. Когда HTML был переработан в XHTML, все элементы решено было писать в нижнем регистре. Создавая XHTML-документы (и связанные с ними таблицы стилей) убедитесь, что все теги и имена атрибутов находятся в нижнем регистре. Для значений атрибутов требования к учету регистра отсутствуют.

Если вы хотите преобразовать теги, написанные в существующем HTML-файле в верхнем регистре, или из смеси регистров в хорошо сформированные теги в нижнем регистре, попробуйте использовать утилиту HTML Tidy (tidy.sourceforge.net/) или Barebones Software BBEdit (только для Macintosh, ( www.bbedlt.com), которые помогут автоматизировать процесс.

Значения атрибутов - в кавычках

В XHTML обязательно нужно заключать все значения атрибутов в кавычки. Допустимы и двойные, и одинарные кавычки, если они единообразно используются во всем документе. Если ранее можно было спокойно опускать кавычки вокруг одиночных слов или числовых значений, то теперь нужно учитывать, что в кавычки заключается любое значение атрибута.

 

Завершение элемента

В HTML можно опускать завершающий тег некоторых блочных элементов (например, p и li). Начального тега нового элемента вполне достаточно, чтобы браузер закрыл и предыдущий элемент. Но не в XHTML. Чтобы элемент-контейнер был хорошо сформированным, он должен иметь завершающий тег, иначе будет зарегистрирована ошибка и документ будет признан не соответствующим стандарту.

 

Пустые элементы

Завершать необходимо и пустые элементы. Например, для переноса строки <br>, в XHTML требуется завершение элемента. Достаточно просто поставить слеш перед закрывающей скобкой, обозначая конец элемента. Таким образом, в XHTML перенос строки обозначается как <br/>.

Такое обозначение закрытия пустых элементов может приводить к тому; что некоторые браузеры начинают выводить предупреждения, и даже в новых браузерах могут возникать проблемы, если документ посылается как text/html. Чтобы данные браузеры могли нормально воспринимать XHTML-документ, обязательно добавляйте пробел перед закрывающим слешем (<br />). В этом случае закрывающий тег будет воспринят правильно.

 

Явное указание значений атрибутов

XML (а следовательно, и XHTML) не поддерживает сокращенную запись атрибутов, практику, принятую в SGML, при которой некоторые атрибуты можно сокращать до одного значения. Если в HTML есть много сокращенных атрибутов, таких, как checked и nowrap, в XHTML значения должны объявляться явным образом, т. е. checked="checked" и nowrap="nowrap". Далее перечислены атрибуты, которые являлись сокращенными в HTML, но для которых в XHTML требуются значения

checked=”checked”, disabled=”disabld”, noresize=”noresize”,

compact=”compact”, ismap=”ismap”, nowrap=”nowrap”,

declare=”declare”, multiple=”multiple”, readonly=”readonly”,

defer=”defer”, noshade=”noshade”, selected=”selected”.

 

Требования по вложенности

В HTML всегда было правило, что элементы должны быть правильно вложены один в другой. Закрывающий тег вложенного элемента всегда должен идти перед закрывающим тегом элемента, в котором он содержится. В XHTML выполнение этого правила строго обязательно. Так что убедитесь в том, что ваши элементы вложены правильно:

<р>I can <em>fly!</em></p> и не перекрываются, как показано ниже:

<р>I can <em>fly!</p></em>

Кроме того, XHTML накладывает на вложенность и другие ограничения, которые всегда были частью спецификации HTML. В DTD XHTML включено специальное примечание «Content Models for Exclusions», обеспечивающее следующее:

элемент а не может содержать другой элемент а;

элемент pre не может содержать элементы img, object, applet, big, small, sub, sup, font или basefont;

 

элемент form может содержать другие элементы form;

элемент button не может содержать элементы a, form, input, select, textarea, label, button, iframe или isindex;

элемент label не может содержать другие элементы label.

 

Символьные сущности

В XHTML (как приложении XML) большое внимание уделяется использованию специальных символов, таких как <, > и &. Все специальные символы в XHTML-документе должны представляться в форме соответствующих сущностей. Символьные сущности распространенных символов можно найти в соответствующих источниках по HTML.

Cимвольные сущности должны использоваться вместо таких символов, как < и &, вобычном тексте, как показано в приведенном ниже примере.

<р> значение A &lt; В </р>

<р> Laverne &amp; Shirley </р>

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

. <img src="puppets.jpg" alt="Crocco & Lynch">

Но в XHTML это значение можно переписать следующим образом:

<img src="tpuppets. jpg" alt="Crocco &amp; Lynch" />

To же относится к амперсандам, встречающимся в URL:

<а href="mailto: [email protected]?subject=subject&amp;cc=person">Email: Jen<a/>

 

Защита скриптов

Обычной практикой является заключение скриптов и таблиц стилей в комментарии (между <! -- и -->). К сожалению, в XML комментарии рассматриваются как неважная информация и комментарии могут быть просто удалены из документа перед обработкой. Чтобы избежать эту проблему, используйте раздел XML CDATA.

Материал заключается в <! [cdata[...]]>, рассматривается далее как простые текстовые символы и не анализируется

<script language="JavaScript">

<![CDATA[

...здесь JavaScript... ]]>

</script>

При использовании этого метода возникает проблема обратной совместимости. HTML-браузеры игнорируют раздел, XML CDATA, а XML-браузеры игнорируют заключенные в комментарий скрипты и таблицы стилей. Так что всем угодить невозможно. Одним из решений этой проблемы является размещать скрипты и стили в отдельных файлах и ссылаться па них в документах при помощи соответствующих внешних ссылок. Обычной практикой является неиспользование CDATA и комментариев и хранение скриптов и стилей во внешних файлах. Хотя это и не является обязательным, это настоятельно рекомендуют делать в XHTML и при управлении документами.

 

Атрибуты id и name

В HTML атрибуты name могут использоваться для элементов a, applet, form, frame, iframe, img и map. Атрибут name и атрибут id могут использоваться в HTML для обозначения фрагментов документов.

В XML для обозначения фрагментов могут использоваться только элементы id, и на каждый элемент может приходиться только один такой элемент. B XHTML вместо элементов name при идентификации фрагментов документа в упомянутых выше элементах должны употребляться элементы id. Фактически атрибут name для таких элементов в спецификации XHTML считается устаревшим.

Здесь снова возникает проблема совместимости с браузерами. Некоторые старые браузеры не распознают атрибут id как идентификатор фрагмента документа (современные браузеры, соответствующие стандартам, обрабатывают его прекрасно). Если ваши идентификаторы фрагментов должны работать и в старых браузерах, используйте и name и id. К сожалению, это приведет к ошибкам при проверке на допустимость по XHTML Strict, и, следовательно, вам лучше по возможности применять для обозначения идентификаторов фрагментов только атрибут id. Единственной допустимой областью применения атрибута name остается семантика отправки форм в таких элементах управления формой, как input.

 

Инструменты для Web-разработки

HTML-документы представляют собой простые текстовые файлы, а это значит, что вы можете использовать для их создания любой элементарный текстовый редактор. К счастью, существует большое количество инструментов, которые делают процесс создания Web-документов более быстрым и эффективным. Эти инструменты делятся на две основные категории: HTML-редакторы и WYSIWYG-инструменты (от What-You-See-Is-What-You-Get - что видишь, то и получишь).

 

Редакторы HTML/XHTML

HTML-редакторы - это текстовые редакторы, разработанные специально для написания HTML-кода. Они требуют, чтобы вы знали, как написать HTML-код вручную, однако они экономят время, поскольку содержат ссылки на такие повторяющиеся задачи, как настройка документов, таблицы компиляции или просто применяют стили к тексту.

Существует множество простых HTML-редакторов, и многие из них распространяются (бесплатно. Просто введите строку «HTML Editor» в поле поиска сайта Shareware.com, (www.shareware.com) и изучите полученные результаты. Для краткости я ограничу поиск.

Пользователям Windows следует обратить внимание на Macromedia HomeSite. За дополнительной информацией и демонстрационной копией обращайтесь по адресу www. macromedia.com/software/homesite/.

 

Если вы работаете на Macintosh, посмотрите сайт BBEdit, коммерческого HTML-редактора от Bare Bones Software, Inc. За дополнительной информацией и демонстрационной копией обращайтесь по адресу www.bbedit.com.

 

WYSIWYG-средства разработки

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

Использование WYSIWYG-инструментов дает ряд преимуществ:

- они дают существенную экономию времени в сравнении с написанием кода вручную;

- они хорошо подходят начинающим.

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

- они хорошо подходят для быстрого создания прототипов. Вы можете апробировать дизайнерские идеи «на лету».

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

К недостаткам можно отнести то, что разметка, которую создают эти инструменты, не так эффективна, как разметка, аккуратно написанная вручную.

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

 

На момент написания этого материала наиболее популярными инструментами являются:

Macromedia Dreamweaver

Dreamweaver возник как стандартный для индустрии инструмент разработки благодаря своим современным возможностям и хорошему соответствию стандартам. За дополнительной информацией обращайтесь на сайт www.macromedia.com/softwar/ dreamweaver..

Adobe СоLive

Еще один мощный инструмент разработки профессионального уровня, который интегрирован в пакет дизайнерских инструментов от Adobe. За дополнительной информацией обращайтесь по адресу www.adobe.com/products/golive/main.html.

Microsoft FrontPage

Продукт FrontPage, входящий в программный пакет Microsoft Office, просто изучить начинающему, и он популярен в сообществе пользователей. В него входят мастера, темы и инструменты, упрощающие создание Web-страниц. FrontPage по-прежнему производит код, который многие профессиональные Web-разработчики считают неудовлетворительным из-за неэффективности и наличия фирменного кода. Некоторые функции FrontPage тесно интегрированы с Microsoft Internet Information Server (IIS), так что проверьте возможные конфликты в службе хостинга; За дополнительной информацией обращайтесь на сайт www.microsoft.com/frontpage/.