WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

Элемент, создающий строку таблицы. Он не имеет конечного тега. Строка закан чивается там, где начинается следующая, то есть следующий элемент TR. Внутри элемента располагаются элементы и TD, определяющие одиночные ячейки. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо из вестный нам атрибут align и присваивать ему значения left, center и right.

Кроме этого, содержимое ячеек можно выравнивать по вертикали:

• - по верхнему краю;

• - по центру;

• — по нижнему краю.

Другие допустимые атрибуты: id, class, lang, style, dir, title, char, атри буты событий.

<тн> Элемент ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка-заголовок отличается 80 _ Глава Основные HTML версии от обычной тем, что броузер выводит текст внутри нее выделенным (как полужирным) шрифтом. Для элемента ячейки предусмотрено несколько атрибутов.

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

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

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

Хорошо известный нам атрибут align используется и для одной ячейки. Он мо жет принимать значения left по левому краю), center (выравни вание по центру) и right (выравнивание по правому краю). Обычно по умолча нию используется выравнивание влево. Элемент ТН в этом смысле — исключение.

Он обеспечивает центрирование текста, если атрибут align отсутствует.

Для элемента ТН можно указать атрибут таким же образом, как и для эле мента Размеры ячеек задавать

   Добро пожаловать!

Pages:     | 1 || 3 | 4 |

«Лучший выбор! ...»

-- [ Страница 2 ] --

Списки Списки (list) были введены в HTML, несомненно, под влиянием успеха тексто вых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стан дартные атрибуты. Существует несколько разновидностей списков.

    Самым простым является список (unordered list). Его шаблон представлен ниже:

      1 списка 2 списка 3 списка Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. LI обозначает каждый из пунктов. Вид ненуме рованного списка показан на рис. 3.5.

      Пункт 1 списка Пункт 2 списка Пункт Рис. 3.5. Ненумерованный список

        Структура нумерованного списка (ordered list) похожа на предыдущую:

          Рис. 3.6. Нумерованный список Способ нумерации задается при помощи атрибута type. В табл. 3.2 приведены все способы нумерации.

          Таблица 3.2. Значения атрибута type Атрибут Вид нумерации i, ii, iii,...

          I, II, III, a, b, c, d,...

          A, B, C, D,...

          Существует атрибут, который позволяет задать начальное значение для нумера ции списка:

          Например, если использована буквенная нумерация, то значение атрибута означает, что нумерация списка начнется с литеры D.

          Для элемента LI может быть использован атрибут, который определит номер для текущего пункта списка:

          Соответственно, следующий пункт списка будет иметь очередной номер и т. д.

          При помощи атрибута value, если использовать его для первого в эле мента LI, можно добиться того же эффекта, что и при помощи атрибута start, или нарушить последовательность номеров, если переопределить другие элементы списка.

          Списки

          Списки с определениями (definition list) создаются при помощи тегов трех видов:

          пункта определение пункта пункта пункта Лучше всего дает представление о смысле списка с определениями рис. 3.7. Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с новой строки.

          Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение — произвольный текст под заголовком.

          Пункт пункта Другое пункта Пункт Определение пункта Пункт пункта Рис. 3.7. Список с определениями Другой способ создания сложных списков — использование принципа вложения.

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

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

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

          Ниже дан пример такого шаблона:

              1. Глава 3. Основные элементы HTML версии
                2.
                  3. В этом шаблоне нумерованные списки размещены внутри пунктов ненумерован ного списка. Рис. 3.8 дает представление о том, как выглядит такая конструкция.

                  Пункт 1. Пункт 1. 2. Пункт 1. Пункт 1. Пункт 2. 2. Пункт 2. Пункт 1. Пункт 3. 2. Пункт 3. Рис. 3.8. Вложенные списки В таблицах стилей для списков предусмотрены специальные свойства (см. при ложение Б). Например, в секции страницы HEAD можно определить стиль списка с маркерами в виде окружностей (circle):

                  Тогда в секции BODY может присутствовать список с маркерами в виде кружков:

                    Пункт
                  1. Пункт ПРИМЕЧАНИЕ Примеры списков можно найти в файле List.htm на прилагаемой дискете.

                    Гиперссылки _ Гиперссылки Один из самых важных элементов языка, обеспечивающий создание гиперссылок.

                    Чаще всего используется такой шаблон:

                    Произвольный текст <А Адрес текст для щелчка Или такой:

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

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

                    к файлу" к файлу" По умолчанию используется ссылка на файлы текущей папки (той, где располо жен файл Web-страницы). В этом случае просто указывается имя файла, напри мер: strelka.gif, Часто используются относительные ссылки на папки: это позволяет легко менять местоположение комплекса страниц на диске. Если в текущей папке есть другая, в которой размещены необходимые файлы, ссылка строится по такому шаблону:

                    тип" Здесь на структуру вложенных папок указывает точка перед наклонной чертой.

                    Если необходимо папку, которая находится на том же уровне вложения, что и текущая, то добавляют еще одну точку:

                    тип" Подобно многим другим элементам языка, элемент А требует использования атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его таков:

                    или ссылки" 74 _ Глава 3. Основные элементы HTML версии Например:

                    Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа.

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

                    WWW как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а ста раются приспособить их к современным нуждам (например ftp). Существуют следующие схемы доступа:

                    • — доступ к файлу на локальном диске;

                    • ftp — доступ к архивам файлов по протоколу передачи файлов (file transfer protocol);

                    • http — доступ к WWW;

                    • mailto — сообщения по почте;

                    • news — доступ к новостям USENET;

                    • nntp — доступ к новостям USENET по протоколу NNTP;

                    • telnet — подключение по протоколу telnet;

                    • — подключение к системе поиска WAIS.

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

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

                    <А В больших сайтах часто используются метки для перехода к определенной части некоторой страницы:

                    <А Для перехода к метке используется ссылка по такому шаблону (пример приведен в разделе «Анатомия Web-страницы» главы 2):

                    Текст подсказки <А Текст для щелчка Гиперссылки Для элемента А предусмотрены различные атрибуты. Атрибут по анало гии с атрибутом позволяет указать язык, который используется на адресуе мой странице.

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

                    Для решения этой задачи гиперссылки подразделяются на прямые (forward) и обратные (reverse). Ссылка, вызывающая переход с текущей страницы, ся прямой. Соответственно, при помощи броузера или другой ссылки может быть выполнен и обратный переход. Для определения более точного типа ссылки ис пользуются два атрибута (один для прямых, другой — для обратных ссылок).

                    прямой ссылки" обратной ссылки" следующие стандартные типы ссылок:

                    • alternate — другая версия документа;

                    • stylesheet — таблица стилей в виде отдельного файла;

                    • — первая страница в структуре документа;

                    • next — следующая (в смысле выполнения переходов) страница;

                    • — предыдущая (в смысле выполнения переходов) страница;

                    • contents — страница, на которой находится оглавление всего документа;

                    • index — страница, на которой находится алфавитный • glossary — страница, на которой находится словарь терминов;

                    • copyright — информация об авторских правах на документ;

                    • — признак главы документа;

                    • section — признак раздела документа;

                    • subsection — признак подраздела документа;

                    • appendix — признак приложения документа;

                    • help — справочные данные документа;

                    • — закладка внутри документа.

                    Существуют атрибуты, которые только для определенных конструк ций. Атрибуты и используются в картах (см. раздел «Рисунки и кар ты» главы 4). Атрибут target бывает весьма полезным при создании фреймов (см. раздел «Фреймы» текущей главы). Атрибуты accesskey и можно если элемент А входит в состав форм (см. раздел «Элементы форм» главы 4).

                    А позволяет использовать и стандартные атрибуты: id, class, l ang, dir, title, type, style, атрибуты событий.

                    76 Глава 3. Основные элементы HTML версии В отличие от атрибута А, который указывается в тексте страницы, элемент LINK используется в заголовке страницы, то есть внутри элемента HEAD.

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

                    Атрибуты используются, в основном, такие же, как и в элементе A: charset, href, id, class, media, rev, target, title, type, атрибуты со бытий.

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

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

                    Это может быть последовательность элементов TD (ячеек), другая таблица и т. д.

                    После того как встретится новый элемент TR, начнется описание следующей стро ки, и т. д. до конца таблицы (тега

).

Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы. Рассмотрим ат рибуты этого элемента. Большинство атрибутов могут использоваться и в других элементах таблицы.

Таблицы Таблицу можно выровнять по горизонтали при помощи атрибута align:

• — влево;

• - по центру;

• right" — вправо.

Ширину таблицы можно задать точно в пикселах или в процентном отношении к ширине страницы в окне броузера. Например:

width=50% Для управления видом рамки используются два атрибута. Дело в том, что броузер создает изображение рамки, имитируя ее трехмерность (выпуклость) при помо щи различия в освещенности граней. На рамке можно различить фронтальную и боковую наклонную грани (рис. 3.9).

Ячейка Ячейка 3 Ячейка Рис. 3.9. Пример таблицы Шириной боковой грани управляет атрибут:

При задании нулевого значения для этого атрибута рамка исчезает совсем.

Шириной фронтальной грани управляет атрибут:

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

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

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

Для всей таблицы может быть задан цвет фона:

78 Глава 3. Основные элементы версии Вместо цвета допускается использовать рисунок:

Атрибуты bgcolor и background можно указывать и с другими элементами табли цы, кроме элемента CAPTION.

Атрибут (используемый только для элемента TABLE) позволяет задать вид рамки таблицы:

Существуют следующие стандартные параметры:

• void — рамка отсутствует;

• above верхняя сторона рамки;

• below — нижняя сторона рамки;

• hsides — части рамки сверху и снизу;

• vsides — части рамки слева и справа;

• — левая часть рамки;

• — правая часть рамки;

• или box — рамка показана полностью.

Разумеется, если атрибут frame отсутствует, рамка вокруг таблицы выводится целиком.

Атрибут rules определяет вид сетки таблицы внутри, то есть между ячейками.

Он тоже имеет несколько параметров:

• попе — сетка отсутствует;

• — сетка вокруг групп ячеек;

• rows — горизонтальные линии между строками;

• cols — вертикальные линии между колонками;

• — обычная сетка.

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

комментария" Допустимые стандартные атрибуты: id, class, title, style, атрибуты со бытий.

Элемент для задания заголовка таблицы. Несмотря на то что этот элемент рас полагается внутри элемента TABLE, заголовок выводится на экране вне рамки таб лицы (см. рис. 3.9). Положением заголовка можно управлять:

• — заголовок над таблицей;

• — заголовок под таблицей;

Таблицы • — заголовок вверху и выровнен влево;

• ri ght" — заголовок вверху и выровнен вправо.

Другие атрибуты: id, class, dir, title, style, атрибуты событий.

Выравнивание данных в ячейках Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по гори зонтали. Он принимает следующие значения:

• — выравнивание влево;

• right — выравнивание вправо;

• center — Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

• top — выравнивание по верхнему краю ячейки;

• bottom — выравнивание по нижнему краю ячейки (не всегда работает);

• center — выравнивание по центру;

• baseline — выравнивание по первой строке.

Для примера можно продемонстрировать использование значения baseline:

Этот элемент определяет обычную ячейку таблицы. Для допустимы те же атрибуты, что и для ТН.

Оба элемента — ТН и — могут не иметь конечных тегов. Функцию конечного тега элемент, который определяет структуру таблицы.

Теперь, какие используются для создания таблицы, мы можем со здать простейшую таблицу:

border=4 cellspacing=3> Заголовок таблицы

Из примера видно, что первая строка таблицы содержит только ячейки-заголов ки. Внешний вид таблицы показан на рис. 3.9. Текст, расположенный после элемен тов TD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты) с учетом объема данных в ячейках.

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

и Элемент COLGROUP позволяет создавать группы колонок с одинаковыми свойства ми. Рассмотрим пример таблицы:

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

[Ячейка Ячейка 3 Ячейка Рис. 3.10. Таблица с заголовками столбцов и строк Еще один пример таблицы. В некоторых случаях возникает необходимость объе динения Тогда можно использовать атрибуты rowspan и colspan, как пока зано в этом примере:

, и Существует возможность группировки строк таблицы. Для этого предусмотрен элемент блока заголовка THEAD, элемент обычных блоков строк и элемент нижнего блока строк TFOOT. В каждом блоке может присутствовать любое количе ство строк (элементов TR). Эти три элемента могут использоваться как с конечны ми тегами, так и без них. В качестве примера можно привести шаблон таблицы:

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

Таблица с ячейками Рис. 3.11. Таблица с объединенными ячейками Группы строк:

блок 1 1. 2 2. 4 4. 5 5.
В данной таблице отсутствует форматирование (рис. 3.1,2), поэтому внешний вид ее очень простой. С другой стороны, элементы групп строк дают возможность для определения дополнительных стилей.

Таблицы л 1 Заголовок 3 Ячейка 3. } Строка 5 Ячейка 5. блок таблицы Рис. 3.12. Таблица с группами строк При использовании этих элементов надо придерживаться следующих правил.

• В таблице можно указывать по одному элементу THEAD и TFOOT, но несколько элементов TBODY.

• Последовательность задания элементов следующая: THEAD, TFOOT, TBODY. Но в таблице на экране блок TFOOT окажется самым нижним.

• Все блоки должны содержать одинаковое количество колонок.

Группы колонок:

1-1 1-2 1-3 1-4 1-
2-1 2-2 2-3 2-4 2-
Ее внешний вид показан на рис. Каждый элемент COLGROUP позволяет назна чить свойства определенному числу колонок, задаваемому атрибутом span. Все эти колонки будут одинаковые. Можно также использовать элемент для ука зания свойств одной колонки. Тогда часть свойств будет совпадать для всех коло нок, относящихся к одному элементу COLGROUP, а часть может отличаться. В табли це могут быть определены свойства для любого количества колонок, и если реальных колонок будет меньше, то некоторые определения окажут ся невостребованными. Это не является ошибкой. Для задания свойств могут ис пользоваться те же самые атрибуты, что и для других элементов таблицы.

84 Глава 3. Основные элементы HTML версии Рис. 3.13. Таблица с элементами COLGROUP и COL Есть несколько правил задания элементов. В смысле описания свойств COLGROUP обладает более высоким приоритетом, а элементы COL внутри элементов COLGROUP. В таблице могут присутствовать несколько COLGROUP. Если число колонок в одном таком элементе задается атрибутом span использовать в нем элементы не имеет смысла. Если элементы ют, то атрибут span соответствующего элемента COLGROUP игнорируется, то число колонок определяется числом элементов COL. Для отдельных элементов можно вводить собственные атрибуты span.

ПРИМЕЧАНИЕ Примеры таблиц можно найти в файле Table.htm на прилагаемой дискете.

Фреймы Фреймы — это области, которые создаются в окне броузера для одновременной демонстрации нескольких Не все броузеры позволяли разделять об ласть просмотра части, но эта идея завоевала всеобщее признание. Новые вер сии броузеров поддерживают фреймы в обязательном порядке. При страниц с фреймами разрабатывается Web-страниц. При этом HTML файлы отличаются по типам. Документы раскладки (layout) используются для структуры окна, то есть для того, как оно должно быть разде лено. Документы содержания (content) для заполнения цией каждой из областей, Итак, как же создать Web-страницу с фреймами?

продумать, какие области потребуются. Горизонтальное де экрана задается при атрибута rows, а — при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процен тах. Кроме того, используется символ * для обозначения оставшейся части экра на. Приведем несколько примеров:

• 50% — деление области просмотра по вертикали пополам (принцип программы Norton Commander);

• 75% — левая вертикальная область в три раза уже правой. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;

• 30%, верхней горизонтальной области отведено 150 пикселов, для средней — тридцать процентов доступного пространства, а для нижней все, что останется;

• 4* — стиль для любителей головоломок. Правая вертикальная область в четыре раза шире левой. Эту формулу можно записать и так: cols=20%, 80%.

Фреймы В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunl oad.

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

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

В документе раскладки секция FRAMESET используется вместо секции BODY.

Атрибуты элемента Кроме стандартных атрибутов — id, class, title и style — этот элемент имеет ряд атрибутов, позволяющих усовершенствовать оконную структуру.

Внутри элемента FRAMESET должна быть создана ссылка на каждый документ со держания, входящий в сложную страницу. Кроме того, каждый элемент FRAME по лезно снабдить именем с помощью атрибута name. Имя можно указывать в гипер ссылках (см. листинг 3.5). В результате элемент FRAME может выглядеть так:

Атрибут scrolling управляет прокруткой внутри одной области. Он может при нимать значения YES (полосы прокрутки создаются в обязательном порядке), N (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходи мо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый Значением атрибута longdesc является ссылка на другой файл (URL). Таким спо собом для фрейма создается любого объема. Это своего рода альтерна тива использованию стандартного атрибута title, при помощи которого обычно задается короткий текстовый комментарий.

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

Атрибут margi nhei ght задает величину отступа страницы от верхнего и нижнего краев фрейма. Значение указывается в пикселах, например:

Другой похожий атрибут, создает поля слева и справа, например:

Глава 3. Основные элементы HTML версии В качестве примера, поясняющего конструкцию фреймов, (файл Frame.htm) для создания сложной Web-страницы.

Листинг 3.1. Шаблон страницы с фреймами 2 Лучший выбор! Алексей Гончаров В этой книге вы найдете: ормы, таблицы, фреймы приемы разметки гипертекста создание графики для HTML документов таблицы обзор редакторов сок На прилагаемой дискете вы noresize> В данном примере экран делится на четыре части, как показано на рис.

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

tun (! щи |l i...

[ часть страницы • Левую часть } страницы Правая часть страницы делают, как правило, узкой и размещают на ней ссылки или индекс.

Нижняя часть страницы • Рис. 3.14. Шаблон Web-страницы с фреймами Фреймы ПРИМЕЧАНИЕ Пример из этого раздела включает файлы Fr2.htm, Fr3.htm, записанные на прилагаемой дискете.

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

Листинг 3.2. Шаблон страницы с элементом NOFRAMES 1.

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

Организация переходов по фреймам В качестве примера рассмотрим несколько взаимосвязанных страниц (рис. 3.15).

Пусть основная страница фреймов, а две другие построены по стандартному принципу: слева меню, справа информация. Конфигурацию фрей мов в нашем случае задает файл Такую структуру имеют многие сай ты. Кроме того, «цепочки» страниц удобно использовать для альных книг, галерей изображений, то есть там, где пользователю требуется последовательно просматривать ряд страниц. В данном случае важно правильно организовать ссылки.

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

88 Глава 3. Основные элементы HTML версии htm frame 1 htm right t Рис. 3.15. Схема переходов по страницам Листинг 3.3. Файл Основная


<А Следующая страница
Листинг 3.4. Файл Framel.htm для NORESIZE <Р>Ваш броузер не поддерживает фреймы Листинг З.5. Файл <А target=_parent > Основная Правый 1 Правый 2
Листинг 3.6. Файл Правый фрейм № Предыдущая страница


Листинг З.7. Файл Right2.htm

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

90 Глава 3. Основные элементы HTML версии Здесь важно, что каждому фрейму дается имя при помощи атрибута name, Страницы, показываемые внутри фрейма, могут быть разными, а имя постоянным и будет использовано в гиперссылках.

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

:. Домой Меню Правый фрейм № Пред стран а Основная Рис. 3.16. Просмотр файлов Ml.htm и Обратите внимание, что в строке заголовка броузера присутствует заголовок и:

файла Framel.htm. Это единственная информация из этого файла, которую мы уви на экране, но зато все данные из элементов TITLE других страниц будут скрыты В реальной задаче файлы Rightl.htm и должны быть заполнены информацией. Кроме нее для удобства пользователя можно разместить типа «переход к следующей странице», «Переход к предыдущей странице», «пере ход к основной странице». Часто такие ссылки выполняются в виде пиктограмм В нашем примере используется два независимых способа передвижения по стра при помощи ссылок в меню (левом фрейме) и при помощи ссылок в ин формативных документах (правом фрейме).

Файл Ml.htm содержит три гиперссылки. Первая ведет на страницу без фреймов поэтому в ней обязательно должен быть указан атрибут target со значением В противном случае при переходе возникла бы ошибка: было бы открыто одно окно броузера или страница оказалась бы внутри фрейма. В случае шаблон гиперссылки такой:

<А Текст подсказки Фреймы Другие значения атрибута target:

• _self — как будто атрибута target нет, то есть страница открывается внутри текущего фрейма;

• _top — то же, что и • _blank — открытие еще одного окна броузера и показ страницы в нем.

Две другие ссылки позволяют менять содержимое правого фрейма, оставляя ле вый неизменным. Здесь важно указать атрибут target с именем правого фрейма (используем ссылку в одном фрейме, а страницу загружаем в другой):

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

target=_parent Для перехода на «следующую» («предыдущую») страницу внутри текущего фрейма атрибут target не нужен: действует правило умолчания.

ПРИМЕЧАНИЕ Файлы Rightl.htm и имеются на прилагаемой дискете.

Этот элемент позволяет создать на странице область с полосами прокрутки (inline frame) для демонстрации содержимого другой страницы. Шаблон для использо вания элемента (просмотра файла Имя такой:

htm" Ваш броузер не поддерживает фреймы. Эту страницу можно просмотреть <А файла. Атрибуты width и height определяют ширину и высоту фрейма соответственно.

Если атрибуты не указаны, используется окно размером 300x150 пикселов.

Атрибут sc rolling управляет полосами прокрутки и может иметь следующие зна чения:

• auto — броузер определяет необходимость показа полос;

• yes — показ полос прокрутки (вертикальной — обязательно);

• по — без полос прокрутки.

Можно использовать атрибуты target и а также другие атрибуты стандартных фреймов:

фрейма" 92 _ Глава 3. Основные элементы HTML версии число пикселов" пикселов" Допускается также использование стандартных атрибутов align, class, id, style, title Устаревшие и нестандартные элементы Существует ряд элементов, работоспособность которых невозможно гарантировать Их появление обусловлено несколькими причинами. Во-первых, элементы появляются в результате вносимых в язык при новых версий. Новые броузеры не выводят никаких сообщений об элементах и игнорируют их при форматировании Web-страниц. Во-вторых, смысленность некоторых элементов заключается в том, что результаты рования (например изменения атрибутов шрифта) никак не проявляются экране. Все эффекты, ожидаемые от подобных элементов, можно с успехом полу чить при помощи других, более популярных. Я думаю, что любой разработчик должен учитывать тот факт, что его Web-страницы будут просматривать при разных программ. Поэтому он должен быть уверен, что документ выглядеть так же, как в оригинале.

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

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

Сложилась парадоксальная ситуация: спецификация языка как стандарт де-фак то разрабатывается в одной организации (в Consortium), а броузеры — в дру гих (фирмах-разработчиках программного обеспечения). Таким образом, версия языка — это, скорее, временное понятие. Можно говорить о состоянии этой облас ти знания только применительно к определенному отрезку времени, то есть периоду декларирования и определенной версии HTML. Посмот рим, какие изменения претерпевает язык в процессе своего развития.

Элемент для создания звуковых эффектов помещается в секцию Атрибут позволяет выбрать звуковой файл. С помощью атрибута loop задает ся число повторений звукового фрагмента. Обычно используют непрерывное воспроизведение для звукового сопровождения (1оор=-1 или или однократное воспроизведение, если фрагмент является звуковым приветстви ем или комментарием Атрибут определяет громкость.

Стандартные атрибуты: id, class, title.

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

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

ПРИМЕЧАНИЕ Примеры использования элементов DIR и MENU можно найти в файле List.htm на прилагае мой дискете.

<ХМР> и

Эти элементы еще в версии HTML 3.2 считались устаревшими. Теперь о них ни кто не вспоминает. Вместо них рекомендуется использовать элемент PRE.

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

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

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

94 _ Глава 3. Основные элементы HTML версии Элемент удобен при обсуждении вопросов, связанных с HTML. В настоящее мя вместо него надо использовать элемент PRE.

Элемент, являющийся контейнером для некоторого объекта. Для объекта броузер должен быть снабжен соответствующей надстройкой (plug-in) Элемент используется по следующей схеме:

данных атрибута" второго атрибута" > Этот элемент может располагаться внутри элемента EMBED и содержать подсказку на тот случай, если броузер не может активизировать объект.

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

Фоновый цвет задается обычным способом:

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

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

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

Устаревшие и нестандартные элементы Правда, не все броузеры поддерживают этот атрибут. Вот пример полосы зелено го цвета, высотой 50 пикселов, с выравниванием бегущего текста по середине:

Направление движения строки тоже можно менять:

Удачным атрибутом, на мой взгляд, оказался тот, который управляет поведением (behavior) строки. По умолчанию создается обычная бегущая строка, какие быва ют на табло. Дойдя до края экрана (окна), она уходит из поля зрения, а затем по является с противоположной стороны. атрибут задается так:

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

По третьему сценарию строка не исчезает с экрана, но и не останавливается. Она движется вправо или влево, «отражаясь» от края окна и меняя направление дви жения. Атрибут в этом случае должен быть задан так:

Всю полосу можно сдвинуть по горизонтали вправо:

в пикселах Выше и ниже полосы можно создать пустое пространство:

в пикселах Количество проходов строки по экрану можно ограничить:

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

Скорость движения задает следующий атрибут:

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

Существует второй атрибут скорости, определяющий временной интервал (в мил лисекундах) между шагами:

Глава 3. Основные элементы HTML версии С помощью этого атрибута можно заставить строку двигаться рывками.

ПРИМЕЧАНИЕ Примеры бегущих строк можно найти в файле Text.htm на прилагаемой дискете.

Предполагается, что 3... Этот элемент обеспечивает подсветку строке. Но он не поддерживается большинством броузеров, поэтому вать его не рекомендуется.

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

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

Глава Объекты и формы Достаточно трудно определить, что на самом деле является объектом, а что нет.

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

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

Общие атрибуты объектов Элементы объектов (IMG, OBJECT, APPLET) позволяют использовать общие атрибу ты border, width, height, hspace, vspace и ряд стандартных атрибутов.

Как правило, объект занимает прямоугольную область на экране, поэтому одним из самых полезных является атрибут, который определяет ширину рамки (border):

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

Размеры объекта можно задавать так:

в пикселах и в пикселах Можно использовать атрибуты выравнивания:

• — по нижнему краю;

• — влево;

• — по центру;

• right" • — по верхнему краю.

98 Глава 4. Объекты и Размеры объекта могут не совпадать с размерами рамки. Тогда справа и слева о" объекта можно создать пустое пространство:

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

пикселов Рисунки и карты Элемент для создания ссылки на графический файл (image). Он не содержит нечного тега — вся необходимая информация задается при помощи атрибутов Этот элемент является универсальным: с его помощью можно использовать ражения в гиперссылках, вставлять картинки в таблицы, просто размещать рисун ки на Web-странице, создавать маркеры, решать задачи дизайна и т. д.

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

на файл" Ссылка на файл представляет собой URL. В некоторых случаях у пользователя может возникнуть желание скопировать в отдельную папку какую-нибудь Web страницу или набор страниц из Интернета. Это позволяет в дальнейшем исполь зовать страницы, не подключаясь к Сети. Скопировать HTML-файлы легко: это сделает броузер. Сложнее с рисунками. Сначала их надо найти в папке кэша, ско пировать в требуемую папку, а затем откорректировать значения всех атрибутов указав для них новый путь.

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

• photo" — для фотографии;

• — если кнопка имеет надпись в виде рисунка;

• com" — если это гиперссылка;

• — для разработчика страницы.

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

Рисунки и карты _ Рисунок можно снабдить и стандартными атрибутами: class, id, longdesc, style, title, атрибутами событий.

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

Однако задание значения атрибута совершенно не обязательно.

В том случае, когда карта обрабатывается броузером, используется атрибут usemap.

Он определяет имя карты:

Это имя ставится в соответствие со значением соответствующих атрибутов эле ментов AREA и MAP (см. ниже), которые определяют конфигурацию карты.

Интересно, что задание атрибутов usemap придает элементу IMG свойства, харак терные для элемента А, то есть возможность перехода. Кроме того, мы сталкиваемся со случаем, когда необходимо обязательное совместное исполь сразу трех элементов: AREA, IMG и MAP.

<МАР> Этот элемент необходим для общего определения карты. Внутри него определя ются области карты при помощи элементов AREA и задается имя карты при помо щи атрибута:

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

Адрес" Атрибут для задания текста, заменяющего изображение карты, не является обяза тельным:

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

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

Существует три стандартных вида областей: круг (circle), прямоугольник и многоугольник произвольной формы (polygon).

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

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

y1, x2,y2, Пример многоугольника показан на рис.

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

y1, x2,y Рис. 4.1. Задание координат на карте При помощи атрибута (который используется без значений) можно тить переход по ссылке для определенной области карты.

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

Листинг 4.1. Web-страница с картами Изображения карт иллюстрируют способы задания координат областей для переходов


Рисунки и карты _

Ha этой странице представлены две карты, которые позволяют выполнять переходы. Для правильного функционирования страницы необходимо проверить все ссылки на файлы, заданные с помощью атрибутов src и href, по зеленому кругу переход к Web-странице издательства "Питер", Желтый многоугольник вернет вас на страницу Красный прямоугольник обеспечивает переход в начало этой страницы, Из листинга видно, что описание областей карты и соответствующий элемент могут размещаться в разных частях страницы. Переходы, выполняемые с помо щью карты, могут происходить как внутри страницы, так и к удаленному ресурсу, ПРИМЕЧАНИЕ Файл и необходимые для него изображения можно найти на прилагаемой дискете.

Для обращения к карте можно использовать и элемент OBJECT, например:

С изображениями карт удобно работать в стандартном для Windows 95 редакторе Paint. Для него изображение должно быть представлено в формате BMP. Этот редактор позволяет использовать сетку в режимах увеличения. Ее можно вклю чить или отключить при помощи комбинации клавиш После выбора ин струмента Выделение указатель мыши приобретает вид тонкого крестика. Таким образом, положение указателя можно легко установить с точностью до одного Глава 4. Объекты и пиксела. В строке состояния редактора будут указаны координаты курсора отно сительно верхнего левого угла рисунка. Значения координат соответствуют тре буемым для атрибута coords величинам и идут в том же порядке (х, у).

Если первоначально изображение создано не в формате GIF, то его можно разовать в этот формат, используя любой графический редактор, поддерживаю щий этот тип файлов. Например, MS Photo Editor, входящий в состав Microsoft Office, или популярный Adobe Photoshop. Достаточно открыть графический файл в редакторе и сохранить его (выполнить команду Сохранить как) в формате GIF, Можно также использовать форматы JPG и PNG.

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

Одним из способов применения карты является создание меню страницы. Это обычно горизонтальная полоса, состоящая из цветных прямоугольников с тек стом команд. Щелчок на каждом из прямоугольников переводит пользователя на другую страницу или в другую точку текущей страницы. Преимущество гра фического меню заключается в независимости от используемой кодировки сим волов: буквы всегда будут видны. Такое меню можно сделать как набор несколь ких рисунков, но тогда надо принимать меры к тому, чтобы эти рисунки всегда, при любой конфигурации окна броузера, располагались в ряд. Гораздо проще представить меню в рисунка-карты и разбить его на несколько пря моугольных областей.

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

Почта 7 | windows ] Г Рис. 4.2. Пример карты Элементы объектов Элементы объектов Этот элемент поддерживается броузерами, в которые встроен интерпретатор Java. Простейший шаблон, который позволит включить в HTML-страницу ап плет на языке Java, показан ниже:

Произвольный текст комментария Атрибут code для задания имени файла, содержащего откомпилиро ванную Java-программу. В отличие от других указателей на ресурсы, значение этого атрибута может быть только относительным, то есть апплет должен распо лагаться в той же что и страница. Для задания другого базового пути необ ходимо использовать атрибут codebase. При выполнении апплета создается окно шириной и высотой пикселов. Внутри элемента APPLET может разме щаться произвольный гипертекст. Броузеры, поддерживающие Java, игнорируют все элементы этого гипертекста, включая текст, за исключением элементов (см. ниже). Броузеры, не поддерживающие Java, игнорируют элементы и воспроизводят «понятный» для них гипертекст.

Начальный тег элемента APPLET может быть снабжен дополнительными атрибутами.

Атрибут codebase предназначен для указания места расположения апплетов:

для апплетов" Если этот атрибут не задан, то по умолчанию используется URL-страница.

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

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

апплета" Атрибуты width и height задают параметры окна апплета: ширину и высоту соот ветственно.

Поскольку для выполнения апплета создается окно, предусмотрено использова ние уже хорошо известного нам атрибута align для управления размещением это го окна. Атрибут может иметь следующие назначения: bottom, middle, right, top.

Вокруг окна можно создать пустое пространство:

пикселов выше и ниже пикселов слева и справа Допустимые стандартные атрибуты: id, class, title, style.

104 Глава 4. Объекты и формы В простейшем случае этот элемент позволяет разместить рисунок:

Атрибуты:

• объекта" — уникальный идентификатор объекта или адрес объекта;

• URL" — ссылка на объект или базовый URL, который позволяет указы вать местоположение объекта при помощи атрибутов archive, classid или data;

• объекта" — URL или относительный адрес, позволяющий загру зить объект;

• адресов" — аналог атрибута data, позволяющий указывать не сколько адресов объекта;

• — тип объекта (используется совместно с атрибутом classid);

• — тип (MIME) объекта;

• declare — объект с таким атрибутом только загружается, но не активизируется;

• "текст — текст, который выводится на пока загру жается объект.

В элементе OBJECT можно также использовать атрибуты: id, class, title, style, tabindex, name, align, width, height, border, hspace, vspace, атрибуты событий.

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

Элементы объектов Например, при невозможности активизировать объект можно вставить в доку мент изображение, которое в какой-то степени будет его заменять. Это делается по следующему шаблону:

Этот элемент используется для передачи параметров объекту и размещается внутри элемента APPLET или OBJECT. Шаблон его может быть таким:

Или таким:

параметра" параметра Элемент должен содержать одну или несколько пар атрибутов, определяю щих имя параметра (name) и его значение (value). При выполнении апплета прием параметров в нем осуществляется по следующему шаблону:

Атрибут может иметь следующие значения:

• data — параметр передается в качестве строки;

• object — параметр является идентификатором объекта;

• ref — значение параметра является ссылкой (URL).

В том случае, когда значение атрибута valuetype равно ref, с помощью атрибута type можно задать тип параметра:

106 Глава 4. Объекты и фориь Общие атрибуты форм Предполагается, что форма должна содержать определенное число элементов ления: поля ввода, переключатели, кнопки, флажки и т. д. Каждый элемент ления создается при помощи одного из элементов HTML. Для таких предусмотрены атрибуты, влияющие на работу формы.

Большинство элементов формы может принимать определенные значения.

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

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

Атрибут позволяет определить, в какой последовательности курсор переходит с поля н;

поле при нажатии клавиши Tab. На элемент с атрибутом tabindex= ется курсор в момент открытия окна броузера.

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

Атрибут disabled позволяет сделать элемент формы недоступным. Вид при этом не изменяется, но цвет текста становится более бледным.

элемент нельзя выбрать или изменить его значение.

Существуют атрибуты событий, которые непосредственно связаны с формами:

• onfocus — элемент получает фокус (выбирается);

• onchange — информация элемента изменена;

• г — элемент теряет фокус.

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

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

Стандартные атрибуты: class, title, style.

Рис. 4.З. Пример использования элемента ISINDEX Этот элемент необходим для построения достаточно сложных форм. После заполне ния формы и подтверждения ввода со стороны пользователя, введенная информа ция пересылается на сервер и обрабатывается при помощи связан ной с формой. Атрибут action должен указывать на например:

программы" Элементы формы Одним из вариантов обработки формы может быть пересылка данных по элек тронной почте:

домен" С помощью атрибута method можно задать протокол для пересылки данных на сервер. Протокол GET используется по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используется протокол POST.

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

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

кодировок" 108 Глава 4. Объекты и формь Можно также определить список допустимых типов данных:

типов данных" Большинство форм снабжаются кнопками, которые позволяют очистить форму или подтвердить (submit) правильность ее заполнения и отослать ные. Чтобы определить программы-сценарии, которые должны после указанных действий пользователя, существуют два атрибута событий onsubmit и on reset.

Стандартные атрибуты: id, class, style, dir, title, target, атрибуты событий Этот элемент позволяет создавать различные части формы, такие как флажки переключатели, поля ввода. Элемент не имеет конечного тега, так как все ры задаются при помощи атрибутов.

Вид элемента определяет атрибут type:

• — создание поля ввода, в котором можно автоматически произвольный текст, используя атрибут value;

• — создание поля для ввода пароля, причем введенная ин формация отображается звездочками;

• — создание флажка;

• — определение одного переключателя. Для создания группы пе реключателей необходимо использовать несколько элементов INPUT. Вот при мер группы из трех переключателей:

<НЗ> Переключатели Атрибут checked определяет, какой из переключателей должен быть выбран по умолчанию. На рис. 4.4 показан внешний вид этой группы переключателей.

Рис. 4.4. Группа переключателей • — создание кнопки произвольного назначения;

• — создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут используется для определения надписи на кнопке;

• — тоже кнопка, но для отмены ввода данных в форму;

Элементы • — создание кнопки с рисунком. Для указания графического файла используется атрибут Атрибут align предназначен для позиционирова ния кнопки с рисунком. Значения атрибута уже неоднократно упоминались:

bottom, middle, right, top. Пользоваться этим атрибутом в данном случае я не рекомендую, так как не все броузеры его поддерживают;

• — средство выбора файла для присоединения к форме. Пользова телю предлагается записать имя файла в поле ввода. Кроме того, броузер авто матически создает рядом с полем ввода кнопку Обзор, которая позволяет запу стить стандартный (для операционной системы) диалог выбора файлов;

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

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

Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок под тверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени мо жет выделить необходимые данные.

Область применения атрибута нам уже известна. Значение атрибута задает значение по умолчанию для поля ввода или определяет надпись на кнопке.

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

Атрибут size позволяет задать длину поля ввода. Длина выражается в символах, но эта величина может быть задана только приближенно. Чтобы разместить в поле ввода определенное количество символов, потребуется подбор значения ат рибута. При этом никто не может дать гарантию, что все броузеры обеспечат тре буемую длину строки, а не меньшую. Таким образом, длину поля ввода необходи мо выбирать с запасом.

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

Атрибут readonly позволяет создать элемент, недоступный для редактирования.

Атрибут usemap (см. выше раздел «Рисунки и карты») может использоваться, если в форме создается карта.

Так же, как и в FORM, в элементе INPUT можно указывать атрибут accept.

Допустимые общие атрибуты: accesskey, tabindex, readonly, disabled.

Стандартные атрибуты: id, class, title, style, атрибуты событий.

110 Глава 4. Объекты и Используя элементы FORM и INPUT, можно создать объект, который заменит гичный объект, созданный на основе элемента ISINDEX. Приведенный ниже выполняет те же функции, что и код, посвященный элементу ISINDEX (см. рис. 4.3):

для ввода критерия поиска
Этот элемент является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:

адрес:

Стандартные атрибуты: accesskey, id, class, title, style, атрибуты событий.

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

Элементы форм

Узнайте, что такое Саентология...

Ваша жизнь поменяется...

этом примере использована таблица для выравнивания элементов формы. В фор ме есть несколько полей ввода и группа из двух переключателей (рис. 4.5). Для тренировки вы можете заполнить форму информацией, и отослать ее по электрон ной почте (например, себе). Для этого надо ввести в код страницы реальный элек тронный адрес. Заполнив форму, следует щелкнуть на кнопке Отослать. Обратите внимание, что подпись этой кнопки задается в элементе на Web-странице. Под пись кнопки Сброс не задана, поэтому она выбирается из настроек операционной системы. Иными словами, в нерусифицированной версии операционной системы эта кнопка может называться, к примеру, Reset.

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

Элемент SELECT предназначен для создания списка или меню странице, а элемент OPTION — для создания пункта списка. Пояснить действие этих элементов поможет простой фрагмент, приведенный ниже: