Вставка
графических изображений. Бегущая строка.
В документах HTML кроме текста могут присутствовать графические
изображения, для вставки которых используется тег <IMG>. Допускается использование файлов в формате GIF или JPG/JPEG, поскольку большинство браузеров имеют
встроенные модули декодирования для воспроизведения данных форматов, а для
систем, работающих под управлением операционных систем семейства Windows, допускается использование файлов
формата BMP. Следующий
пример демонстрирует вставку в документ GIF файла:
<IMG src="pic.jpg"
width=600 height=290
alt="Эволюция">
Здесь атрибут src="..." определяет URL-адрес графического файла. В
приведенном примере файл будет размещен в области шириной 600 и высотой 290
пикселей соответственно. Если размеры, указанные атрибутами height=".." (высота) и width=".." (ширина), не
совпадают с размерами графического файла, то последний масштабируется.
Масштабирование может привести к резкому ухудшению качества графического файла,
поэтому рекомендуется задавать размеры, соответствующие размерам графического
файла, или не указывать их вообще. Кроме того, рекомендуется для больших
графических файлов всегда задавать их размеры для ускорения работы браузера.
Если размеры не заданы, то, встретив рисунок, браузер прекращает вывод текста и
ждет загрузки всего рисунка для того, чтобы
определить его размеры, а это задерживает загрузку страницы.
Пример 7:
Вставка изображения.
<HTML> <HEAD>
<TITLE>Вставка рисунка</TITLE>
</HEAD>
<BODY>
<IMG src="pic.jpg" width=600
height=290 alt="Бык">
</BODY>
</HTML>
.
Атрибут alt="..." указывает браузеру
на то, какой именно текст следует подставить на место рисунка, если
пользователь отключил загрузку графических файлов или вследствие медленной
скорости соединения файл не был получен, а также при наведении курсора мыши на
рисунок.
При вставке рисунка в документ, браузер размещает
следующий за ним текст
внизу. Используя атрибут align="...", можно разместить последующий текст
верху, внизу или по центру относительно картинки.
Задание
бегущей строки
Одним из способов оживления Web-страницы является задание бегущей
строки в тексте документа. Для этого используется контейнер <MARQUEE>...</MARQUEE> со следующими
атрибутами:
■
width="..." - задает ширину
бегущей строки в пикселях или процентах от ширины экрана;
■
height="..." - устанавливает
высоту бегущей строки (в пикселях и в процентах);
■
bgcolor="..." - определяет цвет фона бегущей
строки. Значениями этого атрибута являются стандартные коды цветов;
■ behavior="..."
- задает тип движения
(поведение) бегущей строки и имеет следующие значения: scroll - циклическая
прокрутка
строки из одного конца в другой, slide
- текст появляется с
одного края и останавливается у другого, alternate -текст перемещается от одного края к другому (напоминает
движение маятника);
direction="..." - определяет
направление движения бегущей строки. Имеет следующие значения: left - изображение движется влево по
строке, right
- изображение движется
вправо по строке; up - вся строка перемещается снизу вверх, down - строка движется сверху вниз;
■
scrollamount="..." - определяет число пикселей, которые
отделяют один текст от последующего;
■
scrolldelay="..." - указывает задержку
в миллисекундах перед появлением последующего текстового блока;
■
lоор="..."
- задает число повторов анимации (любое положительное число). По умолчанию или
при указании значения -1 (infinity) браузер будет прокручивать текст
бесконечное число раз.
Пример
8: Создание бегущей строки:
<MARQUEE ALIGN="Top" LOOP="infinity" BEHAVIOR="alternate" BGCOLOR="lime"
DIRECTION="right"
HEIGHT=50 WIDTH=250>
Пример
бегущей
строки.
</MARQUEE>
В этом примере задается строка, в которой поле бегущей строки имеет
размер 50 пикселей в высоту и 250 пикселей в ширину. Выравнивание текста
осуществляется по верхнему краю блока, определена бесконечная прокрутка
текста, текст перемещается слева направо и имеет ярко-зеленый фон.
