1896
.pdf
1.2.3. Изменение цвета с помощью тега <BODY>
Тег <BODY> задает цвет фона и цвет основного текста документа. Для этого в тег <BODY> необходимо записать два ключевых слова:
Bgcolor=" " – устанавливает цвет фона Text=" " – задает цвет текста.
Приведем пример: на темно-зеленом фоне запишем белоснежный текст.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD>
<BODY BGCOLOR="#008000" TEXT="#FFFAFA">
<H2><B>Интернет и World Wide Web</B></H2> </BODY></HTML>
На рис. 21 показано, как будет выглядеть файл в окне браузера.
Рис. 21. Вид Web-страницы в окне браузера
1.2.4.Создание бегущей строки
Вкачестве бегущей строки (БС) принимается заголовок текста или строка, требующая особого внимания от посетителей данной Webстраницы.
Таблица 9. Тег создания бегущей строки и его атрибуты
Тег |
Комментарий |
1 |
2 |
<MARQUEE>…</MARQUEE> |
Создает БС |
Атрибуты |
Комментарий |
ALIGN=" " |
Располагает БС по вертикали |
|
относительно текста, в котором она |
|
расположена. |
Окончание табл. 9
1 |
|
2 |
|
Принимает значения: |
|
|
– TOP – по верхнему положению; |
|
|
– MIDDLE – посередине; |
|
|
– BOTTOM – по нижнему положению |
|
BEHAVIOR=" " |
Задает стиль БС. |
|
|
Принимает значения: |
|
|
– SCROLL – БС пробегает полностью по окну |
|
|
браузера и действие повторяется (задается по |
|
|
умолчанию); |
|
|
– |
SLIDE – БС выбегает и останавливается в |
|
левом углу окна браузера; |
|
|
– ALTERNATE – БС «болтается» между краями |
|
|
окна браузера |
|
BGCOLOR=" " |
Задает цвет фона БС |
|
DIRECTION=" " |
Задает направление пробега текста БС. |
|
|
Принимает значения: |
|
|
– |
LEFT – текст БС пробегает слева направо |
|
(задается по умолчанию); |
|
|
– RIGHT – текст БС пробегает справа налево |
|
HEIGHT=" " |
Задает высоту области БС в % |
|
LOOP=" " |
Задает число повторов анимации БС. |
|
|
Принимает значения: |
|
|
– |
INFINITE – бесконечное значение (задается |
|
по умолчанию); |
|
|
– любое целое число |
|
HSPACE=" " |
Размещает слева и справа от БС область |
|
|
свободного пространства заданного размера. |
|
|
Значение задается в пикселях |
|
VSPACE=" " |
Размещает над и под от БС область свободного |
|
|
пространства заданного размера. Значение |
|
|
задается в пикселях |
|
SCROLLAMOUNT=" " |
Задает значение в пикселях области смещения |
|
|
текста при любой операции прокрутки БС |
|
SCROLLDELAY=" " |
Задает задержку в миллисекундах между |
|
|
последними смещениями текста БС. 1 с.=1000 |
|
|
млс. |
|
WIDTH=" " |
Задает ширину области БС в пикселях |
|
|
1.2.5. Фоновое звуковое сопровождение |
|
|
Таблица 10. Тег создания бегущей строки и его атрибуты |
|
Тег |
Комментарий |
|
1 |
2 |
|
<BGSOUND> |
Задает фоновое звуковое сопровождение |
|
Атрибуты |
Комментарий |
|
SRC="URL" |
Задает URL аудиофайла для воспроизведения |
|
LOOP=" " |
Задает число повторов. |
|
Окончание табл. 10
1 |
2 |
Принимает значения:
–INFINITE – бесконечное значение (задается по умолчанию);
–любое целое число
Контрольные вопросы
1.Перечислите возможности тега <FONT>.
2.Какой размер шрифта у данного текста:
<FONT SIZE=+4>Возможности Интернета</FONT>?
3.Каким образом браузер отобразит текст, заданный шрифтами различного начертания? Что произойдет с текстом, если такие шрифты на персональном компьютере посетителя не установлены?
4.Какие теги относятся к стилевому оформлению текста?
5.Какие специальные символы предусмотрены в HTML?
6.Как можно изменить цвет текста и фона с помощью тега <BODY>?
7.Какие способы задания цвета существуют в HTML?
8.Чем отличается тег <FONT> от тега <BODY> при задании цвета текста?
9.Как создать БС на Web-странице? Перечислите и дайте характеристику атрибутам БС.
10.Как создать фоновое звуковое сопровождение на Web-странице?
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 22):
Рис. 22. Вид Web-страницы в окне браузера
Замечание: заголовок текста выполнен в виде БС. Для БС заданы следующие параметры:
–текст БС перемещается слева направо;
–задан фон для БС;
–число повторов анимации БС равно трем;
–задан стиль БС: ALTERNATE.
2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 23):
Рис. 23. Вид Web-страницы в окне браузера
Замечание: заголовок текста выполнен в виде БС. Для БС заданы следующие параметры:
–текст БС перемещается справа налево;
–задана ширина БС, равная 230 пикселей;
–число повторов анимации БС равно бесконечности;
–задан стиль БС: SCROLL.
3.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 24):
Рис. 24. Вид Web-страницы в окне браузера
Замечание: просмотр данной Web-страницы осуществляется вместе с фоновым звуковым сопровождением.
1.3. ИСПОЛЬЗОВАНИЕ СПИСКОВ НА WEB-СТРАНИЦЕ
Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки на строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, часто маркированы или нумерованы.
При правильном использовании списки делают большие объемы информации, становятся легко читаемыми и хорошо заметными.
Существует три основных типа списков: маркированные, нумерованные и списки определений. Они сходны в том, что все они располагают каждый пункт на новой строке. Главное различие перечисленных типов состоит в способе нумерации и структуре. В табл. 11 приведены теги оформления списков.
|
Таблица 11. Теги оформления списков |
|
Тег |
Комментарий |
|
1 |
2 |
|
<LH>…</LH> |
Создает заголовок списка |
|
<UL> |
<UL>…</UL> – создает маркированный список; |
|
<LI> |
<LI> – определяет каждый элемент списка и задает |
|
… |
маркировку элемента |
|
<LI> |
|
|
</UL> |
|
|
|
|
Окончание табл. 11 |
|
1 |
|
2 |
|
<OL> |
|
<OL>…</OL> – создает нумерованный список; |
|
<LI> |
|
<LI> – определяет каждый элемент списка и присваивает |
|
… |
|
номер |
|
<LI> |
|
|
|
</OL> |
|
|
|
<DL> |
|
<DL>…</DL> – создает список определений; |
|
<DT> |
|
<DT> – определяет каждый из терминов списка; |
|
<DD> |
|
<DD> – описывает каждое определение |
|
… |
|
|
|
<DT> |
|
|
|
<DD> |
|
|
|
</DL> |
|
|
|
|
1.3.1 Маркированный список |
||
Наиболее часто используется ненумерованный, или маркированный список. Каждый пункт такого списка начинается с миниатюрной пиктограммы. По умолчанию принимается маркировка . Можно задать другой способ маркировки. Для этого в тег <UL> добавляется ключевое слово TYPE.
Ниже приведены три возможных способа маркировки:
1.TYPE="CIRCLE" Незакрашенная окружность –
2.TYPE="DISC" Закрашенная окружность –
3.TYPE="SQUARE" Закрашенный квадрат –
Приведем пример маркированного списка, представим нашу первую Web-страницу primer.htm в виде списка.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD><BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1> <BR>
<UL TYPE="DISC">
<LH><H2>Здесь вы можете узнать:</H2></LH> <BR>
<LI>Что такое Интернет <LI>Историю создания Интернета <LI>Основные понятия среды Интернета
</UL>
</BODY></HTML>
На рис. 25 показано, как будет выглядеть файл в окне браузера.
Рис. 25. Вид Web-страницы в окне браузера
1.3.2. Нумерованный список
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы. Благодаря этому не придется вручную набирать номер каждого пункта списка.
По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр – 1, 2, 3 и т. д. Можно задать другой способ нумерации, например, буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в тег <OL> ключевое слово TYPE.
Ниже приведены пять возможных способов нумерации:
1.TYPE="1" Стандартная цифровая нумерация – 1, 2, 3, ...
2.TYPE="A" Прописные буквы – A, B, C, D, ...
3.TYPE="a" Строчные буквы – a, b, c, d, ...
4.TYPE="I" Римские цифры – I, II, III, IV, V, ...
5.TYPE="i" Строчные римские цифры – i, ii, iii, iv, v, ...
Приведем пример, изменив маркированный список на нумерованный со стандартным типом нумерации на нашей первой Web-странице.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD><BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1> <BR><OL><LH><H2>Здесь вы можете узнать:</H2></LH><BR> <LI>Что такое Интернет
<LI>Историю создания Интернета <LI>Основные понятия среды Интернета
</OL> </BODY></HTML>
На рис. 26 показано, как будет выглядеть файл в окне браузера.
Рис. 26. Вид Web-страницы в окне браузера
Изменим теперь стандартную нумерацию на нумерацию с прописными буквами.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD><BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <OL TYPE="A"><LH><H2>Здесь вы можете узнать:</H2></LH> <BR>
<LI>Что такое Интернет <LI>Историю создания Интернета <LI>Основные понятия среды Интернета
</OL> </BODY></HTML>
На рис. 27 показано, как будет выглядеть файл в окне браузера.
Рис. 27. Вид Web-страницы в окне браузера
Если необходимо, чтобы нумерация списка начиналась с определенного номера, надо добавить в тег параметр START=" ".
Приведем пример: нумерация списка начинается с номера 5.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD><BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <OL START="5"><LH><H2>Здесь вы можете узнать:</H2></LH> <BR>
<LI>Что такое Интернет <LI>Историю создания Интернета
<LI>Основные понятия среды Интернета
</OL>
</BODY></HTML>
На рис. 28 показано, как будет выглядеть файл в окне браузера.
Рис. 28. Вид Web-страницы в окне браузера
1.3.3. Списки определений
Списки определений используются не так часто, как маркированные или нумерованные списки, но также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно, когда необходимо привести дополнительную информацию.
Приведем пример:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD><BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <DL><LH><H2>Здесь вы можете узнать:</H2></LH><BR> <DT>Что такое Интернет
<DD>Определение понятия <DT>Историю создания Интернета