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



Мы поможем в написании ваших работ!


Мы поможем в написании ваших работ!



Мы поможем в написании ваших работ!


ЗНАЕТЕ ЛИ ВЫ?

Воспроизведение видео в 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> <THalign=”center”>

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

</tr>

<TR align=”center”>

<TDalign=”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”>

<THwidth=”35%”>Заголовок 1</th> <THcolspan=”2”>

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

</tr>

<TR>

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

</tr>

<TR>

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

</tr>

<TR>

<TD>Ячейка 3-1 </td> <TDrowspan=”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>

<TDcolspan=”3” align=”center” bgcolor=”#ffee00”>

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

</tr>

</table>

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

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

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

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

 

 

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



Последнее изменение этой страницы: 2016-04-18; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 35.172.203.87 (0.012 с.)