- •Основы web-дизайна
- •Составители а.В. Распопов, о.Е. Ефимова, д.В. Меркулов
- •Введение
- •1.2.1. Стандарты языка html
- •1.2.2. Браузеры
- •Редакторы html-документов
- •Контрольные задания
- •Синтаксис html-тегов
- •Структура html-документа
- •Адресация ресурсов
- •Контрольные задания
- •3.2.1. Комментарии
- •3.2.2. Символьные примитивы (&-последовательности)
- •4.2.1. Разбиение текста
- •4.2.2. Форматирование символов
- •4.2.2.1. Логическое форматирование
- •4.2.2.2. Физическое форматирование
- •4.2.3. Параметры шрифта
- •4.2.4. Заголовки разных уровней внутри текста
- •5.2.1. Формы представления цвета
- •5.2.2. Цвет текста и фон документа
- •5.2.3. Графические форматы
- •5.2.4. Графические изображения
- •Контрольные задания
- •10.2.1. Описание структуры набора фреймов
- •10.2.2. Общий вид html-документа, задающего набор фреймов
- •10.2.4. Целевые фреймы
- •11.2.1. Простейшая форма
- •11.2.2. Типы элементов форм
- •Контрольные задания
- •Несколько советов
- •Библиографический список
- •Оглавление
- •Основы web-дизайна
5.2.4. Графические изображения
Тег <IMG> вставляет изображение в текстовый поток. Закрывающего компонента этот тег не имеет.
Обязательный атрибут (табл. 4):
Таблица 4 Обязательный атрибут тега <IMG> |
|
SRC = url |
адрес графического файла |
Основные необязательные атрибуты (табл. 5): Таблица 5 Атрибуты тега <IMG> |
|
ALT = текст |
альтернативный текст, выводимый в режиме браузера без загрузки изображений |
BORDER = значение |
толщина обрамляющей рамки в пикселах, 0 – отсутствие рамки (по умолчанию) |
HEIGHT = значение |
высота изображения в пикселах (по умолчанию оригинальная), либо в процентах от высоты окна браузера |
WIDTH = значение |
ширина изображения в пикселах (по умолчанию оригинальная), либо в процентах от ширины окна браузера |
HSPACE = значение |
свободное пространство слева и справа от изображения в пикселах |
VSPACE = значение |
свободное пространство сверху и снизу от изображения в пикселах |
ALIGN = значение |
выравнивание изображения по горизонтали или вертикали. Значения TEXTTOP, ABSCENTER, CENTER, BOTTOM, ABSBOTTOM обеспечивают различные варианты вертикального выравнивания относительно текстовой строки. При применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали |
USEMAP = #имя |
указывается имя, задаваемое в теге MAP, задающем в данном изображении области, чувствительные к щелчку мыши |
Несмотря на то, что формально обязательным является только атрибут SRC, на практике необходимо указывать и альтернативный текст (атрибут ALT). Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая и документ загружается долго. К тому же до сих пор существуют браузеры, не поддерживающие графики.
Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать явным образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и WIDTH говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества. Масштабирование изображений в сторону увеличения применяется в особых случаях, когда необходимо вывести цветные полосы либо прозрачные «распорки» строго определенной ширины и высоты. При этом достаточно изготовить изображение размером 1х1 пиксел (нужного цвета или прозрачное) и вставить в документ, задав необходимые размеры.
Сильно уменьшенные варианты изображений используют довольно часто, например, для создания каталога миниатюр, каждая из которых имеет гиперссылку на полномасштабное изображение.