Как встроить контент в HTML

Было время, когда Интернет был в основном ориентирован на текстовый контент. У вас не было возможности встроить эти милые изображения кошек и забавные видео в свой блог.

Медленно время изменилось, и мы оказались там, где находимся сейчас, с богатым контентом, разбросанным вокруг нас. Но кто и что вызвало это изменение? Давайте учиться вместе. Но перед этим, вот краткое введение во встраивание, если вы не знаете, что это такое -

n Встраивание означает интеграцию внешнего контента на вашу веб-страницу, такого как изображения, видео, публикации в социальных сетях и т. д., которые выглядят естественно, как если бы они были естественной частью вашей веб-страницы.

Теперь давайте узнаем о старой доброй части веб-

История встраивания в HTML

В начале 90-х наш любимый Интернет сильно отличался от сегодняшнего. Специальная группа гиков использовала списки адресов электронной почты для обсуждения будущего основного языка HTML. (Источник: Wired)

Марк Андрисен (будущий основатель Netscape) поделился подробностями своего нового творения — тега в электронном письме. он написал 25 февраля 1993 года. Это было началом как встраивания изображений в HTML, так и встраивания в целом.

После этого Netscape создала тег (теперь устаревший), который позволял встраивать внешние ресурсы, такие как аудио, видео и т. д., в HTML. Благодаря тегу мы можем встраивать видео YouTube в электронные письма, твиты, статьи, сообщения Facebook и другие места.

Типы контента, которые вы можете встраивать

1. Медиафайлы – изображения, аудио, видео, GIF-файлы и т. д.
2. Социальные сети – твиты, публикации в Facebook и Instagram, заметки и доски Pinterest, публикации в LinkedIn и т. д.
3. Музыкальные платформы. В наши дни также можно встраивать аудиоконтент с музыкальных платформ, таких как Spotify, SoundCloud и т. д.
4. Платформы для видео. Включает встраивание видео с таких платформ, как YouTube, Dailymotion, Vimeo и т. д.
5. Формы – встраивание сторонних служб форм, таких как Google Forms, Typeform и т. д.
6. Другие виджеты. Вы можете встраивать бесчисленное множество других виджетов на свой веб-сайт. Некоторые из популярных: Google Reviews, Таймер обратного отсчета, Мировое время, Карты Google, кнопки Paypal/Patreon, Погода и т. д.

Преимущества встраивания расширенного контента

1. Привлекает внимание

Изображения и видео визуально привлекательны. В эпоху Интернета, когда большинство людей заходят на ваш сайт только для того, чтобы просмотреть контент, мультимедийные материалы помогают привлечь внимание пользователей, выделяя их и заставляя их работать медленнее.

2. Снижает показатель отказов

Это продолжение последнего пункта. При достаточном количестве мультимедийного контента, размещенного в нужных местах, это заставит пользователей работать медленно и действительно видеть, что находится на веб-странице. Это заставит их дольше оставаться на веб-странице и, в свою очередь, уменьшит показатель отказов вашего веб-сайта.

3. Повышает CTR

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

4. Дополняет контент

Типы мультимедиа, такие как изображения, связанные с контентом, инфографика, GIF-файлы, видео YouTube, твиты и т. д., обеспечивают полноту вашего контента и помогают пользователям получить дополнительную информацию по теме. Размещение изображений и GIF-файлов в нужных местах также помогает рассказывать истории.

ПРИМЕР. Встраивание различных типов контента в HTML

В этом разделе мы увидим несколько практических примеров того, как встраивать определенные типы мультимедиа в HTML, такие как аудио, видео, твиты, публикации в Instagram и т. д.

Встраивание аудио в HTML

<audio

    controls

    src="/media/cc0-audio/fire.mp3">

</audio>

* Приведенный выше код является гипотетическим примером встраивания звука огня на веб-страницу. * Для встраивания аудио необходимо использовать элемент <audio> и указать адрес файла в атрибуте src аналогично изображениям. * Атрибут controls предназначен для добавления параметров управления звуком, таких как воспроизведение/пауза, отключение звука, регулировка громкости и т. д. * Вы можете написать дополнительный код внутри элемента <audio></audio> на случай, если браузер не сможет прочитать аудиофайл.

Встраивание видео в HTML

<video

    controls

    width="200"

    src="rain.mp4">

</video>

* Чтобы встроить видеофайл, вы должны использовать элемент <video> и определить адрес в атрибуте src. * Вы также можете использовать атрибут width, чтобы указать ширину видеопанели, в приведенном выше случае это 200 пикселей. * В качестве запасного варианта вы также можете написать код внутри элемента <video></video>, аналогичный аудио. * Если у вас есть несколько видеофайлов, вы можете использовать элемент <source></source> для определения каждого файла. Этот элемент также работает для аудиофайлов.

Встраивание твита в HTML

• Откройте твит в браузере и нажмите на три точки в правом верхнем углу твита.
• Нажмите «Встроить твит» из доступных вариантов.
• Вы будете перенаправлены на страницу publish.twitter.com с уже доступным кодом для встраивания твита.
• Теперь нажмите «Копировать код», это скопирует код вставки в буфер обмена. Теперь вы можете вставить этот код в свой блог или на веб-сайт, чтобы твит отображался для ваших пользователей.

Встраивание публикации Facebook в HTML

• Перейдите к публикации Facebook, которую вы хотите встроить в свой браузер, и нажмите на три точки в правом верхнем углу публикации.
• Нажмите «Встроить» из доступных вариантов. На вашем экране откроется диалоговое окно.
• В диалоговом окне будет показан код <iframe src="...">...</iframe>, который необходимо скопировать.
• Нажмите кнопку Копировать код и вставьте код на свой веб-сайт, где вы хотите показать сообщение своим пользователям.

Встраивание публикации Instagram в HTML

• Перейдите к публикации Instagram, которую вы хотите встроить в браузер, и нажмите на три точки в правом верхнем углу публикации.
• Нажмите Встроить из доступных вариантов. Теперь на вашем экране появится небольшое всплывающее окно с кодом для встраивания.
• Появится флажок Добавить подпись. Установите или снимите этот флажок в зависимости от того, хотите ли вы включать субтитры или нет.
• Нажмите кнопку Копировать код для встраивания и вставьте код на свой веб-сайт, где вы хотите показать публикацию своим пользователям.

Встраивание пера Codepen в HTML

• Откройте перо, которое хотите встроить, и нажмите «Встроить» в нижнем колонтитуле. Появится диалоговое окно с множеством параметров настройки.
• Вы можете выбрать вкладку по умолчанию — HTML, CSS или JS, выбрать тему, выбрать, будет ли код загружаться по умолчанию или нет, и выбрать, хотите ли вы сделать код редактируемым или нет.< /li>
• После того как вы просмотрели все параметры и выбрали соответствующие настройки, скопируйте код, отображаемый во всплывающем окне, и вставьте его на свой веб-сайт.

Встраивание видео YouTube в HTML

• Встроить видео с YouTube на свой веб-сайт проще, чем все перечисленные здесь варианты.
• Откройте веб-страницу видео, которое вы хотите встроить. Щелкните правой кнопкой мыши панель видео и выберите "Копировать код для встраивания".
• Все. Теперь вставьте код на свой веб-сайт, куда вы хотите встроить видео.

Подведение итогов

В 2023 году крайне важно включить в свою контент-стратегию расширенный контент. Мы уже рассмотрели преимущества встраивания расширенного контента на ваш веб-сайт и различные примеры того, как вы можете это сделать.

Надеюсь, вам понравилась эта статья, и она помогла вам встроить форматированный контент и узнать, как это сделать. Если у вас есть какие-либо вопросы, напишите мне в Twitter.

н

н