1896
.pdf
<P ALIGN="CENTER">
<IMG SRC="card.gif" BORDER="0" USEMAP="#Информатика"> <MAP NAME="Информатика">
<AREA SHAPE="RECT" COORDS="31,13,247,84" HREF="internet.htm">
<AREA SHAPE="RECT" COORDS="56,85,272,157" HREF="html_1.htm">
<AREA SHAPE="RECT" COORDS="87,158,302,232" HREF="html_2.htm">
</MAP>
<p ALIGN="CENTER">
<B><FONT COLOR="#000000" SIZE="4">
Лаборатория Интернет Образования</FONT></B> </BODY></HTML>
На рис. 69 показано, как будет выглядеть файл в окне браузера.
Рис. 79. Создание изображения-карты
1.6.8. Размещение звуковых и видеофайлов на Web-странице
Таблица 19. Теги размещения звука и видео на Webстраницах
Тег |
Комментарий |
<A HREF="*.wav">… </A> |
Устанавливает звуковой файл: |
|
* – имя файла; |
|
wav – расширение звукового файла |
<A HREF="*.avi">…</A> |
Устанавливает видеофайл: |
<A HREF="*.mov">…</A> |
* – имя файла; |
|
avi, mov – расширения видеофайлов |
Размещение звука на Web-странице
Звуковой файл включается в Web-страницу путем указания его имени в теге <A HREF=" ">…</A>. После данного тега следует привести текст, характеризующий содержание звукового файла: указать его размер, чтобы посетитель мог решить, стоит ли его загружать.
Приведем примеры:
1.Воспроизведение щелчка кнопки мыши (рис. 70)
…
<A HREF="mouse.wav">Щелчок кнопки мыши (9,740 bytes)</A>
…
Для прослушивания файла необходимо щелкнуть мышью по тексту ссылки. Автоматически загружается универсальный проигрыватель и воспроизводится звук, производимый мышью в момент щелчка.
Рис. 70. Вид Web-страницы в окне браузера
2. Использование графики при размещении звуковых файлов (рис. 71).
…
<IMG SRC="mouse.jpg" WIDTH="120" HEIGHT="115" ALT="Мышь" > <A HREF="mouse.wav">
Щелчок кнопки мыши (9,740 bytes) </A>
…
Рис. 71. Вид Web-страницы в окне браузера
Размещение видео на Web-странице
Видеофайл размещается на Web-странице точно так же, как звуковой файл. Единственное различие, что теперь тип файла – mov или avi.
Приведем примеры:
1.Воспроизведение видеофайла: работа принтера (рис. 72).
…
<A HREF="printer.avi">
Работа принтера (1, 600 bytes) </A>
…
Рис. 72. Вид Web-страницы в окне браузера
При щелчке мыши по ссылке загружается программа просмотра видеофайлов и воспроизводится файл, позволяющий посмотреть работу принтера.
2.Использование графики при размещении видеофайлов (рис. 73).
…
<IMG SRC="printer.gif">
<A HREF="printer.avi">
Работа принтера (1, 600 bytes)</A>
…
Рис. 73. Вид Web-страницы в окне браузера
Контрольные вопросы
1.Что такое гиперссылка и какова ее роль на Web-страницах?
2.Перечислите и охарактеризуйте основные теги гиперссылок?
3.Каким образом осуществляется ссылка на местные Web-страницы?
4.Каким образом осуществляется ссылка на любое место в WWW?
5.Как можно изменить цвет гиперссылки?
6.Как используется графика в качестве гиперссылки?
7.Как осуществляется переход по метке внутри одного HTMLдокумента?
8.Как осуществляется переход по метке, созданной в другом HTMLдокументе?
9.Перечислите советы по созданию гиперссылок.
10.Что означает запись: <IMG SRC="h.gif" USEMAP="#Интернет">? 11.Как создается фрагмент «Изображения-карты» в виде
прямоугольника?
12.Как создается фрагмент «Изображения-карты» в виде окружности? 13.Как создается фрагмент «Изображения-карты» в виде
многоугольника?
14.Как размещается звуковой файл на Web-странице? 15.Как размещается видеофайл на Web-странице?
Практические задания
1.Создайте энциклопедический словарь по информатике в виде многофайлового HTML-документа. Основной файл index.htm должен содержать список слов (гиперссылок), а вспомогательные – информацию о них (рис. 74).
Рис. 74. Вид Web-страницы в окне браузера
2.Создайте справочник по информатике в виде одного HTML-файла. Документ должен начинаться с оглавления, содержащего ссылки. Далее должна располагаться справочная информация с метками.
3.Создайте изображение-карту (рис. 75):
Рис. 75. Вид Web-страницы в окне браузера
1.7.ИСПОЛЬЗОВАНИЕ ФОРМ НА WEB-СТРАНИЦЕ. MAILTO
1.7.1.Создание форм на Web-странице
|
|
Таблица 20. Теги создания форм |
||||||
Тег |
|
Комментарий |
|
|
|
|||
<FORM METHOD="POST" |
Создает форму. METHOD применяется для |
|
||||||
ACTION="MAILTO:e-mail"> |
указания протокола, используемого для |
|
||||||
… |
пересылки данных на сервер. Протокол GET |
|
||||||
</FORM> |
выбран по умолчанию, но в большинстве |
|
||||||
|
случаев он не удовлетворяет разработчиков, |
|
||||||
|
поэтому чаще используют протокол POST. |
|
||||||
|
ACTION="MAILTO:e-mail" – пересылает |
|
||||||
|
заполненную |
форму |
по |
указанному |
|
|||
|
электронному адресу |
|
|
|
|
|
||
<TEXTAREA NAME="name" |
Создает окно для ввода текста. COLS |
|
||||||
COLS=" " ROWS=" "> |
указывает ширину окна; ROWS указывает его |
|
||||||
… |
высоту. Значения высоты и ширины задаются |
|
||||||
</TEXTAREA > |
в пикселях |
|
|
|
|
|
|
|
<SELECT> |
Создает скролируемое меню. Первое значение |
|
||||||
<OPTION VALUE="a">Первый |
меню будет показано на экране, остальные |
|
||||||
… |
будут |
доступны |
при |
|
использовании |
|
||
<OPTION ALUE="d">Четвертый |
прокрутки. OPTION указывает каждый |
|
||||||
</SELECT> |
отдельный элемент меню |
|
|
|
|
|||
<SELECT MULTIPLE |
Создает |
скролируемое |
меню. |
SIZE |
|
|||
NAME="name" SIZE=" "> |
устанавливает количество пунктов меню, |
|
||||||
<OPTION ALUE="a">Первый |
которое будет показано на экране, остальные |
|
||||||
… |
будут доступны при использовании прокрутки |
|
||||||
<OPTION VALUE="d">Пятый |
|
|
|
|
|
|
|
|
</SELECT> |
|
|
|
|
|
|
|
|
<INPUT TYPE="TEXT" |
Создает строку для ввода текста. Параметром |
|
||||||
NAME="name" SIZE=" "> |
SIZE указывается длина строки в символах |
|
||||||
<INPUT TYPE="CHECKBOX" |
Создает поле «флажок». За тегом следует |
|
||||||
NAME="name"> |
текст |
|
|
|
|
|
|
|
<INPUT TYPE="PASSWORD" |
Создает строку для ввода пароля. Введенная |
|
||||||
NAME="name" SIZE=" "> |
информация отображается звездочками |
|
|
|||||
<INPUT TYPE="RADIO" |
Создает RADIO кнопку (переключатель). За |
|
||||||
NAME="name" VALUE="a"> |
тегом следует текст |
|
|
|
|
|
||
<INPUT TYPE="SUBMIT" |
Создает |
кнопку |
«name», |
пересылает |
|
|||
VALUE="name"> |
заполненную форму по электронной почте |
|
||||||
<INPUT TYPE="IMAGE" |
Создает кнопку «name» – для этого |
|
||||||
BORDER="0" NAME="name" |
используется изображение, находящееся в |
|
||||||
SRC="name.gif"> |
файле |
name.gif. |
Пересылает |
заполненную |
|
|||
|
форму по электронной почте |
|
|
|
||||
<INPUT TYPE="RESET" |
Создает кнопку «name», которая очищает |
|
||||||
VALUE="name"> |
форму |
|
|
|
|
|
|
|
Формы предназначены для размещения ответов на адресованные посетителям вопросы. Web-форма – это то же самое, что и любая другая бумажная форма, но организованная посредством html-файла.
Чаще всего формы используются для:
–проведения опросов;
–получения отзывов.
Формы идеально подходят для включения в личные Web-страницы, поскольку для них требуется очень мало места.
Рассмотрим подробнее приведенные в табл. 20 теги форм.
Текстовое окно
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"> <H2>Textarea
<TEXTAREA NAME="text00" ROWS="5" COLS="30"> </TEXTAREA></H2></FORM>
…
На рис. 76 показано, как будет выглядеть форма в окне браузера.
Рис. 76. Вид Web-страницы в окне браузера
Скролируемое меню
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"><H2>Select <SELECT>
<OPTION VALUE="a">Первый
<OPTION VALUE="b">Второй
<OPTION VALUE="c">Третий <OPTION VALUE="d">Четвертый <OPTION VALUE="e">Пятый </SELECT></H2></FORM>
…
На рис. 77 показано, как будет выглядеть форма в окне браузера.
Рис. 77. Вид Web-страницы в окне браузера
Приведем еще один пример:
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"><H2>Select
<SELECT MULTIPLE NAME="n" SIZE="2"> <OPTION VALUE="a">Первый
<OPTION VALUE="b">Второй
<OPTION VALUE="c">Третий <OPTION VALUE="d">Четвертый <OPTION VALUE="e">Пятый </SELECT></H2></FORM>
…
На рис. 78 показано, как будет выглядеть форма в окне браузера.
Рис. 78. Вид Web-страницы в окне браузера
1.7.2. Элемент INPUT
Создание текстовой строки для ввода текста
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST">
<INPUT TYPE="TEXT" NAME="n" SIZE="23"></FORM>
…
На рис. 79 показано, как будет выглядеть форма в окне браузера.
Рис. 79. Вид Web-страницы в окне браузера
Создание поля «флажок»
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST">
<INPUT TYPE="CHECKBOX" NAME="n"></FORM>
…
На рис. 80 показано, как будет выглядеть форма в окне браузера.
Рис. 80. Вид Web-страницы в окне браузера
Создание строки для ввода пароля
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST">
<INPUT TYPE="PASSWORD" NAME="name" SIZE="5"></FORM>
…
На рис. 81 показано, как будет выглядеть форма в окне браузера.
Рис. 81. Вид Web-страницы в окне браузера
Создание кнопки RADIO
При создании группы переключателей возможно использование двух вариантов:
–выбор одного переключателя из группы переключателей;
–выбор нескольких переключателей из группы переключателей. Отличие при описании переключателей состоит в присвоении имен
(NAME). Для первого варианта эти имена должны быть одинаковые, для второго варианта – различные.
Рассмотрим реализацию данных вариантов на примере создания группы из трех переключателей:
1. Выбор только одного из трех переключателей
Текст программы в блокноте будет выглядеть следующим образом:
…
<FORM METHOD="POST"> <H3> Переключатели </H3>
<INPUT TYPE="RADIO" NAME="s001" VALUE="первый" > <INPUT TYPE="RADIO" NAME="s001" VALUE="второй" > <INPUT TYPE="RADIO" NAME="s001" VALUE="третий" HECKED> </FORM>
…
На рис. 82 показано, как будет выглядеть форма в окне браузера.