Уроки 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