Содержание

| HTML | WebReference

Элемент <frame> (от англ. frame — рамка, каркас) определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <frameset>, который к тому же задаёт способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью атрибута src. Хотя обязательных атрибутов у <frame> и нет, рекомендуется задавать каждому фрейму его имя через атрибут name. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.

Данный элемент устарел, не используйте его.

Синтаксис

<frameset>
  <frame>
</frameset>

Закрывающий тег

Атрибуты

bordercolor
Цвет линии границы.
frameborder
Отображать рамку вокруг фрейма или нет.
name
Задаёт уникальное имя фрейма.
noresize
Определяет, можно изменять размер фрейма пользователю или нет.
scrolling
Способ отображения полосы прокрутки во фрейме.
src
Путь к файлу, предназначенному для загрузки во фрейме.

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>FRAME</title> </head> <frameset rows=»80,*» cols=»*»> <frame src=»page/top.html» name=»topFrame» scrolling=»no» noresize> <frameset cols=»80,*»> <frame src=»page/left.html» name=»leftFrame» scrolling=»no» noresize> <frame src=»page/main.html» name=»mainFrame»> </frameset> </frameset> </html>

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

что это такое в HTML, как сделать, примеры

Фрейм (от англ. Frame) — это самостоятельный документ, который отображается в отдельном окне браузера и представляет собой полностью законченную HTML-страницу. Простыми словами, фрейм — разделитель браузерных окон на отдельные области.

Каждый фрейм может обладать собственным URL. Например: https://www.cook.com/book/tryit.asp?filename=tryhtml_iframe

В 2022 году фрейм как отдельный элемент HTML практически не используется на публичных сайтах и технологию можно назвать устаревшей. Этот тег даже не поддерживается в HTML5. Одна из главных причин — неудобство для поисковых систем, которые формируют выдачу на основе множества фреймов одного сайта, а не единичного.

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Как выглядит фрейм: в браузере и на странице

Схематично фрейм можно представить следующим образом:

Пример двух самостоятельных фреймов

В коде страницы фрейм представляет из себя простой тег. Выглядит он следующим образом:

<frameset rows=»80,*» cols=»*»>
<frame src=»top.html» name=»topFrame» scrolling=»no» noresize>
<frameset cols=»80,*»>

<frame src=»left.html» name=»leftFrame» scrolling=»no» noresize>
<frame src=»main.html» name=»mainFrame»>
</frameset>
</frameset>

Обратите внимание на то, что закрывающий тег не является обязательным. Как видим, синтаксис не вызывает никаких сложностей:

<frameset> <frame> </frameset>

Вот несколько важных атрибутов фрейма:

  • name= — название фрейма.
  • noresize= — запретить изменение размера рамки.
  • src= — укажите путь к файлу, который должен открываться внутри фрейма.
  • scrolling= — настройка полосы прокрутки.

Если вы хотите поменять цвет линий, то используйте атрибут bordercolor=

Frameв качестве тега находится внутри контейнера frameset. Следовательно, главный тег задает все свойства для самостоятельного фрейма.

Читайте также:

7 нетривиальных SEO-приемов для продвижения сайта

Еще один пример фрейма в коде страницы:

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = «20%, 60%, 20%»>
<frame name = «top» src =
«C:/Users/dharam/Desktop/attr1.png» />
<frame name = «main» src =
«C:/Users/dharam/Desktop/gradient3.png» />
<frame name = «bottom» src =
«C:/Users/dharam/Desktop/col_last.png» />

<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>

Достоинства фреймов

Фреймы могут использоваться лишь в исключительных случаях, и достоинств у этой технологии совсем немного:

  1. Статические данные можно отправлять в отдельный блок. Хороший пример — оглавления в большом документе.
  2. Фрейм позволяет формировать параллельные окна вида запрос / результат.
  3. Фрейм позволяет создавать ответные формы.

Недостатки фреймов

Главный недостаток заключается в том, что фреймы устарели и теперь их не рекомендуется использовать для публичных сайтов. Кроме этого, при использовании фреймов — «ломается» верстка страниц и документ выводится совсем не так, как было задумано.

Вот еще несколько минусов фрейма как технологии:

  1. Проблемы с индексированием. Поисковые системы сегодня считают, что на одной странице должен находиться один документ. Если по одному URL документа два, то это вызовет проблемы.
  2. Вывод фрейма нужно настраивать отдельно для мобильных устройств. Иначе — рамки будут отображаться некорректно на смартфонах.
  3. Читайте также:

    Мобильные версии сайтов 2021: интересные тенденции и неожиданные выводы

  4. Фрейм имеет один URL для нескольких структурных элементов. Что неудобно для пользователя, например — он не сможет сохранить такую страницу в закладки.
  5. Сайт становится недружелюбным к людям со специальными потребностями. Например: пользователи с нарушением зрения не смогут воспользоваться ридерами для страниц с фреймами.

Как использовать фрейм для SEO

Лучше никак. Задействовать фреймы для поисковой оптимизации страницы не получится, так как все поисковые системы идентифицируют эту технологию как нежелательную.

Задействуя фреймы, вы только навредите SEO. Если же вам обязательно нужно использовать их на публичном сайте — убедитесь в том, что вместо body указан контейнер frameset. Контейнер фрейма и его теги обязательно прописываются на главной, а содержание при необходимости указывается внутри каждого тега.

Читайте также:

Отличия SEO под Яндекс и Google

Как создать фрейм для HTML

Правило первое: тег <frameset> везде заменяет тег <body>. Для разделения экрана на области используется <frameset>. Внутри указанного тега содержатся несколько тегов <frame>, ссылающиеся на документ, который и будет выводиться в настраиваемой области.

Правило второе: потребуется минимум три документа:

  • 1-й (index.html) задает структуру рамки.
  • 2-й (menu.html) загружается в окно слева.
  • 3-й (content.html) — в окно справа. 

Код при этом может выглядеть следующим образом:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»
«http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Варианты рамок</title>
</head>
<frameset rows=»25%,75%»>
<frame src=»top.html» name=»TOP» scrolling=»no» noresize>
<frameset cols=»100,*»>
<frame src=»menu.html» name=»MENU»>
<frame src=»content.html» name=»CONTENT»>
</frameset>
</frameset>
</html>

Примеры фреймов

Найти сайты, использующие frame в 2022 году, очень сложно. Вот пара примеров:

Пример фрейма на сайте, который очень давно не обновлялся

На HTML-странице фрейм может выглядеть и таким образом:

Фрейм на странице

Также фреймы можно было встретить в справочных ресурсах предыдущих версий Windows:

Справка Windows XP по «Блокноту» была выполнена фреймом

Еще один пример фрейма на сайте:

Страница состоит из нескольких документов

Резюме

С точки зрения HTML, фреймы — это самостоятельные и независимые друг от друга миниатюры, которые выводятся в браузере. Технология полностью устарела, использовать ее на публичных сайтах не рекомендуется.

Продвижение сайтов

  • Любой формат сотрудничества: позиции, лиды, трафик.
  • Подбираем запросы, которые приводят реальных покупателей!

Фреймы HTML — презентация онлайн

Фреймы дают возможность разбить окно браузера на
несколько прямоугольных областей, в каждой из
которых может отображаться отдельный документ
(HTML- или любой другой)
Фреймы создаются особым HTML-документом –
фреймсетом. В нем вместо тэга используется
тэг .
Содержимое этого документа не отображается, он
только указывает браузеру на сколько частей и как
нужно разбить окно, как и какие HTML-документы нужно
загрузить в эти области.
Каждый из отображаемых во фреймах HTML-документов
может использоваться и обычным образом.
Использование фреймов:
•Для создания на экране области с меню, которое
должно быть постоянно на экране;
•Для одновременного вывода двух или более
взаимосвязанных документов – для сравнения или
коррекции данных.
Простое разбиение окна браузера на области лучше
делать с помощью таблиц.
Недостатки фреймов: некорректное индексирование
сайтов с фреймами поисковыми машинами.

4. Тэг <frameset>

Тэг
Позволяет определять набор фреймов и
управлять их размерами и обрамлением. Он
допускает вложения.
Атрибуты:
Rows – число и размер строк;
Cols – число и размер колонок;
Значения – список величин, определяющий в
пикселях или в % значения для строк и (или)
колонок.

*
обозначает оставшееся пространство.
Заполнение фреймов содержимым происходит по
строкам.
Фрейм1
Фрейм2
Фрейм3
Фрейм4
Фрейм5
30%
Фрейм6
Оставшееся
пространство
100 пикселей
25%
Оставшееся
пространство
Пропорциональные размеры
rows=“100,25%,*” cols=“30%,*”
число – ширина или высота в пикселях,
% — процентное соотношение
* — обозначает оставшееся пространство
rows=“3*,*,2*” — вся высота экрана делится на
6 (3+1+2) и распределяется соответственно
между строками.
Заполнение фреймов содержимым происходит по
строкам
Атрибуты:
Border – толщина рамки в пикселях;
Bordercolor – цвет рамки.

8. Тег <frame>

Тег
Может появляться только в теге
и определяет содержимое
одиночного фрейма.
Атрибуты:
src=“URL” — обязательный атрибут,
указывает имя файла, который должен
изображаться в нем.
Этот файл может сам быть фреймом.
name=«метка» — связывает с фреймом
метку, которая может использоваться для
ссылок на фрейм в атрибуте target тега ,
таким образом можно изменить содержимое
фрейма, используя гиперссылку в другом
фрейме.
noresize — запрещает изменение размеров
фрейма.
scrolling = yes или no – разрешает или
запрещает появление полос прокрутки.

10. Вложение тегов <frameset>

Вложение тегов
В тег … можно поместить еще
один или несколько тегов .
Это позволяет организовать области с разным
количеством строк и столбцов.




1.html



2.html
3.html








2.html
1.html
3.html
4.html

12. Навигация во фреймах

В каждую область фрейма должен быть
загружен HTML- документ.
Если в нем есть гиперссылки, то они
открываются в этом же фрейме.
Для того, чтобы перенаправить вывод
документа в другой фрейм, нужно
использовать:
1. Атрибут name в целевом теге
2. Атрибут target в теге




Меню:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Окно просмотра
Файл menu.html:











target=“view-frame”>Ссылка
target=“view-frame”>Ссылка
target=“view-frame”>Ссылка
target=“view-frame”>Ссылка
Щелчок на
соответствующей
ссылке в левой
части выведет
документ в правый
фрейм.
Меню:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
1
2
3
4
Окно просмотра

HTML-тег

Тег определяет конкретное окно, фрейм, в котором мы можем загрузить другую веб-страницу. Используйте атрибут src, чтобы определить адрес этой веб-страницы. Веб-страница может иметь несколько таких фреймов.

Тег используется с элементом , который определяет способ разделения окна на фреймы.

Если вы хотите использовать фреймы в веб-браузере вместо тега , вы можете поместить тег .Он определяет структуру фрейма (зона в окне браузера, где мы можем загрузить другую веб-страницу), количество столбцов и строк, а также сколько процентов/пикселей он будет занимать в фрейме. Но учтите, что этот тег устарел и в HTML5.

Страницы, содержащие фреймы, могут быть проверены только в том случае, если установлено значение HTML Frameset DTD или XHTML Frameset DTD.

Используйте атрибут rows тега для определения горизонтальных фреймов и атрибут cols для определения вертикальных фреймов.

Тег пуст, значит, закрывающий тег не требуется. Но в XHTML тег () должен быть закрытым ().

Пример тега HTML

:
  

  <голова>
    Название документа
  
  
    
    
  
  

Результат

Пример тега HTML

с атрибутом rows:
  

  <голова>
    Название документа
  
  
    
    
    
  
  

Вот преимущества этого тега:

  • Позволяет просматривать несколько документов на одной веб-странице.
  • С этим тегом страницы с разных серверов загружаются в один набор фреймов.
  • Использование этого тега позволит обращаться к браузерам, не поддерживающим фреймы.

Тег имеет следующие недостатки:

  • Не позволяет добавлять в закладки веб-страницы, находящиеся внутри фрейма.
  • Использование слишком большого количества кадров приведет к высокой нагрузке на сервер.
  • Не поддерживается многими старыми браузерами.

Элементы и