Добавить на Web-страницу графическое изображение позволяет одиночный тег <img>. Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег <img> c его атрибутами: left, right, center.
Обязательный атрибут тега src служит для указания интернет-адреса файла с изображением.
Пример:
<img src="image.gif">
Этот тег помещает на Web-страницу изображение, хранящееся в файле image.gif, который находится в той же папке, что и файл самой этой Web-страницы.
Пример:
<img src="/kartinki/priroda.gif">
Данный тег помещает на Web-страницу изображение, хранящееся в файле priroda.gif, который находится в папке kartinki, вложенной в корневую папку Web-сайта.
Для проверки и закрепления своих знаний нам просто необходима практика! Для этого давайте воспользуемся ниже приведенным примером. Итак, у нас имеется только ссылка. Давайте попробуем сформировать полностью html-код выравнивания изображения на Web-странице. По желанию расположение картинки можно изменить.
Эту комбинацию, поскольку тут указан полный адрес, применяют для указания на Web-страницу с изображением чужого Web-сайта. Но в принципе, если указывать на собственном сайте ссылке с полным адресом, то ничего страшного не случится.
Мы уже знаем о том, что элементы Web-страницы могут быть блочными и встроенными. Так вот, изображение, помещенное на Web-страницу с помощью тега <img>, — встроенный элемент. Это значит, что он не может "гулять сам по себе", а должен быть частью блочного элемента, например, абзаца.
Из этого следуют два важных вывода.
Во-первых, мы можем вставить графическое изображение прямо в абзац:
Во-вторых, если нам понадобится отобразить на Web-странице отдельное, не связанное ни с каким абзацем графическое изображение, нам придется поместить его в специально созданный абзац:
<p><img src="/kartinki/priroda.gif"></p>
Найдем подходящий графический файл и поместим его в папку, где хранятся файлы нашего Web-сайта. Автор выбрал изображение значка @, хранящееся в файле kartinki.gif. Разумеется, вы можете выбрать любой другой файл, но в этом случае не забудьте указать его имя в HTML-коде листинга 4.1.
Впишем в раздел тегов Web-страницы index.htm тег <img> и создадим описывающую его Web-страницу. Это будет третья Web-страница нашего Web-сайта.
Как мы уже поняли, графика носит в себе развлекательный характер, в частности рекламный. Иногда анимация на сайте имеет свойство переадресации на другую страницу или ресурс. Так давайте научимся привязывать к изображению ссылки и делать перенаправления на Web-страницы. Подробнее об этом.
