Вставка видеофрагментов

Для вставки видеофайлов типа .aviили анимированных .gif-изображений в текст HTML - документа используется описанный выше тег<IMG>, но с другими атрибутами:

dynsrc=’’Имя AVI-файла’’ - аналогичен параметру src, указывающему путь к файлу с графическим изображением. Определяет путь к AVI-файлу.

Src=’’ Имя файла‘’ - указывает путь к графическому изображению, которое появится в документе вместо видеофрагмента, если его проигрывание невозможно;

start- определяет момент, когда нужно начать проигрывание. Если start=’’FILEOPEN’’, то проигрывание начинается сразу, как только будет загружен файл. Если start=’’MOUSEMOVE’’, проигрывание начнется после помещения курсора на окно для проигрыша видеофрагмента;

сontrols - если этот атрибут указан, то под окном отображаются органы управления проигрыванием;

loop- определяет, сколько раз будет проигрываться видеофрагмент. Если loop=’’INFINITE’’ или loop= -1, то проигрывание будет продолжаться бесконечно, пока страница открыта;

loopdelay- задаёт задержку в миллисекундах перед началом очередной операции проигрывания.

Помимо описанных параметров, в теге<IMG>для видеофрагментовможно использовать и обычные атрибуты<IMG>,использующиеся при размещении графических изображений (см.п.8).

Например: <IMG dynsrc=’’video.avi’’ start=’’fileopen’’ controls loop=5 border=0 align=’’middle’’>

 

 

9.ТАБЛИЦЫ

При создании таблиц используется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (TD, TH).

Внешними элементом таблицы является тег <TABLE> </table>.
Он позволяет задавать общие свойства таблицы и отделяет ее структуру от остальной части Web- страницы. Рассмотрим атрибуты этого элемента.

Таблицу можно выровнять по горизонтали при помощи атрибута align:

align="left" - влево;

align="center" - по центру;

align="right" - вправо.

Ширину таблицы можно задать точно, в пикселях, или в процентном отношении к ширине страницы в окне браузера. Например, width=400 илиwidth=50%

Ширина рамки задается атрибутом:

border=Ширина в пикселях

Заголовок таблицы задается элементом <CAPTION> </caption>. Он выводится на экране вне рамок таблицы. Положением заголовка можно управлять:

align="top" - заголовок над таблицей;

align="bottom" - заголовок под таблицей.

Элементом, создающим строку таблицы, является <TR>. Он не имеет конечного тега. Для выравнивания содержимого всех ячеек в строке можно использовать атрибут align, присваивая ему значенияleft, center илиright. Кроме того, содержимое ячеек можно выравнивать по вертикали:

valign="top" - по верхнему краю;

valign="middle" - по центру;

valign="bottom" - по нижнему краю.

Для ячейки, которая является заголовкомстолбца или строки, применяется элемент <TH>. Этот элемент должен располагаться внутри элемента <TR>. Ячейка-заголовок отличается от обычной тем, что браузер выводит текст внутри нее выделенным (полужирным) шрифтом. Рассмотри некоторые атрибуты этого элемента.

Атрибуты rowspanи colspan позволяют создавать ячейки, которые в несколько раз больше других ячеек таблицы, т.е. ячейки можно объединять:

rowspan=n - ячейка займет n строк;

colspan=n - ячейка займет n столбцов.

Для ячейки можно использовать атрибуты align, valign. Размеры ячеек можно задавать точно:

width=Ширина в пикселях

height=Высота в пикселях
Обычная ячейка определяется элементом <TD>. Для него могут быть использованы те же атрибуты, что и для элемента <TH>.

Оба элемента - <TH> и <TD> - не имеют конечных тегов. Функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы.

Примерпростейшей таблицы, показанной на рис.1:

<TABLE border=4 cellspasing=3>

<CAPTION> <B> Заголовок таблицы </B> </CAPTION>

<TR> <TH bgcolor=’’yellow’’> Заголовок 1

<TH bgcolor=’’yellow’’> Заголовок 2

<TR><TD> Ячейка 1

<TD> Ячейка 2

<TR><TD> Ячейка 3

<TD> Ячейка 4

</TABLE>

 

Заголовок таблицы

Заголовок 1	Заголовок 2
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

 

Рис.1. Пример таблицы

ФРЕЙМЫ

Фреймыпредставляют собой окна на странице HTML - документа, в каждом из которых отображается содержимое отдельного HTML - файла. При создании страниц с фреймами разрабатывается и используется несколько HTML - файлов. Документраскладки используется для создания структуры web- страницы, то есть разделения её на несколько областей. Документы содержания предназначены для заполнения информацией каждой из областей и являются обычными HTML - документами. Документ раскладки описывает размеры, расположение и имена содержимого фреймов. По своей структуре этот документ отличается от обычных web- страниц. В начале этого документа нет тега <BODY>, вместо которого там используется тег определения набора фреймов <FRAMESET> в паре с </FRAMESET>. Атрибуты этого тега описывают набор фреймов в целом, задавая размеры, внешний вид рамки и т.д.:
cols - задает вертикальное деление экрана. Ширина колонки может задаваться в процентах от общей ширины экрана: cols=25%, 75% - левая вертикальная область в три раза уже правой, либо в пикселах: cols=250, 350, * .Здесь символ * используется для обозначения оставшейся части экрана.

· rows- задает горизонтальное деление экрана. Высота строк также задается либо в процентах: rows=10%, 85%, 5%,либо в пикселах: rows=100, 60%,* -верхняя область занимает 100 пикселов по высоте, средняя - 60% доступного пространства, а нижняя - оставшуюся область.

· frameborder - если значение этого параметра равно 1, то фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В случае, когда frameborder=0, рамка не создается.

· border- задает толщину рамки фрейма в пикселах.

· framespacing - задает дополнительное расстояние между фреймами в пикселах.

· Между тегами <FRAMESET>и </FRAMESET>находятся теги <FRAME>, определяющие параметры отдельных фреймов, имеющие обязательный атрибут src, определяющий адрес файла с документом HTML, загружаемого в окно фрейма. Завершающего тега <FRAME> не имеет. Помимо src,тег <FRAME>имеет следующие атрибуты:

· frameborder- значение этого атрибута аналогично одноименному в теге <FRAMESET>,но касается уже только одного фрейма.

· scrolling- определяет, нужно ли создавать полосы прокрутки для просмотра содержимого фрейма: scrolling=YES -полосы прокрутки создаются всегда; scrolling=NO -полосы прокрутки не создаются; scrolling=AUTO -полосы прокрутки создаются только по необходимости, когда документ не помещается в окне фрейма. Если атрибут не указан, то полосы прокрутки создаются по необходимости.

· noresize - если указан этот параметр, пользователь не сможет изменять размеры фрейма, перемещая его границы мышью.

Д.1 (лев. часть)

Документ 2 (правая часть)

 

Рис.2. Пример web- страницы с вертикальными фреймами
Фреймы, показанные на рис.2, описывает следующий документ:

<HTML>

<HEAD>

<TITLE> Фреймы </title></head>

<FRAMESET cols=’’20%, 80%’’>

<FRAME src=’’fr1.htm’’ noresize>

<FRAME src=’’fr2.htm’’ scrolling=’’no’’>

</FRAMESET>

</html>

 

Для того, чтобы одновременно поделить область просмотра по вертикали и по горизонтали, следует создать вложенный элемент <FRAMESET>.

Например : документ

<HTML>

<HEAD>

<TITLE> Фреймы </title></head>

<FRAMESET rows=’’20%, 60%,20%’’>

<FRAME src=’’fr1.htm’’ noresize>

<FRAMESET cols=’’25%, 75%’’>

<FRAME src=’’fr2.htm’’ >

<FRAME src=’’fr3.htm’’ scrolling=’’yes’’>

</FRAMESET>

<FRAME src=’’fr4.htm’’ scrolling=’’no’’>

</FRAMESET>

</html>

описывает структуру страницы, показанную на рис.3:

 

Верхняя часть страницы
Левая часть	Правая часть страницы
Нижняя часть страницы

 

Рис.3. Пример web- страницы

с фреймами разных типов

 

Помимо тегов <FRAME>,между <FRAMESET> и </FRAMESET>после всех описаний фреймов желательно разместить теги <NOFRAME>и </NOFRAME>,между которыми будет расположен обычный документ HTML, начинающийся с <BODY> и отображающийся навигаторами, не способными работать с фреймами.

Плавающие фреймы

Плавающий фрейм вставляется в тело обычного документа HTML аналогично графическому изображению при помощи тега <IFRAME>, использующегося в паре с </IFRAME>.

Обязательным атрибутом этого тега является src, определяющий имя документа, помещаемого в окно плавающего фрейма и аналогичный по использованию одноименному параметру тега <FRAME>: <IFRAME src=’’fr2.htm’’ >.

Помимо этого, для тега <IFRAME> можно задавать атрибуты align - выравнивание текста, расположенного рядом с фреймом (значения аналогичны align в <IMG>), width и heigh - высота и ширина фрейма (измеряются в пикселах), атрибуты frameborder и scrolling аналогичны одноименным в <FRAMESET>.

Например:

<HTML>

<HEAD>

<TITLE> Фрейм </title></head>

<BODY bgcolor=’’#FFFFFF’’>

Плавающий фрейм: <P>

<IFRAME src=’’fr1.htm’’ align=left frameborder=1 scrolling=’’Yes’’>

</IFRAME> Текст, расположенный справа от фрейма.

<BR> Текст, расположенный ниже фрейма.

</body>

</html>

ФОРМЫ

 

Формойв HTML называется конструкция для ведения диалога с пользователем. Обычно формы содержат в себе различные элементы управления: выбор пункта меню, область для ввода текста, пароль, список, выпадающее меню, кнопки и др. элементы.

Для построения сложных форм используются теги <FORM> и </FORM>, между которыми находятся описания органов управления формой (кнопок, меню, паролей и т.п.) в виде тегов <INPUT>, <SELECT>, <TEXTAREA> и др. После заполнения формы и подтверждения ввода со стороны пользователя введенная информация пересылается на сервер
и обрабатывается при помощи специальной CGI - программы, связанной с формой. Тег <FORM> имеет атрибуты:

action - указание на имя программы, обрабатывающей форму: action =’’http://www. название. домен /имя программы’’.

Одним из вариантов обработки может быть пересылка по электронной почте: аction=’’mailto: Адрес@название.домен’’.

metrhod- применяется для указания протокола, используемого для пересылки данных на сервер. Протокол GET выбран по умолчанию, но в большинстве случаев разработчики предпочитают метод POST;

enctype- указание способа кодирования содержимого формы (используется редко).

Например:

<FORM method = POST action =’’http://www.serv.ru./cgi/form.exe>

{теги, описывающие элементы управления в форме} </FORM >.

Примечание: для выполнения лабораторной работы достаточно указать в HTML - документе только теги элементов управления формой, не указывая <FORM>, так как программная обработка через Internet форм, содержащихся в лабораторных заданиях, не предусмотрена.

 

Для создания в форме различных органов управления используются теги <INPUT>, <TEXTAREA> и <SELECT>.

Элемент <INPUT>позволяет создавать такие элементы управления как флажки, поля ввода текста, кнопки, переключатели. Элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов.

Вид элемента определяет атрибут type.

1. type=’’text’’ - создание строки ввода текста. Ширина строки задается с помощью атрибута sizeв символах: size=80. По умолчанию ширина равна 20 символам. Атрибут value позволяет автоматически разместить в строке произвольный текст: value=’’сообщение’’. По умолчанию поле ввода текста является пустым. Атрибут maxlength определяет максимальную длину строки, записанной в поле ввода текста: maxlength=60. По умолчанию это ограничение отсутствует.

Например: <INPUT type=’’text’’ size=70>

2. type=’’password’’- создание строки для ввода пароля Введенная информация отображается звездочками.

3. type=’’checkbox’’- создание флажка: .

Обычно в формах используют несколько флажков, означающих выбор одного или нескольких пунктов текста. С этим элементом используется атрибут checked,который определяет, какой из флажков должен быть выбран по умолчанию (то есть, в нем должна стоять галочка). Можно выбрать сразу несколько флажков.

Например: <P> Вы имеете дома:

<INPUT type=’’checkbox’’ name=’’F001’’ > Телевизор<BR>

<INPUT type=’’checkbox’’ name=’’F001’’ checked> Телефон <BR>

<INPUT type=’’checkbox’’ name=’’F001’’ checked > Видео <BR>

<INPUT type=’’checkbox’’ name=’’F001’’ > Холодильник <BR>

</P>

4.type=’’radio’’- определение одного переключателя: .

Для создания группы переключателей нужно использовать несколько элементов <INPUT>.Атрибут checkedопределяет выбранный по умолчанию переключатель. В отличие от флажков, переключатель может быть выбран только один.

Например: <P> Ваш возраст:

<INPUT type=’’radio’’ name=’’S001’’ checked > до 20 лет<BR>

<INPUT type=’’ radio’’ name=’’S001’’ > от 20 до 30 лет<BR>

<INPUT type=’’ radio’’ name=’’S001’’ > от 30 до 45 лет<BR>

<INPUT type=’’ radio’’ name=’’S001’’ > более 45 лет<BR>

</P>

Для всех вышеописанных элементов должен использоваться атрибут name , определяющий имя поля формы, посылаемое программе обработки формы на сервере:name=’’F001’’.

5.type=’’submit’’- создание кнопки, нажатие на которую подтверждает ввод информации в форму. Атрибут valueиспользуется для определения надписи на кнопке: value=’’Ввод закончен’’.

6.type=’’reset’’ -кнопка для отмены ввода данных в форму. Атрибут valueимеет тот же смысл, как и у ’’submit’’.

Элементы <SELECT> <OPTION> </select> предназначены для создания списка или меню на гипертекстовой странице.

<SELECT>и </select>создают список или выпадающее меню, а <OPTION>создает пункт списка.

Для тега <SELECT>используются три атрибута: nameопределяет имя меню (см. тег <INPUT>). При помощи атрибута multiple пользователю разрешается выбрать сразу несколько пунктов списка. Атрибут size определяет количество видимых
на экране пунктов списка. Когда sizeне использован, список выглядит обычным образом: сначала видна только первая строка, а позиционирование на ней указателя мыши раскрывает список (так называемое выпадающее меню). Если значение атрибута задано, то список не раскрывается, а прокручивается, причем пользователь видит только указанное количество строк.

Элемент <OPTION> имеет два атрибута: selectedопределяет, какой из пунктов списка должен быть выбран по умолчанию при загрузке страницы. Таким способом может быть помечен только один элемент. Атрибут valueиспользуется для обработки данных на стороне сервера. Выбранный пункт списка характеризуется значениями возвращенных атрибутов name и value.

Пример списка:

<P> <H2> Выберите дисциплину для сдачи зачета: <SELECT>

<OPTION value=a selected> Архитектура ВС и сетей

<OPTION value=b> Операционные системы

<OPTION value=c> Базы данных

<OPTION value=d> Культурология

</SELECT></H2></P>

 

Элемент <TEXTAREA> ..</textarea> позволяет создать область для ввода или просмотра текста. Размеры области создаются при помощи атрибутов rows (количество строк) и cols(количество столбцов). Назначение атрибутаname точно такое же, как и в предыдущих случаях.

Например: <TEXTAREA name=’’text001’’ rows=5 cols=30>

Текст, отображенный в окне ввода

</textarea>

 

Элементы <TEXTAREA>и <SELECT> могут быть использованы не в составе формы, а как самостоятельные детали web-страницы.

Практическая часть

 

Практическая часть включает в себя выполнение шести лабораторных работ, темы которых приведены ниже (конкретное содержание страницы указывает преподаватель):

 

1. Web- страница с графическими картинками, разными типами фона, шрифтов и гипертекстовыми ссылками.

2. Страница с видеофрагментом (файл .avi или анимированный .gif) и бегущей строкой.

3. Страница с закладками и таблицей.

4. Страница с интерактивными графическими изображениями:

· типа "ссылка-картинка", т.е. вставка графической картинки в гипертекстовую ссылку;

· сегментированные графические картинки-ссылки (типа MAP).

5. Документ HTML с фреймами 2-х типов:

· разделение страницы;

· плавающий фрейм.

6. Документ HTML с формами:

· кнопки;

· пароль;

· окно для ввода текста;

· выпадающее меню;

· переключатели типа "RADIO";

· флажки.

 

7.Создание Web- страницы с использованием языка JavaScript (является дополнительной самостоятельной лабораторной работой):

· страница с таймером и считыванием системного времени

· интерактивная страница - анкета с различными вариантами выбора в зависимости от ответов пользователя.

 

Примечание: для студентов дневного отделения специальности 220400 лабораторная работа № 7 входит в основной перечень.

Содержание отчета

Отчет должен включать:

1.Титульный лист.

2.Распечатку текстов созданных HTML - документов с пояснением, к какой лабораторной работе относится каждый документ.

3.Подробные комментарии каждого впервые встречающегося тега, включая пояснения значений атрибутов этого тега.

При выполнении лабораторных работ в случае необходимости следует обращаться к более полному описанию программных средств. Список литературных источников приведен ниже.

 

ЛИТЕРАТУРА

основная

1. Фролов А.В., Фролов Г.В. Глобальные сети компьютеров. - М.: Диалог. - МИФИ 1996.

2. Фролов А.В., Фролов Г.В. Сервер Web своими руками. - М.: Диалог. - МИФИ 1997.

3. Гончаров А. HTML в примерах . - СПб.: Питер 1997.

4. Морис Б. HTML в действии . - СПб.: Питер 1997.

дополнительная

5. Крол Э. Все об Internet. -Киев: Торгово-издат. бюро BHV 1995

6. Нольден М. Знакомьтесь: World Wide Web. -Киев: Торгово-издательское бюро BHV 1996.

7. Крейнек Дж. Netscape Navigator c Windows^95. - М.: Компьютер, ЮНИТИ 1996.

8. Волш А.И. Основы программирования на Java для World Wide Web. - Киев: Диалектика 1996.

Федоров А.Г. JavaScript для всех. -М.:КомпьютерПресс 1998.