В приведенном списке ссылок, при нажатии на текст гиперссылки Любимые предметы, вы перемещаетесь по тексту в то место, где сделана закладка с именем «1».
Оформление ссылок. При создании ссылок можно задать цвета ссылок, задать ссылки в виде рисунка.
Задание цвета ссылок по умолчанию устанавливает браузер в определенных цветах. Можно изменить эти цвета с помощью атрибутов: LINK – цвет неактивизированной ссылки, VLINK – цвет просмотренной ссылки, ALINK – цвет активной ссылки. Эти атрибуты вводятся в элемент тега <BODY>.
<BODY LINK="olive" ALINK="green" VLINK="red">
Однако сейчас уже используется другой способ изменения цвета ссылок (см. гл. 5), а эти атрибуты считаются устаревшими.
Ссылкой может быть не только текст, но и изображение. Для этого в контейнере <A> вставляют элемент <IMG> вместо текста ссылки или вместе с ним:
<A HREF="page1.htm"> <IMG SRC="ap1.gif"></A>
где <IMG> – одиночный тег вставки изображения, а атрибут SRC – файл графического изображения.
Пример использования изображений в качестве гиперссылки (рис. 2.2):
 |
Рис. 2.2. Пример использования графических гиперссылок
<A HREF="page1.htm"> <IMG SRC="image003.gif"
HEIGHT="50">   Ромашки</A>
<A HREF="page2.htm"> <IMG SRC="image006.jpg"
HEIGHT="50" >   Лилии</A>
2.2. Графика и мультимедиа на web-странице
Одна из наиболее привлекательных черт WWW – возможность включения ссылок на графические и мультимедийные файлы, которые делают web-страницу более привлекательной и интересной. Это могут быть значки, рисунки, фотографии, карты изображений, а также использование аудио-, видео- и анимационных данных.
2.2.1. Вставка графики в HTML -документ
Значение графических изображений в аспекте создания электронных документов невозможно переоценить, документы становятся более выразительными и яркими и будут восприниматься легче и естественнее. Однако всегда и во всем следует помнить о чувстве меры. Перенасыщение документа иллюстративным материалом будет неоправданно отвлекать внимание пользователей от истинного содержания страницы, а еще приводит к тому, что страница будет медленнее загружаться из-за наличия большого количества рисунков.
Графические компоненты web-страницы по назначению можно условно разделить на три обширные категории:
– иллюстративная графика, включая дополняющий текст фотографии, пояснительные рисунки, чертежи, схемы;
– функциональная графика, представляющая собой элементы управления (кнопки навигации, счетчики и элементы интерактивных форм);
– декоративная графика – элементы дизайна страницы, включенные в нее для красоты и не несущие информационной нагрузки (фоновые рисунки, разделители, выполненные в виде графических файлов, заголовки и многое другое).
Графические форматы. В связи с использованием Интернета для загрузки графического изображения требуется определенное количество времени. И чем меньше это время, тем удобнее пользователю. Поэтому для графических изображений сейчас используют три самых популярных формата GIF, JPEG и PNG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря которым удается значительно уменьшить размер целевого файла.
GIF -формат. В 1978 году израильские исследователи Якоб Зив и Абрахам Лемпел разработали новый для того времени алгоритм сжатия информации без потери данных (LZ78 – название проекта). Через несколько лет американский программист Терри Уэлч усовершенствовал его (LZW) и также представил свою разработку для использования всем желающим.
В 1987 году Боб Берри на основе алгоритма LZW создал принципиально новый графический формат GIF. Суть алгоритма сжатия: уменьшение размера графического файла достигается путем смешения сходных оттенков в один, информация об изображении в файле GIF записывается построчно, т. е. представляет собой массив описаний строк высотой в один пиксел. Свойства: смешение сходных оттенков в один, оперирование фиксированной палитрой 256 цветов.
GIF формат используется в HTML-документе только для отображения бизнес-графики: диаграмм, логотипов, кнопок, других элементов оформления страницы – и рисунков с палитрой цветов 256.
Еще одно свойство GIF – чересстрочность, т. е. картинка загружается не целиком, а частями (считывается 1-я, 5-я, 10-я строки, затем 2-я, 6-я, 11-я и т. д.), т. е. как бы проявляется.
В 1989 году компания CompuServe выпустила новую версию GIF89а, которая использует для создания изображения прозрачного фона методом сохранения вместе с файлом так называемого «альфа-канала» – представляющего собой маску прозрачности рисунка. Цвета, насыщенные как прозрачные, в браузере становятся невидимыми.
Другая особенность GIF89а в том, что этот формат позволяет сохранять в формуле с одним физическим заголовком несколько разных изображений, демонстрируя их на экран последовательно один за другим.
JPEG -формат. Для размещения фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG. JPEG-формат, созданный на основе одностороннего алгоритма сжатия изображений с потерей качества, кодирующий не идентичные элементы, как алгоритмы LZW, а межпиксельные интервалы.
Механизм сжатия состоит из трех ступеней.
1. Изображение преобразуется в цветовой образ LAB, раскладывающий картинку на три независимых канала: L – сохранение интенсивности цветов, А и В – для запоминания цветовой информации.
2. Компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки 8×8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация – менее заметные оттенки.
3. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хоффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой.
Декомпрессия формата JPEG осуществляется в обратном порядке.
Максимальное количество цветов, которое может содержать изображение в формате JPEG, – 16 миллионов.
PNG -формат. Этот формат был разработан в 1995 году, чтобы прийти на смену формата GIF после действий компании Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были разработаны некоторые технические характеристики, в частности улучшение качества и увеличение количества поддерживаемых цветов.
Включение графики в web -страницу. Интеграция графики в HTML-документ осуществляется с использованием одиночного тега <IMG>.
<IMG SRC="URL">
Атрибут SRC (источник) задает URL-адрес изображения (рис. 2.3).
Рис. 2.3. Пример отображения примера с тегом <IMG>
Данный атрибут относится к числу обязательных в теге <IMG> (табл. 2.2).
Таблица 2.2
Атрибуты тега < IMG>
| Атрибут | Назначение | Значение атрибута | Примеры записи |
| SRC | Адрес изображения | URL-адрес | <IMG SRC="picture.gif"> |
| ALIGN | Позиционирование объектов на экране (необязательный атрибут) | выравнивание LEFT – слева RIGHT – справа MIDDLE – по линии строки TOP – по верху BOTTOM – по низу | <IMG SRC="picture.gif" ALIGN="RIGHT"> |
| WIDTH | Ширина рисунка (необязательный атрибут) | в пикселях | <IMG SRC="picture.gif" WIDTH="50"> |
| HEIGHT | Высота (необязательный атрибут) | в пикселях | <IMG SRC="picture.gif" HEIGHT="50"> |
Окончание табл. 2.2
| Атрибут | Назначение | Значение атрибута | Примеры записи |
| ALT | Всплывающая подсказка (необязательный атрибут) | содержит некий альтернативный текст | <IMG SRC="picture.gif" ALT="фотографии цветов"> |
| BORDER | Обрамление изображения | толщина в пикселях | <IMG SRC="picture.gif " BORDER="5"> |
| VSPACE | Пустое пространство над изображением | в пикселях | <IMG SRC="picture.gif" VSPACE="20" |
| HSPACE | Пустое пространство слева и справа | Значение в пикселях | <IMG SRC="picture.gif" VSPACE="20" HSPACE="20" |
<IMG SRC="image006.jpg" ALIGN= "RIGHT" WIDHT="325"
HEIGHT="215" BORDER="5" ALT="лилия">
Использование тега в данном примере позволяет поместить изображение из файла по правой стороне окна браузера, задает размер этого изображения и помещает его в рамку (см. рис. 2.3).
2.2.2. Встраивание мультимедийных файлов
в HTML -документ
Все мультимедийные файлы создаются или обрабатываются в специализированных приложениях и сохраняются отдельно от HTML-доку-ментов. Обратившись к этим файлам из документа можно воспроизвести их содержимое на web-странице.
Для встраивания любых мультимедийных файлов в HTML-документ можно использовать два пути.
1. Создание гиперссылки на мультимедийный файл.
<A HREF="music.mp3"> В. Ободзинский</A>
При нажатии такой ссылки запускается проигрыватель звуковых файлов, установленный по умолчанию на компьютере.
2. Применение специального тега вставки мультимедийных файлов, которые загружаются вместе со страницей (EMBED и BGSOUND).
Загрузка звукозаписи занимает значительно меньше времени, чем загрузка видеофильма, поэтому использование на странице звука вместе с фотографией часто предпочтительнее, чем вставка видео.
В WWW распространено большое количество форматов звуковых файлов, которые различаются способами записи и областями применения. Наиболее распространены следующие форматы:
WAV (.wav) – стандартный формат цифрового аудио в системе Windows. Звук этого формата воспроизводится одинаково во всех Windows-приложениях.
MIDI (расширение .midi или .mid) – этот формат содержит просто запись нот, коды музыкальных инструментов и прочую информацию, по которой синтезируется музыка.
AU (.au) – стандартный формат для 8-битового звука, который является одним из старейших звуковых форматов в Интернете. Размер звуковых файлов относительно небольшой, однако качество звука невысокое.
MP 3 (.mp3) – формат звукового файла отличается высокой степенью сжатия данных за счет некоторого ухудшения качества звука, не заметного на слух.
Перечисленные форматы файлов являются загружаемыми, т. е. до начала воспроизведения они должны быть загруженными.
RealAudio (.ra) – данные этого файла могут воспроизводиться по мере поступления данных, не ожидая окончательной загрузки файла.
Для подключения звукового файла в фоновом режиме применяется тег <BGSOUND> (табл. 2.3).
Таблица 2.3
Атрибуты тега < BGSOUND>
| Атрибут | Назначение | Принимаемые значения и способы записи |
| SRC | Задает адрес файла | SRC="URL-адрес" |
| LOOP | Определяет количество повторений | LOOP="5" (1, 2, 3… и т. д. или infinite – повторение до закрытия страницы) |
| VOLUME | Уровень воспроизведения | VOLUME="–100" (от –10 000 до 0) |
| BALANCE | Настройка стереобаланса | BALANCE="0" (от –10 000 до 10 000) |
Например, запись
<BGSOUND SRC="music.mp3">
задает однократное воспроизведение звукового файла: так как атрибут loop опущен, по умолчанию его значение равно 1.
<BGSOUND SRC="music.mp3" LOOP="5" VOLUME="0" BALANCE="0">
задает пятикратное повторение звукового файла с максимальным уровнем звука (0) и нормальным стереобалансом (0).
Звуковое сопровождение в фоновом режиме не дает возможности управлять звуком. При использовании тега <EMBED> будет выполнена загрузка текстовой части документа и изображений, а затем – звукового файла. После этого в окне браузера появится панель проигрывателя с набором управляющих кнопок, и затем начнется воспроизведение звука. Тег <EMBED> может дополняться атрибутами (табл. 2.4), которые позволяют управлять воспроизведением музыкального файла.
<EMBED SRC="music.mp3" HIDDEN="true" LOOP="true">
запускает музыкальный файл с многократным воспроизведением и без отображения панели проигрывателя.
Таблица 2.4
Атрибуты тега < EMBED>
| Атрибут | Назначение | Значение и способы записи |
| SRC | URL-адрес воспроизводимого звукового (видео-) файла | SRC="music.mp3" |
| WIDTH | Ширина панели воспроизведения | WIDTH="30%" Ширина задается в пикселях или процентах |
| HEIGHT | Высота панели воспроизведения | HEIGHT="200" Высота задается в пикселях или процентах |
| AUTOSTART | Определяет порядок воспроизведения данных мультимедиа | AUTOSTART="true" – автоматический запуск звукового файла (по умолчанию) false – запуск мультимедиафайла пользователем |
| LOOP | Режим повторений | LOOP="2" (количество повторений) true – многократное воспроизведение false – однократное воспроизведение (по умолчанию) ralidrom – воспроизведение в прямом направлении, а затем в обратном |
| HIDDEN | Используется для управления отображением панели проигрывателя | HIDDEN="false" (по умолчанию) – вывод панели проигрывателя на экран true – воспроизводит звук без отображения панели проигрывателя |
С помощью уже рассмотренных элементов вставки изображений или аудиофайлов на web-странице можно разместить и видеоклип. Однако предварительно нужно учитывать объем используемых видеоматериалов, поскольку, как правило, их объем очень велик.
В Сети применяется несколько стандартных форматов видеофайлов.
MPEG (.mpeg) – обеспечивает высокое качество и является своего рода стандартом в цифровом видео. Однако файлы этого формата имеют большие размеры и работать с ними трудно.
AVI (.avi) – применяется в системе Windows для хранения и воспроизведения аудио- и видеоданных.
QuickTime (.mov или .gt) – наиболее популярный видеоформат. Этот формат имеет большое распространение в Internet, не требует длительной загрузки по сети, обеспечен множеством модулей.
SWF (.swf или .fla) – предназначен для хранения flash-анимации. Такие файлы могут содержать картинки в векторном формате, звук, мультфильмы, элементы управления, интерактивные эффекты. Для просмотра служит проигрыватель Flash Player, который встроен в последней версии Internet Explorer и Netscape.
Простейшим способом размещения видео на web-странице является внедрение видеофайлов с помощью тега <EMBED>:
<EMBED SRC="Belyi.avi" CONTROLLER="false" HEIGHT="150"
WIDTH="150">
В результате загрузки файла в окне браузера появится панель проигрывателя с набором управляющих кнопок, для воспроизведения файла необходимо нажать стартовую кнопку (рис. 2.4).
Рис. 2.4. Пример отображения загрузки видеофайла
с тегом <EMBED>
Если вы рассчитываете на просмотр вашей страницы в браузере Internet Explorer, можете для вcтавки видеоклипа воспользоваться известным тегом <IMG>. Для этого вместо атрибута SRC нужно поставить атрибут DYNSRC, значением которого является URL видеофайла.
* * *
В теоретической части второй главы мы рассмотрели гиперссылки и способы их задания, изучили, как можно использовать в качестве гиперссылки рисунок, узнали, как можно на web-страницу помещать рисунки, музыку и видеоклипы.
Практическое задание