initial commit

7 files changed, 1778 insertions, 0 deletions

diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..6cf2856997
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,57 @@
+---
+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>
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
new file mode 100644
index 0000000000..7ad838ef1b
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -0,0 +1,373 @@
+---
+title: От <object> к <iframe> - другие технологии внедрения
+slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: {{htmlelement ("iframe")}}, {{htmlelement ( "embed")}} и {{htmlelement ("object")}}. &lt;iframe&gt; предназначен для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash - устаревшую технологию, которую вы все равно иногда увидите.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предпосылки:</th>
+   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового программного обеспечения</a>, базовые знания <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, знакомство с основами HTML (как описано в разделе <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>) и предыдущими статьями в этом модуле.</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Узнать, как встраивать элементы в веб-страницы, используя {{htmlelement ("object")}}, {{htmlelement ("embed")}} и {{htmlelement ("iframe")}}, например, флеш-ролики и другие веб-страницы </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Краткая_история_внедрения">Краткая история внедрения</h2>
+
+<p>Давным-давно в Интернете было популярно использовать <strong>фреймы</strong> для создания веб-сайтов - небольших частей веб-сайта, хранящихся на отдельных страницах HTML. Они были встроены в главный документ, называемый <strong>набором фреймов</strong>, который позволял вам указать область на экране, которую заполнял каждый фрейм, а не столбец и строку таблицы. Они были популярны в середине и конце 90-х годов и были доказательством того, что разделение веб-страницы на более мелкие куски лучше сказывается на скорости загрузки, особенно это заметно, когда сетевые соединения были медленными. Однако у них было много проблем, которые намного перевешивали любые положительные моменты, когда скорость сети становилась выше. Поэтому вы больше не увидите, чтобы их использовали.</p>
+
+<p>Спустя некоторое время (конец 90-х, начало 2000-х годов) технологии плагинов, такие как Java-апплеты и Flash, стали очень популярными - это позволило веб-разработчикам встраивать богатый контент в веб-страницы, такие как видео и анимации, которые просто не были доступны только через HTML. Внедрение этих технологий осуществлялось посредством таких элементов, как {{htmlelement ("object")}} и менее используемого {{htmlelement ("embed")}}, и они были очень полезны в то время. С тех пор они вышли из моды из-за многих проблем, включая доступность, безопасность, размер файла и многое другое; в наши дни большинство мобильных устройств больше не поддерживают такие плагины, и поддержка на компьютерах также уменьшается.</p>
+
+<p>Наконец, появился элемент {{htmlelement ("iframe")}} (наряду с другими способами встраивания контента, например {{htmlelement ("canvas")}}, {{htmlelement ("video")}} и т. д. ) Он позволяет встраивать целый веб-документ внутри другого, как если бы это был {{htmlelement ("img")}} или другой подобный элемент, и сегодня используется повсеместно.</p>
+
+<p>Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.</p>
+
+<h2 id="Активное_обучение_использование_классического_внедрения">Активное обучение: использование классического внедрения</h2>
+
+<p>В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя {{htmlelement ("iframe")}}.</p>
+
+<ol>
+ <li>Сначала перейдите на Youtube и найдите понравившееся вам видео.</li>
+ <li>Под видео вы найдете кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li>
+ <li>Выберите кнопку «Вставить», и вам будет предоставлен код &lt;iframe&gt; - скопируйте его.</li>
+ <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li>
+</ol>
+
+<p>Дополнительно вы также можете попробовать внедрить карту Google следующим образом:</p>
+
+<ol>
+ <li>Перейдите в Карты Google и найдите подходящую вам карту.</li>
+ <li>Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.</li>
+ <li>Выберите параметр Ссылка/код.</li>
+ <li>Выберите параметр Встраивание карт, который даст вам код &lt;iframe&gt; - скопируйте его.</li>
+ <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li>
+</ol>
+
+<p>Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 250px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Подробно_об_Iframes">Подробно об Iframes</h2>
+
+<p>Итак, это было легко и весело, не так ли? Элементы {{htmlelement ("iframe")}} предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью &lt;iframe&gt;.</p>
+
+<p>Есть несколько серьезных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании &lt;iframe&gt;, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p>
+
+<pre class="notranslate">&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox&gt;
+  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+    Fallback link for browsers that don't support iframes
+  &lt;/a&gt; &lt;/p&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Этот пример включает основы, необходимые для использования &lt;iframe&gt;:</p>
+
+<dl>
+ <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
+ <dd>Если установлено, &lt;iframe&gt; может быть помещен в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd>
+ <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
+ <dd>Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя {{cssxref ('border')}}: none; в {{Glossary ('CSS')}}.</dd>
+ <dt>{{htmlattrxref('src','iframe')}}</dt>
+ <dd>Этот атрибут, как и {{htmlelement ("video")}} / {{htmlelement ("img")}}, содержит путь, указывающий на URL-адрес внедряемого документа.</dd>
+ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
+ <dd>Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.</dd>
+ <dt>Резервный контент</dt>
+ <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия &lt;iframe&gt; &lt;/ iframe&gt;, которые появятся, если браузер не поддерживает &lt; IFRAME&gt;. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнетесь с таким браузером, который не поддерживает &lt;iframe&gt; в наше время.</dd>
+ <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
+ <dd>Этот атрибут, который работает в более современных браузерах, чем остальные функции &lt;iframe&gt; (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание: </strong>Чтобы повысить скорость загрузки, рекомендуется установить атрибут src iframe'а с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель {{glossary ("SEO")}}.)</p>
+</div>
+
+<h3 id="Проблемы_безопасности">Проблемы безопасности</h3>
+
+<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймете с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнете рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать &lt;iframe&gt; - вам просто нужно быть осторожным. Продолжим...</p>
+
+<p>Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe - частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты &lt;iframe&gt;, лучшие из которых мы рассмотрим ниже.</p>
+
+<div class="note">
+<p>{{interwiki('wikipedia','Clickjacking')}} – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.</p>
+</div>
+
+<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри &lt;iframe&gt; (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнет стоить Mozilla больших денег.</p>
+
+<h4 id="Используйте_только_при_необходимости">Используйте только при необходимости</h4>
+
+<p>Иногда имеет смысл вставлять сторонний контент - например, видео и карты, но вы избежите головной боли, если будете вставлять сторонний контент только тогда, когда это абсолютно необходимо. Хорошее эмпирическое правило для веб-безопасности: «Вы никогда не можете быть слишком осторожным. Если вы что-то сделали, дважды проверьте это. Если кто-то другой сделал это, считайте, что это опасно, пока не будет доказано обратное».</p>
+
+<div>
+<p>Помимо безопасности, <span id="result_box" lang="ru"><span>вы также должны знать об интеллектуальной собственности</span></span>. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными.</p>
+
+<p>Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на <a href="/en-US/docs/MDN/About#Copyrights_and_licenses">licensed under CC-BY-SA</a>. Это означает, что вы <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">должны относиться к нам с уважением</a>, когда цитируете наш контент, даже если внесли в него существенные изменения.</p>
+</div>
+
+<h4 id="Используйте_HTTPS">Используйте HTTPS</h4>
+
+<p>{{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. <span id="result_box" lang="ru"><span>Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно</span></span> :</p>
+
+<ol>
+ <li>HTTPS уменьшает вероятность того, что контент был изменен по пути;</li>
+ <li>HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.</li>
+</ol>
+
+<p>Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть <a href="https://letsencrypt.org/">Let's Encrypt</a>, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS <em>во что бы то ни стало</em> вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через &lt;iframe&gt;, доступны через HTTPS - посмотрите URL-адреса внутри &lt;iframe&gt; src при встраивании, например, содержимого из Карт Google или Youtube.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера об этом.</p>
+</div>
+
+<h4 id="Всегда_используйте_атрибут_sandbox">Всегда используйте атрибут <code>sandbox</code></h4>
+
+<p>Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом или для тестирования, но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
+
+<p>Контент, не ограниченный sandbox, может сделать слишком многое (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию включайте все возможные ограничения, используя атрибут <code>sandbox</code> без параметров, как показано в предыдущем примере.</p>
+
+<p>Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута <code>sandbox=""</code>) — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы <em>никогда</em> не должны добавлять атрибуты <code>allow-scripts</code> и <code>allow-same-origin</code> в свой <code>sandbox</code> атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .</p>
+
+<div class="note">
+<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определенный контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p>
+</div>
+
+<h4 id="Настройка_директив_CSP"><span id="result_box" lang="ru"><span>Настройка директив CSP</span></span></h4>
+
+<p>{{Glossary("CSP")}} означает <strong><a href="/en-US/docs/Web/Security/CSP">политику безопасности контента</a></strong> и обеспечивает <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">набор заголовков HTTP</a> (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера), предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности <code>&lt;iframe&gt;</code>, вы можете <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">настроить сервер для отправки соответствующего <code>X-Frame-Options</code>  заголовка.</a></em> Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать {{interwiki('wikipedia','clickjacking')}} и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее..</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете прочитать пост Фредерика Брауна <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.</p>
+</div>
+
+<h2 id="Элементы_&lt;embed>_и_&lt;object>">Элементы &lt;embed&gt; и &lt;object&gt;</h2>
+
+<p>Элементы {{htmlelement("embed")}} и {{htmlelement("object")}}  служат другой функции, в отличие от iframe - эти элементы являются инструментами общего назначения для встраивания нескольких типов внешнего контента, включая плагиновые технологии, такие как Java Applets и Flash, PDF (которые могут отображаться в браузере с плагином PDF) и даже такой контент, как видео, SVG и изображения!</p>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><span><strong>Примечание</strong>. <strong>Плагин </strong>- это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.</span></span></p>
+</div>
+
+<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.</p>
+
+<p><span id="result_box" lang="ru"><span>Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("URL")}} встраиваемого контента</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td><em>точный </em>{{glossary("MIME type", 'media type')}} встраиваемого контента</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>высота и ширина (в пикселях) элемента, управляемого плагином</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>имена и значения, предоставляемые плагину в качестве параметров</td>
+   <td>Особые атрибуты,с их именами и значениями</td>
+   <td>одиночные элементы {{htmlelement("param")}}, находящиеся внутри <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>независимый HTML-контент в качестве резерва для отсутствующего ресурса</td>
+   <td>не поддерживается (<code>&lt;noembed&gt;</code> является устаревшим)</td>
+   <td>содержится внутри <code>&lt;object&gt;</code>, после элементов <code>&lt;param&gt;</code> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>&lt;object&gt;</code> -у необходим атрибут <code>data</code> , атрибут <code>type</code> , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут {{htmlattrxref('typemustmatch','object')}} (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут <code>typemustmatch</code> предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут <code>typemustmatch</code> может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников {{glossary("origin")}} (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).</p>
+</div>
+
+<p>Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, а также на <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a>):</p>
+
+<pre class="brush: html notranslate">&lt;embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+
+<p>Достаточно ужасно, не так ли? Html-код, генерируемый Flash, имел склонность быть значительно хуже. Он использовал элемент <code>&lt;object&gt;</code> вместе со встроенным элементом <code>&lt;embed&gt;</code> для скрытия всего фундамента (взгляните на пример). Flash ранее использовался в качестве резерва для HTML5-видео (в случае его отсутствия), но со временем необходимость в этом отпала.</p>
+
+<p>Давайте взглянем на пример <code>&lt;object&gt;</code> , встраивающего PDF в страницу (взгляните <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> и <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p>
+
+<pre class="brush: html notranslate">&lt;object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch&gt;
+  &lt;p&gt;You don't have a PDF plugin, but you can &lt;a href="mypdf.pdf"&gt;download the PDF file.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;</pre>
+
+<p>PDF-файлы были необходимым средством достижения цели в качестве преобразования бумажной информации в цифровую, но, в то же время, они имеют множество проблем доступности и плохо читаемы на мелких экранах. В некоторых кругах они всё ещё пользуются популярностью, так что заметим, что вместо встраивания в страницу следует использовать ссылки (для скачивания или чтения на отдельной вкладке).</p>
+
+<h3 id="Дело_против_плагинов"><span class="short_text" id="result_box" lang="ru"><span>Дело против плагинов</span></span></h3>
+
+<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надежнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p>
+
+<ul>
+ <li><strong>Расширьте свою досягаемость для всех</strong>. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.</li>
+ <li><strong>Немного передохните от лишних головных болей, связанных с общедоступностью Flash-плагинов и др.( <a href="http://webaim.org/techniques/flash/">extra accessibility headaches </a>).</strong></li>
+ <li><strong>Избегайте лишних проблем безопасности. </strong>Ни для кого не секрет,что Adobe Flash является небезопасным, даже после многочисленных патчей. В 2015, Алекс Стэймос (бывший главный сотрудник по вопросам информационной безопасности компании Facebook) даже делал запрос, чтобы Adobe прекратил поддержку Flash.</li>
+</ul>
+
+<p>Итак, что нужно делать? Если вам нужна интерактивность, HTML и {{glossary ("JavaScript")}} могут легко выполнить задание для вас без необходимости использования апплетов Java или устаревшей технологии ActiveX / BHO. Вместо того, чтобы полагаться на Adobe Flash, вы можете использовать видео HTML5 для своих медиа-потребностей, SVG для векторной графики и Canvas для сложных изображений и анимаций. Питер Элст уже писал несколько лет назад, что Adobe Flash редко является подходящим инструментом для работы, за исключением специализированных игр и бизнес-приложений. Что касается ActiveX, браузер Microsoft {{glossary ("Microsoft Edge", "Edge")}} больше не поддерживает его.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраиваний стороннего контента, помимо встроенных карт и видео на своих страницах.</p>
+
+<p>Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
new file mode 100644
index 0000000000..b65ec750e1
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -0,0 +1,242 @@
+---
+title: Адаптивные изображения
+slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые  имеются в HTML для их реализации. Responsive images - только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требования:</th>
+   <td>Предполагается, что вы уже знакомы с  <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">основами HTML</a> и умеете <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">добавлять статичные изображения на веб-страницу</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Узнать, как использовать такие элементы, как {{htmlattrxref("srcset", "img")}} и {{htmlelement("picture")}} чтобы обеспечить работу гибких изображения на веб-сайтах.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Почему_адаптивные_изображения">Почему адаптивные изображения?</h2>
+
+<p>Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">посмотреть демо-пример</a> и найти <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">исходный код</a> на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:</p>
+
+<ul>
+ <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остается на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li>
+ <li>Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) все равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.</li>
+ <li>Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.</li>
+</ul>
+
+<p>Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как <strong>art direction problem</strong>.</p>
+
+<p>Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется <strong>resolution switching problem</strong> — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторную графику</a>, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.</p>
+
+<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы четче отображалось. По сути это всё одна задача в разных условиях.</p>
+
+<p>Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. </p>
+
+<p>Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. <em>Технологии отзывчивых изображений</em> были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (<em>resolution switching</em>), или разные изображения с отдельными областями основного изображения (<em>art direction</em>).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Новые возможности обсуждаются в статье — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).</p>
+</div>
+
+<h2 id="Как_сделать_изображения_отзывчивыми">Как сделать изображения отзывчивыми?</h2>
+
+<p>В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML {{htmlelement("img")}}. Как показано на примере выше - изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS больше подходит для адаптивного дизайна</a> чем HTML, об этом поговорим в следующем модуле о CSS.</p>
+
+<h3 id="Разные_разрешения_Разные_размеры">Разные разрешения: Разные размеры</h3>
+
+<p>Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один  путь к файлу:</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Однако есть два новых атрибута — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> (также смотри <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">источник кода</a>).</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Атрибуты <code>srcset</code> и <code>sizes</code> кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:</p>
+
+<p><strong><code>srcset</code></strong> включает названия изображений, среди которых браузер выберет нужное и их размеры.<strong> </strong>Перед каждой запятой части значения в таком порядке:</p>
+
+<ol>
+ <li>Название изображения (<code>elva-fairy-480w.jpg</code>.)</li>
+ <li>Пробел.</li>
+ <li><strong>Актуальная ширина картинки</strong> <strong>в пикселах </strong>(<code>480w</code>) — заметьте, что здесь используется <code>w</code> вместо <code>px</code>, как вы могли ожидать.  Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  <kbd>Cmd</kbd> + <kbd>I</kbd> , чтобы вывести информацию на экран).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> определяет перечень медиа-выражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиа-выражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:</p>
+
+<ol>
+ <li><strong>Медиа-условие</strong> (<code>(max-width:480px)</code>) — вы можете больше узнать об этом в <a href="/en-US/docs/Learn/CSS">CSS topic</a>, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".</li>
+ <li>Пробел.</li>
+ <li><strong>Ширину слота</strong> (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. (<code>440px</code>)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Для ширины слота, вы можете указать абсолютные значения (<code>px</code>, <code>em</code>) или значение относительно окна просмотра (<code>vw</code>), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.</p>
+</div>
+
+<p>Итак, с такими атрибутами, браузер сделает следующее:</p>
+
+<ol>
+ <li>Посмотрит на ширину экрана устройства.</li>
+ <li>Попытается определить подходящее медиа-условие из списка в атрибуте <code>sizes</code>.</li>
+ <li>Посмотрит на размер слота к этому медиа-запросу.</li>
+ <li>Загрузит изображение из списка из <code>srcset</code>, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. </li>
+</ol>
+
+<p>И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие <code>(max-width: 480px)</code> будет истинно, следовательно, будет выбран слот <code>440px</code>, тогда будет загружено изображение <code>elva-fairy-480w.jpg</code>, так как свойство ширины (<code>480w</code>) наиболее близко значение <code>440px</code>. Условно, изоображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.</p>
+
+<p>Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: В описании элемента {{htmlelement("head")}} вы найдёте строку <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)</p>
+</div>
+
+<h3 id="Полезные_инструменты_разработчика">Полезные инструменты разработчика</h3>
+
+<p>Есть несколько полезных браузерных <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструментов разработчика</a>, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера (<code>not-responsive.html</code>), затем открывал <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View</em>), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.</p>
+
+<p>Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector,</a> кликал по элементу {{htmlelement("img")}} в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>А дальше вы можете проверить работает ли <code>srcset</code> если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.</p>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Переключения_разрешений_Одинаковый_размер_разные_разрешения">Переключения разрешений: Одинаковый размер, разные разрешения</h3>
+
+<p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дисриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называмое CSS-пикселями):</p>
+
+<pre class="brush: css notranslate">img {
+  width: 320px;
+}</pre>
+
+<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p>
+
+<h3 id="Художественное_оформление">Художественное оформление</h3>
+
+<p>Подводя итоги, <strong>проблема художественного оформления</strong> заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. <span class="tlid-translation translation" lang="ru"><span title="">Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается;</span></span> он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент {{htmlelement("picture")}} позволяет нам применять именно такое решение.</p>
+
+<p>Возвращаясь к нашему оригинальному примеру <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>, мы имеем изображение которое очень нуждается в художественном оформлении:</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
+
+<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> и <code>&lt;audio&gt;</code></a>, элемент <code>&lt;picture&gt;</code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождаении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Элемент <code>&lt;source&gt;</code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий опредяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code>&lt;source&gt;</code>. Если ширина составит 800px и более — второго.</li>
+ <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code>&lt;img&gt;</code> выше, <code>&lt;source&gt;</code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображниями. Так вы можете не только поместить группу изображений внутри элемента <code>&lt;picture&gt;</code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li>
+ <li>Вы всегда должны использовать элемент <code>&lt;img&gt;</code>, с <code>src</code> и <code>alt</code>, прямо перед <code>&lt;/picture&gt;</code>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <code>&lt;source&gt;)</code> или браузер не поддерживает элемент <code>&lt;picture&gt;</code>.</li>
+</ul>
+
+<p>Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вам следует использовать атрибут <code>media</code> только при художественном оформлении; когда вы используюте <code>media</code>, не применяйте медиа-условия с атрибутом <code>sizes</code>.</p>
+</div>
+
+<h3 id="Почему_это_нельзя_сделать_посредством_CSS_и_JavaScript">Почему это нельзя сделать посредством CSS и JavaScript?</h3>
+
+<p>Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решeния, как <code>srcset</code>. Например, вы не могли бы загрузить элемент <code>&lt;img&gt;</code>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.</p>
+
+<ul>
+</ul>
+
+<h3 id="Смело_используйте_современные_форматы_изображений">Смело используйте современные форматы изображений</h3>
+
+<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p>
+
+<p><code>&lt;picture&gt;</code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Не используйте атрибут <code>media</code>, если вам не нужно художественное оформление.</li>
+ <li>В элементе <code>&lt;source&gt;</code> можно указывать путь к изображениям только того типа, который указан в <code>type</code>.</li>
+ <li>Как и в предыдущих примерах, при необходимости вы можете использовать <code>srcset</code> and <code>sizes</code>.</li>
+</ul>
+
+<h2 id="Активное_обучение_реализация_собственных_адаптивных_изображений">Активное обучение: реализация собственных адаптивных изображений</h2>
+
+<p>Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя <code>&lt;picture&gt;</code> и <code>srcset</code>.</p>
+
+<ol>
+ <li>Напишите простую HTML-разметку.</li>
+ <li>Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).</li>
+ <li>Используйте элемент <code>&lt;picture&gt; </code>для работы с художественно оформленной картинкой.</li>
+ <li>Обозначьте несколько разных размеров для этой картикни.</li>
+ <li>Используйте <code>srcset</code>/<code>size</code> для описания переключения при смене размеров viewport'а</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Это все для отзывчивых изображений - мы надеемся, вам понравилось играть с этими новыми технологиями. <span class="tlid-translation translation" lang="ru"><span title="">Напомним, что мы здесь обсуждали две различные проблемы:</span></span></p>
+
+<ul>
+ <li><strong>Художественное оформление</strong>: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов - например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью {{htmlelement("picture")}} элемента.</li>
+ <li><strong>Переключение разрешений</strong>: Проблема, при которой вы хотите использовать <span class="tlid-translation translation" lang="ru"><span title="">файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях</span></span>, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторной графики</a> (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.</li>
+</ul>
+
+<p>Это так же подводит нас к окончанию целого модуля <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">"Мультимедия и встраивание"</a>! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше <span class="tlid-translation translation" lang="ru"><span title="">- это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!</span></span></p>
+
+<h2 id="Посмотрите_так_же">Посмотрите так же</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Отличное введение в отзывчивые изображения от Джейсона Григсби</a></li>
+ <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Отзывчивые изображения: Если вы только меняете разрешения используйте srcset</a> — включает больше объяснений того,как браузер выбирает,какое изображение использовать</li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..1b7cfb7af6
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,293 @@
+---
+title: Видео и аудио контент
+slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с  элементами  {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предпосылки:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания  <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, знакомство с основами HTML (как описано в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>) и <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Аудио_и_видео_в_Интернете">Аудио и видео в Интернете</h2>
+
+<p>Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности вставлять видео и аудио в Интернет, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Такая технология работала нормально, но у нее было много недостатков, включавших плохую работу с функционалом HTML и CSS, проблемы безопасности и проблемы доступности.</p>
+
+<p>Самостоятельное решение решило бы большую часть этого, если сделано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и{{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.</p>
+
+<p>Мы не будем учить вас, как создавать аудио- и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио- и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Прежде чем вы начнете здесь, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> и <a href="https://vimeo.com/">Vimeo</a>, а также онлайн аудио-провайдеров вроде <a href="https://soundcloud.com/">Soundcloud</a>. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться о огромном потреблении полосы пропускания. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.</p>
+</div>
+
+<h3 id="Элемент_&lt;video>">Элемент &lt;video&gt;</h3>
+
+<p>Элемент {{htmlelement("video")}}  позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:</p>
+
+<pre class="brush: html notranslate">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Ваш браузер не поддерживает HTML5 видео. Используйте &lt;a href="rabbit320.webm"&gt;ссылку на видео&lt;/a&gt; для доступа.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Описание параметров:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>Точно так же, как для элемента {{htmlelement("img")}} , атрибут <code>src</code> (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны  <a href="https://ru.wikipedia.org/wiki/%D0%AD%D0%BF%D0%B8%D0%BB%D0%B5%D0%BF%D1%81%D0%B8%D1%8F">эпилепсией</a>). Вы должны либо использовать атрибут <code>controls</code>,  чтобы использовать встроенный в браузер интерфейс управления  или создать собственный интерфейс, используя соответствующие  <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.</dd>
+ <dt>Параграф внутри тегов <code>&lt;video&gt;</code></dt>
+ <dd>Это называют <strong>резервный контент</strong> — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <code>&lt;video&gt;</code>, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.</dd>
+</dl>
+
+<p>Встроенное видео будет выглядеть примерно так:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Вы можете  <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">посмотреть живой пример</a> (взгляните также на <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">исходный код</a>).</p>
+
+<h3 id="Поддержка_нескольких_форматов">Поддержка нескольких форматов</h3>
+
+<p>Присутствует одна проблема с приведенным выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет играть!</p>
+
+<p>Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются <strong>форматами контейнеров</strong>. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.</p>
+
+<p>Аудио и видео треки также находятся в разных форматах, например:</p>
+
+<ul>
+ <li>Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.</li>
+ <li>Контейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.</li>
+ <li>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.</li>
+</ul>
+
+<p>Звуковой проигрыватель обычно воспроизводит звуковую дорожку напрямую, например, файл MP3 или Ogg.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Всё не так просто, вы можете увидеть это в нашей <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">таблице совместимости видео и аудио кодеков</a>. Кроме того, многие браузеры мобильных платформ могут воспроизводить неподдерживаемый формат, передавая его системному медиа-проигрывателю. Так случается и в наше время.</p>
+</div>
+
+<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные <strong>{{Glossary("Codec","Codecs")}}</strong>, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в двоичные цифры и обратно. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования носителя, он просто не сможет играть.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. <strong>MP3 </strong> (для аудио) и <strong>MP4/H.264</strong> (для видео)  широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают  MP3  по крайней мере до 2017 года, и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p>
+</div>
+
+<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновленный пример</a> ( а также <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Ваш браузер не подддерживает HTML5 видео. Вот &lt;a href="rabbit320.mp4"&gt;ссылка на видео&lt;/a&gt; взамен.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Здесь мы изъяли атрибут <code>src</code>  из нашего тега <code>&lt;video&gt;</code>, и вместо этого включали отдельные  элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдется по элементам <code>&lt;source&gt;</code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p>
+
+<p>Каждый элемент <code>&lt;source&gt;</code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространенные {{glossary("MIME type","MIME types")}}.</p>
+</div>
+
+<h3 id="Другие_параметры_&lt;video>">Другие параметры &lt;video&gt;</h3>
+
+<p>Есть ряд других параметры, которые вы можете включить в HTML5 элемент <code>video</code>. Взгляните на наш третий пример:</p>
+
+<pre class="brush: html notranslate">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>На выходе получим нечто, подобное этому:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Новые параметры:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt>
+ <dd>Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью  {{Glossary("CSS")}}. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как <strong>соотношение сторон</strong>. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:</p>
+
+ <ul>
+  <li><code>"none"</code> не буферизирует файл</li>
+  <li><code>"auto"</code> буферизирует медиафайл</li>
+  <li><code>"metadata"</code> буферирует только метаданные файла</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Вы можете найти приведенный выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнет воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p>
+
+<h3 id="Элемент_&lt;audio>">Элемент &lt;audio&gt; </h3>
+
+<p>Элемент {{htmlelement ("audio")}} работает точно так же, как элемент {{htmlelement ("video")}}, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:</p>
+
+<pre class="brush: html notranslate">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>В браузере это вызывает следующее:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p>Примечание: Вы можете запустить <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">аудио-демо</a> в Github (см. также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">исходный код аудиоплеера</a>.)</p>
+</div>
+
+<p>Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:</p>
+
+<ul>
+ <li>Элемент {{htmlelement ("audio")}} не поддерживает атрибуты width / height - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.</li>
+ <li>Он также не поддерживает атрибут​​​​​ <code>poster</code>- опять же, из-за отсутствия визуального компонента. </li>
+</ul>
+
+<p>Помимо этого, <code>&lt;audio&gt;</code> поддерживает все те же функции, что и <code>&lt;video&gt;</code> - просмотрите приведенные выше разделы для получения дополнительной информации о них.</p>
+
+<h2 id="Отображение_текстовых_дорожек_к_видео">Отображение текстовых дорожек к видео</h2>
+
+<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио / видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:</p>
+
+<ul>
+ <li>У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).</li>
+ <li>Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре при показе спортивной игры) или, возможно, не хотят беспокоить других, если они находятся в тихом месте (например, в библиотеке).</li>
+ <li>Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.</li>
+</ul>
+
+<p>Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио / видео? Благодаря HTML5 видео, вы можете, с форматом <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> и элементом {{htmlelement ("track")}}.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: "Транскрибировать" значит записывать устную речь в форме письменной.Получившийся в результате текст есть 'расшифровка'.</p>
+</div>
+
+<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле / позиционировании. Эти текстовые строки называются <strong>репликами</strong>, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:</p>
+
+<dl>
+ <dt>субтитры</dt>
+ <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесенных в аудио.</dd>
+ <dt>титры</dt>
+ <dd>Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.</dd>
+ <dt>рассчитанные описания</dt>
+ <dd>Текст для преобразования в аудио, чтобы обслуживать людей с нарушениями зрения.</dd>
+</dl>
+
+<p>Типичный файл WebVTT будет выглядеть примерно так:</p>
+
+<pre class="eval line-numbers  language-html notranslate"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+Это первый субтитр.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+Это второй.
+
+  ...</code>
+</pre>
+
+<p>Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:</p>
+
+<ol>
+ <li>Сохраните его как <code>.vtt</code>- файл, в разумном месте.</li>
+ <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code>&lt;track&gt;</code> должен быть помещен в <code>&lt;audio&gt;</code> или <code>&lt;video&gt;</code>, но после элементов <code>&lt;source&gt;</code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li>
+</ol>
+
+<p>Вот пример:</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;
+</pre>
+
+<p dir="ltr" id="tw-target-text">Это приведет к просмотру видео с субтитрами, таким как:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Подробнее читайте в разделе <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">добавление титров и субтитров к видео HTML5</a>. Вы можете <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">найти пример</a>, который соответствует этой статье в Github, написанной Ян Девлином (см. также <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">исходный код</a>). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.</p>
+</div>
+
+<h3 id="Активное_обучение_Внедрение_собственного_аудио_и_видео">Активное обучение: Внедрение собственного аудио и видео</h3>
+
+<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в эти дни позволяют легко записывать аудио и видео, и если вы можете перенести их на на свой компьютер, вы можете его использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p>
+
+<p>Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">образцами аудио и видео файлов</a> для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.</p>
+
+<p>Мы хотим, чтобы вы сделали следующие действия:</p>
+
+<ol>
+ <li>Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.</li>
+ <li>Создайте новый HTML файл в том же каталоге, и назвать его <code>index.html</code>.</li>
+ <li>Добавьте элементы <code>&lt;audio&gt;</code> и <code>&lt;video&gt; </code>на страницу; чтобы они отображали элементы управления браузером по умолчанию.</li>
+ <li>Введите оба варианта элемента <code>&lt;source&gt;</code>, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать <code>type</code> атрибуты.</li>
+ <li>Дайте элементу <code>&lt;video&gt;</code> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.</li>
+</ol>
+
+<p>Для дополнительного бонуса вы можете попробовать исследовать текстовые треки и выяснить, как добавить некоторые титры к вашему видео.</p>
+
+<h2 id="Краткое_изложение">Краткое изложение</h2>
+
+<p>Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как {{htmlelement ("iframe")}} и {{htmlelement ("object")}}.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: Множество деталей встраивания аудио и видео в страницу используя HTML и Javascript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: Множество способов управления аудио и видео с помощью Javascript(вроде добавления фильтров).</li>
+ <li>Автоматические опции по переводу(<a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html
new file mode 100644
index 0000000000..10ab133f74
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html
@@ -0,0 +1,351 @@
+---
+title: Добавление векторной графики в веб-документ
+slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web
+translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div class="summary">
+<p>Векторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В данной статье мы покажем, как встраивать векторную графику на Вашу страницу.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Навыки:</th>
+   <td>Знание <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">основ HTML</a> и умение <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">добавлять изображение в веб-документ</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Изучить как встроить SVG (векторное) изображение на вебстраницу.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.</p>
+</div>
+
+<h2 id="Что_такое_векторная_графика">Что такое векторная графика?</h2>
+
+<p>В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:</p>
+
+<ul>
+ <li>Растровое изображение задается сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li>
+ <li>Векторное изображение  определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер  может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.</li>
+</ul>
+
+<p>Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.</p>
+
+<p>Различия становятся заметны, когда Вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним. </p>
+
+<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p>
+
+<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> !</p>
+</div>
+
+<p>Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.</p>
+
+<h2 id="Что_такое_SVG">Что такое SVG?</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (примение маски к изображению.)</p>
+
+<p>В качестве простого примера, следующий код создает круг и прямоугольник:</p>
+
+<pre class="brush: html">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect width="100%" height="100%" fill="black" /&gt;
+  &lt;circle cx="150" cy="100" r="90" fill="blue" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>В результате получается следующее:</p>
+
+<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как <a href="https://inkscape.org/en/">Inkscape</a> или <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)</p>
+
+<p>Дополнительные преимущества SVG:</p>
+
+<ul>
+ <li>Текст в векторном изображении остается машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li>
+ <li>SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.</li>
+</ul>
+
+<p>Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:</p>
+
+<ul>
+ <li>SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.</li>
+ <li>SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.</li>
+ <li>не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.</li>
+</ul>
+
+<p>В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">статью, описывающую как подготовить SVG изображение для веб-документа.</a></p>
+</div>
+
+<h2 id="Добавление_SVG_на_страницы">Добавление SVG на страницы</h2>
+
+<p>В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.</p>
+
+<h3 id="Быстрый_путь_htmlelementimg">Быстрый путь: {{htmlelement("img")}}</h3>
+
+<p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p>
+
+<pre class="brush: html">&lt;img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87px"
+    width="100px" /&gt;</pre>
+
+<h4 id="Плюсы">Плюсы</h4>
+
+<ul>
+ <li>Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте <code>alt</code></li>
+ <li>Вы можете легко превратить изображение в гиперссылку, поместив <code>&lt;image&gt;</code> в элемент {{htmlelement("a")}}.</li>
+</ul>
+
+<h4 id="Минусы">Минусы</h4>
+
+<ul>
+ <li>Вы не можете изменять изображение с помощью JavaScript.</li>
+ <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своем SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li>
+ <li>Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например <code>:focus</code>).</li>
+</ul>
+
+<h3 id="Устранение_неполадок_и_кросс-браузерная_поддержка">Устранение неполадок и кросс-браузерная поддержка</h3>
+
+<p>Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в <code>src</code> атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае <span class="tlid-translation translation" lang="ru"><span title="">SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:</span></span></p>
+
+<pre class="brush: html">&lt;img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"&gt;</pre>
+
+<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p>
+
+<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code>
+background<code>-image: url("image.svg");
+background-size: contain;</code></pre>
+
+<p>Подобно методу <code>&lt;img&gt;</code>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p>
+
+<p>Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">данная сатья укажет вам верное направление</a>.</p>
+
+<h3 id="Как_включить_SVG_в_ваш_HTML_код">Как включить SVG в ваш HTML код</h3>
+
+<p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;&lt;/svg&gt;</a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p>
+
+<pre class="brush: html">&lt;svg width="300" height="200"&gt;
+    &lt;rect width="100%" height="100%" fill="green" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h4 id="Плюсы_2">Плюсы</h4>
+
+<ul>
+ <li>Вставка вашего SVG путем <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li>
+ <li>Вы можете присваивать <code>class</code>-ы и <code>id</code> элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо <span class="tlid-translation translation" lang="ru"><span title="">внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">атрибут представления SVG </a>как свойство CSS.</li>
+ <li><strong>SVG inline </strong>единственный метод, который позволяет вам использовать CSS-взаимодействия (как <code>:focus</code>) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).</li>
+ <li>Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.</li>
+</ul>
+
+<h4 id="Минусы_2">Минусы</h4>
+
+<ul>
+ <li>Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоемким.</li>
+ <li>Дополнительный SVG код увеличивает размер вашего HTML файла.</li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения</span></span>.</li>
+ <li>Вы можете добавить альтернативный вариант в элементе {{svgelement("foreignObject")}}, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="Как_встраивать_SVG_при_помощи_htmlelementiframe">Как встраивать SVG при помощи {{htmlelement("iframe")}}</h3>
+
+<p>Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <code>&lt;iframe&gt;</code> выполняется как мы изучали ранее в главе <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; к &lt;iframe&gt; — другие технологии внедрения</a>.</p>
+
+<p>Вот краткий обзор:</p>
+
+<pre class="brush: html">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
+    &lt;img src="triangle.png" alt="Triangle with three unequal sides" /&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Это - определенно не самый лучший метод для выбора:</p>
+
+<h4 id="Минусы_3">Минусы</h4>
+
+<ul>
+ <li>Как вы можете видеть, у <code>iframe</code>-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают <code>iframe</code>-ы.</li>
+ <li>Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый {{glossary('origin')}}, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.</li>
+</ul>
+
+<h2 id="Активное_изучение_поиграйте_с_SVG">Активное изучение: поиграйте с SVG</h2>
+
+<p>В этом разделе ативного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в областе <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p>
+
+<p>Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку <em>Reset</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 200px;"&gt;
+  &lt;svg width="100%" height="100%"&gt;
+    &lt;rect width="100%" height="100%" fill="red" /&gt;
+    &lt;circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /&gt;
+    &lt;polygon points="120,0 240,225 0,225" fill="green"/&gt;
+    &lt;text x="50" y="100" font-family="Verdana" font-size="55"
+          fill="white" stroke="black" stroke-width="2"&gt;
+            Hello!
+    &lt;/text&gt;
+  &lt;/svg&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution" disabled&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руколводством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы еще не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p>
+
+<p>В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li>
+ <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li>
+ <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li>
+ <li><a href="http://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li>
+ <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/ru/learn/html/multimedia_and_embedding/заставка_mozilla/index.html b/files/ru/learn/html/multimedia_and_embedding/заставка_mozilla/index.html
new file mode 100644
index 0000000000..4171780730
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/заставка_mozilla/index.html
@@ -0,0 +1,106 @@
+---
+title: Заставка Mozilla
+slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предпосылки:</th>
+   <td>Прежде чем приступить к этому заданию, вы должны проработать остальную часть <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">модуля мультимедиа и встраивания.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Отправная_точка">Отправная точка</h2>
+
+<p>Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a>). Сохраните содержимое <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> в файле с именем <code>index.html</code> на вашем диске в новой папке. Затем сохраните <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> в той же папке (правый клик на изображении для выбора опции сохранения).</p>
+
+<p>Сохраните изображения из папки <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p>
+</div>
+
+<h2 id="Описание_проекта">Описание проекта</h2>
+
+<p>В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p>
+
+<h3 id="Подготовка_изображений">Подготовка изображений</h3>
+
+<p>Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:</p>
+
+<ul>
+ <li><code>firefox_logo-only_RGB.png</code></li>
+ <li><code>firefox-addons.jpg</code></li>
+ <li><code>mozilla-dinosaur-head.png</code></li>
+</ul>
+
+<p>Назовите их как-нибудь разумно, например <code>firefoxlogo400.png</code>и <code>firefoxlogo120.png</code>.</p>
+
+<p>Вместе с <code>mdn.svg</code>, эти изображения будут иконками для ссылок на другие ресурсы внутри секции <code>further-info</code>. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и <code>index.html</code>.</p>
+
+<p>Затем создайте фоновую версию  <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Следует  обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. <a href="https://tinypng.com/">tinypng.com</a> - отличный сервис для этого.</p>
+</div>
+
+<h3 id="Добавление_логотипа_в_шапку">Добавление логотипа в шапку</h3>
+
+<p>Добавьте внутрь элемента {{htmlelement("header")}} элемент {{htmlelement("img")}}, который вставит уменьшенную версию логотипа Firefox в шапку.</p>
+
+<h3 id="Добавление_видео_к_основному_содержанию_статьи">Добавление видео к основному содержанию статьи</h3>
+
+<p>Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.</p>
+
+<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацей">Добавление отзывчивых изображений к ссылкам с доп. информацей</h3>
+
+<p>Внутри {{htmlelement("div")}} с классом <code>further-info</code> вы найдёте четыре элемента {{htmlelement("a")}}  — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.</p>
+
+<p>В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.</p>
+
+<p>Убедитесь, что вы использовали изображения, соответствующие ссылкам.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Для проверки правильности работы <code>srcset</code>/<code>sizes</code> , вам нужно загрузить ваш сайт на сервер (используйте <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> - простое и бесплатное решение). Затем  вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p>
+</div>
+
+<h3 id="Искусственно_измененная_красная_панда">Искусственно измененная красная панда</h3>
+
+<p>Внутри элемента {{htmlelement("div")}} с классом <code>red-panda</code>, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.</p>
+
+<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
+
+<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assessment/24679">в ветке форума этого упражнения</a>, либо в IRC канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться! </p>
+
+<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; до &lt;iframe&gt; — другие технологии встраивания</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики в Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Отзывчивые изображения</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сайт-визитка Mozilla</a></li>
+</ul>
diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html
new file mode 100644
index 0000000000..930362d696
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html
@@ -0,0 +1,356 @@
+---
+title: Изображения в HTML
+slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного {{htmlelement("img")}}  элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя  {{htmlelement("figure")}}, и разберём, как это относится к фоновым изображениям {{glossary("CSS")}}. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимы:</th>
+   <td>Базовые знания компьютера, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>,  (как описано в статье <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Научиться вставлять простые изображения в  HTML, приписывать их комментариями, и какое отношение HTML изображения имеют к фоновым изображениям CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Как_разместить_картинку_на_странице">Как разместить картинку на странице?</h2>
+
+<p>Для того, что бы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега)  который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>со-о-рс</em>). Атрибут <code>src</code> содержит путь к изображению которое вы хотите встроить в страницу, который может быть относительным или абсолютным URL, таким же образом, как для элемента {{htmlelement("a")}} значение атрибута <code>href</code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Перед тем как продолжить, вы можете прочитать <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">Быстрый пример про URL - адресс и путь</a> чтобы обновить свою память про относительный и абсолютный URL - адресс.</p>
+</div>
+
+<p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p>
+
+<pre class="brush: html notranslate">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри директории, в которой HTML страница (что рекомендует Google для индексации SEO целей), тогда вы можете встроить ее как:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<p>И так далее.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому, давайте вашим изображениям смысловые имена; <code>dinosaur.jpg</code> лучше, чем <code>img835.png</code>.</p>
+</div>
+
+<p>Вы можете встроить изображение используя абсолютный URL, например:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, используя IP-адрес от DNS-сервера все снова, и т.д.  Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p>
+
+<div class="warning">
+<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:<br>
+ <br>
+ 1) вы не будете владеть изображением<br>
+ 2) у вас не будет письменного разрешения владельца изображения, или<br>
+ 3) пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.<br>
+ <br>
+ Нарушение авторских прав является не законным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража чей-то пропускной способности не законно. Кроме того, это замедляет вашу страницу, оставляя вас без контроля над изображением; было ли оно удалено или случайно перемещено.</p>
+</div>
+
+<p>Наш код выше даст нам следующий результат:</p>
+
+<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются заменяемые элементы. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. </p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти готовый пример здесь <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> too.)</p>
+</div>
+
+<h3 id="Альтернативный_текст">Альтернативный текст</h3>
+
+<p>Следующий атрибут, который мы рассмотрим, — <code>alt</code>. Предполагается, что значением атрибута является текстовое описание изображения; данный атрибут используется в ситуациях, когда изображение скрыто или его не удается отобразить. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p>
+
+<p>&lt;img src="images/dinosaur.jpg"<br>
+      alt="The head and torso of a dinosaur skeleton;<br>
+           it has a large head with long sharp teeth"&gt;</p>
+
+<p class="syntaxbox">Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведем несколько примеров:</p>
+
+<ul>
+ <li>Пользователь с нарушением зрения использует <a href="https://en.wikipedia.org/wiki/Screen_reader">устройство чтения с экрана</a>, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте <code>alt</code> для описания изображения может быть полезно для большинства пользователей.</li>
+ <li>В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).</li>
+ <li>Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, которые вместо изображений отображают текст из атрибута <code>alt</code>.</li>
+ <li>Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута <code>alt</code>.</li>
+ <li>Если пользователи отключили отображение изображений на странице для уменьшения объема передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li>
+</ul>
+
+<p>Что именно вы должны писать в атрибут <code>alt</code>? В первую очередь, это зависит от того, <em>зачем</em> изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:</p>
+
+<ul>
+ <li><strong>Декорация. </strong>Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя. На самом деле, декоративные изображения не принадлежат вашему HTML. {{anch("CSS background images")}} должны быть использованы для вставки декораций, но, если это неизбежно, то лучшее решение - использовать <code>alt=""</code>.</li>
+ <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li>
+ <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны предоставить <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>. В таком случае, вы сможете использовать элемент <code>&lt;a&gt;</code>  или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li>
+ <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобиться тень, то лучше используйте для этого<a href="/en-US/docs/Web/CSS/text-shadow"> CSS</a> вместо добавления текста в изображение. Однако, если  <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li>
+</ul>
+
+<p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст если изображения не видны.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text Alternatives</a>.</p>
+</div>
+
+<h3 id="Ширина_и_высота">Ширина и высота</h3>
+
+<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например на Mac можно использовать  <kbd>Cmd</kbd> + <kbd>I</kbd>  что  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>Это хорошая практика, в результате страница загрузится быстрей и более гладко.</p>
+
+<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<h3 id="Заголовок_изображения">Заголовок изображения</h3>
+
+<p>Как и для <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">ссылок</a>, вы можете также добавить атрибут <code>title</code> для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<p>Это даст нам подсказку, также как и в ссылках:</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>Нет необходимости писать заголовки изображений. Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, они полезны в некоторых обстоятельствах; например, в галереях изображений когда у вас нет места для их заголовков.</p>
+
+<h3 id="Активное_обучение_встраивание_изображения">Активное обучение: встраивание изображения</h3>
+
+<p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по  встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Ранее мы говорили никогда не используйте горячие ссылки на изображения с других серверов, данный случай только для целей обучения, итак мы позволим вам пренебречь этим один разок.</p>
+
+<p>Мы также хотели бы, чтобы вы:</p>
+
+<ul>
+ <li>Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.</li>
+ <li>Установите правильную <code>ширину</code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">высоту</span></font> (подсказка; это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.</li>
+ <li>Установите <code>заголовок</code> для изображения.</li>
+</ul>
+
+<p>Если вы сделаете ошибку, вы всегда можете сбросить его используя кнопку <em>Reset</em>. Если вы реально не будете понимать что делать, нажмите кнопку <em>Show solution</em>, чтобы увидеть ответ:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;img&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h2 id="Придание_изображению_структуры_и_установка_заголовка">Придание изображению структуры и установка заголовка</h2>
+
+<p>Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:</p>
+
+<pre class="brush: html notranslate">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?</p>
+
+<p>Лучшим решением будет использование HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}} элементов. Они были созданы исключительно для этой цели: предоставление семантического контейнера для иллюстраций, и прозрачного связывания иллюстрации с её заголовком. Наш пример выше, мог быть переписан как то так:</p>
+
+<pre class="notranslate">&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>{{htmlelement("figcaption")}} элемент говорит браузерам, и вспомогательной технологии, что заголовок описывает содержимое {{htmlelement("figure")}} элемента.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем,кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} предусматривает замену функционала отсутствующего изображения. Таким образом, заголовки и <code>alt</code> не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.</p>
+</div>
+
+<p> Тег &lt;figure&gt; не является изображением. Он представляет собой независимый структурный элемент, который: </p>
+
+<ul>
+ <li>Передает смысл компактным, интуитивно понятным способом.</li>
+ <li>Может использоваться в различных местах страницы.</li>
+ <li>Предоставляет ценную информацию, поддерживающую основной текст.</li>
+</ul>
+
+<p>Тег &lt;figure&gt; может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.</p>
+
+<h3 id="Активное_изучение_создание_&lt;figure>">Активное изучение: создание &lt;figure&gt;</h3>
+
+<p>В этом разделе активного изучения, мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения, и преобразовали его в &lt;figure&gt;:</p>
+
+<ul>
+ <li>Оберните его в {{htmlelement("figure")}} элемент.</li>
+ <li>Скопируйте текст из атрибута <code>title</code>, удалите атрибут <code>title</code>, и вбейте текст в элемент {{htmlelement("figcaption")}}.</li>
+</ul>
+
+<p>В случае допущения ошибки, вы всегда можете набрать код повторно нажав кнопку <em>Reset</em>. Если вы застряли, нажмите кнопку <em>Show solution</em> ,чтобы увидеть ответ:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;figure&gt;\n  &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171"&gt;\n  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="CSS_background-images">CSS background-images</h2>
+
+<p>Также альтернативой является использование css изображений (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие <code>background-*</code> свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p>
+
+<pre class="brush: css notranslate">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же париться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы хотите просто добавить что-нибудь красивое на вашу страницу, всё круто. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!</p>
+
+<p>Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> в нашей теме о <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<p>Вот и всё. Мы детально описали изображения и заголовки. В следующей статье мы перейдём на новый уровень, затронув тему встраивания видео и аудио в веб-страницу.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>