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" frameborder="0">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="top">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>Применение плавающих фреймов
Рекомендуемые материалы
Спецификации