Уроки HTML, CSS Как отобразить другой сайт внутри вашего сайта, тег iframe
Привет друзья! Сегодня мы с вами разберем такой классный тег iframe. Он позволяет вам отображать чужой сайт на вашем сайте, т.е. вы можете вставить чужой сайт к вам на страницу. 👍
Отображаемый контент другого сайта на вашем сайте – можно использовать например для показа рекламы (как делают на сайтах с фильмами) или для отображения сопутствующей информации. У этого тега iframe – можно пометить границы отображаемого контента, можно установить ширину width и высоту height отображаемой области сайта на экране. 😊
iframe – это контейнер, содержание которого игнорируется браузерами, не поддерживающими данный элемент. Для таких браузеров указывается альтернативный текст, который увидят пользователи. Он располагается между открывающим и закрывающим тегами iframe.
Синтаксис
[iframe]...[/iframe]
Атрибуты
Align - Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
Allowtransparency - Устанавливает прозрачный фон фрейма, через который виден фон страницы.
Frameborder - Устанавливает, отображать границу вокруг фрейма или нет.
Height - Высота фрейма.
Hspace - Горизонтальный отступ от фрейма до окружающего контента.
Marginheight - Отступ сверху и снизу от содержания до границы фрейма.
Marginwidth - Отступ слева и справа от содержания до границы фрейма.
Name - Имя фрейма.
Sandbox - Позволяет задать ряд ограничений на контент загружаемый во фрейме.
Значения
- allow-forms - Позволяет содержимому фрейма отправлять формы.
- allow-modals - Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.
- allow-orientation-lock - Позволяет отключать возможность блокировки экрана.
- allow-pointer-lock - Позволяет фрейму использовать Pointer Lock API.
- allow-popups - Разрешает всплывающие окна (такие как , target=“_blank“, showModalDialog).
- allow-presentation - Разрешает фрейму использовать Presentation API.
- allow-same-origin - Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.
- allow-scripts - Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.
- allow-top-navigation - Позволяет открывать ссылки фрейма в родительском документе.
Scrolling - Способ отображения полосы прокрутки во фрейме.
Значения
- auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
- no — Запрещает отображение полос прокрутки.
- yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.
Seamless - Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
Src - Путь к файлу, содержимое которого будет загружаться во фрейм.
Srcdoc - Хранит содержимое фрейма непосредственно в атрибуте.
Vspace - Вертикальный отступ от фрейма до окружающего контента.
Width - Ширина фрейма.
Помните что контент внутри этого тега браузерами не индексируется с привязкой к вашему сайту! Он индексируется на том сайте, который вы подключаете. 😊
Пример из видео:
[!DOCTYPE html]
[html lang=“en“]
[head]
[meta charset=“UTF-8“]
[title]Document[/title]
[/head]
[body]
[h1]Пример отображения сайта внутри другого сайта[/h1]
[p]наш контент наш контент наш контент [/p]
[iframe src=“здесь вставьте ссылку на сайт донер 😊 “ frameborder=“1“ width=“800px“ height=“400px“][/iframe]
[/body]
[/html]
*** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT:
1) Урок на сайте Wiseplat:
✔ Сообщество программистов:
✔ -------------
Вступай в группу Вк - 🚀
Группа FaceBook -
Инстаграм Wiseplat:
Instagram:
Twitter -
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #iframe
52 views
230
49
1 month ago 00:11:49 1
Узор ЛИСТЬЯ спицами 🍃 Красивый ажур для кофточек + СХЕМА
1 month ago 00:05:49 1
Разминка для детей перед тренировкой по гимнастике дома. Онлайн урок по художественной гимнастики
3 months ago 00:09:46 9
Стоячие волны в Трансформаторе Тесла, резонанс, коэффициент трансформации
4 months ago 00:46:04 1
Paradise lost. Иконы gothic doom death metal на виниле. Vinyl review.
4 months ago 00:14:19 1
Урок технологии в 5 классе. Разметка заготовок из древесины
4 months ago 01:11:16 1
“Сирень“ Сергей Николаевич Андрияка
4 months ago 00:14:08 1
Случаи употребления Past Simple / прошедшего простого времени.
4 months ago 00:03:53 1
НЕХОРОШАЯ ❤️ Слезу вышибает эта песня под гармонь
4 months ago 00:12:59 1
Видеоурок по русскому языку “Стили речи“
4 months ago 00:06:15 1
Lightroom не принимает формат RAW вашего фотоаппарата ?Всё просто
4 months ago 00:53:09 1
Викторианская эпоха / Уроки Истории / МИНАЕВ
4 months ago 00:01:00 1
Презентация. Синяя экскурсия экскурсия Брестской крепости
4 months ago 00:17:48 3
Web Dev полый курс с нуля. Урок 1. Введение. План разработки
4 months ago 00:29:23 1
Вам врали про Шекспира
4 months ago 00:04:36 1
РАЗНОСТЬ ВЕКТОРОВ геометрия 9 Атанасян
4 months ago 00:13:51 10
Пишем TELEGRAM бота на Python с ОПЛАТОЙ ⭐️ Звёздами
4 months ago 00:06:45 1
Как слова и мысли создают и формируют нашу жизнь
4 months ago 00:14:12 1
How To crochet Flat Flower Урок 19 Вязание Цветка крючком
4 months ago 00:47:51 1
Adobe Animate - Покадровая анимация огня | Урок 6
4 months ago 00:00:30 1
Как вернуть себе жизненную силу #shorts
4 months ago 00:12:25 1
069. Это лучше того, зачем мы пришли. Достоверная сира.
4 months ago 00:06:50 1
Снежинка Канзаши Мастер Класс ✄ Kulikova Anastasia
4 months ago 00:12:59 1
Как играть Агата Кристи-Я БУДУ ТАМ | Детальный разбор с табулатурами