Создание изображения и использование его на Web-странице

1. Откройте программу Paint (Пуск ► Программы ► Стандартные > Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок ► Атрибуты).

2. Выберите зеленый цвет фона. Залейте рисунок фоновым цветом.

3. Выберите инструмент Кисть и красный цвет. Нанесите произвольный красный рисунок на зеленый фон.

4. Сохраните рисунок в вашей папке под именем картинка1.gif (в формате GIF).

5. Создайте новый рисунок (Файл ► Создать). Выберите красный цвет фона. Залейте рисунок фоновым цветом.

6. Выберите инструмент Кисть и зеленый цвет. Нанесите произвольный зеленый рисунок на красный фон.

7. Сохраните рисунок в вашей папке под именем картинка2.gif (в формате GIF) и закройте программу Paint.

8. Если это упражнение выполняется не сразу после предыдущего, откройте документ 1.htm в программе Блокнот.

9. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.

10. Введите текст: Работа с рисунками.Применение различных атрибутов. Расположение рисунков будет зависеть от атрибутов.

11. Введите тег <IMG SRC=" картинка1.gif " ALIGN="BOTTOM">.

12. Сохраните документ под именем картинка.htm.

13. Запустите обозреватель Internet Explorer (Пуск ► Программы ► Internet Explorer).

14. Дайте команду Файл ► Открыть. Щелкните на кнопке Обзор и откройте файл картинка.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

15. Вернитесь в программу Блокнот, добавьте новый текст: Изменим атрибут. После текста добавьте тег <IMG SRC=" картинка1.gif " ALIGN="TOP"> и cохраните файл под тем же именемкартинка.htm

16. Вернитесь в программу Internet Explorer и откройте файл картинка.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение. Посмотрите, как изменилось расположение картинки при введении значения атрибута “TOP”.

17. Вернитесь в программу Блокнот, добавьте новый текст: Еще раз изменим атрибут. После текста добавьте тег <IMG SRC=" картинка1.gif " ALIGN="LEFT"> и cохраните файл под тем же именемкартинка.htm.

18. Вернитесь в программу Internet Explorer и обновите информацию на панели инструментов или клавишами CTRL+R. Посмотрите, как изменился вид страницы при изменении атрибутов.

19. Вернитесь в программу Блокнот и добавьте текст: Используем другую картинку и атрибуты расположения картинки относительно текста.

После текста добавьте тег <IMG HSPACE=40 VSPACE=20 SRC="картинка2.gif" ALIGN="LEFT"> и cохраните файл под тем же именемкартинка.htm.

20. Вернитесь в программу Internet Explorer и обновите информацию на панели инструментов или клавишами CTRL+R.. Посмотрите, как изменилось расположение картинки.

21. Вернитесь в программу Блокнот и добавьте текст: Изменим положение картинки. Для этого после текста добавьте тег <IMG HSPACE=80 VSPACE=100 SRC="картинка2.gif" ALIGN="LEFT"> и cохраните файл под тем же именемкартинка.htm.

22. Вернитесь в программу Internet Explorer и обновите информацию на панели инструментов или клавишами CTRL+R. Посмотрите, как изменилось расположение картинки.

В этом упражнении мы научились вставлять изображения в документ. Мы выяснили, как влияют атрибуты тега <IMG> на способ отображения изображения.