Ответы на вопросы. Кодирование картинок

Кодирование картинок

Ответы на вопросы

Элемент IMG строчный. Что это означает?
Ответ. При выводе строчного элемента браузер не делает перевода строки ни до, ни после объекта.
Если картинку расположить внутри текстового абзаца, как вот эту козочку , она ведет себя подобно обычному текстовому символу. Используя атрибут align, можно подравнивать вертикальное расположение картинки по отношению к текущей текстовой строке. Например, в этом изображении использовано значение align=top. В этом — align=bottom.
Попробуйте посмотреть предыдущий абзац в разных по ширине окнах.
Можно ли строчный элемент выводить как блочный?
Ответ. Можно разными способами:
- помещая строчный элемент в блочный (например, P или DIV);
- используя элемент BR для перевода строки до и после элемента;
- используя стилевое свойство display:block.
В этом абзаце для картинки записано свойство display:block.
Где расположен файл с картинкой, если иллюстрация задана на странице следующим образом:
1. ```
<IMG src="img.gif"> 
```
2. ```
<IMG src="pic/img.gif"> 
```
3. ```
<IMG src="../pic/img.gif"> 
```
4. ```
<IMG src="c:/sidorov/pic/img.gif"> 
```
  Почему такие адреса не нужно использовать?
5. ```
<IMG src="http://www.botik.ru/~robot/pic/rulogo.gif"> 
```
Ответ.
1. ```
<IMG src="img.gif"> 
```
  Картинка расположена в том же каталоге, что и код, то есть в текущем каталоге.
2. ```
<IMG src="pic/img.gif"> 
```
  Картинка расположена в подкаталоге pic текущего каталога.
3. ```
<IMG src="../pic/img.gif"> 
```
  Картинка расположена в подкаталоге pic каталога родителя.
4. ```
<IMG src="c:/sidorov/pic/img.gif"> 
```
  Почему такие адреса не нужно использовать?
  Картинка расположена на диске с по указанному абсолютному адресу. Абсолютные дисковые адреса нельзя использовать при разработке сайта. Адрес будет работать на компьютере разработчика, но не будет работать на сервере.
5. ```
<IMG src="http://www.botik.ru/~robot/pic/rulogo.gif"> 
```
  Картинка расположена в подкаталоге pic каталога ~robot на сервере www.botik.ru.
Объясните работу атрибутов alt и title . Почему атрибут alt необходимо использовать для всех картинок?
Ответ. Атрибут alt задаёт альтернативный текст, который замещает на экране картинку при её отсутствии. Использовать этот атрибут необходимо, чтобы дать возможность пользователю получить представление о картинке, даже когда та отсутствует (отключена графика в браузере, сбой сети, текстовый, голосовой браузер или браузер Брайля). Кроме того, содержимое атрибута alt (как и title ) анализируют пауки поисковых систем.
Атрибут title задаёт комментарий, который всплывает, когда над картинкой (или замещающим прямоугольником) зависает курсор мыши.
Какие по содержанию тексты надо записывать в качестве значений атрибутов alt и title ?
Ответ. В качестве значения атрибута alt нужно выбирать краткие тексты, точно описывающие изображение (чтобы текст мог заменить изображение).
В качестве значения атрибута title можно записывать дополнительные комментарии для картинки.
Как записать альтернативный текст для картинки, которая задаёт:
- декоративную графику;
- пустую картинку-распорку;
- рисованный заголовок;
- маркер списка;
- горизонтальную линию;
- навигационную кнопку.
Ответ.
- Декоративная графика: alt="".
- Пустая картинка-распорка: alt="".
- Рисованный заголовок: значение alt должно в точности его повторять.
- Маркер списка: значение alt содержит последовательную цифровую нумерацию.
- Горизонтальная линия: alt="разделитель".
- Навигационная кнопка: alt="[название_пункта]".
Что нужно записывать в качестве значений атрибутов width и height элемента IMG?
Ответ. Атрибуты height и width задают размеры прямоугольника, в который браузер выводит картинку. Эти размеры должны совпадать с реальными размерами картинки. Если совпадения нет, браузер растягивает или сжимает изображение так, чтобы оно полностью заполнило отведенное для него место. В итоге картинка выводится с неприятными искажениями.
Почему рекомендуется всегда записывать атрибуты width и height для элемента IMG?
Ответ. Дело в том, что картинки загружаются в последнюю очередь. Сначала браузер получает по сети текст, отображает его на экране, и пользователь приступает к чтению. Вместо картинок на странице рисуются прямоугольники, которые замещаются пришедшими по сети картинками. Если атрибуты height и width заданы, браузер рисует прямоугольники указанных размеров, если нет, то “почтовые марки” — небольшие прямоугольные области.
Когда картинка приходит по сети, браузер вынужден перерисовывать экран заново, ведь картинки “не лезут” в отведенные для них места. Если картинок на странице много, “экранотрясение“ происходит по прибытию каждой из них.
Еще одна неприятность подстерегает пользователя, если картинки без атрибутов height и width погружены в таблицу (см. следующий урок). Так как браузер не знает нужных размеров, то рисовать таблицу до прихода картинок он вообще не станет, и пользователь засыпает у чистого экрана.
Вывод прост: нужно всегда записывать атрибуты height, width и указывать в них реальные размеры картинки.
Каким атрибутом можно задать рамку для иллюстрации? Почему не следует использовать толстые рамки?
Ответ. Рамка для картинки задаётся атрибутом border. Его значением является целое неотрицательное число, определяющее толщину рамки в пикселах. Если атрибут отсутствует или его значение равно нулю, рамка не рисуется. Толстая рамка похожа на траурную.
Какими атрибутами задаются горизонтальные и вертикальные отступы от картинки?
Ответ. Горизонтальный отступ (одновременно слева и справа) задаётся (в пикселах) атрибутом hspace. Соответственно, вертикальные отступы задаются атрибутом vspace.
Как можно задать отступ от картинки только с одной стороны, например, справа, выравнивая её по левому краю текста?
Ответ. При помощи атрибутов hspace и vspace можно задать только парные отступы: одновременно слева, справа и сверху, снизу. Если отступы нужны только с одной стороны, используйте стилевые свойства margin-top, margin-bottom, margin-right, margin-left.
Отступ какой величины рекомендуется использовать для отделения элементов гипертекстовой страницы?
Ответ. Рекомендуемый отступ — 10 пикселов.
При помощи какого атрибута можно задать выравнивание картинки по отношению к другим элементам страницы? Назовите основные значения этого атрибута.
Ответ. Выравнивание картинки задаётся атрибутом align:
- align=top — вертикальное выравнивание по верхнему краю;
- align=middle — вертикальное выравнивание по центру;
- align=bottom — вертикальное выравнивание по нижнему краю;
- align=left — горизонтальное выравнивание по левому краю;
- align=right — горизонтальное выравнивание по правому краю.
Что происходит с другими элементами страницы, если картинка выровнена по левому (правому) краю?
Ответ. Остальные элементы начинают обтекать картинку справа (слева).

Как прекратить обтекание картинки?

Ответ. Для прекращения обтекания нужно использовать элемент BR с атрибутом clear:

`<BR clear=left>`	Прекращение обтекания справа
`<BR clear=right>`	Прекращение обтекания слева
`<BR clear=all>`	Прекращение обтекания с обеих сторон

Как выровнять картинку по горизонтали без обтекания её другими элементами?
Ответ. Для выравнивания картинки по горизонтали без обтекания её нужно поместить внутрь элемента-блока и задать для последнего выравнивание соответствующим атрибутом (align) или соответствующим стилевым свойством (text-align).
Как превратить картинку в гипертекстовую ссылку?
Ответ. Чтобы заставить работать картинку как гиперссылку нужно вложить элемент IMG внутрь элемента A:
```
<A href="переход"><IMG src="файл"></A>
```
Как убрать рамочку у картинки-ссылки?
Ответ. Нужно в теге <IMG> записать атрибут border=0.
Что такое “хвостатая” ссылка и как избавиться от “хвоста”?
Ответ. “Хвост” — это часть гиперссылки, который возникает от пробела или конца строки за кодом картинки. Нет разделителя — нет “хвоста”:
```
<A href="00.htm"><IMG 
   src="pic.gif" border=0 alt="Здесь хвоста нет!"></A>
```

вверх | возврат