Как сделать фреймы в HTML

от

Фреймы HTML – удобный инструмент для разделения страницы на независимые части, каждая из которых может отображать различный контент. Несмотря на то, что современные методы веб-разработки предпочитают использовать CSS и JavaScript для создания подобных эффектов, знание о фреймах все еще актуально, особенно при работе с устаревшим кодом.

Использование фреймов

Основной элемент для создания фреймов – тег <frameset>, который определяет, как фреймы будут располагаться на странице. Внутри <frameset> располагаются теги <frame>, каждый из которых определяет отдельную часть страницы (фрейм), в который загружается содержимое из другого файла.

Пример кода со структурой из двух фреймов:

<html>
<head>
    <title>Пример фреймов в HTML</title>
</head>
<frameset cols="50%,50%">
    <frame src="left_side.html" name="leftFrame" />
    <frame src="right_side.html" name="rightFrame" />
</frameset>
</html>

В этом примере мы имеем два вертикальных фрейма с равными размерами (50% каждый). Каждый frameзагружает свой файл – “left_side.html” и “right_side.html”.

Атрибуты <frame>

Тег frame имеет несколько атрибутов:

  • src указывает URL документа, который отобразится во фрейме;
  • name даёт имя фрейму, что позволяет обращаться к нему при помощи целевых ссылок или скриптов;
  • noresize запрещает изменение размеров фрейма пользователем;
  • scrolling управляет отображением полос прокрутки и может принимать значения “yes”, “no” или “auto”.

Навигация между фреймами

Для навигации между разными частями страницы можно использовать атрибут target в тегах <a> (ссылка). Выбрав имя одного из фреймов как значение target, мы можем указать браузеру загружать ссылку именно в этот раздел экрана.

Пример ссылки:

<a href="page.html" target="rightFrame">Открыть страницу в правом фрейме</a>

Эта ссылка будет открывать “page.html” во фрейме с именем “rightFrame”.

Фремсеты и респонсивный дизайн

Однако стоит отметить, что <frameset> не поддерживается в HTML5. В новых проектах предпочтение следует отдавать CSS Grid Layout или Flexbox для создания сложных лэйаутов и Iframe для инкапсуляции контента из других ресурсов.

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

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