Изображения

Ссылки на другие виды ресурсов

Внутренние ссылки (анкера)

Абсолютные ссылки

Относительные ссылки

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка.

Например, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page, то относительный указатель /picture подразумевает адрес http://www.mysite.com/page/picture, т. е. подкаталог, расположенный на том же компьютере.

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

Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

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

Для создания ссылки на документ, находящийся на другом сервере должен быть указан адрес сервера с указанием протокола:

<a href="http://www.othersite.com/home/index.html">Документ на другом сайте </a>

В этом случае соответствующая ссылка называется абсолютной.

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

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

Пример. Пусть необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге).

1. Необходимо создать следующий анкер в файле 2.html:

<a name="AAA">Переход закончен</a>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

2. В файле 1.html (или в любом другом) можно определить переход на этот анкер:

<a href="2.html#AAA">Переход к анкеру AAA</a>

Переход к этому анкеру можно определить и внутри самого документа 2.html — достаточно только включить в него следующий тэг:

<a href="#AAA">Переход к анкеру AAA</a>

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

Рекомендуется задавать имена анкеров латинскими буквами. Большинство браузеров отличают большие буквы от маленьких.

В XTHML использование внутренних ссылок считается устаревшим инструментом.

Возможны ссылки и на другие виды ресурсов:

<a href="ftp://server/directory/file.ext"> Загрузить файл</a>

<a href="mailto:user@mail.box">Послать письмо</a>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.

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

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

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

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

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

На Web-страницах в подавляющем большинстве случаев используется растровая графика в двух форматах: GIF и JPG. Эти два формата непосредственно поддерживаются популярными браузерами, а для использования большинства других графических форматов потребуются специальные средства.

Разработанный недавно формат PNG был призван заменить растровый формат GIF, однако, несмотря на его очевидные преимущества, должного распространения на настоящий момент не получил.

Для добавления изображения в HTML-документ необходимо перевести изображение в формате GIF (файл *.gif) или JPEG (файл *.jpg или *.jpeg). Для этого используется следующий тэг:

<img src="picture.gif" alt="Картинка"/>

Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT необходим для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений. Современные браузеры будут также отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения.

Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя.

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

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

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

Пример записи тэга <body> с указанием фонового цвета и фонового изображения:

<body background="texture.gif" bgcolor="gray">

Рекомендуется указывать цвет фона документа, если задается фоновое изображение, так как при загрузке документа прежде всего отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона документа будет определяться значением параметра bgcolor или устанавливаться по умолчанию. До загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомится с уже загруженным текстом. В какой-то момент проявляется фоновое изображение, изменяя гамму цветов документа. Чтобы предотвратить резкое изменение гаммы цветов, следует задавать значение цвета фона близким к цветам фонового изображения. Кроме того, пользователь может отключить загрузку изображений. В этом случае фоновое изображение также не будет загружено.