Бегущая строка
Эффект “бегущей строки” – популярное украшение Web – страниц, особенно связанных с театром, биржевыми операциями, броской рекламой.
Но в то же время многие читатели ощущают дискомфорт в результате применения этого инструмента.
Текст, выделенный тегами <MARQUEE> и </MARQUEE>, изображается броузером в виде бегущей строки. Атрибуты тега <MARQUEE> определяют следующие параметры бегущей строки:
направление движения бегущей строки;
цвет фона бегущей строки;
поведение бегущей строки;
высоту и ширину поля бегущей строки. Ширину поля лучше выбирать более короткой по сравнению с длиной бегущей строки. Так подчеркивается сам эффект движения, привлекая внимание к бегущему шрифту;
расстояние до текста по горизонтали и по вертикали в пикселях;
размер свободного пространства между бегущей строкой и окружающими ее HTML- элементами;
повторение бегущей строки. Броузер по умолчанию выводит бегущую строку на экран только один раз;
скорость и «плавность» бегущей строки (анимационный эффект).
Пример программы создания бегущих строк с различными параметрами приведен ниже.
<html>
<body>
<font color=”green”>
<marquee direction=”right”>
Эта строка появляется слева и движется вправо. Она зеленая.
</marquee>
</font>
<font color=”red”>
<marquee behavior=”slide”>
Этот красный текст не бегает.
</marquee>
</font>
<marquee bgcolor=”red” behavior=”alternate”>
Это качающийся текст на красном фоне
</marquee>
<marquee height=”20%” width=”50%” bgcolor =”olive”>
Этот текст занимает 50% ширины экрана
</marquee>
<marquee bgcolor=”grey” behavior=”alternate” scrollamount=”40”>
За один шаг эта строка перемещается на 40 пикселей.Это слишком быстро
</marquee>
<marquee bgcolor=”grey” behavior=”alternate” scrolldelay=”400”>
400 миллисекунд ожидается следующий шаг. Это слишком медленно.
</marquee>
</body>
</html>
Задание 6
Откройте файл справочника “Sprav_html.doc” на компакт-диске. Найдите раздел “Бегущая строка”. Ознакомьтесь с атрибутами всех тегов, используемых при создании бегущей строки. Законспектируйте материал о тех атрибутах, которые понадобятся Вам при оформлении домашней страницы. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов. Разберите приведенный в примере программный код. Реализуйте его.
В предыдущей лабораторной работе при выполнении задания 2 Вы создали Web-страницу, представляющую таблицу с расписанием. Оформите содержимое последней строки таблицы «В расписании возможны изменения» бегущей строкой. Параметры бегущей строки: направление движения бегущей строки слева направо, цвет фона бегущей строки – светло-серый, повторение бегущей строки – 5 раз.
Маркированные и нумерованные списки
Средствами HTML можно создавать любые списки: нумерованные с разными схемами нумерации и маркированные с разными типами маркеров.
Тег <Ul>…</Ul> формирует маркированный список.
Отдельный элемент списка в списке <Ul> формируется с помощью тега <LI> (непарный тег).
Тег <Ol>…</Ol> формирует нумерованный список. Когда броузер встречает тег нумерованного списка, он нумерует элементы списка последовательно, начиная с единицы (по умолчанию). Отдельный элемент списка создается тегом <LI> (непарный тег).
У тегов, формирующих нумерованные и маркированные списки, есть атрибуты, позволяющие задать:
для маркированных списков – тип маркеров списка;
для нумерованных списков ‑ число, с которого начинается список, и способ нумерации элементов списка. Изменение стиля номеров позволяет задавать различия между нумерованными списками документа.
Пример HTML-кода нумерованного списка и вид этого списка в броузере приведены на рис. 9.
<html>
<body>
При составлении характеристики породы собаки описываются:
<br>
<ul>
<li>Общий вид;
<li>Высота в холке;
<li>Вес;
<li>Форма головы;
<li>Форма шеи;
<li>Форма туловища;
<li>Форма конечностей.
</ul>
</body>
</html>
Рис. 9. Пример создания маркированного списка
Задание 7
Откройте файл справочника “Sprav_html.doc” на компакт-диске. Найдите раздел «Нумерованные и маркированные списки». Ознакомьтесь с атрибутами всех тегов, используемых при создании списков. Сделайте конспект тех атрибутов, которые понадобятся Вам при оформлении домашней страницы. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
Реализуйте приведенный пример (рис. 9).
Итоговое задание
Заполнить разработанную на предыдущем занятии табличную структуру домашней страницы (она сохранена в каталоге “Table”) соответствующим содержанием, подобрать фон таблицы, шрифты (тип, цвет, размер) для всех блоков текста, рисунки (рисунки находятся в папках “Dog” и “Cat” на компакт-диске).
Строку «В праздничные дни у нас предусмотрены скидки на все виды услуг» оформить бегущей строкой.
Примечание: все фрагменты текста, оформленные на рис. 4 полужирным подчеркнутым шрифтом, являются гиперссылками. Их пока оформлять не нужно, так как с гиперссылками Вы познакомитесь позднее.
Контрольные вопросы
Какое различие при отображении в броузере имеет использование тегов <BR> и <P>?
Комбинацией каких тегов можно организовать заголовки в HTML-документе, не используя теги заголовков <H1>…<H6>?
Что произойдет, если заданный в атрибуте FACE тега <FONT> тип шрифта не будет найден в локальной системе? Как избежать этой ситуации?
Почему при разработке HTML-документов практически не используется тег <U> и </U>?
Можно ли в качестве маркера списка использовать рисунок формата .gif или .jpg? Как?
Как решить проблему задания нижних (верхних) индексов шрифтом меньшего размера, чем обычный текст?
Изобразите на бумаге вид в броузере приведенных ниже HTML-кодов.
-
<html>
<body>
<ul type=”square”>
<li>Элемент списка 1
<li>Элемент списка 2
<li>Элемент списка 3
<li>Элемент списка 4
</ul>
</body>
</html>
<html>
<body>
<ul>
<li type=”square”>Элемент списка 1
<li type=”circle”>Элемент списка 2
<li>Элемент списка 3
<li>Элемент списка 4
</ul>
</body>
</html>
Изобразите на бумаге вид в броузере приведенного ниже HTML-кода web-страницы.
<html>
<body>
<ol type=”a” start=”3”>
<li>Элемент списка 3
<li>Элемент списка 4
<li>Элемент списка 5
<li>Элемент списка 6
</ol>
</body>
</html>
Имеется следующий HTML-код:
<html>
<body>
<p align="right">
<font face="Comic Sans MS,Tahoma,Arial" color="#6633FF" size="3">
Первый способ оформления текста
</font>
<p>
<font face="Arial" color="red" size="1">
Второй способ оформления текста
</font>
</body>
</html>
Объясните назначение всех используемых тегов и атрибутов и способы задания значений атрибутов.
Ниже приведен HTML-код программы представления формулы и вид этой формулы в броузере. Найдите несоответствие представления формулы в броузере и кода программы.
<html> <body> x<sup>2</sup>+y<sub>2</sub>=z<sup>2</sup> <br> a<sub>3</sub>+b<sub>3</sub>=c<sup>3</sub> </body> </html> |
|
