Учебное пособие: Создание HTML-таблиц. Фреймы и формы

1. Создание HTML-таблиц

1.1 Средство форматирования Web-страниц – таблицы

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.

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

Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т.д.

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

Описание таблиц должно располагаться внутри раздела документа <body>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <table> и завершаться тэгом </table>. Внутри той пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Общий вид таблицы:

<CAPTION> заголовок таблицы… </CAPTION>

<TR><TD> первая ячейка <TD> вторая ячейка

<TR> <TD> первая ячейка <TD> вторая ячейка

</TABLE>

Атрибуты метки TABLE не обязательны. По умолчанию, таблица выводится без рамки. Как правило, размер ячеек таблицы устанавливается автоматически, чтобы наилучшим образом разместить содержимое. Однако можно установить ширину таблицы с помощью атрибута WIDTH. Атрибуты BORDER, CELLSPACING и CELLPADDING предоставляют дополнительные возможности для контроля за внешним видом таблицы. Заголовок размещается над или под таблицей в зависимости от значения атрибута ALIGN.

Горизонтальный ряд ячеек определяется элементом TR, закрывающая метка не обязательна. Ячейки таблицы определяются элементами TD (для данных) и TH (для заголовков). Как и TR, эти элементы могут не иметь закрывающей метки. TH и TD могут включать несколько атрибутов: ALIGN и VALIGN для выравнивания содержимого ячейки, ROWSPAN и COLSPAN для указания того, что ячейка занимает более одного горизонтального ряда или колонки. Ячейка таблицы может содержать другие элементы уровня блока и текста, включая формы и другие таблицы.

Для элемента TABLE обязательны открывающая и закрывающая метки. Допустимые атрибуты:

align

Допустимые значения: LEFT, CENTER и RIGHT. Определяет положение таблицы по отношению к полям документа. По умолчанию установлено выравнивание по левому краю, но это можно изменить путем включения в документ элемента DIV или CENTER.

width

При отсутствии этого атрибута ширина таблицы определяется автоматически в зависимости от содержимого. Атрибут WIDTH можно использовать для установки фиксированной ширины в пикселах (например, WIDTH=212) или в процентах от пространства между левым и правым полем (например, WIDTH= «80%»).

border

Используется для указания ширины внешней окантовки таблицы в пикселах (например, BORDER=4). Значение можно установить равным нулю, в результате чего окантовка не будет видна. В отсутствие этого атрибута окантовка также не должна показываться на экране. Обратите внимание: некоторые браузеры воспринимают метку <TABLE BORDER> точно так же, как BORDER=1.

cellspacing

В традиционном издательском программном обеспечении расположенные рядом ячейки таблицы имеют общую окантовку. В HTML это не так. Каждая ячейка имеет собственную окантовку. Ширина окантовки ячейки в пикселах устанавливается атрибутом CELLSPACING (например, CELLSPACING=10). Этот атрибут также устанавливает расстояние между окантовкой таблицы и окантовками крайних клеток таблицы.

cellpadding

Устанавливает расстояние между окантовкой ячейки таблицы и содержимым ячейки.

Элемент CAPTION может иметь один атрибут ALIGN со значением ALIGN=TOP или ALIGN=BOTTOM. Соответственно, заголовок таблицы показывается либо над, либо под таблицей. Большинство браузеров по умолчанию показывают заголовок над таблицей. Открывающая и закрывающая метки обязательны. В заголовках тыблиц не разрешаются элементы уровня блока.

Элемент TR открывает описание строки таблицы. Закрывающая метка не обязательна. Имеет два стрибута:

align

Устанавливает горизонтальное выравнивание в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT. Действие аналогично атрибуту ALIGN у абзацев.

valign

Устанавливает вертикальное выравнивание в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM; содержимое ячеек при этом выравнивается по верхнему краю, по центру или по нижнему краю.

Существует два элемента, определяющих ячейки таблицы. TH используется для ячеек-заголовков, а TD – для ячеек с данными. Открывающие метки обязательны, закрывающие – нет. Ячейки могут иметь следующие атрибуты:

nowrap

Этот атрибут запрещает автоматический перевод текста со строки на строку внутри ячейки таблицы (например, <TD NOWRAP>). Эффект применения этого атрибута аналогичен использованию объекта   вместо пробела по всему содержимому ячейки.

rowspan

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

colspan

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

align

Указывает принятое по умолчанию выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: LEFT, CENTER и RIGHT. Если атрибут ALIGN не указан, принятое по умолчанию выравнивание – по левому краю для <td> и по центру для <th>, однако это можно изменить установкой атрибута ALIGN элемента TR.

valign

Указывает принятое по умолчанию выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: TOP, MIDDLE и BOTTOM. Если атрибут VALIGN не установлен, по умолчанию принято выравнивание по центру, однако это можно изменить установкой атрибута VALIGN элемента TR.

width

Указывает рекомендуемую ширину содержимого ячейки в пикселях. Значение используется только в случаях, когда оно не противоречит требованиям к ширине других ячеек в колонке.

height

Указывает рекомендуемую высоту содержимого ячейки в пикселях. Значение используется только в случаях, когда оно не противоречит требованиям к высоте других ячеек в строке.

Таблицы, как правило, показываются на экране «приподнятыми» над поверхностью страницы, а ячейки – «вдавленными» в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект  .

1.2 Ячейки таблицы: элементы TH и TD

Определения атрибутов

headers = idrefs

В этом атрибуте указывается список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки данных. Значением этого атрибута является разделенный пробелами список названий ячеек; имена ячейкам должны даваться с помощью атрибута id. Авторы обычно используют атрибут headers с целью помочь невизуальным агентам пользователей в генерации заголовков ячеек данных (например, заголовок произносится перед прочтением данных ячейки), но этот атрибут может также использоваться вместе с таблицами стилей. См. также атрибут scope.

scope = имя области действия

Этот атрибут определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Этот атрибут может использоваться вместо атрибута <a href= «tables.html#adef-headers» class= «noxref» headers>, особенно в простых таблицах. Если этот атрибут используется, он должен иметь одно из следующих значений:

· row: В ячейке представлена заголовочная информация для оставшейся части строки, в которой содержится эта ячейка.

· col: В текущей ячейке представлена заголовочная информация для оставшейся части столбца, в котором содержится эта ячейка.

· rowgroup: В ячейке представлена заголовочная информация для оставшейся, в которой содержится эта ячейка.

· colgroup: В ячейке представлена заголовочная информация для оставшейся, в которой содержится эта ячейка.

abbr = текст

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

axis = cdata

Этот атрибут может использоваться вместо ячейки в концептуальных категориях, которая может использоваться для формирования axes в n-мерном пространстве. Агенты пользователей могут давать пользователям доступ к этим категориям (например, пользователь может запрашивать у агента все ячейки, принадлежащие к определенной категории, агент пользователя может представлять таблицу в форме оглавления и т.д.). Подробнее см. в разделе о. Значением этого атрибута является список имен категорий, разделенных запятыми.

rowspan = число

Этот атрибут определяет число строк, spanned текущей ячейкой. По умолчанию используется значение один («1»). Значение ноль («0») означает, что ячейка spans все строки от текущей до последней строки таблицы.

colspan = число

Этот атрибут определяет число столбцов, spanned текущей ячейкой. По умолчанию используется значение один («1»). Значение ноль («0») означает, что ячейка spans все столбцы от текущего до последнего столбца таблицы.

nowrap

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

width = пикселы

Нежелателен. Этот атрибут дает агентам пользователей рекомендуемую ширину ячейки.

height = пикселы

Нежелателен. Этот атрибут

1.3 Вложенные таблицы

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

Приведем пример HTML – кода вложенной таблицы:

<HTML>

<HEAD> <TITLE>Города Республики Дагестан</TITLE> </HEAD>

<BODY>

<CAPTION><H2>Города Республики Дагестан</H2>

Н – Население города (тыс. жит., 1992 г.)   

Р расстояние от Махачкалы (км)</CAPTION>

<CAPTION><STRONG>Поселки, подчиненные Махачкале </STRONG></CAPTION> <TR><TH>Поселок</TH><TH>H</TH><TH>P </TH></TR>

<TR><TD>Семендер</TD><TD ALIGN=RIGHT> 13.6</TD><TD ALIGN=RIGHT>50 </TD> </TR>

<TR><TD>Хушет </TD><TD ALIGN=RIGHT>144.6</TD><TD ALIGN=RIGHT>26</TD></TR>

<TR><TD>Кяхулай </TD><TD ALIGN=RIGHT 45.2</TD><TD ALIGN=RIGHT>48</TD></TR>

<TR><TD>Редукторный </TD><TD ALIGN=RIGHT> 42.0</TD><TD ALIGN=RIGHT> 40</TD></TR>

<TR><TD>Сепараторный </TD><TD ALIGN=RIGHT> 25.4 </TD><TD ALIGN=RIGHT>30</TD></TR>

<TR><TD> 5 Поселок </TD><TD ALIGN=RIGHT> 83.8</TD><TD ALIGN=RIGHT>29</TD></TR>

<TR><TD>Ленинкент </TD><TD ALIGN=RIGHT> 34.9</TD><TD ALIGN=RIGHT>35</TD></TR> </TABLE>

<P> <CENTER> Все поселки, подчиненные<BR>администрации<BR>Махачкалы, имеют<BR>прямые городские<BR>номера. </CENTER> </TD>

<CAPTION><STRONG>Поселки областного подчинения</CAPTION>

<TR><TH>Поселок</TH><TH>H</TH><TH>P</TH></TR>

<TR><TD>Кизляр</TD><TD ALIGN=RIGHT> 21.6</TD><TD ALIGN=RIGHT> 245</TD></TR>

<TR><TD>Бабаюрт</TD><TD ALIGN=RIGHT> 50.3</TD><TD ALIGN=RIGHT>122</TD></TR>

<TR><TD>Кизилюрт</TD><TD ALIGN=RIGHT> 32.9</TD><TD ALIGN=RIGHT>24</TD></TR>

<TR><TD>Буйнакск</TD><TD ALIGN=RIGHT> 80.9</TD><TD ALIGN=RIGHT>24</TD></TR>

<TR><TD>Каспийск</TD><TD ALIGN=RIGHT> 1.0</TD><TD ALIGN=RIGHT>159</TD></TR>

<TR><TD>Дербент</TD><TD ALIGN=RIGHT> 80.9</TD><TD ALIGN=RIGHT>46</TD></TR>

<TR><TD>Избербаш</TD><TD ALIGN=RIGHT> 11.9</TD><TD ALIGN=RIGHT>147</TD></TR>

<TR><TD>Южно-Сухокумск</TD><TD ALIGN=RIGHT> 5.9</TD><TD ALIGN=RIGHT>157</TD></TR>

<TR><TD>Гунибский</TD><TD ALIGN=RIGHT> 51.5</TD><TD ALIGN=RIGHT>138</TD></TR>

<TR><TD>Курахский</TD><TD ALIGN=RIGHT> 53.8</TD><TD ALIGN=RIGHT>115</TD></TR>

<TR><TD>Левашинский</TD><TD ALIGN=RIGHT> 23.8</TD><TD ALIGN=RIGHT>55</TD></TR>

<TR><TD>Кулинский</TD><TD ALIGN=RIGHT> 27.3</TD><TD ALIGN=RIGHT>244</TD></TR>

<TR><TD>Дербентский</TD><TD ALIGN=RIGHT> 41.8</TD><TD ALIGN=RIGHT> 139</TD></TR> </TABLE> </TD>

<CAPTION><STRONG> (продолжение таблицы) </CAPTION>

<TR><TH>Поселок</TH><TH>H</TH><TH>P</TH></TR>

<TR><TD>Кахиб</TD><TD ALIGN=RIGHT> 4.7</TD><TD ALIGN=RIGHT>85</TD></TR>

<TR><TD>Телетль</TD><TD ALIGN=RIGHT> 11.2</TD><TD ALIGN=RIGHT>141</TD></TR>

<TR><TD>Терекли-Мектеб</TD><TD ALIGN=RIGHT> 22.9</TD><TD ALIGN=RIGHT>40</TD></TR>

<TR><TD>Татархан</TD><TD ALIGN=RIGHT> 25.1</TD><TD ALIGN=RIGHT>246</TD></TR>

<TR><TD>Кирка</TD><TD ALIGN=RIGHT> 23.1</TD><TD ALIGN=RIGHT>285<TD></TR>

<TR><TD>Курах</TD><TD ALIGN=RIGHT> 6.7</TD><TD ALIGN=RIGHT>137</TD></TR>

<TR><TD>Гимры</TD><TD ALIGN=RIGHT> 20.5</TD><TD ALIGN=RIGHT>145</TD></TR>

<TR><TD>Ксумкент</TD><TD ALIGN=RIGHT> 42.6</TD><TD ALIGN=RIGHT>192</TD></TR>

<TR><TD>Акуша</TD><TD ALIGN=RIGHT> 57.6</TD><TD ALIGN=RIGHT>81</TD></TR>

<TR><TD>Сивух</TD><TD ALIGN=RIGHT> 72.0</TD><TD ALIGN=RIGHT>200</TD></TR>

<TR><TD>Куллар</TD><TD ALIGN=RIGHT> 33.8</TD><TD ALIGN=RIGHT>53</TD></TR>

<TR><TD>Даркуш</TD><TD ALIGN=RIGHT> 12.5</TD><TD ALIGN=RIGHT>64</TD></TR>

</TABLE> </TD> </TR> </TABLE>

</BODY> </HTML>

2. Фреймы и формы

2.1 Понятие фреймов

Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из этих подобластей можно загрузить отдельный HTML – документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.

Возможность работы с фреймами впервые реализована в браузере Netscape 2.0. Следующая версия браузера Netscape 3.0 обогатила возможности фреймов, добавив несколько дополнительных параметров к основным тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer поддерживает фреймы, начиная с версии 3.0, а также предоставляет уникальную возможность создания плавающих фреймов.

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

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

Вот простой документ с использованием фреймов:

<!DOCTYPE HTML PUBLIC « //W3C //DTD HTML 4.0 Frameset //EN»>

<HTML>

<HEAD>

<TITLE>Простой документ с фреймами</TITLE> </HEAD>

</FRAMESET>

<P> В этом документе содержится:

<LI><A href= «contents_of_frame1.html»>Миленький текстик</A>

<LI><A href= «contents_of_frame3.html»> Славный текст </A>

</UL>

</NOFRAMES>

</FRAMESET>

</HTML>

Если агент пользователя не может представлять фреймы или сконфигурирован так, чтобы не делать этого, он должен генерировать содержимое элемента NOFRAMES.

2.2 Расположение фреймов

Документ HTML, в котором описывается компоновка фреймов (называемый документом с фреймами), выглядит не так, как документ HTML без фреймов. Стандартный документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.

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

Элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET, иначе элемент FRAMESET будет игнорироваться.

Элемент FRAMESET

Определения атрибутов

rows = multi-length-list

Этот атрибут определяет расположение горизонтальных фреймов. Это разделенный запятыми список пикселей, процентов и относительных длин. По умолчанию используется 100%, что означат одну строку.

cols = multi-length-list

Этот атрибут определяет расположение вертикальных фреймов. Это разделенный запятыми список пикселей, процентов и относительных длин. По умолчанию используется 100%, что означат один столбец.

Элемент FRAMESET определяет макет основного окна пользователя в виде прямоугольных пространств.

Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Установка атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.

Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этих атрибутов, фрейм занимает всю страницу.

Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.

В первом примере экран разделяется горизонтально на две части (то есть создаются верхняя и нижняя части).

…продолжение определения…

</FRAMESET>

В следующем примере создается три столбца: второй имеет фиксированную ширину 250 пикселей (это полезно, например, для представления изображения известной ширины). Первый фрейм получает 25% оставшегося пространства, а третий – 75%.

…продолжение определения…

</FRAMESET>

В следующем примере создается сетка 2x3.

…продолжение определения…

</FRAMESET>

Для следующего примера предположим, что окно браузера имеет высоту строго 1000 пикселей. Первый раздел получает 30% общей высоты (300 пикселей). Второй имеет высоту ровно 400 пикселей. Остается 300 пикселей на два другие фрейма. Для четвертого фрейма задана высота «2*», так что он должен быть вдвое выше третьего, для которого заданы высота «*» (эквивалентно 1*). Таким образом, третий фрейм будет иметь высоту 100 пикселей, а четвертый – 200.

…продолжение определения…

</FRAMESET>

Абсолютные длины, если они не дают в сумме 100% реально доступного пространства, должны корректироваться агентом пользователя. Если указана длина менее фактической, оставшееся пространство должно равномерно распределяться между всеми разделами. Если указана длина, превышающая фактическую, каждый раздел должен уменьшаться в зависимости от того, какую часть пространства он занимает.

2.3 Вложенные наборы фреймов

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

…содержимое первого фрейма…

…содержимое второго фрейма, первая строка…

…содержимое второго фрейма, вторая строка…

</FRAMESET>

…содержимое третьего фрейма…

</FRAMESET>

Элемент FRAME

Определения атрибутов

name = cdata

Назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках.

longdesc = uri

Ссылка на длинное описание фрейма. Это объявление должно дополнять краткое описание, задаваемое атрибутом title, и может быть особенно полезно для невизуальных агентов пользователей.

src = uri

Определяет местонахождение начального содержимого фрейма.

noresize

Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя.

scrolling = auto|yes|no

Этот атрибут задает информацию о прокрутке фрейма. Возможные значения

· auto: При необходимости предоставлять возможности прокрутки. Это значение используется по умолчанию.

· yes: Всегда предоставлять возможности прокрутки.

· no: Не предоставлять возможности прокрутки.

frameborder = 1|0

Этот атрибут предоставляет агенту пользователя информацию о границе фрейма. Возможные значения:

· 1: Агент пользователя должен изобразить разделитель между этим фреймам и всеми прилежащими фреймами. Это значение используется по умолчанию.

· 0: Агент пользователя не должен отображать разделитель. Обратите внимание, что разделители могут все равно отображаться, если они заданы в других фреймах.

marginwidth = пикселы

Этот атрибут задает пространство, оставляемое во фрейме в качестве левого и правого полей. Значение должно превышать один пиксель. Значение по умолчанию зависит от агента пользователя.

marginheight = пикселы

Этот атрибут определяет верхнее и нижнее поля в фрейме. Значение должно превышать один пиксель. Значение по умолчанию зависит от агента пользователя.

Атрибуты, определяемые в другом месте

· title ()

· target ()

Элемент FRAME определяет содержимое и вид одного фрейма.

Атрибут src определяет исходный документ, содержащийся в фрейме.

В следующем примере документа HTML:

<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 4.0 Frameset //EN»

«_THE_LATEST_VERSION_/frameset.dtd»>

<HTML>

<HEAD> <TITLE>Документ с фреймами</TITLE> </HEAD>

</FRAMESET>

</FRAMESET>

</HTML>

Агент пользователя должен загружать каждый файл в отдельный раздел. Содержимое фрейма и его определение не должны находиться в одном документе.

2.4 Определение цели фрейма

Определения атрибутов

target = frame-target

Задает имя фрейма, в котором должен открываться документ.

Назначая фрейму имя с помощью атрибута name, авторы могут ссылаться на него как на «target» для ссылок, определяемый другими элементами. Атрибут target может устанавливаться для элементов, создающих ссылки (A, LINK), навигационных карт (AREA) и форм (FORM).

Информацию о распознаваемых именах фреймов Вы можете найти в разделе о.

В этом примере показано, как цели обеспечивают динамическое изменение содержимого фрейма. Сначала определим набор фреймов в показанном здесь документе frameset.html:

<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 4.0 Frameset //EN»

«_THE_LATEST_VERSION_/frameset.dtd»>

<HTML>

<HEAD>

<TITLE>Документ с фреймами</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Затем в файле init_dynamic.html мы будем ссылаться на фрейм с именем «dynamic».

<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 4.0 Frameset //EN»

«_THE_LATEST_VERSION_/frameset.dtd»>

<HTML>

<HEAD>

<TITLE>Документ с якорями с определенными целями</TITLE>

</HEAD>

<BODY>

…начало документа…

<P>Теперь можно перейти к

<A href= «slide2.html» target= «dynamic»>слайду 2.</A>

…продолжение документа…

<P>Все отлично. Переходим к

<A href= «slide3.html» target= «dynamic»>слайду 3.</A>

</BODY>

</HTML>

Активизация любой из ссылок приведет к открытию нового документа во фрейме с именем «dynamic», в то время как в другом фрейме, «fixed», сохраняется исходное содержимое.

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

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

Если во многих ссылках в документе используется одна и та же цель, можно указать ее один раз и использовать везде с помощью атрибута target каждого элемента. Это делается с помощью установки атрибута target элемента BASE.

Вернемся к предыдущему примеру и определим информацию о цели в элементе BASE и удалим ее из элементов A.

<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 4.0 Frameset //EN»

«_THE_LATEST_VERSION_/frameset.dtd»>

<HTML>

<HEAD>

<TITLE>Документ с определением цели в элементе BASE</TITLE>

</HEAD>

<BODY>

…начало документа…

<P>Теперь Вы можете перейти к <A href= «slide2.html»>слайду 2.</A>

…продолжение документа…

<P>Все отлично. Переходим к

<A href= «slide3.html»>слайду 3.</A>

</BODY>

</HTML>

Агенты пользователей должны определять целевой фрейм, в который должен загружаться связанный ресурс в соответствии со следующими приоритетами (от высшего к низшему):

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

2. Если для элемента не установлен атрибут target, а в элементе BASE он установлен, фрейм определяется атрибутом target элемента BASE.

3. Если ни в самом элементе, ни в элементе BASE цель не указана, назначенный элементом ресурс должен загружаться во фрейм, в котором содержится сам элемент.

4. Если в атрибуте target указан неизвестный фрейм F, агент пользователя должен создать новое окно и фрейм, назначить фрейму имя F и загрузить назначаемый элементом ресурс в новый фрейм.

Агенты пользователей могут обеспечивать для пользователей механизм переопределения атрибута target.

2.5 Альтернативное содержимое

Авторы должны указывать альтернативное содержимое для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы не отображать их.

Элемент NOFRAMES задает содержимое, которое должно отображаться, только если не отображаются фреймы. Агенты пользователей, поддерживающие фреймы, должны отображать содержимое объявления NOFRAMES, только если они сконфигурированы так, чтобы не отображать фреймы. Агенты пользователей, не поддерживающие фреймы, должны отображать содержимое элемента NOFRAMES в любом случае.

Элемент NOFRAMES можно использовать в разделе FRAMESET документа с фреймами. Например:

<P> Это <A href= «main-noframes.html»> Версия документа без фреймов. </A>

</NOFRAMES>

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

В следующем документе с фреймами описываются два фрейма. В левом фрейме находится содержание, а в правом сначала – изображение устрицы:

<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 4.0 Frameset //EN»

«_THE_LATEST_VERSION_»>

<HTML>

<HEAD>

<TITLE>Плохо составленный документ с фреймами</TITLE>

</HEAD>

</FRAMESET>

</HTML>

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

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

2.6 Встроенные фреймы: элемент IFRAME

Определения атрибутов

longdesc = uri

Этот атрибут определяет ссылку на длинное описание фрейма. Это описание должно дополнять краткое описание, задаваемое атрибутом title, и особенно полезно для невизуальных агентов пользователей.

name = cdata

Этот атрибут назначает имя текущего фрейма. Имя может использоваться в качестве цели в ссылках.

width = длина

Длина встроенного фрейма.

height = длина

Высота встроенного фрейма.

Атрибуты, определяемые в другом месте

· id, class ()

· title ()

· style ()

· name, src, frameborder, marginwidth, marginheight, scrolling ()

· target ()

· align ()

Элемент IFRAME позволяет авторам вставлять фрейм в блок текста. Вставка встроенного фрейма в раздел текста скорее похожа на вставку объекта с помощью элемента OBJECT: оба они позволяют Вам вставить один документ HTML в другой, оба могут выравниваться относительно окружающего текста и т.д.

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

Для поддерживающих фреймы агентов пользователей в следующем примере в текст будет помещен отделенный границей встроенный фрейм.

<IFRAME src= «foo.html» width= «400» height= «500»

scrolling= «auto» frameborder= «1»>

[Ваш агент не поддерживает фреймы или сконфигурирован так, чтобы не отображать их. Однако Вы можете просмотреть

<A href= «foo.html»>этот документ.</A>]

</IFRAME>

Изменять размер встроенных фреймов нельзя.

2.7 Понятие формы
Форма HTML – это раздел документа, в котором содержатся обычная информация, разметка и специальные элементы, называемые управляющими элементам (флажки, кнопки с зависимой фиксацией, меню и т.д.), а также метки этих управляющих элементов. Обычно пользователи «заполняют» форму, модифицируя управляющие элементы (вводя текст, выбирая пункты меню и т.д.) перед тем, как предоставить форму агенту пользователя для обработки (например, на Web-сервер, на почтовый сервер и т.д.)

Пользователи взаимодействуют с формами с помощью именованных управляющих элементов.

«Имя элемента» задается атрибутом name. Областью действия атрибута name для управляющего элемента в элементе FORM является элемент FORM.

Каждый управляющий элемент имеет начальное и текущее значение, оба они являются символьными строками. Информацию о начальных значениях и возможных ограничениях на значения. В общем случае «исходное значение» управляющего элемента может задаваться с помощью атрибута value. Однако исходное значение элемента TEXTAREA задается его содержимым, а исходное значение элемента OBJECT в форме определяется реализацией объекта (т.е. лежит вне области, рассматриваемой в данной спецификации).

«Текущее значение» управляющего элемента сначала устанавливается равным начальному значению. Затем текущее значение может изменяться пользователем или

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

Когда форма предоставляется для обработки, с формой пары управляющий элемент-текущее значение. Передаваемые пары имя/значение называются.

В HTML определены следующие типы управляющих элементов:

кнопки

Авторы могут создавать три типа кнопок:

·           кнопки отправки: При активизации такой кнопки производится. В форме может быть несколько кнопок отправки.

·           кнопки сброса: При активизации такой кнопки для всех управляющих элементов устанавливаются

·           прочие кнопки: Для таких кнопок действие по умолчанию не определено. С атрибутами каждой такой кнопки могут быть связаны. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт.

Авторы должны определять язык скрипта для кнопок в (в элементе META).

Авторы создают кнопки с помощью элемента BUTTON или INPUT. Подробнее об определении различных типов кнопок.

флажки

Флажки (и кнопки с зависимой фиксацией) – это переключатели вкл./выкл., которые могут переключаться пользователем. Переключатель «включен», если для управляющего элемента установлен атрибут selected.

При отправке формы могут стать только включенные переключатели. Несколько флажков в форме могут иметь одно и то же Таким образом, например, флажки позволяют пользователям выбрать несколько значений для одного и того же свойства. Для создания флажков используется элемент INPUT.

кнопки с зависимой фиксацией

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

меню

Предоставляют пользователям варианты на выбор. Меню создается с помощью элемента SELECT, а также элементов OPTGROUP и OPTION.

текстовый ввод

Для ввода текста пользователем авторы могут создавать управляющие элементы двух типов. Элемент INPUT создает управляющий элемент для ввода текста из одной строки, а элемент TEXTAREA – элемент для ввода текста из нескольких строк. В обоих случаях вводимый текст становится управляющего элемента.

выбор файлов

Управляющие элементы этого типа позволяют пользователям выбирать файлы, содержимое которых может передаваться вместе с формой. Для создания этого управляющего элемента используется элемент INPUT.

скрытые управляющие элементы

Авторы могут создавать управляющие элементы, не представляемые пользователям, но имеющие значения, которые передаются с формой. Обычно они используются для хранения информации между обменом клиент / сервер, которая в противном случае могла бы пропасть вследствие stateless природы протокола HTTP (см.). Для создания скрытого управляющего элемента используется элемент INPUT.

объекты

Авторы могут помещать в формы общие объекты, так что связанные с ними значения будут передаваться с другими управляющими элементами. Для создания таких управляющих элементов используется элемент OBJECT.

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

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

action = uri

Задает агента для обработки формы. Например, значением может быть URI HTTP (для передачи формы в программу) или mailto URI (для отправки формы по электронной почте).

method = get|post

Определяет метод HTTP, используемый для передачи. Возможные значения (с учетом регистра) «get» (по умолчанию) и «post».

enctype = content-type

Этот атрибут задает, используемый для отправки формы на сервер (если для метода используется значение «post»). По умолчанию для этого атрибута используется значение «application/x-www-form-urlencoded». С элементом INPUT, type= «file» должно использоваться значение «multipart/form-data».

accept-charset = список наборов символов

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

По умолчанию значением этого атрибута является зарезервированная строка «UNKNOWN». Агенты пользователей могут интерпретировать это значение как кодировку символов, используемую для передачи документа, содержащего этот элемент FORM.

accept = content-type-list

Этот атрибут определяет разделенным запятыми список типов содержимого, которые должен корректно обрабатывать сервер, обрабатывающий форму. Агенты пользователей могут использовать эту информацию для отфильтровывания отвечающих спецификации файлов при предложении пользователю выбора файлов для отправки на сервере (если в элементе INPUT указано type= «file»).

Атрибуты, определяемые в другом месте

·           title ()

·           target ()

Элемент FORM служит контейнеров для. Он определяет:

·           Макет формы (дается содержимым элемента).

·           Программу, которая будет обрабатывать заполненную и переданную форму (атрибут action). Получающая форму программа должна иметь возможность определения пар имя/значение, чтобы их использовать.

·           Метод отправки данных на сервер (атрибут method).

·           Кодировку символов, которая должна приниматься сервером для обработки этой формы (атрибут accept-charset). Агенты пользователей могут рекомендовать пользователю значение атрибута accept-charset и / или не позволять пользователям вводить нераспознаваемые символы.

Форма помимо может содержать текст и разметку (абзацы, списки и т.д.).

В следующем примере показана форма, которая должна обрабатываться программой «adduser». Эта форма будет отправляться с использованием метода HTTP «post».

<FORM action= «http://somesite.com/prog/adduser» method= «post»>
…содержимое формы…
</FORM>
В следующем примере показана отправка формы на адрес электронной почты:

<FORM action= «mailto: Kligor.T@gee.whiz.com» method= «post»>
…содержимое формы…
</FORM>
Информацию о том, как агенты пользователя должны подготавливать данные формы для серверов и как они должны обрабатывать ответы от сервера Вы можете найти в разделе об.

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button

Определяет. По умолчанию используется значение «text».

name = cdata

Определяет.

value = cdata

Определяет управляющего элемента. Этот атрибут не обязателен, если только для атрибута type не установлено значение «radio».

size = cdata

Сообщает агенту пользователя начальную ширину управляющего элемента. Ширина дается в, если для атрибута type не установлено значение «text» или «password». В этом случае ширина задается в числе символов (число должно быть целым).

maxlength = число

Если для атрибута type установлено значение «text» или «password», этот атрибут определяет максимальное число символов, вводимых пользователем. Это число может превышать указанный в атрибуте size размер поля; в этом случае агент пользователя должен обеспечивать механизм прокрутки. По умолчанию число символов не ограничено.

checked

Если для атрибута type установлено значение «radio» или «checkbox», этот логический атрибут указывает, что флажок установлен. Агенты пользователей должны игнорировать этот атрибут для других типов управляющих элементов.

src = uri

Если атрибут type имеет значение «image», этот атрибут определяет местоположение изображения, используемое для представления графической кнопки.

Атрибуты, определяемые в другом месте

·           title ()

·           alt ()

·           align ()

определяемый элементом INPUT, зависит от значения атрибута type:

text

Создает элемент из одной строки.

password

Аналогичен значению «text», но вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек). Этот управляющий элемент часто используется для ввода паролей. Обратите внимание, что является текст, введенный пользователем, а не текст, представляемый агентом пользователя.

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

checkbox Создает

radio          Создает

submit        Создает

image         Создает графическую Значение атрибута src задает URI изображения, используемого для представления кнопки. Из соображений доступности авторам следует предусматривать для изображения с помощью атрибута alt.

Если для щелчка на изображении используется указующее устройство, на сервер передаются форма и координаты щелчка. Значение x измеряется в от левой границы изображения, а значение y – в от верхней границы изображения. В передаваемые данные включаются последовательности имя.x=значение-x и name.y=значение-y, где «имя» – значение атрибута name, а значение-x и значение-y – значения координат x и y соответственно.

Если сервер предпринимает различные действия в зависимости от места щелчка, пользователи неграфических браузеров не смогут воспользоваться этим свойством. По этой причине авторам следует предусматривать альтернативные подходы:

·           Использовать несколько кнопок отправки (каждая с отдельным изображением) вместо одной графической кнопки. Можно использовать для управления местоположением этих кнопок таблицы стилей.

·           Использовать и скрипты.

reset Создает кнопку сброса.

button        Создает другую кнопку. Агенты пользователей должны использовать в качестве метки на кнопке значение атрибута value.

hidden       Создает невидимый управляющий элемент.

file    Создает управляющий элемент выбор файла. Агенты пользователей могут использовать значение атрибута value в качестве исходного имени файла.

В следующем фрагменте кода HTML определяется простая форма, позволяющая пользователям вводить имя, фамилию, адрес электронной почты и пол. В случае активизации кнопки отправки форма передается программе, указанной в атрибуте action.

<FORM action= «http://somesite.com/prog/adduser» method= «post»>
<P>
Имя: <INPUT type= «text» name= «firstname»><BR>
Фамилия: <INPUT type= «text» name= «lastname»><BR>
email: <INPUT type= «text» name= «email»><BR>
<INPUT type= «radio» name= «sex» value= «Male»> Мужской<BR>
<INPUT type= «radio» name= «sex» value= «Female»> Женский<BR>
<INPUT type= «submit» value= «Отправить»> <INPUT type= «reset»>
</P>
</FORM>
В следующем примере показано, как содержимое указанного пользователем файла – может передаваться вместе с формой. У пользователя запрашивается имя и список имен файлов, содержимое которых должно передаваться с формой. С помощью указания значение enctype для «multipart/form-data» содержимое всех файлов будет упаковываться для передачи в отдельные разделы существующего документа.

<FORM action= «http://server.dom/cgi/handle»
enctype= «multipart/form-data»
method= «post»>
<P>
Как Вас зовут? <INPUT type= «text» name= «name_of_sender»>
Какие файлы Вы отправляете? <INPUT type= «file» name= «name_of_files»>
</P>
</FORM>
Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

name = cdata

Определяет

value = cdata

Определяет кнопки.

type = submit|button|reset

Объявляет тип кнопки. Возможные значения:

·           submit: Создает Это значение используется по умолчанию.

·           reset: Создает

·           button: Создает

Кнопки, создаваемые с помощью элемента BUTTON, действуют так же, как и кнопки, создаваемые с помощью элемента INPUT, но они обеспечивают более богатые возможности представления: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, действует и может resemble подобно элементу INPUT, для атрибута type которого установлено значение «image», но тип элемента BUTTON может иметь содержимое content.

Визуальные агенты пользователей могут представлять кнопки BUTTON рельефно или с эффектом нажатия при щелчке мыши, в то время как кнопки INPUT могут представляться только как «плоские» изображения.

В следующем примере предыдущий пример расширяется, и кнопки и создаются с помощью элемента BUTTON вместо элемента INPUT. Используемое для кнопок изображение определяется элементом IMG.

<FORM action= «http://somesite.com/prog/adduser» method= «post»>
<P>
Имя: <INPUT type= «text» name= «firstname»><BR>
Фамилия: <INPUT type= «text» name= «lastname»><BR>
email: <INPUT type= «text» name= «email»><BR>
<INPUT type= «radio» name= «sex» value= «Male»> Мужской<BR>
<INPUT type= «radio» name= «sex» value= «Female»> Женский<BR>
<BUTTON name= «submit» value= «Отправить» type= «submit»>
Send<IMG src=»/icons/wow.gif» alt= «Ого»></BUTTON>
<BUTTON name= «reset» type= «reset»>
Reset<IMG src=»/icons/oops.gif» alt= «ой»></BUTTON>
</P>
</FORM>
Помните, что авторам следует предусматривать для элемента IMG.

Не допускается связывать изображение-карту с элементом IMG, содержащимя в элементе BUTTON element.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов элемента SELECT

name = cdata

Определяет

size = number

Если элемент SELECT представлен в виде списка с возможностью прокрутки, этот атрибут определяет число строк в списке, видимых в один момент времени. Визуальные агенты пользователей не обязательно должны представлять элемент SELECT в виде списка; они могут использовать другие механизмы – например, выпадающие меню.

multiple

Если этот логический атрибут установлен, он позволяет выбирать несколько пунктов. Если он не установлен, в элементе SELECT можно выбрать только один вариант.

Элемент SELECT создает. Каждый вариант пункт меню представляется элементом OPTION. Элемент SELECT должен содержать хотя бы один элемент OPTION.

Элемент OPTGROUP element позволяет авторам логически группировать варианты. Обычно это полезно, если пользователь должен делать выбор в длинном списке вариантов; группы связанных вариантов проще просматривать и запоминать, чем один длинный список вариантов. В HTML 4.0 все элементы OPTGROUP должны задаваться непосредственно в элементе SELECT (т.е. группы не могут быть вложенными).

Литература

1. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0 – СПб.: БХВ – Петербург, 2007. – 672 с.

2. Финков М.В. Интернет. Шаг второй: от пользователя к профессионалу – Спб.: Наука и Техника, 2002. – 768 с.

3. Левин А.Ш. Самоучитель работы на компьютере. 8-е изд. – СПб.: Питер, 2005. – 655 с.

4. Леонтьев В.П. Новейшая энциклопедия персонального компьютера 2004 – М.: Олма-Пресс, 2004.

5. Никамин В.А. Цифровая звукозапись: технологии и стандарты – СПб.: Наука и Техника, 2002.

6. Спецификация HTML 4.0