Фреймы в HTML

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали, как установить favicon на сайт. В данной статье я бы хотел рассказать, что такое фреймы в html. В переводе с англ. фрейм означает "рамка". С точки зрения html, фрейм — это некая выделенная область на странице, которая ссылается на другую страницу и выводит её содержимое (той самой другой страницы или сайта). Стоит сразу отметить, что фреймы не получили большого развития и сейчас почти не используются, разве что в каких-то специализированных проектах.Всё то же самое можно сделать с помощью CSS и Javascript.
С помощью фрейма страницу можно разбить на несколько блоков, каждый из которых будет независим от других. Давайте создадим основной документ index.html и два вспомогательных (внутренних), содержимое которых как раз и будет отображаться на основной странице: menu.html (будет содержать разметку навигации по сайту) и content.html (контент сайта). Разметка index.html будет иметь следующий вид:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Фрэймы в HTML</title>
</head>
<frameset cols="40%, *">
	
</frameset>
</html>

Обращаю ваше внимание, что здесь отсутствует тег <body>, вместо него появился тег <frameset>. У данного тега есть несколько атрибутов:

cols — данный атрибут указывает, что фреймы будут помещены в столбцы. В значении данного атрибута через запятую указываются размеры фреймов. В нашем случае у нас будет 2 фрейма. Ширина первого будет 40% от ширины страницы, * означает всё остальное пространство страницы (в данном случае можно было написать и 60%). Также размер можно задавать и в пикселях.
rows — данный атрибут указывает, что фреймы будут помещены в строки.

Содержимое файла menu.html имеет вид:

<ul>
	<li>1 пункт меню</li>
	<li>2 пункт меню</li>
	<li>3 пункт меню</li>
</ul>

Содержимое файла content.html имеет вид:

<div>
	<h1>Тестируем фреймы</h1>
	<p>Абзац текста</p>
</div>

Чтобы вывести содержимое другого документа нужно использовать тег <frame> с атрибутом src, в значении которого указывается путь до файла. Также можно указывать url сайта, который мы хотим вывести в этом блоке. Для начала давайте выведем наши страницы menu.html и content.html:

<frameset rows="50%, *">
   <frame src="menu.html"/>
   <frame src="content.html"/>
</frameset>

Обязательно наберите данный код, чтобы посмотреть как это всё работает.

У тега frame существуют следующие атрибуты:

src — путь до страницы или же url-адрес сайта (страницы сайта). Стоит отметить, что у некоторых сайтов существует защита от встраивания,
name — присваивает фрейму имя, с помощью которого данным фреймом можно управлять,
noresize — запрещает изменять размер фрейма,
scrolling — возможность прокручивать содержимое.

В качестве домашнего задания создайте 2 фрейма и разместите их в строку. В качестве значения атрибута src укажите путь до сайтов.

Весь код можно посмотреть под хайдом.

Подсмотреть код реализации

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Фрэймы в HTML</title>
</head>
<frameset rows="50%, *">
   <frame src="https://alekseygulynin.ru/"/>
   <frame src="https://alekseygulynin.ru/"/>
</frameset>
</html>

В данной статье вы узнали, что такое фреймы в html и как их использовать.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.