Кадры-фреймы в HTML. Аудио и видео. (Тема 6)

Содержание

Слайд 2

3 определения Понятия: Кадр / фрейм In-line фрейм, плавающий фрейм

3 определения

Понятия:
Кадр / фрейм
In-line фрейм, плавающий фрейм

Слайд 3

СОДЕРЖАНИЕ Горизонтальные, вертикальные, смешанные фреймы Плавающие фреймы – тег iframe. Добавление аудио и видео

СОДЕРЖАНИЕ

Горизонтальные, вертикальные, смешанные фреймы
Плавающие фреймы – тег iframe.
Добавление аудио и

видео
Слайд 4

ТЕГ FRAME И FRAMESET Тег „frame” определяет специальное окно, называемое „frame”-ом.

ТЕГ FRAME И FRAMESET

Тег „frame” определяет специальное окно, называемое „frame”-ом. Данный

элемент не имеет содержания
Тег „frameset” определяет группу фреймов. Данный элемент имеет начальный тег и завершающий тег
Каждый frame определенный в frameset имеет собственные атрибуты
Для правильного использования фреймов в HTML-документе, необходимо правильно установить элемент DOCTYPE! („HTML Frameset DTD" или "XHTML Frameset DTD")
Эти два тега поддерживаются всеми браузерами
Фреймы не поддерживаются HTML5
Слайд 5

АТРИБУТЫ ТЕГА „FRAMESET” Примечание: 1. Атрибуты не поддерживаются HTML5 2. Но, поддерживаются известными браузерами

АТРИБУТЫ ТЕГА „FRAMESET”

Примечание:
1. Атрибуты не поддерживаются HTML5
2. Но, поддерживаются известными

браузерами
Слайд 6

ПРИМЕР ОПРЕДЕЛЕНИЯ ВЕРТИКАЛЬНЫХ FRAME-ОВ Файл GrupFrameuri.html Пример с frame-ами Fisier1.html Frame

ПРИМЕР ОПРЕДЕЛЕНИЯ ВЕРТИКАЛЬНЫХ FRAME-ОВ

Файл GrupFrameuri.html


Пример с frame-ами

/>



Fisier1.html


Frame 1

Первый вертикальный frame




Fisier2.html


Frame 2

Второй вертикальный frame




Fisier3.html


Frame 3

Третий вертикальный frame




Слайд 7

РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 8

ПРИМЕР ОПРЕДЕЛЕНИЯ ГОРИЗОНТАЛЬНЫХ FRAME-ОВ Файл GrupFrameuri.html Пример с frame-ами Fisier1.html Frame

ПРИМЕР ОПРЕДЕЛЕНИЯ ГОРИЗОНТАЛЬНЫХ FRAME-ОВ

Файл GrupFrameuri.html


Пример с frame-ами

/>



Fisier1.html


Frame 1

Первый frame




Fisier2.html


Frame 2

Второй frame




Fişier3.html


Frame 3

Третий frame




Слайд 9

РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 10

АТРИБУТЫ ТЕГА „FRAME” Примечание: Ни один атрибут не поддерживается HTML5

АТРИБУТЫ ТЕГА „FRAME”

Примечание: Ни один атрибут не поддерживается HTML5

Слайд 11

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Frameborder Поддерживается всеми известными браузерами Может

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Frameborder

Поддерживается всеми известными браузерами
Может иметь одно

из двух значений [0, 1]. Пример:





Слайд 12

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Marginheight Поддерживается всеми известными браузерами Пример:

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Marginheight

Поддерживается всеми известными браузерами
Пример:

src="frame1.html" marginheight="100" />



Слайд 13

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Noresize Поддерживается всеми известными браузерами Пример:

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Noresize

Поддерживается всеми известными браузерами
Пример:

src="frame1.html" noresize />



Слайд 14

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Scrolling Поддерживается браузерами Opera şi FireFox Пример:

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Scrolling

Поддерживается браузерами Opera şi FireFox
Пример:





Слайд 15

РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 16

СМЕШАННЫЕ КАДРЫ. Пример Exemplu cu frame-uri

СМЕШАННЫЕ КАДРЫ. Пример



Exemplu cu frame-uri








Слайд 17

РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 18

ТЕГ „IFRAME” Данный тег определяет frame в режиме „inline” In-line-кадр используется

ТЕГ „IFRAME”

Данный тег определяет frame в режиме „inline”
In-line-кадр используется для вставки

другого документа в текущий HTML-документ
Поддерживается браузерами
В версии HTML5 появились новые атрибуты
Пример:




Страницу с информациями о бабочках смотрите здесь...




Слайд 19

АТРИБУТЫ ТЕГА IFRAME Чаще всего используемые атрибуты:

АТРИБУТЫ ТЕГА IFRAME

Чаще всего используемые атрибуты:

Слайд 20

ПРИМЕР 2 Страницу с информациями о бабочках смотрите здесь...

ПРИМЕР 2




Страницу с информациями о бабочках смотрите здесь...





Слайд 21

ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ Будет использован тег „iframe” Будет

ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ

Будет использован тег „iframe”
Будет использована карта

с maps.google.com
Выбирается точка, которую вы хотите отобразить на карте
Слайд 22

ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ 2. Используются опции google.maps

ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ

2. Используются опции google.maps

Слайд 23

ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ 3. Выбирается опция „embed map”

ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ

3. Выбирается опция „embed map”

Будет генерирован

необходимый код, который вы можете копировать в ваш HTML документ
Слайд 24

КОДЫ ДЛЯ ВСТАВКИ КАРТЫ USM Inserarea unui link in iframe Ne gasiti aici...

КОДЫ ДЛЯ ВСТАВКИ КАРТЫ USM



Inserarea unui link in iframe

Ne gasiti

aici...





Слайд 25

РЕЗУЛЬТАТ

РЕЗУЛЬТАТ

Слайд 26

ВСТАВКА АУДИО-ЭЛЕМЕНТА Для вставки разных звуков, аудио, музыки на веб странице

ВСТАВКА АУДИО-ЭЛЕМЕНТА

Для вставки разных звуков, аудио, музыки на веб странице используется

HTML-элемент „audio”. Появился в HTML5
На данный момент поддерживаются 3 формата звуков тега „audio”: MP3, Wav, Ogg
Данный элемент поддерживается всеми браузерами
Слайд 27

СИНТАКСИС И АТРИБУТЫ Синтаксис: Conţinut Атрибуты:

СИНТАКСИС И АТРИБУТЫ

Синтаксис:

Атрибуты:

Слайд 28

ТЕГ „SOURCE” Тег используется для определения нескольких медиа-ресурсов для какого-то медиа-элемента,

ТЕГ „SOURCE”

Тег используется для определения нескольких медиа-ресурсов для какого-то медиа-элемента,

как например
Слайд 29

АТРИБУТ „TYPE” ТЕГА „SOURCE” Атрибут type, может иметь несколько значений: Для

АТРИБУТ „TYPE” ТЕГА „SOURCE”

Атрибут type, может иметь несколько значений:
Для звуковой последовательности:
audio/ogg
audio/mpeg
А

для видео-последовательности:
video/ogg
video/mp4
video/webm
Детали можете посмотреть: http://www.iana.org/assignments/media-types/media-types.xhtml
Оn-line конвертер: http://audio.online-convert.com/
http://video.online-convert.com/
Слайд 30

ПРИМЕР Ваш браузер не поддерживает данный аудио-формат! Vezi rezultatul

ПРИМЕР




Ваш браузер не поддерживает данный

аудио-формат!





Vezi rezultatul
Слайд 31

АТРИБУТ „AUTOPLAY” Ваш браузер не поддерживает данный аудио-формат!

АТРИБУТ „AUTOPLAY”

Ваш браузер не

поддерживает данный аудио-формат!



Слайд 32

ДОБАВЛЕНИЕ ВИДЕО Видео можно добавить на веб страницу при помощи тега

ДОБАВЛЕНИЕ ВИДЕО

Видео можно добавить на веб страницу при помощи тега

который поддерживается всеми веб браузерами
Вместе с ним используется тег „source”
На данный момент поддерживаются 3 видео-формата: MP4, WebM и Ogg
Слайд 33

АТРИБУТЫ ТЕГА „VIDEO”

АТРИБУТЫ ТЕГА „VIDEO”

Слайд 34

ПРИМЕР Ваш браузер не поддерживает данный видео-формат! Rezultat

ПРИМЕР

/>

Ваш браузер не поддерживает данный видео-формат!



Rezultat