ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

HTML Iframes - Фреймы

❮ Prev Next ❯

Встроенный фрейм 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 Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Создайте iframe с URL-адресом, который переходит на https://www.w3schools.com.

<iframe ="https://www.w3schools.com"></iframe>

HTML iframe тег

Тег Описание
<iframe> Определяет встроенный фрейм

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools.

Вопросы для самоконтроля

  • Для чего нужен встроенный фрейм на веб-страницах?
  • Какой тег определяет встроенный фрейм?
  • Какой атрибут рекомендуется добавлять к тегу iframe?
  • С помощью каких атрибутов устанавливаются высота и ширина фрейма?
  • Какие CSS-свойства используются в атрибуте style для указания высоты и ширины фрейма?
  • Какое CSS-свойство используется для удаления границы вокруг фрейма?
❮ Prev Next ❯