Урок #19: Что такое HTML iframe и с чем их «едят»?

Всем привет дорогие друзья! В сегодняшнем очередном уроке по изучения языка HTML мы поговорим про iframe. Говоря простым языком — iframe это отображение страницы сайта внутри сайта. Т.е как бы сайт в сайте.

Выглядит он следующим образом:

Синтаксис iframe

Определяется очень просто парными тегами <iframe></iframe>

Пример:

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

Установка высоты и ширины iframe

Используйте обязательные атрибуты высоты (height) и ширины (width) для задания iframe размера.

Как мы видим из примера выше нам подгрузился iframe страницы с названием demo_iframe.html содержимое которого мы видим на экране.

Для определения высота и длины фрейма вы можете прибегнуть за помощью к таблице стилей CSS, т.е использовать внутренние CSS стили.

Пример:

Удаление границы рамки iframe

По умолчанию вокруг нашего фрейма проходит рамка, чтобы ее удалить достаточно прописать некоторые стили и добавить свойство border:none;  где значение None означает не использовать рамку.

Используя дополнительные стили можно задать размер, цвет границы. Ниже пример все демонстрирует:

Как мы видим мы задали размер в 2px границам iframe и сделали ее красного цвета.

Атрибут target для ссылки в iframe

Iframe может использоваться как ссылка, таким образом мы ссылаемся на iframe у которого присвоено имя name:

Т.е у нас изначально есть iframe в первой строчке и ему присвоено имя name=iframe_a  А следующая строчка его подгружает, благодаря атрибуту target с этим же именем.

Сейчас объясню механику примера. Изначально у нас подгрузился фрейм с другой страницы по умолчанию. В тексте параграфа мы видим ссылку, нажав на которую мы в области нашего исходного фрейма увидим сайт ссылку которого мы указали в href. Т.е получится вот такой результат:

На этом наш короткий урок, посвященный iframe в html подошел к концу. Я немного активизировался в предверии поставленной цели в 1000 уникальных посетителей в день. Поддержите мой проект. Рассказывайте о нем своим знакомым. Сделаем интернет интереснее, познавательнее и чище!