Таги, управляющие формой отображения
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации - все это делает страницы интереснее и функциональнее. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью атрибута FАСЕ=. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в броузере пользователя.
Верхние и нижние индексы [НТМL 3.0]
С помощью тагов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые таги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать таги <SUР> и <SUВ> с атрибутом FONT SIZE=.
Атрибут SIZE=
Атрибут SIZЕ= тага <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тагом <ВАSЕFОNТ SIZЕ=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3.
Некоторые броузеры не поддерживают таг <FONТ>, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать таги <Н1>, <Н2>, <НЗ> и т. д. Главное преимущество тага <FONТ> состоит в том, что он после окончания своего действия не разбивает строку, как таги <Нn>. Поэтому таг <FONТ> бывает очень полезен для изменения размера шрифта в середине строки.
Таги <ВIG> и <SMALL>
Текст, расположенный между тагами <ВIG></ВIG> или <SMALL></SMALL>, будет соответственно больше
Атрибут СОLОR=хх
Если вы хотите сделать свою страницу более красочной, то можете воспользоваться атрибутом СОLОR= в таге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя. Пока только самые популярные броузеры отображают цвет шрифта.
Пользоваться тагом <FONТ СОLОR=> для смены цвета шрифта, так же как и большинством тагов НТМL, очень просто. Заключите текст в таги <FONТ СОLОR= RED></FONТ>.
Таги, управляющие формой отображения
Таг | Значение |
<I>.....</I> | Курсив (Italic) |
<B>...</B> | Усиление ВОLD) |
<ТТ>... </TТ> | Телетайп |
<U>. </U> | Подчеркивание |
<S>...</S> | Перечеркнутый текст |
< BIG >... </ BIG > | Увеличенный фонт |
< SMALL >...</ SMALL > | Уменьшенный фонт |
< SUB >...</ SUB > | Подстрочные символы |
< SUЗ >... </ SUР > | Надстрочные символы |
Таги, характеризующие тип информации
Таг | Значение |
<ЕМ>... </ЕМ> | Типографское усиление |
<СIТЕ>...</СIТЕ> | Цитирование |
< STRONG >.</ STRONG > | Усиление |
<СODE>... </СОDE> | Отображает примеры кода (например, коды программ) |
<SАМР>... </SАМР> | Последовательность литералов |
<КВD>... </КВD> | Пример ввода символов с клавиатуры - |
<VAR>...</VAR> | Переменная |
<DFN>... </DFN> | Определение |
<Q>- </Q> | Текст, заключенный в скобки |
Все эти таги допускают вложенность и пересечение друг другом, поэтому все они имеют таг начала и конца. При использовании этих тагов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста. Использование стилей, которые подменяют настройки интерфейса, в настоящий момент проблематично.
Пример 1.5. Использование тагов, управляющих формой отображения.
<HTML>
<HEAD>
<TITLE> Главная страница</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компания.</H1>
<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания осно-ванная в
1996 году, является одним из ведущих поставщиков бытовой электроники в
России.</I></H3>
<H3 ALIGN=RIGHT><B>Основными направлениями деятельности Компании
являются</B>:
реализация бытовой электроники ведущих фирм мира через сеть магазинов;
создание сервисных центров по обслуживанию бытовой электроники;</H3>
<H3><U> Компания ищет агентов по сбыту бытовой электроники.</U></H3>
<H5 ALIGN=CENTER><TT>Контактная информация</TT>
<DL>Telephone (1
<DL>FAX (1
<DL>Почтовый адрес 123456 г. Город, ул Лесная, 106
Электронная почта
<DL>Общая информация: *****@***su
<DL>Продажи: *****@***abc. su</DL>
Copyright © 1997 Компания</H5>
</BODY>
</HTML>
Таг <DL>
Использование тага списка (Definition List: <DL>) напоминает применение отступов в обычных текстовых редакторах. Таг <DL> был создан для форматирования текста, определяющего какой-то термин. Определяемый термин записывается на одной строке, а его определение на следующей, с небольшим отступом вправо. Таг <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если у вас на странице несколько тагов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий таг </DL>. Помните, что таг <DL> сдвигает только левую границу абзаца
Таг <ВLОСKQUOTE>
Таг добавляет поля слева и справа от текста. Это полезный таг, поскольку он позволяет расположить текст компактно в центре страницы. При использовании < ВLОСKQUOTE > несколько раз текст все больше сжимается к центру.
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN =n в таге <ВОDY>. Атрибут LEFTMARGIN = задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселях. Например, таг < ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0, левое поле отсутствует.
Табуляция
Потребность в этом средстве существовала уже очень давно, но лишь недавно оно было, наконец, предложено разработчикам.. Табуляцию можно задать несколькими способами.
Самый простой - записать таг <ТАВ IDENT=n>, где n определяет число еn-пробелов перед новым абзацем. Еn-пробел - это типографская единица измерения, приблизительно равная ширине буквы n в том шрифте, который вы используете. Таким образом, таг <ТАВ IDENT=4> задает символ табуляции шириной в четыре еn-пробела.
Если вы хотите в нескольких местах применить символ табуляции заданной величины, то в том месте, где вы задаете его размер, поместите таг <ТАВ> с атрибутом ID=, например, таким образом:
<ТАВ ID="tabone" >
Теперь в любом месте страницы достаточно написать <ТАВ ТО="ТАВОNЕ">, и символы табуляции станут равными ТАВОNЕ. Соответственно можно аналогичным образом создать ТАВТWО, ТАВТНRЕЕ, ТАВFОUR и т. д.
Чтобы создать более сложный дизайн, можно применить с тагом <ТАВ> атрибут ALIGN=. При задании АLIGN=LЕFТ или ALIGN=RIGHT текст, следующий за тагом <ТАВ> (вплоть до ближайшего обрыва строки или тага), будет выровнен по левому или правому краю соответственно. При задании АLIGN=СЕNTER текст центрируется относительно табулятора на задаваемое тагом <ТАВ> число еn-пробелов.
Таг <ТАВ> можно применять для размещения и текста, и графики
Списки
Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный), нумерованный список (упорядоченный) и список определений. Таги для ненумерованных (Unordered Lists <UL>) и нумерованных списков (Ordered Lists <OL>) - это основа HTML. HTML 3.0 добавляет несколько атрибутов к тагам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты в сами таги <LI> (List Item), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.
Таг <UL>
Ненумерованный список. Ненумерованный список предназначен для создания текста типа:
первый элемент списка
второй элемент списка
третий элемент списка
Записывается данный список в виде следующей последовательности:
<UL>
<LI> первый элемент списка
<LI> второй элемент списка
<LI> третий элемент списка
</UL>
Таги <UL> и </UL> - это таги начала и конца ненумерованного списка, таг <LI> (List Item) задает таг элемента списка. В дополнение к этим тагам существует таг, позволяющий именовать списки - LН (List Header). Приведем пример отображения ненумерованного списка следующего вида:
Атрибуты маркеров в ненумерованном списке
Если вы не желаете применять одни и те же маркеры на разных уровнях вложенности, то используйте атрибут ТYРЕ=. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены таги с атрибутами стандартных маркеров
<UL TYPE =DISK> Таг создает сплошные маркеры такого типа, как в списках первого уровня по умолчанию
<UL TYPE =CIRCLE> Таг создает маркеры в виде окружностей
<UL TYPE =SQUARE> Таг создает сплошные квадратные маркеры
В HTML 3.0 вы можете вместо обычного маркера поместить GIF или специальный символ.
Атрибут РLАN=
Атрибут РLAN= создает ненумерованные списки без маркеров. Разумеется, простейший способ это сделать - воспользоваться списком определений, но если вы все же захотите вставить в список один-два маркера, то лучше применяйте данный атрибут.
Атрибут SRС=
Атрибут SRС= используется для того, чтобы задать GIF-файл вместо обычного маркера GIF, наиболее употребительный в HTML графический формат. Вместо того чтобы помещать GIF перед строкой с тегом <ВR> в конце, вы можете создать собственные изящные маркеры и затем использовать их в списке. В этом случае вы получите все преимущества ненумерованного списка и вдобавок симпатичные GIF-картинки в качестве маркеров. Атрибут SRC= можно задать в таге <UL>, определив сразу все маркеры списка, а можно указать разные GIF для разных пунктов списка, помещая атрибут SRC= в каждом таге <LI>. В любом случае для того чтобы атрибут SRС= работал с тагом <UL>, нужно задать атрибут РLAN=.
Атрибут SRС= для тагов списков очень нужен Web-разработчикам и способен сделать ваши страницы чрезвычайно привлекательными. Вместе с тем, его некорректное употребление приводит к исключительно уродливым страницам.
Атрибут DINGВАТ= [НТМL 3.0]
Атрибут DINGВАТ= позволяет создавать специальные типографские символы dingbats, поддерживаемые броузером. Эти символы имеют вид картинок, которые используются в качестве маркеров в списках. Приведем список стандартных dingbats:
Text, Audio, Folder, Disc drive, Form, Home, Next.
Для задания dingsbat нужно указать его имя в таге <LI>. Например, для того чтобы задать home (домик), записывайте таг <LI DINGBAT="home" >.
Dingsbat можно также применять с тагом заголовка.
Таг <OL>
Нумерованные списки. Таг <OL> вместе с атрибутом ТYРЕ= в HTML 3.0 позволяет создать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке.
<ОL ТYРЕ=1> Таг создает список с нумерацией в формате 1., 2., 3., 4. и т. д.
<ОL ТYРЕ=A> Таг создает список с нумерацией в формате А., В., С., В. и т. д.
<ОL ТYРЕ=a> Таг создает список с нумерацией в формате а., b., с., d. и т. д.
<ОL ТYРЕ=I> Таг создает список с нумерацией в формате I., II., III., IV. и т. д.
Пример 1.6. Использования тагов различных списков.
<HTML>
<HEAD>
<TITLE> Главная страница</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компания.</H1>
<HR>
<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания осно-ванная в
1996 году, является одним из ведущих поставщиков бытовой электроники в
России.</I></H3>
<HR>
<H3>Основными направлениями деятельности Компании являются:
<OL>
<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов;
<LI>создание сервисных центров по обслуживанию бытовой
электроники.</H3>
</OL>
<HR>
<H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой
электроники.</FONT></U></H3>
<H5 ALIGN=CENTER>Контактная информация</H5>
<UL>
<LI>Telephone (1
<LI>FAX (1
<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
<UL TIPE=CIRCLE>Электронная почта<BR>
<LI>Общая информация: *****@***su
<LI>Продажи: *****@***abc. su</UL></UL>
<BR><BLINK>Copyright</BLINK> © 1997 Компания
</BODY>
</HTML>
Таг <НR>
Горизонтальное отчеркивание (horizontal rule) применяется для разделения документа на части. С помощью одного лишь тага <НR> можно придать странице совершенно необычный вид. Попробуйте поэкспериментировать с тагом <НR>и вы получите линии, совсем не похожие на те, которыми вы обычно пользуетесь.
Таг <РRЕ>
Отображение текста без форматирования.
Таг <BLINK>
Таг <BLINK> вызывает мерцание текста заключенного в него.
Гипертекстовые ссылки
Все рассмотренные выше средства управления отображением текста являются безусловно важными, но только дополнительными к основному тагу документа - гипертекстовой ссылке. Для записи гипертекстовой ссылки используется контейнер <А...>......</А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF (НуреrТехt Reference). Простую ссылку можно записать в виде:
<А НREF="http://ро. kiae. su/index. html">Индекс базы данных "Полынь" </А>
где значением атрибута HREF является адрес документа " index. html " на машине " ро. kiae. su ", доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов (Universe Resource Locator) и является составной частью технологии WWW.
Содержание контейнера А, заключенное между тагом начала и тагом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок.
Одной из особенностей создания Web-сервера является то, что представленную на нем информацию желательно разбить на отдельные части, которые могут быть выведены на экран без необходимости его прокрутки. Организация связей между отдельными частями и осуществляется с помощью гипертекстовых ссылок.
Рассмотрим это на примере.
Одним из типичных приемов создания Web-сервера фирмы является представление на первой страницы перечня основных частей, в которые входят: Новости, Товары, Услуги, Контакты, Поиск.
Вставим список этих частей в наш пример вместе с гипертекстовыми ссылками на соответствующие документы. При этом можно указывать не полный адрес URL.
Пример 1.7
<HTML>
<HEAD>
<TITLE> Главная страница</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компания.</H1>
<HR>
<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная в
1996 году, является одним из ведущих поставщиков бытовой электроники в
России.</I></H3>
<HR>
<p ALIGN=CENTER><font color="#400040" size="4">[ <a
href="news. html">Новости</a> |<a href="products. html">Товары</a> |
<a href="servis. html">Услуги</a> | <a href="contact. html">
Контакты</a> | <a href="search. htm">Поиск</a> ] </font>
<HR>
<H3>Основными направлениями деятельности Компании являются:
<OL>
<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов;
<LI>создание сервисных центров по обслуживанию бытовой электроники.</H3>
</OL>
<HR>
<H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой
электроники.</FONT></U></H3>
<H5 ALIGN=CENTER>Контактная информация</H5>
<UL>
<LI>Telephone (1
<LI>FAX (1
<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
<UL TIPE=CIRCLE>Электронная почта
<LI>Общая информация: *****@***su
<LI>Продажи: *****@***abc. su</UL></UL>
<BR><BLINK>Copyright</BLINK> © 1997 Компания
</BODY>
</HTML>
На экране это будет выглядеть следующим образом. При нажатии на ссылку "Товары" в окно броузера будет загружен новый документ.
Другой формой использования тага А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту.
<А NАМЕ= роint">
Для ссылки на такую точку используют следующую форму URL:
<А НREF=" http://ро. kiae. su/index. html #роint">
Ссылка на точку "роint" в документе "index. html"</А>
На описании простых гипертекстовых ссылок можно закончить обзор средств языка НТМL, ориентированных на текстовое представление информации и организацию гипертекстовых баз данных
Графика
Cамыми распространенными графическими форматами в Web являются GIFи JPEG форматы. Для того, чтобы вставить изображение в Web-страницу необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования несложно нарисовать простое изображение и сохранить его в требуемом формате. Если программа не поддерживает этот формат, то необходимо преобразовать файл. Для этого существует множество программ, предназначенных для преобразования одного графического формата в другой. Позаимствовать же картинки можно из различных программных пакетов, или с других Web-страниц в Internet, содержащих библиотеки художественных изображений свободного доступа. Когда броузер выводит страницу Web с изображением, соответствующий графический файл временно хранится в памяти компьютера. В большинстве броузеров есть команда, позволяющая сохранить файл постоянно на локальном диске. Существует множество других вариантов получения графических файлов.
Изображения могут быть полезны своей информативностью и придают Web-странице привлекательный вид. Приведем наиболее распространенные случаи применения изображений:
логотип компании на деловой странице;
графика для рекламного объявления;
различные рисунки;
диаграммы и графики;
художественные шрифты;
подпись автора страницы;
применение графической строки в качестве горизонтальной разделительной линии;
применение графических маркеров для создания красивых маркированных списков.
Теперь рассмотрим как вставить изображение в страницу Web. Тагом НТМL, который заставляет броузер выводить изображение, является <IMG> со следующим общим форматом:
<IMG SRC="picture. gif">
Пример 1.8
<HTML>
<HEAD>
<TITLE> Товары</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компания.</H1>
<HR>
<p ALIGN=CENTER><font color="#400040" size="4">
[ <a href="news. html">Новости</a> |
<a href="products. html">Товары</a> |
<a href="servis. html">Услуги</a> |
<a href="contact. html">Контакты</a> |
<a href="search. htm">Поиск</a> ] </font>
<HR>
<H3 ALIGN=CENTER> Телевизор
<BR>СS-7272РТR/ 6272РТR </H3>
<br><img src="cs727.jpg" align=left hspace=20 vspace=20 ALT="Телевизор">
<UL>
<LI>Суперплоский кинескоп с диагональю 29/25 дюймов (72/62 см)
<LI>Биокерамическое покрытие кинескопа
<LI>Мультисистемный (РАL/SЕСАМ/NTSC)
<LI>Звуковая мощность 2х30 Вт МРО
<LI>Стерео (А2)
<LI>Усилитель слабого сигнала (LNА)
<LI>Функция "Картинка в картинке"
<LI>Возможность настройки на 100 каналов
<LI>Русский телетекст
<LI>Экранное меню на нескольких языках
<LI>Таймер включения/выключения
<LI>Замок от детей
<LI>Режим демонстрации
</UL>
<HR>
<H3 ALIGN=CENTER>Контактная информация</H3>
<UL>
<LI>Telephone (1
<LI>FAX (1
<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
<UL TIPE=CIRCLE>Электронная почта
<BR><LI>Общая информация: *****@***su
<LI>Продажи: *****@***abc. su
</UL>
</UL>
<BR>
<BLINK>Copyright</BLINK> © 1997 Компания
</BODY>
</HTML>
Замыкающего тага не требуется. Здесь SRC означает источник (SouRCe), а имя файла представляет собой имя выводимого графического файла.
Изображения на странице Web могут быть использованы и в качестве гипертекстовых ссылок, как и обычный текст. Читатель страницы щелкает на изображении и отправляется на другую страницу или изображение. Для обозначения изображения как гипертекстовой метки используется тот же таг <А>, что и для текста, но между <А> и </А> вставляется таг изображения <IMG>:
<А НREF="адрес файла или изображения"><IMG SRC="picture. gif"></А>
При этом изображение используемое в качестве гипертекстовой ссылки обводится дополнительной рамкой.
Ограничивающие прямоугольники и атрибуты АLТ=
Для уменьшения времени загрузки страницы с графикой полезно определять в HTML-коде размер изображений. Если он известен еще до загрузки страницы, то броузер может в самом начале отвести рамку для картинки, а затем загружать текст на страницу. Если размер графического изображения определен, то броузер резервирует для него место в виде ограничивающего прямоугольника. Пока загружается графика, посетитель страницы может начать читать текст. Такая методика работы - жест вежливости по отношению к своим читателям.
Как задать размеры графики
Если у вас есть какая-нибудь программа для работы с графикой, то определить размер изображения нетрудно. Для начала откройте файл в графическом редакторе и определите размер картинки в пикселях. В таге изображения задайте ширину и высоту вашей картинки таким образом:
<IMG SRC="picture. gif" WIDTH=413 НЕIGНТ=356>
Если вы не укажите размеры графических изображений, то броузер будет загружать каждую картинку целиком и только после этого переходить к загрузке текста. Это занимает время. Если размеры заданы, многие ведущие броузеры смогут начертить ограничивающий прямоугольник нужного размера и начнет заливать eго изображением. Если на странице есть другие графические объекты броузер продолжит работу с другими частями страницы, продолжая заполнять ограничивающий прямоугольник.
Атрибут АLТ=
Атрибут АLТ= тага IMG позволяет пользователям, броузеры которых смотрят только текст (или если в броузере отключен режим графики), получить представление о том, что за графика расположена на странице или каковы ее цели. Micrisoft Internet Explorer показывает текст из атрибута АLТ= в ограничивающем прямоугольнике, пока изображение загружается. Netscape Navigator выводит этот текст в том случае, если режим Auto Load Image выключен.
Таг <IMG> с атрибутом АLТ= будет выглядеть следующим образом:
<IMG SRC="pic. gif " НЕIGHТ=50 WIDTH=100 АLТ="Picture">
Активные изображения
Активные изображения (image maps), или изображения, чувствующие щелчки мыши, позволят вам создать на своем узле графические меню произвольной формы. Пользуясь таким меню, читатели смогут путешествовать по всем закоулкам и проспектам вашего Web-узла. Активное изображение - это просто картинка с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов. Работает такое изображение следующим образом: когда пользователь щелкает мышкой на картинке, определенной как активное изображение с помощью атрибута ISМАР в таге IMG, координаты щелчка передаются на Web-сервер. Сервер ищет в карте (mapfile) активную область, содержащую переданные координаты. Если такая область находится, заданный в карте URL активируется, и броузер пользователя переходит на новую страницу.
С помощью активных изображений вы можете решить сразу две задачи: создать меню своего Web-узла и разместить на нем графику.
В зависимости от того, на какие броузеры вы ориентируетесь, вам может понадобиться доступ к каталогу cgi-bin на вашем Web-сервере. Возможно, вам придется попросить у администратора своего Web-сервера разрешения записать туда файлы. Тем не менее, размещать активные изображения очень легко. Процесс их создания может поначалу показаться трудным, но существуют доступные программы, с помощью которых для конструирования таких изображений достаточно указать мышкой границы активных областей и задать каждой из них свой URL.
Где помещать активное изображение: на сервере или у клиента?
Есть два типа активных изображений: на сервере и, новая разновидность, у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на броузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на НТМL-странице, так что броузер сам выясняет, какие области являются активными, и запрашивает с сервера требуемую страницу.
Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), то есть нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге сgi-bin сервера должен быть соответствующий сценарий. По соображениям безопасности многие системные администраторы не любят разрешать людям толпиться вокруг сервера, записывая сценарии в каталог сgi-bin. Если вы арендуете сервер или просто используете место на чьем-то чужом сервере, вам, возможно, придется кого-то долго обхаживать, пока удастся записать сценарии. Недостаток активных изображений, работающих на клиентской машине, состоит в том, что обращаться с ними умеют только броузеры, поддерживающие HTML 3.0. Если у пользователя другой броузер, на вашей странице появится обычное графическое изображение, не чувствующее мышь. Так что у вас есть три возможности: сделать активное изображение на стороне клиента, что может отвратить от вас инертных людей, не спешащих менять свои броузеры; поместить его на сервере, и тогда им смогут воспользоваться практически все; применить оба вида изображений на одной странице. Последний вариант, видимо, наилучший, потому что вы попрактикуетесь в новейших средствах НТМ~ 3.0, и в то же время ваши страницы будут доступны для просмотра старыми броузерами.
Как сделать активное изображение
Процесс создания активного изображения состоит из двух этапов. Сначала вы должны определить области на картинке, которые вы хотите сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit.
Определить карту легко. Нужно открыть в МарEdit файл, содержащий изо6ражение, на котором вы хотите создать активные области, после чего щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически генерирует файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области в форме прямоугольника, многоугольника или круга и определить для каждой из них URL. Активные области могут даже пересекаться, но в этом случае возникают проблемы. Важно оставлять между областями немного места, чтобы читатель был уверен, что он активирует правильную ссылку. Большинство броузеров при попадании на пересечение нескольких активных областей считают активной ту из них, которая первой встречается в карте.
Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Эти параметры записываются в карту (МАР-файл)
Закончив создание активного изображения, вы можете сохранить полученный файл в формате NCSA или СЕRN, если оно будет работать на сервере, или в формате СSIМ, если оно функционирует на клиентской машине. Всю остальную работу выполняет программа МарEdit. Она создает карту на сервере или встраивает карту на стороне клиента в указанный вами файл HTML. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тагов <МАР>. Вам придется самому задать таг изображения с атрибутом USЕМАР и поместить его после тага </МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ # следующим образом:
<IMG SRC="mymap. gif " USЕМАР="#sitemap">
Как поместить активное изображение на НТМL-страницу
Когда изображение стало активным и для каждой активной области определен URL, его нужно поместить на HTML-страницу. Это можно сделать несколькими способами, в зависимости от того, какое изображение вы делаете: на сервере или у клиента.
Активные изображения на сервере
Старый испытанный способ создания активных изображений (для HTML 2.0) требует использования атрибута ISМАР в таге IMG. Таг IMG относится к изображению, и его надо поместить между начальным и конечным тагами ссылки на файл-карту. Вам нужно занести в HTML-файл приблизительно такую строку:
<А НREF="path/somemap. map"><IMG SRC="path/somemap. map" ISМАР></А>
Атрибут ISМАР показывает броузеру, что данное изображение является активным. Когда в какой-либо его области происходит щелчок мыши, то благодаря атрибуту ISМАР серверу посылается сообщение, содержащее координаты щелчка. Если вы когда-нибудь пробовали водить мышью по активному изображению, вы могли заметить, что строка состояния в нижней части Web - броузера показывает нечто вроде:
http:/www. /path/somemap. map?300,20
Числа, стоящие после вопросительного знака, - это координаты указателя. Вы увидите их только в случае использования активных изображений на сервере. Карты изображений на стороне клиента показывают URL или ссылку, ассоциированную с областью карты.
Если вы хотите, чтобы специальная программа на сервере обработала активное изображение, на нее надо сослаться. Это значит, что URL, который показывает строка состояния, может иметь такой вид:
http:/www. /cgi-bin/imagemap/path/somemap. map?300,20
В данном случае сервер для обработки активного изображения используется программой под названием imagemap, находящейся в каталоге сgi-bin. Чтобы ваши изображения заработали, вам придется выяснить у своего системного администратора, что в точности нужно серверу. В зависимости от программного обеспечения сервера запись об активных изображениях в НТМL-файле будет выглядеть либо так:
<А НREF="somemap. map">
<IMG SRC="somemap. gif" ISМАР>
</А>,
либо так
<А НREF="sgi-bin/imagemap/somemap. map">
<IMG SRC="somemap. gif" IS-МАР></А>,
Эти два примера соответствуют серверам с различным типом программного обеспечения: в первом случае программа обработки активных изображений не требуется, во втором случае - она обязана присутствовать.
Активные изображения у клиента
В отличие от изображений, описанных в предыдущем разделе, активные изображения у клиента работают независимо от программного обеспечения сервера и не перестанут функционировать, даже если вы перенесете свои файлы на другой сервер. Таким изображениям требуются только две вещи: броузер, поддерживающий HTML 3.0, и информация о карте, записанная в HTML-файле. Приведем пример ссылки в НТМL-файле для этого вида активных изображений:
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 |
