Воспроизведение видео в Internet Explorer

Файлы видео встраивают в Web-страницы при помощи атрибута DYNSRC=… тега <IMG>. Тег загружает некоторое встроенное в операционную систему программное обеспечение, предназначенное для воспроизведения видеоклипов. Обычно это OuickTime.

Атрибут START=… определяет каким образом задается начало воспроизведения. Значение openfile обеспечивает запуск видео автоматически при загрузке файла. Значение mouseover инициирует воспроизведение видео при наведении курсора на изображении-ссылке.

Атрибут LOOP=… задает количество повторов видеоклипов. Если нужно задать количество повторений бесконечным, надо ввести ключевое слово infinite.

Примеры

1. <IMG DYNSRC=”file.avi” START= "mouseover” LOOP= “infinite”>

2. <A href="pr1_21.htm"> <img dynsrc="pr1_21.mpg"

alt="pr1_21.mpg" width=”215” height=”160” align=”left”

hspace=”10” vspace=”5” start=”mouseover”>

Рис.1.1 (анимационный) </a>

Здесь анимационный файл используется в качестве графической ссылки для демонстрации файла pr1_21.htm, содержащего ту же анимационную сцену, на полном экране. При наведении курсора мыши на ссылку она начинает анимироваться.

Бегущая строка

Ниже представлен пример встраивания бегущей строки в Web-страницы при помощи тега <marquee…>.

<marquee height=”25” width=”50%” hspace=”5” vspace=”5”

bgcolor=”#ffffcc” direction=”left” loop=”infinite”

scrollamount=”3” behavior=”alternate”>

Ниже приводится краткая инструкця для начинающих пользователей

персональногокомпьютера. Прочтите ее "на всякий случай"!

</marquee>

Атрибуты:

– Height, Width – высота и ширина окна;

– Hspace, Vspace – ширина и высота пустых полей вокруг окна;

– Bgcolor – цвет фона окна;

– Direction – направление движения бегущей строки: Left, Right, Up, Down;

– Loop – количество циклов повторения (значение infinite – непрерывный цикл);

– Scrollamount – длина в пикселах, на которую текст перемещается за один такт процессора (скорость движения);

– Behavior – задает характер движения бегущей строки: Alternate – переменное направление перемещения; Slide – строка вытягивается из одного края и останавливается у другого.

Организация возвратов

Для организаци возвратов (обратных переходов) по связанным документам HTML удобно использовать встроенную функцию JavaScript: history.back.

Пример

<А href="javascript:history.back(1)"> назад </a>

Задание к лабораторной работе №4

1. Привести примеры упорядоченных и неупорядоченных списков. Каждая группа форматированного текста должна содержать не менее 10 элементов и 3-х уровней вложенности. На каждом уровне необходимо применить свой маркер или тип индексации.

2. Разработать таблицу данных с использованием тега предварительного форматирования <PRE>. Таблица должна содержать заголовок, названия столбцов и 5 строк данных.

3. Включить в документ HTML примеры форматирования текста на основе тега выделения цитат <BLOCKQUOTE>.

4. Включить в программу примеры воспроизведения цифрового видео (атрибут DYNSRC=… тега <IMG>).

5. Разработать бегущую строку текста.

6. Создать возвратные гиперссылки между документами на основе встроенной функции JavaScript: history.back.

 

 

Лабораторная работа №5

Разработка таблиц

1.5.1. Методические рекомендации

Таблицы используются для представления информации в виде горизонтальных рядов и вертикальных колонок или для форматирования текста и графики. Каждая клетка таблицы называется ячейкой.

Ячейки могут содержать в себе текст, графику, или другую таблицу. Текст и графика внутри ячейки могут представлять собой внешние или внутренние ссылки.

Начинается каждая новая таблица тегом <TABLE>, а заканчивается парным ему тегом </table>. Тег <TABLE> задает базовые характеристики таблицы – расстояния между ячейками, ширину таблицы относительно экрана и т. п. Например, следующая пара тегов

<TABLE ALIGN=”center” BORDER=”2” WIDTH=”50%”>

………………………………………………………………

</ table >

описывает таблицу, выровненную по центру экрана, занимающую 50 процентов ширины экрана (атрибут WIDTH=…) и имеющую рамку размером в 2 пикселя (атрибут BORDER=…). Если атрибут BORDER не задан или равен 0, рамка не отображается.

Ширину таблицы можно задавать в абсолютных значениях (в пикселах) или в процентах от ширины окна браузера. Если ширина не задана, размер таблицы по ширине определяется программно и зависит от размеров и особенностей форматирования текста (или графики) внутри ячеек.

Высота всей таблицы и, соответственно, отдельных ее ячеек может быть определена атрибутом HEIGHT=… тега <TABLE>. Если этот атрибут не задан, высота программно устанавливается в зависимости от размера шрифта и особенностей форматирования текста внутри ячеек.

Каждый ряд таблицы описывается парой тегов <TR> и </tr>. Колонки внутри каждого ряда описываются тегами <TD> и </td>. Содержимое каждой ячейки (это может быть текст, графическое изображение, новая таблица, ссылка и т.п.) помещается между тегами <TD> и </ td >.

Тег <CAPTION> внутри тега <TABLE> описывает заголовок таблицы. При помощи атрибута Align заголовок может быть размещен сверху (значение top) или внизу таблицы (значение bottom).

Теги <TH> и </th> внутри тега <TABLE> задают названия столбцов.

Рассмотрим пример простой таблицы.

Пример 1

<table width=”350” height=”200” border=”2” frame=”box”

rules=”all” align=”left” bgcolor=”#ccccff”

background=”name.jpg”>

<caption align=”top”> <H3> Пример простой таблицы </caption></h3>

<TR align=”center bgcolor=”#ffff00”>

<TH> Колонка 1 </th><TH> Колонка 2 </th> <TH> Колонка 3 </th>

</tr>

<TR>

<TD> Ячейка 1-1 </td><TD> Ячейка 1-2 </td><TD> Ячейка 1-3 </td>

</tr>

<TR>

<TD> Ячейка 2-1 </td><TD> Ячей ка 2-2 </td><TD> Ячейка 2-3 </td>

</tr>

<TR>

<TD> Ячейка 3-1 </td><TD> Ячей ка 3-2 </td><TD> Ячейка 3-3 </td>

</tr>

</table>

Определение структуры и цветовое оформление таблиц

Атрибут BGCOLOR=… тега <TABLE> задает цвет фона всей таблицы, а атрибут BGCOLOR=… тега <TR> определяет цвет фона текущей строки таблицы. Аналогично в теге <TD> можно задать цвет фона отдельной ячейки таблицы.

Атрибут bordercolor=… задает цвет всей рамки.

Атрибут bordercolorlight=… задает цвет светлой стороны рамки.

Атрибут bordercolordark=… задает цвет темной стороны рамки.

Атрибут cellspacing=… задает расстояние между ячейками таблицы.

Атрибут cellpadding=… задает расстояние между рамкой таблицы и ее содержимым.

Атрибут frame=… определяет форму внешней рамки таблицы:

– vsides – отображаются только вертикальные линии;

– hsides – отображаются только горизонтальные линии;

– box –отображается вся рамка.

Атрибут rules=… определяет форму рамок внутри таблицы:

– all –отображаются все части рамки внутри таблицы;

– rows – отображаются горизонтальные части рамки;

– сols – отображаются вертикальные части рамки.

 

Рассмотрим пример таблицы, содержащей графику.

Пример 2

<table height=”200” border=”2” align=”right”

bgcolor=”#ccccff” cellspacing=”10” cellpadding=”5”>

<caption align=”top”><h3> Таблица c графикой и ссылками ></h3>

</caption>

<TR bgcolor=”#ffff00”>

<TH> Колонка 1 </th> <TH> Колонка 2 </th> <TH> Колонка 3 </th>

</tr>

<TR>

<td> Ячейка 1-1 </td> <TD> Ячейка 1- 2 </td>

<TD> <IMGSRC="images/car.jpg"> </td>

</tr>

<TR>

<TD> Ячейка 2-1 </td> <TD> Ячейка2-2 </td> <TD> Ячейка 2-3 </td>

</tr>

<TR>

<TD> <A HREF="test-2.htm"> <IMG SRC="images/cat.jpg"> </a> </td>

<TD> Ячейка 3-2 </td> <TD> Ячейка 3-3 </td>

</tr>

</table>

Выравнивание в таблицах

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

Атрибут Align и Valign в теге <TR> обеспечивает горизонтальное и вертикальное выравнивание содержимого всего ряда.

Если нужно сделать горизонтальное и вертикальное выравнивание в отдельных ячейках, это делают с помощью атрибута Align в тегах <TH> и <TD>.

Тег <COLGROUP> распространяет действие выравнивания (атрибут Align=…) в одной ячейке на весь столбец.

Атрибут объединения Span=… распространяет действие тега <COLGROUP> на несколько столбцов.

Пример 3

<table align=”left” width=”350” height=”300” border=”6”

frame=”box” rules=”all” bgcolor=”#ccccff” cellspacing=”8’

bordercolorlight=”#ffffff“ bordercolordark=”#666666”>

<colgroup align=”center” span=”2”>

<colgroup align=”right”>

<caption align=”left”> <H3> Пример простой таблицы </caption></h3>

<TR bgcolor=”#ffff00”>

<TH> Колонка 1 </th> <TH> Колонка 2 </th> <TH align=”center” >

Колонка 3 </th>

</tr>

<TR align=”center”>

<TD align=”top” > Ячейка 1-1 </td><TD> Ячейка 1-2 </td>

<TD> Ячейка 1-3 </td>

</tr>

<TR>

<TD> Ячейка 2-1 </td> <TD> Ячейка 2-2 </td> <TD> Ячейка 2-3 </td>

</tr>

<TR>

<TD> Ячейка 3-1 </td> <TD> Ячейка 3-2 </td> <TD> Ячейка 3-3 </td>

</tr>

</table>

Составные ячейки

Несколько ячеек можно объединять в одну как по горизонтали, так и по вертикали.

Атрибут COLSPAN=… объединяет несколько ячеек в ряду в одну широкую ячейку.

Атрибут ROWSPAN=… объединяет несколько ячеек по высоте в одну высокую ячейку.

Пример 4

<table align=”center” width=”400” border=”2”

bgcolor =”#ccccff”>

<caption><font size=”4” color=”#aa0000”>

Пример составной таблицы! </caption>

<TR bgcolor =”#ffee00”>

<TH width=”35%” > Заголовок 1 </th> <TH colspan=”2” >

Заголовок 2 </th>

</tr>

<TR>

<TD> Ячейка 1-1 </td> <TD> Ячейка 1-2 </td> <TD> Ячейка 1-3 </td>

</tr>

<TR>

<TD> Ячейка 2-1 </td> <TD colspan=”2” > Ячейка 2-2 </td>

</tr>

<TR>

<TD> Ячейка 3-1 </td> <TD rowspan=”2” align=” center”

bgcolor=”#ffee33” > Ячейка 3-2 </td> <TD> Ячейка 3-3 </td>

</tr>

<TR>

<TD> Ячейка 4-2 </td> <TD> Ячейка 4-3 </td>

</tr>

<TR>

<TD> Ячейка 5-1 </td> <TD> Ячейка 5-2 </td> <TD> Ячейка 5-3 </td>

</tr>

<TR>

<TD colspan=”3” align=”center” bgcolor=”#ffee00” >

Конец составной таблицы! </td>

</tr>

</table>

Задание к лабораторной работе №5

1. Создать простую таблицу, содержащую заголовки столбцов, 4 столбца и 5 строк. Привести примеры оформления рамок таблицы и ячеек.

2. Создать таблицу, содержащую ячейки с текстом и графическими изображениями.

3. Разработать составную таблицу. Включить в нее текстовые и графические ссылки на следующие страницы связанного HTML-документа.

 

 

Лабораторная работа №6