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

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

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

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

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

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

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

align="texttop". Значение атрибута align="texttop" обозначает, что нижняя часть изображения будет выравнена по нижнему краю текста той строки, на которой находится данное изображение. Возьмём, например такой тест с изображением:

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

Результат смотри ниже.

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="top". align="top" обозначает, что изображение будет выравнено по самому высокому текстовому элементу текущей строки .Рассмотрим тот же пример, только вместо align="texttop" напишем align="top":

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="middle". Середина изображения выравнивается по базовой линии текущей строки.

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="absmiddle". Середина изображения выравнивается по середине базовой линии текущей строки. На глаз разница не заметна, если сравнивать с предыдущим случаем.

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="baseline". Изображение выравнивается по базовой линии строки. Очень похоже на align="texttop".

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="bottom". Здесь выравнивание нижней границы изображения осуществляется по окружающему тексту. Ниже это можно увидеть.

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="left". Текст находится справа от изображения, другими словами говоря, выравнивание изображения происходит по левому краю. Только в этом случае необходимо расписывать теги в таком порядке:

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

То есть, сначала нужно указать рисунок и его параметры и только после этого напечатать текст. Вот и пример данной записи:

На данном рисунке изображена планета Земля с астероидами вокруг неё.
align="right". В этом случае выравнивается изображение по правому краю, вот как это будет выглядеть (в тегах всё прописывается, как и в случае align="left" только вместо left пишется right):

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

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

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

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

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

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

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

| следующая>>

Самоучитель по html

Содержание

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