Работа с изображениями в html. Тег
В любой html-документ можно вставить изображение. Делается это с помощью тега . Вставляется изображение следующим образом:
С помощью обязательного атрибута src браузер обращается к названию (имени) картинки, расширение изображения обязательно должно быть указано! Атрибут alt нужен на тот случай, если браузер пользователя не загружает изображения по какой-либо причине. Если изображение не будет загружаться, тогда вместо него на экране монитора появится надпись, указанная в атрибуте alt. Посмотрим ниже результат записи .
Бывают случаи, когда размер изображения на веб-странице необходимо изменить (для красоты например). Для этого существуют атрибуты width - ширина и height - высота. Задаются в пикселях или процентах от ширины экрана. Зададим их нашему рисунку (в пикселях). Получим запись следующего вида: . Выглядеть после этого наша картинка будет следующим образом:
В данном случае изображение на веб-странице было уменьшено относительно оригинала, его можно также и увеличить, только в случае увеличения качество изображения уменьшится!
Изображение можно поместить в рамку с помощью атрибута border. Ширина рамки задаётся в пикселях, например border=2.
По отношению к тексту html-документа можно выровнять рисунок. Делается это при помощи атрибута align. Этот атрибут имеет несколько значений:
-
align="texttop". Значение атрибута align="texttop" обозначает, что верхняя часть изображения будет выравнена по верхнему краю текста текущей строки. Возьмём, например такой тест с изображением:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
Результат смотри ниже:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="top". align="top" обозначает, что изображение будет выравнено по самому высокому элементу текущей строки .Рассмотрим тот же пример, только вместо align="texttop" напишем align="top":
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="middle". Середина изображения выравнивается по базовой линии текущей строки:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="absmiddle". Середина изображения выравнивается по середине текущей строки. На глаз разница не заметна, если сравнивать с предыдущим случаем:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="bottom". Здесь выравнивание нижней границы изображения осуществляется по базовой линии текущей строки):
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="absbottom". Здесь выравнивание нижней границы изображения осуществляется по нижней границе текущей строки:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="left". Текст находится справа от изображения, другими словами говоря, выравнивание изображения происходит по левому краю. В этом случае необходимо расписывать теги в таком порядке:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
То есть, сначала нужно указать рисунок и его параметры и только после этого напечатать текст. Также если написать код в том виде, в котором он размещён выше, то весь текст, находящийся после картинки будет размещён справа (пока картинка не закончится). Если же надо написать лишь несколько строчек, а остальную информацию разместить под картинкой, то следует пользоваться тегом br с атрибутом clear, который запрещает обтекание текста слева (clear="left"), справа (clear="right") и с обеих сторон (clear="all"):
На данном рисунке изображена планета Земля с астероидами вокруг неё.
-
align="right". В этом случае выравнивается изображение по правому краю, вот как это будет выглядеть (в тегах всё прописывается, как и в случае align="left" только вместо left пишется right):
На данном рисунке изображена планета Земля с астероидами вокруг неё.
Как видно, из параметров атрибута align тест можно располагать с разных сторон от изображения (или изображение от текста). Но текст располагается очень близко к изображению. Иногда это не очень красиво смотрится. Чтобы "отодвинуть" текст от рисунка на n-ное расстояния в html используются атрибуты hspace (отступы по горизонтали, то есть справа и слева) и vspace (отступы по вертикали, сверху и снизу от изображения). Напишем такую строчку:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
Значение параметра hspace="20" указывается в пикселях. Получается следующее, а именно текст расположился на расстоянии 20 пикселей от изображения:
На данном рисунке изображена планета Земля с астероидами вокруг неё.
Любое изображение также можно сделать ссылкой. Делается это следующим образом:
Результатом данной записи будет кликабельная картинка space.JPG размером 150х150 пикселей, нажав на которую пользователь перейдёт в новой вкладке к изображению space.JPG в полном размере. Вот, кстати, и она:
2011 год.