HTML-тег <объект>

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

Тег <object> указывает местоположение и тип внешнего ресурса, который должен быть внедрен.

Базовый синтаксис тега HTML <object>

Базовая структура тега <object> : 

<object data="url-of-resource" type="mime-type">
    Fallback content goes here.
</object>

Атрибут data указывает URL-адрес встроенного ресурса, а атрибут type указывает тип MIME.

Атрибуты HTML-тега <object>

  • данные: Указывает URL-адрес встроенного ресурса.
  • тип: указывает тип MIME ресурса(например, application/pdf , image/jpeg ).
  • width: Устанавливает ширину встроенного ресурса.
  • высота: устанавливает высоту встроенного ресурса.
  • Имя: присваивает имя встроенному объекту, что позволяет использовать его в качестве цели или ссылаться на него.
  • форма: указывает id элемента формы, с которым связан объект.
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Встраивание изображения с помощью тега <object>

Вот пример использования тега <object> для встраивания изображения: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded Image</h2>
        <object data="example.jpg" type="image/jpeg" width="400" height="300">
            Your browser does not support embedded images.
        </object>
    </body>
</html>

Пояснение: Будет отображено изображение, указанное data="example.jpg" , и появится сообщение об откате, если браузер не поддерживает тег <object> .

Встраивание PDF-файла

Тег <object> также может встраивать PDF-файлы непосредственно в браузер: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded PDF</h2>
        <object data="sample.pdf" type="application/pdf" width="600" height="400">
            <p>Your browser does not support PDF viewing. Please download the PDF: <a href="sample.pdf">Download PDF</a>.</p>
        </object>
    </body>
</html>

Пояснение: PDF-файл, указанный в атрибуте data будет отображен в браузере, а резервное сообщение предоставит ссылку для загрузки для неподдерживаемых браузеров.

Встраивание внешнего HTML-файла

Вы можете использовать тег <object> для встраивания другого HTML-файла на вашу веб-страницу: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded HTML File</h2>
        <object data="external-page.html" type="text/html" width="800" height="600">
            <p>Your browser does not support embedded HTML files.</p>
        </object>
    </body>
</html>

Пояснение: Указанный внешний HTML-файл отображается в границах тега <object> .

Стилизация тега <object> с помощью CSS

Вы можете стилизовать тег <object> чтобы настроить его внешний вид с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            object {
                border: 10px solid #000;
                border-radius: 5px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
        </style>
    </head>
    <body>
        <h2>Styled Embedded Object</h2>
        <object data="example.jpg" type="image/jpeg" width="400" height="300">
            Your browser does not support this object.
        </object>
    </body>
</html>

Результат: Встроенный объект отображается со стилизованной рамкой, закругленными углами и легкой тенью.

Практическое применение тега <object>

  • Отображение мультимедиа: встраивайте видео, изображения или другие медиафайлы непосредственно в веб-страницу.
  • Интерактивные документы: отображение PDF-файлов и других документов без установки плагинов.
  • Встраивание внешних страниц: интеграция контента из других HTML-файлов или веб-приложений.
  • Резервный контент: предоставление альтернативного контента для неподдерживаемых браузеров.