Практическая работа № 4. Использование изображений.
Цель работы: Создание изображения и использование его на Web-странице, изучения влияния атрибутов тега <IMG> на способ отображения изображения.
Добавить изображение на страничку довольно просто. Достаточно иметь файл с этим изображением в формате *.gif или *.jpg. Чтобы вставить изображение в документ используется тег:
<IMG SRC= «путь к файлу изображения»>
Кроме того, для изображений существует еще несколько необязательных атрибутов:
WIDTH и HEIGHT - ширина и высота изображения в пикселах. Если задать высоту и ширину, а они будут отличаться от реальных размеров изображения, то картинка будет соответствующим образом сжата или растянута;
BORDER- ширина рамки вокруг картинки в пикселах;
ALT- надпись, выводимая на экран пока изображение не появилось;
ALIGN - выравнивание текста относительно той строки, где появляется изображение. Атрибут может принимать значения, указанные в Таблице 1:
Таблица 1 |
|
LEFT Слева от текста |
TOP Текст будет слева и справа от верха картинки, а потом после нее |
RIGHT Справа от текста |
BOTTOM Строка слева и справа от низа картинки |
BR CLEAR - атрибут отмены обтекания графики текстом. Может принимать значения – left, right.
Откройте программу Paint (Пуск / Программы / Стандартные / Paint). Задайте размеры нового рисунка – Рисунок / Атрибуты, например 50x50 точек.
Нарисуйте картинку, как иллюстрацию к сказке А.С.Пушкина «Сказка о царе Салтане….». В программе Paint можно менять масштаб, воспользуйтесь этим.
Сохраните рисунок под именем pic.gif (в формате GIF). Файл расположите в Вашей папке Web.
Если эта работа выполняется не сразу после предыдущей, то откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите произвольный текст. Например: «Три девицы под окном пряли поздно вечерком…» и установите текстовый курсор в его начало.
Введите тeг <IMG SRC="pic.gif" ALIGN="BOTTOM">.
Сохраните документ под именем picture.htm
Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).
Дайте команду: Файл / Открыть…. Щёлкните на кнопке Обзор… и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение. Если вместо картинки Вы увидите знак
.
То это означает, что файла pic.gif:
нет в папке Web
файл pic имеет другое расширение, а не gif.
в имени файла допущена ошибка.
Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля задаются с помощью атрибутов VSPACE (для верхнего и нижнего полей) и HSPACE (для боковых полей). Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид?
Рис. 2
Рис. 3
А теперь сделаем так, чтобы наш рисунок pic.gif исполнил роль графической ссылки (кнопки) на документ paragraph.htm
<A HREF= paragraph.htm> Произвольный текcт <IMG SRC=pic.gif> </A>
Выполните следующие задания без подсказок. У Вас должно получиться в браузере, то, что изображено на рисунках 2 и 3. Файлам дайте имена 1.htm и 2.htm соответственно.
Контрольные вопросы:
Какой тег служит для вставки в HTML-документ произвольного рисунка?
Какие расширения изображений поддерживает HTML-документ?
Какие атрибуты меняют масштаб исходного изображения?
Какой атрибут служит для изменения рамки вокруг изображения?
Какой атрибут служит для выравнивания текста вокруг изображения, каковы его параметры?
Как можно создать новый рисунок с определенным исходным количеством точек?
Какие атрибуты служат для отступа текста от исходного изображения в HTML-документе?
Как записать тег, который создает ссылку-изображение на произвольный документ?