На этой странице

Фреймы в HTML

Фрейм — отдельный законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

Парный тег <iframe> – помогает вставить фрейм в обычный HTML – документ .

Элемент HTML - <iframe> представляет собой вложенный контекст просмотра , встраивая другую HTML-страницу в текущую.

Атрибуты тега <iframe>

src – Определяет URL – адрес документа , может указан абсолютный или относительный URL – адрес :

<iframe src="https://mysite/chapter1.html"></iframe>
<iframe src="chapter1.html"></iframe>

name – Задает имя фрейма :

<iframe src="chapter1.html" name="myframe"></iframe>

width – Ширина фрейма .

height – Высота фрейма .

<iframe src="chapter1.html" name="myframe" width="700" height="400"></iframe>

scrolling – Отображает полосы прокрутки во фрейме , имеет следующие значения :

auto – Полосы отображаются , если содержимое не помещается во фрейме – значение по умолчанию .

<iframe src="chapter1.html" name="chapter" scrolling="auto">

yes – Полосы отображаются всегда .

<iframe src="chapter1.html" name="chapter" scrolling="yes">

no – Запрещает отображение полос прокрутки .

<iframe src="chapter1.html" name="chapter" scrolling="no">

marginwidth – Задает расстояние в пикселях между границей фрейма и его содержимым по горизонтали .

marginheight – Указывает расстояние в пикселях между границей фрейма и его содержимым по вертикали .

<iframe src="chapter1.html" name="chapter" marginwidth="5" marginheight="5">

frameborder – Включает или отключает показ границы между фреймами , может принимать одно из двух значений :

1 – Граница отображается , значение по умолчанию .

<iframe src="chapter1.html" name="chapter" frameborder="1">

0 – Граница не отображается .

<iframe src="chapter1.html" name="chapter" frameborder="0">

width и height – Задает ширину и высоту фрейма .

<iframe src="chapter1.html" name="chapter" width="200" height="200">

align – Определяет выравнивание фрейма

Атрибут имеет несколько значений :

left – Фрейм выравнивается по левому краю , текст обтекает фрейм справа :

<iframe src="chapter1.html" name="chapter" align="left">

right – Фрейм выравнивается по правому краю , текст обтекает фрейм слева .

<iframe src="chapter1.html" name="chapter" align="right">

top – Вертикальное выравнивание по верхнему краю :

<iframe src="chapter1.html" name="chapter" align="top">

middle – Вертикальное выравнивание по центру :

<iframe src="chapter1.html" name="chapter" align="middle">

bottom – Вертикальное выравнивание по нижнему краю :

<iframe src="chapter1.html" name="chapter" align="bottom">

Плавающие фреймы

Чтобы понять как работают фреймы , рассмотрим наглядный пример структуры HTML – страницы с применением фреймов .

Для этого нам нужно создать 3 файла :

test.html – Главный файл , в который будут загружаться фреймы - chapter1.html и chapter2.html.

Все файлы нужно разместить в одной папке , если папки разные , то правильно нужно указать URL – адрес загружаемого фрейма .

Содержимое файла chapter1.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Глава 1</title>
  </head>
  <body>
<h1>Глава 1</h1>
    <p>Содержание главы 1</p>
</body>
</html>

Содержимое файла chapter2.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Глава 2</title>
  </head>
  <body>
<h1>Глава 2</h1>
    <p>Содержание главы 2</p>
</body>
</html>

Файл test.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Применение плавающих фреймов</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
ul {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
<h1>Применение плавающих фреймов</h1>
   <ul>
    <li><a href="chapter1.html" target="chapter">Глава 1</a></li>
    <li><a href="chapter2.html" target="chapter">Глава 2</a></li>
   </ul>
  <iframe src="chapter1.html" name="chapter" width="700" height="400"></iframe>
</body>
</html>

Открыть пример в новом окне

Применение плавающих фреймов

Рекомендуемые материалы

Спецификации