Использование графики

Целесообразность использования

Изображения могут сделать текст документа более содержательным, помогают лучше передать суть и содержание документа. Принимая решение о целесообразности включения в документ той или иной иллюстрации, необходимо иметь в виду следующие соображения:

· Графические файлы передаются медленно

· Пользователи часто отключают загрузку файлов для увеличения скорости приема документа.

Форматы графических файлов

Существует множество форматов, которые можно использовать для хранения графических изображений: GIF, JPEG, PCX, WMF и другие. Однако создавая HTML - документ следует ограничить свой выбор лишь двумя - GIF и JPEG, так как их “понимает”большинство современных программ просмотра. Каждый из форматов имеет свои преимущества: один быстрее передается, зато другой сохраняет больше деталей изображения.

Вставка изображения в документ. Тэг < IMG> и его атрибуты.

Для вставки изображения необходимо воспользоваться тэгом < IMG> совместно с атрибутом SRC, поместив их в надлежащем месте документа и вставив вместо filename URL - адрес изображения:

< IMG SRC=“filename

По умолчанию браузер выводит изображение немедленно после текста или другого объекта, описанного предыдущими инструкциями.

По умолчанию, когда изображение вставляется в строку текста, строка выравнивается по низу изображения. Изменить эту установку можно при помощи атрибута ALIGN тэга < IMG>. Этот атрибут имеет следующие значения:

· TOP - выравнивает текст по верху изображения

· MIDDLE - выравнивает текст по середине изображения

· BOTTOM - Выравнивает текст по низу изображения

· LEFT - обтекаемое текстом изображение прижато к левой стороне окна браузера

· RIGHT - обтекаемое текстом изображение прижато к правой стороне окна браузера

При помощи тэга < IMG> программе просмотра можно сообщить размеры изображения, которое затем размещено на странице. Рекомендуется делать это из следующих соображений:

· это позволяет читателю, отключившему загрузку изображений, иметь представление о размерах иллюстрации по пустому прямоугольнику. В противном случае вместо изображения будет выведена маленькая пиктограмма и форматирование страницы будет нарушено.

· это увеличивает скорость восприятия информации. Программа просмотра сначала выводит правильно отформатированный текст, и, пока читатель просматривает его, загружает изображения в отведенные для них места страницы.

Для указания размеров изображения (в пикселах) используются атрибуты HEIGHT и WIDTH. Если указанные размеры не совпадают с размером изображения, программа просмотра изменит масштаб изображения так, чтобы оно точно вписалось в отведенное под него место.

Для описания изображения необходимо использовать атрибут ALT:

< IMG SRC=“filename” ALT=“description”>

Если браузер читателя не выводит изображение, на его месте будет помещено альтернативное описание. Если изображение выводится, это описание будет находиться на месте иллюстрации до начала ее загрузки.

Выводимое изображение можно поместить в рамку при помощи атрибута BORDER, который имеет значение, равное ширине рамки в пикселах.

Если текст слишком близко подходит к изображению, необходимо использовать атрибуты VSPACE и HSPACE для указания расстояния (по вертикали и горизонтали) между кромкой текста и краями иллюстрации

Ссылки

Понятие ссылки

Гипертекстовый документ - это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Часто подобные ссылки можно увидеть и в файлах справки программных продуктов.

Гипермедийный документ - основан на гипертекстовом документе, но в дополнение к тексту содержит разнообразную графику, видео- и аудиообъекты. В таких документах в качестве ссылок часто используются изображения. Существует очень много типов мультимедийных объектов, которые могут быть размещены на Web - странице.

Ссылка состоит из двух частей. Первая из них - это то, что вы видите на странице; она называется указатель (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL - адресом, URL reference). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого определяется URL - адресом. Составные части ссылки рассмотрены ниже.

Указатели

Указателем ссылки может быть слово, группа слов или изображение. Внешний вид указателя зависит от его типа, способов создания и установок программы читателя. Указатели бывают двух типов - текстовые и графические.

Текстовый указатель представляет собой слова или слова, подчеркнутые прямой линией. Цвет указателя может регулироваться автором и установками программы пользователя.

Графические указатели в принципе мало отличаются от текстовых. Они не подчеркиваются и не выделяются цветом, но вокруг них можно создать рамку. Графические указатели могут иметь самый разнообразный вид:

· Маркеры списка (Bullets). Графические указатели часто имеют вид звездочки или другого маркера, указывающего отдельный пункт в списке. Как правило, строка рядом с маркером также является указателем, имеющим тот же самый адрес.

· Пиктограммы. Многие авторы HTML - документов используют графические указатели в виде экранных кнопок, характерных для Window 95. Такие кнопки можно часто увидеть на начальных страницах Web - сайтов. Они служат своего рода оглавлением сайта и ведут к разным его страницам

URL - адреса

Второй частью ссылки является URL - адрес. Это не что иное, как адрес Web - страницы, которая будет загружена, если щелкнуть на указателе ссылки кнопкой мыши. Указание адреса может быть относительным или абсолютным:

Относительные указатели. URL - адрес файла, расположенный на том же компьютере, что и документ, в котором находится указатель этой ссылки, называется относительным. Это означает, что если браузер загрузил страницу, находящуюся по адресу https://www.mysite.com/page, то относительный адрес /picture подразумевает адрес https://www.mysite.com/page/picture, т.е. подкаталог, расположенный на той же машине. Относительные адреса удобны в использовании. Намного проще вставить только имя файла, а не весь длинный URL - адрес. Они также позволяют перемещать файлы в пределах сервера без больших изменений в межстраничной адресации.

Абсолютные указатели. URL - адрес, полностью определяющий компьютер, каталог и файл, называется абсолютным. В отличие от относительных адресов, абсолютные могут ссылаться на файлы, расположенные на других компьютерах.

Создание ссылок на документы и файлы

Для включения ссылки в документ необходимо сообщить браузеру, какой элемент страницы является указателем, и указать адрес документа, на который ссылаетесь. Оба действия выполняются при помощи тэга < A>.

Тэг < A> имеет единственный атрибут HREF, в котором размещается URL - адрес. Адрес может быть как относительным, так и абсолютным. Тэг < A> является контейнером.

Для облегчения работы с относительными указателями в HTML введен тэг < BASE>. Он располагается в начале документа и содержит URL - адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой нижестоящий тэг, включая < A>, < IMG> и т.д.

Внутренние ссылки

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы.

Для построения внутренней ссылки сначала нужно создать указатель, показывающий место назначения. Например, если вы хотите сделать ссылку на текст в середине документа, нужно разместить там указатель и дать ему имя при помощи атрибута NAME тэга < A>. При этом атрибут HREF не используется, и браузер не выделяет содержимое тэга < A>.

< A NAME= “MIDDLE”> Middle section in Web page< /A>

После того, как указатель получил имя, можно приступить к созданию ссылки на него. Для этого, вместо указания в атрибуте HREF адреса документа, как это делалось ранее, необходимо поместить туда имя указателя со специальным префиксом (#), говорящим о том, что это внутренняя ссылка.

< A HREF= “#MIDDLE”> Jump to the middle< /A>

Теперь, если пользователь щелкнет кнопкой мыши на словах Jump to the middle, программа просмотра выведет среднюю часть документа, причем указатель ссылки будет расположен в верхней строке окна.

Файлы и другие встраиваемые объекты

Когда пользователь щелкает мышью на ссылке, указывающей на другую Web - страницу, она выводится непосредственно в окне браузера. Если же ссылка указывает на документ иного типа, программа просмотра принимает документ и решает, что с ним делать потом. Дальнейшие действия браузера могут быть следующими:

· браузер “знает” этот тип документа и умеет с ним обращаться. Например, если вы создали ссылку на графический файл формата GIF, и пользователь щелкнул мышью на этой ссылке, программа просмотра очистит окно и выведет изображение. В некоторых случаях браузер может дополнительно использовать встроенный программный модуль (plug-in), без которого задача не была бы решена.

· браузер “не узнает” тип принятого документа и “не знает”, что с ним делать. В этом случае он обратится к вспомогательным программам (helpers), имеющимся на машине пользователя. Если найдется подходящая программа, браузер запустит ее и передаст ей полученный документ для обработки.

Списки

Понятие списка

В HTML - документе можно представлять информацию различными способами. Одним из наиболее эффективных форматов являются списки. Они легки для восприятия и могут представлять последовательность процедур, опции для выбора решений, перечень ссылок, меню и т.д.

В HTML есть специальные элементы-контейнеры для представления данных в виде списков. Основными тэгами списков являются нумерованные и маркированные списки, меню, перечни каталогов и определений. Для получения дополнительных эффектов различные типы списков могут вкладываться друг в друга.

Упорядоченный (нумерованный) список. Тэг < OL> и его атрибуты

Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-либо действий. Когда программа встречает тэг упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т.д.

Упорядоченный список открывается тэгом < OL>, а каждый его пункт начинается стандартным тэгом < LI>. Для создания заголовка списка используется специальный тэг < LH>. Список закрывается тэгом < OL/>. Открывающий и закрывающий тэги обеспечивают перевод строки до и после списка, отделяя таким образом список от остального текста, поэтому здесь нет необходимости использовать тэги абзаца < P>.

Базовый шаблон упорядоченного списка выглядит следующим образом:

< OL>
< LI> Item_1
< LI> Item_2
...
< /OL>

В HTML версии 3.2 введены несколько новых атрибутов тэга < OL>. Они позволяют устанавливать вид маркеров элементов списка, а также задавать начальный маркер списка. Ниже перечислены эти атрибуты и их значение:

· COMPACT - Представляет список в более компактном виде

· TYPE = A - устанавливает маркер в виде прописных букв

· TYPE = a - устанавливает маркер в виде строчных букв

· TYPE = I - устанавливает маркер в виде больших римских цифр

· TYPE = i - устанавливает маркер в виде маленьких римских цифр

· TYPE = 1 - устанавливает маркер в виде арабских цифр

· START = n - устанавливает начальный маркер в текущем списке; n - номер, с которого начинается нумерация в списке

Неупорядоченный (маркированный) список. Тэг < UL> и его атрибуты

В HTML существует возможность создания неупорядоченных списков, т.е. таких, в которых отношения между пунктами не определены (списки такого типа называют также ненумерованными или маркированными).

Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами списка (bullets). Как и в упорядоченных списках, здесь также обеспечивается перевод строки до и после списка, а также допускается вложенность списков. Список располагается внутри контейнера < UL>. Каждый пункт списка начинается стандартным тэгом < LI>. Программы просмотра создают автоматический отступ для вложенных списков и сами разнообразят маркеры, вид которых зависит от типа программы.

Базовый шаблон неупорядоченного списка выглядит следующим образом:

< UL>
< LI> Item_1
< LI> Item_2
...
< /UL>

Как и в случае тэга < OL>, для тэга < UL> в HTML 3.2 используются расширения браузера Netscape по управлению видом маркеров. Их вид можно устанавливать при помощи атрибута TYPE, который допускает три значения: DISK, SQUARE, CIRCLE.

Как и тэг < OL>, тэг < UL> имеет атрибут COMPACT, позволяющий выводить неупорядоченный список в более компактном виде.

Меню

Этот тип списков по виду мало отличается от неупорядоченных и введен для удобства идентификации меню при создании документов. Список, определяемый тэгом < MENU>, выводится большинством браузеров теми же шрифтами и в том же стиле, что и неупорядоченный список.

Как и предыдущие типы списков, список-меню автоматически отделяется от остального текста кодами перевода строки и может включать другие элементы HTML. Как правило, пункты меню являются указателями ссылок на части того же документа, на другой документ, либо на другие ресурсы сети.

Список типа < DIR>

Элемент DIR весьма похож на элемент MENU и служит для идентификации определенной части документа, которая в будущих версиях языка, возможно, получит новые полезные функции. Список контейнера, начинающегося тэгом < DIR>, выводится браузерами аналогично неупорядоченным спискам.

Список определений

Списки определений, также называемые словарями специальных терминов (глоссариями), являются особым видом списков HTML. Они представляют текст в форме словарной статьи, состоящей из определенного термина и абзаца, раскрывающего его значение. Такой список удобен для составления каталога или описания функций подразделений организации. Элемент списка определений DL является контейнером и обеспечивает отделение списка от остального текста пустыми строками. Внутри контейнера тэгом < DT> помечается определенный термин, а тэгом < DD> - абзац с его определением. Тэги < DT> и < DD> не являются контейнерами. Базовый шаблон списка определений выглядит следующим образом:

< DL> definition header
< DT> term_1
< DD> definition of term_1
< DT> Term_2
< DD> definition of term_2
...
< /DL>

Текст после тэга < DT> должен помещаться в одной строке. Если это требование не выполнено или если строка выходит за пределы окна браузера, производится перевод строки, но без отступа. Текст, стоящий за тэгом < DD>, выводится отдельным абзацем с отступом вниз на одну или две строки (зависит от программы просмотра) относительно определяемого термина.

Списки определений могут включать другие элементы HTML. Часто применяются элементы стилей (физические и логические). Напротив, элементы заголовков использовать не рекомендуется из-за принудительного перевода строки.

Дополнительные возможности форматирования списков

Можно легко создать маркеры для использования в ненумерованных списках. Контейнер UL информирует браузер о необходимости интерпретировать заключенный в нем текст как неупорядоченный список. Однако если стандартные маркеры не нужны, то тэги < LI> не следует использовать. Вместо них нужно записать код, определяющий новый маркер, например:

< IMG SRC= “cube.gif” ALIGN=TOP> Text < BR>

Тэг < IMG> указывает на графический файл используемого маркера и метод выравнивания изображения. Так как стандартный тэг < LI> не используется, в конце каждого пункта списка необходимо наличие тэга перевода строки < BR>.