Тег IFRAME
Описание
Тег <IFRAME> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Тег <IFRAME> является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <IFRAME> и </IFRAME>.
Синтаксис
<iframe>...</iframe>
Параметры
- align
- Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
- frameborder
- Устанавливает, отображать границу вокруг фрейма или нет.
- height
- Высота фрейма.
- hspace
- Горизонтальный отступ от фрейма до окружающего контента.
- name
- Имя фрейма.
- scrolling
- Способ отображения полосы прокрутки во фрейме.
- src
- Путь к файлу, содержимое которого будет загружаться во фрейм.
- vspace
- Вертикальный отступ от фрейма до окружающего контента.
- width
- Ширина фрейма.
Закрывающий тег
Обязателен.
Пример 1. Использование тега <IFRAME>
<html>
<body>
<iframe src="banner.html" width="468" height="60"
hspace="10" vspace="10" align="center>
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</html>
Описание параметров тега <IFRAME>
Параметр ALIGN
Описание
Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается параметром align тега <IFRAME>.
Синтаксис
<iframe align="absmiddle | baseline | bottom | left | middle | right | texttop | top">...</iframe>
Аргументы
- absmiddle
- Выравнивание середины фрейма по середине текущей строки.
- baseline
- Выравнивание фрейма по базовой линии текущей строки.
- bottom
- Выравнивание нижней границы фрейма по окружающему тексту.
- left
- Выравнивает фрейм по левому краю окна.
- middle
- Выравнивание середины фрейма по базовой линии текущей строки.
- right
- Выравнивает фрейм по правому краю окна.
- texttop
- Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки.
- top
- Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.
Наиболее популярные параметры — left и right, создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге <IFRAME> добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
Значение по умолчанию
bottom
Пример 2. Выравнивание плавающего фрейма
<html>
<body>
<iframe src="square.html" width="220" height="20" align="right"></iframe><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</body>
</html>
Параметр FRAMEBORDER
Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder.
Синтаксис
<iframe frameborder="yes | no">...</iframe>
<iframe frameborder="0 | 1"> ...</iframe>
Аргументы
- yes (или 1)
- Отображает рамку вокруг фрейма.
- no (или 0)
- Скрывает рамку вокруг фрейма.
Значение по умолчанию
1
Пример 3. Сокрытие исходной рамки вокруг фрейма
<html>
<body>
<iframe src="sample.html" width="340" height="50" frameborder="0" style="border: 2px solid black"></iframe>
</body>
</html>
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег <IFRAME>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов.
Синтаксис
<iframe height="высота">...</iframe>
<iframe width="ширина">...</iframe>
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
width — 300 пикселов, height — 150 пикселов.
Пример 4. Ширина и высота фрейма
<html>
<body>
<iframe src="sample.html" width="150" height="150"></iframe>
</body>
</html>
Параметр HSPACE и VSPACE
Описание
Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, параметров hspace и vspace. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.
Синтаксис
<iframe hspace="поля по горизонтали">...</iframe>
<iframe vspace="поля по вертикали">...</iframe>
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 5. Поля вокруг фрейма
<html>
<body>
<iframe src="sample.html" width="150" height="150" hspace="5" vspace="7"></iframe>
</body>
</html>
Параметр NAME
Описание
В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В этом случае при создании ссылки у тега <A> требуется указать параметр target, в качестве значения которого выступает имя фрейма.
Синтаксис
<iframe name="имя">...</iframe>
Аргументы
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name.
Значение по умолчанию
Нет.
Пример 6. Открытие ссылки во фрейме
<html>
<body>
<iframe name="hero" src="0.html" width="600" height="100" hspace="5" vspace="5" align="center">
</iframe>
<p><a href="1.html" target="hero">Чебурашка</a><br>
<a href="2.html" target="hero">Крокодил Гена</a><br>
<a href="3.html" target="hero">Шапокляк</a>
</html>
Параметр SCROLLING
Описание
Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling.
Синтаксис
<iframe scrolling="auto | no | yes">...</iframe>
Аргументы
- auto
- Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
- no
- Запрещает отображение полос прокрутки.
- yes
- Всегда вызывает появление полос прокрутки, независимо от объема информации.
Значение по умолчанию
auto
Пример 7. Сокрытие полос прокрутки
<html>
<body>
<iframe src="sample.html" width="150" height="450" scrolling="no"></iframe>
</body>
</html>
Параметр SRC
Описание
Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.
Синтаксис
<iframe src="URL">...</iframe>
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 8. Путь к файлу
<html>
<body>
<iframe src="/source/sample.html" width="450" height="450">
</body>
</html>