Тег <iframe> или встроенный фрейм используется для отображения внешних объектов, в том числе других веб-страниц. Iframe в значительной степени действует как мини-браузер в веб-браузере. Кроме того, содержимое внутри iframe существует полностью независимо от окружающих элементов.

Основной синтаксис для добавления iframe на веб-страницу может быть выражен с помощью:

<iframe src="URL"></iframe>

URL-адрес, указанный в атрибуте src, указывает на местоположение внешнего объекта или веб-страницы.

В следующем примере файл hello.html отображается внутри iframe в текущем документе.

<iframe src="hello.html"></iframe>

Настройки width и height для iFrame

Атрибуты height и width используются для указания высоты и ширины iframe.

<iframe src="hello.html" width="400" height="200"></iframe>

Вы также можете использовать CSS, чтобы установить ширину и высоту фрейма, как показано здесь:

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

См. Руководство по стилям в HTML, чтобы узнать методы применения CSS к HTML-элементам.

Значения атрибутов width и height задаются в пикселях по умолчанию, но вы также можете установить эти значения в процентах, например, 50%, 100% и т. д. Для iframe ширина по умолчанию составляет 300 пикселей, а высота 150 пикселей.

Удаление рамки по умолчанию

По умолчанию у iframe есть рамка. Однако, если вы хотите изменить или удалить границы iframe, лучше всего использовать CSS-свойство border.

Следующий пример просто отобразит iframe без каких-либо границ.

<iframe src="hello.html" style="border: none;"></iframe>

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

<iframe src="hello.html" style="border: 2px solid blue;"></iframe>

Использование iFrame в качестве ссылки

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

Iframe может быть назван с использованием атрибута name. Это означает, что при нажатии на ссылку с целевым атрибутом target в качестве значения связанный ресурс откроется в этом фрейме.

Посмотрим пример, чтобы понять, как это работает:

<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://zolin.digital/" target="myFrame">Открыть zolin.digital</a></p>

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.