Московский государственный университет печати

Вуль В.А.


         

Электронные издания

Учебник


Вуль В.А.
Электронные издания
Начало
Печатный оригинал
Об электронном издании
Оглавление

Предисловие

1.

Глава 1. Общая характеристика электронных изданий

1.1.

Что такое «электронное издание»

1.2.

Составные элементы электронного издания

1.2.1.

Тексты

1.2.2.

Иллюстративный материал

1.2.3.

Звуковое сопровождение

1.2.4.

Анимация и видео

1.3.

Форматы электронных изданий

1.4.

Классификация электронных изданий

1.5.

Современное состояние и перспективы электронного книгоиздания

2.

Глава II. Структура и элементы гипертекстовых документов

2.1.

Общая характеристика и структура HTML-документа

2.2.

Тело документа и оформление его основных фрагментов

2.2.1.

Тело документа

2.2.2.

Теги логического форматирования текста

2.2.3.

Теги физического форматирования текста

2.3.

Оформление списков терминов и определений

2.3.1.

Маркированные списки

2.3.2.

Создание нумерованных списков

2.3.3.

Списки определений

2.3.4.

Многоуровневые списковые структуры

2.4.

Использование графики при оформлении электронного издания

2.5.

Включение в издание ссылок и комментариев

2.6.

Оформление таблиц

2.7.

Фреймовая структура электронного издания

2.8.

HTML-формы

2.9.

Понятие о динамическом HTML и его компонентах

3.

глава III. Мультимедийный документ и форматы представления его элементов

3.1.

Мультимедиа и ее роль в современных информационных технологиях

3.2.

Форматы представления текстовых блоков электронного издания

3.3.

Форматы представления графической информации

3.4.

Форматы представления аудиофайлов

3.5.

Форматы представления анимации и цифрового видео

3.5.1.

Анимационные GIF-файлы

3.5.2.

Принципы представления цифрового видео

3.5.3.

Форматы цифрового видео

4.

глава IV. Средства подготовки электронных изданий

4.1.

Издательские технологии и электронные издания

4.2.

Подготовка гипертекстовых электронных изданий в DOC-формате

4.2.1.

Подготовка изданий в редакторе MS Word 97

4.2.2.

Подготовка изданий в редакторе MS Word 2000

4.3.

Редактирование HTML-изданий в редакторе MS Word 97

4.3.1.

Команды секции меню «Формат»

4.3.2.

Команды секции меню «Вставка»

4.4.

Общая характеристика типовых HTML-редакторов первой группы

4.5.

Общая характеристика WYSIWYG-редактора Netscape Composer

4.6.

Подготовка документов в PDF-формате

4.7.

Программы-конструкторы для подготовки анимационных GIF-файлов

5.

глава V. Аппаратное и программное обеспечение рабочего места читателя

5.1.

Требования и рекомендации к аппаратному обеспечению

5.1.1.

Требования к центральной части или ядру ПК

5.1.2.

Мониторы и требования к ним

5.1.3.

CD-ROM-накопители для работы с переносимыми изданиями

5.1.4.

Другие виды оптических накопителей

5.2.

Назначение и общая характеристика браузеров

5.3.

Браузер MS Internet Explorer

5.3.1.

Экранный интерфейс

5.3.2.

Организация просмотра загруженного документа

5.3.3.

Основные команды меню браузера

5.3.4.

Ведение журнала обозревателя и команды других секций меню

5.4.

Программные средства для работы с электронными изданиями в PDF-формате

5.5.

Программные средства для воспроизведения аудиофайлов

6.

глава VI. Подготовка сетевых и мультимедийных изданий в специализированных программных пакетах

6.1.

Общая характеристика пакета MS FrontPage 2000

6.1.1.

Интерфейс пакета

6.1.2.

Технология подготовки новых Web-сайтов

6.2.

Назначение и общая характеристика пакета Dreamweaver

6.2.1.

Интерфейс пакета DreamWeaver

6.2.2.

Последовательность проектирования сайта в пакете Dreamweaver

6.3.

Подготовка мультимедийных изданий в пакете Macromedia Director

6.3.1.

Интерфейс пакета Macromedia Director

6.3.2.

Основные окна и инспекторы пакета

6.3.3.

Основные этапы работы над мультимедийным электронным изданием

6.4.

Дизайн Web-сайтов в пакете Macromedia Flash

6.4.1.

Общая характеристика и интерфейс пакета

6.4.2.

Основные понятия и элементы Flash-технологии

6.5.

Общая характеристика других программных средств для Web-дизайна

6.5.1.

Другие средства проектирования Web-сайтов

6.5.2.

Подготовка анимационных фрагментов в пакете 3D Studio Max

7.

глава VII. Организация хранения электронных изданий

7.1.

Организация хранения и поиска электронных изданий

7.2.

Информационное хранилище издательства

7.2.1.

Требования к информационному хранилищу издательства

7.2.2.

Проектирование структуры хранилища электронных изданий

7.3.

Информационная структура современного издательства

7.4.

Автоматизация выделения метаданных

7.4.1.

Метаинформация и ее роль

7.4.2.

Законы Зипфа и автоматизация извлечения метаданных из электронных изданий

7.4.3.

Применение программ-экстракторов

7.5.

Публикация содержимого баз данных на Web-страницах

7.5.1.

Публикация статических Web-страниц

7.5.2.

Публикация динамических Web-страниц

8.

глава VIII. Распространение электронных изданий

8.1.

Виртуальный мир книги и его особенности

8.1.1.

Некоммерческие электронные библиотеки

8.1.2.

Представительство крупных библиотек в Интернете

8.2.

Электронные книжные магазины

8.3.

Технология E-book и развитие электронного книгораспространения

8.3.1.

Специализированные аппаратные средства для работы с электронными изданиями

8.3.2.

Современное аппаратное средство E-book

8.3.3.

Программные средства E-book

8.3.4.

Стандарт Open E-book

8.3.5.

Достоинства и недостатки технологии E-book

9.

глава IX. Электронные учебники

9.1.

Достоинства и недостатки электронных учебников

9.2.

Структура электронного учебника

9.3.

Основные принципы подготовки электронных учебников

9.3.1.

Размещение информации на поверхности экрана

9.3.2.

Проблема ориентации и перемещения пользователя внутри электронного издания

9.4.

Дистанционное обучение и организация самостоятельной работы студентов

9.5.

Автоматизированные методы оценки уровня подготовки студента

Библиография

Указатели
2  именной указатель
92  предметный указатель
265  указатель иллюстраций
58  указатель компаний

2.
Глава II. Структура и элементы гипертекстовых документов

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

2.1.
Общая характеристика и структура HTML-документа

На заре компьютеризации приходилось работать с простыми текстовыми редакторами, такими как WordStar, для которых информация, отображаемая на экране, отличалась от выводимой на бумагу с помощью принтера. В текст документа вставлялись специальные управляющие символы, которые не отображались на экране, но обеспечивали вывод на печать в нужном формате отдельных фрагментов документа. При форматировании одна группа символов определяла начало фрагмента, затем следовал текст, к которому применялось это форматирование, а после него следовали символы конца фрагмента. Так задавались разрядка, курсив, полужирный шрифт и пр. Аналогичные способы применялись и при работе с первыми версиями СУБД dBase (например, dBase II), о чем автор может судить по своему личному опыту.

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

Для просмотра HTML-документов используют специальные программы, которые называются браузерами (Browser, т. е. средство просмотра в дословном переводе). Такие программы нуждаются в графической оболочке. В частности, значительное число браузеров (Microsoft Internet Explorer, Netscape Communicator, Opera и др.) работают в среде Windows 95, 98 и 2000.

Популярность Язык HTMLязыка HTML росла вместе с развитием Интернетсети Интернет. Отсутствие в течение некоторого времени стандартов на язык HTML привело к тому, что некоторые браузеры отображали должным образом не все теги, а в версиях различных фирм одни и те же теги могли трактоваться неодинаково или даже не поддерживались. Широкое использование HTML-документов в сети Интернет привело к появлению международных стандартов на этот язык, называемых спецификациями языка HTML. Этой работой занялась широко известная организация World Wide Web Consortium (W3C)World Wide Web Consortium (W3C). Первой из спецификаций, признанной большинством компаний-разработчиков, явилась HTML 2.0, представленная в конце 1995 г. Вскоре была выпущена предварительная (рабочая) версия спецификации 3.0, а в мае 1996 г.- проект спецификации HTML 3.2. После длительного обсуждения и исправления в январе 1997 г. эта спецификация стала официальной рекомендацией для разработчиков HTML-документов и браузеров. В декабре 1997 г. официальной рекомендацией стала спецификация HTML 4.0, которая остается в действии до настоящего времени.

Основой спецификации HTML 4.0 стало отделение параметров описания документов от параметров представления отдельных его фрагментов на экране монитора. Такое разделение облегчает адаптацию языка к различным платформам передам (Windows, UNIX, DOS и пр.) и упрощает процесс внесения изменений в документы. В соответствии с такой концепцией для описания документа следует использовать таблицу стилей, причем это понятие сходно с используемым в современных текстовых редакторах, таких как Word 97 или 2000. Использование же данных о форме представления документа вперемежку с содержанием самого документа не рекомендуется.

Спецификация HTML 4.0 отменяет ряд ранее использовавшихся тегов. Отмена тега означает, что этот тег по-прежнему поддерживается браузерами, но его применение в современных документах не рекомендуется. В дальнейшем такие теги могут быть переведены в разряд устаревших, которые уже могут не поддерживаться браузерами. Информация такого рода может быть получена на сайте http://www.w3.org/TR/.

Любой HTML-документ заключен в контейнер <HTML> и </HTML>. Сам документ, как уже говорилось выше, представляет собой обычный текстовый файл. Его можно просматривать в DOS'e с помощью стандартных редакторов и средств просмотра текстовых документов, при этом вместе с самим текстом мы будем видеть и теги. Структурно документ распадается на две части: заголовочную и основную, ил и тело документа. Первая часть находится внутри контейнера <HEAD> и </HEAD>, а основная часть - внутри контейнера <BODY> и </BODY>.

Единственный обязательный тег, который используется в заголовочной части,- <ТIТLE>, причем он образует контейнер, внутри которого размещается текст заголовка. При загрузке документа в браузер текст заголовка загружается в первую очередь в окно заголовка браузера. Если текст заголовка достаточно информативен, пользователь в процессе поиска релевантных документов уже на этапе загрузки документа может определить, действительно ли ему нужен этот документ, а если не нужен, то сразу отказаться от его загрузки и перейти к загрузке следующего. Текст названия используется и при создании закладки для данного документа, с этой точки зрения также очень важна его информативность.

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

Для формирования ссылок в заголовочной части применяется тег <ВАSЕ>, в котором используется один единственный параметр HREF, в качестве значения которого указывается URL (Universal Resours Locator) - адрес файла, на который производится ссылка. Адрес может быть локальным, т. е. задавать размещение файла в каталогах и подкаталогах на том же самом компьютере, или сетевым, например <BASE HREF='http:// www.uprint.spb.ru/main.htm'>.

Для организации логической связи и соподчиненности электронных изданий может использоваться тег <LINK>. В этом теге могут использоваться четыре параметра: HREF, REL, REV и TYPE. С помощью первого из них задается URL связанного с данным документа. Параметр REL определяет вид отношения между текущим и связанным с ним документом, a REV -обратное отношение (между другим и текущим документами). Последний параметр TYPE задает тип и параметры присоединяемой к документу таблицы стилей. Примеры тега <LINK>:

<LINK REL='contents' HREF='(адрес)'>

<CLINK HREF='mailto: (адрес автора)' REV='made'>

Другими значениями параметра REL могут быть bookmark, copyright, glossary, help. Значение made параметра REV является признаком обратного отношения. Другие его значения: autor, editor, publisher.

Позднее в состав заголовочной части был добавлен специальный тег <МЕТА>, с помощью которого задается метаинформация, связанная с данным электронным изданием, или атрибуты для ускоренного поиска. Частные случаи метаинформации - это имя автора, издателя, редактора, название издательства, время публикации и другие характерные признаки издания. Тег <МЕТА> имеет два параметра: NAME, которым задается имя атрибута, и CONTENT, определяющий значение этого атрибута. Например:

<MЕТА NAME='author' CONTENT='B. А. Вуль'>

<СМЕТА NAME='description' СОМТЕМТ='Электронные издания'>

Как нам кажется, приведенные примеры не нуждаются в каких-либо комментариях.

Итак, внутри контейнера <HEAD> и </HEAD>, ограничивающего заголовочную часть HTML-документа, обычно используется один контейнер <TITLE> и </TITLE>, внутри которого размещается текст заголовка, и могут быть включены теги <BASE>, <LINK> и <МЕТА>. Отметим, что HTML-документ, содержащий только заголовочную часть, будет нормально отображаться браузерами как пустой документ. Пример такого документа представлен на рис. 2.1Рис. 02.01.. А ниже показан соответствующий этому документу HTML-код:

<HTML>

<HEAD><ТIТLE>Пустой документ </TITLE></HEAD>

<BODY></BODY>

</HTML>

2.2.
Тело документа и оформление его основных фрагментов

2.2.1.
Тело документа

Внутри контейнера <BODY></BODY> размещается содержательная часть электронного документа. Сам тег <ВОDY> содержит ряд параметров, ни один из которых не является обязательным.

Параметры данного тега обеспечивают оформление всего тела документа. Перечислим их:

  • LINK - определяет исходный цвет ссылки;

  • BACKGROUND - задает URL изображения, определяющего фон тела документа;

  • BOTTOM MARGIN и TOPMARGIN - задает границу нижнего и верхнего полей документа в пикселах;

  • LEFTMARGIN и RIGHTMARGIN - границы левого и правого полей документа в пикселах;

  • BGCOLOR - задает цветовой оттенок фона документа (аналог тонирования бумаги, на которой печатается издание);

  • BGPROPERTIES - определяет свойства фона, задаваемого предыдущим параметром;

  • LINK - задает цвет еще не просмотренной ссылки;

  • SCROLL - определяет наличие полос прокрутки в документе, отображаемом в окне браузера;

  • TEXT - определяет цвет текста;

  • VLINK - цвет уже просмотренной ссылки.

Ряд параметров связаны с использованием цветовых оттенков в HTML-документах.

Отметим, что по умолчанию в них используется RGB цветовое пространство, причем значение каждого из основных цветов имеет 256 уровней и задается в виде двух цифр в 16-тиричной системе счисления от 00 до ЕЕ. Таким образом, цветовой тон задается последовательностью из шести 16-тиричных цифр, которым предшествует сим вол #, например последовательность #FFFFFF соответствует белому цвету максимальной интенсивности, а #800080 - фиолетовому тону, интенсивность которого равна половине от максимальной.

Приведем примеры использования параметров в теге <BODY>:

<body link='#000080' background='image/background.gif'>

<body bgcolor='#COCOCO'>

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

2.2.2.
Теги логического форматирования текста

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

Так, два тега <ABBR> и <ACRONYM> позволяют выделить аббревиатурные сокращения в пределах текста, причем второй используется для произносимой аббревиатуры. В теге <ACRONYM> может использоваться параметр TITLE, значением которого является полный текст сокращения. Например, контейнер:

<ACRONYM ТITLE='Московский Государственный Университет Печати'> МГУП </ACRONYM>

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

Тег-контейнер <СIТЕ> используется для выделения цитат, названий книг, газет и журналов. Браузеры обычно выводят текст, находящийся внутри контейнера, курсивом. Тег-контейнер <CODE> выводит текст как фрагмент программного кода (строки листинга программы) моноширинным шрифтом, a <DFN> отмечает текстовый фрагмент как определяемый термин. Аналогичным образом тег-контейнер <STRONG> выделяет содержимое как важные фрагменты текста.

Тег <INS> отмечает фрагмент текста как вставку, т. е. с его помощью можно отслеживать изменения, вносимые в основной текст. Тег может иметь два параметра: CITE (не путать с одноименным тегом) и DATETIME. С помощью первого параметра задается URL документа, поясняющего причины вставки, а второй параметр указывает дату и время вставки фрагмента с учетом часового пояса. Тег-контейнер <DEL> отмечает текст как намеченный к удалению. У него имеются параметры CITE и DATETIME, назначение которых точно такое, как в теге <INS>. Ниже приводятся несколько примеров записи тегов, которые, по нашему мнению, не требуют каких-либо комментариев.

<СIТЕ>'Известия'</СIТЕ> - Популярная Российская газета <DFN>Netscape Communicator 4.5</DFN>-Версия 4.5 популярного пакета фирмы Netscape, в который, в частности, вводится браузер для просмотра HTML-файлов

<INS CITE='www.uprint.spb.ru/mydoc.htm' DATETIME='2001-1–27 T16: 1:40+ 0.00> (вставленный фрагмент текста) </INS>

Ниже, на рис. 2.2Рис. 02.02., представлен пример отображения гипертекстового документа, в теле которого содержится ряд тегов логического форматирования текста.

2.2.3.
Теги физического форматирования текста

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

Так, тег-контейнер <В> выделяет заключенный внутри его текст полужирным начертанием. Аналогичным образом, теги <1> и <U> означают курсивное начертание и подчеркивание текста соответственно, а тег <ТТ> - моноширинный шрифт. Теги <STRIKE> и <5> совпадают по назначению и обеспечивают перечеркивание фрагмента текста горизонтальной линией, как намеченного к удалению. Надо отметить, что все перечисленные теги относятся к устаревшим и не рекомендуются к применению. Так, вместо тега <В> предпочтительнее использовать рассмотренный выше тег логического форматирования текста <STRONG>, вместо <STRIKE> или <5> - <DEL>, а вместо <ТТ> - <CODE>.

Из других тегов «шрифтового оформления» отметим <BIG> и<SMALL> которые увеличивают или уменьшают кегель шрифта на одну единицу, <SUB> и <SUP>, размещающие символы выше или ниже уровня строки. Более универсальным в этой группе является тег<ЕОМТ>, который имеет три параметра: FACE, SIZE и COLOR. Первый параметр позволяет указать используемую в текстовом фрагменте гарнитуру, причем, если такая гарнитура не установлена на компьютере, то параметр игнорируется. Можно задавать несколько наименований гарнитур, разделяя их запятыми, тогда будет использоваться первая по списку из имеющихся в наличии. Второй параметр задает размер (но не кегель) шрифта. Всего в языке HTML предусмотрено семь размеров, из которых третий номер используется по умолчанию. Последний параметр указывает цвет группы символов текста и может задаваться в виде группы из семи символов, как указывалось выше, или в наименованиях цветовых тонов. Приведем несколько примеров:

<FONT FACE='Arial','Courier' SIZE=5 COLOR=red> текст

</FONT>.

<FONT FACE='Times' SIZE=2 COLOR=#ffOOOO > текст </FONT>.

<FONT FACE='Times'> 5 <SOP><SMALL> 2 </SMALL></SOP></FONT>.

В первом примере символы текста, содержащиеся внутри контейнера, будут отображаться гарнитурой Arial, если она установлена на компьютере, а в противном случае, гарнитурой Courier. Размер символов будет достаточно велик и они будут красного цвета. Во втором примере будет использована гарнитура Times, размер символов будет на единицу меньше нормального и символы будут того же самого красного цвета. В последнем случае в окне браузера будет отображаться 52, причем размер показателя степени будет на единицу меньше, чем ее основания.

Третий пример иллюстрирует и другое важное свойство тегов-контейнеров физического форматирования текстовых символов: контейнеры могут быть вложены один в другой, причем глубина вложений формально не ограничена. При написании HTML-документHTML-документа вручную необходимо только тщательно следить, чтобы контейнеры строго размещались один внутри другого. Действительно, в примере контейнер <SMALL> и </SMALL> расположен внутри <SUB> и </SUB>, а последний вложен в контейнер <FONT> и </FONT>.

Все рассмотренные выше теги физического форматирования, если их действие рассматривать подобно функциям текстовых редакторов, относятся к шрифтовому оформлению текстовых фрагментов. Поэтому далее следует остановиться на тегах, выполняющих функции, подобные форматированию абзаца. К ним, в частности, относится тег разделения документа на абзацы <Р>, который помещается перед началом очередного абзаца. Закрывающий тег </Р> не обязателен. Браузеры обычно отделяют абзацы друг от друга пустой строкой. Параметром этого тега является ALIGN, т. е. выравнивание. Параметры выравнивания: LEFT, CENTER, RIGHT и JUSTIFY, причем последний только сравнительно недавно начал поддерживаться браузерами.

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

Наоборот, в тех случаях, когда перенос на другую строку внутри фрагмента текста недопустим, следует использовать тег-контейнер <NOBR> и </NOBR>. Находящийся внутри контейнера текст не переносится на другую строку, т. е. не разрывается. Если такая строка получается слишком длинной, то в окне просмотра браузера автоматически появляется полоса прокрутки. В качестве примера на рис. 2.3Рис. 02.02. показано отображение HTML-документа в окне браузера Internet Explorer, а выше - исходный HTML-код для этого документа.

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

Для разметки заголовков служат шесть тегов-контейнеров <Н1> . . <Нб>, причем теги с меньшими номерами определяют заголовки более высокого уровня. Все перечисленные теги относятся к уровню блока, т. е. не могут использоваться для разметки отдельных слов. В качестве единственного параметра этих тегов используется ALIGN, который задает способ выравнивания заголовка (точно так же, как в теге <Р>). Например,

<Hl ALIGN=CENTER> Заголовок 1-го уровня </Н1>

<НЗ ALI6N=LEFT> Заголовок 3-го уровня </НЗ>.

В первом примере заголовок выравнивается по центру и в нем используется наибольший размер кегля шрифта, такой как в теге <FONT SIZE=7>. Во втором случае текст заголовка выравнивается полевому краю, а размер шрифта соответствует значению пара метра SIZE=5. Во всех случаях заголовки выделяются осветленным пространством в виде пропущенной строки до и после строки заголовка и полужирным шрифтом самого заголовка. Наконец, тег заголовка аккумулирует в себе функции тега абзаца, т. е. нет необходимости в использовании одновременно с тегом <НЗ> еще и тега <Р>.

Помимо заголовков, для разделения документа на отдельные разделы могут использовать горизонтальные линии, играющие ту же роль, что и орнаментальные линейки в печатных изданиях, где такие линейки используются в конце определенных разделов, отделяя предыдущий фрагмент издания от последующего. Для генерации таких линий в электронном документе используется тег <ВР>, который не является контейнером. В теге могут использоваться пять различных параметров. Параметр выравнивания ALIGN может принимать значения LEFT, CENTER и RIGHT. Параметр WIDTH задает длину линии в пикселах или в процентах от ширины окна браузера, что обычно предпочтительнее, a SIZE определяет толщину линии в пикселах. Параметр COLOR определяет цветовые характеристики линии, т. е. реализует те же функции, что и аналогичный параметр в теге <Р>. Наконец, параметр NOSHADE отменяет рельефный характер линии, причем у него значение отсутствует, само наличие в теге этого параметра характеризует отсутствие рельефа. Пример записи тега:

<ВР ALIGN=CENTER WIDTH=75% SIZE=8 COLOR=#800080>

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

Для включения цитат большой протяженности (много сотен символов) предназначен тег-контейнер <BLOCKQUOTE>.

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

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

<DIV STYLE='color: green'> (Фрагмент документа) </DIV>

выделит все текстовые элементы указанного фрагмента зеленым цветом.

Тег-контейнер уровня блока <CENTER> предназначен для горизонтального выравнивания всех заключенных в него элементов посередине окна просмотра браузера. В частности, он используется для выравнивания по центру таблиц (см. § 2.6).

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

Специфическим видом текста, который иногда включают в электронное издание и ценность которого, на наш взгляд, сомнительна, является бегущая строка. Зато на Web-страницах такие фрагменты нередко используются, преимущественно в рекламных целях. Для создания бегущей строки используется тег-контейнер <MARQUEE>. В теге используется ряд параметров: DIRECTION, BEHAVIOR, WIDTH, HEIGHT, LOOP, SCROLLDELAY, BGCOLOR. Первый параметр определяет направление движения строки и принимает значения LEFT или RIGHT. Параметры WIDTH и HEIGHT позволяют задать размеры окна, в котором движется строка текста. Размеры задаются в пикселах или в процентах от ширины и высоты страницы. Параметр LOOP задает число повторов цикла перемещения строки, если он вообще не упомянут, то число повторов бесконечно. Параметр SCROLLDELAY определяет период повторения изображения движущегося текста в миллисекундах. Наконец, значение BGCOLOR позволяет стандартным способом определить цвет фона окна, в котором движется строка текста. Если требуется изменить гарнитуру, кегль, цвети другие параметры шрифта бегущей строки, то следует тег-контейнер <MARQUEE> поместить внутрь тега-контейнера <FONT>, в котором и задать все характеристики шрифта.

2.3.
Оформление списков терминов и определений

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

2.3.1.
Список маркированныйМаркированные списки

Создаются с помощью тега-контейнера <UL> (Unordered List - неупорядоченный список). В теге могут использоваться два параметра: COMPACT, который изначально предназначался для вывода элементов списка в компактной форме (уменьшенным кеглем и расстоянием между строками) и TYPE, который используется для принудительного задания вида маркера. Параметр COMPACT не имеет значений. Современными браузерами он игнорируется. Параметр TYPE может принимать одно из трех значений: disc, circle и square. В первом случае маркеры (bullets) имеют вид закрашенного круга, во втором - окружности малого диаметра, в третьем - закрашенного квадрата. По умолчанию значение TYPE=disk.

Каждому элементу списка предшествует тег <LI> (List Item - элемент списка), который необязательно должен быть контейнером. В качестве параметра этого тега также используется TYPE, который может принимать те же самые три значения. Таким образом, в списке принципиально могут использоваться и различные маркеры для представления отдельных элементов.

2.3.2.
Создание нумерованных списков

Список нумерованныйНумерованный список организуется с помощью тега-контейнера <OL> (Ordered List), внутри которого размещаются все элементы списка. Открывающий и закрывающий теги обеспечивают пропуски строк до и после списка, выделяя его таким образом в документе. В составе тега могут использоваться три параметра: COMPACT, TYPE и START. Смысл первого параметра тот же самый, что и в теге <UL>. Параметр TYPE по-прежнему определяет тип маркера, причем TYPE=1 определяет маркеры в виде арабских цифр, TYPE=A задает маркеры в виде прописных букв латинского алфавита, TYPE=a - в виде строчных латинских букв, наконец, TYPE=I и TYPE=i определяют маркеры в виде римских цифр, больших и малых соответственно.

Параметр TYPE, заданный в форме определенного числа, определяет начало отсчета для первого элемента списка.

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

<HTML><HEAD><TITLE> Пример нумерованного списка </TITLE></HEAD

<BODY><OL><B> Результаты чемпионата мира по гандболу 2001</В>

<LI> Франция

<LI> Румыния

<LI> Германия

<BR>. . .

<LI VALUE=6> Россия

<LI> Украина

</OL></BODY></HTML>

При выводе в окне браузера документа, HTML-код которого представлен выше, мы увидим изображение, показанное на рис. 2.4Рис. 02.04.. Название документа, размещенного в теге-контейнере <TITLE> в заголовочной части документа, выведено в строке заголовка браузера. Название списка в теле документа показано полужирным шрифтов непосредственно перед списком. Нумерация списка по умолчанию производится арабскими цифрами, так как параметр TYPE в теге <OL> отсутствует. Нумерация списка начинается по умолчанию с первого номера, так как и параметр START в теге <OL> отсутствует. С помощью параметра VALUE=6 в одном из тегов <LI> изменен номер очередного элемента списка, а дальнейшая нумерация продолжается с нового номера. Для создания отточия использован тег принудительного перевода строки <BR>.

2.3.3.
Списки определений

В научно-технических и учебных изданиях нередко используют Список определенийсписки или словари определений, которые в зарубежных книгах называют глоссариями. (Например, см. ссылка на источники литературы). Каждый элемент такого списка начинается с определяемого термина, после которого следуетего определение. Для создания списка определений служит тег-контейнер <DL> (Definition List), внутри котороготег<ОТ> (Definition Term) задает определяемый термин в форме единственной строки, а тег<00> (Definition Description) предшествует абзацу с определением этого термина. Для примера приведем фрагмент списка определений для компьютерной графики.

<html><head><title>Cписок терминов и определений </title></head>

<body bgcolor=#d5d5d5><DL><ОТ>Пиксел

<DD>Наименьший элемент изображения, который характеризуется постоянством параметров по всей своей поверхности <DT> Разрешение монитора

<DD> Разрешение монитора определяется количеством пикселов на единицу длины и составляет около 96 пикселей на дюйм <ОТ>Линиатура растра

<DD> Частота размещения растровых точек в плоскости изображения, измеряется числом линий на дюйм </DL></body></html>

Отображение этого файла в окне просмотра браузера показано на рис. 2.5Рис. 02.05.. Как следует из записи исходного HTML-документа никаких попыток выравнивания текста и формирования отступов не производилось. Сами теги <DT> и <DD> так форматируют текст, что обеспечивают оптимальное его восприятие пользователем. Фон документа задается определенным уровнем серого в соответствии со значением параметра BGCOLOR в теге <BODY>. Кстати, язык HTML, как следует из представленного выше фрагмента HTML-кода, нечувствителен к регистру.

2.3.4.
Многоуровневые списковые структуры

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

<HTML><HEAD><TITLE> Пример двухуровневого списка </TITLE></HEAD

<BODY><OL><B> Спутники планет </В>

<BR> ....

<LIбл/> ЗЕМЛЯ

<OL><LI> Луна </OL>

<LI>MAPC

<OL><LI> Фобос

<LI> Деймос </OL>

<BR> ....

</UL></BODY></HTML>

Отображение двухуровнего списка в окне браузера показано на рис. 2.6Рис. 02.06.. Внутри тега-контейнера маркированного списка <UL> размещены два контейнера нумерованного списка <О1_> и </О1_> со своими тегами <LI> каждый. Дополнительный отступ слева обеспечивает хорошую читаемость текста. По этой схеме можно создавать и многоуровневые списки.

2.4.
Использование графики при оформлении электронного издания

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

С технической точки зрения изображения требуют значительно большего объема информации, чем простой текст, поэтому может возникнуть информационная перегрузка, особенно при использовании сетевых технологий с каналами недостаточной пропускной способности. Известно, что многие пользователи сети Интернет отключают за грузку графических файлов, чтобы быстрее загрузить документ и ознакомиться с ним. Несколько улучшило положение применение компактных форматов графических файлов, таких как JPEG (с частичной потерей информации), GIF и PNG. В качестве иллюстрации сказанного можно привести данные по информационному объему файла, в котором хранится рис. 2.6Рис. 02.06.: в формате TIFF - 46 Кб, JPEG - 31 Кб, PNG - 8 Кб и GIF - около 5 Кб.

Мы уже сталкивались с использованием изображения в качестве фонового при знакомстве с тегом <BODY>. Для этого в параметре BACKGROUND указывался URI-файла, хранящего изображения. Если в электронных изданиях, распространяемых на носителях, можно использовать практически любые графические файлы, то для сетевых изданий преимущественно используются GIF-файлы, реже файлы в формате JPEG.

Основным средством встраивания изображений в текст служит тег <IMG>, обязательным параметром которого является SRC, значение которого - адрес (URL) файла изображения. Параметр выравнивания изображения на полосе ALIGN может принимать восемь различных значений, определяющие различные способы его размещения на странице, два параметра позволяют установить размер изображения, еще два - расстояние от границы изображения до текста, отдельный параметр позволяет создать вокруг изображения рамку, а еще один - задать альтернативный текст, который будет выведен вместо изображения при отказе пользователя от его загрузки. Рассмотрим последовательно эти параметры.

Выравнивание изображения осуществляется двумя принципиально различными способами:

  • по левому или правому краю наборной полосы (аналог оборочной иллюстрации в печатном тексте);

  • изображение встраивается как элемент одной из строк текста (печатного аналога такого способа выравнивания нет, более того, в печатном издании такое расположение рисунка совершенно недопустимо).

Для выравнивания изображения по левому или правому краю окна браузера параметру ALIGN присваиваются значения LEFT или RIGHT соответственно, а текст обтекает рисунок с противоположной стороны. Для задания размеров изображения используются параметры WIDTH (ширина) и HEIGHT (высота), причем значения каждого параметра могут задаваться как в абсолютных единицах - пикселах, так и в относительных - процентах от соответствующего размера окна браузера. Реальные размеры изображения могут не совпадать со значениями параметров WIDTH и HEIGHT. В этом случае браузер автоматически масштабирует изображение по отдельным координатам.

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

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

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

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

  • изображение будет выведено в реальных размерах и без искажений;

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

Остановимся кратко на других способах выравнивания изображения в электронном издании. Соответствующие значения параметра ALIGN следующие: ТОР, ТЕХТТОР, BOTTOM, BASELINE, ABSBOTTOM, MIDDLE, ABSMIDDLE. Значение TOP выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, а ТЕХТТОР - по самому высокому текстовому элементу. Смысл различия в том, что элементом строки можетбыть и другое изображение. Значения BASELINE и BOTTOM действуют одинаково и выравнивают нижнюю границу изображения по базовой линии текущей строки, т. е. линии, на которой «стоят» шрифтовые элементы (нижние выносные элементы символов находятся под базовой линией), a ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки, включая все элементы строки, в том числе и графические, если они имеются. Наконец, значения MIDDLE и ABSMIDDLE выравнивают середину изображения по базовой линии или посередине текущей строки соответственно. Еще раз отметим, что по нашему мнению, применение параметров выравнивания этой группы в большинстве случаев снижает качество оформления страницы, противоречит основным принципам дизайна полос.

Чтобы выделить изображение в текстовом документе, полезно предусмотреть незанятое текстом пространство вокруг него. Это можно осуществить с помощью параметров HSPACE и VSPACE, которые определяют отступы (осветленное пространство) по горизонтали и вертикали в пикселах. Для выделения изображения на странице можно заключить его в рамку, толщина которой в пикселах задается с помощью параметра BORDER. Наконец, для пользователей, работающих в режиме отключения загрузки графики, возможность вывода альтернативного текста дает параметр ALT. В случае же загрузки изображения при выводе на него курсора мыши появляется текст подсказки во всплывающем окне. Ниже приводятся пример тега <IMG> с различными параметрами:

<HTML><HEAD><TITLE> Пример вставки изображения в документ </TITLE></HEAD>

<BODYXIM6 SRC=globus.jpg ALIGN=LEFT WIDTH=40% HEI6HT=40% HSPACE=8 VSPACE=10 BORDER=5 А1/Г='Рельеф земной поверхности'>

<Р ALIGN='Justify'> В данном документе рисунок выравнивается влево, т. е. он должен размещаться в левом верхнем углу. Размеры рисунка 60 на 60 пикселей. Рисунок окружен рамкой шириной в 5 пикселей и отделен от текста полями по 10 пикселей с каждой стороны. Текст размещается справа от рисунка и, в дальнейшем, ниже его.</Р></BODY></HTML>

Приведенный выше HTML-документ отображался в браузере MS Internet Explorer и полученное в окне браузера изображение показано на рис. 2.7Рис. 02.07.. В частности, на рисунке видна надпись «Рельеф земной поверхности», заданная в виде значения параметра ALT и возникающая на экране при подведении указателя мыши к изображению.

В заключение отметим, что фирма Netscape в своем браузере предусмотрела возможность использования еще одного параметра втеге<1МС>, а именно LOWSRC. В качестве значения этого параметра указывается графический файл с альтернативным изображением того же самого объекта, но с гораздо более низким разрешением и глубиной цвета. В результате альтернативное изображение имеет на порядок меньший информационный объем и быстро загружается на Web-страницу, а только позднее загружается основное изображение. Пример записи тега с этим параметром представлен ниже:

<IMG SRC=globus.gif LOWSRC=low-globus.gif>

Следует заметить, что размеры этих двух изображений должны совпадать. Если параметр LOWSRC задает изображение меньших размеров, то основное изображение будеттакже трансформироваться к этим меньшим размерам. Чтобы избежать возникающих вследствие этого эффекта искажений, следует в теге <IMG> указать действительные размеры основного

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

2.5.
Включение в издание ссылок и комментариев

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

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

Для организации ссылок используется тег-контейнер <А>, который имеет параметр HREF, причем значение этого параметра и является адресом загружаемой страницы, о чем говорилось выше. Конструкция данного контейнера выглядит следующим образом:

<А HREF=URL-aflpec нужной страницы> Текст-указатель ссылки </А>.

Когда курсор мыши подводится к текстовому указателю, во всплывающем окне появляется адрес ссылки, который записан в качестве значения параметра HREF. Щелкнув левой кнопкой мыши по этому указателю, мы инициируем процесс загрузки документа или страницы с этим адресом.

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

<А HREF=URL-aflpec нужной страницы><IMG 8КС=(имя графического файла)></А>

Действительно, в представленном примере тег <IMG> с параметром SRC, задающим имя графического файла, играет ту же самую роль, что и текст-указатель ссылки в предыдущем примере. Некоторым преимуществом последнего способа является то, что изображение занимает больше места в окне браузера, чем текст-указатель ссылки, и на него можетбыть быстрее выведен курсор мыши.

Выше уже отмечалось, что относительная ссылка указывает не полный путь к файлу, а его местоположение относительного того документа, из которого производится ссылка. Для облегчения работы с относительными ссылками в заголовочной части документа может использоваться тег <BASE>, в котором с помощью параметра HREF указан абсолютный URL-адрес этого документа, относительно которого и строится вся адресация ссылок (см. также § 2.1 данной главы).

Если ссылки на внешние документы позволяют свободно ориентироваться пользователю в безбрежном море сети Интернет, то для качественной навигации в каждом электронном изданий необходимы ссылки внутренние (в пределах самого издания). Скажем, встретив в издании незнакомый термин, Вы захотите узнать его смысл и назначение, для чего необходимо обратиться к списку терминов и определений (см. § 2.3), а затем вернуться к исходному тексту. Любой большой документ требует также наличия ссылок из его оглавления к соответствующим разделам. Могут потребоваться и другие ссылки, например, в текущем и предыдущем абзацах, по существу, такие ссылки указаны в виде адресации пользователя к определенным разделам данного учебника. Однако в печатном издании пользователь должен заложить текущую страницу, найти раздел, на который указывает ссылка, прочесть его и вернуться к заложенному месту. В электронном же издании эти операции автоматизированы и их выполняет компьютерная программа-браузер. И это их существенное преимущество.

Для организации Закладкапереходов необходимо нечто, напоминающее закладки в печатном издании. Такие закладки, на которые может быть организована ссылка, реализуются с помощью параметра NAME уже упоминавшегося тега <А>. Параметр NAME позволяет определить имя закладки стем, чтобы в дальнейшем адресоваться именно к ней. Например, изданного параграфа мы адресовались к § 2.1 и § 2.3. Чтобы такие переходы можно было осуществить в электронном учебнике, к названиям таких параграфов надо добавить закладки:

<А NAME=paragraph_2-l><А NAME=paragraph_2-3>,

а в оглавлении записать названия этих параграфов внутри тега-контейнера <А>:

<A HREF='#paragraph_2-l'> 2.1. Общая структура гипертекстового документа, заголовок и тело документа, теги оформления заголовка </А>,

<А HREF=Yl#paragraph_2-3> 2.3. Оформление списков терминов и определений </А>.

Когда такие закладки имеются, переходы к ним можно было бы оформить не только из оглавления, но и из любого другого места электронного издания. Вместо указания в скобках (см. § 2.1) можно было бы вставить конструкцию с тегом-контейнером, а именно:

<А HREF='#paragraph_2-l'> (см. § 2.1) </А.

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

Ссылки могут указывать и на специальные виды документов, например, на аудио- или видеофайлы или анимационные файлы в GIF-формате. Браузер может уметь или же не уметь работать с указанным специальным типом документа. Скажем, все современные браузеры умеют работать с анимацией в формате GIF89a, часто встречающейся на страницах в сети Интернет. Ссылка на такой файл приводит к появлению на страницы «движущегося» изображения. Если же браузер не умеет работать со специальным документом (не распознает тип принятого документа), он обратится кдругим программам на компьютере пользователя. Если нужная программа будет обнаружена, браузер передаст полученный документ этой программе для его обработки. Скажем ссылка на видеофайл формата AVI (см. § 3.5, § 4.5, § 5.5), может привести к запуску программы для демонстрации видеофайлов. В результате видеофайл будет показан в специальном дополнительном окне.

В заключение несколько слов о включении Комментарийкомментариев в HTML-документ. Комментарий может состоять из любого числа строк и слов, расположенных внутри контейнера из двух тегов: открывающего текст комментария - <!- и завершающего этот текст––->. Текст комментария не отображается в окне браузера, поэтому его можно рассматривать как личные заметки авторов или редакторов в процессе работы над изданием. В то же время, если не убрать комментарий из окончательного текста издания, то он принципиально становится доступным и для читателей.

Другой тег-контейнер для записи комментариев - <СОММЕМТ> - поддерживается только браузером MS Internet Explorer и не нашел широкого применения.

2.6.
Оформление таблиц

ТаблицаТаблицы достаточно широко применяются в электронной документации, причем для Web-страниц они используются не только в традиционном смысле, как метод упорядоченного представления данных, но и для форматирования самих этих страниц. Описание таблицы на языке HTML размещается внутри тела документа, т. е. в контейнере <BODY> и </BODY>. Внутри документа допускается любое число таблиц, причем некоторые из них могут быть вложенными. Каждая таблица создается в пределах контейнера <ТАВLЕ> и </ТАВLЕ>, где размещается описание структуры самой таблицы и ее содержимое.

Каждая строка таблицы размещается после тега <TR> (Table Row). Каждая ячейка таблицы в пределах строки оформляется тегом <ТН> (Table Header) - для заголовочной части таблицы или <TD> (Table Data) - для ячеек, в которых размещаются данные. В заголовочной части по умолчанию применяется полужирный шрифт и выравнивание по центру. Для отображения данных по умолчанию используется нормальное (светлое) начертание и выравнивание влево. Можно отметить, что для всех тегов, перечисленных в этом абзаце, закрывающий тег не обязателен, т. е. он может быть опущен.

Количество строк в таблице определяется количеством строчных тегов <TR>, а число столбцов - максимальным количество тегов <ТН> или <TD> в одной из строк. Строкой считается все то, что следует после очередного тега <TR> и до следующего такого тега. Для ячейки таблицы, не содержащей данных, надо использовать пустой контейнер <TD> и </TD>. Если пустые ячейки расположены в конце строки, то их описание может быть опущено - браузер самостоятельно оставит необходимое число ячеек пустыми.

Таблица может иметь название - то, что в редакционной практике называется тематическим заголовком (в отличие от нумерационного), причем если в печатном издании заголовок обязательно расположен над таблицей, то в электронном он может быть расположен как сверху, так и снизу. Заголовок расположен внутри контейнера <CAPTION> и </CAPTION>. Указанный контейнер должен быть помещен внутрь тега-контейнера <ТАВLЕ>, но вне области описания тегов <TR>, <TH> или

<TD>. Последняя спецификация HTML рекомендует размещать тег-контейнер <CAPTION> сразу после открытия таблицы, т. е. после тега <TABLE> и до первого тега <TR>.

В теге <CAPTION> первоначально был предусмотрен один необязательный параметр ALIGN, который предназначался для вертикального выравнивания и мог принимать одно из двух значений ТОР (по умолчанию) или BOTTOM. Затем выяснилась необходимость и горизонтального выравнивания стремя стандартными параметрами LEFT, RIGHT и CENTER. Однако нельзя в одном теге дважды использовать один и тот же параметр. Поэтому в современных версиях языка HTML параметр ALIGN (по умолчанию ALIGN=LEFT) оставлен для выравнивания по горизонтали, а вертикальное выравнивание (точнее - размещение заголовка над или под таблицей) осуществляется с помощью параметра VALIGN.

В теге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN, HEIGHT и BACKGROUND. Параметр BORDER управляет отображением рамки вокруг каждой ячейки таблицы (т. е. задает вертикальные и горизонтальные линии сетки) и вокруг всей таблицы, причем его значение задаеттолщину рамки в пикселах вокруг всей таблицы, а само наличие этого параметра задает линии сетки. Значение параметра BORDER появилось лишь в версии 3.2 спецификации HTML, до это го тол щи на рамки вокруг таблицы не регулировалась.

Параметр CELLSPACING задает расстояние между смежными по горизонтали и вертикали ячейками, причем это расстояние задается в пикселах, т. е. внутри каждой ячейки создается нечто вроде рамки и лишь при CELLSPACING=0 эти рамки отдельных ячеек сливаются в единую сетку. Параметр CELLPADDING определяет расстояние между рамкой вокруг ячейки и данными внутри ее, т. е. величину отступа символов от рамки. При значении CELLPADDING=0 текст может касаться рамки, что в плане дизайна едва ли можно приветствовать. По умолчанию значение CELLSPACING=2, a CELLPADDING=1, в этом случае расстояние между данными в соседних ячейках будет равно б пикселам.

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

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

Параметр ALIGN задает горизонтальное выравнивание таблицы в окне просмотра браузера. Возможны два значения этого параметра: LEFT и RIGHT, каждый из которых обеспечивает обтекание таблицы текстом документа с противоположной стороны. Это соответствует оборочной таблице в печатном издании. По умолчанию параметр ALIGN принимает значение LEFT. Если параметр ALIGN опущен, то текста рядом с таблицей не будет вообще, т. е. таблица будет форматной или полосной (когда она занимает всю страницу по вертикали), если использовать термины, принятые в печатных изданиях. Значение параметра ALIGN=CENTER не предусмотрено. Однако если мы хотим ориентировать таблицу по центру, можно пойти другим путем: заключить контейнер <TABLE> n</TABLE>, который описывает всю таблицу целиком, в контейнер <CENTER> и </CENTER>. Напомним, что последний имеет уровень блока, т. е. форматирует любое количество данных, размещенных внутри его (см. § 2.2).

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

<TABLE ALIGN=LEFT WIDTH=40% BORDER=5 >

<TR><TH ALIGN=RIGHT> Фамилия </ТН><TH ALIGN=RIGHT> Оценка</TH>

<TR><TD ALIGN=RIGHT> Иванов A.H. </TD><TD ALIGN=RIGHT>

4 </TD>

<TR><TD ALIGN=RIGHT> Сергеев И.Д. </TD><TD ALIGN=RIGHT>5 </TD>

<TR><TD ALIGN=RIGHT> Лавров В.В. </TD><TD ALIGN=RIGHT> 3</TD>

</TABLE>

Пример отображения браузером документа, включающего в себя приведенный выше фрагмент, показан на рис. 2.8Рис. 02.08.. На рисунке хорошо видна рамка вокругтаблицы и то, что таблица выровнена влево, а справа обтекается текстом. В качестве текста использован фрагмент второго абзаца, начинающегося на данной странице. Следует обратить внимание на то, что хотя вся таблица выровнена влево, данные в каждой строке выравниваются вправо. Формально можно было бы в каждой ячейке выравнивать текст по-своему. Однако визуально это выглядело бы очень неприглядно.

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

Параметр BACKGROUND, который уже был показан в примере, приведенном выше, также может использоваться как в теге <ТАВLЕ>, так и в тегах <ТН> и <TD>, определяющих характеристики отдельных ячеек таблицы. Во всех случаях он определяет фоновый рисунок с помощью параметра HREF. В последней версии спецификации HTML в теге <ТАВLЕ> появился параметр COLS, задающий общее число колонок в таблице. Эта дополнительная информация ускоряет процесс построения таблицы браузером.

При создании заголовочной части таблицы, реже боковика и прографки (основной части таблицы, где размещаются данные), возникает потребность в объединении нескольких ячеек по горизонтали (в строке) или по вертикали в единое целое. Для этого используются параметры ROWSPAN и COLSPAN, первый из которых объединяет несколько строк, а второй - столбцов в одну ячейку. Пример описания такой таблицы приводится ниже.

<TABLE BORDER=10 SELLSPACING=3 CELLPADDING=4 WIDTH=80%>

<CAPTION><H4> Объединение ячеек в заголовочной части</Н4>

<TR><TH ROWSPAN=2>3aголовок </TH><TH COLSPAN=2> Заголовок 2 </ТН>

<TR><TH>Заголовок 2-1</ТН><ТН>Заголовок 2-2 </ТН>

<TR ALIGN=CENTER><TD> 1 <TD> 2 <TD> 3

</TABLE>

Показанный ниже рис. 2.9Рис. 02.09. построен на основании HTML-документа, в теле которого содержится приведенный выше контейнер <TABLE> и </TABLE> со всем его содержимым. По сравнению с таблицей, показанной на рис. 2.8Рис. 02.08., здесь с помощью тега <CAPTION> добавлен тематический заголовок, выровненный по центру таблицы. В таблице хорошо видны рамки ячеек и рамка вокруг таблицы в целом. В ячейке «Заголовок 1» объединены две строки, а в ячейке «Заголовок 2» - два столбца, что соответствует исходному HTML-коду. В третьей строке, как это часто делают для длинных узких таблиц, указаны номера колонок, что позволяет при переносе на следующую полосу не повторять заголовка целиком. Отметим, что используя параметры ROWSPAN и COLSPAN можно составить многоуровневые заголовки таблиц любой степени сложности.

2.7.
Фреймовая структура электронного издания

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

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

  • для представления информации в нескольких смежных областях окна просмотра браузера, каждая из которых просматривается независимо, чтобы иметь возможность сопоставить эту информацию;

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

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

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

Принципиальное отличие HTML-кода, задающего фреймовую структуру, состоит в том, что вместо тега <BODY> в нем используется тег-контейнер <FRANESET>, параметры которого и определяют разбиение площади окна браузера на отдельные участки или области. Для этого у тега <FRAMESET> используется два параметра: ROWS и COLS. Параметр ROWS делит окно браузера на горизонтальные полосы, a COLS - на вертикальные. Размеры этих полос могут устанавливаться в абсолютных единицах - пикселах и в относительных - процентах или пропорциональных единицах. Первые два способа задания уже рассматривались ранее и не требуют дополнительных комментариев, третий же способ использует количество звездочек (*), каждая из которых представляет одну часть целого, величина этой части в данном случае определяется как высота окна браузера, деленная на суммарное количество звездочек под знаком параметра ROW. Все три способа деления окна на полосы иллюстрируется приведенными ниже примерами:

<FRAMESET ROWS='10%,80%,10%'>

<FRAMESET ROWS='60,480,60'>

<FRAMESET ROWS='*,8*,*'>.

Все три варианта с тегом <FRAMESET> описывают деление экрана на три горизонтальные полосы, из которых верхняя и нижняя одинаковой ширины, а средняя в восемь раз шире каждой из них. Аналогичным образом описывается и деление на вертикальные полосы с помощью параметра COLS. Для параметров ROWS и COLS возможен и смешанный вариант задания значений, когда используются два или даже все три способа одновременно. Например:

<FRAMESET COLS='70,4*,*,15%'>.

Тег задает деление окна на четыре колонки, первая из которых имеет ширину в 70 пикселов, последняя - 15% от ширины окна, ширина третьей колонки составляет 1/5, а второй - 4/5 от оставшейся части ширины окна.

Внутри контейнера <FRAMESET> и </FRAMESET> могут использоваться лишь вложенные такие же контейнеры или теги <FRAME>, которые определяют каждый одиночный фрейм. Кстати, в теле документа может быть несколько расположенных последовательно тегов-контейнеров <FRAMESET>, в каждом из которых могут быть и вложенные аналогичные

контейнеры. Практически же такие конструкции используются крайне редко. Тег <FRAME> размещается внутри контейнера <FRAMESET> и </FRAMESET>, причем количество тегов <FRAME> внутри этого контейнера должно в точности совпасть с число отдельных фреймов, т. е. каждый фрейм должен быть описан своим тегом <FRAME>. Тег <FRAME> содержит шесть параметров, а именно: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.

Наиболее важный из перечисленных параметров SRC определяет URL или адрес документа, который изначально загружается в данный фрейм. Обычно это HTML-документ, содержащий и заголовочную часть, и тело. Параметр NAME позволяет присвоить этому фрейму уникальное (не повторяющееся) имя, которое может использоваться для адреса циикданному фрейму. В теге <А>, который рассматривался в § 2.5, для адресации к фреймам используется специальный пара метр TARGET, значением которого является имя соответствующего фрейма. Проиллюстрируем сказанное примером:

<FRAME SRC='maintenance.htm' NAME='main_frame'>

<A HREF='main_doc.htm' TAR6ET='main_frame'> Основной документ </A>.

В представленном примере в основной фрейм (имя этого фрейма - main_f rame) исходно был загружен документ maintenance.htm, т. е. оглавление электронного издания. Если же подвести указатель мыши к словам «Основной документ», которые являются указателем ссылки, и щелкнуть левой кнопкой, то в этот фрейм будет загружен новый документ под названием main_doc.htm, который находится в том же самом каталоге и представляет собой содержательную часть данного издания. Таким образом, присвоение фрейму определенного имени позволяет в дальнейшем загружать в него документы.

Параметры MARGINWIDTH и MARGINHEIGHT тега <FRAME> позволяют установить ширину полей фрейма по ширине и высоте. Отметим, что левое и правое поле имеют одинаковую ширину. То же самое можно сказать и про верхнее и нижнее поля. Значение этих параметров задается в абсолютных единицах- пикселах. Под полями здесь подразумевается свободное пространство, где не могут присутствовать иллюстрации и текст (как и в печатном издании). Минимальное значение этих параметров, устанавливаемое по умолчанию, равно 1 пикселу.

Если содержимое фрейма не помещается в отведенной части окна браузера, для него будутавтоматически создаваться полосы прокрутки по нужной координате. Для управления этим процессом служит параметр SCROLLING, который может принимать одно из трех допустимых значений: Yes, No и Auto. Последнее значение устанавливается по умолчанию. Значение No запрещает создание полос прокрутки, a Yes приводит к обязательному их созданию, независимо оттого, нужны они или нет.

Обычно пользователь может самостоятельно изменять размеры фреймов, точно так же, как и размеры окна браузера, где они размещаются. При таких операциях может нарушаться оптимальное соотношение между размерами фреймов и ухудшаться восприятие информации с экрана компьютера. Для того, чтобы предотвратить эти действия пользователя, служит параметр NORESIZE. Для этого параметра не предусмотрено каких-либо значений, но само его использование в описании одного из фреймов запрещает не только изменение размера этого фрейма, но и любого смежного с ним. Приведем несколько примеров изданий с использованием фреймовых структур. Первый пример задает структуру из пяти фреймов, которая образуется в результате деления окна браузера на три горизонтальные полосы, средняя из которых делится еще и на две колонки. Ширина нижней полосы, как следует из строки 3 HTML-кода, составляет 50 пикселов, а верхней - восьмую часть от высоты оставшейся области окна браузера. Средняя полоса разделена на узкую полоску слева и вчетверо более широкую оставшуюся часть (см. строка 5 HTML-кода). Наконец, эта оставшаяся часть поделена пополам по горизонтали (см.строка 7 HTML-кода).

<HTML><HEAD><TITLE>Цифровая обработка изображений</TITLE>

<МЕТА NAME='Author' СОNTENT='В.А.Вуль'></HEAD>

<FRAMESET ROWS='*,7*,50'>

<FRAME SRC='zag.html'scrolling='no'>

<FRAMESET COLS='20%,80%'>

<FRAME SRC='ogl.html'>

<FRAMESET ROWS='*,*'>

<FRAME SRC='lg.html' NAME='gl'>

<FRAME SRC='2g.html' NAME='g2'>

</FRAMESET></FRAMESET>

<FRAME SRC='inf.html' scrolling='no'>

</FRAMESET>

</HTML>

Полученная в результате структура экрана показана на рис. 2.10Рис. 02.10.. Оба фрейма, в которых выводится содержимое электронного издания, имеют наибольшие размеры. В большинстве случаев содержание можно выводить в один большой фрейм, в этом же конкретном случае их два, что позволяет в одном изучать конкретный графический пакет PhotoShop, а в другом - общие методы обработки цифрового изображения, используемые в данном конкретном случае, например сжатие изображения.

Если пронумеровать расположенные на экране фреймы, присвоив им номера с 1-го по 5-й, то можно заметить, что содержание 1-го, 2-го и 5-го фреймов не изменяется: в 1-й постоянно загружен HTML-файл, отображающий заголовок документа (см. строка 4 исходного кода), в 5-й - информация об учебном заведении и авторе электронного пособия (чтобы можно было посмотреть другие учебнике на сайте uprint.spb.ru или по электронной почте связаться с автором), а во второй - файл оглавления (см. строка б исходного кода). В 3-м и 4-м фреймах выводятся параграфы 1-й и 2-й глав: в 3-м фрейме выводится § 1.1, ссылка на который во фрейме 2 выделена другим цветом как уже использованная, а во фрейме 4 отображается § 2.1. Таким образом, из одного фрейма с помощью ссылок осуществляется управление информацией в двух других фреймах.

Отметим, что специалисты по педагогике и психологии образования считают, что не следует отображать на экране более 3-х - 4-х фреймов, в противном случае ухудшается процесс восприятия информации с экрана. Несколько подробнее на этом мы остановимся в главе 9, а здесь приведем следующий варианттого же самого электронного учебного пособия, но с лаконичной 2-фреймовой структурой. Исходный HTML-код для него:

<html><head><title>Учебник по графике</title></head>

<frameset cols='20%,*'>

<frame пате='Навигация' target='main' scrolling='auto' src='naviagation.htm' noresize>

<frame name='main' src='content.htm' target='main'><noframes><body><р>Ваш браузер не поддерживает фреймы </р></body></noframes></frameset></html>.

Соответствующая этому коду структура электронного учебника представлена на рис. 2.11Рис. 02.11.. На рис. 2.11Рис. 02.11. отсутствуют фреймы заголовка и общей информации, а содержательная часть представлена в одном фрейме вместо двух. Каждый читатель может сам оценить, какая структура ему больше нравится, и попытаться сформулировать причины этого. Здесь первый фрейм назван «Навигация» (см. строка 3 исходного кода), а второй - «main», т. е. главный (см. строка 5 исходного кода). При начальной загрузке в главном фрейме выводится оглавление, так как во фрейме «Навигация» названия разделов даны в сокращенной форме, чтобы уменьшить протяженность этого фрейма по вертикали.

Основная адресация производится из фрейма «Навигация», но ссылки работают и из оглавления в главном фрейме. Для возврата в оглавление во фрейме «Навигация» есть специальная кнопка «Назад в оглавление». Во фреймах сделан фоновый рисунок, улучшающий дизайн издания. Размеры фреймов нельзя изменить (см. строка 4 в исходном коде).

Из других отличий отметим вставку в исходный код строк б и 7 для того случая, когда браузер пользователя не поддерживает фреймовой структуры. В этом случае будет выдано сообщение «Ваш браузер не поддерживает фреймы», так как тег-контейнер <NOFRAMES> содержит внутри контейнер <BODY> и </BODY>, распознаваемый всеми без исключения браузерами, в результате чего они выводят в окне содержимое этого контейнера. При отсутствии этих двух контейнеров такой браузер выдал бы сообщение об ошибке или же, что еще хуже, не вывел бы ничего в своем окне. Тег-контейнер <NOFRAMES> предусмотрен специально для такого случая.

Из других замечаний можно указать, что звездочка (*) во второй строке исходного кода интерпретируется как «оставшаяся часть», вместо нее можно было бы написать 80% - и ничего бы не изменилось. Еще раз хочется обратить внимание на особенности навигации при использовании фреймов иначе - на взаимодействие фреймов. В ссвязистем, что во фрейме «Навигация» в качестве значения параметра «TARGET» указано «main» (см. строка 3 исходного кода), то все ссылки из фрейма «Навигация» будут загружать документы во фрейм «main». Кнопка во фрейме «Навигация» играетту же роль, что и изображение - указатель ссылки. Наконец, рисунки в этом учебнике выводятся в плавающих окнах, которые можно расположить так, как удобно пользователю. Пример вывода рисунка в плавающем окне в левой верхней части окна браузера показан на рис. 2.12Рис. 02.12..

2.8.
HTML-формы

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

В Язык HTMLязыке HTML для задания форм используется теги <FORM> и </FORM>. Этот контейнер размещается внутри тела HTML-документа, причем таких контейнеров может быть несколько, но вложений их один в другой не допускается. Тег <FORM> может содержать несколько параметров, а именно ACTION, METHOD, ENCTYPE. Некоторые браузеры поддерживают и другие параметры, помимо перечисленных трех стандартных. Первый из параметров задает адрес (URL) CGI-программы, которая будет обрабатывать данные этой формы. Это единственный обязательный параметр тега <FORM>.

Второй параметр (METHOD) определяет способ пересылки данных, содержащихся в форме, от браузера к Web-серверу. Он принимает два возможных значения: GET (по умолчанию) и POST. Значение METHOD=«POST» используется в случае необходимости пересылки на сервер определенного файла, который присоединяется к содержимому формы.

Параметр ENCTYPE определяет медиа-тип, используемый для кодирования и пересылки содержимого формы. Обычно его называют MIME-типом, где MIME-это аббревиатура, которая расшифровывается как Multipurpose Internet Mail Extension (многоцелевое расширение для Интернет-почты). Именно кодирование в соответствии со стандартом MIME позволяет безошибочно пересылать файлы, присоединяемые к HTML-форме.

Для создания отдельных полей внутри контейнера <FORM> и </FORM> используются теги <INPUT>, <SELECT> и <TEXTAREA>. Первый из этих тегов употребляется чаще других и обеспечивает многочисленные возможности ввода информации. Так, с его помощью можно осуществить ввод текста различного назначения, создать группу элементов-переключателей, одиночные кнопки для выполнения некоторых стандартных операций (например, сброс введенных данных), поля для установки флажков, поле для ввода имени файла, присоединяемого к форме.

Тег <SELECT> используется для организации компактной структуры для вывода одного варианта из нескольких, задаваемых в виде списка прокрутки. А тег <TEXTAREA> создает внутри формы поле для ввода многострочного текста в виде прямоугольной области, снабженной при необходимости полосами прокрутки. Кратко рассмотрим использование всех этих тегов.

Тег <INPUT> содержит два обязательных параметра: TYPE, который задает тип поля ввода, и NAME, с помощью которого имя переменной, соответствующей этому полю ввода, передается CGI-программе.

Параметр TYPE может принимать несколько значений. Одно из этих значений TYPE=«TEXT». В этом случае в форме создается узкая прямоугольная область (фрагмент строки) для ввода текста. Причем при этом значении параметра TYPE в теге INPUT могут использоваться три дополнительных параметра, а именно: MAXLENGTH=<число>, который определяет максимальное число вводимых символов, SIZЕ=<число>, задающий количество отображаемых в форме символов, и VALUE, который определяет значение текстового поля по умолчанию.

Другой вариант текстового поля - это TYPE=«PASSWORD». В этом случае вводимые символы отображаются в форме звездочками. Однако реальная безопасность передаваемого пароля не обеспечивается, так как на сервер эта строка передается в незашифрованном виде, т. е. открыто.

Еще одно значение TYPE=«FILE», причем в этом случае одновременно сполем для ввода текста (имени локального, т. е. размещенного на компьютере клиента, файла) в форме создается кнопка с подписью BROWSE (просмотр). Файл, выбираемый в процессе просмотра (локальный адрес его может быть сразу введен в поле), подсоединяется к содержимому формы при ее пересылке на сервер. Для корректного выполнения этой операции должны быть правильно заданы параметры формы: METHOD=«POST» и ENCTYPE=«MULTIPART/FORM-DATA». В противном случае вместо содержимого файла на сервер будет передано только его имя.

Значение TYPE=«CHECKBOX» создает поле ввода одного символа-флажка или переключателя типа «включено» - «выключено». Такие поля могут объединяться в группы путем задания для всех одного имени (NAME). Используется параметр VALUE, который передает на сервер выбранные переключатели. Может присутствовать также параметр CHECKED, указывающий, что определенное значение соответствующего элемента является выбранным по умолчанию.

Значение TYPE=«RADIO» определяет структуру, подобную многопозиционному переключателю, т. е. набор из нескольких выключателей, один (и только один) из которых включен в любой отрезок времени. Каждый выключатель оформлен в виде круга, внутри которого при его выборе появляется точка. Здесь строковая переменная VALUE передает на сервер значение выбранной кнопки, а параметр CHECKED устанавливает значение по умолчанию.

Значение параметра TYPE=«RESET» или же «SUBMIT» соответственно отменяет все введенные в форму значения или же пересылает содержимое формы на сервер. В обоих случаях в форме отображаются кнопки с соответствующим и надписями. Надписи на кнопках можно русифицировать, задав значение параметра VALUE равным «ОТМЕНА» или же «ОК» («ПЕРЕСЫЛКА»). Возможно использование значения параметра TYPE=«IMAGE». В этом случае создается графическое изображение, аналогичное кнопке SUBMIT. Адрес изображения задается стандартным параметром SRC=<URL файла-изображения>, а способ выравнивания значением параметра ALIGN.

Иногда вместо тега INPUT используется контейнер <SELECT> и </SELECT>, который позволяет организовать выбор значений в пределах спискового окна. Это обеспечивает экономию пространства формы. Пример контейнера:

<SELECT NАМЕ='имя поля' SIZE=[число видимых элементов списка]>

<OPTION VALUE='значение 1-го элемента'> значение элемента

<OPTION VALUE='значение 2-го элемента'> значение элемента

<OPTION VALUE='значение 3-го элемента'> значение элемента

</SELECT>

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

Внутри формы может использоваться и еще один контейнер, а именно с тегом <TEXTAREA>. Он обеспечивает ввод многострочного текста в прямоугольное окно. Параметры этого тега: NAME - для задания имени соответствующей переменной, ROWS и COLS - для определения размера прямоугольного окна, внутри которого набирается нужный текст. Может быть задан текст, выводимый внутри этого окна по умолчанию.

В качестве примера можно остановится на форме сервера www.rambler.ru, которая выводится на браузере клиента, желающего получить бесплатный почтовый адрес. На рис. 2.13Рис. 02.13., представлена такая форма в несколько усеченном формате. Как видно на рисунке, большинство полей - текстовые однострочные, задаваемые тегом INPUT и значениями параметра TYPE, равным TEXT (E-mail, «Имя», «Фамилия», «Возраст») и PASSWORD («Введите пароль» и «Подтвердите пароль»). В состав формы включены два переключателя: для указания пола клиента и его юридического статуса (физическоелицо или представитель юридическоголица). Для сокращения размеров формы (она и так получилась довольно большой) в ней используются четыре списковых окна с одним единственным видимым элементом. Это реализуется с помощью тега-контейнера <SELECT> со значением параметра SIZE=1.

Наконец, в форме предусмотрена область для ввода текста, задаваемая с помощью тега <TEXTAREA>. Размер этой области: шесть строк и около ста столбцов. По умолчанию в этой области выводится текст юридического соглашения с клиентом бесплатной электронной почты, указывающий права и обязанности сторон. Клиент не может изменять этоттекст, он должен его прочесть и принять условия соглашения, изложенные в этом тексте, если намерен получить бесплатный почтовый адрес на этом сервере. В конце формы предусмотрена кнопка типа SUBMIT, представленная в виде графического изображения с надписью «Зарегистрироваться». Если клиент согласен с текстом соглашения, он нажимает кнопку «Зарегистрироваться» и получает бесплатный почтовый адрес на сервере RAMBLER.

2.9.
Понятие о динамическом HTML и его компонентах

Динамический HTML (DHTML)Динамический HTML (DHTML) - это не какой-то особый язык, а термин, который применяется для обозначения HTML-страниц с динамически изменяющимся содержимым. Такие страницы основаны на использовании помимо языка HTML каскадныхтаблиц стилей CSS (Cascade Style Sheets) и языка сценариев JavaScript или VBScript. Связь этих компонентов осуществляется с помощью так называемой объектной модели документа DOM (Document Object Model). При этом HTML-документ приобретает новое качество - возможность динамического изменения без перезагрузки страницы.

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

Язык программирования JavaScriptЯзык программирования JavaScript разработан фирмой NetscapeNetscape для создания интерактивных HTML-документов. Язык позволяет разрабатывать как серверные приложения, так и приложения клиентские. Первые выполняются на Web-сервере, а вторые - браузером клиентского компьютера. Для обоих типов приложений используется общее ядро, включающее стандартные объекты и конструкции, и дополнения для конкретных приложений. Сказанное иллюстрируется рис. 2.14Рис. 02.14.. Как видно на рисунке, в состав ядра входит помимо переменных и функции LiveConnect - средство взаимодействия с Java-апплетами. Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются браузером по мере отображения элементов страницы, серверные же приложения предварительно компилируются для увеличения производительности.

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

Встраивание сценариев JavaScript в HTML-страницу можно осуществить одним из четырех способов:

  • заданием операторов этого языка внутри контейнера <Script> языка HTML;

  • заданием имени файла языка JavaScript в параметре 5КСтега <Script>;

  • использованием выражений языка JavaScript в качестве значений параметров HTML-тегов;

  • путем определения обработчика событий в теге HTML.

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

<TABLE ALIGN=LEFT WIDTH=40% BORDER=5>

значение параметр WIDTH можно сделать изменяемым, заменив константу 40% переменной языка JavaScript, как это сделано в выражении, представленном ниже:

<TABLE ALIGN=LEFT WIDTH='{JWidth);' BORDER=5>,

причем значение переменная JWidth должно быть предварительно определено.

Для совместимости с языками сценариев в элементы форм языка HTML (см. § 2.8) были введены специальные параметры обработки возникающих событий. Простейшим событием может быть нажатие левой кнопки мыши Click.

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

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

Отметим, что фирма MicrosoftMicrosoft разработала язык создания сценариев VBScript, функциональные возможности которого ничем не отличаются от JavaScript. Определенным достоинством этого языка является возможность использования с небольшими доделками ранее написанных процедур на Язык Visual Basicязыке Visual Basic.

© Центр дистанционного образования МГУП