Галагазета | HTML. Работа с изображениями"

HTML. Работа с изображениями (-)

*"``
Sunlight, 18 марта 2014 г., 21:12

Изображения на web-страницах используются всегда. Просматривая web-страницы, изображения можно увидеть либо в качестве фона страницы, либо в качестве самостоятельного изображения. Самые распространенные форматы графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства, поэтому в своем коде мы будем пользоваться изображениями, которые соответствуют вышеуказанному правилу.

В корневике нашего ресурса, как правило, для изображений должна быть создана отдельная папка, советую вам поступить так же (создать папку), чтобы корневик был корневиком, а не захламленной свалкой, напоминающей мой рабочий стол. Папку для изображений назовем "images", а пути к любому желаемому изображению прописываются так же, как и ссылки на страницы сайта. Если забыли - посмотрите в предыдущей статье.

В моем примере пути к изображениям будут прописаны, с представлением, что они хранятся в папке "images", а страницы сайта мирно сложены папке site. Обе папки находятся на одном уровне. Приступим к украшению нашего интернет-ресурса.

Фоновые изображения
Фоновое изображение называется так, потому что оно заполняет собой все пространство элемента, для которого оно задано. Соответственно, для того, чтобы его активировать, необходимо прописать в теге атрибут background="images/fon1.gif", рисунком fon1.gif. В этом случае нашим рисунком будет заполнено все окно браузера.

Пример кода:

(Фотография не найдена)

Задав фоновый рисунок, вы заметили (надеюсь), что я добавил неизвестный нам параметр bgcolor. Зачем это делается? Во-первых, нужно запомнить, что это обязательный параметр, если вы желаете сохранить красоту сайта. Во-вторых, параметр задается на тот случай, если у пользователя, который посетит вашу страницу, отключена загрузка изображений. А в таком случае он не сможет увидеть вашего красивого фона, но браузер воспользуется параметром bgcolor, за фон страницы отобразится цвет, который вы укажете сами.

Встраивание изображений
Для размещения изображений на странице используется тег < img >, у которого имеется ОБЯЗАТЕЛЬНЫЙ параметр src, определяющий URL-адрес изображения. Пример кода:

(Фотография не найдена)

P.s.: Не знаю, как видно изображение вам.

Данное изображение можно разместить как справа от текста, так и слева, посередине, можно всячески равнять текст, подстраивая его под наше изображение - всё это регулируется параметром align=" (здесь указывается значение)". Единственное исключение: если мы хотим, чтобы текст располагался под изображением, то необходимо (перед текстом) прописать тег < br >.

Размеры изображений

Ни для кого не секрет, что любое изображение имеет размер, заданный в пикселах. С помощью html-кода вы можете регулировать размеры отображаемого изображения самостоятельно. Собственно говоря, именно для этого у тега < img > существуют параметры width - ширина и height - высота. Чаще всего их значения задаются в пикселах или в процентах, которые будут зависеть от разрешения экрана.

(Фотография не найдена)

Отделение изображения от текста
Вы не могли не заметить того, что текст, написанный нами, очень близко прилипает к изображению. Как же с этим бороться? Очень просто - нужно задать параметры hspace (обеспечивает горизонтальный отступ) и vspace (для вертикального отступа). Отступы от изображения указываются в пикселах, думаю, что это и без меня понятно.

(Фотография не найдена)

На этом, пожалуй, всё. Как картинку превратить в кликабельную ссылку - обсуждалось ранее. А теперь разрешите откланяться, до новых встреч, друзья.

Автор: я

Просмотров: 255
Подписок на автора: 116
Поделиться