Какой элемент определяет содержимое для браузеров не поддерживающих фреймы

Обновлено: 05.07.2024

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

По некоторым причинам, сегодня все еще существует много противоречий во мнениях использовать или нет frame-технологию при создании нового сайта. Это противоречие имеет явственное обоснование, поскольку очевидно, что все еще многие web-дизайнеры используют ее, даже, если это не является более хорошей идеей. В данном разделе вы узнаете все, что вам требуется, для того чтобы любой «framed web site» был правильно проиндексирован и оптимизирован для большинства поисковых машин.

Чтобы быть объективными, давайте признаемся, что web-сайт с фреймами иногда может быть очень полезен, но при условии произведения необходимых модификаций. По данным соображениям, многие web-дизайнеры решают использовать «frame technology». Она может быть даже весьма полезна для управления очень большими сайтами, имеющими множество содержимого, разделенного на 500 и более страниц. Хотя лично, я не всегда соглашусь с данным предположением.

Как бы это ни было, сайты с фреймами обычно создают множество проблем и сложностей для большинства современных поисковых машин. Данная статья покажет вам все ловушки и ошибки, в которые попадают некоторые web-мастера при написании сайтов с фреймами вместо «сайтов-дружественных-поисковику». Также вы увидите, как правильно все делать, если захотите продолжать идти своим путем.

Что из себя представляет сайт с фреймами?

Такое утверждение в сущности как правильно так и нет. Оно НЕВЕРНО, если технология использована правильно. Но в то же время, оно совершенно верно, если фреймы, по сути, использованы неправильно и поэтому недружественны поисковой системе. К счастью, у последнего обстоятельства существуют обходные пути.
При правильном применении сайт с фреймами может быть «почти» так же хорош, как и сайт без них. И возможно, предоставит результаты, которые могут быть признаны приемлемыми, будучи сравнены с теми, которые сайт давал ранее. Тем не менее, если ваш сайт все еще не разработан, я бы предложил вам делать его по технологии, дружественной поисковику. Другими словами: держитесь подальше от фреймов!

Почему поисковые машины ненавидят сайты с фреймами? В этом разделе я поясню главные причины, по которым большинству фреймовых web-сайтов не удается быть правильно проиндексированным в основных поисковых машинах, использующих кроулеры (crawler), как напр. Google. Когда мы обращаем внимание на HTML код обычного сайта с фреймами, мы видим TITLE-tag, META-tags, а затем FRAMESET-tag. Большинство роботов поисковых машин как, например Google Bot и Freshbot запрограммированы полностью игнорировать определенный HTML код и, вместо этого направлены на индексирование собственно тела текста на рассматриваемой странице.

Но в типичном framed website, попросту нет тела текста, с которого может начать кроулер. Это вызвано тем, что текст расположен на других страницах сайта, которые мы называем внутренними.

Если вы желаете понять, что видят поисковики, попадая на сайт, использующий фреймы, попробуем изложить это так:

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

Как правильно использовать Noframes-Tag

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

Если кому-то действительно требуется, по какой то причине использовать framed site, тогда очень важно применить noframes-tag. Несомненно, проведение всех этих нужных действий будет полезно лишь в том случае, если информация на сайте тщательно изложена и содержит важные ключевые слова и словосочетания. Еще раз повторю, что ничто не будет важнее тщательной разработки и анализа ваших «правильных» ключевых слов и словосочетаний, полученных с помощью Wordtracker.

Всегда помните, что если вы оптимизируете сайт по неверным ключевым словам, вы может и получите высокое ранжирование, но по терминам, не имеющим ничего общего с тем, что предлагает ваш сайт! Вы станете получать запросы по продуктам или услугам, которые ваша компания не предлагает!

В поисковой индустрии правят релевантность и качество. Чем более релевантен ваш сайт, тем большего успеха вы достигнете. Вот так все просто.

Немного больше о web-сайтах, использующих фреймы

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

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

Вывод

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

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

Сделать нечто похожее на Dashboard на Codepen.

Результат должен быть примерно следующим:

Возможное решение

Разметка одной секции может выглядеть так:

Что здесь интересного?

Поскольку каждый блок имеет заголовок, мы может обернуть его в section (согласно спецификации section и article должны иметь заголовки).

.viewport — блок, содержащий фрейм (далее мы будет называть его просто блоком).

Атрибут src ссылается на содержимое фрейма, которое заменено «кавером» с помощью JS (об этом далее).

Seamless определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа (в настоящее время не поддерживается).

Scrolling=«no» запрещает отображение полос прокрутки во фрейме.

Window.open — один из способов открыть содержимое фрейма ("_blank" — в новой вкладке).

Document.location — один из способов скачать файл.

Проблема № 1. Вписать фрейм в блок

По умолчанию размер iframe в Chrome составляет 304х154px.

Применим к section следующие стили:

Установка ширины section в 300px (+meta name=«viewport» и display: flex у родительского элемента) обеспечивает одинаковое отображение фрейма на экранах с различным разрешением.

Получается так:

А должно быть так:

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

Одним из способов решения данной проблемы является масштабирование iframe:

Далее определяем размеры блока. Ширина: 1024 * 0.25 = 256px, высота: 768 * 0.25 = 192px.

Проблема № 2. Отображение содержимого при наведении курсора

При значительном количестве фреймов на странице, особенно с динамическим содержимым, мы получим очень долгую загрузку/перезагрузку и постоянные лагания при скроллинге.

Для того, чтобы решить данную проблему, мы отключаем содержимое фреймов и заменяем его картинкой. Картинка должна иметь размер 1024х768px. Если быть более точным, то мы меняем адреса файлов — значение src (на Codepen эта проблема решается с помощью короткой анимации содержимого фрейма). При наведении курсора на определенный фрейм должно отображаться его содержимое.

Что такое фрейм в HTML? Frameset — это легкий способ создавать несколько отдельных областей прокрутки в окне браузера, а также удобный механизм для изменения содержимого фрейма.

Но у фреймов есть и существенные недостатки. Именно поэтому использовать их не рекомендуется. Хотя фреймы поддерживаются в HTML 4.01 , их нет в HTML 5 . На смену им пришли многофункциональные методы форматирования CSS . Главные недостатки фреймов:

Обычно фреймы используют для создания отдельных областей с прокруткой в одном окне. Такой подход применяется в приложениях для мобильных и десктопных платформ. Примером такого приложения является проводник Windows . Окно проводника состоит из двух частей. В левой части окна отображаются папки и « Избранное », в правой — содержимое папки, выбранной в левой части окна.

Наборы фреймов и фреймовые документы

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

Создание набора фреймов

Ниже приводится пример создания frameset HTML :

Отсутствует элемент « body ». Его роль выполняет тег <frameset>;
Теги <frame>, расположенные внутри <frameset>, определяют содержимое фреймов и их свойства;
Кроме <frameset> и <head> в документе больше нет никакого содержимого.

Тег <frameset>

Тег <frameset> отвечает за расположение фрейма в документе. Указанные в нем значения определяют количество frameset rows и строк, а также ширину фреймов. Формат тега <frameset> выглядит следующим образом:

Значения атрибута cols или rows также определяют количество отображаемых на странице фреймов. Для каждой записи ( значения ) требуется наличие тега <frame> внутри тега <frameset>.

Рассмотрим следующие примеры создания тега <frameset>:

Тег <frame>

Тег <frame> отвечает за свойства каждого фрейма в наборе фреймов, заключенного в тег frameset . Он имеет следующий синтаксис:

Атрибут name присваивает фрейму уникальное имя, на которое могут ссылаться URL-адреса , скрипты и т. д. Это необходимо для управления содержимым фрейма. Атрибут src используется для указания URL-адреса содержимого, которое должно отображаться во фрейме.

Тег <frame> поддерживает еще один атрибут — noresize . По умолчанию размер фрейма является изменяемым. Чтобы запретить изменение размера, необходимо задать атрибуту noresize значение noresize .

Определение ссылок для фреймов

Чтобы изменить содержимое фрейма, следует указать нужный фрейм. Для этого используется атрибут name . Затем эти имена можно использовать в скриптах и тегах ссылок, чтобы определить для фрейма новое содержимое.

Изменить содержимое фрейма во frameset можно с помощью атрибута target тега ссылки. Для атрибута target допустимы следующие значения:

Встроенные фреймы

В отличие от frameset HTML тег iframe используется для отображения содержимого фрейма рядом с остальным содержимым веб-страницы. Встроенные фреймы не полностью поддерживаются браузерами. Их можно размещать на веб-странице, используя тег <iframe>. Синтаксис тега <iframe> выглядит следующим образом:

Тег <iframe> поддерживает такие атрибуты:

Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, подписки, лайки, дизлайки!

Пожалуйста, опубликуйте ваши отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов. Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?

Что такое Фреймы в html

Фрейм (англ. frame) - некоторая подключаемая независимая область на веб-странице.

Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.

Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:

Рис 1. Использования фреймы на примере хелпа блокнота

То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.

Пример с фреймами №1 (делаем помощь)

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

Рис 2. Каркас использования фреймов для примера №1

Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:

Пояснение к примеру №1

Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел <head> , заголовок <title> , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы - отсутствует. Вместо него вставлен тег <frameset> , который отвечает за тело страницы. У этого тега есть два атрибут cols="25%,75%" , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).

Последний совсем необязательный тег это <noframes> . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.

Кстати, обратите внимание, что для тега <frame> не нужен закрывающий тег.

Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.

Пример с 4 фреймами №2

Каркас для примера 2:

Рис 3. Каркас использования фреймов для примера №2

Код исходной html-страницы с фреймом будет следующий:

Код файла top.html

Код файла menu.html

Код файла content.html

Код файла about-site.html

Код файла about-autor.html

Код файла footer.html

Пояснение к примеру №2

Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows="15%,70%,15%" . Первый фрейм в нашем примере - шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols="25%,75%" в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name="main" с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target="main" , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .

Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:

Рис 4. Пример №2 - исходное состояние

При переходе на страницу о сайте страница будет выглядеть следующим образом:

Рис 5. Пример №2 - второе состояние

При переходе на страницу об авторе вы увидите следующие:

Рис 6. Пример №2 - третье состояние

Тег <iframe>

Тег <iframe> нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:

Необязательные атрибуты этого тега являются width="ширина" и height="высота" , а обязательный атрибут src="https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B0" .

Атрибуты и свойства тега <frameset>

1. Атрибут COLS="Параметры"
Задает количество разбиений страницы по вертикали.

2. Атрибут ROWS="Параметры"
Задает количество разбиений страницы по горизонтали.

Теперь рассмотрим каким образом можно задать параметры разбиение.

а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = "100,100,300" задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.

б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.

в) С помощью * (звездочки). Например, cols = "2*,3*,100" задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.

Все три способа можно совмещать. Например, cols="2*,100,15%,4*" .

3. Атрибут frameborder=""
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.

4. Атрибут border="параметр"
В пикселях border задает толщину обводки области фрейма. Например, frameborder = "2" задает область с выделенным контуром в 2 пикселя.

5. Атрибут bordercolor="цвет"
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).

Примечание: обратите внимание, что тегу <frameset> нужен закрывающий тег </frameset> .

Атрибуты и свойства тега <frame>

1. Атрибут src="https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.

2. Атрибут marginwidth="число"
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth="10" задаст отступ содержимого слева и справа от границы фрейма.

3. Атрибут marginhight="число"
Аналогичен второму с той лишь разницей, что задает отступ по высоте.

4. Атрибут scrolling=""
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).

5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.

5. Атрибут name="название"
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.

Примечание:
Имя не должно начинаться с нижнего подчеркивания "_".

6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).

Преимущества и недостатки фреймов

Плюсы фреймов

Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. - вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;

Минусы фреймов

Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
Не все браузеры поддерживают фреймы.

Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.

Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.

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