Лекция: Вставка графических изображений
В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег <IMG>.
Допускается использование файлов в формате GIF или JPG/JPEG, поскольку большинство браузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается использование файлов формата BMP.
Следующий пример демонстрирует вставку в документ JPG файла): <IMG src=foto.jpg width=«542» height=«407» alt=«девушка твоей мечты»> Здесь атрибут src=" " определяет URL-адрес графического файла.
В приведенном примере файл будет размещен в области шириной 542 и высотой 407 пикселей соответственно. Если размеры, указанные атрибутами height=" " (высота) и width=" " (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Но для больших графических файлов рекомендуется всегда задавать их размеры для ускорения работы браузера. Если размеры не заданы, то, встретив рисунок, браузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы.
Пример вставки рисунка (вид HTML страницы представлен на рисунке 4):
<HTML>
<HEAD>
<TITLE>Картинки</TITLE>
</HEAD>
<BODY>
<IMG src=«keyboard.jpg» width=«560» height=«373» alt=«клавиатура»>
</BODY>
</HTML>
Рисунок 4 – Вставка рисунка в HTML страницу
Атрибут alt="..." указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или из-за разрыва соединения файл не был загружен. Картинку можно так же использовать для указания на гиперссылку.
Например: <A HREF=«index.html»><IMG SRC=«snail.gif» border=«0» alt=«На главную страничку» height=«84» width=«92»></A>По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того чтобы убрать рамку используют атрибут border="..." в теге <IMG> с нулевым значением.