Вставляем картинки

Вставляем картинки

Чтобы вставить на страничку картинку, нужно применить тег <IMG>. Этот тег имеет свой атрибут src, который указывает путь к картинке. Если наша картинка под названием, например, foto.jpg лежит в той же папке, что и HTML-файл, можно написать просто: <img src="foto.jpg">. Если же картинка лежит в другой папке, скажем, в папке image, тогда и путь к картинке будет такой: <img src="image/foto.jpg">. Почему-то у многих новичков возникают страшные проблемы по прописыванию пути к картинке, хотя в этом ничего сложного нет.

Хорошо бы, кроме адреса картинки, явно указать ее размеры с помощью атрибутов width (ширина) и height (высота). Их значения можно узнать, например, в программе Adobe Photoshop. Применение этих атрибутов поможет браузеру корректно показать картинку на веб-странице.

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

Ну, и, чтобы картинки имели немного свободного пространства вокруг себя и не прилипали к тексту, который их окружает, укажите расстояние от картинки до ближайшего текста по горизонтали (атрибут hspace) и вертикали (атрибут vspace) в пикселах. Для тех, кто еще не знает, пиксел — это наименьший элемент изображения на экране монитора (попросту, точка).

Картинки можно располагать как по центру (атрибут center), так и по правому (атрибут right) или левому (атрибут left) краю. Это прописывается тегом <ALIGN> с соответствующими атрибутами: center, right или left. Надо также отметить, что расположение по левому краю принято по умолчанию.

С учетов всего сказанного картинку правильнее всего описать таким вот образом:

<IMG src="foto.jpg" width=400 height=250 hspace=10 vspace=10 align=right>

Ну, а теперь сделаем пример странички, где все уже вам должно быть знакомо (листинг П1.10).

А вот что получим на экране монитора. Причем, если навести мышку на картинку, появится надпись морской пейзаж (рис. П1.15).

Рис. П1.15. Вставка изображения