Example for Frame

HTML Frames

HTML allows programmers to divide a single browser display into multiple window sections, where each section can load individual URLs. This concept of HTML providing multiple frames at one browser display is called frameset, and all the frame tags are used within the container tag . So the entire separation of HTML pages is possible using the concept of frames. In his chapter, you will learn about the frames and how they are used to create multiple sections in a single browser display.

The HTML font tag is obsolete and is not supported in HTML5.

HTML frameset Tag

This tag defines a specific window or frame inside the tag. Every within the tag may use attributes for different purposes like border, resizing capability, include scrolling, etc. The primary use of these frames was to display a menu in parts of the page with content in one part of the page. Multiple HTML pages can be viewed in a browser window using this tag. Let’s see how:

      1st FRAME 2nd FRAME 

Drawbacks of Frames

  • Small devices (mobile or other smartphones) cannot cope with the size and features of frames mostly because these device screens aren’t large enough to split up, which is done by .
  • Screen resolution has an adverse effect on frames that you will create in some devices.
  • In many cases, the back button of the browser may also stop working.
  • In many browsers, frame technology is not supported, and hence HTML script is unable to relay any output in the browser.
Читайте также:  Php ini mysql extensions

Various Attributes of tag

  • src: is implemented for fetching the HTML file that needs to be loaded in one of the frames. It takes the value as filename.html or filename.htm within double-quotes.
  • name: facilitates you in giving a name to your frame, and hence you can indicate which frame(s) you are supposed to load into your page.
  • frameborder: is used for specifying if the borders are being shown in the frame you are using, and you can assign values either: 1 (yes) or 0 (no) for it.
  • marginwidth: facilitates specifying the frame borders width spacing on the left and right sides. It takes the value in pixels.
  • marginheight: facilitates specifying the frame borders height spacing on top and bottom sides. It also takes the value in pixels.
  • noresize: It is generally possible to resize your frame by clicking and dragging the frame borders. But this attribute helps users stop resizing the frames. It is written something like: noresize=»noresize» .
  • scrolling: is used for activating and deactivating the scroll-bar appearance in your frame and takes either yes , no, or auto as values to be assigned to it within double-quotes.

Источник

Фреймы

Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.

Читайте также:  Css ссылка на новую вкладку

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

Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:

Пример: Структура HTML-документа с фреймами

 

<p>Ваш браузер не отображает фреймы</p>
  • rows — описывает разбиение страницы на строки:
  • cols — описывает разбиение страницы на столбцы:

В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:

  • cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
  • rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.

Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.

Границы или пространство между фреймами

По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:

В следующем примере убираем границу между фреймами:

Источник

HTML Frames Code

You can use the following HTML code to create a web page split into separate frames. You can also check out these frames templates for HTML5 compliant frames templates.

HTML5 Compliant Frames

Since HTML5 became an official recommendation, frames (in the traditional sense) are not supported in HTML. Frames used to be created using the and elements, but those elements are no longer supported in HTML.

To create HTML5 compliant frames, you need to use either iframes (i.e. using the tag), or use CSS to provde the «frame» functionality.

The CSS method is probably the better choice in most scenarios. It involves using a element (or any other suitable element) for each frame. Then using the CSS overflow property to hide any «overflowing» content on an element, and enable scrollbars for the user to scroll with. You can do this by specifying overflow:scroll or overflow:auto . You can also specify overflow:hidden to prevent scroll bars from appearing.

This method of creating frames requires that the contents of each «frame» is actually included in the same file. So rather than creating a separate HTML file for each frame as well as another file for the frameset (as one would do using the old method of creating frames), you only need to create one file.

Here’s a mini-example to demonstrate the concept:

The main difference when doing this on a whole page (as opposed to the small example above), is that you will need to use CSS to position each element on the page.

Check out these frames templates for a bunch of ready-made templates that are HTML5 compliant using the above method.

Traditional HTML Frames Code

As mentioned, this method is no longer supported in HTML. However, if you still need to do it, here’s how.

To make frames the traditional way, you need 3 or more pages. One page is the frameset page, the other pages are for each individual frame. The following code is for a frameset page. Note the code pointing to 2 other pages — one for the left frame, the other for the right frame.

The left frame (frame_example_left.html):

The right frame (frame_example_right.html):

Источник

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax