Мы продолжаем изучать HTML и в этом коротком уроке мы разберем еще один тег, который используется для вставки внешних объектов. Что это за такие внешние объекты? Внешние объекты это те, которые вставляются в Вашу HTML страницу с какого-то другого сайта, т.е. находятся на чужом сервере. Таким примером внешнего объекта являются видеоролики с YouTube или RuTube.
Давайте попытаемся вставить такие видеоролики в нашу страницу и сделаем это как раз с помощью этого специального тега, который предоставлен сайтом-источником.
Для начала создайте отдельную страницу (файл) object.html для вставки внешних объектов. В нем вставьте HTML шаблон. Взять HTML шаблон можно на этой странице. Открываем сайт YouTube и выбираем любое видео. Затем нажимаем «правый клик» на значок «полный экран» и выбираем пункт «Copy embed code».
Так, мы скопировали код для вставки внешнего объекта видео, который и вставляем в наш HTML шаблон между тегами <body> </body>.
<!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, который так же вставим в наш шаблон.
<!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 позволяющий проигрывать видео на весь экран.
В целом, заострять внимание на эти атрибуты не стоит, так как на все внешние объекты обычно код предоставляется сами издателем, т.е. у него всегда Вы можете получить сгенерированный код.
На этом с вставкой внешних объектов завершим, а мы двигаемся дальше и переходим с следующему уроку.
CSS