Введение

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

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

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

Вильям Станек ведет онлайновые форумы для специалистов по сетям CentralDrive.Com и WebLearningCenter.Com. С ним можно связаться по адресу: webdesign@tvpress.com.

Фреймы

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

С помощью стандартных фреймов можно создавать веб-страницы с "мини-окнами", причем каждое из них может иметь свое информационное наполнение. Обычно такое мини-окно отделяется от остального экрана рамкой и выводится с полосами прокрутки. Кроме того, фрейм можно вставить непосредственно в блок текста на веб-странице (как встроенное изображение). Такой фрейм называется встроенным (in-line) и создается с помощью тега iframe. Многие атрибуты встроенных и стандартных фреймов совпадают, другие добавлены для на стройки размера и выравнивания окна фрейма. Для использования встроенного фрейма нужно выбрать место и добавить элемент iframe. С помощью атрибута src можно задать исходный документ, а затем указать позицию фрейма. В следующем примере в документ вставляется простой встроенный фрейм в 500 пикселов высотой и 325 пикселов шириной:

<iframe src="samples.html" width="325" height="500" align="right"></iframe>

Как и в случае со стандартными фреймами, с помощью атрибута frameborder нетрудно задать фрейм без рамки. Установив этот атрибут равным 1, можно вывести рамку, а присвоив ему значение 0, - скрыть ее. Для достижения требуемого эффекта исходный документ должен помещаться внутри фрейма. В противном случае браузер выводит на экран фрейм с рамкой и полосами прокрутки. Следует отметить, что тег iframe позволяет определить выводимую в браузере информацию, даже если он несовместим с HTML 4.0. Для этого достаточн о включить ее в сам элемент iframe. Например:

<iframe src="samples.html" width="325" height="500" frameborder="0">
<P>Normally, a product sample is displayed in this space. However, your browser doesn"t support HTML 4.0.</P>
</iframe>

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

Рис. 1: Указание цели во встроенных фреймах с помощью значения атрибута NAME.

<HTML>
<HEAD>
<TITLE>Inline Frames Example</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV>
<H1 align="center">Calculators R Us</H1>
<IFRAME NAME="samp" src="samples.html" width="325" height="500" align="right" frameborder="0">
</IFRAME>
<P>Наш каталог содержит свыше 500 продуктов, образцы которых можно получить по Сети. Попробуйте демоверсии продуктов и подумайте. Сегодня предлагается 25%-я скидка. Выберите нужные вам продукты: </P>
<A href="feature1.html" target="samp"> S5000 Scientific Plus</A> <BR>
<A href="feature2.html" target="samp"> E2800 Engineering MAX</A> <BR>
<A href="feature3.html" target="samp"> M3500 Statistical Plus</A></P>
</DIV>
</BODY>
</HTML>

Мультимедиа

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

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

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

<object DATA="cougar.bmp" TYPE="image/bmp">
<embed src="cougar.bmp">
</object>

Таблицы

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

Элементы th и td позволяют определить подзаголовок или ячейки данных, а также указать браузерам, как должны выглядеть столбцы в таблице. Для этого используются два элемента: тег colgroup создает структурную группу, устанавливающую характеристику столбцов в этой группе, а тег col позволяет задать общие для группы атрибуты. В совокупности эти элементы позволяют браузерам немедленно начинать вывод на экран столбцов, постепенно (по мере загрузки) формируя таблицу.

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

На рис. 2 показаны несколько разных способов задания структуры для идентичных групп столбцов. Обратите внимание, что если вместо абсолютной ширины (в пикселах) применяется относительная ширина столбцов, то нужно задать и ширину всей таблицы. Для этого ис пользуется атрибут width элемента TABLE. Можно также сгруппировать строки таблицы, задав для них общий заголовок, нижний колонтитул и содержимое разделов с помощью элементов thead, tfoot и tbody. Заголовок и нижний колонтитул содержат информацию о столбц ах таблицы, а в теле таблицы находятся строки данных.

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

Использовать эти элементы не трудно. Разделы header (заголовок) и footer (нижний колонтитул) включаются в начало таблицы, после чего определяется тело раздела. Поскольку разделы заголовка и нижнего колонтитула следуют первыми, браузеры могут выводить таб лицу на экран, даже если она еще загружается. Определение для стандартного заголовка и нижнего колонтитула таблицы показано на рис. 3. Обратите внимание, что для заголовков, нижних колонтитулов и содержимого разделов таблицы применяются теги END, хотя в данной спецификации они не обязательны.

Pис. 2: Использование элементов COLGROUP и COL

//Установка ширины каждой колонки отдельно

<COLGROUP>
<COL width="100">
<COL width="100">
<COL width="100">
<COL width="75">
<COL width="75">
<COL width="75">
</COLGROUP>
//Использование элементов span для сокращения кода

<COLGROUP>
<COL span="3" width="100">
<COL span="3" width="75">
</COLGROUP>
//Назначение ширины колонки и промежутка
//непосредственно в группах колонок

<COLGROUP span="3" width="100">
</COLGROUP>
<COLGROUP span="3" width="75">
</COLGROUP></xmp>
<P>Рис. 3: Применение заголовков и нижних колонтитулов помогает браузеру структурировать таблицу</P>

<xmp>
<TABLE BORDER=2 WIDTH=50%>
<COLGROUP>
<COL width="100">
<COL width="75">
<COL width="75">
<COL width="75">
</COLGROUP>
<THEAD>
<TR> <TH> </TH> <TH>1996</TH> <TH>1997</TH> <TH>1998</TH> </TR>
</THEAD>
<TFOOT>
<TR><TD>Данные предоставлены компанией только для статистических целей.</TD></TR>
</TFOOT>
<TBODY>
<TR> <TH>Неделя 1</TH> <TD>252</TD> <TD>267</TD> <TD>289</TD> </TR>
<TR> <TH>Неделя 2</TH> <TD>194</TD> <TD>197</TD> <TD>205</TD> </TR>
<TR> <TH>Неделя 3</TH> <TD>212</TD> <TD>225</TD> <TD>234</TD> </TR>
<TR> <TH>Неделя 4</TH> <TD>145</TD> <TD>176</TD> <TD>179</TD> </TR>
<TR> <TH>Неделя 5</TH> <TD>167</TD> <TD>182</TD> <TD>193</TD> </TR>
<TR> <TH>Неделя 6</TH> <TD>185</TD> <TD>201</TD> <TD>205</TD> </TR>
<TR> <TH>Неделя 7</TH> <TD>197</TD> <TD>207</TD> <TD>213</TD> </TR>
. . .
<TR> <TH>Неделя 52</TH> <TD>203</TD> <TD>221</TD> <TD>279</TD> </TR>
</TBODY>
</TABLE>

Формы

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

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

Рис. 4

<form ACTION="cgi-bin/data.pl" method="post">
<P>NAME: <INPUT tabindex="1" TYPE="text" NAME="userName"></P>
<P>Email: <INPUT tabindex="2" TYPE="text" NAME="userEmail"></P>
<P>Phone: <INPUT tabindex="3" TYPE="text" NAME="userPhone"></P>
<P><INPUT tabindex="4" TYPE="submit">
<INPUT tabindex="5" TYPE="reset"></P>
</form>

Когда пользователь нажимает на клавишу Tab, он попадает сначала в поле userName, затем в поле userEmail и т. д. Порядок табуляции может включать в себя любое число от 0 до 32767. Браузеры используют числовое значение для определения следующего или предыд ущего поля. Некоторым полям можно также присваивать и клавиши доступа. Клавиши доступа позволяют быстро перемещаться на определенные поля в форме. Например, если полю userName в предыдущем примере присвоена клавиша N, то, нажав ее, можно сразу оказаться в этом поле. Работа клавиш доступа зависит от операционной системы. В системах Microsoft Windows, кроме клавиши доступа, обычно нужно нажимать на клавишу Alt. Таким образом, чтобы попасть в поле userName в системе Windows, нужно нажать Alt-N. Браузеры до лжны выводить клавишу доступа на экран в поле ввода, причем каким-то уникальным способом, например, подчеркнутым или жирным шрифтом.

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

Рис. 5

<form ACTION="cgi-bin/data.pl" method="post">
<label FOR="name" accesskey="N">NAME: </label>
<INPUT id="name" TYPE="text">
<label FOR="email" accesskey="E">Email: </label>
<INPUT id="email" TYPE="text">
<label FOR="phone" accesskey="P">Phone: </label>
<INPUT id="phone" TYPE="text">
<P><INPUT accesskey="S" TYPE="submit">
<INPUT accesskey="R" TYPE="reset"></P>
</form>

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

Рис. 6

. . .
<button tabindex="4" accesskey="S" NAME="submit" TYPE="submit">
Enter your NAME IN the database! <img src="go.gif" alt="Submit it!">
</button>
<button tabindex="5" accesskey="R" NAME="reset" TYPE="reset">
Start over! <img src="ohno.gif" alt="Try again!">
</button>

Не забывайте о том, что старые браузеры не могут использовать элемент button. Вместо нажимаемой экранной кнопки вы увидите только ее содержимое. Преодолеть этот недостаток можно включением в элемент button полей submit и reset:

Рис. 7

<button NAME="submit" TYPE="submit">
<INPUT TYPE="submit"></button>
<button NAME="reset" TYPE="reset">
<INPUT TYPE="reset"></button>

Сценарии

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

Одно из наиболее важных изменений заключается в спецификации сценариев на веб-страницах. Элемент meta позволяет определить заданный по умолчанию язык сценариев для всех сценариев страницы. Это делается с помощью спецификации значения в заголовке Conte nзаданное по умолчанию значение, браузер попытается извлечь его из соответствующего поля фактического заголовка HTTP, установленного веб-сервером. После определения языка сценария для сценариев указывается тип со держимого MIME. Чаще всего типом содержим ог(сценарий VBScript) или text/javascript (сценарий JavaScript), однако можно использовать и другие допустимые типы, такие, как text/tcl (сценарий TCL).

Чтобы указать в качестве заданного по умолчанию языка JavaScript, используйте выражение:

<meta http-equiv="Content-Script-Type" content="text/javascript">

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

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

Существует несколько способов работы с событиями. Для этого удобно использовать такие атрибуты событий, как onclick и onkeypress. Они позволяют распознать событие и передать его функции в сценарии. С другой стороны, если вы хотите проверить наличие ко ннепосредственно распознающую и обрабатывающую его. Следующий пример показывает, как использовать атрибут события onmouseover с тегом :

<a href="main.html" onmouseover="show("Посетите нашу адресную страницу")">Main</a>

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

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

Таблицы стилей

Таблицы стилей (CSS, cascading style sheets) предусматривают инструменты, необходимые для создания привлекательных веб-страниц. Они позволяют управлять цветом текста и фона и позиционировать содержательные материалы, а также предусматривают множество дру гих интересных функций. До появления таблиц стилей для публикации веб-страниц с подобными свойствами приходилось полагаться на существующие структуры HTML. Чтобы изменить фоновый цвет страницы, применялся атрибут bgcolor элемента body. Если необходимо от центрировать текст на странице - элемент center и т. д.

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

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

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

В число устаревших элементов входят listing (коды листингов), plaintext (листинг простого текста) и xmp (examples). Вместо них следует применять элемент pre, позволяющий использовать заранее форматированный текст. Не рекомендуются такие элементы, как big (крупный текст), small (мелкий текст), tt (моноширинный шрифт), i (курсив), b (жирный). Хотя эти элементы отсутствуют в списке выходящих из употребления, спецификация советует вместо них применять таблицы стилей.

Список элементов, выходящих из употребления, довольно обширен. Например, в него попали атрибуты background, bgcolor, link, text, alink и vlink тега body. В числе таких элементов border (для изображений и объектов), clear (разрыв строки), noshade (горизонтальные линейки). Этот список можно продолжить. В общем, если вам хочется применить атрибут для представления информации, то, вероятно, лучше воспользоваться вместо него таблицей стилей.

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

Разработчики HTML 4.0 тщательно продумали вопрос поддержки элементов и атрибутов определения типов документов (Document TYPE Definition, DTD). Они устанавливают правила и определяют структуры, которые можно использовать в совместимых документах. В HTML 4 .0 определены три DTD: строгое, свободное и фреймовое.

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

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

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Свободное определение DTD не ограничивает применения элементов или атрибутов для представления документа и рассматривается как промежуточный этап (поэтому его называют также переходным определением DTD). В этом определении можно использовать любой выходя щий из употребления элемент/атрибут. Для проверки веб-страницы с таким определением включите в нее следующее описание:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

Фреймовое определение DTD предназначено для веб-страниц с фреймами. Эта версия поддерживает все структуры, допустимые в свободном определении DTD, а также структуры, необходимые для фреймов. Для спецификации такого DTD используйте описание:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">