Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Работа с изображениями в html-документах

В любой html-документ можно вставить изображение. Делается это с помощью тега <img>. Вставляется изображение следующим образом: <img src="space.JPG" alt="космос">

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

космос

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

космос

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

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

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

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

<img src="space.JPG" alt="космос "width="150" height="150" align="left" hspace="20"> На данном рисунке изображена планета Земля с астероидами вокруг неё.

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

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

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

<A HREF="space.JPG" target="_blank"><img src="space.JPG" alt="космос" width="150" height="150"></A>

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

космос


<<Предыдущая | Оглавление | Следующая>>