Инструменты для 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:jen@example.com?subject=subject&amp;cc=person">Email: Jen<a/>

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

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

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

<script language="13-42736.php">2