dump 2020-12-11

1 files changed, 74 insertions, 0 deletions

diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html
new file mode 100644
index 0000000000..e00777dabe
--- /dev/null
+++ b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html
@@ -0,0 +1,74 @@
+---
+title: 'Проверьте свои знания: Изображения в HTML'
+slug: >-
+  Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML/Проверьте_свои_знания:_Изображения_в_HTML
+translation_of: >-
+  Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images
+---
+<div>{{learnsidebar}}</div>
+
+<p>Цель этого теста навыков - оценить, поняли ли вы нашу статью <a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> для работы с задачами.</p>
+</div>
+
+<h2 id="Изображения_в_HTML_№1">Изображения в HTML №1</h2>
+
+<p>В этой задаче мы хотим, чтобы вы вставили на страницу простое изображение ягоды черники. Вам необходимо:</p>
+
+<ul>
+ <li>Добавьте путь к изображению в соответствующий атрибут, чтобы встроить его на страницу. Изображение называется <code>blueberries.jpg</code> и оно находится в папке с именем <code>images</code> внутри текущей папки.</li>
+ <li>Добавьте альтернативный текст к соответствующему атрибуту, чтобы описать изображение для людей, которые его не видят.</li>
+ <li>Дайте элементу <code>&lt;img&gt;</code> соответствующие значения <code>width</code> и <code>height</code> чтобы он отображался с правильным соотношением сторон и достаточно места на странице для отображения. Размер изображения 615 x 419 пикселей.</li>
+</ul>
+
+<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images1-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p>
+</div>
+
+<h2 id="Изображения_в_HTML_№2">Изображения в HTML №2</h2>
+
+<p>В этой задаче у вас уже есть полнофункциональное изображение, но мы хотели бы, чтобы вы добавили всплывающую подсказку, которая появляется при наведении курсора на изображение. Вы должны ввести некоторую соответствующую информацию во всплывающую подсказку.</p>
+
+<p>Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images2-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p>
+</div>
+
+<h2 id="Изображения_в_HTML_№3">Изображения в HTML №3</h2>
+
+<p>В этой последней задаче вам предоставляется как полнофункциональное изображение, так и текст заголовка. Здесь вам нужно добавить элементы, которые будут связывать изображение с его заголовком.</p>
+
+<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images3-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p>
+</div>
+
+<h2 id="Оценка_или_дополнительная_помощь">Оценка или дополнительная помощь</h2>
+
+<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.</p>
+
+<p>Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:</p>
+
+<ol>
+ <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.</li>
+ <li>Напишите сообщение с просьбой об оценке и / или помощи в <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
+  <ul>
+   <li>Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".</li>
+   <li>Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.</li>
+   <li>Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.</li>
+   <li>Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.</li>
+  </ul>
+ </li>
+</ol>