HTML Iframes — Фреймы
Встроенный фрейм HTML используется для отображения веб-страницы на веб-странице.
Frame — (в пер. с англ.) — рамка, кадр, каркас.
HTML Iframe Синтаксис фрейма
HTML тег <iframe> определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа в текущий документ HTML.
Синтаксис
Совет: Рекомендуется всегда включать атрибут title для <iframe> . Это используется программой считывания с экрана для считывания содержания встроенного фрейма.
Iframe — Установить высоту и ширину фрейма
Используйте атрибуты height и width , чтобы указать размер iframe.
Высота и ширина по умолчанию указываются в пикселях:
Пример
Или вы можете добавить атрибут style и использовать CSS свойства height и width :
Пример
Iframe — Удалить границу фрейма
По умолчанию iframe имеет границу вокруг себя.
Чтобы удалить границу, добавьте атрибут style и используйте свойство CSS border :
Пример
С помощью CSS вы можете изменить размер, стиль и цвет границы iframe:
Пример
Iframe — Цель для ссылки
В качестве фрейма для ссылки может использоваться фрейм.
Атрибут target ссылки должен ссылаться на атрибут name фрейма:
Пример
<iframe src="demo_iframe.html" name="iframe_a" title="Iframe Пример"></iframe>
Резюме
- HTML тег <iframe> определяет встроенный фрейм
- Атрибут src определяет URL-адрес страницы, которую необходимо вставить
- Всегда включайте атрибут title (для считывателей экрана — скринридеров)
- Атрибуты height и width определяют размеры фрейма
- Используйте значение border:none; чтобы удалить границу вокруг iframe
HTML Упражнения
HTML iframe тег
| Тег | Описание |
|---|---|
| <iframe> | Определяет встроенный фрейм |
Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools.
Вопросы для самоконтроля
- Для чего нужен встроенный фрейм на веб-страницах?
- Какой тег определяет встроенный фрейм?
- Какой атрибут рекомендуется добавлять к тегу iframe ?
- С помощью каких атрибутов устанавливаются высота и ширина фрейма?
- Какие CSS-свойства используются в атрибуте style для указания высоты и ширины фрейма?
- Какое CSS-свойство используется для удаления границы вокруг фрейма?
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Фреймы в html
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
В окне браузера это будет выглядеть так:
Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги <body></body>. Вместо них используются теги <frameset></frameset>, которые и указывают браузеру разбить окно на несколько областей — фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>:
-
rows — указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows=»30%, 10%, 60%» , т.е. три горизонтальные области: ширина первой — 30% от ширины экрана, ширина второй — 10%, а третьей — 60%.
Внутри тегов <frameset></frameset> располагаются одиночные теги <frame>, причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.
Мы рассмотрим параметры тега <frame> на примерах.
-
src — самый главный параметр, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.
Давайте определим этот параметр для наших фреймов в примере. Для этого создайте три обычные html-страницы:
Как делать фреймы в html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16
Всем привет!
Продолжаем усердное изучение основ HTML. Я рад, что вы не бросаете уроки основ HTML.
В этом уроке мы разберем, что такое фреймы и как они создаются в HTML.
Итак, давайте определимся, что такое фреймы в HTML.
Фреймы – это разделение окна браузера на отдельные области, в которых могут загружаться отдельные HTML документы.
Я думаю, вы поняли, что благодаря фреймам, вы можете просмотреть сразу несколько веб страниц в одном окне браузера.
Для примера, чтобы понять, как работает фрейм на практике, предлагаю посмотреть пример. Сделайте там пару переходов:
Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся вставлять фреймы в html-документ.
Создание фрейма на веб странице осуществляется по такому макету:
Внимание: макет фрейм-кода вставляется в html-документ вместо тега <bode></body> :
○ тег 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=»http://stepkinblog.ru/html/kak-sozdat-frejmy-v-html-osnovy-html-dlya-nachinayushhix-urok-16.html/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» там, где вы хотите, чтобы открывались в нем другие html-документы
Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame» , то помните, что каждое должно быть уникальным:
Теперь нужно к ссылке прописать «цель», то есть, в каком окне фрейма должен осуществиться переход. Для этого в теге «a» пропишите атрибут «target» :
« Страница 1 », « Страница 2 » будут открываться в одном окне там, где вы указали имя фрейму « name color: #ff0000;»>stepkinblog-ru » » и « Страница 3 » откроется в другом фрейме, где было название « name color: #ff0000;»>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»
Код файла «footer.html»
Код файла «menu.html»
Код файла «content.html» :
Код файла «autor.html» :
Вот такой результат у меня вышел:
Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html» .
○ что делать если фреймы не поддерживаются браузером?
Можно вывести сообщение пользователю, что его браузер не поддерживает фреймы. Для этого вставьте тег <noframes> вовнутрь конструкции <frameset> :
○ Плавающий фрейм
Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»
* атрибуты тега «iframe»
- src — путь к открываемой странице
- width — ширина плавающего фрейма
- height — высота плавающего фрейма
- scrolling — полоса прокрутки
— no — никогда не показывать полосу прокрутки
— yes — всегда показывать
— auto — показывать при необходимости - align — выравнивание плавающего фрейма
— left – слева
— right – справа
— top – выше
— bottom – ниже - frameborder — рамка вокруг плавающего фрейма
— 1 — включить рамку
— 0 — выключить рамку
Вот так будет выглядеть тег «iframe» с атрибутами:
Если браузер не поддерживает фреймы, можно вставить текст « УПС! Ваш браузер не поддерживает фреймы. » между тегами <iframe></iframe> .
Это будет выглядеть вот так:
Фреймы (теги frame, frameset, noframe, iframe)
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов. Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (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 документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.