alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Тег iframe

Категория: Уроки HTML Просмотров: 779 Коментариев: 0 Дата: 2017-06-03 Добавил: admin

 Тег iframe

Мы продолжаем изучать HTML и в этом коротком уроке мы разберем еще один тег, который используется для вставки внешних объектов. Что это за такие внешние объекты? Внешние объекты это те, которые вставляются в Вашу HTML страницу с какого-то другого сайта, т.е. находятся на чужом сервере. Таким примером внешнего объекта являются видеоролики с YouTube или RuTube.

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

Для начала создайте отдельную страницу (файл) object.html для вставки внешних объектов. В нем вставьте HTML шаблон. Взять HTML шаблон можно на этой странице. Открываем сайт YouTube и выбираем любое видео. Затем нажимаем «правый клик» на значок «полный экран» и выбираем пункт «Copy embed code».

 YouTube

Так, мы скопировали код для вставки внешнего объекта видео, который и вставляем в наш HTML шаблон между тегами <body> </body>.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

Видио с YouTube

<iframe width="854" height="480" src="https://www.youtube.com/embed/UQVxsQWYvkI" frameborder="0" allowfullscreen></iframe> </body> </html>

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

Точно так же получается код внешнего объекта и с RuTube, который так же вставим в наш шаблон.

 RuTube
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

Видио с YouTube

<iframe width="854" height="480" src="https://www.youtube.com/embed/UQVxsQWYvkI" frameborder="0" allowfullscreen> </iframe>

Видио с RuTube

<iframe width="720" height="405" src="//rutube.ru/play/embed/10291127" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe> </body> </html>

Для вставки внешнего элемента, как Вы уж заметили, используется парный тег <iframe> </iframe>. Тег <iframe> - это, по сути, страница в странице, в которой открывается новое окно, в котором она и подгружается.

Тег <iframe> содержит ряд атрибутов: это width и height, которые задают соответственно ширину и высоту нашему объекту; атрибут src указывающий адрес к нашему объекту; атрибут frameborder="0", который указывает отображать рамку или нет; ну и атрибут allowfullscreen позволяющий проигрывать видео на весь экран.

В целом, заострять внимание на эти атрибуты не стоит, так как на все внешние объекты обычно код предоставляется сами издателем, т.е. у него всегда Вы можете получить сгенерированный код.

На этом с вставкой внешних объектов завершим, а мы двигаемся дальше и переходим с следующему уроку.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов