- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Параметр href Описание
- •Значение по умолчанию
- •Описание
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Синтаксис
- •Аргументы
- •Значение по умолчанию
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Аналог css
- •Параметр valign Описание
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Значение по умолчанию
- •Аналог css
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Аналог css
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Значение по умолчанию
- •Параметр height и width Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Параметр align Описание
- •Синтаксис
- •Аргументы
- •Значение по умолчанию
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Параметр action Описание
- •Синтаксис
- •Аргументы
- •Значение по умолчанию
- •Значение по умолчанию
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Аналог css
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Параметр border Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Синтаксис
- •Параметры
- •Значение по умолчанию
- •Параметр alt Описание
- •Синтаксис
- •Аргументы
- •Значение по умолчанию
- •Параметр lowsrc Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Параметр alt Описание
- •Значение по умолчанию
- •Параметр value Описание
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Параметр src Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Параметр multiple Описание
- •Описание
- •Описание
- •Синтаксис
- •Закрывающий тег
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Аналог css
- •Закрывающий тег
- •Синтаксис
- •Аргументы
- •Значение по умолчанию
- •Аналог css
- •Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •Значение по умолчанию
- •Аналог css
- •Значение по умолчанию
- •Аналог css
Значение по умолчанию
bottom
Пример 2. Выравнивание изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <img src="/images/square.gif" width="20" height="20" align="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit... </body> </html>
Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не поддерживаются спецификацией HTML 4.
Параметр alt Описание
Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
<img alt="текст">
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <a href="/index.html"><img src="home.gif" alt="Вернуться на главную страницу"></a> </body> </html>
Параметр BORDER
Описание
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.
Чтобы убрать рамку, следует задать параметр border="0".
Синтаксис
<img border="толщина рамки">
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 4. Рамка вокруг изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body text="#00ff00"> <img src="sample.gif" width="50" height="50" border="2"> </body> </html>
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
<img height="высота"> <img width="ширина">
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина или высота изображения.
Пример 5. Размеры изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <img src="sample.gif" width="150" height="150"> </body> </html>
Параметр HSPACE и VSPACE
Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
Синтаксис
<img hspace="отступ по горизонтали"> <img vspace="отступ по вертикали">
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 6. Отступы вокруг изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <img src="sample.gif" width="150" height="150" hspace="5" vspace="7"> </body> </html>
Параметр ISMAP
Описание
Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.