Поиск по сайту: Подпишись на рассылку:

Основы HTML 4.0

Новая спецификация формализует некоторые функциональные возможности, уже реализуемые современными браузерами, и совершенствует методы программирования графики.

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

Попытки как-то разобраться в обилии сведений о функциональных возможностях и новинках последней версии HTML могут привести к информационной перегрузке. Но беспокоиться не стоит: хотя HTML 4.0 серьезно отличается от версии HTML 3.2, многие из новых функций не так уж и новы. На самом деле наиболее важные из них уже предусматривают такие браузеры, как Internet Explorer и Netscape Navigator. Другие функции, впервые появившиеся в последней версии, упрощают или способствуют улучшению существующих структур HTML, тем самым облегчают применение средств нынешних технологий для работы с ресурсами Web.

Мы не станем подробно останавливаться на каждой новой функции, поскольку ограничены рамками журнальной статьи, а сосредоточимся на некоторых основополагающих моментах. Начнем с усовершенствований, касающихся кадров, мультимедиа, таблиц и экранных форм, затем перейдем к существенным изменениям, касающимся средств для подготовки сценариев и таблиц стилей. Для более детального знакомства с ресурсами HTML 4.0 следует обратиться к нашему Web-узлу по адресу www.pcmag/com/pctech.

Одно из наиболее значительных усовершенствований последней версии HTML - признание в этой спецификации как стандартных, так и встраиваемых в текст кадров (фреймов). Понятие кадра, конечно, не ново. Стандартные кадры были впервые представлены в версии Netscape Navigator 2.0, в дальнейшем различные версии снабжались соответствующими расширениями браузеров. К счастью, для совместимости с HTML 4.0 браузерам достаточно иметь средства для работы с кадрами, предписанные этой спецификацией.

Для формирования стандартных кадров разработчик создает Web-страницу с мини-окнами; каждое из них содержит свой материал. Обычно каждое мини-окно отделяется особой рамкой и снабжается линейкой прокрутки. Кадр можно поместить прямо в блок текста на Web-странице - процедура, аналогичная вставке в текст изображения. Такой кадр называется встроенным в текст и организуется с помощью управляющего кода iframe. Многие атрибуты встроенных в текст кадров совпадают с аналогичными признаками стандартных кадров, а для задания размеров и выравнивания кадрового окна вводятся дополнительные атрибуты.

Чтобы снабдить Web-страницу встраиваемым в текст кадром, необходимо решить, где оно будет находиться, затем добавить в HTML-текст элемент iframe. После чего с помощью атрибута src указывается исходный документ, следом устанавливаются размер и положение кадра. Приведенный здесь пример иллюстрирует организацию встроенного в текст кадра высотой 500 и шириной 325 пиксел:

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

Заметим, что с помощью тега iframe можно определять ту информацию, которую будут воспроизводить браузеры, не совместимые со спецификацией HTML 4.0. Достаточно поместить эту информацию в пределах, ограниченных тегами iframe:

Браузеры, совместимые со спецификацией, игнорируют размещенный таким образом текст, а несовместимые с ней браузеры игнорируют тег iframe и воспроизводят информацию.

И еще одно замечание по поводу встраиваемых кадров. Если кадру присвоить имя, можно формировать связи для воспроизведения в кадре других файлов. Процедура наложения гиперсвязи на кадр называется нацеливанием (targeting). Для нацеливания на встраиваемый кадр используется значение атрибута name, обозначающего имя этого кадра. Для соответствующей гиперсвязи значению атрибута target присваивается это имя. На рис. 1 приводится иллюстрирующий сказанное пример. Встраиваемый кадр назван именем samp. В нашем примере это имя используется для нацеливания на кадр трех связей. При щелчке мышью на связи в кадре появляется соответствующий исходный файл.

Еще один важный шаг в развитии HTML - появление элемента object (объект), который обеспечивает общий управляющий код для работы с различными типами сред передачи данных, такими, как Java-апплеты, встраиваемое видео, потоковое аудио и изображения. В конечном счете он заменит разнообразные теги для многих типов сред и вместо элементов applet, img и embed будет применяться единый элемент object.

С помощью элемента object можно даже выводить в окне браузера текстовые файлы, предпринимая при этом шаги, во многом схожие с этапами организации встраиваемого кадра. Изначально элемент object был предложен как компромиссный вариант вместо тегов специального назначения, например, img и applet. К сожалению, хотя разработчики браузеров и осозновали необходимость некоторого стандартного способа включения информации мультимедиа в Web-страницы, к какому-то единому мнению они так и не пришли. Поэтому тег object в течение некоторого времени в официальную спецификацию HTML не входил. В конце концов, с выходом версии HTML 4.0 элемент object постепенно получает признание как инструмент для встраивания в будущем мультимедиа в Web-страницы.

Для удовлетворяющих спецификации HTML 4.0 браузеров интерпретация управляющих кодов <object> не составит труда, но браузеры прежних поколений вряд ли справятся с задачами отображения и воспроизведения встроенной мультимедиа-информации. Для обратной совместимости следует предусмотреть в элементе object теги для конкретной среды. Их в обязательном порядке помещают сразу же после первого управляющего кода <object>. В приведенном ниже примере, если браузер будет не в состоянии интерпретировать тег <object>, он попытается использовать тег <embed>:

Большинство новинок в версии HTML 3.0, предназначенных для работы с таблицами, осталось в спецификации HTML 4.0 без изменений, но появились и новые возможности. Теперь при желании можно группировать колонки и приводить их параметры в начале таблицы, а также задавать секции заголовка, нижнего колонтитула и тела таблиц.

С помощью элементов th и td определяются отдельный заголовок или ячейки данных, а следующие два описанных ниже элемента позволяют сообщать браузерам сведения о параметрах колонок таблицы. Речь идет о теге colgroup, который отвечает за структурное группирование, устанавливающее характеристики колонок в группе, и теге col, несущем сведения о распределении атрибутов в рамках данной структуры. Благодаря совокупности этих элементов браузеры могут приступать к немедленному отображению колонок таблицы и выстраивать таблицу постепенно, по мере ее загрузки.

Применение названных новых элементов таблиц проще, чем может показаться. Эти элементы предусматривают одинаковый набор атрибутов, что обеспечивает разработчику высокую степень свободы при определении структур групп. Атрибуты width, cellhalign и cellvalign устанавливают используемые по умолчанию ширину столбца, а также горизонтальное и вертикальное выравнивание клеток соответственно, а span - число столбцов, разделяющих атрибуты какого-то элемента. Атрибуты можно использовать и для таблиц стилей, а также описания внутренних событий, с тем чтобы повысить уровень динамичности таблиц.

Чтобы разобраться в способах применения этих атрибутов, предлагаем взглянуть на рис. 2, который иллюстрирует ряд способов формирования структуры для группы идентичных колонок. Заметим, что, если вместо абсолютных значений ширины столбцов в пикселах задается их относительная ширина, необходимо указать полную ширину таблицы с помощью атрибута width элемента table.

Для группирования горизонтальных рядов ячеек таблицы с выделением секций заголовка, колонтитула и тела имеются элементы thead, tfoot и tbody. Заголовок и колонтитул содержат информацию о столбцах таблицы, а тело состоит из строк ячеек с табличными данными. В идеале такое разбиение облегчит задачу браузерам "грамотного" воспроизведения таблиц. Если, к примеру, таблица выходит за пределы имеющегося окна, браузер мы бы обеспечить читателю возможность прокручивать тело таблицы, сохраняя в то же время секции заголовка и колонтитула на экране. Или при печати большой таблицы браузер "позаботился" бы, скажем, о размещении секций заголовка и колонтитула на каждой странице документа.

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

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

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

Нажав клавишу табуляции, пользователь сначала получает доступ к полю userName, затем к полю userEmail и т.д. Число, определяющее порядок перемещения, может принимать любое значение от 0 до 32767. Это число необходимо браузеру для определения следующего или предыдущего поля.

Полям форм можно также назначать клавиши доступа. Они позволяют быстро обратиться к определенному полю формы с помощью "быстрых клавиш" с клавиатуры. Если отвести, скажем, клавишу N полю userName из предыдущего примера, то при ее нажатии произойдет переход прямо к этому полю. Характер действия клавиш доступа зависит от операционной системы. В системах Microsoft Windows помимо клавиши доступа обычно приходится нажимать и клавишу Alt. Таким образом, для доступа к полю userName, если ПК работает под управлением Windows, следует нажимать комбинацию клавиш Alt-N.

Браузеры должны выделять на экране клавишу доступа к полю ввода каким-то особым образом, например подчеркиванием или выделением жирным шрифтом. Есть и прямой способ привязки клавиши доступа к полю формы - через атрибут accesskey, но браузер лучше "поймет", как воспроизводить клавишу доступа, если поля ввода помечены, а клавиша доступа назначена определенной метке. Метки - это новинка HTML 4.0. Помечая то или иное поле формы, разработчик присоединяет информацию к этому полю. Для идентификации соответствующего поля формы метки предусматривают атрибут for. Значение этого атрибута должно соответствовать значению атрибута id связанного с ней" поля. В следующем примере используются метки, связанные с полями ввода текста.

Другое полезное усовершенствование для форм - элемент button. С помощью этого элемента создается командная кнопка, напоминающая кнопки Reset и Submit, используемые в формах. Но в отличие от последних новые кнопки можно дополнить какой-то информацией, например изображеними, абзацами текста и иными дополнениями.

Чтобы внести подобную информацию, достаточно поместить их между открывающим тегом <button> и завершающим тегом </button>. Таким образом, можно заменить фигурирующие в вышеприведенном примере стандартные кнопки Submit и Reset элементами button. Чтобы эти элементы как-то отличались, их можно снабдить текстом и изображениями:

Не следует забывать, что старые версии браузеров вряд ли способны воспринимать элемент button. Вместо подобной кнопки будет выводиться только дополняющая ее информация. Чтобы обойти эту проблему, надо поместить в элемент button поля submit и reset:

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

Одно из важнейших изменений касается методов задания сценариев на Web-страницах. Элемент meta позволяет определять действующий по умолчанию язык для всех сценариев страницы. Для этого нужно установить значение для HTTP-заголовка Content-Script-Type. Если его значение по умолчанию в теге <meta> не конкретизировано, браузер, возможно, попытается выделить это значение из соответствующего поля реально переданного Web-сервером HTTP-заголовка.

Если язык сценариев, действующий по умолчанию, указан, для сценариев используется тип MIME-данных. Чаще всего тип данных MIME будет либо text/vbscript - для языка VBScript, либо text/javascript - для JavaScript, но допустимы и другие типы данных, такие, как text/tcl для языка TCL. Чтобы в качестве языка сценариев по умолчанию задать JavaScript, следует составить следующую конструкцию:

Для любого фрагмента страницы можно поменять язык сценариев, заданный по умолчанию, с помощью элемента script, но следует иметь в виду, что новая версия спецификации HTML не рекомендует применять с ним атрибут language. Согласно этой спецификации, лучше употреблять атрибут type, который позволяет указывать для сценариев тип данных MIME, например <script type="text/vbscript">. Но надо помнить, что атрибут type может оказаться не "по зубам" некоторым старым браузерам, поэтому не стоит надеяться, что ваши сценарии будут обрабатываться должным образом. Разбираясь с приведенными здесь сведениями, не забывайте, что допустимый атрибут type пока еще никем не использовался.

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

Существует несколько способов обработки событий. Такие атрибуты события, как onclick или onkeypress, предназначены для обнаружения конкретного события и передачи информации о нем какой-то функции сценария. Вместе с тем, если есть желание организовать контроль за определенным событием программным путем, можно подготовить функцию для обнаружения и обработки этого события напрямую. Следующий пример демонстрирует способ применения атрибута onmouseover события в теге <a>.

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

Страницы, предусматривающие события, характерные для HTML 4.0, имеет смысл проверить с помощью браузера, несовместимого с этой спецификацией. Такие браузеры, как правило, игнорируют "непонятные" им атрибуты событий, в результате, вопреки ожиданиям разработчика, обращения к функциям не происходит. Если при подготовке страниц учитывать это обстоятельство, подобных проблем можно избежать.

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

К сожалению, при объединении информации, необходимой для презентаций документа, с материалами самого документа возникает некий излишне сложный и трудный в обращении документ. Но поскольку таблицы стилей позволяют отделить презентационную часть документов от их реального содержания, есть важное предложение о постепенном изъятии из HTML большинства презентационных элементов и атрибутов. Это означает, что многие элементы и атрибуты, до сих пор примененявшиеся разработчиками Web-страниц, возможно, в конечном итоге исчезнут. Однако следует иметь в виду, что для этого потребуется время; полное избавление от них, скорее всего, произойдет не сразу.

Элементы и атрибуты, находящиеся под угрозой изъятия из спецификации HTML, называются несанкционированными (т. е. неодобренными к применению). Один из элементов, которого недосчитаются разработчики Web-страниц, это font, задающий цвет текста, гарнитуру и размер шрифта. В числе других элементов, попадающих под нож, basefont, с помощью которого задается информация о шрифтах, выбираемых по умолчанию, center, предназначенный для центровки элементов на странице, и ряд иных, например u, означающий необходимость подчеркивания, и s для перечеркивания текста.

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

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

Не рекомендуются к применению элементы big для обозначения длинного текста, small для короткого текста, tt для моноширинного шрифта, t для курсива и b для жирного шрифта. Хотя эти элементы не входят в перечень несанкционированных, приветствуется использование вместо них таблиц стилей.

Обширен перечень несанкционированных атрибутов. Так, в него попали такие атрибуты тега body, как background, bgcolor, link, text, alink и vlink. Среди других несанкционированных атрибутов - border, относящийся к изображениям и объектам, clear, обозначающий разрыв строки, и noshade, соответствующий горизонтальной линейке, но и это не все, продолжать его можно долго. Заметим, что предусмотрев какой-то атрибут для презентации, следует для управления им прибегнуть к услугам таблицы стилей.

Стоит взглянуть на описания типов документов (Document Type Definition, DTD), разработанные для HTML 4.0, и станет ясно, что авторы HTML очень серьезно подошли к вопросу применения элементов и атрибутов. DTD устанавливает правила и описывает структуры, незаменимые при подготовке совместимых с этими правилами документов. HTML 4.0 определяет три вида DTD: строгое DTD, нестрогое DTD и кадровое (frameset) DTD.

Согласно положениям спецификации HTML 4.0, в Web-страницах обязательно следует предусмотреть одно из этих DTD. Для задания DTD в первую строку HTML-текста Web-страницы помещается объявление типа документа. Если DTD в тексте нет, то любой совместимый с данной спецификацией браузер по умолчанию будет исходить из предположения, что применяется именно строгая версия DTD.

Основное назначение строгого DTD - обеспечить отделение элементов визуального форматирования от реального содержания. Для этой цели управление формированием Web-страниц выполняется с помощью таблиц стилей. Поэтому в строгом DTD не удастся обнаружить какие-либо несанкционированные элементы или атрибуты и любые структуры, используемые для кадров. Ясно, что это DTD накладывает самые жесткие ограничения. При наличии совместимого с HTML 4.0 браузера можно протестировать свою Web-страницу на соответствие строгому DTD, описав тип документа следующим образом:

В нестрогом DTD нет запретов на элементы и атрибуты, используемые для презентации. Так как это DTD считается промежуточным вариантом, его называют также переходным DTD. Как и следовало ожидать, в таком DTD допустимы любые несанкционированные элементы и атрибуты. Для тестирования страницы по переходным DTD объявление имеет следующий вид:

Третье DTD предназначено для Web-страниц, снабженных кадрами. В этом варианте допустимы все структуры нестрогого DTD, а также структуры, необходимые для кадров. Такое описание объявляется следующим образом:

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