Как вставить в HTML iframe: пример использования

На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки , и признаны устаревшими. Заменой им стал один-единственный тег &ndash; <iframe>. Как добавить в html <iframe>? Пример ниже будет понятен даже новичку в программировании.</p> <a name="Что-такое-фреймы" class="page-contents-link"></a><h2>Что такое фреймы?</h2> <div class="ads content_start"><div class="ads-title ggc sidebar-title">Реклама</div><a href="/partnergo?to=https://vk.cc/a60317" style="display:flex; border: 1px solid #e2e2e2; background: #3092c0; padding:10px; flex-direction:column; align-items:center; text-decoration:none;"> <div style="font-size:22px; font-weight:600; color:#fff;">Канал о подготовке к экзаменам</div> <span style="color:#fff; margin:20px 0;">Подпишись, чтобы не пропустить новые видео и самостоятельно подготовиться к ОГЭ и ЕГЭ</span> <iframe width="100%" src="https://www.youtube.com/embed?listType=playlist&list=PLH882WYHEmJ3zW5w5AWeE9L4nmInx0ziY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width:100%"></iframe> </a></div><p>Фрейм &ndash; основа большинства первых веб-страниц. Если переводить дословно, данное слово означает &laquo;кадр&raquo;, то есть фрейм представляет собой небольшую часть страницы в браузере. Повсеместное использование фреймов в прошлом можно объяснить низким качеством и дороговизной интернет-трафика. Как правило, сайт разбивался на 3-5 частей, каждая из которых выполняла определённое назначение:</p> <ul> <li>&laquo;шапка&raquo; (верхний фрейм по ширине страницы) &ndash; отображение название ресурса;</li> <li>левый/правый &laquo;стакан&raquo; &ndash; вывод меню;</li> <li>центральный фрейм &ndash; показ контента сайта.</li> </ul> <p class="post-other"> <a href="/sajtostroenie/6059-konstruktor-sajtov-nethouse-otzyvy/"><img src="/wp-content/uploads/2018/11/3dc4ea5384db61ec40a38258a68896b9-150x150.jpg" alt="Конструктор сайтов Nethouse: отзывы"></a><span class="post-other-desc"><span class="desc">Вам будет интересно:</span><a href="/sajtostroenie/6059-konstruktor-sajtov-nethouse-otzyvy/">Конструктор сайтов Nethouse: отзывы</a></span> </p> <p><img src="/wp-content/uploads/2018/11/a9a103cb76f64e9c1bd261e3df3328ef.jpg" itemprop="image" alt="html iframe пример" class="if" height="435" width="580" / /></p> <p>Разбивка страницы на части позволяла перегрузить лишь некоторую часть при её обновлении. Например, пользователь нажимал пункт меню, и в центральный фрейм закачивалось новое содержимое.</p> <a name="Современные-фреймы-в-HTML-5" class="page-contents-link"></a><h2>Современные фреймы в HTML 5</h2> <p>Зачем нужен в HTML <iframe>? Пример &ndash; вставка контента стороннего ресурса. Классической является ситуация, когда веб-разработчик желает показать положение объекта на карте. Как быть? Отрисовывать план местности с нуля? Нет &ndash; есть более простое решение: встроить на страницу элемент Google Map, Яндекс Карты или 2ГИС. Задача решается в четыре действия.</p> <li>Нужно перейти на сайт любого картографического сервиса.</li> <li>Найти желаемый объект. Зная точный адрес, можно ввести его в окне поиска.</li> <li>С помощью кнопки &laquo;Сохранить и получить код&raquo; (для "Яндекс.Карт") или &laquo;Готово&raquo; (для карт Google) получить код для вставки.</li> <li>Осталось вписать сгенерированные теги разметки на страницу.</li> <p>Дополнительно можно выбрать размер карты и настроить другие опции отображения.</p> <p><img src="/wp-content/uploads/2018/11/cf5493569db18dfba1874eff0188a715.jpg" itemprop="image" alt="html iframe пример" class="if" height="488" width="600" / /></p> <p>Как ещё можно использовать в HTML <iframe>? Пример &ndash; вставка видеоматериалов с ресурса Youtube. Мультимедиа-технологии привлекают пользователей Интернета, поэтому видеоконтент столь популярен. С установкой ролика разработчик справится быстро.</p> <li>Следует загрузить на Youtube собственное видео или найти сторонний файл для трансляции.</li> <li>Получить тег, выбрав кнопку &laquo;HTML-код&raquo;</li> <li>Заключительное действие &ndash; вставить в код HTML <iframe>. Пример получаемого содержимого тега будет рассмотрен ниже.</li> <p>В обоих примерах использовалась автоматическое формирование кода, но профессиональные разработчики должны уметь сами составлять его. Во-первых, это позволит им разобраться в вёрстке страницы и при необходимости модифицировать её. Во-вторых, не всегда разметка элементов сайта (даже несмотря на то, что они принадлежат внешнему ресурсу), образуется без участия веб-мастера. Вот здесь и проявляется высокая квалификация разработчика.</p> <p><img src="/wp-content/uploads/2018/11/8d121d1924e8cada0f19f8bba21bffb8.jpg" itemprop="image" alt="iframe html что это" class="if" height="397" width="600" / /></p> <a name="Синтаксис" class="page-contents-link"></a><h2>Синтаксис</h2> <p>Итак, прежде чем приступить к вёрстке страницы, необходимо рассмотреть тег iframe (html): что это такое и как правильно его использовать.</p> <p>Прежде всего, нужно отметить, что тег парный. Между открывающимся и закрывающимся элементами указывают содержимое, которое будет отображаться в браузерах, не поддерживающих данный элемент разметки. Основные атрибуты тега:</p> <ul> <li>width (ширина);</li> <li>height (высота);</li> <li>src (адрес загружаемого ресурса);</li> <li>align (способ выравнивания);</li> <li>frameborder;</li> <li>allowfullscreen.</li> </ul> <p>Таким образом, получен код для <iframe>. HTML-пример полностью продемонстрирован ниже:</p> <p><iframe width="560" height="315" src= "https://someserver.com/" frameborder="0" allowfullscreen></iframe></p> <p>В приведённой разметке достаточно заменить адрес сайта на любой другой и, если это необходимо, скорректировать размеры фрейма.</p> </p> <p><br> <br> <a rel="nofollow" target="_blank" href="https://itinru.ru/away?to=http://fb.ru/article/297968">Источник</a></p></div> <div class="article-social"> <div></div> <div class="social-like"> <div id="vk_like"></div> </div> </div> <div class="social-share"> <span class="social-share-h">Понравилась статья? Поделись с друзьями:</span> <div class="social-share-rows"> <a class="soc-share vk" onclick="Share.vkontakte()"><i class="fab fa-vk"></i></a> <a class="soc-share fb" onclick="Share.facebook()"><i class="fab fa-facebook-f"></i></a> <a class="soc-share ok" onclick="Share.odnoklassniki()"><i class="fab fa-odnoklassniki"></i></a> <a class="soc-share twitter" onclick="Share.twitter()"><i class="fab fa-twitter"></i></a> </div> </div> <div class="content-author" itemscope="" itemtype="http://www.schema.org/Person"> <div class="author-box"> <a class="author-avatar" itemprop="url" href="/profile/2195" target="_blank"> <img class="author-avatar-img" src="https://img.itinru.ru/photos/avm/4733.jpg" alt="Дмитрий Быков"> </a> <div class="author-box-content"> <div class="author-box-data"> <span>Автор: </span><a class="author author-name" href="/profile/2195" rel="author" target="_blank" ><span itemprop="name">Дмитрий Быков</span></a> <time class="author-date updated published" datetime="2018-11-04T19:04:43+00:00"> 05-11-2018 00:04</time> </div> <div class="author-comment">Жду ваши вопросы и мнения в комментариях</div> </div> </div> </div> </div> </div> <div class="post-comments"> <div id="vk_comments"></div> <aside> <div class="block-title bgg">Подпишись на нашу группу ВКонтакте</div> <div id="vk_groups"></div> </aside> </div> <aside> <div class="block-title bgg">Похожие статьи</div> <div class="post-similar"> <div class="post-similar-row"> <a href="/sajtostroenie/20274-kak-zarabotat-na-youtube/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/24987/small/119951-52f61a71156df52f61a7115718.jpg" alt="Как заработать на Youtube"></div><div class="similar-article-title">Как заработать на Youtube</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20270-kak-sdelat-registratsiyu-polzovateley-na-sayte/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8405/small/1-52552d8e4804352552d8e48083.jpg" alt="Как сделать регистрацию пользователей на сайте"></div><div class="similar-article-title">Как сделать регистрацию пользователей на сайте</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20269-kak-sozdat-svoy-smaylik/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8402/small/1-52552abcec5a452552abcec5e3.jpg" alt="❶ Как создать свой смайлик"></div><div class="similar-article-title">❶ Как создать свой смайлик</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20268-kak-sdelat-muzyku-pri-vkhode-na-sayt/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8396/small/1-52552b72e23bf52552b72e23fc.jpg" alt="Как сделать музыку при входе на сайт"></div><div class="similar-article-title">Как сделать музыку при входе на сайт</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20267-kak-otklyuchit-perenapravlenie/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8190/small/1-52552c6be26d852552c6be2715.jpg" alt="Как отключить перенаправление"></div><div class="similar-article-title">Как отключить перенаправление</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20264-kak-udalit-akkaunt-ucoz/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7862/small/1-52552c867272b52552c8672769.jpg" alt="Как удалить аккаунт ucoz"></div><div class="similar-article-title">Как удалить аккаунт ucoz</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20263-kak-translirovat-radio-cherez-internet/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7860/small/1-52552cbe532ad52552cbe532ea.jpg" alt="❶ Как транслировать радио через интернет"></div><div class="similar-article-title">❶ Как транслировать радио через интернет</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20261-kak-sdelat-mobilnuyu-versiyu-sayta/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7852/small/1-52552ba66751652552ba667553.jpg" alt="Как сделать мобильную версию сайта"></div><div class="similar-article-title">Как сделать мобильную версию сайта</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20254-kak-pomestit-svoe-video-v-quotyutubequot/" class="similar-article"> <div class="similar-article-img"><img src="/img/no-image-min.jpg" alt="Как поместить свое видео в &quot;Ютубе&quot;"></div><div class="similar-article-title">Как поместить свое видео в &quot;Ютубе&quot;</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20253-kak-poluchit-vydelennyy-ip/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7225/small/1-52552e106658752552e10665c7.jpg" alt="❶ Как получить выделенный ip"></div><div class="similar-article-title">❶ Как получить выделенный ip</div> </a> </div> </div> </aside> </article> </main> </div> <div class="sidebar"> <div class="sidebar-row"> <aside> <div class="sidebar-title ggc">Категории</div> <div class="sidebar-content"> <nav class="sidebar-nav"> <ul class="sidebar-nav__list"> <li><a href="/programmy/">Программы</a> </li> <li><a href="/smartfony/">Смартфоны</a> </li> <li><a href="/raznoe-pro-ustrojstva/">Разное про устройства</a> </li> <li><a href="/foto-i-videotehnika/">Фото и видеотехника</a> </li> <li><a href="/remont-ustrojstv/">Ремонт устройств</a> </li> <li><a href="/komplektujushhie-i-aksessuary/">Комплектующие и аксессуары</a> </li> <li><a href="/ofisnaja-tehnika/">Офисная техника</a> </li> <li><a href="/raznoe/">Разное</a> </li> <li><a href="/vybor-i-pokupka/">Выбор и покупка</a> </li> <li><a href="/noutbuki/">Ноутбуки</a> </li> <li><a href="/operacionnye-sistemy/">Операционные системы</a> </li> <li><a href="/servera/">Сервера</a> </li> <li><a href="/bezopasnost-v-internete/">Безопасность в интернете</a> </li> <li><a href="/blogging/">Блоггинг</a> </li> <li><a href="/sajtostroenie/">Сайтостроение</a> </li> <li><a href="/igry/">Игры</a> </li> <li><a href="/seo/">SEO</a> </li> <li><a href="/socialnye-seti/">Социальные сети</a> </li> </ul> </nav> </div> </aside> </div> <div class="sidebar-row"> <aside> <div class="sidebar-title ggc">Последние статьи</div> <div class="sidebar-new-posts-rows"> <a href="/igry/20286-kak-postavit-plagin-v-odinochnuyu-igru-v-minecraft/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/74849/small/1-5417f5412a8735417f5412a8b0.jpg" alt="Как поставить плагин в одиночную игру в Minecraft"> <span>Как поставить плагин в одиночную игру в Minecraft</span> </a> <a href="/raznoe/20285-cheetos-zapustil-pervuyu-v-rossii-tiktok-pachku/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/62722/small/37-6160583810a816160583810abe.jpg" alt="Cheetos запустил первую в России TikTok-пачку!"> <span>Cheetos запустил первую в России TikTok-пачку!</span> </a> <a href="/raznoe/20284-klub-druzey-cheetos-pomogaet-gepardam-v-moskovskom-zooparke/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/62721/small/37-614366759a2c3614366759a304.jpg" alt="«Клуб друзей»: Cheetos помогает гепардам в Московском зоопарке"> <span>«Клуб друзей»: Cheetos помогает гепардам в Московском зоопарке</span> </a> <a href="/raznoe/20283-nachinaem-s-ponedelnika-gadzhet-kotoryy-pomozhet-perestroitsya-na-zozh-i-sokhranit-emotsionalnyy-zapal/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/57505/small/25-618ce3d7a17ee618ce3d7a184f.jpg" alt="Начинаем с понедельника: гаджет, который поможет перестроиться на ЗОЖ и сохранить эмоциональный запал"> <span>Начинаем с понедельника: гаджет, который поможет перестроиться на ЗОЖ и сохранить эмоциональный запал</span> </a> <a href="/vybor-i-pokupka/20279-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/vybor-i-pokupka/20280-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/vybor-i-pokupka/20281-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/vybor-i-pokupka/20282-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/raznoe/20278-kak-vybrat-messendzher-dlya-raboty-i-zhizni-whatsapp-telegram-viber-gem4me/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/53642/small/25-60224bde5762960224bde57668.jpg" alt="Как выбрать мессенджер для работы и жизни: Whatsapp, Telegram, Viber, Gem4me?"> <span>Как выбрать мессенджер для работы и жизни: Whatsapp, Telegram, Viber, Gem4me?</span> </a> <a href="/raznoe/20277-implantatsii-all-on-6-preimushchestva-i-nedostatki/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/53641/small/37-5fe32eaecea885fe32eaeceac8.jpg" alt="Имплантации All-on-6 преимущества и недостатки"> <span>Имплантации All-on-6 преимущества и недостатки</span> </a> </div> </aside> </div> <div class="sidebar-row"> <div id="comments_browse"></div> </div> </div> </div> <footer> <div class="footer"> <div class="footer-rows"> <div class="footer-menu"> <div class="footer-column info-url"> <a href="/about/">О проекте</a> <a href="/contacts/">Обратная связь</a> </div> <div class="footer-column info-url"> <a href="/sotrudnichestvo/">Сотрудничество</a> <a href="/razmeshchenie-reklamy/">Размещение рекламы</a> <a href="/dlya-pravoobladateley/">Для правообладателей</a> </div> <div class="footer-column info-responsibility"> <span>Информация взята из открытых источников, либо прислана нашими читателями. Все статьи размещенные на сайте представлены для ознакомления и не являются рекомендациями и используются в некоммерческих целях. Все права на материалы, изображения и прочую информацию пренадлежат их законным авторам (правообладателям).</span> </div> </div> <div class="footer-copy ggc">&copy; «IT in RU», 2024</div> <div class="footer-column"> <a href="/usloviya-predostavleniya-informatsii/">Условия предоставления информации</a> | <a href="/otkaz-ot-otvetstvennosti/">Отказ от ответственности</a> </div> </div> </div> </footer> <!-- Scripts --> <script> $(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); </script> <script src="//cdn.itinru.ru/js/app.js"></script> <!-- Yandex.Metrika counter --> <script > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(50995274, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/50995274" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <div style="display:none;" onload="genStickSidebar()"></div> </body> </html>