Ранее были рассмотрены возможности HTML, которые в сумме позволяют создавать практически полноценные гипертекстовые документы. Однако если пользоваться только ранее полученными знаниями языка HTML, то у создаваемых документов будет как минимум один существенный недостаток – наличие только текстового содержимого, никаких рисунков или других графических элементов. В данной главе вы познакомитесь с тем, как можно разнообразить содержимое HTML‑документов при помощи различных нетекстовых элементов.
6.1. Линейки
Линейка – горизонтальная линия РІ РѕРєРЅРµ браузера. Для вставки линейки РІ HTML‑документ используется элемент HR. Ртот HTML‑элемент задается РїСЂРё помощи одиночного тега
и имеет следующие атрибуты:
• align – задает выравнивание линейки в окне браузера, может принимать значения left, right или center;
• noshade – булев атрибут, указывает браузеру, что линейку следует отображать плоской (без традиционной тени);
• size – численное значение, определяющее толщину линии;
• width – численное значение, определяющее ширину линейки; может задаваться как абсолютное (в пикселах) значение, так и относительное (в процентах от ширины окна браузера).
По умолчанию используются выравнивание линейки по центру и ширина линейки, равная 100 % от ширины области окна браузера, отведенной HTML‑документу.
Далее приведен небольшой пример, в котором иллюстрируется использование различных значений атрибутов для линеек (пример 6.1).
Пример 6.1. Рспользование горизонтальных линеек
<TITLE>Линейки</TITLE>
<BODY>
Линейка с настройками по умолчанию
<HR>
Линейки различной толщины
<HR size = 4>
<HR size = 10>
Плоская линейка
<HR noshade size = 10>
Линейки с различным выравниванием
<HR width = "50%" align = left>
<HR width = "50%">
<HR width = "50%" align = right>
</BODY>
Созданные в примере 6.1 линейки выглядят так, как показано на рис. 6.1.
Р РёСЃ. 6.1. Рспользование горизонтальных линеек
6.2. Рзображения
Если линейки применяются в основном для визуального отделения обособленных частей текста, то изображения могут внести в HTML‑документ элемент иллюстративности. Своеобразная вставка изображения в документ уже рассматривалась при описании HTML‑элемента BODY. Тогда указывалось изображение‑фон страницы. Теперь пришло время научиться добавлять изображения непосредственно в текст HTML‑документа.
Для вставки изображения в текст HTML‑документа используется элемент IMG. Для задания этого HTML‑элемента используется одиночный тег . Список наиболее используемых атрибутов:
• scr – задает URI изображения;
• alt – альтернативный текст, который отображается на месте изображения, если по каким‑либо причинам само изображение не может быть показано;
• border – задает толщину границы вокруг рисунка в пикселах;
• align – определяет выравнивание изображения (описание возможных значений приведено в табл. 6.1);
• height – задает высоту изображения в пикселах;
• width – определяет ширину изображения в пикселах;
• vspace – задает величину свободного пространства между изображением и текстом сверху и снизу;
• hspace – определяет величину свободного пространства между изображением и текстом справа и слева;
• name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии (поддерживается для совместимости с более ранними версиями HTML, для идентификации изображений лучше использовать атрибут id).
Среди перечисленных атрибутов элемента IMG обязательным является только атрибут scr. Значение атрибута alt задается тогда, когда нужно, чтобы пользователь, браузер которого не показывает изображения на странице (например, если отображение рисунков отключено в настройках браузера), хоть что‑то увидел на том месте, где должно быть изображение. Атрибуты height и width используются для того, чтобы браузер еще до загрузки изображения мог правильно расположить его в тексте. Кроме того, эти атрибуты можно применять для принудительного изменения (сжатия или увеличения) размера изображения.
Приведенный ниже пример 6.2 иллюстрирует использование атрибутов alt, width, height, а также атрибута border.
Пример 6.2. Вставка изображений в HTML-документ
<TITLE>Вставка изображений</TITLE>
<BODY>
<IMG src = "study.gif" border = 1> – небольшое изображение с рамкой.<BR>
<IMG scr = "image.gif" height = 200 width = 150 alt = "здесь должно быть изображение 150x200"> – это изображение не может быть загружено браузером.
</BODY>
При обработке приведенного примера браузером получится документ, показанный на рис. 6.2 (предполагается, что браузер не может найти изображение image.gif).
Рис. 6.2. Вставка изображений
Атрибут align задает положение изображения в тексте. Он может принимать достаточно большое количество значений. Значения атрибута align и описание их воздействия на положения изображения приведены в табл. 6.1.
Таблица 6.1. Положения изображения в тексте
Действие различных значений атрибута align на положение изображения приведено на рис. 6.3.
Рис. 6.3. Различное выравнивание изображений
Для большей наглядности и экономии места изображения показаны несколько уменьшенными (height=20 и width=23) и с использованием границы одинарной толщины (border=1).
Рзображения-гиперссылки
Рзображения, особенно небольшие пиктограммы Рё значки, часто используются РІ качестве графического представления гиперссылок. Создание изображения‑гиперссылки выполняется очень просто: достаточно заключить HTML‑элемент IMG внутрь элемента A, как показано ниже:
<A href = В«info.htmlВ»><IMG scr = В«info.gifВ»></A>
Рзображение‑гиперссылка обычно обводится браузером рамкой такого же цвета, что Рё цвет текста обычной гиперссылки РІ соответствующем состоянии (посещенная, непосещенная или активная).
Рзображения-карты
Рассмотрим еще один интересный способ использования изображений для навигации – создание изображений‑карт. Карта – это заданный набор областей различной формы. Заданные области карты считаются активными, и браузер работает с ними практически аналогично тому, как он работает с изображениями‑гиперссылками. Так вот, изображение‑карта – это обычное изображение с наложенной на него картой активных областей. Карту можно использовать не только с изображениями, но здесь будет рассмотрено использование карт именно с ними – так нагляднее.
Карта, используемая для изображения, может быть создана в любом документе, URI которого известен. Для создания карты используется элемент MAP (задается парными тегами ). Обычно для элемента MAP задается значение атрибута name – имя, которое используется для ссылок на созданную карту.
Внутри элемента MAP при помощи одиночных тегов (HTML‑элемент AREA) задаются активные области карты. Для каждого элемента AREA могут задаваться следующие атрибуты:
• coords – координаты активной области (количество и значение зависят от типа области, заданного атрибутом shape);
• href – URI, на который указывает гиперссылка, ассоциированная с областью;
• nohref – булев атрибут, создает неактивную область (с областью ассоциируется пустая гиперссылка);
• shape – задает тип области, может принимать значения: rect (прямоугольник), circle (круглая область), poly (многоугольник) и default (по умолчанию используется вся область карты);
• alt – альтернативный текст;
• title – текст подсказки (отображается в виде всплывающей подсказки при наведении указателя мыши на область);
• tabindex – позиция элемента карты в порядке табуляции в HTML‑документе (целое число от 0 до 32 767).
Задание набора значений атрибуту coords существенно отличается для областей различных РІРёРґРѕРІ. Значения задавать РЅРµ нужно, если используется значение атрибута shape РїРѕ умолчанию. Рначе РїСЂРё задании значений атрибуту coords нужно следовать следующим правилам.
• Если для атрибута shape установлено значение rect, то атрибуту coords задаются координаты верхнего левого и нижнего правого углов прямоугольника (например, coords="10,10,34,45").
• Если для атрибута shape установлено значение poly, то атрибуту coords задаются координаты всех вершин многоугольника. При этом лучше координаты первой вершины указать и в конце, а то вдруг разработчики браузера забыли создать автоматическое закрытие многоугольника (например, coords="10,10,34,45,50,20,10,10" – задание треугольной области).
• Если для атрибута shape установлено значение circle, то атрибуту coords задаются координаты центра и радиус окружности (например, coords="100,100,45"). Радиус можно задавать в процентах, тогда значение радиуса в пикселах будет вычислено браузером на основе размеров объекта, на который накладывается карта, при отображении HTML‑документа.
В примере 6.3 приводится один из способов использования изображения‑карты для осуществления навигации по документам.
Пример 6.3. Рспользование изображения-карты
<TITLE>Рзображения-карты</TITLE>
<BODY>
<IMG src = "pointer.gif" usemap = "#map1">
<MAP name = map1>
<!–Левый треугольник–>
<AREA
coords = "1,13,15,2,15,23,1,13"
shape = poly href = "6.1.html"
alt = "Переход к примеру 6.1"
title = "Переход к примеру 6.1">
<!–Правый треугольник–>
<AREA
coords = "48,13,34,2,34,23,48,13"
shape = poly href = "6.2.html"
alt = "Переход к примеру 6.2"
title = "Переход к примеру 6.2">
<!–Центральный прямоугольник–>
<AREA
coords = "15,2,34,24"
shape = rect href = "6.3.html"
alt = "Обновить"
title = "Обновить">
</MAP>
</BODY>
Здесь на изображение накладывается карта, состоящая из двух треугольников и одного прямоугольника. Обратите внимание на то, что для указания браузеру использовать карту в теге элемента IMG атрибуту usemap присвоено значение – URI карты. В данном случае используется карта, определенная в том же HTML‑документе. Карта может быть определена и в другом файле того же сайта или вообще в файле, находящемся на другом сервере. Тогда нужно соответствующим образом изменить относительный URI (для файла того же сайта) или указать абсолютный URI HTML‑документа, в котором определена нужная карта, например:
<IMG src = В«pointer.gifВ» usemap = В«someserver.com/mysite.html#map1В»>
Рзображение‑карта РёР· примера 6.3 выглядит так, как показано РЅР° СЂРёСЃ. 6.4.
Р РёСЃ. 6.4. Рзображение-карта
В данном случае видно, что при наведении указателя мыши на элемент карты отобразилась подсказка для соответствующего элемента, а сам указатель имеет форму, сигнализирующую о том, что он находится над гиперссылкой.
6.3. Добавление фоновой музыки
Сейчас будет кратко рассмотрен HTML‑элемент, позволяющий добавить музыку, которая будет проигрываться при открытии HTML‑документа, – элемент BGSOUND. Он задается при помощи одиночного тега
• src – URI аудиофайла (поддерживаются только форматы WAV и MID);
• loop – задает количество повторений (значения 0 или –1 используются при необходимости бесконечного воспроизведения, значения меньше –1 интерпретируются как 1), по умолчанию используется значение 1;
• volume – задает громкость воспроизведения; значения от –10 000 (минимальная громкость) до 0 (максимальная громкость, используется по умолчанию);
• balance – задает значение стереобаланса, принимает значения от –10 000 (левый баланс) до 10 000 (правый баланс); по умолчанию используется значение 0 (центральный баланс).
Ниже приведен пример 6.4, представляющий собой простейший HTML‑документ, при открытии которого начинает проигрываться музыка из файла bgsound.wma.
Пример 6.4. Проигрывание музыки при просмотре HTML-документа
<TITLE>Проигрывание музыки</TITLE>
<BODY>
<BGSOUND src = "bgsound.wma" volume = -1000>
Текст HTML-документа ...
</BODY>
Как можно было убедиться, элемент BGSOUND позволяет очень легко добавить звуковое оформление HTML‑документа. Жаль только, что этот элемент не является стандартным HTML‑элементом. К тому же он поддерживается только браузером Internet Explorer.
6.4. Простое проигрывание видео
Браузер Internet Explorer поддерживает также ряд нестандартных дополнительных атрибутов элемента IMG, при помощи которых можно очень просто организовать проигрывание видео в окне браузера. Рассмотрим эти атрибуты:
• dynsrc – URI видеофайла (поддерживается только стандарт AVI);
• loop – задает количество повторений видеоролика (полностью аналогичен атрибуту loop рассмотренного выше элемента BGSOUND).
Если задано значение атрибута src (адрес статичного изображения), то указанное изображение показывается во время загрузки видеофайла. Ниже приведен простой пример 6.5, содержащий HTML‑документ, при загрузке которого начинается воспроизведение видеоролика из файла clip.avi, причем область воспроизведения занимает все окно браузера.
Пример 6.5. Проигрывание видео в окне браузера
<TITLE>Проигрывание видео</TITLE>
<BODY>
<IMG dynsrc = "clip.avi" loop = 1 height = "100%" width = "100%">
</BODY>
6.5. Внедрение объектов
В текст HTML‑документа могут быть добавлены не только линейки, рисунки, видео и звук. Можно внедрить документы множества других приложений, построенных с использованием технологии OLE, а также элементы управления ActiveX.
Для внедрения объектов в документ используется элемент OBJECT (задается парными тегами ). При внедрении объектов с помощью OBJECT используются следующие атрибуты:
• classid – при внедрении ActiveX‑компонентов задает уникальный идентификатор класса (CLSID), строка вида clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx; при внедрении других объектов может содержать URI внедряемого объекта или другие сведения для идентификации объекта (см. приведенный далее пример с апплетом);
• codetype – если задан, то означает тип объекта, на который указывает classid; позволяет браузеру избежать загрузки объекта неподдерживаемого типа (значения см. у атрибута type);
• data – позволяет указать URI данных, необходимых для объекта; зависит от конкретного внедряемого объекта;
• type – тип данных, указанных в атрибуте data (так называемый MIME‑тип);
• codebase – задает базовый URI, относительно которого разрешаются все относительные URI, задаваемые для этого элемента OBJECT; например, если codebase равен "http://www.someserver.com/images", то значение "img1.gif", заданное для атрибута data, означает " http://www.someserver.com/images/ img1.gif ";
• standby – задает текст, который отображается браузером до окончания загрузки объекта;
• height – задает высоту внедренного объекта;
• width – задает ширину внедренного объекта.
Для элемента OBJECT поддерживаются также другие атрибуты, задающие положение и оформление объекта, аналогичные атрибутам элемента IMG. Если не указать размер в атрибутах height и width, то внедренный объект будет невидимым. Текст, заключенный между тегами , выводится браузером в случае невозможности загрузить заданный объект.
При необходимости внедрения какого‑либо конкретного ActiveX‑компонента его CLSID можно посмотреть в документации для этого компонента реестра Windows или в разделе HKEY_CLASSES_ROOT\CLSID (например, CLSID компонента RichText (компонент для редактирования текста в RTF‑формате, содержащего форматирование, рисунки и прочие объекты) равен 3B7C8860-D78F-101B-B9B5-04021C009402). Рассмотрим пример внедрения такого текстового поля в HTML‑документ (пример 6.6).
Пример 6.6. Внедрение компонента текстового поля в HTML-документ
<TITLE>Внедрение текстового поля RichEdit</TITLE>
<BODY>
<OBJECT classid = "clsid:3B7C8860-D78F-101B-B9B5-04021C009402"
width = "400" height = "300" >
Не удалось внедрить RichEdit
</OBJECT>
</BODY>
Результат внедрения текстового поля RichText в HTML‑документ (со вставленным фрагментом из редактора Microsoft Word) приведен на рис. 6.5.
Рис. 6.5. Внедренный компонент RichEdit
При помощи элемента OBJECT документы некоторых распространенных приложений могут быть также легко внедрены в HTML‑документ. Для этого достаточно указать значения атрибутов data и type, не используя атрибут classid. Например, для внедрения на страницу документа Microsoft Word достаточно следующего фрагмента (пример 6.7).
Пример 6.7. Внедрение документа Microsoft Word
<TITLE>Внедренный документ Microsoft Word</TITLE>
<BODY>
<OBJECT data = "word.doc" type = "application/msword" width = "70%"
height = "50%" border = "1">
Не удалось внедрить документ
</OBJECT>
</BODY>
Результат внедрения документа Microsoft Word показан на рис. 6.6.
Рис. 6.6. Внедренный документ Microsoft Word
Таким же образом можно внедрить видео, изображения и пр. Только нужно указать расположение внедряемого файла и его MIME‑тип (список некоторых наиболее распространенных MIME‑типов приведен в табл. 6.2).
Таблица 6.2. Некоторые MIME-типы
До этого момента мы просто внедряли в документы объекты, не выполняя никаких настроек самих объектов. В случаях, когда объектам могут понадобиться значения специальных параметров (свойств объекта), может применяться HTML‑элемент PARAM.
Рлемент PARAM задается одиночным тегом , который может использоваться только внутри элемента OBJECT. Рлемент PARAM имеет следующие атрибуты:
• name – имя свойства; список доступных имен зависит от конкретного объекта;
• value – значение свойства;
• valuetype – тип значения свойства; для этого атрибута доступны следующие варианты значений:
· data – указывает, что value содержит значение, которое может быть представлено в виде строки и в таком виде передано внедренному объекту (значение по умолчанию);
· ref – показывает, что value содержит URI какого‑то ресурса;
· object – указывает, что value содержит идентификатор (значение атрибута id) другого объекта, внедренного в страницу при помощи элемента OBJECT;
• type – если атрибуту valuetype присвоено значение ref, то задает тип (MIME‑тип) ресурса, на который указывает заданный в атрибуте value URI.
Описать все возможные свойства объектов, доступных для внедрения в HTML‑документы, просто невозможно. Таких объектов множество, да и каждый из них имеет свой собственный набор свойств. В любом случае, если вам понадобится использовать какой‑то объект, придется разыскать или примеры его использования, или документацию. Здесь же мы ограничимся небольшим примером, а именно внедрением в документ Проигрывателя Window Media с заданием значений трех его свойств (пример 6.8).
Пример 6.8. Внедрение Проигрывателя Windows Media
<TITLE>Внедрение объекта и присвоение значений его свойствам</TITLE>
<BODY>
<!–Внедрение проигрывателя Windows Media Player–>
<OBJECT CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width = "300" height = "225">
<PARAM name = "URL" value = "Clip.avi">
<PARAM name = "autoStart" value = "True">
<PARAM name = "uiMode" value = "none" >
Не удалось внедрить Проигрыватель Media Player
</OBJECT>
</BODY>
Как можно увидеть из текста примера, CLSID компонента проигрывателся равен 6BF52A52-394A-11d3-B153-00C04F79FAA6. В примере при помощи HTML‑элемента PARAM задаются значения трех свойств:
• URL – файл для открытия в проигрывателе (в нашем случае это файл Clip.avi, расположенный в той же папке, что и HTML‑документ);
• autoStart – установив значение в True, заставляем проигрыватель автоматически начинать воспроизведение;
• uiMode – установив значение этого свойства в none, убираем элементы управления проигрывателя, так что в документе будет показано только проигрываемое видео.
Кстати, этот пример хорошо показывает универсальность HTML‑элемента OBJECT, позволяющую в реальной практике отказаться от использования нестандартных возможностей элементов IMG и BGSOUND, рассмотренных выше в этой главе.