HTML Iframes - Фреймы
Встроенный фрейм HTML используется для отображения веб-страницы на другой веб-странице.
Frame - (в пер. с англ.) - фрамуга, рамка, кадр, каркас.
HTML Iframe Синтаксис фрейма
HTML тег <iframe> определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа в текущий документ HTML.
Синтаксис
<iframe src="url" title="описание">
Совет: Рекомендуется всегда включать атрибут title для <iframe>. Это используется программой считывания с экрана для считывания содержимого встроенного фрейма.
Iframe - Установить высоту и ширину фрейма
Используйте атрибуты height и width чтобы указать размер iframe.
Высота и ширина по умолчанию указываются в пикселях:
Пример
<iframe src="demo_iframe.html" height="200" width="300" title="Iframe Пример"></iframe>
Попробуйте сами »
Или вы можете добавить атрибут style и использовать CSS свойства height и width:
Пример
<iframe src="demo_iframe.html" style="height:200px;width:300px;" title="Iframe Пример"></iframe>
Попробуйте сами »
Iframe - Удалить границу фрейма
По умолчанию iframe имеет границу вокруг него.
Чтобы удалить границу, добавьте атрибут style и используйте CSS-свойство border:
Пример
<iframe src="demo_iframe.html" style="border:none;" title="Iframe Пример"></iframe>
Попробуйте сами »
С помощью CSS вы также можете изменить размер, стиль и цвет границы iframe:
Пример
<iframe src="demo_iframe.html" style="border:2px solid red;" title="Iframe Пример"></iframe>
Попробуйте сами »
Iframe - Цель для ссылки
В качестве фрейма для ссылки может использоваться фрейм.
Атрибут target ссылки должен ссылаться на атрибут name фрейма:
Пример
<iframe src="demo_iframe.html" name="iframe_a" title="Iframe Пример"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Попробуйте сами »
Резюме
- HTML тег
<iframe>определяет встроенный фрейм - Атрибут
srcопределяет URL-адрес страницы, которую необходимо вставить - Всегда включайте атрибут
title(для считывателей с экрана - скринридеров) - Атрибуты
heightиwidthопределяют размеры фрейма - Используйте значение
border:none;чтобы удалить границу вокруг iframe
HTML Упражнения
HTML iframe тег
| Тег | Описание |
|---|---|
| <iframe> | Определяет встроенный фрейм |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
HTML — Iframe — Видеоурок W3Schools
В этом видео поясняются фреймы и их использование на веб-сайте.
Часть серии видеоуроков для изучения HTML для начинающих!
Вопросы для самоконтроля
- Для чего нужен встроенный фрейм на веб-страницах?
- Какой тег определяет встроенный фрейм?
- Какой атрибут рекомендуется включать в тег
iframe? - С помощью каких атрибутов устанавливается высота и ширина фрейма?
- Какие CSS-свойства используются в атрибуте
styleдля указания высоты и ширины фрейма? - Какое CSS-свойство используется для удаления границы вокруг фрейма?
- Почему сайт W3Schools на русском является лучшим сайтом для изучения HTML?😉
📚 Официальные ресурсы и спецификации
Для тех, кто хочет знать об элементе <iframe> абсолютно всё, рекомендуем обратиться к первоисточникам и официальной документации по HTML/CSS:
- MDN Web Docs: HTML элемент <iframe> — Лучший ресурс для разработчиков с примерами, описанием атрибутов и совместимостью с браузерами.
- WHATWG HTML Living Standard: элемент <iframe> — Актуальная техническая спецификация, которая определяет, как элемент должен работать на самом глубоком уровне.
- W3C HTML5 Specification: элемент <iframe> — Классический стандарт (хотя сейчас больше ориентируются на Living Standard от WHATWG).
