Дополнительные параметры графических изображений

Графическое изображение может иметь несколько дополнительных параметров:
1. ALIGN - выравнивание.
Автоматически, рисунок выравнивается по нижнему краю сопровождающего его текста, но Вы можете задавать взаимное расположение рисунка и текста.
<IMG ALIGN=top SRC=image_URL>
Если Вы располагаете изображение внутри параграфа, то Вы можете его выровнять
1) по левому полю (ALIGN=left);
2) по правому полю (ALIGN=right);
3) по верхней границе (ALIGN=top);
4) по нижней границе (ALIGN=bottom);
5) по центру (ALIGN=middle или center).
6) TEXTTOP выравнивание по верхней границе относительно самых высоких символов в текстовой строке;
7) BASELINE выравнивание нижней рамки изображения относительно базовой линии текста

2. HEIGHT Высота изображения в пикселах. (Нет в ARACHNE).
3. WIDTH Ширина изображения в пикселах. (Нет в ARACHNE).
Значения параметров HEIGHT, WIDTH можно указывать в процентах от ширины окна просмотра.
Многие программы просмотра, в том числе Netscape Navigator, перед началом отображения пытаются "спланировать" размещение текста, рисунков и таблиц на странице и не выводят изображений до тех пор, пока не узнают размеры. Если Вы хотите, чтобы программа просмотра сразу начинали выводить текст Вашего документа по мере его получения, Вам следует указать физические размеры рисунков и таблиц в пикселях. Для этого используется дополнительные параметры картинки WIDTH (ширина) и HEIGHT (высота) в описаниях графических изображений. Эти небольшие добавления оказываются очень полезными при работе в сетях с низкой пропускной способностью. Возьмите любую простую картинку и, используя имеющийся в Вашем распоряжении графический редактор, определите ее размер. Запишите изображение в директорию HTML и вставьте его в HTML-документ ind10.htm:
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY bgcolor ="#FFFFFF">
<center><img src="froggie.gif"></center>
<P>Лягушка в натуральную величину - WIDTH (ширина) = 131
пиксель и HEIGHT (высота) 112 пикселей.
</BODY>
</HTML>
Просмотрите файл на экране программы просмотра.
А теперь давайте увеличим наш рисунок в три раза, причем строго пропорционально. Создайте файл ind11.htm, где укажите новые размеры Вашего рисунка.
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY bgcolor ="#FFFFFF">
<center><img src="froggie.gif" width=393 height=336></center>
<P>Лягушка пропорционально увеличена в три раза
</BODY>
</HTML>
Просмотрите, как теперь выглядит изображение на экране.
На размер графического файла в байтах не накладывается никаких ограничений, но все же необходимо помнить, что передача большого графического (да и текстового) файла может занять очень много времени, особенно при низкой пропускной способности сети. Ожидание более одной минуты обычно начинает вызывать раздражение, и часто люди уходят с Вашей странички так и не дождавшись получения документа или рисунка до конца. Предлагая файл размером более 100 кбайт, предупредите об этом получателя, указав длину файла в гиперссылке. Длинные текстовые файлы старайтесь разбить на короткие части. Если важен документ целиком, то можно его положить на FTP сервер и дать на него гиперссылку.

4. BORDER Ширина рамки вокруг изображения в пикселах (только Navigator).

5. HSPASE Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали.

6. VSPASE Ширина свободного пространства, которое должно отделять изображения от текста по вертикали.

7. ALT="текст" - альтернативный текст.
Некоторые WWW-browsers, (например, используемые на VT100-терминалах) не могут показывать рисунки. Такие пользователи смогут увидеть только текст, заданный в пункте гиперссылки "ALT = ". Сопроводительный текст должен быть включен в кавычки. Например:
<IMG SRC="/pics/digest/LOGO.GIF" ALT = "logo.gif">
В этом случае пользователь увидит только текст "logo.gif".
Согласитесь, что не очень-то приятно увидеть на месте картинки белое пятно. Может быть, эта картинка и не нужна, но все-таки обидно. Чтобы избежать таких накладок, используют альтернативный текст, который выводится на том месте, где должна находиться пропавшая картинка. Покажем на конкретном примере, как создается альтернативный текст.(Пример взят из сайта "Музей известного кинорежиссера Сергея Параджанова" (http://www.ru/vega/museum)).
Наберите в графе Address URL Параджановского сайта http://www.ru/vega/museum. Внимательно прочитайте следующий текст, обращая внимание на выделенные слова.
<html><head>
<title>Sergey Paradzhanov Home Page</title></head>
<BODY dgcolor="#000000" link=#ff0000 vlink=#ff0000 text=white>
<center><img src="pics/sphp.gif" lt="Сергей Параджанов">
<br><img src="pics/hp.gif" lt="Home Page"><hr width=70%>
<dd><a href="24.htm"><img src="pics/list1.gif" border=0
alt="Однажды, 24 мая..."></a>
<dd><a href="museum.htm"><img src="pics/list2.gif" border=0 alt="Музей"></a>
<dd><a href="fenomen.htm"><img src="pics/list3.gif" border=0
alt="Феномен Параджанов: и художник, и режиссер"></a>
<dd><a href="life.htm"><img src="pics/list4.gif" border=0
alt="Описание жизни"></a>
<dd><a href="exibits.htm"><img src="pics/list5.gif" border=0
alt="Выставки"></a>
<dd><a href="interv.htm"><img src="pics/list6.gif" border=0
alt="Интервью"></a>
<dd><a href="gallery.htm"><img src="pics/list7.gif" border=0
alt="Лучше один раз увидеть!"></a>
<hr width=70%>
</center>
</body></html>

Чтобы у Вас не осталось никаких неясностей в оформлении альтернативного текста, приведем еще один пример. На страничке нужно расположить фотографию горного пейзажа. Для этого указываем, где программы просмотра должна ее искать:
<IMG SRC="pics/1.gif">
Затем записываем альтернативный текст: сначала пишем слово alt, ставим знак равенства и после него в кавычках приводим сам текст.
<alt="Фотопанорама. Горный пейзаж.">
Все вместе будет выглядеть вот так:
<IMG SRC="pics/1.gif" alt="Фотопанорама. Горный пейзаж.">
Откройте в текстовом редакторе свою страничку index.htm и напишите альтернативный текст к Вашему графическому изображению. Помните, что текст должен быть заключен в кавычки.

[Назад]