Урок №22. HTML. Iframe. Фрейми

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як додати фрейм в HTML-код на веб-сторінці? Використання фреймів - iframe

Фрейми використовується для відображення веб-сторінки всередині веб-сторінки.


Синтаксис фреймів

HTML фрейм визначається тегом <iframe>:

<iframe src="URL"></iframe>

Атрибут src вказує URL-адресу (веб-адресу) сторінки вбудованого фрейму.


Iframe - встановлення висоти та ширини

Використовуйте атрибути height (висота) і width (ширина), щоб вказати розмір фрейма. Значення атрибутів за замовчуванням задаються в пікселях, але вони також можуть бути у відсотках (наприклад, "80%"). При цьому для відповідності специфікації HTML5 у відсотках можна вказувати лише через задання стилів для фрейма, тобто через CSS або атрибут style.

Приклад:

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Спробуйте самі! »

Або ви можете використовувати CSS для встановлення висоти та ширини фрейма:

Приклад:

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Спробуйте самі! »

Iframe - видалення межі

За замовчуванням фрейм має межу навколо себе. Щоб видалити межу, додайте атрибут style та використовуйте CSS властивість border:

Приклад:

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
Спробуйте самі! »

За допомогою CSS можна також змінити розмір, стиль і колір межі фрейма:

Приклад:

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
Спробуйте самі! »

Iframe - ціль для посилання - target

В якості цільового фрейму для посилання можна використовувати iframe. Атрибут target посилання має посилатися на атрибут name фрейма:

Приклад:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Спробуйте самі! »

Перевірте себе вправами!


HTML тег iframe

Тег Опис
<iframe> Визначає вбудований фрейм

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.