path: root/files/ru/learn/html/multimedia_and_embedding/index.html

---
title: Мультимедиа и встраивание
slug: Learn/HTML/Multimedia_and_embedding
translation_of: Learn/HTML/Multimedia_and_embedding
---
<p>{{LearnSidebar}}</p>

<p>Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио и также других страниц целиком.</p>

<h2 id="Перед_стартом">Перед стартом</h2>

<p>Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введении HTML</a>. <span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Если вы не прошли этот модуль (или что-нибудь подобное), сначала пройдите его, затем возвращайтесь!</span></p>

<div class="note">
<p><strong>Внимание: </strong>Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из) в онлайн сервисах, например в <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>

<h2 id="Руководство">Руководство</h2>

<p>Этот модуль содержит следующие статьи, которые проведут вас через все основы внедрения мультимедиа на веб-страницах.</p>

<dl>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a></dt>
 <dd>
 <p>Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать ее используя {{htmlelement("figure")}} и как он взаимодействует с фоновым изображением CSS.</p>
 </dd>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></dt>
 <dd><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Далее мы увидим, как использовать </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>HTML</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>5-элементы {{htmlelement("video")}} и {{htmlelement("audio")}} для встраивания видео и аудио в наши страницы, включая основы, обеспечение доступа к файлам разного формата для различных браузеров, добавление надписей и субтитров, и как добавлять откаты для старых браузеров.</span></dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; до &lt;iframe&gt; — другие технологии встраивания</a></dt>
 <dd><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. &lt;iframe&gt; используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>PDF</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>, </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>SVG</span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>и даже </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Flash</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> – устаревающая технология, но все еще часто встречаемая.</span></dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt>
 <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, они не деформируются/пикселизируются при растяжении – они могут остаться гладкими при растягивании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt>
 <dd>
 <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными функциями, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущая тема CSS, которую вы должны изучить.</p>
 </dd>
</dl>

<h2 id="Аттестация">Аттестация</h2>

<p>Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.</p>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Страница приветствия Mozilla</a></dt>
 <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!</dd>
</dl>

<h2 id="Смотри_также">Смотри также</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Как добавить карту кликов поверх изображения</a></dt>
 <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.</dd>
 <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt>
 <dd>
 <p>Превосходный курс от фонда Mozilla , который освещает и проверяет некоторые навыки, полученные в модуле<em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p>
 </dd>
</dl>