- •Лабораторная работа Создание Web-страницы
- •Дрессировка
- •Часть 1. Форматирование текста на Web-странице по образцу
- •Часть 2. Создание нумерованных и ненумерованных списков
- •1.4. Управление цветом
- •1.5. Рисунки на Web-странице
- •Часть 1. Оформление цветом Web-страницы
- •Часть 2. Размещение графики на Web-странице
- •Часть 3. Изменение размеров изображения на Web-странице
- •1.6. Гиперссылки
- •Часть 1. Создание простейшей гиперссылки
- •Часть 2. Создание гиперссылок
- •Часть 3. Цвет гиперссылок
- •Часть 4. Использование рисунка в качестве гиперссылки
- •1.7. Таблицы
- •1.7.1. Создание и форматирование таблиц
- •Часть 1. Создание таблицы по образцу
- •Часть 2. Форматирование таблицы
- •Часть 3. Заполнение таблицы
- •Часть 4. Самостоятельное проектирование и создание таблицы
- •1.7.2. Разметка Web-страницы при помощи таблицы
1.5. Рисунки на Web-странице
<IMG>
Элемент для создания ссылки на графический файл (image). Он не содержит конечного тэга – вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размешать рисунки на Web-странице, решать задачи дизайна и т. д.
Необходимым атрибутом является src – указатель на графический файл:
src=”Ссылка на файл”.
Пример 15
<IMG src=boss2.gif>
Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить.
Пример 16
<IMG src=boss2.gif alt=”Портрет маленького джентльмена”>
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов height – высота и width – ширина. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Таким образом, применение только одного из атрибутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным размером. Масштабирование, как правило, ухудшает качество изображения.
Например, реальный размер рисунка 317x433 пиксел. Напишем два варианта отображения данного рисунка.
<IMG src=boss2.jpg width=317 height=433>
<IMG src=boss2.jpg width=634>
Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет пропорционально изменена автоматически). При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.
Атрибут border задает рамку вокруг объекта.
border=2 – ширина рамки задается в пикселах.
Пример 17
<IMG src=pantera.jpg border=2 аlt=Большая черная кошка, которая гуляет сама по себе>
Полностью тэг IMG может выглядеть следующим образом:
<IMG src=boss2.jpg width=317 height=433 border=2 alt=портрет маленького джентльмена>
Если вы хотите использовать рисунок в качестве «обоев» странички (background), то в тэге <BODY> используем этот атрибут с указанием адреса рисунка «обоев».
Пример 18
<BODY background=wood.jpg> <HR>
Горизонтальная линия (horizontal rule) – очень часто используемый элемент, потому что с его помощью удобно делить страницу на части.
Элемент не имеет конечного тэга, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
align = left;
align = center;
align = right;
align = justify;
Можно задавать толщину и длину линии в пикселах.
size = 3 (ширина в пикселах)
width = 300 (длина в пикселах)
width = 100% (длина в процентах)
По умолчанию линия будет шириной 100% (на всю ширину окна).
Можно выбрать цвет линии.
Color = red (цвет)
Задание № 3 «Размещение графики на Web-странице»