|
 Все новости от 12 октября 1998 г.
Основы HTML 4.0
Введение
Всего несколько лет назад браузер 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>, он попытается использовать тег <embed>:
<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, хотя в данной спецификации они не обязательны.
Рис. 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>
Сценарии
Сценарии - ключевое средство интерактивного взаимодействия в вебе, однако в спецификации 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, то полезно проверить браузер на совместимость. Обычно несовместимые браузеры игнорируют атрибуты событий, которых они не понимают, и в результате ожидаемая вами функция поддерживаться не будет. Проектируя веб-страницу с учетом этой особенности, можно постараться избежать подобных проблем.
Таблицы стилей
Таблицы стилей (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 в вебе:
| 
