Вильям Роберт Станек (William Robert Stanek),
PC Magazine Online
Публикуется в выпуске PC Magazine от 20 октября 1998 г.
Всего несколько лет назад браузер 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) и создается с помощью тега ifr
ame. Многие атрибуты встроенных и стандартных фреймов совпадают, другие добавлены для настройки размера и выравнивания окна фрейма. Для использования встроенного фрейма нужно выбрать место и добавить элемент 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 не являлся частью официальной спецификации H
TML. Наконец, в HTML 4.0 элемент object все же принят как решение для будущей реализации в веб-страницах объектов мультимедиа.Браузеры, совместимые с HTML 4.0, без проблем интерпретируют теги <object>, однако старые браузеры могут этого не делать, и вы не будете знать, как именно будут выводиться на экран и работать внедренные объекты мультимедиа. Для обратной совместимости может потребоваться включить в элемент object теги для конкретных типов мультимедиа. Такие теги должны следовать сразу за тегом <obje
ct>. В следующем примере, если браузер не понимает тег <object>, он попытается использовать тег <embed>:<object data="cougar.bmp" type="image/bmp"> <embed src="cougar.bmp"> </object>http://www.zdnet.ru/advertisement/advertisement.asp?ID=726http://www.zdnet.ru/advertisement/advertisement.asp?ID=726
Большая часть нововведений в данной области, появившихся в HTML 3.0, сохранилась в HTML 4.0, но появились и дополнительные средства. Стало возможным группировать столбцы и определять (в начале таблицы) их свойства. Кроме того, допускается определение заголовка, нижнего колонтитула и содержимого разделов таблицы.
Элементы th и td позволяют определить подзаголовок или ячейки данных, а также указать браузерам, как должны выглядеть столбцы в таблице. Для этого используются два элемента: тег colgroup создает структурную группу, устанавливающую характеристику столбцов в этой группе, а тег col позволяет задать общие для группы атрибуты. В совокупности эти элементы позволяют браузерам немедленно начинать вывод на экран столбцов, постепенно (по мере загрузки) формируя таблицу.
Использовать такие элементы в таблице проще, чем кажется. Они поддерживают идентичный набор атрибутов, предоставляя достаточную свободу в определении структур группы. Атрибутам width, cellhalign и cellvalign присваивается заданная по умолчанию ширина, выравнивание ячейки по горизонтали и вертикали соответственно, а span задает число столбцов, совместно использующих атрибуты элемента. Чтобы сделать таблицы более динамичными, можно применять атрибуты таблицы стилей и встроенные события.
На рис. 2 показаны несколько разных способов задания структуры для идентичных групп столбцов. Обратите внимание, что если вместо абсолютной ширины (в пикселах) применяется относительная ширина столбцов, то нужно задать и ширину всей таблицы. Для этого используется атрибут width элемента table. Можно также сгруппировать строки таблицы, задав для них общий заголовок, нижний колонтитул и содержимое разделов с помощью элементов thead, tfoot и tbody. Заголовок и нижний колонтитул содержат информацию о столбцах
таблицы, а в теле таблицы находятся строки данных.В идеальном случае браузеры будут использовать такое разделение для интеллектуального вывода таблиц. Например, если таблица выходит за пределы текущего окна, то браузер может позволить читателю прокручивать тело таблицы, а заголовок и нижний колонтитул раздела будут оставаться на экране. При печати большой таблицы он будет выводить заголовки и нижние колонтитулы разделов на каждом листе.
Использовать эти элементы не трудно. Разделы header (заголовок) и footer (нижний колонтитул) включаются в начало таблицы, после чего определяется тело раздела. Поскольку разделы заголовка и нижнего колонтитула следуют первыми, браузеры могут выводить таблицу на экран, даже если она еще загружается. Определение для стандартного заголовка и нижнего колонтитула таблицы показано на рис. 3. Обратите внимание, что для заголовков, нижних колонтитулов и содержимого разделов таблицы применяются теги end, хотя в данной спецификации они не обязательны.
Рис. 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>
Рис. 3: Применение заголовков и нижних колонтитулов помогает браузеру структурировать таблицу
<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>http://www.zdnet.ru/advertisement/advertisement.asp?ID=689http://www.zdnet.ru/advertisement/advertisement.asp?ID=689
Сценарии - ключевое средство интерактивного взаимодействия в вебе, однако в спецификации HTML механизмы их создания не были определены достаточно хорошо. В результате браузеры обрабатывают сценарии во многом несогласованно. К счастью, в HTML 4.0 реализован более полный подход.
Одно из наиболее важных изменений заключается в спецификации сценариев на веб-страницах. Элемент meta позволяет определить заданный по умолчанию язык сценариев для всех сценариев страницы. Это делается с помощью спецификации значения в заголовке Content-Script-Type HTTP. Если в теге не присвоить заданное по умолчанию значение, браузер попытается извлечь его из соответствующего поля фактического заголовка HTTP, установленного веб-сервером. После определения языка сценария для
сценариев указывается тип содержимого MIME. Чаще всего типом содержимого MIME будет text/vbscript (сценарий 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, то полезно проверить браузер на совместимость. Обычно несовместимые браузеры игнорируют атрибуты событий, которых они не понимают, и в результате ожидаемая вами функция поддерживаться не будет. Проектируя веб-страницу с учетом этой особенности, можно постараться избежать подобных проблем.
http://www.zdnet.ru/advertisement/advertisement.asp?ID=689http://www.zdnet.ru/advertisement/advertisement.asp?ID=689
Таблицы стилей (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">
HTML - это издательский язык World Wide Web. Спецификация HTML 4.0 продолжает эволюцию некогда ограниченного инструментального средства, преследуя цели улучшения интерактивности, упрощения создания и сопровождения веб-страниц. Усовершенствованная поддержка мультимедиа, сценариев и таблиц стилей, а также упрощения в области доступа и локализации расширят возможности как для пользователей, так и для веб-дизайнеров.
Ресурсы по HTML в вебе: