Изображения в HTML-документе

Встроить изображение в HTML-документ очень просто. Для этого используется тэг <IMG>. У этого тэга есть обязательный параметр SRC, который указывает на файл изображения. Записывается это так:

<IMG SRC="picture.jpg ">,

где picture.jpg – файл изображения, находящийся в одном каталоге с HTML-документом. Если каталог с изображением другой, необходимо вписать полный путь к этому файлу.

Метка <IMG>кроме атрибута SRC имеет и другие, некоторые из которых приведены ниже

height=пикселы

width=пикселы

Эти атрибуты задают браузеру размер прямоугольника, в который он должен вывести картинку.

border=пикселы

Добавляет рамку к изображению

Bordercolor=цвет

Задаёт цвет рамки

hspace=пикселы

Горизонтальный отступ от изображения до окружающего контента.

vspace=пикселы

Вертикальный отступ от изображения до окружающего контента.

alt=текст

Атрибут содержит текст, который браузер выводит вместо изображения, если графика не поддерживается, или показывает в виде подсказки, когда пользователь размещает над изображением мышиный курсор. Голосовые браузеры зачитывают этот текст.

border=пикселы

Атрибут задает толщину прямоугольной рамки, которая окружает изображение. Если рамка не нужна, то используют нулевое значение: border=0.

align=ключ,значения ключа следующие:

left - Картинка выравнивается по левому краю, а текст обтекает картинку справа.

right - Картинка выравнивается по правому краю, а текст обтекает картинку слева.

top - Верх картинки выровнен относительно верха текущей строки.

bottom - Низ картинки выровнен по базовой линии строки (линии, на которой стоят буквы).

middle – картинка выровнена по центру текущей строки.

Разберем все, что мы знаем об изображениях с помощью примера, который впишем в наш файл index.html перед меткой </BODY> .

В качестве изображения будем использовать картинку, подобную представленной ниже, которую необходимо создать в программе Paint и сохранить в своём рабочем каталоге под именем picture.png (вместо этой картинки можно использовать любую другую подходящего размера):

---------------------------------------------------------------------------------------------------

<H1>Изображения </H1>

<P>Изображение можно встроить очень просто: </P>

<P align=center><IMG SRC="Smale.png " alt=мой смайлик ></P>

<H2>Изменим размер</H2>

<P><IMG SRC="Smale.png " alt=мой смайлик height=40width=40></P>

<H2>Выравнивание картинки по правому краю</H2>

<P><IMG SRC="Smale.png " alt=мой смайлик height=70width=70align= right>

Ещё в 1969 году Владимир Набоков в одном из своих интервью упоминал о том, что стоит создать специальный знак пунктуации для графического отображения эмоций: "Мне часто приходит на ум, что надо придумать какой-нибудь типографический знак, обозначающий улыбку, — какую-нибудь закорючку или упавшую навзничь скобку, которой я бы мог сопроводить ответ на ваш вопрос".

</P>

----------------------------------------------------------------------------------------------------