7 Графические объекты на web-странице

7.1 Вставка графики

Для размещения картинок на Web-страницах необходимо указать в HTML-коде две

вещи. Во-первых, что вставляем графический элемент, а во-вторых, откуда его вставляем.

^{Это делается с помощью одиночного тега} <IMG> ^{(от английского слова image –}

^{«изображение») с атрибутом} src ^{(от английского source – «источник»). Требования к}

графическому файлу — те же, что и для фонового рисунка.

Если файл с изображением находится в той же папке, что и код, то просто указывается

имя, например:

<IMG src=vasya.gif>

а если в другом каталоге, то указывается полный путь к файлу, например:

<IMG src="C:/Мои документы/Vasya/Vasya/vasya.gif">

Примечания :

Если название одной из папок состоит из нескольких слов, разделенных пробелом, весь путь

нужно заключить в кавычки. Вообще, здесь действует универсальное правило HTML

относительно кавычек: если вы не уверены, нужны ли кавычки, - ставьте их.

7.2 Размер изображения

^В теге <IMG> ^{есть два атрибута, определяющих ширину и высоту изображения,}

^{соответственно:} width ^и height^:

<IMG src=vasya.gif width=100> ^или <IMG src=Ветер.jpg

height=100>.

Размер можно задавать в абсолютной величине (пикселях) или в относительной

(процентах). Например,

<IMG src=Ветер.jpg width=100 height=100> ^или

<IMG src=Ветер.jpg width=10% height=50%>.

Чтобы ощутить разницу попробуйте оба способа изменения размера картинки.

7.3 Подсказка

В HTML существуют атрибуты, позволяющие задавать подсказки к элементам, в

^{частности, к картинкам –} alt ^и title^.

Например:

<IMG src=Ветер.jpg height=100 alt="Обычная картинка" title = "Обычная

картинка">

В случае случайной потери исходного файла картинки в браузере появится следующее

(рис. 10):

Рис. 10. Отсутствие файла картинки

^{Как видно, возле крестика появилась надпись, которую ввели в атрибут} alt^.

18

^{Атрибут} Title ^{позволяет выводить подсказку при наведении мыши в область}

размещения картинки.

7.4 Выравнивание картинки по горизонтали. Обтекание текстом

Для выравнивания графических объектов по горизонтали используется уже знакомый

^{нам атрибут} align^{. Он также используется в теге} <IMG>^.

Например:

<IMG src=Ветер.jpg height=100 alt="Обычная картинка"

align=left>

При этом, если продолжить писать текст после картинки, то произойдет обтекание

картинки справа (рис.11):

<IMG src=Ветер.jpg height=100 alt="Обычная картинка"

align=left> Пишу текст рядом с картинкой Пишу текст рядом с

картинкой Пишу текст рядом с картинкой Пишу текст рядом с

картинкой Пишу текст рядом с картинкой Пишу текст рядом с

картинкой Пишу текст рядом с картинкой

Рис. 11

^{Если необходимо начать писать текст с новой строки тег} <P> ^{для этого не подходит,}

^{вместо него используется тег} <BR> ^{с атрибутом} clear^{. Выглядит это так:}

<IMG src=Ветер.jpg height=100 alt="Обычная картинка" border=1>

<BR clear=all>

В браузере это будет выглядеть следующим образом (рис.12):

Рис. 12