	WWW.DISSERS.RU
	БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.

Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.

Элемент, создающий строку таблицы. Он не имеет конечного тега. Строка закан чивается там, где начинается следующая, то есть следующий элемент 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, несомненно, под влиянием успеха тексто вых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стан дартные атрибуты. Существует несколько разновидностей списков.

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

Рис. 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, или нарушить последовательность номеров, если переопределить другие элементы списка.

Списки

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

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

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

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

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

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

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

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

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

Пункт ПРИМЕЧАНИЕ Примеры списков можно найти в файле 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, например:

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

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