Рисунки на Web - странице.

В Интернете наиболее популярны два графических формата.JPG , GIF

Картинка в тексте

Для вставки картинки нужно воспользоваться командой <img>

Атрибут src = имя файла

При помощи главного атрибута src можно задать имя файла с картинкой

<img src =./pic/img.gif>

Атрибут alt = “ текст надписи “

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

<img src =monstr.jpg alt =” Страшный зверь“>

Атрибуты width=n и height =m

Эти атрибуты задают ширину и высоту ( в пикселах ) прямоугольника, в который входит выводится картинка. Рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки, чтобы картинка выводилась без искажения.

Атрибут border =n

Позволяет задать рамку вокруг иллюстации толщиной в n пикселов. При n =0 или отсутствии рамка не рисуется.

Атрибут align

Позволяет задавать положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

Align =top вертикальное выравнивание по верхнему краю

Align =middle вертикальное выравнивание по центру

Align =bottom вертикальное выравнивание по нижнему краю

Align =left вертикальное выравнивание по левому краю

Align =right вертикальное выравнивание по правому краю

Атрибут hspace=n и vspace=n

Определяют свободное пространство слева и справа (hspace ), над и под (vspace ) картинкой.

Примеры.

<img scr=./pic/07.gif width=200 height=200 border=1

align=top hspace=15 vspace=0 alt=”Петька прагает вниз “>

сочинил забавный рассказ про бабушкиного цыпленка и ре шил набрать его в текстовом редакторе.

• Заменить на align= middle

• Заменить на align= bottom

• Заменить на align= left

• Заменить на align= right

Картинка как ссылка

Для того. чтобы заставить работать картинку как гиперссылку, достаточно вложить команду <img> внутрь команды <a>. Картинка- ссылка обрамляется в рамочку. Курсор при попадании на картинку - ссылку менует свою форму.

<a href="адрес ссылки "> <img src="ссылка на рисунок "></a>

<a href=dog.html> <img src=dog.gif border=0 width=200 height=200 alt=”Собака “></a>

Вопросы и упражнения

1. Запишите HTML – коды для вывода на экран таких страниц

Бабочка крапивница зимовала в стогу. Солнцк нагрело стог, Крапивница отогрелась и затрепетала от нетерпенья Качнулся ветерок, она вспорхнула и понеслась