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

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

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

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

4. Сохраните рисунок в формате GIF под именем pic1.gif.

5. Дайте команду Рисунок®Атрибуты. Установите флажок Использовать прозрачный цвет фона. Щелкните на кнопке Выбор цвета и выберите зеленый цвет, уже использованный на рисунке в качестве фонового. Убедитесь, что соотношение красного, зеленого и синего (RGB) фонового и прозрачного цветов совпадают.

6. Сохраните рисунок в формате GIF под именем pic2.gif и закройте программу Paint.

7. Откройте документ first.htm в программе Блокнот.

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

9. Введите следующий текст:

<p>Вставка графического файла осуществляется тегом

<IМG SRC=”имя_файла” WIDTH=”число” HIGHT=”число” HSPACE=”число” VSPACE=”число” ALIGN=”LEFT” ALT=”текст”>,

где WIDTH=”число” HIGHT=”число” – соответственно ширина и высота рисунка в пикселах, HSPACE=”число” VSPACE=”число” – отступ текста от рисунка соответственно по горизонтали и вертикали, ALIGN=”LEFT” – выравнивание текста относительно графики: LEFT – по левой границе, RIGHT – по правой, TOP – по верхней, BOTTOM – по нижней и MIDDLE – по центру изображения. </p>.

10. Вставьте в текст после тега <p> тег

<IMG SRC="pic1.gif" WIDTH=”50” HIGHT=”50” ALIGN="BOTTOM">

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

12. Запустите обозреватель Internet Explorer.

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

14. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.

15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

16. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.

17. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

18. Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=”40” VSPACE=”20”. Сохраните файл под тем же именем.

19. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

20. Вернитесь в программу Блокнот и измените имя рисунка: SRC="pic2.gif". Сохраните файл под тем же именем.

21. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов. В чем различие между двумя созданными рисунками?