www.wmaster.ru
Wmaster.ru

На главную

Введение в дизайн

СТАТЬИ

Хостинг

DOCS

Коллекция шрифтов

Скрипты

Секреты мастеров

Продвижение сайта

Soft

Журнал Wmaster

Электронные журналы

ФоруМ

web-mastering
HTML
Programming
HTML-редакторы
Учебник по SEO
Apache
MySQL
XML/WML
Flash
Photoshop
.htaccess
Всё для форумов
Clipart
3DSMax
SSI
CSS
Технология раскрутки
Авторское право
Кодовые таблицы
Важное

Windows

Учебник по Adobe GoLive6

ЯЗЫК HTML (ЧАСТЬ 2)

Списки
Таблицы
Фреймы
Встраиваемые объекты
Формы
Использование сценариев

Списки

В идеале, вопросы оформления списков мы должны были рассматривать в разд. "Оформление текста" ранее в этой главе, так как списки тоже состоят из текстовых строк и абзацев. Но тема списков достаточно велика, поэтому ей и был выделен отдельный раздел.
Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.
Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ui> и его закрывающим близнецом </ui>. Отдельные элементы списка объявляются при помощи обозначающего тега <ii>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.

Примечание
Использовать необязательные закрывающие теги в HTML-документах имеет смысл, если в последующем мы собираемся отображать их при помощи XML-браузеров. О новом стандарте XML, который со временем должен будет сменить HTML. Обязательным условием корректного распознавания документов в ХМL является обязательное присутствие всех закрывающих тегов.

Приведем простейший пример использования нумерованного списка

Листинг 1.18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Mapкированный список</title> <body> <р>Это обычный текст. </р>
<ul>
<1i>
Первый пункт списка
<1i> Второй пункт списка
</ul>
</body>
</html>

Результат отображения данного кода в окне просмотра браузера показан на рис. 1.17.


Рис. 1.17. Окно браузера с результатом отображения файла, приведенного в листинге 1.18

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

  • Значение disc указывает браузеру, что следует использовать маркеры в виде маленького заполненного круга.
  • Значение circle задает маркер в виде окружности.
  • Значение square устанавливает маркер в виде маленького прямоугольника.

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

Листинг 1.19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mapкированный список</title> <body>
<ul>
<li type="circle">Первый пункт списка
<li type="disc">Bторой пункт списка
<li type="square">Tpeтий пункт списка
</ul>
</body>
</html>

Результат отображения данного кода в окне просмотра браузера показан на рис. 1.18.

Рис. 1.18. Окно браузера с результатом отображения файла, приведенного в листинге 1.19

Необходимо отметить, что как именно будет отображен маркер того или иного типа зависит только от браузера, и маркеры не обязаны быть одинаковыми в различных браузерах. Однако общее подобие всегда будет сохранено, и окружность всегда останется окружностью, а прямоугольник — прямоугольником.
Также в теге <и> может использоваться параметр compact, применяемый без каких-либо значений. Если его ввести в состав искомого тега, то браузер должен будет отобразить содержимое элемента списка более компактно. Однако параметр является директивным, и отработка его лежит только на совести производителей того или иного браузера. Мне не удалось заметить каких-либо ощутимых изменений во внешнем виде элементов списка при использовании данного параметра.
Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов <oi> и </oi>. А элементы списка объявляются при помощи все того же тега <ii>. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер.

Листинг 1.20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</title>Нумерованный cписок</title>
<body>

<ol>
<li>Первый пункт списка
<li>Bторой пункт списка
<li>Tpeтий пункт списка
</ol>
</body>
</html>

Рис. 1.19. Окно браузера с результатом отображения файла, приведенного в листинге 1.20

Опять-таки, при использовании стандартных "умолчальных" значений нумерованный список выглядит просто и правильно, но этого может быть недостаточно. Для изменения его параметров и внешнего вида, т. е. адаптации к пользовательскому виду, у нас есть достаточно средств, т. е. параметров все того же тега <li>.
Уже знакомый нам параметр type позволяет указывать, какие именно цифры могут использоваться для обозначения элементов списка. В качестве значения данного параметра используется одно из предустановленных ключевых слов, которые мы сейчас все и рассмотрим.

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

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

Листинг 1.21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http: //www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hyмepoванный cписок</title>
<body>
<li type="1">Первый пункт списка
<li type="a">Bторой пункт списка
<li type="A">Tpeтий пункт списка
<li type="i">Четвертый пункт списка
<li type="I">Пятый пункт списка
</body>
</html>

На рис. 1.20 видно, как при сохранении единой нумерации элементов списка браузер меняет внешний вид каждого элемента списка, сохраняя при этом их общую нумерацию. HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в тег <ol> вставляется параметр start. Значением того параметра является натуральное число, которое и будет номером первого элемента списка. Но внутри списка мы можем произвольно пенять порядковые номера элементов при помощи параметра value, применяемого в составе тега <ii>. Для того, чтобы увидеть механизм применения этих параметров, рассмотрим еще один пример (рис. 1.21).

Листинг 1.22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Вложенные списки</title>
<body>
<ol start=5>
<1i>Пятый пункт списка
<1i>Шестой пункт списка
<1i vа1uе=10> Десятый пункт списка
<1i>Одиннадцатый пункт списка
<ol>
</body>
</html>

Рис. 1.20. Окно браузера с результатом отображения файла, приведенного в листинге 1.21

Рис. 1.21. Окно браузера с результатом отображения файла, приведенного в листинге 1.22

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

Листинг 1.23

DOCTYPE HTML PUBLIC '.'-//WSCX/DTD HTML 4.01//EN"
tp: //www. w3.org/TR/html4/strict.dtd">
<bead>
<title> Вложенные списки</title>
<body>
<li>Первый пункт списка
<ol>
<li>Первый вложенный пункт
<li>Второй вложенный пункт
</ol>
<li>Второй пункт списка
<ul>
<li>Вложенный маркированный элемент
<li>Вложенный маркированный элемент
<ul>
</ol>
</body>
<html>

Итак, мы рассмотрели основные варианты использования стандартных нумеро-и маркированных списков. Но в HTML предусмотрены еще несколько специализированных списков, которые тоже необходимо рассмотреть.
перед тем как перейти к непосредственному рассмотрению этих дополниых типов списков, следует сделать маленький экскурс в историю соз-HTML. Дело в том, что изначально он был создан в лаборатории PH Тимом Бернерсом-Ли для публикации связанных научных отчетов и шмсументов, и как следствие, изначально в него были вставлены средства тестового оформления, присущего техническим и научным документам. B их числе и списки определений и терминов.
Сам список определений создается при помощи тега <dl> с его закрывающим близнецом </di>. В качестве элементов используются термины, обозначаемые тегами <dt>, и определения, создаваемые при помощи тегов <dd>. Техническое отличие этих двух элементов списка состоит в том, что термины являются inline-элементами, т. е. обязаны занимать не более одной строки, а определения — flow-элементами, т. е. не ограничены пределами одной строки. Рассмотрим пример применения подобного списка определений (рис. 1.29).

Рис. 1.22. Окно браузера с результатом отображения файла, приведенного в листинге 1.23

Листинг 1.23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//BN
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cписок определений</head>
<body>
<dl>
<dt>Это термин
<dd>A это определение
</dl>
<p>A это обычный текст</р>
</body>
</html>

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

Рис. 1.23. Окно браузера с результатом отображения файла, приведенного в листинге 1.24

Таблицы

Таблицы являются одной из важнейших форм визуальной организации информации, располагающейся на Web-страницах. Это не просто средство отображения таблиц, включенных в состав Web-страниц. Это, пожалуй, единственное средство некоей верстки страниц. Мы знаем, что в HTML, a точнее, в его стандарт не встроены средства точного позиционирования элементов оформления Web-страниц. И здесь таблицы пришлись как нельзя кстати. Их можно раеп|юстранить на всю страницу, и уже в ее ячейках размещать элементы оформления Web-страниц. В качестве подобного средства верстки также могут применяться фреймы, которые мы будем рассматривать в следующем разделе этой главы, но в последнее время в среде Web-мастеров они теряют свою популярность. И тому есть свои причины, которые берут начало в теории пользовательского интерфейса. Но вернемся к нашим таблицам.
Для максимально полного понимания правил использования таблиц необходимо знать их структуру. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки. Так как для всех этих объектов существуют свои параметры, задающие их размеры, создается некоторая иерархия этих свойств. Но основой являются ячейки и их содержимое. Если мы жестко задаем ширину таблицы, скажем, в сто пикселов, а в каждой строке таблицы находится по четыре ячейки, каждая шириной в тридцать пикселов, то, несмотря на явную установку ширину всей таблицы, она все равно составит не сто, а сто двадцать пикселов. А если в какой-либо из ячеек будет находится графическое изображение, шириной более предусмотренных тридцати пикселов, то оно "растянет" собой ячейку, а с ней и весь столбец. А следовательно, еще более увеличится ширина всей таблицы. Сделано это для того, чтобы максимально адекватно отображать содержимое табличных ячеек, без пропажи их содержимого, полного или частичного. А жестко заданные размеры таблицы сохраняются, если есть такая возможность.
Таким образом, явного объекта, обозначающего столбец таблицы, нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица в целом. Таким образом, при загрузке Web-страницы, содержащей таблицы, она не будет отображаться постепенно, по мере ее загрузки, а только после того, как она будет получена браузером вся полностью.
Но пора переходить к рассмотрению тегов, реализующих таблицы. Сама таблица, все ее составляющие, находятся между стартовым тегом <tabie> и его закрывающим близнецом </tabie>. В качестве составляющих используется заголовок таблицы, реализуемый тегом <caption>, группы столбцов, объявляемые при помощи тегов <coi> и <coigroup>, шапка и подвал таблицы, создаваемые тегами <thead> и <tfoot>, соответственно, и группы строк, реализуемые тегом <tbody>. Все остальные, более мелкие элементы таблицы, размещаются уже внутри этих объектов.
Сам тег <tabie> обладает достаточно обширным набором параметров, которые позволяют устанавливать самые различные свойства таблицы.
Так уж сложилось, что вопросам ширины каких-либо элементов оформления Web-страниц мы уделяем много больше внимания, чем установке высоты. Проще говоря, люди много спокойнее относятся к вертикальной полосе прокрутки, нежели к горизонтальной. Поэтому у таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Но вот ширину мы можем явно устанавливать. Производится это при помощи необязательно параметра width. В качестве значения этого параметра мы можем указать прямое или кратное количестве пикселов, или воспользоваться процентным соотношением.
Также часто используется параметр border, при помощи которого мы можем явно указывать ширину границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, которое и указывав ширину таблицы в пикселах. Если мы установим нулевое значение этогс параметра, то сама граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы.
Параметр cellspacing позволяет устанавливать размер в пикселах между отдельными ячейками страницы. А похожий параметр ceiipadding устанавливает размер отступа содержимого ячеек от ее границы, т. е. cellspacing устанавливает отступ вне ячейки, a ceiipadding — внутри ячейки.
А при помощи уже знакомого нам параметра align у нас есть возможносп установить горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: left, center и right, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно.
В самом простом варианте создания таблицы, мы объявляем саму таблицу при помощи тега <tabie>, затем, несколько строк, а внутри этих строк сами ячейки. Это, повторюсь, самый простой способ, который не требует применения всех тех встроенных табличных объектов, которые мы упоминали несколько выше. До них еще дойдет очередь, а пока посмотрим на примере, как создаются и отображаются таблицы в HTML-документах" (рис. 1.24).

Листинг 1.25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=5 cellpadding=7 cellspacing=10 a,lign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>

В данном примере мы намеренно применили достаточно большие значения для толщины границы и отступов снаружи и внутри ячеек для того, чтобы максимально наглядно показать их действие. А из листинга примера видно, что строки таблицы объявляются при помощи пары тегов <tr> и </tr>. Уже внутри этих тегов мы объявляем ячейки при помощи тега <td> и его закрывающей пары </td>, между которыми и находится содержимое каждой конкретной ячейки. Как видно, сколько ячеек будет в строке, столько столбцов в таблице и отобразит браузер. Размер ячеек будет определяться, исходя из размеров содержимого и установленных отступов. При этом, если содержимое какой-либо одной ячейки столбца будет больше по размерам, чем содержимое иных ячеек этого столбца, ширина всего столбца будет установлена по ширине самой большой ячейки.
Естественно, также возможна ситуация, когда создатель Web-страницы в различных строках объявит разное количество ячеек. Но и тогда браузер сможет отобразить таблицу, как это показано в следующем примере (рис. 1. 25).

Рис. 1.24. Окно браузера с результатом отображения файла, приведенного в листинге 1.25

Листинг 1.26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http : / /www . w3 . org/TR/htm!4 /strict . dtd">
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 аlign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>Длинная ячейка</td><td>l0</td>
</tr>
</table>
</body>
</html>

Рис. 1.25. Окно браузера с результатом отображения файла, приведенного в листинге 1.26

Но это был самый простой способ создания таблиц, когда в ее состав входят только основные строки. На самом деле возникает гораздо больше возможностей, если мы используем различные дополнительные объекты, входящие в состав таблицы. Одним из таких объектов является заголовок, реализуемый при помощи тега <caption>. Текст заголовка размещается между этим стартовым тегом и его завершающим двойником </caption>. Тег, объявляющий заголовок таблицы обладает параметром align, при помощи которого мы можем указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: top, bottom, left и right. Значение top заставляет браузер отображать заголовок таблицы над ней самой. Значение bottom перемещает заголовок под таблицу. Значения left и right устанавливают, соответственно, левое и правое горизонтальное выравнивание заголовка, который при этом отображается сверху таблицы. По умолчанию, заголовок отображается сверху, а если не указывать явно выравнивание по горизонтали, то заголовок центрируется. Приведем пример использования этого тега.

Листинг 1.27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.4td">
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный тёкст</р>
<table border=2 align=left>
<caption align=right> 3аголовок таблицы</сарtion>
<tr>
<td> 1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>

В данном случае мы использовали значение right двд параметра align. Та-! ким образом, заголовок отображается сверху таблицы, занимает по горизон-^ тали пространство не больше, чем сама таблица, и текст прижат к правой границе этого пространства. Все это показано на рис. 1.26.

Рис. 1.26. Окно браузера с результатом отображения файла, приведенного в листинге 1.27

Как видно, заголовок таблицы, хоть и относится, строго говоря, к таблице, во отображается вне ее самой. Зато следующие три объекта, которые мы ршгсмотрим, являются составными частями таблицы.
В предыдущих примерах содержимое таблицы разбивалось на обычные равноценные строки. Но ведь обычно таблицы содержат и явно выделенную верхнюю часть, называемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются при помощи тегов <thead> и <tfoot> соответственно. Если мы применяем эти теги в объявлении таблицы, то нам необходимо будет явно обозначить часть таблицы, в которой размещаются обычные данные. Это обозначение производится при помощи тега <tbbdy>. Естественно, все три только что упомянутых тега применяются обязательно в паре со своими закрывающими двойниками. Посмотрим на примере, как изменяется объявление таблицы в коде HTML-документа и при отображении ее в браузере, с использованием этих структурных элементов (рис. 1.27).

Листинг 1.28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.4td">
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный тёкст</р>
<table border=2 align=left>
<caption> 3аголовок таблицы</сарtion>
<thead>
<tr>
<td>Cтолбец 1</td><td>Cтолбец 2</td><td>Cтолбец 3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</tbody>
tfoot>
<tr>
<td>5</td> <td>7</td> <td>9</td>
</tfoot>
</table>
</body>
</html>

Рис. 1.27. Окно браузера с результатом отображения файла, приведенного в листинге 1.28

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

Значение left прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы.
Значение right выравнивает любое содержимое ячеек по правому краю.
Значение center центрирует содержание ячеек, включенных в раздел, к которому и применяется данный параметр. Используется по умолчанию для заголовков таблицы.
Значение justify заставляет браузер попытаться отобразить содержимое ячеек, равномерно растянув их по всей ширине ячейки.
Значение char применяется в том случае, если в ячейках раздела отображается численная информация в финансовом формате, и необходимо выровнять ее не просто по левому или правому краю, а так, чтобы разделители целой и десятичной частей всех чисел находились на одном и том же уровне.

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

Значение top прижимает содержимое ячеек к их верхним границам.
Значение middle центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Данное значение используется по умолчанию.
Значение bottom прижимает содержимое ячеек к их нижним граням.
Значение baseline имеет смысл применять только для ячеек с текстовым содержимым. В этом случае, базовые линии первых строк текстового содержимого ячеек, входящих в объявляемый раздел таблицы, выравниваются по базовой линии первой строки текста содержимого первой ячейки во всей строке. Напомню, что базовой линией текста называется невидимая линия, на которой и располагаются основания большинства! символов применяемого алфавита. Но у некоторых символов, таких как "g" в латинском алфавите, или "р" — в русском, существуют так называемые "хвостики", которые уходят вниз за базовую линию.

При помощи рассмотренных нами блоков таблицы, мы можем структурировать ее содержимое и немного управлять отображением содержимого ячеек, входящих в эти блоки. Но что делать, если нам необходимо установить единые правила оформления для одного или нескольких столбцов таблицы? Как мы знаем, нам нет нужды объявлять их специально, так как столбцы монтируются из ячеек, входящих в строки. Но, тем не менее, в стандарте HTML 4.1 существуют теги, которые позволяют объявлять отдельные столбцы и их группы. Для объявления одного столбца используется тег <col>, а если нам необходимо несколько столбцов объединить в одну группу, лучше использовать тег <coigroup>.
Следует осознавать, что если мы используем эти теги объявления столбцов, то количество столбцов в таблице будет рассчитываться именно на их основе, т. е. нам необходимо каждый столбец описать подобным образом, а не какую-либо их группу. Браузер при отображении таблицы сначала анализирует ее объявление на предмет нахождения тегов, создающих столбцы. Если они есть, то количество столбцов в таблице рассчитывается на их основе. Если таких тегов нет, то количество столбцов рассчитывается исходя из количества ячеек в строках.
При помощи тега <coigroup> мы объявляем группу столбцов. Каждый столбец этой группы мы можем дополнительно явно объявить при помощи тега <col>, но это не обязательно делать, если столбцы имеют одинаковое оформление. Оформление группы столбцов задается при помощи параметров тега <coigroup>. К этому тегу применимы параметры align и vaiign, которые мы рассматривали чуть ранее, с теми же возможными значениями. Помимо этого чаще всего применяется еще два параметра.

Параметр span показывает, какое количество столбцов будет находиться в данной группе. Значением данного параметра является положительное целое число. По умолчанию используется единичное значение, т. е. в группу по умолчанию входит всего один столбец.
Параметр width позволяет устанавливать единую ширину для всех столбцов, входящих в данную группу. Мы можем устанавливать точное абсолютное значение в пикселах, процентное соотношение или "кратные размеры", как мы описывали их в одном из предыдущих разделов данной главы. Так, если мы хотим, чтобы каждый столбец устанавливал ширину минимально необходимую, чтобы вместить содержимое ячеек, следует использовать конструкцию width="0*".

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

<colgroup span="40" width=*H20"> </colgroup>

Только никогда не следует забывать о том, что нам никогда заранее неизвестно, какое разрешение экрана будет у пользователя, загружающего нашу Web-страницу.
Отдельный столбец, входящий в группу, объявляется при помощи тега <coi>. Этот тег обладает тем же .набором параметров, что и рассмотренный нами только что тег <colgroup>. Вот только параметр span здесь имеет несколько иное значение. Как мы знаем, некоторые ячейки, могут объединять сразу несколько ячеек из соседних столбцов. А теги <col> могут создавать столбцы, которые на самом деле будут состоять из нескольких столбцов, т. е. одна ячейка такого столбца может состоять из нескольких тегов <td>. Значение параметра span как раз и указывает, сколько именно столбцов будут объединяться в одном. Приведем пример использования данного параметра.
Если нам необходимо создать таблицу с тремя столбцами, стоит в код HTML-документа вставить следующую конструкцию:

<table>
<colgroup> <col>
<col span="2"> </colgroup>
<tr>
<td> .. . ...Определение строк...
</table>

Между тегами <coigroup> и </coigroup> мы вставили два тега <coi>. Легко заметить, что это просто объявляющие теги, которые не требуют использования закрывающей пары для себя. В данном фрагменте мы создали таблицу с тремя столбцами. Первый столбец объявлен при помощи первого тега <coi>, а вторые два столбца объединены в единую группу при помощи второго тега <coi> с параметром span, значение которого установлено в "два".
Мы знаем, как объявлять столбцы. Но после объявления столбцов мы все равно переходим к заполнению таблицы, и там уже без тегов, создающих строки, не обойтись. Из предыдущих примеров мы видели, что строки создаются при помощи пары тегов <tr> и </tr>, между которыми находятся теги, объявляющие отдельные ячейки. Тег <tr>, естественно, обладает целым рядом параметров, которые, тем не менее, нам уже знакомы. Помимо всеобщих параметров идентификации, есть и параметры, регулирующие отображение информации, находящейся в ячейках, входящих в данную строку. Перечислим их.

Параметр align позволяет регулировать горизонтальное выравнивание содержимого ячеек строки.
Параметр vaiign задает вертикальное выравнивание для содержимого ячеек строки.
Параметр bgcolor позволяет задавать цвет фона для ячеек, входящих в строку.

Сами ячейки мы можем создавать не только при помощи тега <td>, но и при помощи тега <th>. Тег <th> предназначен для создания ячеек верхних строк таблицы, которые содержат наименования столбцов. В следующем листинге показан пример их использования (рис. 1.28).

Листинг 1.28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<р>Это обычный текст</р> <table border=2 align=left> <caption >3аголовок <thead> <tr>
<th> Столбец K/thxth>CTon6eu 2</thxth>CTon6eu 3</th> </tr> </thead> <tbody>
<tr> ..
<td>l</td> <td>2</td> <td>3</td> </tr> <tr>
<td>4</td> <d>5</td> <td>6</td> </tr>
</tbody>
</table>
</body>
</html>

Рис. 1.28. Окно браузера с результатом отображения файла, приведенного в листинге 1.29

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

Параметр rowspan указывает, на сколько строк по вертикали растянута искомая ячейка. При помощи этого параметра мы имеем возможность объединять соседние ячейки, находящиеся в одном столбце таблицы. Значением данного параметра является целое неотрицательное число. По умолчанию используется единичное значение. Если мы для данного параметра установим нулевое значение, то будут объединены ячейки в столбце, начиная от текущей до самой нижней ячейки.
Параметр coispan подобен только что рассмотренному параметру rowspan, но он определяет количество ячеек, объединяемых по горизонтали, в пределах одной строки. Как и прежде, значением по умолчанию является единица, а нулевое значение объединяет ячейки, начиная от текущей и до конца строки таблицы.
Параметр no wrap применяется без каких-либо значений. Его присутствие в теге, объявляющем ячейку, означает, что текстовое содержимое данной ячейки необходимо отображать в одной строке, не разбивая на несколько, если длины ячейки для этого недостаточно. В подобных случаях, если единственная строка текстового содержимого по ширине больше, чем сама ячейка, ширина ячейки будет увеличена, чтобы содержимое было отображено полностью.
Параметр width предназначен для указания рекомендованной ширины ячейки. Значением Данного параметра является число, обозначающее ширину в пикселах, процентное или кратное соотношение. В том случае, однако, если содержимое ячейки, текстовое или графическое, по своим размерам превышает установленную ширину ячейки, та будет принудительно растянута до необходимого размера.
Параметр height предназначен для указания рекомендованной высоты ячейки. Возможные значения и порядок обработки этого параметра браузерами полностью совпадают с только что рассмотренным параметром width.
Параметр align задает горизонтальное выравнивание содержимого ячеек. В качестве значения используется одно из предустановленных ключевых слов, список которых мы рассматривали ранее в этом разделе главы.
Параметр vaiign предназначен для установки вертикального выравнивания содержимого ячейки. Возможные значения этого параметра мы также рассматривали несколько ранее в этом разделе.
Параметр dir позволяет задавать направление отображения текста. Так как некоторые языки предполагают написание слов не слева направо, как привыкли мы, а справа налево,, необходимо иметь возможность явно указывать, куда направлен порядок чтения. Если отображаемый текст должен читаться слева направо, следует использовать значение LTR, установленное по умолчанию. Если текст доложен читаться справа налево, то используется значение RTL.

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

Листинг 1.30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www, w3.org/TR/html4 /strict. dtd">
<html> <head>
</head>
<body> • A .-•
<table border=2 width="100%"> <caption >3аголовок таблицы</сар^оп> <thead> -о
<th bgcolor=Xime rowspan=2>snbsp;<yth><"th> Столбец K/th><th>CT<Mi6eu 2</th><th>CTCMi6eu 3</th>
</tr>
<tr>
<th со!арап=2Х)бъединенная
3</th>
</thead> _, <tbody>
V<tr> . " ' •.....'.
<td width=100>&nbsp; </td><td>K/td><td>2</td><td>3</td> </tr>
<tr> , '..'•• =
<td>&nbsp; </tdxtd>4</td><td>5</td><td>6</td> </tr> '•• . ,;.':-</tbody>
</table>
</body>
</html>

Рис. 1.29. Окно браузера с результатом отображения файла, приведенного в листинге 1.30

Теперь посмотрим, что у нас получилось (рис. 1.29). Самую первую ячейку мы объединили по вертикали и явно задали для нее цвет фона. Этот цвет распространился и на присоединенную к ней ячейку из второй строки. Для всей таблицы мы задали ширину в процентном соотношении, поэтому все столбцы были растянуты равномерно. Все, за исключением первого, так как . для первой ячейки в третьей строке мы жестко задали ширину в сто пикселов. Поэтому весь столбец у нас отображался с такой шириной. А во второй строке таблицы мы создали ячейку, объединяющую сразу две соседние ячейки в текущей строке. Также на иллюстрации видно, что блок ячеек, созданных при помощи тега <th> немного отделен по вертикали от основного блока таблицы, созданного при помощи ячеек, объявленных тегом <td>. Также мы во всех ячейках, где нет текстового содержимого, вставили символ неразрывного пробела. Сделано это не случайно. Дело в том, что браузер Netscape Navigator ранних версий неадекватно отображает столбцы таблиц, в которых нет содержимого. Поэтому следует взять за правило вставлять неразрывные пробелы в пустые ячейки таблиц.
Вообще, прием установки процентного соотношения ширины таблицы и жесткого задания ширины первого столбца широко применяется в Web-дизайне. Обычно меню навигации по сайту размещается в левой части экрана. Поэтому Web-дизайнер обычно заключает все содержимое страницы в одну большую таблицу с двумя ячейками. Ширина левой ячейки задается жестко в пикселах, а все остальное пространство окна просмотра отдается под отображение основного содержимого страницы. При этом, если это содержимое тоже имеет жесткую структуру, то его тоже можно поместить в таблицу, которая вся будет размещаться в одной ячейке первичной таблицы. Следует лишь аккуратно относиться к созданию вложенных таблиц, так как ранние версии браузера Netscape Navigator при обилии таблиц, вложенных друг в друга, могут просто зависать.

Фреймы

Как мы знаем, в одном окне просмотра браузера мы не можем одновременно загрузить два HTML-документа. Таким образом, если у нас на всех страницах есть одинаковое меню навигации, то абсолютно одинаковый фрагмент кода пользователь будет загружать каждый раз, когда будет переходить с одной Web-страницы сайта на другую. Даже если само меню невелико, это не самый удобный вариант, так как те каналы связи, которые есть у российских пользователей, не слишком велики, и загрузка меню может занять как минимум несколько секунд. Можем ли мы сделать так, чтобы неизменяемые элементы сайта всегда оставались в окне просмотра пользователя без перезагрузки? Можем.
Мы можем создать документ, который разобьет одно окно просмотра на несколько прямоугольных областей, в каждой из которых будет отображаться один HTML-документ. Эти прямоугольные области, каждая из которых является, по сути, отдельным окном просмотра, и называются фреймами.
Таким образом, мы можем оставить левое и/или верхнее меню навигации постоянно находиться » окне просмотра, а перезагружать только ту часть сайта, которая необходима.
Как любое окно просмотра, фреймы могут обладать полосами прокрутки, которые позволяют пользователю увидеть все содержимое фрейма, если оно не умещается полностью в видимой зоне. Именно эта особенность фреймов и вызывает постоянные споры между Web-мастерами. Кто-то утверждает, что подобные элементы управления не должны находиться во внутреннем пространстве основного окна просмотра, так как они занимают бесценное пространство и рассеивают внимание пользователя. Кто-то утверждает, что эти недостатки— не слишком большая цена за облегчение перезагрузки Web-страниц в условиях медленных каналов связи. Так или иначе, вопрос о возможности применения фреймов каждый должен решать самостоятельно.
В HTML предусмотрено два вида фреймов: обычные, и, так называемые, "плавающие". Если мы применяем обычные фреймы, то создается документ, который все окно просмотра разбивает на фреймы, и в них уже отображаются те или иные HTML-документы. Если же мы используем плавающий фрейм, то его можно включать в обычный HTML-документ без каких-либо особых ухищрений. Разницу между двумя этими типами фреймов мы увидим на примере.
Документ с фреймовой структурой создается при помощи тега <frameset> и его закрывающего близнеца </frameset>. Внутри этих двух тегов размещаются конструкции объявления отдельных фреймов и информация, отображаемая в окне просмотра браузера, если тот не распознает фреймы. Отдельные фреймы создаются при помощи пары тегов <frame> и </frame>. А информация, отображаемая, когда браузер не поддерживает фреймы, закладывается в HTML-документ при помощи тега <nof rames>. Но все по порядку.
Основой тега <frameset> является разбиение окна просмотра на несколько частей. Для этого у тега есть два основных параметра: rows и cols, которые указывают количество и размеры фреймов по вертикали и горизонтали. При этом задается прямоугольная табличная структура. Если нам необходимо сделать более детальное разбиение, например, один фрейм в левой части окна по вертикали и два фрейма, отделенных друг от друга горизонтальной границей в правой части окна, то можно создать два тега <frameset>, один внутри другого. Но все-таки, рассмотрим параметры тега <frameset> более детально.

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

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

Листинг 1.31

<!DOCTYPE HTML PUBLIC "-//W3C/VDTD HTML 4.01//EN" ''http://www.w3.org/TR/html4/strict.dtd">
<fhtml>
<head> .
<title>0peuMbi</title>
</head>
<frameset cols="150,*">
<frame src="l-27.htm">
<frame src="l-30.htm"> ;
<nofr?mes>
<p>K сожалению, ваш браузер не' поддерживает фреймы. Воспользуйтесь более свежей версией ПО</р>
</noframes>
</frameset>
</html>

Рассмотрим внимательно приведенный код HTML-документа и то, как был отображен браузером этот документ. Прежде всего, следует обратить внимание, что в листинге отсутствуют теги <body> и </body>. Эти теги говорят о том, что все находящееся между ними является отображаемым кодом, а тег <frameset> сигнализирует браузеру^ что в данном документе приведена лишь структура разбивка окна просмотра.
В теге <franieset> мы использовали единственный параметр cols. Значением его был список из двух обозначений размеров. Из листинга видно, что первый, т. е. левый фрейм обладает шириной в сто пятьдесят пикселов. Для второго фрейма мы установили ширину в виде кратной величины. То, так как мы не указали, какому именно числу будет кратна эта ширина, фрейм занял все свободное место, чего мы и добивались.

Рис. 1.30. Окно браузера с результатом отображения файла, приведенного в листинге 1.31

Между стартовым и закрывающим тегами <frameset> мы разместили два тега <frame>. Обстоятельнытй и подробный разговор о них еще впереди, а пока же ограничимся замечанием, что эти теги объявляют каждый фрейм по отдельности и задают их свойства. В нашем случае мы использовали лишь один обязательный параметр зге, значением которого является URL того HTML-документа, который и будет отображаться в данном фрейме.
Также мы использовали тег <noframes>. Между ним и его закрывающей парой </noframes> располагается HTML-код сообщения, которое будет отображаться в окне просмотра браузера, если тот не поддерживает фреймовую технологию. Сейчас конечно, встретить подобный браузер чрезвычайно трудно, тег остался в спецификации HTML с давних времен текстовых браузеров, но использовать его все-таки стоит хотя бы из соображений вежливости к пользователям.
На иллюстрации (рис. 1.30) видно, что окно просмотра действительно было разбито на две части, и в каждой из них отображался один из созданных нами ранее HTML-файлов. При этом пользователь может самостоятельно изменять размеры фреймов, так как граница между ними, называемая также сплиттером, подвижна. Пользователю достаточно навести на нее курсор мыши, нажать основную кнопку мыши и, не отпуская ее перенести границу в необходимое место.
Единственным ограничением на размещение фреймов служит четко выраженная табличная структура набора фреймов. А что делать, если нам захочется, чтобы меню в девой части окна просмотра было само разбито на два фрейма? Классический подход не позволяет сделать это. Поэтому можно использовать вложенные структуры.
Для того, чтобы создать разбивку основного окна просмотра на три фрейма, два из которых расположены в одной колонке, друг под другом, а третий занимает все остальное свободное пространство, следует использовать следующий фрагмент кода:

<fra»eset cols="20%,*">
<framset rows»"*,*"> ' -
<frame src«=filel.htn»'I> - '
<frame src-"filfe2.htm">
</frame3et>
<frame src-"file3.htm">
</frameset>

В этом примере видно, как один блок <frameset> мы встраиваем внутрь другого такого же блока. И естественно, следует использовать теги <frame>. Кстати, их мы еще не рассмотрели подробно. Самое время это сделать.
Тег <frame> предназначен для установки свойств отдельного фрейма. Так как ширина и высота фрейма устанавливаются в конструкции <frameset>, нам остается установить остальные свойства.

Параметр name позволяет устанавливать уникальное имя фрейма. Не следует путать его с параметром id. Имя, которое мы задаем при помощи параметра name, используется в тегах гиперссылок, когда необходимо загрузить документ не в родительский фрейм, а в какой-либо другой.
Параметр src, как мы уже видели из предыдущего листинга, применяется для задания URL того HTML-документа, который должен быть отображен в искомом фрейме.
Параметр frameborder применяется для того, чтобы указать, будет ли отображаться граница данного фрейма или нет. Дело в том, что создавать видимую границу далеко не обязательно. В качестве значения данного параметра используется либо нуль, либо единица. Единичное значение, установленное по умолчанию, обозначает, что данный фрейм будет иметь видимую границу. При использовании нулевого значения, граница фрейма будет невидимой.
Параметр marginwidth позволяет задавать ширину полей данного фрейма в пикселах,
Параметр marginheght предназначен для установки размеров полей по вертикали в пикселах для данного фрейма.
Параметр noresize следует применять, если пользователь не должен иметь возможности передвигать границы фрейма, изменяя его размеры подобным образом. Если мы включаем его в состав тега <frame>, то пользователь не сможет изменять размеры данного фрейма. Параметр используется без Значений.
Параметр scrolling пгозвояяет Гадателю Web-страницы управлять отображением полос прокрутки дай данного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение auto, установленное по умолчанию, обозначает, что полосы прокрутки у фрейма будут появляться только в том случае, если содержимое данного фрейма не будет полностью укладываться в отображаемой области. Значение yes указывает браузеру, что для данного фрейма необходимо постоянно отображать полосы прокрутки, вне зависимости от того, насколько велика его отображаемая область, и как ровно в нее "укладывается" содержимое фрейма. Значение по заставляет браузер отображать фрейм вообще без полос прокрутки. Несмотря на то, что полосы прокрутки являются самым раздражающим пользователя компонентом, не следует пользоваться подобным значением без особых на то причин. Еще раз повторюсь, что нам заранее неизвестно, какое разрешение монитора установлено у пользователя, загрузившего нашу страницу, и каков размер окна просмотра браузера. А если там не окажется достаточно места для отображения содержимого фрейма полностью, и будут отсутствовать полосы прокрутки, пользователь вообще не сможет увидеть скрытую информацию.

Теперь, когда мы рассмотрели параметры тега <frame>, следует сделать маленькое дополнение, объясняющее одно незначительное ограничение параметра src, тесно связанное с дополнительным тегом <noframes>. Дело в том, что между этим тегом и его завершающим двойником </nof rames> мы размещаем некое содержимое, которое будет отображено в том случае, если браузер пользователя не поддерживает отображение фреймов. Это содержимое, естественно, тоже может быть структурировано при помощи тегов HTML. Следовательно, там могут быть использованы гиперссылки и закладки, называемые также "якорями". Так вот, если мы в этом фрагменте создадим такую закладку, то мы не можем для какого-либо из фреймов значением параметра src сделать URL данной закладки.
Также мы можем указать фрейм, в который загрузка HTML-документа будет происходить по умолчанию. Как мы знаем, тег гиперссылки <а> обладает параметром target, в качестве значения которого записывается имя фрейма, где и будет отображаться содержимое HTML-документа, на который указывает гиперссылка. Но если мы используем данный параметр в теге <base>, размещаемом, как мы помним, в заголовке HTML-документа, то все гиперссылки с неполным URL в параметре href, будут помещать документы, на которые они указывают, именно в тот фрейм, наименование которого обозначено в теге <base>.
До сих пор мы не рассматривали отдельно тег <noframes>. Но дело в том, что данный тег не обладает какими-либо уникальными параметрами, кроме общераспространенных, а механизм его применения мы могли видеть в предыдущих примерах. Поэтому мы и не будем на нем долго задерживаться.
До сих пор мы рассматривали обычные фреймы, которые полностью разбивают окно просмотра браузера на отдельные области, и для использования которых необходимо Применять документы со специализированной структурой. Но есть и другой вид фреймов, которые можно просто вставлять в обычный HTML-документ как стандартный объект. Больше всего это похоже на вставку графического изображения. Для вставки подобного встроенного фрейма используется тег <iframe> Но в отличие от процедуры вставки графики и иных объектов, для встроенных фреймов необходимо использовать и закрывающий тег </iframe> Приведем пример включения встроенного фрейма в обычный HTML-документ и посмотрим, как выглядит этот документ, при просмотре его в браузере.

Листинг 1.32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><t>peftMbi</title>
</head>
<body>
<р>Текст со встроенным <iframe src="l-25.htm"> </iframe> фреймом</р>
</body>
</html>

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

Параметр name позволяет задавать имя данного встроенного фрейма. Значением параметра является обычная текстовая строка. После этого на данный фрейм можно указывать в гиперссылках. Таким образом, мы получаем возможность динамического изменения содержимого встроенного фрейма.
Параметр src предназначен для установки содержимого встроенного фрейма. Значением параметра является URL того HTML-документа, который будет загружен в этот встроенный фрейм.
Параметр frameborder, наравне со многими другими параметрами, явно унаследован из обычных фреймов. Точно так же, как и там, он указывает браузеру, следует ли нет отображать границу у фрейма. В качестве значений используются нуль и единица. Единичное значение, установленное по умолчанию, обозначает, ига границу встроенного фрейма необходимо отображать. Нулевое значение делает границу невидимой.
Параметры marginwidh и margiiiheight задают ширину и высоту полей встроенного фрейма, соответственно. Значением параметров являются числа, выражающие размеры в пикселах.

Рис. 1.31. Окно браузера с результатом отображения файла, приведенного в листинге 1.32

Параметр scrolling регулирует отображение полос прокрутки встроенного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение auto, установленное по умолчанию, означает, что полосы прокрутки будут появляться только в том случае, когда содержимое фрейма будет больше по размерам, чем сам фрейм. Значение yes принудительно отображает полосы прокрутки в любом случае, а значение по запрещает браузеру отображать эти полосы прокрутки для данного фрейма вообще.
Параметр align позволяет нам устанавливать выравнивание встроенного фрейма по вертикали или горизонтали относительно остального содержимого Web-страницы. Возможные значения точно такие же, как у одноименного параметра тега <img>, поэтому не стоит их еще раз повторять. И результат действия этих значений тоже был нами рассмотрен ранее.
Параметр height предназначен для явной установки размеров встроенного фрейма по вертикали. В качества значения данного параметра может использоваться любое обозначение размера.
Параметр width позволяет задавать ширину встраиваемого фрейма. Значение может задаваться в пикселах, кратных величинах или процентных соотношениях.

И на этом мы заканчиваем рассмотрение фреймов. Мы знаем о них все, что нам" необходимо знать для эффективного использования фреймов.

Встраиваемые объекты

Для того, чтобы добавить создаваемым Web-страницам дополнительные возможности, мы можем вставлять в состав их содержимого специализированные функциональные элементы. В качестве подобных элементов часто выступают Java-апплеты, элементы ActiveX, Flash-ролики и многое другое. Как их обрабатывает браузер, нас заботить не должно. Он все равно сделает это правильно. Нас интересует, как их внедрять в Web-страницы.
До тех пор, пока ,мы не научились сами создавать функциональные объекты, пользуясь какой-либо достаточно серьезной технологией, часто требующей хороших навыков программиста, мы можем использовать подобные компоненты от сторонних производителей. Благо подобные компоненты в изобилии выложены в Сети. Главное, их найти и правильно внедрить в Web-страницу.
Для вставки некоего функционального объекта, следует воспользоваться тегом <obj§ct>. Для него существует и закрывающая пара </object>. Между этими двумя тегами обычно размещается список дополнительных данных, которые передаются объекту в Качестве параметров, и некий текст, который будет отображаться, если браузер все-таки не сможет правильно обработать внедренный объект. Здесь необходимо различать свойства объекта, которые мы задаем при помощи параметров тега, и дополнительные данные, которые передаются как параметры самого объекта при помощи специализированных тегов.
Так, например, если мы хотим вставить в свою Web-страницу некий элемент ActiveX, демонстрирующий изменение некоторой зависимости на графике, то нам потребуется, помимо внедрения самого объекта, установить еще и начальные данные. Для этого придется воспользоваться приблизительно следующей конструкцией:

<object>
classid="clsid:EB39F965-2374-llD3-85Fl-F21B86A4754D" codebase="http://www.mysite.com/sGJripts/myactx.осх"#version=l,0,0,0 width=50Q height-300 align center>
<param name="start" value*"0" valuеtype«»"data">
<p>K сожалению, Ваша операционная система не поддерживает технологию ActiveX</p>
</object>

В данном примере мы при объявлении внедренного объекта использовали в объявляющем теге несколько параметров. Параметр ciassid применяется для установки идентификатора внедряемого элемента, а параметр codebase задает URL файла, в котором и содержится внедряемый объект. Обычно для распространяемых объектов подобные параметры детально описываются в сопроводительном тексте. Чуть позже мы подробно рассмотрим все параметры этого тега. После тега <object> мы разместили тег <param>, при помощи которого задали начальные данные для внедренного объекта. Проще всего рассматривать подобные передаваемые параметры как переменные. На каждую передаваемую переменную требуется один тег <рагаm>. Но теперь, все-таки, перейдем к рассмотрению многочисленных параметров тега <оbject>.

Параметр ciassid, как мы уже знаем, применяется для установки уникального идентификатора внедряемого элемента. Часто его просто необходимо использовать, так как внедряемый элемент сохраняется в локальной системе пользователя, как, например, элементы ActiveX.
Параметр codebase предназначен для указания URL, который указывает на некий файл или каталог, в котором располагаются все необходимые для функционирования внедряемого элемента файлы.
Параметр data предназначен для задания местоположения графических изображений или иных блоков данных, которые используются встраиваемым объектом для своей деятельности. В качестве значения параметра используется URL, указывающий на файл с требуемым блоком данных.
Параметр type задает тип данных, на которые указывает предыдущий параметр. В качестве значения данного параметра используется одно из стандартных наименований типов данных, определенных в протоколе HTTP.
Параметр codetype позволяет указывать тип подключаемого объекта. Рекомендуется использовать данный параметр в тех случаях, когда информации, находящейся в параметре ciassid недостаточно для того, чтобы четко указать тип внедряемого элемента.
Параметр archive позволяет указывать местоположение архивных данных, которые имеют отношение к внедренному объекту, например, его обновлению. В некоторых случаях это позволяет сократить общее время загрузки новой версии внедряемого объекта. В качестве значения данного параметра используется список URL, разделенный пробелами.
Параметр declare не имеет значений. Если он входит в состав тега <object>, то внедряемый объект просто объявляется, но не вставляется в Web-страницу. Обычно параметр применяется, если у нас есть несколько тегов <object>, вставленных друг в друга.
Параметр standby позволяет задавать текст, который будет отображаться на месте объекта, пока он сам загружается из Сети. В качестве значения параметра используется обычная текстовая строка.
Параметр height предназначен для явного указания высоты объекта. В качестве значения параметра используется количество пикселов, абсолютное или кратное, или процентное соотношение.
Параметр width позволяет явно задавать ширину внедряемого объекта. В качестве значения используется один из стандартных вариантов задания размеров.
Параметр usemap используется, если внедряемый объект является графическим изображением, которое предназначено для использования в качестве сегментированной карты. Вопросы использования сегментированной графики мы рассматривали в разделе, посвященном гиперссылкам. В качестве значения параметра используется имя карты ссылок, заданное в параметре паще тега <тар>, объявляющего подключаемую карту сегментов.
Параметр name позволяет задавать уникальное идентифицирующее' имя данного конкретного внедряемого объекта.
Параметр tabindex Позволяет задавать порядковый номер объекта в последовательности органов управления, размещенных на Web-странице, переход между которыми производится при помощи клавиши табуляции.
Параметр hspace задает размеры свободного пространства по горизонтали между встроенным объектом и остальным содержимым Web-страницы. В качестве значения, используется число, обозначающее количество пикселов в отступе.
Параметр vspace позволяет задавать отступы про вертикали. В качестве значения используется все то же количество пикселов.
Параметр border задает толщину границы, обрамляющей внедренный объект. В качестве значения используется количество пикселов.
Параметр align позволяет задавать вертикальное или горизонтальное выравнивание объекта относительно остального содержимого Web-страницы. В качестве значения используется одно из уже знакомых нам ключевых слов: bottom, middle, top, left, right. Механизм их действия подробно описывался в разделе, посвященном использованию графики.

Если встраиваемому объекту необходимо передавать начальные данные для работы, то для этих целей применяется тег <param>, который мы уже упоминали ранее. Он помещается между тегами <object> и </object>. Если мы передаем данные объекту, то тот принимает их как переменные. Следовательно, нам необходимо задать имяэтой переменной, чтобы объект мог правильно ее распознать, и значение переменной. Это минимальные требования. На самом деле, мы можем сделать больше. Все эти действия производятся при помощи параметров itera <param>. Всего этих параметров — пять. Помимо общего идентифицирующего параметра id, есть и четыре специфичных.

Параметр name является обязательным для тега <param>. При помощи значения этого параметра мы устанавливаем имя передаваемой переменной. Значением параметра является текст. Так как существуют самые различные методы создания встраиваемых объектов, то может получиться так, что это наименование переменной будет чувствительно к регистру символов. Поэтому стоит придерживаться того наливания, которое приводится ;в описании объекта.
Параметр value предназначен для установки значения передаваемой переменной. Значением данного параметра является текст. Встраиваемый объект сам берет на себя его распознавание.
Параметр vaiuetype позволяет задавать тип передаваемого значения. Это могут быть данйые в каком-либо стандартизованном формате, ссылка на некий ресурс в Сети Или другой объект. Кроме того, некоторые встраиваемые объекты в качестве переменных могут принимать другие объекты, причем, их тип может и не совпадать. В качестве значения параметра может использоваться одно из трех ключевых слов. Значение data, установленное по умолчанию, указывает, что используется стандартная переменная, передающая данные какого-либо типа. Как и упоминалось, мы передаем данные как строку, а объект сам интерпретирует их. Значение ref указывает, что в качестве переменной передается ссылка на какой-либо ресурс в Сети: А значение object сигнализирует, что мы передаем в качестве стартовых данных другой объект.
Параметр type используется в тех случаях, когда параметр vaiuetype имеет значение ref, т.е. когда в качестве переменной мы передаем ссылку на некий ресурс в Сети. Данный параметр указывает, какой тип имеет ресурс, на который мы ссылаемся.

И на этом перечень используемых параметров тега <param> заканчивается. Еще раз напомню, что когда мы берем из Сети некий встраиваемый объект, к нему всегда прилагается сопроводительный текст, в котором рассказывается, как подключать данный объект, и какие стартовые данные ему нужны для работы. Внимательно читайте инструкцию, это может серьезно сэкономить вам время.
Среди встраиваемых объектов HTML выделяет в особую группу Java-апплеты. Для того, чтобы внедрить их в состав содержимого Web-страниц, предусмотрен специализированный тег <appiet>. Но прежде, чем мы разберем его использование, стоит все-таки узнать, что такое Java-апплеты.
Язык Java изначально задумывался для создания приложений, которые бы выполнялись на любой компьютерной платформе без изменения кода, т. е. с использованием Java не нужно писать отдельные версии программного обеспечения для компьютеров на базе Intel-процессоров и компьютеров семейства Macintosh, или для различных операционных систем.
Подобная "многоликость" достигается за счет очень остроумного решения. Java-приложения записываются не в кодах какого-либо процессора, как обычные исполняемые программы, а в своем специализированном формате, называемом байт-кодом. Этот байт-код распознается не процессором, а другим приложением, которое называется виртуальной Java-машиной, Вот эта виртуальная Java-машина пишется для каждой компьютерной системы отдельно. Она переводит байт-код в команды процессора. Эти виртуальные Java-машины написаны уже почти для каждой операционной системы, поэтому Java-приложения медленно, но верно завоевывают популярность.
Естественно, возможность выполнения кода на любой компьютерной системе — это именно то, чего не хватает WWW. Ведь если документы читают браузеры, то активные элементы должны обрабатываться непосредственно операционной системой; и если сделать ставку на какое-либо решение, которое действует только в одной системе, то тем самым мы отсекаем от своего ресурса пользователей остальных компьютерных платформ и операционных систем.
Поэтому был разработан дополнительный стандарт облегченных Java-приложений, которые могли бы внедряться в Web-страницы. Подобные облегченные Java-приложения называются Java-апплетами. Вставляются в содержимое Web-страниц они при помощи тега <appiet>. Но специфика использования его ничем не отличаются от правил использования тега <object>. И наборы параметров этих двух тегов практически не различаются. В теге <applet> могут применяться параметры codebase, code, name, archive, width, height, alt, align, hspace, vspace. Естественно, функциональность этих параметров не отличается от функциональности их близнецов, используемых в теге <object>. Между тегами <appiet> и </appiet> могут размещаться теги <param>, задающие стартовые данные для Java-апплета.
Следует обратить внимание на то, что в списке параметров отсутствует параметр ciassid. Дело в том, что тег; <appiet> применяется для объектов строго фиксированного типа, для апплетов, А они унаследовали пакетную структуру из своего прародителя — языка Java. Java-апплеты, если говорить более точно, представляют собой не просто какие-то файлы, а, так называемые, классы, хранимые в Java-пакетах. Поэтому для идентификации используется просто наименование класса, которое записывается в параметре name.
И на этом мы заканчиваем рассмотрение внедряемых исполняемых объектов. Еще раз повторюсь: до тех пор, пока вы не умеете создавать их самостоятельно, а для этого необходимо уметь программировать немного лучше начального уровня, следует использовать общедоступные внедряемые элементы. Однако при их использовании все-таки следует соблюдать опреде-пенную осторожность, так как исполняемые объекты от неизвестных производителей потенциально могут быть опасны для пользователей. Следует пользоваться элементами, которые уже прошли проверку временем и интернет-сообществом.

Формы

Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось шести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.
Итак, пользователь загрузил себе Web-страницу, на которой располагаются эрганы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе, Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при юмощи самых различных технологий программирования. Объединяет их шшь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway nterface). Поэтому обрабатывающие программы часто называют CGI-триложениями или CGI-скриптами.
Итак, приложение получает данные и обрабатывает их. Затем оно может гибо послать некое электронное письмо, либо произвести некоторую операцию в базе данных, или передать пользователю новую Web-страницу, возможные действия ограничиваются лишь свойствами технологии и фантазией программиста. При помощи подобных программ действуют всевозможные системы регистрации, обратной связи, гостевые книга, форумы, чаты. С их помощью создаются и более разветвленные и сложные системы, например, online-магазины.
Идя того чтобы создавать подобные приложения все-таки необходимо уметь программировать и знать соответствующие правила создания CGI-прилржений. До, тех пор, пока мы этого не умеем, нам остается пользоваться опять-таки общедоступными CGI-скриптами. Но если мы и получим эти приложения, то форму для ввода данных пользователем необходимо все равно делать самостоятельно. В данном разделе мы научимся это делать.
Форма ограничивается тегами <form> и </form>. Между этими тегами располагаются теги, создающие органы ввода информации и теги создания обычного содержимого Web-страницы, т. е. сами органы ввода могут раз щаться в таблице, которая в свою очередь полностью размещается в фор Тег <form> не создает какой-либо отображаемой структуры. Он, скорее предназначен для внутренней группировки объектов.
Тег <form>, естественно, обладает целым рядом параметров, которые задг свойства создаваемой формы. Рассмотрим эти параметры.

Параметр action является обязательным. Значением его является URL указывающий на расположение того CGI-приложения, которое и бу, обрабатывать данные, введенные пользователем при помощи орш управления данной формы.
Параметр method предназначен для указания способа, которым данные будут передаваться обрабатывающему приложению. В качестве значен параметра используется одно из двух предустановленных ключевых cлов: get или post. Сейчас нам нет нужды узнавать, какие механизмы pear зуются при помощи того или иного метода. Так или иначе, в сопровод: тельной документации CGI-приложения указывается, какой метод neрдачи данных следует использовать. По умолчанию используется значек get.
Параметр enctype используется для указания типа передаваемых да ных из формы. Обычно нет нужды его использовать, так как значение application/x-www-form-urlencoded, используемое по умолчани идеально подходит для подавляющего большинства CGI-приложений.
Параметр accept-charset используется в тех случаях, когда пользователь передает из формы приложению не только информацию, но и файлы. В этом случае мы можем явно указать кодировки передаваемых фа лов. В качестве значения данного параметра используется текстов строка, в которой записывается одно или несколько названий кодировс В том случае, если применяется несколько кодировок, их наименование разделяются пробелами идя запятыми. По умолчанию используется значение unknown, которое указывает серверу, что тот должен сам разобраться с используемыми кодировками
Параметр accept задает типы передаваемых файлов. Обычно не испол зуется, так как сервер вполне в состояний сам адекватно распознать тип принимаемого файла.
Параметр name позволяет задавать уникальное имя формы. Естественно на одной Web-странице мозкет находиться несколько форм. В этом ел; чае значения параметров name у них не должны совпадать.

Тег <form> с его закрывающим близнецом </form>, по сути, создают контейнер для размещения органов ввода информации. Большая часть эт органов ввода реализуется при помощи тега <input>. Продемонстрируем эт на небольшом примере (рис. 1.32).

Листинг 1.33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title><?>opMbi</title> </head> <body>
<form action="http;7/,www.iaysite.com/cgi-bin/tesl-.exe" method="post">
<р>Поле для ввода строки текста < input type="text"x/p>
<input type="submit" value="OTnpaBMTb"> </form>
</body>
</html>

Рис. 1.32. Окно браузера с результатом отображения файла, приведенного в листинге 1.33

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

Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже.
Параметр name предназначен для установки уникальных имен для ка дого органа управления. Несмотря на то, что параметр не является обя: тельным, настоятельно рекомендуется использовать его. В сопровод тельной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации.
Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользоват лю, но именно это значение получить обрабатывающее CGI-приложени если пользователь выберет соответствующий переключатель.
Параметр cheked используется только для независимых переключателе и радиокнопок. Он устанавливает их начальное состояние. Если этот ni раметр будет введен в тег <input>, то переключатель будет переведен во включенное состояние. Параметр используется без значений.
Параметр disabled делает орган управления недоступным для использс вания пользователем. Параметр используется без значений.
Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отобра жаемые в этих полях, нельзя будет изменять.
Параметр size обычно задает размеры органа ввода данных. Но для каж дого отдельного типа органов ввода его действие специфично.
Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстовоп ввода. Значением параметра является целое положительное число.
Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
Параметр ait позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.

Итак, мы рассмотрели параметры, применяемые в теге <input>. Но мы уже аем, что при помощи данного тега мы можем создавать самые различные объекты форм. Пришло время детально разобраться с ними.
Объекты, входящие в форму, разделяются на два типа — органы ввода данах и кнопки, инициирующие различные действия. Сначала посмотрим, как мы можем создавать органы ввода.
Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи паметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые эльзователь может внести в это поле. Это ограничение реализуется при
помощи параметра maxlength.
Существует модификация однострочного поля ввода текста, которая предназначена именно для ввода секретной информации, например, паролей. Они в отображают вводимый текст, а заменяют его звездочками. Создание подобных полей ввода производится при помощи следующей конструкции:

<input type="password">

Использование типа checkbox позволяет создавать независимые переключатели. Они представляют собой всем знакомые квадратики, в которых щелчком мыши мы можем устанавливать и снимать флажки в виде галочек. При гом используется параметр value. Значение этого параметра будет передана в обрабатывающее CGI-прияожение, если пользователь взведет флажок данном независимом переключателе.
'акже мы можем создавать группы переключателей, которые часто называет зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создаtтся при помощи тега <lnput> с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.
Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.

Листинг 1.34

:! DOCTYPE HTML РИВЫС "-//W3C//DTD HTML 4 . 01//EN"
'http://www.w3.Qrg/TR/html4/strict.dtd">
:html> <head> , <title><t>opMbK/title> </head>
<form action="http://www.mysite.com/.cgi-bin/test.exe" method="post"> .
<р>Поле для ввода строки текста <input type="text"x/p> <р>Поле для ввода пароля <input type="password"x/p> <р>Независимый переключатель <input type»"checkbox"
value="checked"x/p> <р>Группа переключателей</р>
<р>Аньтернатива 1 <input type="radio" name="groupl" value="checkl"x'/p>
<р>Альтернатива 2 ,<input type»"^adio" name="groupl" value="checki
checkedx/p>
<р>Альтернатива 3 <input type="radio" name="groupl"
value="check3"x/p> '
<input type="submit" value="Отправить"> </form> ' ...
</body> </html>

На приведенной иллюстрации (рис. 1.33) видно, как отображается введен ный текст в обычном поле ввода и в поле ввода конфиденциальной инфор мации. А в листинге 1.34 четко показано, как мы можем создавать незави симые переключатели и группы переключателей. При этом, второму по сче ту переключателю в группе мы изначально установили взведенное состояни по умолчанию. Но пользователь, естественно, всегда может сам выбрат требуемую альтернативу.
При помощи параметра type с приписанным значением hidden мы може« создавать скрытые поля. Это поле не только не позволяет пользователю вво дать какую-либо информацию, но и вообще не отображается в окне про смотра. Данный тип поля применяется обычно для служебных целей разработчиков.
А при помощи значения file мы можем создавать поле ввода имени файла При этом, рядом с полем ввода текста автоматически создается кнопкг с наименованием Обзор, при нажатии на которую открывается стандартный диалог выбора файла.
Помимо органов ввода информации, мы можем размещать еще и органы управления. В данном случае Ими являются кнопки. В формах используется три вида кнопок. Кнопка типа "submit" отправляет введенные пользователем данные обрабатывающему CGI-приложению. Кнопка "reset" убирает из органов ввода информацию, внесенную пользователем, и отображает информацию, установленную по умолчанию. Существуют и простые кнопки, реакцию которых мы можем программировать самостоятельно при помощи скриптовых языков. Также, вместо кнопки "submit" мы можем использовать любое графическое изображение. Рассмотрим способы создания этих органов управления.

Рис. 1.33. Окно браузера с результатом отображения файла, приведенного в листинге. 1.34

Кнопка типа "submit" создается при помощи конструкции следующего вида:

<input type="submit" vа1uе="Подтвердить">

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

<input type="reset" value="Oчистить">

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

<input type-"button" value="Kнопка">

Мы уже говорили, что вместо обычной кнопки типа "submit" мы можем использовать любое графическое изображение. Для этого мы применяем такой фрагмент кода:

<input type="invage" src="http://www.mysite.com/image/picl.gif">

В этом случае нет нужды использовать параметр value, так как не нужно задавать надпись на кнопке. Но тогда необходимо использовать параметр src, значением которого является URL используемого графического файла.
Но помимо тех органов ввода информации, которые мы уже рассмотрели, есть и дополнительные органы, которые не реализуются при помощи тега <input>. К ним относится раскрывающегося списка и многострочное поле текстового ввода.
Выпадающий список реализуется при помощи тега <seiect>. При этом, естественно, используется и его закрывающая пара </seiect>. Между этими тегами мы объявляем элементы списка при помощи тегов <option>. Тег <seiect>, естественно, обладает некоторыми свойствами, регулируемыми при помощи параметров.

Параметр name, как обычно, задает уникальное имя данного поля ввода, т. е. раскрывающегося списка.
Параметр size задает количество видимых строк при раскрытии списка. Естественно, самих элементов в списке может быть больше, чем отображаемых строк. Но в этом случае всего-навсего будет отображаться вертикальная полоса прокрутки. Значением параметра является целое положительное число.
Параметр multiple применяется, если мы хотим позволить пользователю выбирать из списка несколько значений сразу.
Параметр disable заставляет браузер отображать данный выпадающий список, но при этом пользователь не получит возможность активизировать его и выбрать какое-либо значение.
Параметр tabindex, как мы уже знаем, устанавливает порядковый номер элемента ввода данных в последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.

A сами элементы выпадающего списка создаются при помощи тегов <option>. Эти теги тоже имеют свои свойства. Но их не так уж и много.

Параметр selected используется для тех элементов, которые при активации выпадающего списка будут выделяться по умолчанию.
Параметр value указывает значение, которое будет передано обрабатывающему CGI-приложению, если пользователь выделит именно этот элемент выпадающего списка.

Теперь рассмотрим несложную процедуру создания выпадающих списков в формах HTML-документов (рис. 1.34).

Листинг 1.35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http: //www. w3.org/TR/htm!4/Strict.dtd">
<html>
<head> • • : - -<title><t>opMfci</title>
<body>
<form action="http: //www.mysite.com/cgi-bin/test.exe
<select name=""menul"> <option value=*"sell">l nyHKT</option> <option value="se!2" select«d>2 nyHKT</option> •coptibn value«="sel3">3 nyHKT</option> </select>
<input type="submit" уа1ие»"Отправить"> </form> -</body> 'html> /

Рис. 1.34. Окно браузера с результатом отображения файла, приведенного в листинге 1.35

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

Параметр name позволяет задавать уникальное имя для данного элемента ввода данных,
Параметр rows задает количество отображаемых строк у создаваемого поля ввода. По сути дела, это его высота, но задается она в строках. Параметр является обязательным. В качестве значения используется целое положительное число.
Параметр cols задает ширину в символах создаваемого поля текстовог ввода. Параметр также является обязательным.
Параметр disabled используется, если поле необходимо сделать недоступным для использования.
Параметр readonly применяется для создания полей с нередактируемьм текстом. Текст в таких полях ввода может только отображаться, но пользователь не сможет изменить его.
Параметр tabindex устанавливает порядковый номер элемента ввода данных а последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.
Параметр accesskey позволяет задавать клавишу, при нажатии на которую фокус ввода будет автоматически передан данному полю ввода.

Теперь посмотрим, как создаются подобные поля ввода (рис. 1.35).

Листинг 1.36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.Q1//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>OopMbi</title> </head>. - .
<body> - •
<form action=»"http://www.mysite.com/cgi-bin/test.exe" method="post">
<textarea rows»5 cols»2?}>
Текст, который будет отображаться в многострочном поле, ввода </,textarea>
<p><input type="submit" уа1ие="0тправить"х/р>
</form> </body>
</html>

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

Рис. 1 .35. Окно браузера с результатом отображения файла, приведенного в листинге 1 .36

Для создания подобных текстовых пометок и заголовков, связанных с конкретными элементами ввода данных, мы можем использовать тег <label> Но привязывать подобные метки мы сможем только к тем органам ввода данных, для которых мы явно задали идентифицирующий фаметр id. Именно по нему и устанавливается соответствие между меткой и объектом формы. Основным параметром для тега <label> служит параметр for, значением которого является значение параметра id объекта, к которому данная текстовая метка и привязывается. Приведем Пример создания подобной связи. Сначала мы создадим независимый переключатель, а затем присоединим к нему связанный текстовый заголовок. Производится подобная операция при помощи следующего фрагмента кода:

<label for="сheck1">Независимый переключатель</label>
Input type="checkbox" name="check" value="checked" id="checkl">

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

Использование сценариев

В рамках HTML мы обладаем возможностью использовать при создании Web-страниц специальный вид программ, называемых сценариями или скриптами. Они очень тесно связаны с технологией динамического HTML (DHTML), которую мы будем рассматривать в третьей главе. Но сейчас мы лишь разберем возможности их подключения к HTML-документу.
Для создания подобных программ-сценариев могут использоваться два языка програмирования: JavaScript и VBScript. Эти программы просто встраиваются в Web-страницу, а браузер пользователя получает их и самостоятельно выполняет. В связи с тем, что VBScript недостаточно хорошо поддерживается всеми браузерами, чаще всего используется язык JavaScript.
Итак, мы создали или нашли на просторах Сети программу-сценарий, которую нам хотелось бы использовать на своей Web-странице для придания ей некоей динамичности и интерактивности. Теперь ее необходимо подключить к нашей странице. Для этих целей используется тег <script> со своим закрывающим близнецом </script>. Между этими тегами обычно размещается текст программы-сценария. Впрочем, иногда просто указывается UR.L файла с этим текстом,, и тогда браузер сам отыщет его, руководствуясь указанным URL. Однако, так как поиск он будет производить тогда, когда потребуется запустить скрипт, то между действиями пользователя и реакцией программы будет возникать определенная задержка. Поэтому, чаще всего текст программы присоединяют к HTML-документу.
Тег <script> с его содержимым чаще всего размещается в заголовке Web-страницы, между тегами <head> и </head>. Связано это с тем, что подключаемый скрипт должен быть описан до момента его первого использования, т. е. мы можем описать его в теле документа, после тега <body>, но при этом мы должны быть уверены, что все элементы Web-страницы, использующие или активизирующие этот скрипт, будут описаны после него. Чтобы исключить возможные ошибки и коллизии, обычно скрипты описывают в заголовках. Это просто проявление правильного стиля создания документов, которого всегда следует придерживаться.
Итак, тег <script>, как мы уже знаем, позволяет внедрять в создаваемые Web-страницы программы-сценарии. Но тег обладает рядом параметров, которые позволяют браузеру максимально адекватно распознавать передаваемую информацию и выполнять инструкции программы.

Параметр type предназначен для указания типа присоединяемого скрипта. Он используется вместо устаревшего параметра language. Обычно используются значения text/javascript и text/vbscript. Первое значение указывает, что присоединяемый скрипт написан на языке JavaScript, а второе, соответственно, зарезервировано для VBScript. Данный параметр является обязательным.
Параметр src применяется в тех случаях, когда код присоединяемого скрипта не внедряется непосредственно в HTML-документ, а вынесен в отдельный файл, который браузер должен сам нати и загрузить. Значением данного параметра является URL искомого файла, содержащего код присоединяемого скрипта.
Параметр charset имеет смысл использовать в паре с предыдущим параметром, так как его значение определяет кодировку символов, которая использовалась при создании файла с подключаемым скриптом.

Теперь, когда мы знаем, какие параметры есть у тега <script>, рассмотрим фрагмент кода, в котором показан порядок его использования.

ODOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
chtml>
<head>
<title>Интерактивная страница</title> ;
<script type="text/javascript"> ...Код скрипта...
</script> .
</head>'

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

<script type="text/vbscript"
src="http://www.mysite.com/progs/vbcalc">

В этом примере мы подключаем файл, который находится в каталоге progs на сайте www.mysite.com. Как видно, все достаточно просто и понятно.
Очень часто при помощи подобных скриптов создатели Web-страниц динамически генерируют содержимое этих страничек. Это как раз одна из наиболее популярных возможностей DHTML. Но всегда есть вероятность, что пользователь будет использовать для просмотра Web-страницы устаревший браузер, который не сможет обрабатывать скрипты. В этом случае было бы хорошо иметь возможность установить альтернативное оповещение, которое отображалось бы браузером, если тот не в состоянии использовать программы-сценарии. Подобное сообщение мы можем устанавливать при помощи тегов <noscript> и </noscript>. Обычно они устанавливаются сразу после тегов <script>. В итоге получается конструкция следующего вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Интерактивная страница</title>
<script type="text/javascript">
...Код скрипта.... .
</script> -
<noscript>
К сожалению, ваш браузер не поддерживает скрипты.
</noscript>
</head>

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

 [ Оглавление ]
Партнеры Wmaster
Protoplex.RU
Эскизы татуировок
Поиск по сайту
Объявления
Twitter автора
Карта сайта
Наши баннеры
О проекте

Реклама
(понижение цен)

Об Авторе
Команда
Архив рассылки
 Запомнить эту страницу
Сделать стартовой
Рассылка
Wmaster.ru - всё для вебмастера.
Наша кнопка

Все желающие могут поставить нашу кнопочку к себе на сайт
Всё для веб-мастеров

Партнеры
Бочкарёв Антон
Mail: webmaster[at]wmaster.ru
ICQ: 148780826
Хостинг от Valuehost
© RUscripts.design 2003

© Wmaster Design Group 2001-2008. © Все права защищены. При перепечатке любого материала с сайта  ссылка на http://www.wmaster.ru/  обязательна.