✓ изображение будет выведено в реальных размерах и без искажений;
✓ при сетевом распространении документа пользователь сразу будет знать размеры изображения, а в остальную часть документа будет без промедления загружаться текст.
Остановимся кратко на других способах выравнивания изображения в электронном издании. Соответствующие значения параметра ALIGN следующие: TOP (самое верхнее), TEXTTOP (самое верхнее для текста), BOTTOM (нижнее), BASELINE (базовая линия), ABSBOTTOM (Absolutely Bottom – самое нижнее), MIDDLE (среднее), ABSMIDDLE (Absolutely Middle – абсолютная средняя).
Значение TOP выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, а TEXTTOP – по самому высокому текстовому элементу. Смысл различия в том, что элементом строки может быть и другое изображение. Значения BASELINE и BOTTOM действуют одинаково и выравнивают нижнюю границу изображения по базовой линии текущей строки, т. е. линии, на которой "стоят" шрифтовые элементы (нижние выносные элементы символов находятся под базовой линией), а ABSBOTTOM – выравнивает нижнюю границу изображения по нижней границе текущей строки, включая все элементы строки, в том числе и графические, если они имеются. Наконец, значения MIDDLE и ABSMIDDLE выравнивают середину изображения по базовой линии или посередине текущей строки соответственно. Еще раз отметим, что применение параметров выравнивания этой группы в большинстве случаев снижают качество оформления страницы и противоречат основным принципам дизайна полос.
Чтобы выделить изображение в текстовом документе, полезно предусмотреть незанятое текстом пространство вокруг него. Это можно осуществить с помощью параметров HSPACE (Horisontal Space – расстояние по горизонтали) и VSPACE (Vertical Space – расстояние по вертикали), которые определяют отступы (осветленное пространство) по горизонтали и вертикали в пикселах. Для выделения изображения на странице можно заключить его в рамку, толщина которой в пикселах задается с помощью параметра BORDER (рамка). Наконец, для пользователей, работающих в режиме отключения загрузки графики, возможность вывода альтернативного текста дает параметр ALT (Alternate альтернативный). В случае же загрузки изображения при выводе на него курсора мыши появляется текст подсказки во всплывающем окне. Ниже приведен пример тэга <IMG> с различными параметрами:
<HTML><HEAD><TITLE>Пример вставки изображения в документ</TITLE> </HEAD>
<BODY><IMG SRC=globus.jpg ALIGN=LEFT WIDTH=40% HEIGHT=40%
HSPACE=8 VSPACE=10 BORDER=5
ALT="Рельеф земной поверхности">
<P ALIGN="Justify">В данном документе рисунок выравнивается влево, т. е. он должен размещаться в левом верхнем углу. Размеры рисунка 60 на 60 пикселей. Рисунок окружен рамкой шириной в 5 пикселей и отделен от текста полями по 10 пикселей с каждой стороны. Текст размещается справа от рисунка и, в дальнейшем, ниже его.</P>
</BODY> </HTML>
Приведенный выше HTML-документ отображался в браузере MS Internet Explorer и полученное в окне браузера изображение показано на рис. 2.7. В частности, на рисунке видна надпись "Рельеф земной поверхности", заданная в виде значения параметра ALT и возникающая на экране при подведении указателя мыши к изображению. В заключение отметим, что фирма Netscape в своем браузере предусмотрела возможность использования еще одного параметра в тэге <IMG>, а именно LOWSRC. В качестве значения этого параметра указывается графический файл с альтернативным изображением того же самого объекта, но с гораздо более низким разрешением и глубиной цвета. В результате альтернативное изображение имеет на порядок меньший объем и быстро загружается на Web-страницу – а только позднее загружается основное изображение. Пример записи тэга с этим параметром представлен ниже:
<IMG SRC=globus.gif LOWSRC=low-globus.gif>
Рис. 2.7. Пример отображения в браузере MS Internet Explorer документа, содержащего изображение
Следует заметить, что размеры этих двух изображений должны совпадать. Если параметр LOWSRC задает изображение меньших размеров, то основное изображение будет также трансформироваться к этим меньшим размерам. Чтобы избежать возникающих вследствие этого эффекта искажений, следует в тэге <IMG> указать действительные размеры основного изображения в пикселах с тем, чтобы при первом проходе и загрузке вспомогательного изображения размеры последнего приводились к размерам основного, а не наоборот.
2.5. Включение в издание ссылок и комментариев
Ссылки являются важнейшей составляющей HTML-документа, так как именно они и делают этот документ гипертекстовым, реализуя важнейшее преимущество электронного документа по сравнению с печатным, состоящее в широчайших возможностях перемещения по документу и вне его. Ссылка состоит из указателя и адресной части. Указатель представляет собой малый фрагмент документа (одно или два слово или изображение), который каким-либо образом выделен (например, цветом или подчеркиванием). Если подвести указатель мыши к ссылке и щелкнуть кнопкой мыши, то браузер загрузит новый документ или перейдет к той части данного документа, адрес которой указан во второй части ссылки.
Текстовые указатели чаще всего выделяются в окне браузера подчеркиванием. Если же в качестве ссылки использовано изображение, то такое изображение браузер самостоятельно заключает в рамку. Второй частью ссылки является адрес той страницы, которая должна быть загружена. Адрес, как уже указывалось ранее, может быть абсолютным или относительным. В последнем случае адрес формируется относительно того каталога, в котором расположен исходный документ. Пример предыдущего раздела содержит относительный адрес рисунка globus.jpg, который расположен в том же каталоге, что и сам HTML-документ.
Для организации ссылок используется тэг-контейнер <A> (Access Address указатель, ссылка), который имеет параметр HREF, причем значение этого параметра и является адресом загружаемой страницы, о чем говорилось выше. Конструкция данного контейнера выглядит следующим образом:
<A HREF=URL-адрес нужной страницы> Текст-указатель ссылки </A>
Когда курсор мыши подводится к текстовому указателю, во всплывающем окне появляется адрес ссылки, который записан в качестве значения параметра HREF. Щелкнув левой кнопкой мыши по этому указателю, мы инициируем процесс загрузки документа или страницы с этим адресом. Запись ссылки, указателем в которой служит не текст, а изображение, выглядит следующим образом:
<A HREF=URL-адрес нужной страницы> <IMG SRC=(имя графического файла)> </A>
Действительно, в представленном примере тэг <IMG> с параметром SRC, задающим имя графического файла, играет ту же самую роль, что и текст-указатель ссылки в предыдущем примере. Некоторым преимуществом последнего способа является то, что изображение занимает больше места в окне браузера, чем текст-указатель ссылки, и на него может быть быстрее выведен курсор мыши.
Ранее уже отмечалось, что относительная ссылка указывает не полный путь к файлу, а его местоположение относительно того документа, из которого производится ссылка. Для облегчения работы с относительными ссылками в заголовочной части документа может использоваться тэг <BASE>, в котором с помощью параметра HREF указывается абсолютный URL-адрес этого документа, относительно которого и строится вся адресация ссылок (см. также разд. 2.1).
Если ссылки на внешние документы позволяют свободно ориентироваться пользователю в безбрежном море сети Интернет, то для качественной навигации в каждом электронном изданий необходимы ссылки внутренние (в пределах самого издания). Скажем, встретив в издании незнакомый термин, вы захотите узнать его смысл и назначение, для чего необходимо обратится к списку терминов и определений, т. е. глоссарию (см. разд. 2.3), а затем вернуться к исходному тексту. Любой большой документ требует также наличия ссылок из его оглавления к соответствующим разделам. Могут потребоваться и другие ссылки, например, в текущем и предыдущем абзацах, по существу, такие ссылки указаны в виде адресации пользователя к определенным разделам данной книги. Однако, в печатном издании пользователь должен заложить текущую страницу, найти раздел, на который указывает ссылка, прочесть его и вернуться к заложенному месту. В электронном же издании эти операции автоматизированы и их выполняет компьютерная программа браузер. И это их существенное преимущество.
Для организации переходов необходимо нечто, напоминающее закладки в печатном издании. Такие закладки, на которые может быть организована ссылка, реализуются с помощью параметра NAME (имя) уже упоминавшегося тэга <A>. Параметр NAME позволяет определить имя закладки с тем, чтобы в дальнейшем адресоваться именно к ней. Например, из данного раздела книги мы адресовались к разд. 2.1 и 2.3. Чтобы такие переходы можно было осуществить в электронном издании, к названиям таких разделов надо добавить закладки:
<A NAME=section_2-1> <A NAME=section_2-3>
а в оглавлении записать названия этих параграфов внутри тэга-контейнера <A>:
<A HREF="#section_2-1"> 2.1. Общая структура гипертекстового документа, заголовок и тело документа, тэги оформления заголовка </A> <A HREF="#section_2-3"> 2.3. Оформление списков терминов и определений </A>.
Когда такие закладки имеются, переходы к ним можно было бы оформить не только из оглавления, но и из любого другого места электронного издания. Вместо указания в скобках (см. разд. 2.1) можно было бы вставить конструкцию с тэгом-контейнером, а именно: