1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
---
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>. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!</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>
<p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p>
</dd>
<dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> к <iframe> — другие технологии встраивания</a></dt>
<dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.</dd>
<dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_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="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия 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>
|
