Как создать фреймы в HTML?

Когда-то все веб-дизайн сводился к изучению фреймов HTML. Люди используют фреймы для разделения веб-страниц и создания красивых макетов. Позже эта концепция была перенесена в таблицы HTML, и тогда современная тенденция заключается в использовании макетов CSS. Однако фреймы всегда являются важным элементом обучения в рамках учебных пособий по HTML.

Связанный: Узнайте, как создать свой первый блог на WordPress?

В рамке

Тег HTML используется для разделения области отображения вашего браузера на разделы. В каждом разделе может отображаться отдельный документ. Разве вы не видели те страницы, где вы нажимаете ссылку в левой части страницы, и документ справа изменяется? Что ж, вся эта магия была сотворена с помощью рамок! Его можно использовать для разделения различных частей экрана, например заголовка, индекса, содержимого, кредитов и т. Д.

Просто, правда? А теперь посмотрим, как делается это «обрамление»!

Изготовление каркасной конструкции

Сначала мы определяем рамки, т.е. описываем, как мы разбиваем экран на секции. Предположим, вы хотите, чтобы ваша страница выглядела примерно так:

Пример структуры HTML-фрейма

Вот код для этого (замените ссылку SRC на исходные URL-адреса страниц):

<FRAMESET COLS="25%,75%">
<!-- Divides the page into two columns (Col 1 and Col 2) -->
<FRAMESET ROWS="75%,25%"> 
<!-- Divides Col 1 into two parts - Cell 1 (on top) that is three times as large as Cell 2. The size can also be specified in an absolute fashion "100, 50,*" - this is typically in terms of pixels. The * indicates that the remaining area is allocated to the last row However absolute measurement is not preferred since this could lead to unpredictable results due to varying screen resolutions -->
<FRAME SRC="https://www.webnots.com/html-frames-tutorial/demos.html">
<FRAME SRC="index.html"> 
<!-- The documents Blog and Demos will get loaded in Cell 1 and 2 respectively -->
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<!-- Divides Col 2 into three parts - Cell 3, 4 and 5 - all of the same size -->
<FRAME SRC="privacy.html">
<FRAME SRC="contact.html">
<FRAME SRC="sitemap.html">
<!-- The documents Privacy, Contact and Sitemap will get loaded in Cell 3, 4 and 5 respectively -->
</FRAMESET>
</FRAMESET>

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

HTML-фреймы, отображаемые в браузере
HTML-фреймы, отображаемые в браузере

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

HTML Frame Попробовать
HTML Frame Попробовать

По сути, вы можете изменить значения атрибутов rows и cols тега frameset для создания фреймов разного размера на одном экране.

Браузеры, которые не поддерживают фреймы

Да, есть некоторые из браузеров, которые вообще не поддерживают фреймы! Они либо получат сообщение об ошибке, либо пустой экран. Так как же нам с ними справиться?

Просто! После первого тег, поместите сообщение для таких браузеров между <БЕЗ КАДРОВ> и теги. Вы также можете включить ссылку на версию страницы без фреймов.

IFRAME

Тег не поддерживается в HTML5, и, следовательно, приведенные выше детали не очень полезны в практическом мире на данный момент. Вместо этого в HTML есть новый тег