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?😉
