Контакты

Iframe атрибуты и свойства. Iframe и Frame — что это такое и как лучше использовать фреймы в Html. Описание параметров тега

На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки <frame >, <frameset > и <noframes > признаны устаревшими. Заменой им стал один-единственный тег - <iframe >. Как добавить в html

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

Элемент

Frames

Что же делает

Основное различие между .

Синтаксис

Параметры

align Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. frameborder Устанавливает, отображать границу вокруг фрейма или нет. height Высота фрейма. hspace Горизонтальный отступ от фрейма до окружающего контента. name Имя фрейма. scrolling Способ отображения полосы прокрутки во фрейме. src Путь к файлу, содержимое которого будет загружаться во фрейм. vspace Вертикальный отступ от фрейма до окружающего контента. width Ширина фрейма.

Закрывающий тег

Обязателен.

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


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

Аргументы

absmiddle Выравнивание середины фрейма по середине текущей строки. baseline Выравнивание фрейма по базовой линии текущей строки. bottom Выравнивание нижней границы фрейма по окружающему тексту. left Выравнивает фрейм по левому краю окна. middle Выравнивание середины фрейма по базовой линии текущей строки. right Выравнивает фрейм по правому краю окна. texttop Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки. top Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Наиболее популярные параметры — left и right , создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Параметр FRAMEBORDER

Описание

По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder .

Синтаксис


Аргументы

yes (или 1) Отображает рамку вокруг фрейма. no (или 0) Скрывает рамку вокруг фрейма.

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

Пример 3. Сокрытие исходной рамки вокруг фрейма





Тег IFRAME, параметр frameborder




Параметр HEIGHT и WIDTH

Описание

Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height . Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег

Аргументы

Любое целое положительное число в пикселах или процентах.

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

width — 300 пикселов, height — 150 пикселов.

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





Тег IFRAME, параметр width




Параметр HSPACE и VSPACE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Синтаксис


Аргументы

Любое целое положительное число в пикселах.

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

Пример 5. Поля вокруг фрейма





Тег IFRAME, параметр hspace




Параметр NAME

Описание

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

Синтаксис

Аргументы

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

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





Тег IFRAME, параметр name


Чебурашка

Крокодил Гена

Шапокляк


Параметр SCROLLING

Описание

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

Синтаксис

Аргументы

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

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

Пример 7. Сокрытие полос прокрутки





Тег IFRAME, параметр scrolling




Параметр SRC

Описание

Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

Аргументы

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

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

Пример 8. Путь к файлу





Тег IFRAME, параметр src




Теги фреймов

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

    • Тег , где src атрибут, который определяет местоположение документа или веб-сайта.

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

    Поддержка браузерами

    Тег
    Opera
    IExplorer
    Edge

    href = "https://tinypng.com" target = "myframe" > TinyPng href = "moscow.jpg" target = "myframe" > Moscow href = "paris.jpg" target = "myframe" > Paris href = "london.jpg" target = "myframe" > London

    В этом примере мы:

    • Элементом

      В этом примере элементом