Работа с изображениями в html. Тег

В любой html-документ можно вставить изображение. Делается это с помощью тега . Вставляется изображение следующим образом:

С помощью обязательного атрибута src браузер обращается к названию (имени) картинки, расширение изображения обязательно должно быть указано! Атрибут alt нужен на тот случай, если браузер пользователя не загружает изображения по какой-либо причине. Если изображение не будет загружаться, тогда вместо него на экране монитора появится надпись, указанная в атрибуте alt. Посмотрим ниже результат записи .

Бывают случаи, когда размер изображения на веб-странице необходимо изменить (для красоты например). Для этого существуют атрибуты width - ширина и height - высота. Задаются в пикселях или процентах от ширины экрана. Зададим их нашему рисунку (в пикселях). Получим запись следующего вида: . Выглядеть после этого наша картинка будет следующим образом:

В данном случае изображение на веб-странице было уменьшено относительно оригинала, его можно также и увеличить, только в случае увеличения качество изображения уменьшится!

Изображение можно поместить в рамку с помощью атрибута border. Ширина рамки задаётся в пикселях, например border=2.

По отношению к тексту html-документа можно выровнять рисунок. Делается это при помощи атрибута align. Этот атрибут имеет несколько значений:

Как видно, из параметров атрибута align тест можно располагать с разных сторон от изображения (или изображение от текста). Но текст располагается очень близко к изображению. Иногда это не очень красиво смотрится. Чтобы "отодвинуть" текст от рисунка на n-ное расстояния в html используются атрибуты hspace (отступы по горизонтали, то есть справа и слева) и vspace (отступы по вертикали, сверху и снизу от изображения). Напишем такую строчку:

На данном рисунке изображена планета Земля с астероидами вокруг неё.

Значение параметра hspace="20" указывается в пикселях. Получается следующее, а именно текст расположился на расстоянии 20 пикселей от изображения:

На данном рисунке изображена планета Земля с астероидами вокруг неё.

Любое изображение также можно сделать ссылкой. Делается это следующим образом:

Результатом данной записи будет кликабельная картинка space.JPG размером 150х150 пикселей, нажав на которую пользователь перейдёт в новой вкладке к изображению space.JPG в полном размере. Вот, кстати, и она:


2011 год.

| В раздел | Следующая>>