Фреймы (теги frame, frameset, noframe, iframe)

HTML Тег

Встроенный фрейм помечается следующим образом:

Определение и использование

Tег указывает встроенный фрейм.

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

Поддержка браузеров

Элемент
Да Да Да Да Да

Советы и примечания

Совет:Для работы с браузерами, которые не поддерживают , добавить текст между открытым и закрытым тегом .

Совет: Использовать CSS для изменения стиля в (даже включить полосы прокрутки).

Различий между HTML 4.01 и HTML5

HTML5 добавил некоторые новые атрибуты и несколько атрибуты удалены из HTML 4.01 и HTML5.

Различий между HTML и XHTML

В XHTML, имя атрибута является устаревшим и будет удален. Глобальный атрибут id используется взамен.

Атрибуты

= Новый в HTML5.

АтрибутЗначениеОписание
align left right top middlebottom Не поддерживается в HTML5.Задает выравнивание в согласно окружающим элементам
frameborder 10 Не поддерживается в HTML5.Указывает, следует ли отображать границу вокруг в
height pixels Определяет высоту в
longdesc URL Не поддерживается в HTML5.Задает страницу, содержащую подробное описание содержимого в
marginheight pixels Не поддерживается в HTML5.Задает верхние и нижние поля содержимого в
marginwidth pixels Не поддерживается в HTML5.Определяет левые и правые поля содержимого в
name text Задает имя
sandbox allow-formsallow-pointer-lockallow-popups allow-same-origin allow-scriptsallow-top-navigation Включает дополнительный набор ограничений для содержимого в
scrolling yes noauto Не поддерживается в HTML5.Указывает, нужно ли отображать полосы прокрутки в
src URL Задает URL документа, вставляемого в
srcdoc HTML_code Задает HTML содержимой страницы для отображения в
width pixels Определяет ширину в

Глобальные атрибуты

Tег также поддерживает Глобальный атрибут в HTML.

Атрибуты событий

Tег также поддерживает Атрибуты событий в HTML.

Связанные страницы

Учебник HTML: Фреймы HTML

Справочник HTML DOM: Объект IFrame

Настройки CSS по умолчанию

Большинство браузеров будет отображать элемент со следующими значениями по умолчанию:

iframe:focus {     outline: none;} iframe[seamless] {     display: block;

}

Источник: https://schoolsw3.com/tags/tag_iframe.php

Выпуск №14. Фреймы в HTML

Всем доброго времени суток! С Вами Бернацкий Андрей.

Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы:

Видео версия 14 урока

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Теперь рассмотрим, как это все можно осуществить.

Обратите внимание

Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера BODY. Вместо него используется контейнер FRAMESET. Общий синтаксис фреймов выглядит следующим образом:

В контейнере …. располагаются теги , которые определяют содержимое фреймов.

У тега есть два параметра:

rows = число – количество строк (горизонтальных подокон).

cols = число – количество столбцов (вертикальных подокон).

Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана.

Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида:

Код, который определит нам такую структуру фрейма, будет выглядеть так:

В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ «*»(звездочка) означает занять все оставшееся место на экране.

Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:

Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях.

Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%.

Можно задавать размер фрейма символом “*” (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например , то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).

Можно комбинировать варианты задания размеров фреймов в HTML. Например:

Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место.

С первой строкой кода разобрались полностью. Идем дальше.

Важно

Далее следуют теги . Поскольку через запятую в параметре cols тега frameset задано три числа (то есть будет три фрейма), то и тегов должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.

И в последней строке закрывается контейнер .

Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали.

Параметры rows и cols одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого.

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

В браузере мы видим три страницы, каждая из которых находится в своем фрейме.

При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов frame и frameset.

Параметры тегов frame и frameset:

src =»url» – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.

noresize – отменяет возможность изменения размеров. Используется только для frame.

scrolling=»yes/no/auto» – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame.

name=»frame-name» – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame.

border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.

framespacing=»число» – расстояние между фреймами. Используется только для frameset.

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

Источник: https://webformyself.com/vypusk-14-frejmy/

Фреймы и фреймовая структура. Организация фреймовой структуры

Рисунок 1.

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

Атрибуты тега<\p>

Cols Подразделяет экран на определенное количество колонок (вертикальных).
Rows Подразделяет экран на определенное количество колонок (горизонтальных).
Bordercolor Устанавливает цвет границы между фреймами.
Border Устанавливает ширину границы между фреймами.
Frameborder Определяет, отображать границу между фреймами или нет.
Framespacing Аналог атрибута border. Устанавливает ширину границы между фреймами.

Пример.

Организация фреймовой структуры (Рис. 2).

Рисунок 2.

Используя сразу оба атрибута – Cols, и Rows в одном теге , нельзя получить такое разбиение экрана.

Тег .

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

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

В каждую из таких областей загружается самостоятельная Web – страница, определяемая с помощью атрибута Src. Хотя обязательных атрибутов у тега и нет, рекомендуется задавать каждому фрейму его имя через атрибут Name.

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

Тег для описания рамки ().

Атрибуты тега

Bordercolor Устанавливает цвет границы фрейма
Frameborder Определяет, отображать рамку вокруг фрейма или нет.
Name Задает уникальное имя фрейма.
Noresize Определяет, можно изменять размер фрейма пользователю или нет.
Scrolling Определяет присутствие в окне фрейма полосы прокрутки. Может принимать значения «yes», «no» и «auto»(по умолчанию)
Src Путь к файлу, предназначенному для загрузки во фрейме.
Marginwidht Определяет расстояние между содержимым фрейма и его границами справа и слева.
Marginheight Определяет расстояние между содержимым фрейма и его границами сверху и снизу.
Target Устанавливает связь между фреймами. Определяет имя фрейма, в который будет загружен новый документ. Имеет несколько значений: — _blank загружает содержимое страницы, заданной ссылкой, в новое пустое окно. — _self загружает содержимое страницы, заданной ссылкой, в то же окно, которое содержит ссылку. — _parent загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов. — _top загружает содержимое страницы, заданной ссылкой, в полное окно, игнорируя используемые фреймы.
Читайте также:  Что такое финансовый беттинг

Дата добавления: 2016-09-26; просмотров: 4607;

Источник: https://poznayka.org/s62069t1.html

iFrame тег

IFrame тег

Iframe весьма полезный тег и с помощью него можно делать немыслимые вещи. Однако функционал тега iframe не безграничен. В этой статье я расскажу, какие параметры можно задавать тегу iframe и где его применять.

Тег способен отображать содержимое веб-страницы внутри обычного документа (плавающий фрейм). Почти все современные браузеры поддерживают тег iframe, но на всякий случай добавляется текст «Плавающие фреймы не поддерживает Ваш браузер! Сорри!» Этот текст размещается перед закрывающим тегом . Да-да! Закрывающий тег обязателен — не забывайте его добавлять, иначе ничего работать не будет

Пример тега iframe:

Плавающие фреймы не поддерживает Ваш браузер! Сорри!

Тег iframe используется со следующими атрибутами:

align — всем известное выравнивание блока.
allowtransparency — этот атрибут позволяет сделать фон фрейма прозрачным (даже не знаю, как он может пригодиться).
frameborder — граница фрейма. Лично я всегда отключаю ее, совершенно не нужная опция.
height — высота фрейма.

Встречал информацию, что можно указать данному атрибуту значение 100% или auto если загружаемое содержимое находится на том же домене. Но вроде там еще нужно дополнительный скрип, просто так не работает.
hspace — отступ от контента до фрейма по горизонтали.
marginheight — отступ от контента до фрейма сверху и снизу.

marginwidth — отступ от контента до фрейма слева и справа.
name — можно задать имя фрейма.
sandbox — можно задать ограничения на контент во фрейме (блокировать скрипты и формы), в целях безопасности.
scrolling — отображение/отключение полосы прокрутки.

seamless — отображает фрейм как часть самого документа.
src — атрибут, который указывает путь к документу, загружаемому во фрейме.
srcdoc — хранит содержимое фрейма непосредственно в атрибуте.
vspace — отступ от контента до фрейма по вертикали.

width — ширина фрейма. Можно использовать значение 100%.

Совет

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

Но есть и проблемы у тега iframe — он отображает содержимое только от начала страницы, то есть нельзя отображать, например, с середины страницы или только конец. Также нельзя задать отображение центра или правой части, отображается только слева.

Всем удачи и добра!

Источник: https://epicblog.net/19-web-development/iframe-teg.html

HTML тег

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

Содержимое внутри области существует независимо от окружающей страницы.

Две страницы: родительская и дочерняя, отображаемая в рамке, могут взаимодействовать друг с другом через JavaScript или серверный язык программирования.

Атрибут src указывает URL-адрес страницы для загрузки во встроенную область, но сам элемент также может содержать текст или разметку в качестве резервного содержимого для отображения в браузерах, не поддерживающих этот элемент (например: очень старые браузеры, текстовые браузеры и так далее).

Извините, но ваш браузер не может отобразить содержимое фрейма, но вы можете сами перейти на страницу с новостями.<\p>

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

Можно указать размер для встроенной области с помощью необязательных атрибутов width и height или с помощью CSS. Обычно размер по умолчанию равен 300px в ширину и 150px в высоту, но, в зависимости от браузера, размер может быть иным. Большинство браузеров по умолчанию отображают содержимое элемента с узкой рамкой, которую можно изменить или удалить с помощью CSS свойства border.

Если содержимое тега превышает размеры элемента, то появляются полосы прокрутки, позволяющие пользователям прокручивать содержимое во встроенной области. Вы можете отключить полосы прокрутки с помощью CSS объявления overflow: hidden, но в этом случае у пользователя не будет возможности увидеть скрытое содержимое.

Атрибуты

height:Указывает высоту элемента в пикселях. Пример »name:Определяет имя для элемента.

Значение этого атрибута может быть использовано для ссылки на элемент в JavaScript, либо в качестве значения для атрибута target элемента или , либо в качестве значения для атрибута formtarget элемента или . Пример »

sandbox:Применяет набор ограничений на содержимое встроенной области в качестве меры безопасности в случае, если в ней отображается ненадежный веб-сайт.

Значением атрибута может быть либо пустая строка (sandbox=»»), это значение указывает, что применяются все ограничения, либо список определенных значений, разделенных пробелами, которые будут снимать конкретные ограничения:

  • «» — применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
  • allow-forms — разрешает отправку данных форм.
  • allow-same-origin — указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе.
  • allow-scripts — разрешает выполнение сценариев (исключая всплывающие окна).
  • allow-top-navigation — разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу.

Примечание: атрибут sandbox не поддерживается в IE9 и более ранних версиях, и в Opera.

seamless:Указывает, что содержимое iframe должно выглядеть так, словно оно является частью документа (без рамки и полос прокрутки). Возможные значения логического атрибута seamless:

Примечание: атрибут seamless поддерживается только в Chrome и Safari6+.

src:Указывает адрес документа, который будет отображен во встроенном фрейме. Пример »width:Указывает ширину элемента в пикселях. Пример »

Тег так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

iframe:focus { outline: none; } iframe[seamless] { display: block; }

Пример

Ваш браузер не поддерживает iframe!

Результат данного примера в окне браузера:

Источник: https://puzzleweb.ru/html/tag_iframe.php

Тег FRAMESET

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

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

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

При использовании фреймов примите во внимание их следующие особенности.

  • Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.
  • Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через тег TITLE, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
  • Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
  • Большое число фреймов требует для браузера выделения больше памяти, чем обычно.

Синтаксис<\p>

Закрывающий тег
Обязателен.

Параметры
border — толщина границы между фреймами.
bordercolor — цвет линии границы.
cols — устанавливает ширину или пропорции фреймов в виде колонок.
frameborder — отображать рамку вокруг фрейма или нет.
framespacing — аналог параметра border, задает ширину границы.
rows — задает размер или пропорции фреймов в виде строк.

Пример 1. Использование тега FRAMESET

Некоторые примеры организации фреймов приведены ниже.

Фрейм 1 Фрейм 2
Фрейм 3 Фрейм 4
Фрейм 5 Фрейм 6

Описание параметров тега FRAMESET

Параметр BORDER

Описание
Устанавливает толщину границы между фреймами. По умолчанию линия отображается трехмерной, используя параметры bordercolor и border можно настроить ее вид по своему усмотрению. Браузеры по-разному интерпретируют параметры тега FRAMESET и показывают линию. Например, для линии черного цвета толщиной 5 пикселов.

Как видно из рисунка, Opera вообще не изменяет цвет линии, но исправно отображает требуемое значение. Браузер Internet Explorer за толщину принимает среднюю часть линии залитую черным цветом, а Netscape — полную ширину или высоту, включая небольшие линии по бокам, создающие эффект приподнятости.

Если у тега FRAMESET установлен параметр framespacing=0, то браузер Opera вообще не показывает границу, а Internet Exporer игнорирует значения атрибутов bordercolor и border.

Синтаксис

Аргументы
Целое положительное число. Значение 0 скрывает рамку.

Значение по умолчанию
Зависит от браузера и операционной системы.

Аналог CSS
border

Пример 2. Изменение толщины границы

Параметр BORDERCOLOR

Описание
Определяет цвет видимых границ между фреймами. Цвет родительского элемента FRAMESET может быть изменен с помощью дочернего тега FRAMESET или индивидуального элемента FRAME. Браузер Opera вообще игнорирует данный параметр.

Синтаксис

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Читайте также:  Что такое релевантность

Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе.

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF.

Обратите внимание

Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Зависит от браузера и настроек операционной системы.

Аналог CSS
border

Пример 3. Изменение цвета границы

Параметр COLS

Описание
Задает размеры или пропорции колонок фреймов в структуре FRAMESET. Если создаются несколько колонок, то для параметра cols необходимо установить определенное значение. Для этого используется три варианта:

  1. размер в пикселах;
  2. размер в процентах от доступной ширины фрейма;
  3. символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.

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

Проценты удобно применять для пропорционального разделения фреймов, в этом случае, независимо от размера окна браузера пропорции будут сохраняться, главное, чтобы суммарная ширина колонок равнялась 100%.

Если значения не составляют в сумме 100%, браузер отобразит фреймы, но ширина их будет установлена не точно. Наконец, если требуется отвести оставшееся место под фрейм, то используется символ звездочки.

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

Синтаксис

Аргументы
Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.

Значение по умолчанию
100%

Пример 4. Ширина фреймов

Параметр FRAMEBORDER

Описание
Определяет, показывать границу между фреймами или нет. Браузер Opera в любом случае демонстрирует тонкую линию, если не используется framespacing=0.

Синтаксис

Аргументы
Допускается использовать значения yes или 1 для отображения границы и no или 0, чтобы ее скрыть.

Значение по умолчанию
По умолчанию этот параметр включен.

Пример 5. Сокрытие границы между фреймами

Параметр FRAMESPACING

Описание
Параметр framespacing является аналогом frameborder и предназначен для установки размеров границы между фреймами. Причина существования двух разных атрибутов с близкими свойствами в том, что framespacing более старый параметр и поддерживается браузерами для совместимости с их ранними версиями.

Синтаксис

Аргументы
Целое положительное число. При framespacing=0 браузер Opera полностью скрывает границы между фреймами, а Internet Explorer устанавливает их параметры по умолчанию. Этот атрибут напрочь игнорируется браузером Netscape.

Значение по умолчанию
2

Пример 6. Сокрытие границы между фреймам

Параметр ROWS

Описание
Задает высоту или пропорции фреймов в структуре FRAMESET в виде строк. Если создаются несколько строк, то для параметра rows необходимо установить определенное значение. Для этого используется три варианта:

  1. размер в пикселах;
  2. размер в процентах от доступной ширины фрейма;
  3. символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.

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

Синтаксис

Аргументы
Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.

Значение по умолчанию
100%

Пример 7. Высота фреймов

Источник: http://in-sites.ru/html/spravochnik-html/frameset

Тег iframe

Тег (inline frame — строчный фрейм ) — тег-контейнер для плавающего фрейма — автономной области на странице, в которую загружается самостоятельный документ, определяемый атрибутом src.

HTML: 3.2 | 4 / XHTML: 1.0 (Strict, Transmissional, Frameset) | 1.1

Синтаксис

align

allowtransparency

class

frameborder

height

hspace

id

longdesc

marginheight

marginwidth

name

scrolling

src

style

title

vspace

width

задает выравнивание фрейма и способ обтекания текстом

  • absmiddle — центр фрейма по центру текущей строки
  • baseline — по базовой линии текущей строки
  • bottom — нижняя граница фрейма выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр фрейма по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • texttop — верх фрейма выравнивается по самому высокому текстовому элементу строки
  • top — верх фрейма выравнивается по самому высокому элементу строки
Устанавливает, может ли фрейм быть прозрачным.Отсутствует в спецификации HTML 4.01!
определяет имя используемого класса
определяет наличие границ фрейма. 1 — есть граница, 0 — нет
задает высоту фрейма
отступ по горизонтали (по умолчанию 0).Отсутствует в спецификации HTML 4.01!
уникальный идентификатор
URL страницы с списанием фрейма
ширина верхнего и нижнего полей фрейма
ширина левого и правого полей фрейма
уникальное имя фрейма
управляет отображением полос прокрутки

  • yes — всегда присутствуют
  • no — не отображаются
  • auto — отображаются при необходимости (по умолчанию)
URL файла, отображаемого в фрейме
задает встроенную таблицу стилей
всплывающая подсказка
отступ по вертикали (по умолчанию 0).Отсутствует в спецификации HTML 4.01!
задает ширину фрейма

Текст для браузеров, неподдерживающих тег iframe

  • закрывающий тег обязателен ()
  • может содержать CDATA, строчные и блочные элементы
  • рекомендуется писать альтернативный текст между и для браузеров, не поддерживающих фреймы
  • обязательных атрибутов нет
  • используйте атрибут longdesc, чтобы сделать документ с фреймами доступнее для людей, использующих невизуальные браузеры. Этот атрибут задает ресурс, который предоставляет полное описание фрейма

При использовании фреймовых структур помните, что фреймы:

  • затрудняют индексацию сайта поисковыми системами;
  • уменьшают скорость загрузки сайта.

Фреймы применяются при построении больших информационных порталов, когда выбор определенной ссылки в одном фрейме не ведет к перегрузке всей страницы, а только страницы в данном фрейме. Однако, при использовании технологии AJAX можно обновлять определенные объекты без перегрузки всей страницы. Поэтому использование фреймов в настоящее время оправдано редко.

Твой код:

Результат:

большой полигон

Тег иногда уместно использовать для исправления некотрых багов IE6, наример для перекрытия select. С данным приемом можно ознакомиться в статье как перекрыть select в IE6.

По теме

Источник: http://mpbox.ru/manuals/html/tags/iframe.html

Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

тег frameset

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

*Атрибуты тега frameset:

  • Cols — вертикальные
  • Rows — горизонтальные

rows — горизонтально

cols — вертикально

В атрибутах cols и rows указывается, на сколько частей делить окно браузера. Вот, например, чтобы разделить окно браузера на две вертикальные части, нужно прописать вот так:

Левая часть экрана будет размером 30%, а правая – 70%.

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

В итоге первая вертикальная колонка будет  шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.

Разобрались?

Так же и с горизонтальной разбивкой:

Важно

Первая горизонтальная колонка будет  шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.

тег frame

Тег frame указывает, какой html-документ должен быть загружен в окно браузера.
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы «1.html», «2.html», «3.html». Тег frame будет выглядеть вот так:

Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – «1.html» на 30%, «2.html» на 70%.
Вот готовый код:

Результат будет таким:

* Атрибуты тега  frame

  • src – адрес веб страницы. src=»1.html»;
  • marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth=»10″;
  • marginhight – отступ внутри фрейма по высоте. Пример: marginhight =»10″;
  • scrolling – прокрутка фрейма через скролл.- yes – скролл будет присутствовать во фрейме. Пример: scrolling =»yes»;- no – скролл не будет присутствовать во фрейме. Пример: scrolling =»no»;- auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling =»auto»;
  • noresize – запрещает двигать границы фрейма.
  • name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name =»stepkinblog-ru»;

○ Ссылки во фреймах или учимся пользоваться атрибутом «name»

Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:

[яркий пример, где нет атрибута «name»]

А вот пример, если прописать атрибут «name»:

[яркий пример с атрибутом «name»]

Правда, так лучше?
Для любого фрейма пропишите атрибут «name» там, где вы хотите, чтобы открывались в нем другие html-документы

Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame», то помните, что каждое должно быть уникальным:

Теперь нужно к ссылке прописать «цель», то есть, в каком окне фрейма должен осуществиться переход. Для этого в теге «a» пропишите атрибут «target»:

страница 1 страница 2 страница 3

«Страница 1», «Страница 2»  будут открываться в одном окне там, где вы указали имя фрейму «name =»stepkinblog-ru»» и «Страница 3» откроется в другом фрейме, где было название «name =»bloggood-ru»»

Со ссылками разобрались. Переходим к практике. 

ПРАКТИКА

Задание: Нужно создать фреймы вот по такому макету:

Вначале создадим три горизонтальных фрейма:

Теперь добавим «top.html» и «footer.html»

Результат пока что будет вот таким:

Теперь между «top.html» и «footer.html» добавим «menu.html» и «content.html»:

Читайте также:  Стратегия канал волатильности

Готовый код:

Сохраните файл, как «index.html»

Создайте странички «top.html », «footer.html», «menu.html» и «content.html»:

Код файла «top.html»

StepkinBLOG.ru

Код файла «footer.html»

StepkinBlog.com © 2015

Код файла «menu.html»

  • Главная страница
  • Об авторе

Код файла «content.html»:

Главная страница

Содержимое сайта — «Главная страница (content.html)»

Код файла «autor.html»:

Об авторе

Содержимое сайта — » Об авторе (autor.html)»

Вот такой результат у меня вышел:

[посмотреть пример]

Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html».

[посмотреть пример]

○ что делать если фреймы не поддерживаются браузером?

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

УПС! Ваш браузер не поддерживает фреймы.

○ Плавающий фрейм

Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»

* атрибуты тега «iframe»

  • src — путь к открываемой странице
  • width — ширина плавающего фрейма
  • height — высота плавающего фрейма
  • scrolling — полоса прокрутки- no — никогда не показывать полосу прокрутки- yes — всегда показывать- auto — показывать при необходимости
  • align — выравнивание плавающего фрейма- left – слева- right – справа- top – выше- bottom – ниже
  • frameborder — рамка вокруг плавающего фрейма- 1 — включить рамку- 0- выключить рамку

Вот так будет выглядеть тег «iframe» с атрибутами:

Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы.» между тегами .
Это будет выглядеть вот так:

УПС! Ваш браузер не поддерживает фреймы.

Для примера давайте добавим к файлу «content.html» плавающий фрейм:

Главная страница

Содержимое сайта — «Главная страница (content.html)» УПС! Ваш браузер не поддерживает фреймы.

[посмотреть пример]

Источник: http://stepkinblog.ru/html/kak-sozdat-frejmy-v-html-osnovy-html-dlya-nachinayushhix-urok-16.html/

Вам может понравиться

В HTML5 использование фреймов запрещено. Они считаются устаревшими элементами, и их использование на данный момент действительно не имеет смысла. Но при желании вы можете прочитать о них здесь.

Из всего семейства фреймов сейчас используется тег (индивидуальный, или плавающий фрейм), который позволяет вставить на текущую страницу сайта другую страницу или некий код.

Он очень часто используется для добавления видео с Youtube, например.

Что такое фрейм? Это блок в виде специальной прямоугольной области с собственными полосами прокрутки (scrollbars).

  Основным атрибутом этого элемента является src, в значении которого указывается абсолютный или относительный URL вставляемого документа (похоже на тег , не так ли?).

HTML 5, однако, предлагает альтернативный вариант — вы можете указать исходный код дочерней страницы непосредственно в атрибуте srcdoc, без необходимости хранить ее отдельно. Естественно, этот код должен быть экранирован и соответствовать стандарту HTML.

Совет

Если вы заполняете оба атрибута, то браузер должен отдать предпочтение srcdoc, проигнорировав src. В таком случае целесообразно указывать в атрибуте src адрес копии документа, содержащегося в srcdoc. Это позволит корректно отобразить страницу даже в браузерах, не поддерживающих HTML 5.

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

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

Браузеры же с поддержкой проигнорируют все, что находится между его открывающим и закрывающим тегами.

    Ваш браузер не поддерживает встроенные фреймы!

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

Однако все еще можно указать ширину и высоту фрейма, присвоив ему атрибуты width и height соответственно. Значения их, как и в случае с , указываются в пикселях или процентах. Чаще указывают в пикселях, т.к.

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

Остался также атрибут name, позволяющий озаглавить фрейм. Если указать имя фрейма в атрибуте target какой-либо ссылки, то документ, на который она ссылается, при нажатии по ней откроется в указанном фрейме.

Эта ссылка откроется во фрейме    Ваш браузер не поддерживает фреймы.

Забавно, но пример этого кода вы тоже будете смотреть в теге iframe, но уже для этой страницы (посмотреть в отдельной вкладке).

Еще один атрибут, пришедший из HTML4: scrolling  = «auto | no | yes»— указывает способ отображения полосы прокрутки во фрейме. Его значения расшифровываются так:

  • auto — полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
  • no — запрещает отображение полос прокрутки.
  • yes — всегда вызывает появление полос прокрутки, независимо от объёма информации.

HTML 5 предоставляет еще два новых атрибута для управления фреймами. Установленный булев атрибут seamless=»seamless» означает, что браузер должен обрабатывать содержимое вставленного документа так, как будто оно является частью основного документа.

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

Также ширина и высота будут автоматически установлены браузером так, как будто фрейм является обычным блочным элементом. Помните, что не все браузеры поддерживают HTML 5 и атрибут seamless в частности.

Поэтому, когда все же нужно его применить, рекомендуется подключать к дочернему документу необходимые стили CSS и указывать в элементе атрибут target=»_parent», чтобы обеспечить правильное функционирование ссылок.

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

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

  • отправка данных из форм на сервер;
  • применение скриптов;
  • размещение ссылок, указывающих на другие окна и фреймы (нельзя использовать атрибут target);
  • применение плагинов с элементами и ;
  • использование атрибута seamless во вложенных фреймах;
  • доступ к содержимому родительского документа, включая cookie и localStorage, путем принудительной унификации источника страницы, даже если это фактически один и тот же документ (применяется при необходимости сохранить возможность скриптования в пределах дочернего документа, ограничив доступ к родительскому).

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

«» применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
allow-forms разрешает отправку данных с помощью форм.
allow-scripts разрешает выполнение сценариев (исключая всплывающие окна).
аllow-same-origin указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе. Отключает принудительную блокировку доступа к родительскому документу.
аllow-top-navigation разрешает ссылаться на документ верхнего уровня. Т.е. разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу. Остальные окна и фреймы остаются под защитой атрибута sandbox.

Пример использования сразу всех значений атрибута:

Помните, что использование sandbox не гарантирует безопасности при отображении загруженного на сервер пользовательского кода, поскольку злоумышленник может загрузить вредоносную страницу непосредственно в главном окне браузера, обойдя действие атрибута. Для более надежной защиты необходимо обеспечить вывод пользовательских страниц с указанием MIME-типа text/html-sandboxed вместо text/html.
Примечание: атрибут sandbox не поддерживается в IE9 и более ранних версиях, и в Opera.

Есть еще ряд атрибутов, которые использовались в HTML4, но для HTML5 являются устаревшими и должны быть заменены css-правилами:

  • align — определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Замена — float и vertical-align
  • frameborder -устанавливает, отображать границу вокруг фрейма или нет. Замена — border
  • hspace — горизонтальный отступ от фрейма до окружающего контента. Замена — padding
  • vspace — вертикальный отступ от фрейма до окружающего контента. Замена — padding
  • marginheight — отступ сверху и снизу от содержания до границы фрейма. Замена — margin
  • marginwidth — отступ слева и справа от содержимого до границы фрейма. Замена — margin

Вставка видео с Youtube

Достаточно часто используемое действие на различных сайтах. Для того чтобы это сделать, нужно воспользоваться кодом, предоставляемым самим сервисом youtube. Нужно под видео выбрать ссылку поделиться, затем нажать на «HTML-код» и скопировать его. После этого вставляете код в соответствующее место на странице сайта.

Совет: если Вы используете CMS WordPress, делать это нужно не в визуальном, а в текстовом редакторе, чтобы код с угловыми скобками не был преобразован в спецсимволы типа < и >.

Источник: http://html-plus.in.ua/ispolzovanie-tega-iframe/

HTML тег



Тег определяет одно конкретное окно (кадр) во фрейме.

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

Браузерная поддержка

Тег поддерживается всеми основными браузерами.

Отличия между HTML и XHTML

В HTML тег не имеет закрывающего тега.

В XHTML он обязательно должен быть закрыт.

Совет

Для валидации страницы, содержащей фреймы, убедитесь, что ее doctype имеет значение «Frameset DTD».

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

Альтернативные атрибуты

DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.

АтрибутЗначениеОписаниеDTD
frameborder
1
Указывает наличие/отсутствие рамки вокруг фрейма F
longdesc URL Указывает страницу с полным описанием содержимого фрейма Specifies a page that contains a long description of the content of a frame F
marginheight пиксели Определяет отступ сверху и снизу фрейма F
marginwidth пиксели Определяет отступ справа и слева от фрейма F
name название

Указывает название фрейма

F
noresize noresize Определяет возможность изменения размеров фрейма F
scrolling yes no

auto

Определяет возможность прокрутки содержимого фрейма F
src URL Определяет адрес документа, который будет отображаться во фрейме F

Стандартные атрибуты

Тег поддерживает следующие стандартные атрибуты:

АтрибутЗначениеОписаниеDTD
class название класса Указывает название класса для элемента STF
id id Указывает id для элемента STF
style описание_элемента Указывает строчный стиль элемента STF
title текст Указывает дополнительную информацию об элементе STF

Дополнительная информация о стандартных атрибутах.

События

Тег не поддерживает атрибуты событий.

Дополнительная информация о cобытиях HTML.

Источник: http://weblabla.ru/html/tag_frame.html

Ссылка на основную публикацию