Лекция «Изображения в HTML» по Информационным технологиям (Савченко В. В.)

Кирилл Николоев пт, 18.03.2016 20:36

ИЗОБРАЖЕНИЯ. Изображения придают сайту уникальный вид, делают его более выразительным и привлекательным, а разработчику сайта позволяют расширить арсенал средств для модификации и управления дизайном. Определенную информацию вроде графиков и схем проще, нагляднее и понятнее передать через рисунки, чем долго описывать, что к чему.

Добавление изображений. Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр SRC, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив в тег IMG контейнер A, при этом вокруг изображения отображается рамка.

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

Далее описаны параметры тега IMG, отвечающие за отображение изображений и их характеристики.  ALIGN. Управляет положением изображений относительно текста или других объектов на веб-странице.  ALT. Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появится раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. В качестве аргумента параметра ALT служит любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

 BORDER. Изображение, используемое на веб-странице, можно поместить в рамку различной ширины. Для этого служит параметр border. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом рамка добавляется автоматически, толщина ее составляет один пиксел, а цвет рамки совпадает с цветом ссылки. Чтобы убрать рамку, следует задать параметр border=0.

 HEIGHT и WIDTH. Для изменения размеров изображения средствами html предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента – контейнера, где находится IMG. В случае отсутствия родительского контейнера, его роль играет окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

 HSPACE и VSPACE. Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace u vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

Скачать файлы

Похожие документы