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

Можно использовать готовый рисунок формата.GIF или.JPG, а можно создать свой рисунок:

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

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

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

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

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

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

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

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

9. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.

10. Введите тег <img SRC=”pic1.htm” align=”bottom”>.

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

12. Запустите обозреватель internet explorer (Пуск4Программы4 internet explorer).

13. Дайте команду Файл4Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.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 и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов. В чем различие между двумя созданными рисунками?

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


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: