- •Основные положения языка html
- •Структура html-документа
- •Цвета в html-документе
- •Создание простейшей Web-страницы
- •Изучение приемов форматирования абзацев
- •Создание гиперссылок
- •Создание изображения и использование его на Web-странице
- •Приемы форматирования текста
- •Приемы создания списков
- •Создание таблиц
- •Создание описания фреймов
- •Создание Web-документа с помощью редактора FrontPage Express
- •1.Текст файла абзац.Htm
- •2.Текст файла гиперссылка.Htm
- •3.Текст файла картинка.Htm
- •4.Текст файла формат.Htm
- •5.Текст файла таблица.Htm
- •6.Текст файла фрейм.Htm
- •Контрольные вопросы
Создание изображения и использование его на Web-странице
Откройте программу Paint (Пуск ► Программы ► Стандартные > Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок ► Атрибуты).
Выберите зеленый цвет фона. Залейте рисунок фоновым цветом.
Выберите инструмент Кисть и красный цвет. Нанесите произвольный красный рисунок на зеленый фон.
Сохраните рисунок в вашей папке под именем картинка1.gif (в формате GIF).
Создайте новый рисунок (Файл ► Создать). Выберите красный цвет фона. Залейте рисунок фоновым цветом.
Выберите инструмент Кисть и зеленый цвет. Нанесите произвольный зеленый рисунок на красный фон.
Сохраните рисунок в вашей папке под именем картинка2.gif (в формате GIF) и закройте программу Paint.
Если это упражнение выполняется не сразу после предыдущего, откройте документ 1.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите текст: Работа с рисунками.<P>Применение различных атрибутов. Расположение рисунков будет зависеть от атрибутов.
Введите тег <IMG SRC=" картинка1.gif " ALIGN="BOTTOM">.
Сохраните документ под именем картинка.htm.
Запустите обозреватель Internet Explorer (Пуск ► Программы ► Internet Explorer).
Дайте команду Файл ► Открыть. Щелкните на кнопке Обзор и откройте файл картинка.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.
Вернитесь в программу Блокнот, добавьте новый текст: <P>Изменим атрибут. После текста добавьте тег <IMG SRC=" картинка1.gif " ALIGN="TOP"> и cохраните файл под тем же именем картинка.htm
Вернитесь в программу Internet Explorer и откройте файл картинка.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение. Посмотрите, как изменилось расположение картинки при введении значения атрибута “TOP”.
Вернитесь в программу Блокнот, добавьте новый текст: <P>Еще раз изменим атрибут. После текста добавьте тег <IMG SRC=" картинка1.gif " ALIGN="LEFT"> и cохраните файл под тем же именем картинка.htm.
Вернитесь в программу Internet Explorer и обновите информацию на панели инструментов или клавишами CTRL+R. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и добавьте текст: <P>Используем другую картинку и атрибуты расположения картинки относительно текста.
После текста добавьте тег <IMG HSPACE=40 VSPACE=20 SRC="картинка2.gif" ALIGN="LEFT"> и cохраните файл под тем же именем картинка.htm.
Вернитесь в программу Internet Explorer и обновите информацию на панели инструментов или клавишами CTRL+R.. Посмотрите, как изменилось расположение картинки.
Вернитесь в программу Блокнот и добавьте текст: <P>Изменим положение картинки. Для этого после текста добавьте тег <IMG HSPACE=80 VSPACE=100 SRC="картинка2.gif" ALIGN="LEFT"> и cохраните файл под тем же именем картинка.htm.
Вернитесь в программу Internet Explorer и обновите информацию на панели инструментов или клавишами CTRL+R. Посмотрите, как изменилось расположение картинки.
В этом упражнении мы научились вставлять изображения в документ. Мы выяснили, как влияют атрибуты тега <IMG> на способ отображения изображения. |