Графика и мультимедиа План
Внедренные элементы Web-страниц.
Форматы интернет-графики.
Вставка графических изображений.
Мультимедиа. Форматы файлов и форматы кодирования.
Типы MIME.
Вставка аудиоролика.
Вставка видеоролика.
Дополнительные возможности тегов <audio> и <video>.
Таблицы.
Средства навигации.
Лекция 3.
1. Web-страницы, кроме текста, могут содержать также графику и мультимедийные данные (аудио- и видеоролики). Умело примененные, они способны значительно оживить Web- сайт. И это не говоря уже о случаях, когда без графики и мультимедиа просто не обойтись. На последующих двух лекциях и лабораторных занятиях мы будем работать с графическими изображениями и мультимедийными данными. И наконец-то начнем изучение новых возможностей HTML 5, которые значительно упростят нам работу. Казалось бы, что может быть проще: описывай прямо в HTML-коде графическое изображение, аудио- или видеоклип — и все в ажуре! Но не тут-то было... Все дело в том, что графика и мультимедийные данные имеют принципиально другую при- роду, нежели текст. Из-за этого объединить их в одном файле невозможно.
Разработчики HTML нашли оригинальный выход из положения. Прежде всего, графические изображения и мультимедийные данные хранятся в отдельных файлах. А в HTML-коде Web-страниц с помощью особых тегов прописывают ссылки на эти файлы, фактически — их интернет-адреса. Встретив такой тег-ссылку, Web-обозреватель запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом и выводит его на Web-страницу в то место, где встретился данный тег. Графические изображения, аудио- и видеоролики и вообще любые данные, храня- щиеся в отдельных от Web-страницы файлах, называются внедренными элементами Web-страниц.
2. Графика. Графика на Web-страницах появилась достаточно давно. Предназначенный для этого тег появился еще в версии 3.2 языка HTML, которая вышла в 1997 году. С тех пор Всемирную паутину захлестнула волна интернет-графики. Как уже говорилось, графические изображения — суть внедренные элементы Web-страниц. Это значит, что они сохраняются в отдельных от самой Web-страницы файлах. На данный момент существует несколько десятков форматов хранения графики в файлах. Но Web-обозреватели поддерживают далеко не все. В WWW сейчас используются всего три формата, которые мы далее рассмотрим.
Нужно отметить, что все три формата поддерживают сжатие графической информации. Благодаря сжатию размер графического файла сильно уменьшается, и поэтому он передается по сети быстрее, чем несжатый файл. Формат GIF (Graphics Interchange Format, формат обмена графикой) — старожил среди "сетевых" форматов графики. Он был разработан еще в 1987 году и модерни-зирован в 1989 году. На данный момент он считается устаревшим, но все еще ши-роко распространен.
Достоинств у него довольно много. Во-первых, GIF позволяет задать для изобра-жения "прозрачный" цвет; закрашенные этим цветом области изображения станут своего рода "дырками", сквозь которые будет "просвечивать" фон родительского элемента. Во-вторых, в одном GIF-файле можно хранить сразу несколько изобра-жений, фактически — настоящий фильм (анимированный GIF). В-третьих, из-за особенностей применяемого в нем сжатия он отлично подходит для хранения штриховых изображений (карт, схем, рисунков карандашом и пр.). Недостаток у формата GIF всего один — он совершенно не годится для хранения полутоновых изображений (фотографий, картин и т. п.). Это обусловлено тем, что GIF-изображения могут включать всего 256 цветов, и потерями качества при сжатии.
GIF используется для хранения элементов оформления Web-страниц (всяческих линеек, маркеров списков и т. п.) и штриховых изображений. JPEG, в отличие от GIF, не ограничивает количество цветов у изображения, а реализованное в нем сжатие лучше всего подходит для полутоновых изображений. Однако он плохо справляется с штриховой графикой, не поддерживает "прозрачный" цвет и анимацию. К достоинствам формата PNG можно отнести возможность хранения как штрихо-вых, так и полутоновых изображений и поддержку полупрозрачности. Недостаток всего один и некритичный — невозможность хранения анимации.
Осталось назвать расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF и PNG имеют "говорящие" расширения gif и png, а файлы JPEG — jpg, jpe или jpeg.
3. Добавить на Web-страницу графическое изображение позволяет одинарный тег <IMG>. Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег <IMG>. Обязательный атрибут тега SRC служит для указания интернет-адреса файла с изображением.
Пример:
<IMG SRC="image.gif">
Этот тег помещает на Web-страницу изображение, хранящееся в файле image.gif, который находится в той же папке, что и файл самой этой Web-страницы.
Пример:
<IMG SRC="/images/picture.jpg">
Данный тег помещает на Web-страницу изображение, хранящееся в файле picture.jpg, который находится в папке images, вложенной в корневую папку Web-сайта.
Пример:
<IMG SRC="http://www.othersite.ru/book12/author.jpg">
А этот тег помещает на Web-страницу изображение, хранящееся в файле с интернет-адресом http://www.othersite.ru/book12/author.jpg, т. е. изображение с другого Web-сайта. Мы уже знаем о том, что элементы Web-страницы могут быть блочными и встроенными. Так вот, изображение, помещенное на Web-страницу с помощью тега <IMG>, — встроенный элемент. Это значит, что он не может "гулять сам по себе", а должен быть частью блочного элемента, например, абзаца.
Из этого следуют два важных вывода.
Во-первых, мы можем вставить графическое изображение прямо в абзац:
<P>Посмотрите картинку — <IMG SRC="image.gif"></P>
Во-вторых, если нам понадобится отобразить на Web-странице отдельное, не связанное ни с каким абзацем графическое изображение, нам придется поместить его в специально созданный абзац:
<P><IMG SRC="/images/picture.jpg"></P>
Настала пора попрактиковаться. Найдем подходящий графический файл и помес-тим его в папку, где хранятся файлы нашего Web-сайта. Автор выбрал изображение значка @, хранящееся в файле image.gif. Разумеется, вы можете выбрать любой дру-гой файл, но в этом случае не забудьте указать его имя в HTML-коде листинга 3.1.
Впишем в раздел тегов Web-страницы index.htm тег <IMG> и создадим описываю-щую его Web-страницу. Это будет третья Web-страница нашего Web-сайта. Ее HTML-код приведен в листинге 3.1.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег IMG</TITLE>
</HEAD>
<BODY>
<H1>Тег IMG</H1>
<P>Тег IMG служит для вставки на Web-страницу графического
изображения.</P>
<H6>Пример:</H6>
<PRE><P><IMG SRC="image.gif"></P></PRE>
<H6>Результат:</H6>
<P><IMG SRC="image.gif"></P>
</BODY>
</HTML>
Листинг 3.1.
Сохраним новую Web-страницу в файле t_img.htm и сразу же откроем в Web-обозревателе. На этой Web-странице мы увидим код примера вида
<P><IMG SRC="image.gif"></P>
а чуть ниже — результат его выполнения.
А теперь рассмотрим еще один атрибут тега <IMG>, который может нам пригодиться в дальнейшем.
Поскольку изображение хранится в отдельном от Web-страницы файле, Web-обозревателю придется послать Web-серверу еще один запрос на его получение. Web-серверу нужно найти этот файл и отправить его Web-обозревателю. Файл должен загрузиться по сети.
На все это требуется время. Если изображений на Web-странице много, все они ве-лики по размеру, а канал связи медленный, понадобится значительное время. Может случиться так, что сама Web-страница будет успешно загружена и отображена на экране, а изображения — еще нет. И Web-обозреватель вместо не загруженного еще изображения выведет на экран пустой прямоугольник. Возникают две проблемы. Во-первых, пустые прямоугольники вместо изображений выглядят некрасиво. Во-вторых, посетитель не сможет понять, что за изображение должно находиться вместо того или иного прямоугольника, и стоит ли ждать окончания его загрузки.
И если с первой проблемой справиться практически невозможно, то вторую мы вполне способны решить. Для этого тег <IMG> поддерживает необязательный атрибут ALT, с помощью которого указывается так называемый текст замены. Он будет отображаться в пустом прямоугольнике, обозначающем незагруженное изображение, пока это изображение не загрузится:
<P><IMG SRC="image.gif" ALT="Пример изображения"></P>
4. Мультимедиа — это, в первую очередь, аудио и видео. Мультимедиа в приложении к Web-дизайну — это аудио- и видеоролики, размещенные на Web-страницах.
До недавних пор разместить на Web-странице аудио- или видеоролик можно было только с помощью громадного HTML-кода, дополнительных программ. Но сейчас, с появлением HTML 5 потребуется всего один тег. Какой? Очень простой, не сложнее уже знакомого нам тега <IMG>! Форматов мультимедийных файлов существует не меньше, чем форматов файлов графических. Как и в случае с интернет-графикой, Web-обозреватели поддерживают далеко не все мультимедийные форматы, а только немногие. Но Web-обозревателю мало поддерживать только сам формат мультимедийных файлов. Он должен быть "знаком" и с форматом кодирования записанной в нем аудио- и (или) видеоинформации. В мире мультимедиа так — разные файлы одного формата могут хранить информацию, закодированную разными форматами. Более того, аудио- и видеодорожки мультимедийного файла практически всегда кодируются разными форматами. Практически все форматы кодирования мультимедийных данных поддерживают их сжатие. Благодаря этому размер мультимедийных файлов значительно уменьшается, что благотворно сказывается на скорости их передачи по сети.
Перечислим и кратко опишем все форматы мультимедийных файлов, используемые в Web-дизайне и поддерживаемые Web-обозревателями.
- WAV (WAVe, волна) — "старожил" среди мультимедийных форматов. Был разработан Microsoft в самом начале 90-х годов прошлого века для хранения аудио-данных и применяется для этой цели до сих пор. Файлы такого формата имеют расширение wav.
- OGG — более новый формат. Был разработан около десяти лет назад некоммерческой организацией Xiph.org для хранения аудио- и видеоинформации. Файлы этого формата имеют расширения ogg (универсальное расширение), oga (аудио-файлы) и ogv (видеофайлы); последние два расширения встречаются редко.
- MP4 — также "новичок". Был разработан организацией Motion Picture Expert Group (Экспертная группа по вопросам движущегося изображения; также из-вестна как MPEG) в 1998 году для хранения аудио- и видеоданных. Файлы этого формата имеют расширение mp4.
- QuickTime — формат очень старый, он старше даже WAV. Был разработан Apple в 1989 году для хранения аудио- и видеоданных. Файлы такого формата имеют расширение mov.
Теперь рассмотрим форматы кодирования аудио и видео, поддерживаемые совре-менными Web-обозревателями.
- PCM (Pulse-Coded Modulation, импульсно-кодовая модуляция) — самый простой и самый старый формат кодирования. Он даже не поддерживает сжатие информации. Служит для кодирования аудиоданных.
- Vorbis — более современный формат кодирования. Был представлен организацией Xiph.org (разработчиком формата файла OGG) в 2002 году. Используется для кодирования аудиоданных.
- AAC (Advanced Audio Coding, развитое кодирование аудио) — не очень новый формат кодирования. Был разработан организацией Motion Picture Expert Group в 1997 году. Применяется для кодирования аудиоданных.
- Theora — пожалуй, самый "молодой" формат кодирования. Он также бы разработан организацией Xiph.org несколько лет назад. Используется для кодирования видеоданных.
- H.264 — тоже очень "молод". Был представлен организациями Motion Picture Expert Group и Video Coding Experts Group (Группа экспертов по кодированию видео) в 2003 году. Предназначен для кодирования видеоданных.
Почти все эти форматы являются открытыми. Исключения — формат файлов QuickTime, принадлежащий Apple, и формат кодирования H.264, защищенный более чем сотней патентов.
Осталось выяснить, какие сочетания форматов файлов и форматов кодирования используются в Web-дизайне и какие Web-обозреватели их поддерживают. Рассмотрим таблицу (4.1.) Из книги взять.
5. По сети передаются самые разные данные: Web-страницы, графические изображения, аудио- и видеофайлы, архивы, исполняемые файлы и пр. Эти данные предназначены разным программам. К тому же, с разными данными программа, принявшая их, может поступить по-разному. Так, Web-обозреватель при получении Web-страницы или графического изображения отобразит их на экране, а при получении архива или исполняемого файла — откроет или сохранит его на диске.
Всем передаваемым по сети данным присваивается особое обозначение, однозначно указывающее на их природу, — тип MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения почты Интернета). Тип MIME присваивает данным про-грамма, их отправляющая, например, Web-сервер. А принимающая программа (тот же Web-обозреватель) по типу MIME принятых данных определяет, поддерживает ли она эти данные, и, если поддерживает, что с ними делать.
Web-страница имеет тип MIME text/html. Графическое изображение формата GIF имеет тип MIME image/gif. Тип MIME исполняемого файла — application/ x-msdownload, а архива ZIP — application/x-zip-compressed. Свои типы MIME имеют и мультимедийные файлы.
Вот о мультимедийных файлах и их типах MIME мы и поговорим.
Ранее было сказано, что современные Web-обозреватели работают с очень ограниченным набором форматов мультимедийных файлов из нескольких десятков существующих. Более того, разные Web-обозреватели поддерживают различные форматы. Поэтому Web-обозреватель должен определить, поддерживает ли он формат полученного файла, т. е. стоит ли его вообще загружать. Как это сделать, мы уже знаем — по типу MIME этого файла.
В табл. 4.2 перечислены типы MIME форматов мультимедийных файлов, поддер-живаемых Web-обозревателями на данный момент. Взять из книги. Как видим, один формат файлов может иметь несколько типов MIME. Обычно выбирается самый первый из списка как самый предпочтительный.
Вооружившись необходимой теорией, приступим к практике. Сейчас мы выясним, как HTML 5 позволит нам поместить аудио или видео на Web-страницу.
Лекция 4.
6. Для вставки на Web-страницу аудиоролика язык HTML 5 предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута SRC этого тега:
<AUDIO SRC="sound.wav"></AUDIO>
Встретив тег <AUDIO>, Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. (В последнем случае мы можем запустить воспроизведение из Web-сценария; о Web-сценариях разговор пойдет в части III.) Также он может вывести на Web-страницу элементы управления, с помощью которых посетитель запускает воспро-изведение аудиофайла, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега <AUDIO>, которые мы скоро рассмотрим.
Тег <AUDIO> создает блочный элемент Web-страницы. Так что мы не сможем вставить аудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).
По умолчанию Web-обозреватель не будет воспроизводить аудиоролик. Чтобы он это сделал, в теге <AUDIO> нужно указать особый атрибут AUTOPLAY. Это действительно особый атрибут: он не имеет значения — достаточно одного его присутст-вия в теге, чтобы он начал действовать (атрибут тега без значения):
<P>Сейчас вы услышите звук!</P>
<AUDIO SRC="sound.ogg" AUTOPLAY></AUDIO>
По умолчанию аудиоролик никак не отображается на Web-странице (что, впрочем, понятно — аудио нужно не смотреть, а слушать). Но если в теге <AUDIO> поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web-страницы, где проставлен тег <AUDIO>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
<P>Нажмите кнопку воспроизведения, чтобы услышать звук.</P>
<AUDIO SRC="sound.ogg" CONTROLS></AUDIO>
Атрибут без значения AUTOBUFFER имеет смысл указывать в теге <AUDIO> только в том случае, если там отсутствует атрибут AUTOPLAY. Если он указан, Web-обозреватель сразу после загрузки Web-страницы начнет загружать файл аудиоролика — это позволит исключить задержку файла перед началом его воспроизведения.
Чтобы проверить полученные знания в действии, нам понадобится аудиоролик поддерживаемого Web-обозревателем формата. Автор нашел у себя небольшой аудиоролик формата WAV-PCM и дал ему имя sound.wav. Вы можете использовать любой другой аудиоролик, но, разумеется, в HTML-коде листинга 4.1. придется указать имя файла, в котором он хранится.
Откроем Web-страницу index.htm и впишем в раздел тегов тег <AUDIO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.1.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег AUDIO</TITLE>
</HEAD>
<BODY>
<H1>Тег AUDIO</H1>
<P>Тег AUDIO служит для вставки на Web-страницу аудиоролика.</P>
<H6>Пример:</H6>
<PRE><AUDIO SRC="sound.wav"
CONTROLS></AUDIO></PRE>
<H6>Результат:</H6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</BODY>
</HTML>
Листинг 4.1.
7. Для вставки на Web-страницу видеоролика предназначен парный тег <VIDEO>. Ин-тернет-адрес видеофайла указывается с помощью знакомого нам атрибута SRC этого тега:
<VIDEO SRC="film.ogg"></VIDEO>
Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого видеоролика. В зависимости от указанных нами в теге <VIDEO> атрибутов, он может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления воспроизведением видеоролика.
Как и тег <AUDIO>, тег <VIDEO> создает блочный элемент Web-страницы и поддержи-вает атрибуты AUTOPLAY, CONTROLS и AUTOBUFFER:
<VIDEO SRC="film.ogg" AUTOPLAY CONTROLS></VIDEO>
Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит атрибут POSTER тега <VIDEO>; его значение указывает интернет-адрес нужного графического файла:
<VIDEO SRC="film.ogg" CONTROLS POSTER="filmposter.jpg"></VIDEO>
Ну что, попрактикуемся? Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя film.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML-коде придется указать имя его файла.
НА ЗАМЕТКУ
Если вы не найдете видеоролика подходящего формата, то можете сами создать его, перекодировав видеоролик, сохраненный в другом формате. Для этого подойдет утилита SUPER ©, которую можно найти по интернет-адресу http://www.erightsoft.com/ SUPER.html. Она поддерживает очень много мультимедийных форматов, в том числе и OGG.
Откроем Web-страницу index.htm и впишем в раздел тегов тег <VIDEO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.2.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег VIDEO</TITLE>
</HEAD>
<BODY>
<H1>Тег VIDEO</H1>
<P>Тег VIDEO служит для вставки на Web-страницу видеоролика.</P>
<H6>Пример:</H6>
<PRE><VIDEO SRC="film.ogg"
CONTROLS></VIDEO></PRE>
<H6>Результат:</H6>
<VIDEO SRC="film.ogg" CONTROLS></VIDEO>
</BODY>
</HTML>
Листинг 4.2.
8. Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому-то Web-обозревателю не "по зубам". Как быть?
Специально для таких случаев HTML 5 предусматривает возможность указать в одном теге <AUDIO> или <VIDEO> сразу несколько мультимедийных файлов. Web-обозреватель сам выберет из них тот, формат которого он поддерживает.
Если мы собираемся указать сразу несколько мультимедийных файлов в одном теге <AUDIO> или <VIDEO>, то должны сделать две вещи:
1. Убрать из тега <AUDIO> или <VIDEO> указание на мультимедийный файл, т. е. ат-рибут SRC и его значение.
2. Поместить внутри тега <AUDIO> или <VIDEO> набор тегов <SOURCE>, каждый из ко-торых будет определять интернет-адрес одного мультимедийного файла.
Одинарный тег <SOURCE> указывает как интернет-адрес мультимедийного файла, так и его тип MIME. Для этого предназначены атрибуты SRC и TYPE данного тега соот-ветственно:
<VIDEO>
<SOURCE SRC="film.ogg" TYPE="video/ogg">
<SOURCE SRC="film.mov" TYPE="video/quicktime">
</VIDEO>
Данный тег <VIDEO> определяет сразу два видеофайла, хранящих один и тот же фильм: один — формата OGG, другой — формата QuickTime. Web-обозреватель, поддерживающий формат OGG, загрузит и воспроизведет первый файл, а Web-обозреватель, поддерживающий QuickTime, — второй файл.
Отметим, что тип MIME видеофайла (и, соответственно, атрибут TYPE тега <SOURCE>) можно опустить. Но тогда Web-обозревателю придется загрузить начало файла, чтобы выяснить, поддерживает ли он формат этого файла. А это лишняя и совершенно ненужная нагрузка на сеть. Так что тип MIME лучше указывать всегда.
А если Web-обозреватель вообще не поддерживает теги <AUDIO> и <VIDEO>? В таком случае он их проигнорирует и ничего на Web-страницу не выведет. Однако мы можем указать текст замены, в котором описать возникшую проблему и предложить какой-либо путь ее решения (например, сменить Web-обозреватель). Такой текст замены ставят внутри тега <AUDIO> или <VIDEO> после всех тегов <SOURCE> (если они есть), например, как в листинге 4.3.
<VIDEO>
<SOURCE SRC="film.ogg" TYPE="video/ogg">
<SOURCE SRC="film.mov" TYPE="video/quicktime">
Ваш Web-обозреватель не поддерживает вывод мультимедийных данных
средствами HTML 5. Попробуйте другой.
</VIDEO>
Листинг 4.3.
Отметим, что мы не указали в тексте замены теги, создающие абзац. Теги <AUDIO> и <VIDEO> сами по себе — блочные элементы, так что в этом нет нужды.
Вот и все об интернет-мультимедиа и средствах HTML 5 для его поддержки.
9. Таблицы HTML создаются в четыре этапа.
На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:
<TABLE>
</TABLE>
Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно...)
На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <TR>; каждый такой тег создает отдельную строку. Теги <TR> помещают внутрь тега <TABLE> . На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег <TD> создает обычную ячейку, а тег <TH> — ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки. На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH>. Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <TD> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.
Если нам потребуется как-то оформить содержимое ячеек, мы применим уже изученные теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <EM>; в результате они будут выведены курсивом. Еще мы можем поместить в ячейку графическое изображение:
<TD><IMG SRC="picture.jpg" ALT="Картинка в ячейке таблицы"></TD>
Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по теги, создающие блочные элементы страницы. Теги <TD> и <TH> это позволяют (листинг 4.4).
<TD>
<H4>Это большой текст</H4>
<P>Это начало большого текста, представляющего собой содержимое ячейки
таблицы.</P>
<P>Это продолжение большого текста, представляющего собой содержимое
ячейки таблицы.</P>
<P><IMG SRC="picture.jpg" ALT="Иллюстрация к большому тексту"></P>
<P>А это <STRONG>долгожданное окончание</STRONG> большого текста.</P>
</TD>
Листинг 4.4.
Данный HTML-код помещает в ячейку таблицы заголовок и четыре абзаца. Причем один из этих абзацев содержит графическое изображение, а часть другого помечена как очень важная (и будет набрана полужирным шрифтом).
HTML-код, создающий таблицы, может показаться несколько громоздким. Но это плата за исключительную гибкость таблиц HTML. Мы можем поместить в таблицу любое содержимое: абзацы, заголовки, изображения, аудио- и видеоролики и даже другие таблицы.
Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.
— таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).
— размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.
— между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.
— текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.
— рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.
Таблица — всего лишь содержимое Web-страницы, а за ее вывод "отвечает" пред-ставление. Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем соз-дать соответствующее представление. Этим мы и займемся изучая CSS.
И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.
— тег <TR> может находиться только внутри тега <TABLE>. Любое другое содержи-мое тега <TABLE> (кроме заголовка и секций таблицы, речь о которых пойдет да-лее) будет проигнорировано.
— теги <TD> и <TH> могут находиться только внутри тега <TR>. Любое другое со-держимое тега <TR> будет проигнорировано.
— содержимое таблицы может находиться только в тегах <TD> и <TH>.
— ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web-обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал ).
Давайте поместим на Web-страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии (листинг 4.5).
<P>Список версий HTML:</P>
<TABLE>
<TR>
<TH>Версия HTML</TH>
<TH>Год выхода</TH>
<TH>Особенности</TH>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD>Официально не была стандартизована</TD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<TD>Первая стандартизованная версия</TD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<TD>Поддержка таблиц и графики</TD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>"Очищен" от устаревших тегов</TD>
</TR>
<TR>
<TD>4.01</TD>
<TD>1999</TD>
<TD>В основном, исправление ошибок</TD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>В разработке</TD>
</TR>
</TABLE>
Листинг 4.5.
Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — изучив CSS, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.
Заголовок и секции таблицы.
Теперь рассмотрим дополнительные возможности HTML по созданию таблиц. На практике они применяются нечасто, но иногда могут пригодиться.
Прежде всего, с помощью парного тега <CAPTION> мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега <TABLE>. Обычно тег <CAPTION> помещается сразу после открывающего тега <TABLE> — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.
Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:
— секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее "шапку";
— секцию тела, где находятся строки таблицы, составляющие основные данные;
— секцию завершения со строками, формирующими "поддон" таблицы (обычно в "поддоне" располагают итоговые данные и различные примечания).
Секцию заголовка таблицы формирует тег <THEAD>, секцию тела — <TBODY>, а сек-цию завершения — <TFOOT>. Все эти теги парные, помещаются непосредственно в тег <TABLE> и содержат теги <TR>, формирующие строки таблицы, которые входят в соответствующую секцию. Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web-странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением.
НА ЗАМЕТКУ
Тег <TABLE> поддерживает необязательный атрибут SUMMARY, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране ране, однако может использоваться другими средствами вывода Web-страниц, например, Web-обозревателями для слабовидящих, зачитывающими содержимое Web-страниц. Так или иначе, примечание к таблицам практически никогда не задается.
Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом "Список версий HTML:", который так и про-сится в заголовки. Заодно разделим таблицу на секции заголовка и тела. ("Поддона" наша таблица не имеет, так что обойдемся без секции завершения.)
В листинге 4.6 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.
<P>Пожалуй, ни убавить ни прибавить...</P>
<HR>
<P>Список версий HTML:</P>
<TABLE>
<TR>
<TH>Версия HTML</TH>
<TH>Год выхода</TH>
<TH>Особенности</TH>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD>Официально не была стандартизована</TD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<TD>Первая стандартизованная версия</TD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<TD>Поддержка таблиц и графики</TD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>"Очищен" от устаревших тегов</TD>
</TR>
<TR>
<TD>4.01</TD>
<TD>1999</TD>
<TD>В основном, исправление ошибок</TD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>В разработке</TD>
</TR>
</TABLE>
Листинг 4.6.
Объединение ячеек таблицы.
Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 4.7.
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
</TR>
</TABLE>
Листинг 4.7.
На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.(взять из книги).
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги <TD> и <TH> поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
1. Найти в коде HTML тег <TD> (<TH>), соответствующий первой из объединяемых ячеек (если считать ячейки слева направо).
2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
3. Удалить теги <TD> (<TH>), создающие остальные объединяемые ячейки данной строки.
Давайте объединим ячейки 2 и 3 таблицы. Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 4.8.
<TR>
<TD>1</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
Листинг 4.8.
Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.
Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.
1. Найти в коде HTML строку (тег <TR>), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).
2. Найти в коде этой строки тег <TD> (<TH>), соответствующий первой из объединяемых ячеек.
3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
4. Просмотреть последующие строки и удалить из них теги <TD> (<TH>), создающие остальные объединяемые ячейки.
Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 4.9 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).
<TR>
<TD ROWSPAN="2">1 + 6</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD COLSPAN="2">4 + 5</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
Листинг 4.9.
Обратим внимание, что мы удалили из второй строки тег <TD>, создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
10. Ранее мы наполняли Web-страницы содержимым: текстом, графическими изображениями, аудио- и видеороликами и таблицами. Теперь, по крайней мере, некоторые Web-страницы у нас полностью готовы. (А остальные можно сделать по образу и подобию уже созданных.)
Осталось связать эти разрозненные Web-страницы воедино — в Web-сайт. Как это осуществить? С помощью средств навигации — гиперссылок. Гиперссылка обычно выглядит как подчеркнутый фрагмент текста; если навести на него курсор мыши, он примет вид "указующего перста". При щелчке на гиперссылке Web-обозреватель загрузит Web-страницу, интернет-адрес которой указан в параметрах данной гиперссылки (целевую Web-страницу). Гиперссылка может иметь вид графического изображения или его фрагмента, такие гиперссылки сейчас очень популярны.
Текстовые гиперссылки. Начнем с самых простых — текстовых гиперссылок, которые представляют собой фрагмент текста.
Создать текстовую гиперссылку очень просто. Достаточно найти в блочном эле-менте (например, абзаце) фрагмент текста, который нужно превратить в гиперссылку, и заключить его в парный тег <A>. Интернет-адрес целевой Web-страницы указывают в атрибуте HREF этого тега.
Гиперссылка (т. е. тег <A>) представляет собой встроенный элемент Web-страницы, т. е. это часть блочного элемента, например, абзаца:
Вот гиперссылка, которая указывает на Web-страницу page125.html, хранящуюся в папке pages, вложенной в корневую папку сайта, на сайте http://www.somesite.ru:
<A HREF="http://www.somesite.ru/pages/page125.html">Страница №125</A>
А эта гиперссылка указывает на архивный файл archive.zip, хранящийся в той же папке, что и Web-страница, которая в данный момент открыта в Web-обозревателе (текущая Web-страница):
<A HREF="archive.zip">Архив</A>
Текст, являющийся гиперссылкой, можно оформлять, используя любые теги.
Пример:
<A HREF="http://www.somesite.ru/pages/page125.html">Страница
<EM>№125</EM></A>
Тег <A> поддерживает необязательный атрибут TARGET. Он задает цель гиперссылки, указывающую, где будет открыта целевая Web-страница. Так, если атрибуту TARGET присвоить значение "_blank", целевая страница будет открыта в новом окне Web-обозревателя.
Например, если мы изменим код первого примера гиперссылки таким образом (ис-правления выделены полужирным шрифтом):
<A HREF="http://www.somesite.ru/pages/page125.html" TARGET="_blank">
Страница №125</A>
"Страница №125" будет открыта в новом окне Web-обозревателя.
Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается в том же окне Web-обозревателя), нужно присвоить атрибуту TARGET значение "_self" (это его значение по умолчанию) или вообще убрать данный атрибут из тега <A>.
Имеется также возможность создать гиперссылку, которая никуда не указывает ("пустая" гиперссылка). Для этого достаточно задать в качестве значения атрибута HREF значок # ("решетка"):
<A HREF="#">А я никуда не веду!</A>
Правила отображения гиперссылок Web-обозревателем:
— обычные гиперссылки выделяются синим цветом;
— гиперссылки, по которым посетитель уже "ходил" (посещенные гиперссылки), выводятся темно-красным цветом;
— гиперссылка, по которой посетитель в данный момент щелкает (активная ги-перссылка), выводится ярко-красным цветом;
— текст любых гиперссылок подчеркивается;
— при помещении курсора мыши на гиперссылку Web-обозреватель меняет его форму на "указующий перст".
Таково поведение по умолчанию, которое мы можем изменить, создав соответствующее представление. О том, как это сделать, мы узнаем изучая CSS.
Интернет-адреса в WWW.
Рассмотрим первый пример гиперссылки из предыдущего раздела. Ее интернет-адрес таков: http://www.somesite.ru/pages/page125.html. Он содержит и интернет-адрес Web-сервера, и путь файла, который нужно получить. Поэтому он называется полным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта. Однако если гиперссылка указывает на файл, входящий в состав того же Web-сайта, что и файл текущей Web-страницы, предпочтительнее сокращенный интернет-адрес, содержащий только имя нужного файла (интернет-адрес Web-сервера и так известен Web-обозревателю).
Существуют два типа сокращенных интернет-адресов. Адреса первого типа задают путь к файлу, который нужно получить (целевому файлу), относительно корневой папки Web-сайта. Они содержат в своем начале символ / (слэш), который и говорит Web-серверу, что путь нужно отсчитывать относительно корневой папки.
Например, интернет-адрес
/page3.html
указывает на файл page3.html, хранящийся в корневой папке Web-сайта.
А интернет-адрес
/articles/article1.html
указывает на файл article1.html, хранящийся в папке articles, вложенной в корневую папку Web-сайта.
Такие интернет-адреса называют абсолютными и используют, если нужно создать гиперссылку на файл, хранящийся в "глубине" Web-сайта (скажем, в другой папке, нежели файл текущей Web-страницы).
Сокращенные интернет-адреса второго типа задают путь к целевому файлу относи-тельно файла текущей Web-страницы. Они не содержат в начале символа слэша — и в этом их важное отличие от абсолютных интернет-адресов.
Рассмотрим несколько примеров подобных интернет-адресов.
Интернет-адрес
archive.zip указывает на файл archive.zip, хранящийся в той же папке, что и файл текущей Web-страницы. Интернет-адрес chapter3/page1.html указывает на Web-страницу page1.html, хранящуюся в папке chapter3, вложенной в папку, в которой хранится текущая Web-страница.
Следующий интернет-адрес ../contents.html указывает на Web-страницу contents.html, хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница. (Обратим внимание на две точки в на-чале пути — так обозначается папка предыдущего уровня вложенности.) Такие интернет-адреса называют относительными. Их применяют, если нужно создать гиперссылку на файл, хранящийся в той же папке, что и текущая Web-страница, одной из вложенных в нее папок или папке предыдущего уровня вложенности.
ВНИМАНИЕ!
В Web-страницах, которые не должны быть опубликованы на Web-серверах, а будут открываться с диска клиентских компьютеров, следует применять только относительные интернет-адреса. Дело в том, что файловая система компьютера не знает, какую папку считать корневой, поэтому не сможет правильно интерпретировать абсолютные интернет-адреса. (Разумеется, гиперссылки, ссылающиеся на другие Web-сайты, должны содержать полные интернет-адреса.)
Разобравшись с гиперссылками и интернет-адресами, свяжем, наконец, наши Web-странички в единый Web-сайт. Чтобы нам было удобнее, создадим в папке, где хранятся все файлы нашего Web-сайта, папку tags. В эту папку перенесем все Web-страницы, описывающие теги HTML (их у нас пока что четыре), и сопутствующие им файлы (их три: изображение, аудио- и видеоролик). Файл index.htm никуда из корневой папки перемещать не будем — ведь он хранит Web-страницу по умолчанию. Вот HTML-код, создающий гиперссылку, указывающую на Web-страницу с описанием тега <AUDIO>:
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>
Остальные гиперссылки создаются аналогично.
Перейдя на Web-страницу, описывающую какой-либо тег, посетитель должен иметь возможность вернуться назад — на главную Web-страницу.
Создадим такую гиперссылку на всех Web-страницах, описывающих теги. Поместим ее в самом конце каждой Web-страницы — обычно она находится именно там. Вот так выглядит формирующий ее HTML-код:
<P><A HREF="../index.htm">На главную Web-страницу</A></P>
Осталось создать на главной Web-странице гиперссылку на Web-страницу Русской Википедии, которая содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг 4.10).
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки
гипертекста) — стандартный язык разметки документов во Всемирной
паутине. (<A HREF="http://ru.wikipedia.org/wiki/HTML"
TARGET="_blank">вся статья</A>)</P>
</BLOCKQUOTE>
Листинг 4.10.
Почтовые гиперссылки.
HTML позволяет нам создать гиперссылку, указывающую на адрес электронной почты (почтовую гиперссылку). Щелчок на ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет-адрес такой гиперссылки записывается особым образом.
Пусть мы хотим создать гиперссылку, указывающую на почтовый адрес:
user@mailserver.ru.
Согласно стандарту HTML, этот почтовый адрес должен быть записан так:
mailto:user@mailserver.ru
причем между двоеточием после mailto и собственно адресом не должно быть пробелов.
Тогда наша почтовая гиперссылка будет выглядеть так:
<A HREF="mailto:user@mailserver.ru">Отправить письмо</A>
В конце главной Web-страницы у нас приведены сведения о правах разработчиков. Давайте превратим слово "читатели" в почтовую гиперссылку. Создающий ее HTML-код будет выглядеть так:
<A HREF="mailto:user@mailserver.ru">читатели</A>
Графические гиперссылки.
Гиперссылка может быть в виде не только фрагмента текста, но и картинки или даже представлять собой фрагмент графического изображения. Вот графическими гиперссылками мы сейчас и займемся.
Изображения-гиперссылки.
Язык HTML позволяет использовать в качестве содержимого гиперссылки любой фрагмент любого блочного элемента, в том числе и графическое изображение, т. е. создать изображение-гиперссылку.
Для создания изображения гиперссылки достаточно поместить внутрь тега <A> тег <IMG>:
<A HREF="http://www.w3.org"><IMG SRC="w3logo.gif"></A>
Этот HTML-код создает изображение-гиперссылку, указывающую на Web-сайт ор-ганизации W3C. А в качестве самого изображения выбран логотип этой организации, который мы сохранили в файле в той же папке, где находится файл текущей Web-страницы.
<A HREF="mailto:user@mailserver.ru"><IMG SRC="email.gif"></A>
А этот HTML-код создает почтовую изображение-гиперссылку.
Правила вывода изображений-гиперссылок Web-обозревателем:
— изображение-гиперссылка окружается рамкой, имеющей соответствующий ги-перссылке цвет: синий — для непосещенной, темно-красный — для посещенной и т. д.;
— при помещении курсора мыши на изображение-гиперссылку Web-обозреватель меняет его форму на "указующий перст", как и в случае текстовой гиперссылки.
Рамка вокруг изображения-гиперссылки зачастую выглядит непрезентабельно, поэтому ее обычно убирают, задав соответствующее представление.
Изображения-карты.
А еще HTML позволяет превратить в гиперссылку часть графического изображе-ния. Более того, мы можем разбить изображение на части, каждая из которых будет представлять собой гиперссылку, указывающую на свой интернет-адрес. Такие изображения называют изображениями-картами, а ее части-гиперссылки — "горячими" областями.
Изображение-карту создают в три этапа. Первый этап — создание самого изображения с помощью хорошо нам знакомого тега <IMG>:
<IMG SRC="map.gif">
Второй этап — создание карты, особого элемента Web-страницы, который описывает набор "горячих" областей изображения-карты. Сама карта на Web-странице никак не отображается.
Карту создают с помощью парного тега <MAP>:
<MAP NAME="<имя карты>">
</MAP>
С помощью обязательного атрибута NAME тега <MAP> задается уникальное в пределах Web-страницы имя карты. Оно однозначно идентифицирует данную карту, может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы:
<MAP NAME="samplemap">
</MAP>
После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут USEMAP тега <IMG>. Его значение — имя привязываемой к изображению карты, причем в начале этого имени обязательно следует поставить символ # ("решетка"). (В имени, заданном атрибутом NAME тега <MAP>, символ # присутствовать не должен.)
<IMG SRC="map.gif" USEMAP="#samplemap">
На третьем этапе создают описания самих "горячих" областей в карте. Их помещают внутрь соответствующего тега <MAP> и формируют с помощью одинарных тегов <AREA>:
<AREA [SHAPE="rect|circle|poly"] COORDS="<набор параметров>"
HREF="<интернет-адрес гиперссылки>"|NOHREF
TARGET="<цель гиперссылки>">
Необязательный атрибут SHAPE задает форму "горячей" области. Обязательный атрибут COORDS перечисляет координаты, необходимые для построения этой области. Значения атрибута SHAPE:
— “rect" — прямоугольная "горячая" область. Атрибут COORDS в этом случае запи-сывается в виде COORDS="<X1>,<Y1>,<X2>,<Y2>", где X1 и Y1 — координаты верх-него левого, а X2 и Y2 — правого нижнего угла прямоугольника. Кстати, если ат-рибут SHAPE отсутствует, создается именно прямоугольная область;
— "circle" — круглая "горячая" область. В этом случае атрибут COORDS имеет вид COORDS="<X центра>,<Y центра>,<радиус>";
— "poly" — "горячая" область в виде многоугольника. Атрибут COORDS должен иметь вид COORDS="<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>...", где Xn и Yn — координаты соответствующей вершины многоугольника.
Атрибут HREF задает интернет-адрес гиперссылки — он, собственно, нам уже знаком. Он может быть заменен атрибутом без значения NOHREF, задающим область, не связанную ни с каким интернет-адресом. Это позволяет создавать оригинальные изображения-карты, например, карту в виде бублика, "дырка" которого никуда не указывает.
Также знакомый нам атрибут TARGET задает цель гиперссылки. (Конечно, указывать его имеет смысл только в том случае, если мы создаем именно "горячую" область, а не "дырку" с атрибутом NOHREF.)
Листинг 4.10 содержит полный HTML-код, создающий изображение-карту.
<IMG SRC="map.gif" USEMAP="#samplemap">
. . .
<MAP NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">
<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>
<AREA SHAPE="rect" COORDS="0,100,30,100" HREF="appendix.html"
TARGET="_blank">
</MAP>
Листинг 4.10.
Здесь мы создали две круглые "горячие" области, указывающие на Web-страницы page1.html и page2.html, многоугольную область, не ссылающуюся никуда, и пря-моугольную область, ссылающуюся на Web-страницу appendix.html. Причем последняя "горячая" область при щелчке на ней откроет Web-страницу в новом окне Web-обозревателя.
Вот и все об изображениях-картах и о графических гиперссылках вообще.
Полоса навигации.
Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.
Полоса навигации может быть расположена по горизонтали, вверху или внизу Web-страницы, или по вертикали, слева или справа. Горизонтальную полосу навигации можно сформировать с помощью обычного абзаца или таблицы с одной строкой и нужным числом ячеек (каждая гиперссылка располагается в своей ячейке таблицы). Вертикальную полосу навигации обычно формируют с помощью таблицы из одного столбца и нужного числа ячеек (опять же, каждая гиперссылка располагается в своей ячейке таблицы), набора абзацев (каждая гиперссылка представляет собой отдельный абзац) или в виде списка (гиперссылки представляют собой пункты этого списка).
Гиперссылки полосы навигации могут быть текстовыми или графическими. В последнем случае практически всегда применяют изображения-гиперссылки. Зачастую для изображений-гиперссылок реализуют особое поведение, заменяющее изображение другим при наведении на соответствующую гиперссылку курсора мыши. Полосу гиперссылок всегда выделяют, чтобы привлечь к ней внимание посетителя. Ее могут выделить цветом текста и фона, рамкой, увеличенным размером шрифта или всем вместе. Все это реализуется с помощью задания соответствующего представления Web-страницы.
Давайте создадим на главной Web-странице нашего Web-сайта полосу навигации с гиперссылками, указывающими на другие его Web-страницы: посвященную CSS, содержащую список примеров и сведения о разработчиках. Для простоты реализу-ем ее в виде абзаца, содержащего нужные гиперссылки. Поместим ее в самом верху Web-страницы, перед заголовком (листинг 4.11).
Якоря.
Напоследок рассмотрим еще одну возможность, предлагаемую нам языком HTML и способную сильно упростить посетителям чтение длинных текстов. Хотя она и не относится к гиперссылкам напрямую, но действует совместно с ними.
Это так называемые якоря (anchors). Они не указывают на другую Web-страницу (файл, адрес электронной почты), а помечают некоторый фрагмент текущей Web-страницы, чтобы другая гиперссылка могла на него сослаться. Так можно пометить отдельные главы длинного текстового документа и посетитель сможет "перескочить" к нужной ему главе, щелкнув гиперссылку в оглавлении. Очень удобно!
Якоря создают с помощью тега <A>, как и гиперссылки. Только в данном случае атрибут HREF в нем присутствовать не должен. Вместо него в тег <A> помещают обязательный здесь атрибут ID, задающий уникальное в пределах текущей Web-страницы имя создаваемого якоря. К нему предъявляются те же требования, что и к имени карты (см. раздел, посвященный картам).
И еще. Мы уже знаем, что тег <A> парный и в случае гиперссылки в него помещают текст (или изображение), который этой самой гиперссылкой и станет. Когда создают якорь, в этот тег не помещают ничего (так называемый пустой тег). По крайней мере, так поступают чаще всего.
<P>Окончание второй главы...</P>
<A ID="chapter3"></A>
<P>Начало третьей главы...<P>
. . .
Здесь мы поместили якорь с именем chapter3 перед началом третьей главы нашего воображаемого документа. Как теперь на него сослаться с другой Web-страницы? Очень просто. Для этого достаточно создать обычную гиперссылку, добавив в ее интернет-нет-адрес имя нужного нам якоря. Имя якоря ставят в самый конец интернет-адреса и отделяют от него символом # ("решетка").
Предположим, что Web-страница, содержащая якорь chapter3, хранится в файле novel.htm. Тогда, чтобы сослаться на этот якорь с другой Web-страницы, мы создадим на последней такую гиперссылку:
<A HREF="novel.htm#chapter3">Глава 3</A>
При щелчке на такой гиперссылке Web-обозреватель откроет Web-страницу novel.htm и прокрутит ее в окне так, чтобы достичь места, где находится якорь chapter3.
Если же нам нужно сослаться на якорь с той же Web-страницы, где он находится, то можно использовать в качестве интернет-адреса только имя данного якоря, предварив его символом "решетки":
<A HREF="#chapter3">Глава 3</A> На этом закончим главу о средствах навигации.
Лекция 5, 6.