initial commit

51 files changed, 8775 insertions, 0 deletions

diff --git a/files/ru/web/guide/ajax/index.html b/files/ru/web/guide/ajax/index.html
new file mode 100644
index 0000000000..bc28ad2426
--- /dev/null
+++ b/files/ru/web/guide/ajax/index.html
@@ -0,0 +1,83 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+tags:
+  - AJAX characteristic of the method node.length in IE and Mozilla
+  - поведение метода length объекта XML в IE и Mozilla
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a class="external" href="http://www.akvi.ru/ajax.html" rel="follow" title="ru/AJAX/С_чего_начать?">С чего начать?</a></strong><br>
+Введение в AJAX</div>
+
+<div>
+<p><strong>AJAX</strong> (англ. <em><span>Asynchronous JavaScript and XML</span></em> — асинхронный JavaScript и XML) — это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. АJAX включает: <a href="/ru/HTML" title="ru/HTML">HTML</a> или <a href="/ru/XHTML" title="ru/XHTML">XHTML</a>, <a href="/ru/CSS" title="ru/CSS">CSS</a>, <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, <a href="/ru/DOM" title="ru/DOM">DOM</a>, <a href="/ru/XML" title="ru/XML">XML</a>, <a href="/Ru/XSLT" title="Ru/XSLT">XSLT</a>, и <a href="/ru/XMLHttpRequest" title="ru/XMLHttpRequest">объект XMLHttpRequest</a>. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F"><a href="/Special:Tags?tag=AJAX&amp;language=ru" title="Special:Tags?tag=AJAX&amp;language=ru">Документация</a></h4>
+
+    <dl>
+     <dt><a class="external" href="https://developer.mozilla.org/ru/docs/Web/Guide/AJAX/%D0%A1_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C" rel="follow" title="ru/AJAX/С_чего_начать?">AJAX: С чего начать?</a></dt>
+     <dd><small>Эта статья, описывающая основы AJAX и содержащая два простых примера, позволит быстро начать работу.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Ajax: Новый подход к WEB-приложениям</a></dt>
+     <dd><small>Jesse James Garrett из <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, создавший эту статью в феврале 2005 года, знакомит с AJAX и связанными с ним понятиями.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">Простой путь Ajax</a></dt>
+     <dd><small>"Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все еще используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt>
+     <dd><small>Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ошибки использования Ajax</a></dt>
+     <dd><small>Alex Bosworth написал эту статью, где описал некоторые ошибки которые могут сделать разработчики приложений AJAX.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX&amp;language=ru" title="Special:Tags?tag=AJAX&amp;language=ru">Смотреть все...</a></span></p>
+   </td>
+   <td>
+    <h4 id=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE" name=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE">Сообщество</h4>
+
+    <ul>
+     <li>Смотрите форумы Mozilla...</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p>
+
+    <h4 id=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B" name=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B">Инструменты</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
+     <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">Отладчик AJAX</a></li>
+     <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
+     <li><a class="external" href="http://www.hotajax.org">AJAX: many cool examples</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX:Tools&amp;language=ru" title="Special:Tags?tag=AJAX:Tools&amp;language=ru">Смотреть все...</a></span></p>
+
+    <h4 id=".D0.A1.D0.B2.D1.8F.D0.B7.D0.B0.D0.BD.D0.BD.D1.8B.D0.B5_.D1.82.D0.B5.D0.BC.D1.8B" name=".D0.A1.D0.B2.D1.8F.D0.B7.D0.B0.D0.BD.D0.BD.D1.8B.D0.B5_.D1.82.D0.B5.D0.BC.D1.8B">Связанные темы</h4>
+
+    <dl>
+     <dd><a href="/ru/HTML" title="ru/HTML">HTML</a>, <a href="/ru/XHTML" title="ru/XHTML">XHTML</a>, <a href="/ru/CSS" title="ru/CSS">CSS</a>, <a href="/ru/DOM" title="ru/DOM">DOM</a>, <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, <a href="/ru/XML" title="ru/XML">XML</a>, <a href="/ru/XMLHttpRequest" title="ru/XMLHttpRequest">XMLHttpRequest</a>, <a href="/Ru/XSLT" title="Ru/XSLT">XSLT</a>, <a href="/ru/DHTML" title="ru/DHTML">DHTML</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categories</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p>{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX", "zh-cn": "cn/AJAX" } ) }}</p>
diff --git a/files/ru/web/guide/ajax/с_чего_начать/index.html b/files/ru/web/guide/ajax/с_чего_начать/index.html
new file mode 100644
index 0000000000..e06b408228
--- /dev/null
+++ b/files/ru/web/guide/ajax/с_чего_начать/index.html
@@ -0,0 +1,258 @@
+---
+title: С чего начать
+slug: Web/Guide/AJAX/С_чего_начать
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p> </p>
+
+<p>В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.</p>
+
+<h3 id=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_AJAX.3F" name=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_AJAX.3F">Что такое AJAX?</h3>
+
+<p>Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта <code><a href="/ru/XMLHttpRequest" title="ru/XMLHttpRequest">XMLHttpRequest</a></code>, необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax — это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.</p>
+
+<p>Две особенности, которые мы рассмотрим:</p>
+
+<ul>
+ <li>Отправление запросов серверу без перезагрузки страницы</li>
+ <li>Работа с XML документами</li>
+</ul>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_1.C2.A0.E2.80.94_.D0.9A.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81" name=".D0.A8.D0.B0.D0.B3_1.C2.A0.E2.80.94_.D0.9A.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81">Шаг 1 — Как послать HTTP запрос</h3>
+
+<p>Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый <code>XMLHTTP</code>. Позже в Mozilla, Safari и другие браузеры был введен класс <code>XMLHttpRequest</code>, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.</p>
+
+<p>В результате, чтобы создать кросс-браузерный объект требуемого класса, вы можете сделать следующее:</p>
+
+<pre>var httpRequest;
+if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<p>(В целях наглядности, код выше является немного упрощенным. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)</p>
+
+<p>Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML <code>mime-type</code>. Чтобы решить эту проблему, вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от <code>text/xml</code>.</p>
+
+<pre>httpRequest = new XMLHttpRequest();
+httpRequest.overrideMimeType('text/xml');
+</pre>
+
+<p>Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству <code>onreadystatechange</code> имени JavaScript функции, которую вы собираетесь использовать:</p>
+
+<p><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></p>
+
+<p>Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:</p>
+
+<pre>httpRequest.onreadystatechange = function(){
+    // какой-нибудь код
+};
+</pre>
+
+<p>Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса <code>open()</code> и <code>send()</code>:</p>
+
+<pre>httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send(null);
+</pre>
+
+<ul>
+ <li>Первый параметр вызова функции <code>open()</code> — метод HTTP запроса (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">спецификации W3C</a></li>
+ <li>Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещен' при вызове функции <code>open()</code>. Типичной ошибкой при доступе к сайту через <code>site.ru</code> является отправка запроса на <code>www.site.ru</code>.</li>
+ <li>Третий параметр указывает, является ли запрос асинхронным. Если он <code>TRUE</code>, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.</li>
+</ul>
+
+<p>Параметром метода <code>send()</code> могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:</p>
+
+<p><code>name=value&amp;anothername=othervalue&amp;so=on</code></p>
+
+<p>Заметьте, что если вы хотите отправить данные методом <code>POST</code>, вы должны изменить MIME-тип запроса с помощью следующей строки:</p>
+
+<pre>httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<p>Иначе сервер проигнорирует данные отправленные методом POST.</p>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_2.C2.A0.E2.80.94_.D0.9E.D0.B1.D1.80.D0.B0.D0.B1.D0.B0.D1.82.D1.8B.D0.B2.D0.B0.D0.B5.D0.BC_.D0.BE.D1.82.D0.B2.D0.B5.D1.82_.D1.81.D0.B5.D1.80.D0.B2.D0.B5.D1.80.D0.B0" name=".D0.A8.D0.B0.D0.B3_2.C2.A0.E2.80.94_.D0.9E.D0.B1.D1.80.D0.B0.D0.B1.D0.B0.D1.82.D1.8B.D0.B2.D0.B0.D0.B5.D0.BC_.D0.BE.D1.82.D0.B2.D0.B5.D1.82_.D1.81.D0.B5.D1.80.D0.B2.D0.B5.D1.80.D0.B0">Шаг 2 — Обрабатываем ответ сервера</h3>
+
+<p>Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.</p>
+
+<p><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></p>
+
+<p>Давайте посмотрим, что эта функция должна делать. Во-первых, функция должна проверять статус запроса. Если значение переменной статуса 4, то это означает, что ответ от сервера получен и его можно обрабатывать.</p>
+
+<pre>if (httpRequest.readyState == 4) {
+    // все в порядке, ответ получен
+} else {
+    // все еще не готово
+}
+</pre>
+
+<p>Полный список значений кодов <code>readyState</code> такой:</p>
+
+<ul>
+ <li>0 (uninitialized)</li>
+ <li>1 (loading)</li>
+ <li>2 (loaded)</li>
+ <li>3 (interactive)</li>
+ <li>4 (complete)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Источник</a>)</p>
+
+<p>Следующее, что нужно проверить — это статус HTTP-ответа. Все возможные коды можно посмотреть на <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">сайте W3C</a>. Для наших целей нам интересен только код ответа <code>200 OK</code>.</p>
+
+<pre>if (httpRequest.status == 200) {
+    // великолепно!
+} else {
+    // с запросом возникли проблемы,
+    // например, ответ может быть 404 (Не найдено)
+    // или 500 (Внутренняя ошибка сервера)
+}
+</pre>
+
+<p>Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, все что угодно. Есть два способа получить доступ к данным:</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – возвращает ответ сервера в виде строки текста.</li>
+ <li><code>httpRequest.responseXML</code> – возвращает ответ сервера в виде объекта <code>XMLDocument</code>, который вы можете обходить используя функции JavaScript DOM</li>
+</ul>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_3.C2.A0.E2.80.94_.D0.9F.D1.80.D0.BE.D1.81.D1.82.D0.BE.D0.B9_.D0.BF.D1.80.D0.B8.D0.BC.D0.B5.D1.80" name=".D0.A8.D0.B0.D0.B3_3.C2.A0.E2.80.94_.D0.9F.D1.80.D0.BE.D1.81.D1.82.D0.BE.D0.B9_.D0.BF.D1.80.D0.B8.D0.BC.D0.B5.D1.80">Шаг 3 — Простой пример</h3>
+
+<p>Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ <code>test.html</code>, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.</p>
+
+<pre>&lt;script type="text/javascript" language="javascript"&gt;
+    function makeRequest(url) {
+        var httpRequest = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+            httpRequest = new XMLHttpRequest();
+            if (httpRequest.overrideMimeType) {
+                httpRequest.overrideMimeType('text/xml');
+                // Читайте ниже об этой строке
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!httpRequest) {
+            alert('Не вышло :( Невозможно создать экземпляр класса XMLHTTP ');
+            return false;
+        }
+        httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
+        httpRequest.open('GET', url, true);
+        httpRequest.send(null);
+
+    }
+
+    function alertContents(httpRequest) {
+
+        if (httpRequest.readyState == 4) {
+            if (httpRequest.status == 200) {
+                alert(httpRequest.responseText);
+            } else {
+                alert('С запросом возникла проблема.');
+            }
+        }
+
+    }
+&lt;/script&gt;
+&lt;span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')"&gt;
+        Сделать запрос
+&lt;/span&gt;
+</pre>
+
+<p><br>
+ В этом примере:</p>
+
+<ul>
+ <li>Пользователь нажимает на ссылку "Сделать запрос" в броузере;</li>
+ <li>Это вызывает функцию <code>makeRequest()</code> с параметром <code>test.html</code> — именем HTML файла;</li>
+ <li>Посылается запрос, после чего (<code>onreadystatechange</code>) выполнение передается <code>alertContents()</code>;</li>
+ <li><code>alertContents()</code> проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла <code>test.html</code> выводится в диалоговом окне.</li>
+</ul>
+
+<p>Вы можете попробовать пример в действии <a class="external" href="http://www.akvi.ru/mozdev/httprequest_test.html" rel="follow">здесь</a>, а сам тестовый файл можно посмотреть <a class="external" href="http://www.akvi.ru/mozdev/test.html" rel="follow">здесь</a>.</p>
+
+<p><strong>Замечание</strong>: Строка <code>httpRequest.overrideMimeType('text/xml');</code> вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a>, если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.</p>
+
+<p><strong>Замечание 2</strong>: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок <code>Content-Type: application/xml</code>, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок <code>Cache-Control: no-cache</code> броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».</p>
+
+<p><strong>Замечание 3</strong>: Если переменная <code>httpRequest</code> используется глобально, то конкурирующие функции, вызывающие <code>makeRequest()</code> могут конкурировать друг с другом, вызывая состязания. Объявление переменной <code>httpRequest</code> локально в функции и передача ее в <code>alertContent()</code> предотвращает состязания.</p>
+
+<p><strong>Замечание 4</strong>: При привязывании функции обратного вызова к <code>onreadystatechange</code> нельзя указывать аргументов. По этой причине не работает следующий код:</p>
+
+<pre>httpRequest.onreadystatechange = alertContents(httpRequest); // (не работает)
+</pre>
+
+<p>Таким образом, для успешной регистрации функции, вы должны передать ей аргументы косвенно через анонимную функцию или используя <code>httpRequest</code> как глобальную переменную. Вот пример:</p>
+
+<pre>httpRequest.onreadystatechange = function() { alertContents(httpRequest); };  //1 (одновременный запрос)
+httpRequest.onreadystatechange = alertContents;  //2 (глобальная переменная)
+</pre>
+
+<p>Первый способ позволяет делать несколько запросов одновременно, а второй используется, когда переменная <code>httpRequest</code> является глобальной.</p>
+
+<p><strong>Замечание 5</strong>: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной .status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=238559" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=238559</a>).</p>
+
+<pre>function alertContents(httpRequest) {
+
+        try {
+            if (httpRequest.readyState == 4) {
+                if (httpRequest.status == 200) {
+                    alert(httpRequest.responseText);
+                } else {
+                    alert('С запросом возникла проблема.');
+                }
+            }
+        }
+        catch( e ) {
+            alert('Произошло исключение: ' + e.description);
+        }
+
+    }
+</pre>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_4.C2.A0.E2.80.94_.D0.A0.D0.B0.D0.B1.D0.BE.D1.82.D0.B0_.D1.81_XML_.D0.BE.D1.82.D0.B2.D0.B5.D1.82.D0.BE.D0.BC" name=".D0.A8.D0.B0.D0.B3_4.C2.A0.E2.80.94_.D0.A0.D0.B0.D0.B1.D0.BE.D1.82.D0.B0_.D1.81_XML_.D0.BE.D1.82.D0.B2.D0.B5.D1.82.D0.BE.D0.BC">Шаг 4 — Работа с XML ответом</h3>
+
+<p>В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали <code>responseText</code> запрашиваемого объекта, который содержал данные файла <code>test.html</code>. Теперь давайте попробуем использовать свойство <code>responseXML</code>.</p>
+
+<p>Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (<code>test.xml</code>) содержит следующее:</p>
+
+<pre>&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>В скрипте нам всего лишь необходимо заменить строку запроса на:</p>
+
+<pre>...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>Далее в <code>alertContents()</code> нам нужно заменить строку <code>alert(httpRequest.responseText);</code> на:</p>
+
+<pre>var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Этот код берет объект <code>XMLDocument</code>, возвращаемый <code>responseXML</code> и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть <code>test.xml</code> можно <a class="external" href="http://www.akvi.ru/mozdev/test.xml" rel="follow">здесь</a>, а обновленный скрипт <a class="external" href="http://www.akvi.ru/mozdev/httprequest_test_xml.html" rel="follow">здесь</a>.</p>
+
+<p>Чтобы узнать больше о методах DOM, посмотрите <a class="external" href="http://www.mozilla.org/docs/dom/">реализация DOM в Mozilla</a>.</p>
+
+<p>{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "zh-cn": "cn/AJAX/\u5f00\u59cb" } ) }}</p>
diff --git a/files/ru/web/guide/ajax/с_чего_начать_question_/index.html b/files/ru/web/guide/ajax/с_чего_начать_question_/index.html
new file mode 100644
index 0000000000..f66d6b1dbf
--- /dev/null
+++ b/files/ru/web/guide/ajax/с_чего_начать_question_/index.html
@@ -0,0 +1,6 @@
+---
+title: С чего начать?
+slug: Web/Guide/AJAX/С_чего_начать?
+---
+<p>IKFIA
+</p>
diff --git a/files/ru/web/guide/api/dom/index.html b/files/ru/web/guide/api/dom/index.html
new file mode 100644
index 0000000000..24201d7df7
--- /dev/null
+++ b/files/ru/web/guide/api/dom/index.html
@@ -0,0 +1,37 @@
+---
+title: DOM developer guide
+slug: Web/Guide/API/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+
+<p>Объектная модель документа - это API для документов HTML и XML. Она обеспечивает структурное представление документа, позволяя разработчику изменять его содержание и визуальное представление. По сути, она соединяет веб-страницы со скриптами или языками программирования.</p>
+
+<p>Все свойства, методы и события, доступные веб-разработчику для манипулирования и создания веб-страниц, организованы в объекты (например, объект документа, представляющий сам документ, объект таблицы, представляющий элемент таблицы HTML и т. Д.) , Эти объекты доступны через скриптовые языки в самых последних веб-браузерах.</p>
+
+<p>DOM чаще всего используется в сочетании с JavaScript. Тем не менее, DOM был разработан, чтобы быть независимым от какого-либо конкретного языка программирования, делая структурное представление документа доступным из единого, согласованного API. Хотя мы,на этом сайте, сосредоточены на JavaScript реализации DOM могут быть построены для любого языка.</p>
+
+<p>Консорциум World Wide Web устанавливает стандарт для DOM, называемый W3C DOM. Теперь, когда наиболее важные браузеры правильно его реализуют, следует включить мощные кросс-браузерные приложения.</p>
+
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Почему так важен DOM?</h2>
+
+<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. также <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p>
+
+<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, используя DOM для <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">управления собственным пользовательским  интерфейсом UI</a>.</p>
+
+<h2 id="More_about_the_DOM">More about the DOM</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+
+
+<p>«Динамический HTML» (DHTML) - это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. Также FAQ по W3C).</p>
+
+<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием XUL, используя DOM для управления собственным пользовательским интерфейсом.</p>
diff --git a/files/ru/web/guide/api/dom/storage/index.html b/files/ru/web/guide/api/dom/storage/index.html
new file mode 100644
index 0000000000..0fc6aea359
--- /dev/null
+++ b/files/ru/web/guide/api/dom/storage/index.html
@@ -0,0 +1,367 @@
+---
+title: DOM Storage guide
+slug: Web/Guide/API/DOM/Storage
+translation_of: Web/API/Web_Storage_API
+---
+<h2 id="sect1"> </h2>
+
+<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>,  и выделенных теперь в отдельную специкацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объема, оно более защищено и легче в использовании. Впервые оно было представлено  в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p>
+
+<div class="note"><strong>Заметка:</strong> DOM хранилище - это не то же самое, что <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) или <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (утилита <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> - хранилище для использования в расширениях).</div>
+
+<div class="note">
+<p><strong>Заметка:</strong> Эта статья скоро будет сильно переработана. В<span style="line-height: 1.5;">место того, чтобы хранить всю информацию на одной странице, она будет</span><span style="line-height: 1.5;"> разбита на несколько статей, каждая из которых будет описывать разные </span><span style="line-height: 1.5;">API хранилища. Отдельная статья, помогающая разобраться в разных API, будет также добавлена.</span></p>
+</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Механизм DOM хранилища - средство, благодаря которому можно безопасно хранить и позже извлекать пары "ключ / значение". Целью этого является обеспечение комплексного средства, с помощью которого можно разрабатывать интерактивные приложения(включая приложения с продвинутыми возможностями, такими как возможность работать "автономно"("offline") в течение длительных периодов времени).</p>
+
+<p>Браузеры на основе Mozilla, Internet Explorer 8 +, Safari 4 + и Chrome обеспечивают рабочую реализацию спецификации DOM хранилища. (В случае, если нужна кросс-браузерная поддержка функциональности, включая более старые версии IE, будет полезно отметить, что IE также имеет подобную легаси функциональность под названием "<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">USERDATA поведение</a>", которая дополненяет DOM хранилище IE в IE8.)</p>
+
+<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объемов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p>
+
+<p>Одним из первых известных приложений,  использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своем приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение  был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p>
+
+<p>Хотя идея и реализация halfnote были сравнительно простыми, создание halfnote показывает возможность для нового поколения веб-приложений, которые можно использовать как в онлайн-, так и оффлайн- режиме.</p>
+
+<h2 id="Связь">Связь</h2>
+
+<p>Ниже приведены глобальные объекты, которые существуют как свойства каждого объекта <span style="line-height: 1.5;"> </span><code style="line-height: 1.5;"><a href="/en-US/docs/DOM/window" style="line-height: 1.5;" title="DOM/window">window</a></code><span style="line-height: 1.5;">. Это означает, что они могут быть доступны как </span><code style="font-style: normal;">sessionStorage</code> <span style="line-height: 1.5;">или </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">window.sessionStorage</span><span style="line-height: 1.5;">. (Это важно, потому что вы можете использовать фреймы(IFrames) для хранения или доступа, дополнительные данные кроме того, что сразу же включено на странице.)</span></p>
+
+<h3 id="Storage"><code>Storage</code></h3>
+
+<p>Это конструктор<span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">) </span><span style="line-height: 1.5;">для всех экземпляров </span><span style="line-height: 1.5;">Storage </span><span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">globalStorage[location.hostname]</code>).</p>
+
+<p><span style="line-height: 1.5;">С</span><span style="line-height: 1.5;">охранение </span><code style="font-style: normal; line-height: 1.5;">Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code><span style="line-height: 1.5;"> будет доступно через </span><code style="font-style: normal; line-height: 1.5;">localStorage.removeKey</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">sessionStorage.removeKey</code><span style="line-height: 1.5;">.</span></p>
+
+<p>Единицы <code>globalStorage</code> являются экземплярами <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">StorageObsolete,</span> а <span style="line-height: 1.5;">не </span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">.</span></p>
+
+<p><code>Storage</code> определен в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p>
+
+<pre class="eval">interface <dfn>Storage</dfn> {
+  readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>;
+  [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index);
+  [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key);
+  [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data);
+  [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key);
+  void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>();
+};
+</pre>
+
+<div class="note"><strong>Заметка: </strong>Несмотря на то, что значения доступны для чтения и записи через стандартные способы Javascript, рекомендуется использование <span style="line-height: 1.5;">getItem и setItem.</span></div>
+
+<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведет к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code>  <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространенным способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div>
+
+<h3 id="sessionStorage"><code>sessionStorage</code></h3>
+
+<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведет к созданию новой сессии для этой страницы.</span></p>
+
+<pre class="brush:js">// Сохранить данные в текущем хранилизе сессий
+sessionStorage.setItem("username", "John");
+
+// Получить значения сохраненного значения
+alert( "username = " + sessionStorage.getItem("username"));
+</pre>
+
+<p>Объект <code>sessionStorage</code> наиболее полезен для хранения временных данных, которые должны быть восстановлены, если страница браузер была случайно перегружена.</p>
+
+<p><strong>Примеры:</strong></p>
+
+<p>Автоматическое сохранение содержимого тестового поля, и если страница была случайно перегружена, то данные не будут потеряны.</p>
+
+<pre class="brush:js"> // Получить значение текстового поля, которое мы собираемся отслеживать
+ var field = document.getElementById("field");
+
+ // Проверяем, что значение поля autosave существует
+ // (это будет происходить при случайной перезагрузке страницы)
+ if (sessionStorage.getItem("autosave")) {
+    // Восстановить значение тестового поля
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Прослушивать изменения значения текстового поля
+ field.addEventListener("change", function() {
+    // И сохранить результаты в объект хранилища сессий
+    sessionStorage.setItem("autosave", field.value);
+ });
+</pre>
+
+<p><strong>Больше информации:</strong></p>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li>
+</ul>
+
+<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3>
+
+<p><code>localStorage</code> - это то же самое, что и<code> {{ Anch("sessionStorage") }},</code> поддерживает правила единого происхождения(same-origin rules), но хранение данных постоянно. <code>localStorage</code> был представлен в Firefox 3.5.</p>
+
+<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создается для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div>
+
+<h4 id="Совместимость">Совместимость</h4>
+
+<p>Объекты <code>Storage -</code> относительно недавнее дополнение стандарта. Это означает, что они не обязательно должны быть реализованы во всех браузерах. Проблему можно решить с помощью включения следующего куска кода в начале вашего скрипта, позволяя использовать объект <code>localStorage</code> в реализациях, которые нативно не поддерживают его.</p>
+
+<p>Следующий алгоритм - это точная имитация объекта <code style="font-style: normal; line-height: 1.5;">localStorage,</code> но использует куки.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change, or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+
+<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div>
+
+<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer &lt; 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+
+<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div>
+
+<h4 id="Compatibility_and_relation_with_globalStorage">Compatibility and relation with globalStorage</h4>
+
+<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p>
+
+<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p>
+
+<h3 id="globalStorage"><code>globalStorage</code></h3>
+
+<div>{{ Non-standard_header }}{{ obsolete_header("13.0") }}</div>
+
+<p><code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML5 has been removed from the HTML5 specification in favor of<code> {{ Anch("localStorage") }}</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g., over multiple pages and browser sessions).</p>
+
+<div class="warning">Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div>
+
+<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access
+globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hello&lt;/b&gt;, how are you?");
+</pre>
+
+<p>Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p>
+
+<ul>
+ <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li>
+</ul>
+
+<p><strong>Examples:</strong></p>
+
+<p>All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p>
+
+<p>Remember a user's username for the particular sub-domain that is being visited:</p>
+
+<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John");
+</pre>
+
+<p>Keep track of the number of times that a user visits all pages of your domain:</p>
+
+<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+</pre>
+
+<h2 id="Расположение_хранилища_и_очищение_данных">Расположение хранилища и очищение данных</h2>
+
+<p>In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p>
+
+<ul>
+ <li>DOM Storage can be cleared via "Tools -&gt; Clear Recent History -&gt; Cookies" when Time range is "Everything" (via nsICookieManager::removeAll)
+  <ul>
+   <li>But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li>
+   <li>Does not show up in Tools -&gt; Options -&gt; Privacy -&gt; Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li>
+  </ul>
+ </li>
+ <li>DOM Storage is <strong>not</strong> cleared via Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now.</li>
+ <li>Doesn't show up in the "Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li>
+</ul>
+
+<p>See also <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p>
+
+<h2 id="Больше_информации">Больше информации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - Hands-on tutorial describing how to use the Web Storage API by creating a simple address book application.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - Showcases an offline app demo and explains how it works.</li>
+ <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li>
+ <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li>
+ <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a> - Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li>
+ <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a> - A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li>
+ <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li>
+ <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li>
+</ul>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>globalStorage</td>
+   <td>{{ CompatNo }}</td>
+   <td>2-13</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="Полезные_ссылки">Полезные ссылки</h2>
+
+<ul>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li>
+ <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li>
+ <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li>
+ <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li>
+ <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li>
+</ul>
+
+<div>{{ HTML5ArticleTOC }}</div>
diff --git a/files/ru/web/guide/api/index.html b/files/ru/web/guide/api/index.html
new file mode 100644
index 0000000000..2671deda74
--- /dev/null
+++ b/files/ru/web/guide/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Уроки по Web API
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Здесь вы найдёте ссылки на каждое руководство и объяснение каждого API, составляющего архитектуру веб-разработки.</p>
+
+<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/ru/web/guide/api/webrtc/index.html b/files/ru/web/guide/api/webrtc/index.html
new file mode 100644
index 0000000000..dd0175c70b
--- /dev/null
+++ b/files/ru/web/guide/api/webrtc/index.html
@@ -0,0 +1,34 @@
+---
+title: WebRTC
+slug: Web/Guide/API/WebRTC
+translation_of: Web/API/WebRTC_API
+---
+<p><strong>WebRTC</strong> (где RTC расшифровывается как Real-Time Communications) - это технология, которая позволяет передавать данные и потоковое аудио/видео между браузерами. Как набор стандартов в целом, WebRTC предоставляет любым поддерживающим этот стандарт, браузерам обмениваться данными и устраивать сеансы телеконференций в режиме точка-точка, без необходимости устанавливать какие-либо плагины и стороннее програмное обеспечение.</p>
+
+<p>Компоненты WebRTC доступны через API JavaScript: Network Stream API, который представляет собой поток аудио и видео данных, PeerConnection API, который позволяет двум и более пользователям общаться браузер-браузер напрямую, DataChannel API, который позволяет обмениваться данными других типов, например в играх в режиме реального времени, текстовые чаты, обмен файлами и так далее.</p>
+
+<div class="note">
+<p><span style="color: #000000;"><strong>На заметку:</strong> Эта документация находится в процессе переезда <a href="/ru/docs/Web/API/WebRTC_API">в свой новый дом</a>.</span></p>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Обмен данными в режиме точка-точка с WebRTC</a></dt>
+ <dd>О том, как наладить обмен данными в режиме точка-точка используя API WebRTC.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Введение в архитектуру WebRTC</a></dt>
+ <dd><strong>(AKA "WebRTC and the Ocean of Acronyms")</strong> WebRTC состоит из множества частей и это может быть причиной сложностей для новичков. Эта статья рассказывает обо всех частях и объясняет то как они между собой связаны.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Основы WebRTC </a></dt>
+ <dd>Теперь, когда вы уже знаете архитектуру WebRTC, вы можете перейти к этой статье, которая проведет вас через путь создания кросс-браузерного RTC-приложения</dd>
+</dl>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices.getUserMedia</a></dt>
+ <dd>API захвата медиа (видео/аудио)</dd>
+ <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt>
+ <dd>Интерфейс обработки потоковых данных между двуми пирами.</dd>
+ <dt><a href="/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt>
+ <dd>Интерфейс передачи произвольных данных через соединение точка-точка.</dd>
+</dl>
diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
new file mode 100644
index 0000000000..fb9f4a9e19
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
@@ -0,0 +1,407 @@
+---
+title: Adding captions and subtitles to HTML5 video
+slug: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+translation_of: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+---
+<div class="summary">
+<blockquote>
+<p><span class="seoSummary">В других статьях мы рассмотрели как  <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">создать cross browser видео плеер</a> используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как  <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">стилизовать плеер</a>. В этой статье мы возьмем тот же плеер и покажем как добавить  подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.</span></p>
+</blockquote>
+</div>
+
+<h2 id="Пример_видео_с_подписями">Пример видео с подписями</h2>
+
+<p>В этой статье мы сошлемся на пример плеера с подписями. Этот пример использует отрывок из <a href="http://www.sintel.org/">Sintel open movie</a>, созданного <a href="http://www.blender.org/foundation/">Blender Foundation</a>.</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>
+
+<div class="note">
+<p><strong>Note</strong>: вы можете найти <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source on Github</a>, а так же <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">посмотреть пример</a>.</p>
+</div>
+
+<h2 id="HTML5_и_Video_Captions">HTML5 и Video Captions</h2>
+
+<p>До того как погрузиться в то, как добавить подписи в видео плеер, мы хотели бы упомянуть о некоторых вещах, о которых вы должны знать перед тем как начать.</p>
+
+<h3 id="Подписи_или_Субтитры">Подписи или Субтитры</h3>
+
+<p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">Подписи и субтитры не одно и тоже</a>: они имеют существенные различия для зрителя, и передают различную информацию, мы рекомендуем ознакомится с различиями, если вы не уверены, что они есть. Однако технически они реализуются одинаково, поэтому материал в нашей статье применим к обоим.</p>
+
+<p>В этой статье мы сошлемся на text tracks, отображаемые как субтистры, т.к их контент направлен на слышащих людей, со сложностью понимания языка в фильме, а не на людей с плохим или отсутствием слуха.</p>
+
+<h3 id="Елемент_&lt;track>">Елемент &lt;track&gt; </h3>
+
+<p>HTML5 позволяет нам указать субтитры для видео, используя {{ htmlelement("track") }} елемент. Различные атрибуты этого элемента позволяют нам указать такие вещи как тип контента, который мы хотим разместить, язык и конечно ссылку на текстовый файл который содержит информацию о субтитрах. </p>
+
+<h3 id="WebVTT">WebVTT</h3>
+
+<p>Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату,  такому как <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT) формат. <a href="http://dev.w3.org/html5/webvtt/">WebVTT specification</a> всё еще работает, по этому основные его части стабильны и мы можем использовать их сегодня. </p>
+
+<p>Поставщики видео контента (такие как <a href="http://www.blender.org/foundation/">Blender Foundation</a>) предоставляют и подписи и субтитры в текстовом формате с их видео, но они обычно в SubRip Text (SRT) формате. Этот формат может быть легко переконвертирован в WebVTT, используя  online  конвертер  например такой как <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>.</p>
+
+<h2 id="Modifications_to_the_HTML_and_CSS">Modifications to the HTML and CSS</h2>
+
+<p>В этом разделе представлены модификции, сделанные в коде предыдущих статей, для того чтобы облегчить добавление субтитров в видео. Если вам это не интересно и вы просто хотите идти дальше в JavaScript и более соотвествующий CSS, пропустите  {{ anch("Subtitle implementation") }} раздел.</p>
+
+<p>В этом примере мы используем другое видео, <a href="http://www.sintel.org/">Sintel</a>, так как оно имеет больше речи и следовательно лучше иллюстрирует работу субтитров.</p>
+
+<h3 id="HTML_Markup">HTML Markup</h3>
+
+<p>Как упоминалось выше, нам необходимо использовать новый HTML5 <code>&lt;track&gt;</code> чтобы добавить файл с субтитрами в HTML5 Video. У нас уже имеется субтритры в 3х различных локалях, такие как English, German и Spanish, чтож теперь мы привяжем все 3 соотвествующих VTT файла, добавляя <code>&lt;track&gt;</code> внутрь нашего HTML5 <code>&lt;video&gt;</code> элемента: </p>
+
+<pre class="brush: html">&lt;video id="video" controls preload="metadata"&gt;
+   &lt;source src="video/sintel-short.mp4" type="video/mp4"&gt;
+   &lt;source src="video/sintel-short.webm" type="video/webm"&gt;
+   &lt;track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default&gt;
+   &lt;track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"&gt;
+   &lt;track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"&gt;
+&lt;/video&gt;</pre>
+
+<p>Как вы можете видеть, каждый <code>&lt;track&gt;</code> элемент имеет следующие установленные атрибуты:</p>
+
+<ul>
+ <li><code>kind</code> is given a value of <code>subtitles</code>, indicating the type of content the files contain</li>
+ <li><code>label</code> is given a value indicating which language that subtitle set is for  — for example <code>English</code> or <code>Deutsch</code> — these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see.</li>
+ <li><code>src</code> is assigned a valid URL pointing to the relevant WebVTT subtitle file in each case.</li>
+ <li><code>srclang</code> indicates what language each subtitle files' contents are in.</li>
+ <li>The <code>default</code> attribute is set on the English <code>&lt;track&gt;</code> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection.</li>
+</ul>
+
+<p>В дополнении к  нашему <code>&lt;track&gt;</code> элементу, мы так же добавили новую кнопку контроля меню субтитров. Как следствие, контроллеры видео выглядят следующим образом: </p>
+
+<pre class="brush: html;highlight[13]">&lt;div id="video-controls" class="controls" data-state="hidden"&gt;
+   &lt;button id="playpause" type="button" data-state="play"&gt;Play/Pause&lt;/button&gt;
+   &lt;button id="stop" type="button" data-state="stop"&gt;Stop&lt;/button&gt;
+   &lt;div class="progress"&gt;
+      &lt;progress id="progress" value="0" min="0"&gt;
+         &lt;span id="progress-bar"&gt;&lt;/span&gt;
+      &lt;/progress&gt;
+   &lt;/div&gt;
+   &lt;button id="mute" type="button" data-state="mute"&gt;Mute/Unmute&lt;/button&gt;
+   &lt;button id="volinc" type="button" data-state="volup"&gt;Vol+&lt;/button&gt;
+   &lt;button id="voldec" type="button" data-state="voldown"&gt;Vol-&lt;/button&gt;
+   &lt;button id="fs" type="button" data-state="go-fullscreen"&gt;Fullscreen&lt;/button&gt;
+   &lt;button id="subtitles" type="button" data-state="subtitles"&gt;CC&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Changes">CSS Changes</h3>
+
+<p>Видео контроллеры подверглись некоторым изменениям, чтобы сделать пространство для новой кнопки, но эти изменения относительно просты.</p>
+
+<p>В подписи кнопки не изпользовано никаких изображений, поэтому это просто стилизовано как: </p>
+
+<pre class="brush: css">.controls button[data-state="subtitles"] {
+    height:85%;
+    text-indent:0;
+    font-size:16px;
+    font-size:1rem;
+    font-weight:bold;
+    color:#666;
+    background:#000;
+    border-radius:2px;
+}</pre>
+
+<p>Есть так же и другие CSS  изменения, характерные для некоторой дополнительной реализации JavaScript, но об этом будет упомянуто ниже. </p>
+
+<h2 id="Subtitle_implementation">Subtitle implementation</h2>
+
+<p>Множество того, что мы делаем для доступа к видео субтитрам, вращается вокруг JavaScript. Аналогично видео контроллерам, если браузер поддерживает HTML5 video субтитры, существует контроллер, входящий в состав встроенного набора управления, чтобы получить доступ к ним. Однако, определив наши собственные элементы управления видео, эта кнопка является скрытой, поэтому мы должны определить свою.</p>
+
+<p>Браузеры различаются в зависимости от того, что они поддерживают, поэтому мы должны попытаться предоставить единый UI, для каждого браузера, где это возможно.</p>
+
+<h3 id="Initial_setup">Initial setup</h3>
+
+<p>Как и со всеми другими конопками, одно из первых вещеей, которые мы должны сделать - это получить дескриптор нашей кноки субтитров:</p>
+
+<pre class="brush: js">var subtitles = document.getElementById('subtitles');</pre>
+
+<p>Мы так же изначально отключаем все субтитры, в случае если браузер включает некоторые  из них по умолчанию:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; video.textTracks.length; i++) {
+   video.textTracks[i].mode = 'hidden';
+}</pre>
+
+<p>Свойство <code>video.textTracks</code>  содержит массив всех текстовых тректов, присоединных к видео. Мы проходим по каждому и утанавливаем его  <code>mode</code> в <code>hidden</code></p>
+
+<p>Примечание:  <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> дает нам доступ ко всем текстовым трекам, что определены в HTML5 video, c помощью элемента  <code>&lt;track&gt;</code></p>
+
+<h3 id="Building_a_caption_menu">Building a caption menu</h3>
+
+<p>Наша цель - это использовать кнопку <code>subtitles</code> , которую мы добавили ранее, чтобы дать возможность пользователю выбрать тот язык, который он хочет или полностью отключить субтитры.</p>
+
+<p>Мы добавили кнопку, но перед тем как что-то сделать, мы должны создать меню, которое с ней идет. Это меню создается динамически, т.к языки могут быть добавлены или удалены после, простым редактированием элементов  <code>&lt;track&gt;</code> в разметке видео.</p>
+
+<p>Все что нам необходимо сделать - это пройти через  <code>textTracks</code>, читая их свойства и строя меню из них:</p>
+
+<pre class="brush: js">var subtitlesMenu;
+if (video.textTracks) {
+   var df = document.createDocumentFragment();
+   var subtitlesMenu = df.appendChild(document.createElement('ul'));
+   subtitlesMenu.className = 'subtitles-menu';
+   subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
+   for (var i = 0; i &lt; video.textTracks.length; i++) {
+      subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
+   }
+   videoContainer.appendChild(subtitlesMenu);
+}</pre>
+
+<p>This code creates a {{ domxref("documentFragment") }}, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.</p>
+
+<p>The creation of each list item and button is done by the <code>createMenuItem()</code> function, which is defined as follows:</p>
+
+<pre class="brush: js">var captionMenuButtons = [];
+var createMenuItem = function(id, lang, label) {
+   var listItem = document.createElement('li');
+   var button = listItem.appendChild(document.createElement('button'));
+   button.setAttribute('id', id);
+   button.className = 'subtitles-button';
+   if (lang.length &gt; 0) button.setAttribute('lang', lang);
+   button.value = label;
+   button.setAttribute('data-state', 'inactive');
+   button.appendChild(document.createTextNode(label));
+   button.addEventListener('click', function(e) {
+      // Set all buttons to inactive
+      subtitleMenuButtons.map(function(v, i, a) {
+         subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
+      });
+      // Find the language to activate
+      var lang = this.getAttribute('lang');
+      for (var i = 0; i &lt; video.textTracks.length; i++) {
+         // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+         if (video.textTracks[i].language == lang) {
+            video.textTracks[i].mode = 'showing';
+            this.setAttribute('data-state', 'active');
+         }
+         else {
+            video.textTracks[i].mode = 'hidden';
+         }
+      }
+      subtitlesMenu.style.display = 'none';
+   });
+   subtitleMenuButtons.push(button);
+   return listItem;
+}</pre>
+
+<p>This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's <code>mode</code> attribute to <code>showing</code>, and setting the others to <code>hidden</code>.</p>
+
+<p>Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.<br>
+ <br>
+ Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:</p>
+
+<pre class="brush: js">subtitles.addEventListener('click', function(e) {
+   if (subtitlesMenu) {
+      subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
+   }
+});</pre>
+
+<h3 id="Subtitle_menu_CSS">Subtitle menu CSS</h3>
+
+<p>We also added some rudimentary styling for the newly created subtitles menu:</p>
+
+<pre class="brush: css">.subtitles-menu {
+    display:none;
+    position:absolute;
+    bottom:14.8%;
+    right:20px;
+    background:#666;
+    list-style-type:none;
+    margin:0;
+    padding:0;
+    width:100px;
+    padding:10px;
+}
+
+.subtitles-menu li {
+    padding:0;
+    text-align:center;
+}
+
+.subtitles-menu li button {
+    border:none;
+    background:#000;
+    color:#fff;
+    cursor:pointer;
+    width:90%;
+    padding:2px 5px;
+    border-radius:2px;
+}</pre>
+
+<h2 id="Styling_the_displayed_subtitles">Styling the displayed subtitles</h2>
+
+<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="http://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p>
+
+<p>The <code>::cue</code> pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:</p>
+
+<ul>
+ <li>{{ cssxref("color") }}</li>
+ <li>{{ cssxref("opacity") }}</li>
+ <li>{{ cssxref("visibility") }}</li>
+ <li>{{ cssxref("text-decoration") }}</li>
+ <li>{{ cssxref("text-shadow") }}</li>
+ <li>{{ cssxref("background") }} shorthand properties</li>
+ <li>{{ cssxref("outline") }} shorthand properties</li>
+ <li>{{ cssxref("font") }} shorthand properties, including {{ cssxref("line-height") }}</li>
+ <li>{{ cssxref("white-space") }}</li>
+</ul>
+
+<p>For example, to change the text colour of the text track cues you can write:</p>
+
+<pre class="brush: css">::cue {
+   color:#ccc;
+}</pre>
+
+<p>If the WebVTT file uses <a href="http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p>
+
+<pre>0
+00:00:00.000 --&gt; 00:00:12.000
+&lt;v Test&gt;[Test]&lt;/v&gt;</pre>
+
+<p>Then this specific 'voice' will be stylable like so:</p>
+
+<pre class="brush: css">::cue(v[voice='Test']) {
+   color:#fff;
+   background:#0095dd;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.</p>
+</div>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<p><a href="http://caniuse.com/webvtt">Browser support for WebVTT and the <code>&lt;track&gt;</code> element</a> is fairly good, although some browsers differ slightly in their implementation.</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The <code>default</code> attribute is also supported.</p>
+
+<div class="note">
+<p><strong>Note</strong>: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an <code>.htaccess</code> file to an appropriate directory that contains <code>AddType text/vtt .vtt</code>.</p>
+</div>
+
+<h3 id="Safari">Safari</h3>
+
+<p>Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.</p>
+
+<h3 id="Chrome_and_Opera">Chrome and Opera</h3>
+
+<p>These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the <code>default</code> attribute on the <code>&lt;track&gt;</code> element and will instead try to match the browser's language to the subtitle's language.</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox's implementation was completely broken due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=981280">bug</a>, leading to Mozilla turning off WebVTT support by default (you can turn it on via the <code>media.webvtt.enabled</code> flag.) However, <s>this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing)</s> this has been fixed as of Firefox 31, and everything works as it should.</p>
+
+<h2 id="Plugins">Plugins</h2>
+
+<p>If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.</p>
+
+<dl>
+ <dt><a href="http://www.delphiki.com/html5/playr/">playr</a></dt>
+ <dd>This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.</dd>
+ <dt><a href="https://flowplayer.org/player/">Flowplayer</a></dt>
+ <dd>HTML5 player supporting WebVTT.</dd>
+ <dt><a href="http://www.jwplayer.com/">jwplayer</a></dt>
+ <dd>This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.</dd>
+ <dt><a href="http://mediaelementjs.com/">MediaElement.js</a></dt>
+ <dd>Another complete video player that also support video captions, albeit only in SRT format.</dd>
+ <dt><a href="http://www.leanbackplayer.com/">LeanBack Player</a></dt>
+ <dd>Yet another video player that supports WebVTT captions as well as providing other standard player functionality.</dd>
+ <dt><a href="http://sublimevideo.net">SublimeVideo</a></dt>
+ <dd>This player also supports captions through WebVTT and SRT files.</dd>
+ <dt><a href="http://www.videojs.com/">Video.js</a></dt>
+ <dd>Supports WebVTT video subtitles.</dd>
+ <dt><a href="https://www.radiantmediaplayer.com">Radiant Media Player</a></dt>
+ <dd>Supports multi-languages WebVTT closed captions</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="http://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p>
+</div>
+
+<p> </p>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="display: none; opacity: 1;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none; margin-top: 30px; margin-left: 1px; direction: ltr; text-align: left; font-size: 14px; line-height: 20px;">Habrá un botón provisto dentro del control nativo establecido para acceder a ellos</div>
+
+<div id="SL_shadow_translator" style="display: none; left: 25px; top: 4361px; box-shadow: rgb(186, 185, 181) 0px 0px 0px; width: 467px;">
+<div id="SL_planshet" style="background: rgb(239, 239, 239);">
+<div id="SL_arrow_up" style="display: none; left: 123px;"> </div>
+
+<div id="SL_Bproviders" style="">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_OFF" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_OFF" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style=""> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="cursor: not-allowed;" title="This function gets disabled if the source language is set to 'Detect language'"> </div>
+   </td>
+   <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option selected value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td"> </td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="display: none;" title="Listen to the translation"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy_hand" id="SL_copy" style="" title="Copy translation"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch" style="display: block;"> </div>
+
+    <div class="SL_font_on" id="SL_bbl_font" style="" title="Font size"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="" title="Help"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="" title="Pin pop-up bubble"> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style="direction: ltr; text-align: left; font-size: 14px; line-height: 20px;">Habrá un botón provisto dentro del control nativo establecido para acceder a ellos</div>
+
+<div class="SL_loading" id="SL_loading" style="display: block;"> </div>
+
+<div id="SL_player2" style="display: none; height: 0px;"> </div>
+
+<div id="SL_alert100" style="display: none;">Text-to-speech function is limited to 200 characters</div>
+
+<div id="SL_Balloon_options" style="background: rgb(239, 239, 239);">
+<div id="SL_arrow_down" style="display: block; left: 123px;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="" title="Show Translator's button 3 second(s)"> </div>
+   </td>
+   <td><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation History">History</a> : <a class="SL_options" title="ImTranslator Feedback">Feedback</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Make a small contribution">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Close">Close</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
new file mode 100644
index 0000000000..48e7b00f6c
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
@@ -0,0 +1,216 @@
+---
+title: 'Медиа-буферизация, поиск и временные диапазоны'
+slug: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+tags:
+  - Audio
+  - HTML5
+  - Video
+  - Буфер
+  - буферизация
+  - временные диапазоны
+  - поиск
+translation_of: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+---
+<div class="summary">
+<p><span class="seoSummary">Sometimes it's useful to know how much {{htmlelement("audio") }} or {{htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</span></p>
+</div>
+
+<h2 id="Buffered">Buffered</h2>
+
+<p>Атрибут <code>buffered</code> расскажет нам, какие части медиа-элемента были загружены. Он возвращает объект {{ domxref("TimeRanges") }}, который содержит информацию о том, какие куски медиа были загружены. Обычно он непрерывный, но если пользователь перескакивает, когда медиа-элемент занят буферизацией, он может содержать пропуски.</p>
+
+<p>Это будет работать с {{htmlelement("audio") }} или {{htmlelement("video") }}; теперь давайте рассмотрим простой пример для audio:</p>
+
+<pre class="brush: html">&lt;audio id="my-audio" controls src="music.mp3"&gt;
+&lt;/audio&gt;</pre>
+
+<p>Мы можем получить доступ к этому атрибутам, так:</p>
+
+<pre class="brush: js">var myAudio = document.getElementById('my-audio');
+
+var bufferedTimeRanges = myAudio.buffered;</pre>
+
+<h2 id="Объект_TimeRanges">Объект TimeRanges</h2>
+
+<p>TimeRanges cодержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) (<a href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">Узнать больше о TimeRanges</a>).</p>
+
+<p>Объект {{ domxref("TimeRanges") }} имеет следующие свойства:</p>
+
+<ul>
+ <li><code>length</code>: число интервалов.</li>
+ <li><code>start(index)</code>: начальное время указанного интервала.</li>
+ <li><code>end(index)</code>: конечное время указанного интервала.</li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>Без действий пользователя обычно существует только один временной диапазон (</span></span>Time Ranges<span lang="ru"><span>), но если вы переходите по медиа-файлу, может появиться более одного диапазона, как показано на рисунке ниже.</span> <span>Получится два буферизированных диапазона по времени - один с 0 по 5 секунду, а второй - с 15 по 19 секунду.</span></span></p>
+
+<pre>------------------------------------------------------
+|=============|                    |===========|     |
+------------------------------------------------------
+0             5                    15          19    21</pre>
+
+<p><span id="result_box" lang="ru"><span>Для этого звукового файла</span></span> {{ domxref("TimeRange") }} будет иметь следующие доступные свойства:</p>
+
+<pre class="brush: js">myAudio.buffered.length;   // returns 2
+myAudio.buffered.start(0); // returns 0
+myAudio.buffered.end(0);   // returns 5
+myAudio.buffered.start(1); // returns 15
+myAudio.buffered.end(1);   // returns 19</pre>
+
+<p>Чтобы опробовать и визуализировать буферные диапазоны времени, мы можем написать немного HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;audio id="my-audio" controls&gt;
+    &lt;source src="music.mp3" type="audio/mpeg"&gt;
+  &lt;/audio&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;canvas id="my-canvas" width="300" height="20"&gt;
+  &lt;/canvas&gt;
+&lt;/p&gt;</pre>
+
+<p>и немного JavaScript:</p>
+
+<pre class="brush: js">  window.onload = function(){
+
+    var myAudio = document.getElementById('my-audio');
+    var myCanvas = document.getElementById('my-canvas');
+    var context = myCanvas.getContext('2d');
+
+    context.fillStyle = 'lightgray';
+    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
+    context.fillStyle = 'red';
+    context.strokeStyle = 'white';
+
+    var inc = myCanvas.width / myAudio.duration;
+
+    // отображение TimeRanges
+
+    myAudio.addEventListener('seeked', function() {
+      for (i = 0; i &lt; myAudio.buffered.length; i++) {
+
+        var startX = myAudio.buffered.start(i) * inc;
+        var endX = myAudio.buffered.end(i) * inc;
+        var width = endX - startX;
+
+        context.fillRect(startX, 0, width, myCanvas.height);
+        context.rect(startX, 0, width, myCanvas.height);
+        context.stroke();
+      }
+    });
+  }</pre>
+
+<p><span id="result_box" lang="ru"><span>Это наглядно работает с длинными фрагментами аудио или видео. Нажмите кнопку воспроизведения и нажмите на панели прогресса и вы должны получить что-то вроде того, что показано на картинке ниже.</span> </span>Each red filled white rectangle represents a time range.</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges." src="https://mdn.mozillademos.org/files/7347/bufferedtimeranges.png" style="" title="[https://mdn.mozillademos.org] A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges."></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="http://jsbin.com/memazaro/1/edit">timerange code running live on JS Bin</a>.</p>
+</div>
+
+<h2 id="Seekable">Seekable</h2>
+
+<p>The <code>seekable</code> attribute returns a {{ domxref("TimeRanges") }} object and tells us which parts of the media can be played without delay; this is irrespective of whether that part has been downloaded or not. Some parts of the media may be seekable but not buffered if byte-range requests are enabled on the server. Byte range requests allow parts of the media file to be delivered from the server and so can be ready to play almost immediately — thus they are seekable.</p>
+
+<pre class="brush: js">var seekableTimeRanges = myAudio.seekable;</pre>
+
+<h2 id="Создание_собственной_буферизации">Создание собственной буферизации</h2>
+
+<p>If we wish to create our own custom player, we may want to provide feedback on how much of the media is ready to be played. In practice a good way to do this is use the <code>seekable</code> attribute, although as we have seen above seekable parts of the media are not neccessarily contiguous — they often are however and we can safely approximate this information to give the user an indication of which parts of the media can be played directly. We can find this point in the media using the following line of code:</p>
+
+<pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> actually tells us the end point of the last time range that is seekable (not all seekable media). In practice this is good enough as the browser either enables range requests or it doesn't. If it doesn't then <code>audio.seekable</code> will be equivalent to <code>audio.buffered</code>, which will give a valid indication of the end of seekable media. If range requests are enabled this value usually becomes the duration of the media almost instantly.</p>
+</div>
+
+<p>It is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display.</p>
+
+<p>Итак, давайте реализуем это. HTML для нашего плеера выглядит так:</p>
+
+<pre class="brush: css">&lt;audio id="my-audio" preload controls&gt;
+  &lt;source src="music.mp3" type="audio/mpeg"&gt;
+&lt;/audio&gt;
+&lt;div class="buffered"&gt;
+  &lt;span id="buffered-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;span id="progress-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Мы будем использовать следующий CSS для стилизации отображения буферизации:</p>
+
+<pre class="brush: css">.buffered {
+  height: 20px;
+  position: relative;
+  background: #555;
+  width: 300px;
+}
+
+#buffered-amount {
+  display: block;
+  height: 100%;
+  background-color: #777;
+  width: 0;
+}
+
+.progress {
+  margin-top: -20px;
+  height: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#progress-amount {
+  display: block;
+  height: 100%;
+  background-color: #595;
+  width: 0;
+}</pre>
+
+<p>И следующий JavaScript реализует нашу функциональность:</p>
+
+<pre class="brush: js">window.onload = function(){
+
+  var myAudio = document.getElementById('my-audio');
+
+  myAudio.addEventListener('progress', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      for (var i = 0; i &lt; myAudio.buffered.length; i++) {
+            if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) &lt; myAudio.currentTime) {
+                document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%";
+                break;
+            }
+        }
+    }
+  });
+
+  myAudio.addEventListener('timeupdate', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%";
+    }
+  });
+}</pre>
+
+<p>The progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.</p>
+
+<p>The timeupdate event is fired 4 times a second as the media plays and that's where we increment our playing progress bar.</p>
+
+<p>This should give you results similar to the following, where the light grey bar represents the buffered progress and green bar shows the played progress:</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered." src="https://mdn.mozillademos.org/files/7349/bufferedprogress.png" style="" title="[https://mdn.mozillademos.org] A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered."></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="http://jsbin.com/badimipi/1/edit">buffering code running live on JS Bin</a>.</p>
+</div>
+
+<h2 id="Пару_слов_о_Played">Пару слов о Played</h2>
+
+<p>Надо заметить, что есть свойство <code>played</code>, сообщающее, были ли воспроизведены интервалы полностью. Пример:</p>
+
+<pre class="brush: js">var played = audio.played; // вернет объект TimeRanges</pre>
+
+<p>Если просуммировать все интервалы <code>audio.played</code>, то получим долю прослушанного аудио, что может быть полезно для сбора метрик.</p>
diff --git a/files/ru/web/guide/audio_and_video_delivery/index.html b/files/ru/web/guide/audio_and_video_delivery/index.html
new file mode 100644
index 0000000000..d93c18ebbc
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_delivery/index.html
@@ -0,0 +1,554 @@
+---
+title: Доставка аудио и видео контента
+slug: Web/Guide/Audio_and_video_delivery
+tags:
+  - Audio
+  - HTML5
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+translation_of: Web/Guide/Audio_and_video_delivery
+---
+<div class="summary">
+<p>Мы можем доставлять аудио и видео контент различными способами. Это могут быть как статичные медиа файлы, так и потоковые данные. Эта статья является отправной точкой в изучении различных механизмов доставки медиа ресурсов и совместимости работы с популярными браузерами.</p>
+</div>
+
+<h2 id="Аудио_и_видео_элементы">Аудио и видео элементы</h2>
+
+<p>Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's {{ htmlelement("audio")}} and {{ htmlelement("video")}} elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Audio Codec Compatibility Table</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Audio/Video Codec Compatibility Table</a></li>
+</ul>
+
+<p>To deliver video and audio, the general workflow is usually something like this:</p>
+
+<ol>
+ <li>Check what format the browser supports via feature detection (usually a choice of two, as stated above.)</li>
+ <li>If the browser doesn't support playback of any of the provided formats natively, provide a fallback (such as a Flash movie.)</li>
+ <li>Identify how you want to play/instantiate the media (e.g. a {{ htmlelement("video") }} element, or <code>document.createElement('video')</code> perhaps?)</li>
+ <li>Deliver the media file to the player.</li>
+</ol>
+
+<h3 id="HTML_Audio">HTML Audio</h3>
+
+<pre class="brush: html">&lt;audio controls preload="auto"&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp3 --&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+
+  &lt;!-- fallback for browsers that don't support audio tag --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+&lt;/audio&gt;</pre>
+
+<p>The code above will create an audio player that attempts to preload as much audio as possible for smooth playback.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The preload attribute may be ignored by some mobile browsers.</p>
+</div>
+
+<p>For further info see <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Cross Browser Audio Basics (HTML5 Audio In Detail)</a></p>
+
+<h3 id="HTML_Video">HTML Video</h3>
+
+<pre class="brush: html">&lt;video controls width="640" height="480" poster="initialimage.png" autoplay muted&gt;
+  &lt;source src="videofile.mp4" type="video/mp4"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp4 --&gt;
+  &lt;source src="videofile.webm" type="video/webm"&gt;
+
+  &lt;!-- specifying subtitle files --&gt;
+  &lt;track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"&gt;
+  &lt;track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"&gt;
+
+  &lt;!-- fallback for browsers that don't support video tag --&gt;
+  &lt;a href="videofile.mp4"&gt;download video&lt;/a&gt;
+&lt;/video&gt;</pre>
+
+<p>The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The autoplay attribute may be ignored by some mobile browsers.</p>
+</div>
+
+<p>For further info see <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/video">&lt;video&gt; element</a> and <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a>.</p>
+
+<h3 id="Audio_and_Video_Fallback">Audio and Video Fallback</h3>
+
+<p>You can create a more comprehensive Fallback using Flash. <a href="https://github.com/johndyer/mediaelement/blob/master/build/flashmediaelement.swf">Using flashmediaelement.swf</a> is one way.</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+  &lt;!-- fallback for non supporting browsers goes here --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+  &lt;object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"&gt;
+    &lt;param name="movie" value="flashmediaelement.swf" /&gt;
+    &lt;param name="flashvars" value="controls=true&amp;isvideo=false&amp;file=audiofile.mp3" /&gt;
+  &lt;/object&gt;
+&lt;/audio&gt;</pre>
+
+<p>The process is very similar with video — just remember to set <code>isvideo=true</code> in the <code>flashvars value</code> parameters.<br>
+ <br>
+ <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">More options for Fallbacks</a>.</p>
+
+<h3 id="JavaScript_Audio">JavaScript Audio</h3>
+
+<pre class="brush: js">var myAudio = document.createElement('audio');
+
+if (myAudio.canPlayType('audio/mpeg')) {
+  myAudio.setAttribute('src','audiofile.mp3');
+} else if (myAudio.canPlayType('audio/ogg')) {
+  myAudio.setAttribute('src','audiofile.ogg');
+}
+
+myAudio.currentTime = 5;
+myAudio.play();</pre>
+
+<p>We set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Play will be ignored by some mobile browsers unless issued by a user-initiated event.</p>
+</div>
+
+<p>It's also possible to feed an {{ htmlelement("audio") }} element a base64 encoded WAV file, allowing to generate audio on the fly:</p>
+
+<pre class="brush: html">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>
+
+<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="http://speak-demo.herokuapp.com">Try the demo</a>.</p>
+
+<h3 id="JavaScript_Video">JavaScript Video</h3>
+
+<pre class="brush: js">var myVideo = document.createElement('video');
+
+if (myVideo.canPlayType('video/mp4')) {
+  myVideo.setAttribute('src','videofile.mp4');
+} else if (myVideo.canPlayType('video/webm')) {
+  myVideo.setAttribute('src','videofile.webm');
+}
+
+myVideo.width = 480;
+myVideo.height = 320;</pre>
+
+<p>We set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.</p>
+
+<h2 id="Web_Audio_API">Web Audio API</h2>
+
+<pre class="brush: js">  var context;
+  var request;
+  var source;
+
+  try {
+    context = new AudioContext();
+    request = new XMLHttpRequest();
+    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+    request.responseType = "arraybuffer";
+
+    request.onload = function() {
+      context.decodeAudioData(request.response, function(buffer) {
+        source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        // auto play
+        source.start(0); // start was previously noteOn
+      });
+    };
+
+    request.send();
+
+  } catch(e) {
+    alert('web audio api not supported');
+  }</pre>
+
+<p>In this example we retrieve an MP3 file via XHR, load it into a source and play it (<a href="http://jsbin.com/facutone/1/edit?js">Try it for yourself</a>). Find more about Web Audio API basics in <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a>.</p>
+
+<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2>
+
+<p>It's also possible to retrieve a live stream from a webcam and/or microphone using <code>getUserMedia</code> and the Stream API. This makes up part of a wider technology known as WebRTC (Web Real-Time Communications) and is compatible with the latest versions of Chrome, Firefox and Opera.</p>
+
+<p>To grab the stream from your webcam, first set up a {{htmlelement("video")}} element:</p>
+
+<pre class="brush: html">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
+
+<p>Next, if supported connect the webcam source to the video element:</p>
+
+<pre class="brush: js">if (navigator.mediaDevices) {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  .then(function onSuccess(stream) {
+    var video = document.getElementById('webcam');
+    video.autoplay = true;
+    video.srcObject = stream;
+  })
+  .catch(function onError() {
+    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
+  });
+} else {
+  alert('getUserMedia is not supported in this browser.');
+}
+</pre>
+
+<p>To find out more, read our {{domxref("MediaDevices.getUserMedia")}} page.</p>
+
+<h2 id="Mediastream_Recording">Mediastream Recording</h2>
+
+<p>New standards are being rolled out to allow your browser to grab media from your mic or camera using <code>getUserMedia</code> and record it instantly using the new MediaRecorder API. You take the stream you receive from <code>getUserMedia</code>, pass it to a <code>MediaRecorder</code> object, take the resulting output and feed it to your audio or video source*.<br>
+ <br>
+ The main mechanism is outlined below:</p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia({audio:true})
+  .then(function onSuccess(stream) {
+    var recorder = new MediaRecorder(stream);
+
+    var data = [];
+    recorder.ondataavailable = function(e) {
+      data.push(e.data);
+    };
+    recorder.start();
+    recorder.onerror = function(e) {
+      throw e.error || new Error(e.name); // e.name is FF non-spec
+    }
+    recorder.onstop = function(e) {
+      var audio = document.createElement('audio');
+      audio.src = window.URL.createObjectURL(new Blob(data));
+    }
+    setTimeout(function() {
+      rec.stop();
+    }, 5000);
+  })
+  .catch(function onError(error) {
+    console.log(error.message);
+  });
+</pre>
+
+<p>See <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> for more details.</p>
+
+<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{domxref("HTMLMediaElement")}} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.</p>
+
+<h3 id="Encrypted_Media_Extensions_(EME)">Encrypted Media Extensions (EME)</h3>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> is a W3C proposal to extend <code>HTMLMediaElement</code>, providing APIs to control playback of protected content.<br>
+ <br>
+ The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.<br>
+ <br>
+ One of the principle uses of EME is to allow browsers to implement DRM (<a href="http://en.wikipedia.org/wiki/Digital_rights_management">Digital Rights Management</a>), which helps to prevent web-based content (especially video) from being copied.</p>
+
+<h3 id="Adaptive_Streaming">Adaptive Streaming</h3>
+
+<p>New formats and protocols are being rolled out to facilitate adaptive streaming. Adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. Adaptive streaming is often used in conjunction with live streaming where smooth delivery of audio or video is paramount.</p>
+
+<p>The main formats used for adaptive streaming are <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#HLS">HLS</a> and <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE has been designed with DASH in mind. MSE defines byte streams according to <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> and <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (both supported in DASH, the latter supported in HLS). Generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with DASH.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Currently Safari does not support DASH although dash.js will work on newer versions of Safari scheduled for release with OSX Yosemite.</p>
+</div>
+
+<p>DASH also provides a number of profiles including simple onDemand profiles that no preprocessing and splitting up of media files. There are also a number of cloud based services that will convert your media to both HLS and DASH.<br>
+ <br>
+ For further information see <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a>.</p>
+
+<ul>
+</ul>
+
+<h2 id="Customising_Your_Media_Player">Customising Your Media Player</h2>
+
+<p>You may decide that you want your audio or video player to have a consistent look across browsers, or just wish to tweak it to match your site. The general technique for achieving this is to omit the <code>controls</code> attribute so that the default browser controls are not displayed, create custom controls using HTML and CSS, then use JavaScript to link your controls to the audio/video API.</p>
+
+<p>If you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. You can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions.</p>
+
+<p>You may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing. It's often important to remember keyboard controls for user convenience and accessibility.</p>
+
+<p>A quick example — first set up your audio and custom controls in HTML:</p>
+
+<pre class="brush: html">  &lt;audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
+  &lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
+
+<p>add a bit of JavaScript to detect events to play and pause the audio:</p>
+
+<pre class="brush: js">window.onload = function() {
+
+  var myAudio = document.getElementById('my-audio');
+  var myControl = document.getElementById('my-control');
+
+  function switchState() {
+    if (myAudio.paused == true) {
+      myAudio.play();
+      myControl.innerHTML = "pause";
+    } else {
+      myAudio.pause();
+      myControl.innerHTML = "play";
+    }
+  }
+
+  function checkKey(e) {
+    if (e.keycode == 32 ) { //spacebar
+      switchState();
+    }
+  }
+
+  myControl.addEventListener('click', function() {
+    switchState();
+  }, false);
+
+  window.addEventListener( "keypress", checkKey, false );
+}</pre>
+
+<p>You can <a href="http://jsbin.com/jujeladu/2/edit">try this example out here</a>. For more information, see <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Creating your own custom audio player</a>.</p>
+
+<h2 id="Other_tips_for_audiovideo">Other tips for audio/video</h2>
+
+<h3 id="Stopping_the_download_of_media">Stopping the download of media</h3>
+
+<p>While stopping the playback of media is as easy as calling the element's <code>pause()</code> method, the browser keeps downloading the media until the media element is disposed of through garbage collection.</p>
+
+<p>Here's a trick that stops the download at once:</p>
+
+<pre class="brush: js">var mediaElement = document.querySelector("#myMediaElementID");
+mediaElement.<code>removeAttribute("src");</code>
+mediaElement.<code>load();</code>
+</pre>
+
+<p>By removing the media element's <code>src</code> attribute and invoking the load() method, you release the resources associated with the video, which stops the network download. You must call <code>load()</code> after removing the attribute, because just removing the <code>src</code> attribute does not invoke the load algorithm. If the <code>&lt;video&gt;</code> element also has <code>&lt;source&gt;</code> element descendants, those should also be removed before calling <code>load()</code>.</p>
+
+<p>Note that just setting the <code>src</code> attribute to an empty string will actually cause the browser to treat it as though you're setting a video source to a relative path. This causes the browser to attempt another download to something that is unlikely to be a valid video.</p>
+
+<h3 id="Seeking_through_media">Seeking through media</h3>
+
+<p>Media elements provide support for moving the current playback position to specific points in the media's content. This is done by setting the value of the <code>currentTime</code> property on the element; see {{ domxref("HTMLMediaElement") }} for further details on the element's properties. Simply set the value to the time, in seconds, at which you want playback to continue.</p>
+
+<p>You can use the element's <code>seekable</code> property to determine the ranges of the media that are currently available for seeking to. This returns a {{ domxref("TimeRanges") }} object listing the ranges of times that you can seek to.</p>
+
+<pre class="brush: js">var mediaElement = document.querySelector('#mediaElementID');
+mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
+mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
+mediaElement.currentTime = 122; // Seek to 122 seconds
+mediaElement.played.end(0);      // Returns the number of seconds the browser has played
+</pre>
+
+<h3 id="Specifying_playback_range">Specifying playback range</h3>
+
+<p>When specifying the URI of media for an {{ HTMLElement("audio") }} or {{ HTMLElement("video") }} element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.</p>
+
+<p>A time range is specified using the syntax:</p>
+
+<pre>#t=[starttime][,endtime]</pre>
+
+<p>The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).</p>
+
+<p>A few examples:</p>
+
+<dl>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=10,20</span></dt>
+ <dd>Specifies that the video should play the range 10 seconds through 20 seconds.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=,10.5</span></dt>
+ <dd>Specifies that the video should play from the beginning through 10.5 seconds.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=,02:00:00</span></dt>
+ <dd>Specifies that the video should play from the beginning through two hours.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=60</span></dt>
+ <dd>Specifies that the video should start playing at 60 seconds and play through the end of the video.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p>
+</div>
+
+<h2 id="Error_handling">Error handling</h2>
+
+<p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the <code>error</code> event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.</p>
+
+<p>This lets you detect which sources failed to load, which may be useful. Consider this HTML:</p>
+
+<pre class="brush: html">&lt;video&gt;
+&lt;source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
+&lt;/source&gt;
+&lt;source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
+&lt;/source&gt;
+&lt;source id="ogg_src"
+  src="video.ogv"
+  type='video/ogv; codecs="theora, vorbis"'&gt;
+&lt;/source&gt;
+&lt;/video&gt;</pre>
+
+<p>Since Firefox doesn't support MP4 and 3GP on some platforms due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive <code>error</code> events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.</p>
+
+<h3 id="Checking_whether_the_browser_supports_the_supplied_formats">Checking whether the browser supports the supplied formats</h3>
+
+<p>Use the following verified sources within your audio and video elements to check support.</p>
+
+<ul>
+ <li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li>
+ <li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li>
+ <li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li>
+ <li>Video MP4 (<code>type="video/mp4"</code>): <a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li>
+ <li>Video WebM (<code>type="video/webm"</code>): <a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li>
+ <li>Video Ogg (<code>type="video/ogg"</code>): <a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li>
+</ul>
+
+<p>If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.<br>
+ <br>
+ If these work but the files you are supplying don't, there are two possible issues:</p>
+
+<h4 id="1._The_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. The media server is not delivering the correct mime types with the file</h4>
+
+<p>Although this is usually supported, you may need to add the following to your media server's <code>.htaccess</code> file.</p>
+
+<pre># AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv</pre>
+
+<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Your files have been encoded incorrectly</h4>
+
+<p>Your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable:</p>
+
+<ul>
+ <li><a href="http://audacity.sourceforge.net/">Audacity</a> — Free Audio Editor and Recorder</li>
+ <li><a href="http://www.getmiro.com/">Miro</a> — Free, open-source music and video player</li>
+ <li><a href="http://handbrake.fr/">Handbrake</a> — Open Source Video Transcoder</li>
+ <li><a href="http://firefogg.org/">Firefogg</a> — Video and Audio encoding for Firefox</li>
+ <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> — Comprehensive command line encoder</li>
+ <li><a href="https://libav.org/">Libav</a> — Comprehensive command line encoder</li>
+ <li><a href="http://m.vid.ly/">Vid.ly</a> — Video player,transcoding and delivery</li>
+ <li><a href="https://archive.org/">Internet Archive</a> — Free transcoding and storage</li>
+</ul>
+
+<h3 id="Detecting_when_no_sources_have_loaded">Detecting when no sources have loaded</h3>
+
+<p>To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's <code>networkState</code> attribute. If this is <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, you know that all the sources failed to load.</p>
+
+<p>If at that point you add another source, by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.</p>
+
+<h3 id="Showing_fallback_content_when_no_source_could_be_decoded">Showing fallback content when no source could be decoded</h3>
+
+<p>Another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. Then you can replace the video with its fallback content:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="dynamicsearch.mp4" type="video/mp4"&gt;&lt;/source&gt;
+  &lt;a href="dynamicsearch.mp4"&gt;
+    &lt;img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"&gt;
+  &lt;/a&gt;
+  &lt;p&gt;Click image to play a video demo of dynamic app search&lt;/p&gt;
+&lt;/video&gt;
+
+</pre>
+
+<pre class="brush: js">var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+</pre>
+
+<h2 id="AudioVideo_JavaScript_Libraries">Audio/Video JavaScript Libraries</h2>
+
+<p>A number of audio and video JavaScript libaries exist. The most popular libraries allow you to choose a consistent player design over all browsers and provide a fallback for browsers that don't support audio and video natively. Fallbacks often use Adobe Flash or Microsoft Silverlight plugins. Other functionality such as the track element for subtitles can also be provided through media libraries.</p>
+
+<h3 id="Audio_only">Audio only</h3>
+
+<ul>
+ <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+</ul>
+
+<h3 id="Video_only">Video only</h3>
+
+<ul>
+ <li><a href="https://flowplayer.org/">flowplayer</a>: Gratis with a flowplayer logo watermark. Open source (GPL licensed.)</li>
+ <li><a href="http://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li>
+ <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li>
+ <li><a href="http://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h3 id="Audio_and_Video">Audio and Video</h3>
+
+<ul>
+ <li><a href="http://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li>
+ <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratis and Open Source (MIT Licensed.)</li>
+</ul>
+
+<h3 id="Web_Audio_API_2">Web Audio API</h3>
+
+<ul>
+ <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: A polyfill for older versions of the Web Audio API; Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h2 id="Basic_tutorials">Basic tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt>
+ <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt>
+ <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt>
+ <dd>
+ <div>
+ <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p>
+ </div>
+ </dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt>
+ <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt>
+ <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt>
+ <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd>
+</dl>
+
+<h2 id="Streaming_media_tutorials">Streaming media tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt>
+ <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt>
+ <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd>
+ <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt>
+ <dd>Details how to set up adaptive streaming using DASH and WebM.</dd>
+</dl>
+
+<h2 id="Advanced_tutorials">Advanced tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt>
+ <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track> element. The primary purpose of WebVTT files is to add subtitles to a &lt;video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
+ <dd>A guide to writing cross browser Web Audio API code.</dd>
+ <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt>
+ <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
+ <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
+ <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox OS versions 1.3 and above support the <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> protocol for streaming video delivery. A fallback solution for older versions would be to use <code>&lt;video&gt;</code> along with a suitable format for Gecko (such as WebM) to serve fallback content. More information will be published on this in good time.</p>
+</div>
+
+<h2 id="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/guide/audio_and_video_manipulation/index.html b/files/ru/web/guide/audio_and_video_manipulation/index.html
new file mode 100644
index 0000000000..0fc7587321
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_manipulation/index.html
@@ -0,0 +1,404 @@
+---
+title: Обработка аудио и видео
+slug: Web/Guide/Audio_and_video_manipulation
+tags:
+  - Видео
+  - Медиа
+  - Обучение
+  - Примеры
+  - Рекомендации
+  - аудио
+translation_of: Web/Guide/Audio_and_video_manipulation
+---
+<div class="summary">
+<p>Веб-технологии примечательны тем, что они позволяют использовать различные инструменты в совокупности. Например, можно проводить манипуляции над имеющимися в браузере аудио и видео потоками с помощью {{htmlelement("canvas")}}, <a href="/en-US/docs/Web/WebGL">WebGL</a> или <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>: напрямую изменять аудио и видео, т.е. добавлять эффекты к аудио (реверберацию, компрессор), или к видео (фильтры ч/б, сепия и т.д.). В этой статье рассказывается о том, как это сделать.</p>
+</div>
+
+<div class="note">
+<p><strong>Далее</strong> ещё в процессе перевода.</p>
+</div>
+
+<h2 id="Обработка_видео">Обработка видео</h2>
+
+<p>Иногда удобно перенимать индивидуально размеры кадра в пикселях с каждого конкретного видео.</p>
+
+<h3 id="Видео_и_холст_canvas">Видео и холст (canvas)</h3>
+
+<p>Элемент "холст" ({{htmlelement("canvas")}}) — представляет поверхность (область) для рисования графикой на веб-странице. Это очень мощный инструмент, поэтому он может использоваться совместно с видео.</p>
+
+<p>Обычно это происходит следующим образом:</p>
+
+<ol>
+ <li>Write a frame from the {{htmlelement("video")}} element to an intermediary {{htmlelement("canvas")}} element.</li>
+ <li>Read the data from the intermediary <code>&lt;canvas&gt;</code> element and manipulate it.</li>
+ <li>Write the manipulated data to your "display" <code>&lt;canvas&gt;</code>.</li>
+ <li>Pause and repeat.</li>
+</ol>
+
+<p>For example, let's process a video to display it in greyscale. In this case, we'll show both the source video and the output greyscale frames. Ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add <code>display: none</code> to the style for the <code>&lt;video&gt;</code> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>We can set up our video player and <code>&lt;canvas&gt;</code> element like this:</p>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+
+&lt;canvas id="my-canvas" width="480" height="270"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>This code handles altering the frames.</p>
+
+<pre class="brush: js notranslate">var processor = {
+  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    var self = this;
+    setTimeout(function () {
+      self.timerCallback();
+    }, 16); // roughly 60 frames per second
+  },
+
+  doLoad: function() {
+    this.video = document.getElementById("my-video");
+    this.c1 = document.getElementById("my-canvas");
+    this.ctx1 = this.c1.getContext("2d");
+    var self = this;
+
+    this.video.addEventListener("play", function() {
+      self.width = self.video.width;
+      self.height = self.video.height;
+      self.timerCallback();
+    }, false);
+  },
+
+  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    var l = frame.data.length / 4;
+
+    for (var i = 0; i &lt; l; i++) {
+      var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
+
+      frame.data[i * 4 + 0] = grey;
+      frame.data[i * 4 + 1] = grey;
+      frame.data[i * 4 + 2] = grey;
+    }
+    this.ctx1.putImageData(frame, 0, 0);
+
+    return;
+  }
+};  </pre>
+
+<p>Когда страница загрузилась осуществите вызов:</p>
+
+<pre class="brush: js notranslate">processor.doLoad()</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Video_and_canvas", '100%', 580)}}</p>
+
+<p>This is a pretty simple example showing how to manipulate video frames using a canvas. For efficiency, you should consider using {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} instead of <code>setTimeout()</code> when running on browsers that support it.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Due to potential security issues if your video is on a different domain than your code, you'll need to enable <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS (Cross Origin Resource Sharing)</a> on your video server.</p>
+</div>
+
+<h3 id="Видео_и_WebGL">Видео и WebGL</h3>
+
+<p><a href="/en-US/docs/Web/WebGL">WebGL</a> is a powerful API that uses canvas to draw hardware-accelerated 3D or 2D scenes. You can combine WebGL and the {{htmlelement("video")}} element to create video textures, which means you can put video inside 3D scenes.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: You can find the <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">source code of this demo on GitHub</a> (<a href="https://mdn.github.io/webgl-examples/tutorial/sample8/">see it live</a> also).</p>
+</div>
+
+<h3 id="Скорость_воспроизведения">Скорость воспроизведения</h3>
+
+<p>We can also adjust the rate that audio and video plays at using an attribute of the {{htmlelement("audio")}} and {{htmlelement("video")}} element called {{domxref("HTMLMediaElement.playbackRate", "playbackRate")}}. <code>playbackRate</code> is a number that represents a multiple to be applied to the rate of playback, for example 0.5 represents half speed while 2 represents double speed.</p>
+
+<p>Note that the <code>playbackRate</code> property works with both <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code>, but in both cases, it changes the playback speed but <em>not</em> the pitch. To<span style=""> manipulate the audio's pitch you need to use the Web Audio API. See the {{domxref("AudioBufferSourceNode.playbackRate")}} property.</span></p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls
+       src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"&gt;
+&lt;/video&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setPlaybackRate() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setPlaybackRate();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setPlaybackRate);
+window.addEventListener('load', setPlaybackRate);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Попробуйте запустить <a href="http://jsbin.com/qomuvefu/2/edit">этот пример</a>.</p>
+</div>
+
+<h2 id="Обработка_аудио">Обработка аудио</h2>
+
+<p><code>playbackRate</code> aside, to manipulate audio you'll typically use the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<h3 id="Выбор_источника_аудио">Выбор источника аудио</h3>
+
+<p>The Web Audio API can receive audio from a variety of sources, then process it and send it back out to an {{domxref("AudioDestinationNode")}} representing the output device to which the sound is sent after processing.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If the audio source is...</th>
+   <th scope="col">Use this Web Audio node type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>An audio track from an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element</td>
+   <td>{{domxref("MediaElementAudioSourceNode")}}</td>
+  </tr>
+  <tr>
+   <td>A plain raw audio data buffer in memory</td>
+   <td>{{domxref("AudioBufferSourceNode")}}</td>
+  </tr>
+  <tr>
+   <td>An oscillator generating a sine wave or other computed waveform</td>
+   <td>{{domxref("OscillatorNode")}}</td>
+  </tr>
+  <tr>
+   <td>An audio track from <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> (such as the microphone input you can get using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</td>
+   <td>{{domxref("MediaStreamAudioSourceNode")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Аудио_фильтры">Аудио фильтры</h3>
+
+<p>The Web Audio API has a lot of different filter/effects that can be applied to audio using the {{domxref("BiquadFilterNode")}}, for example.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls
+       src="myvideo.mp4" type="video/mp4"&gt;
+&lt;/video&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js notranslate">var context = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+// Configure filter
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;&lt;/textarea&gt;</pre>
+
+<pre class="brush: js notranslate">var context     = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter      = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setFilter() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setFilter();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setFilter);
+window.addEventListener('load', setFilter);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: unless you have <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> enabled, to avoid security issues your video should be on the same domain as your code.</p>
+</div>
+
+<h4 id="Типичные_для_аудио_фильтры">Типичные для аудио фильтры</h4>
+
+<p>These are some of the common types of audio filter you can apply:</p>
+
+<ul>
+ <li>Low Pass: Allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff.</li>
+ <li>High Pass: Allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff.</li>
+ <li>Band Pass: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range.</li>
+ <li>Low Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies.</li>
+ <li>High Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies.</li>
+ <li>Peaking: Allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.</li>
+ <li>Notch: Allows all frequencies through, except for a set of frequencies.</li>
+ <li>Allpass: Allows all frequencies through, but changes the phase relationship between the various frequencies.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Более подробно смотрите здесь: {{domxref("BiquadFilterNode")}}</p>
+</div>
+
+<h3 id="Convolutions_and_impulses">Convolutions and impulses</h3>
+
+<p>It's also possible to apply impulse responses to audio using the {{domxref("ConvolverNode")}}. An <strong>impulse response</strong> is the sound created after a brief impulse of sound (like a hand clap). An impulse response will signify the environment in which the impulse was created (for example, an echo created by clapping your hands in a tunnel).</p>
+
+<h4 id="Пример">Пример</h4>
+
+<pre class="brush: js notranslate">var convolver = context.createConvolver();
+convolver.buffer = this.impulseResponseBuffer;
+// Connect the graph.
+source.connect(convolver);
+convolver.connect(context.destination);
+</pre>
+
+<p>See this <a href="https://codepen.io/a2sheppy/pen/JjPgVYL">Codepen</a> for an applied (but very, very silly; like, little kids will giggle kind of silly) example.</p>
+
+<h3 id="Spatial_audio">Spatial audio</h3>
+
+<p>We can also position audio using a <strong>panner node</strong>. A panner node—{{domxref("PannerNode")}}—lets us define a source cone as well as positional and directional elements, all in 3D space as defined using 3D cartesian coordinates.</p>
+
+<h4 id="Пример_2">Пример</h4>
+
+<pre class="brush: js notranslate">var panner = context.createPanner();
+panner.coneOuterGain = 0.2;
+panner.coneOuterAngle = 120;
+panner.coneInnerAngle = 0;
+
+panner.connect(context.destination);
+source.connect(panner);
+source.start(0);
+
+// Position the listener at the origin.
+context.listener.setPosition(0, 0, 0);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: You can find an <a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">example on our GitHub repo</a>sitory (<a href="https://mdn.github.io/webaudio-examples/panner-node/">see it live</a> also).</p>
+</div>
+
+<h2 id="Кодеки_JavaScript">Кодеки JavaScript</h2>
+
+<p>It's also possible to manipulate audio at a low level using JavaScript. This can be useful should you want to create audio codecs.</p>
+
+<p>Libraries currently exist for the following formats :</p>
+
+<ul>
+ <li>AAC: <a href="https://github.com/audiocogs/aac.js">AAC.js</a></li>
+ <li>ALAC: <a href="https://github.com/audiocogs/alac.js">alac.js</a></li>
+ <li>FLAC: <a href="https://github.com/audiocogs/flac.js">flac.js</a></li>
+ <li>MP3: <a href="https://github.com/audiocogs/mp3.js">mp3.js</a></li>
+ <li>Opus: <a href="https://github.com/audiocogs/opus.js">Opus.js</a></li>
+ <li>Vorbis: <a href="https://github.com/audiocogs/vorbis.js">vorbis.js</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: At Audiocogs, you can <a href="http://audiocogs.org/codecs/">Try out a few demos</a>; Audiocogs also provides a framework, <a href="http://audiocogs.org/codecs/">Aurora.js</a>, which is intended to help you author your own codecs in JavaScript.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/">Various Web Audio API (and other) examples</a></li>
+ <li><a href="https://github.com/chrisdavidmills/threejs-video-cube">THREE.js Video Cube example</a></li>
+ <li><a href="http://chromium.googlecode.com/svn/trunk/samples/audio/convolution-effects.html">Convolution Effects in Real-Time</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Manipulating_video_using_canvas">Manipulating Video Using Canvas</a></li>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="/en-US/docs/Web/WebGL/Animating_textures_in_WebGL#Using_the_video_frames_as_a_texture">Using Video frames as a WebGL Texture</a> (You can also the <a href="http://threejs.org">THREE.js</a> WebGL library (and others) to <a href="http://stemkoski.github.io/Three.js/Video.html">achieve this effect</a>)</li>
+ <li><a href="/en-US/docs/Web/WebGL/Animating_textures_in_WebGL">Animating Textures in WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-room">Developing Game Audio with the Web Audio API (Room effects and filters)</a></li>
+</ul>
+
+<h3 id="Reference">Reference</h3>
+
+<ul>
+ <li>The {{htmlelement("audio")}} and {{htmlelement("video")}} elements</li>
+ <li>The {{domxref("HTMLMediaElement")}} API</li>
+ <li>The {{htmlelement("canvas")}} element</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioContext">AudioContext</a></li>
+ <li>More info on <a href="/en-US/docs/Web/API/AudioContext.createPanner">Spatial Audio</a></li>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Fundamentals/")}}</div>
+
+<div></div>
diff --git a/files/ru/web/guide/css/block_formatting_context/index.html b/files/ru/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..599d22764b
--- /dev/null
+++ b/files/ru/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,142 @@
+---
+title: Блочный контекст форматирования
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - CSS Basic Concepts
+  - Для начинающих
+  - Основы
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong>Блочный контекст форматирования </strong>— часть механизма отображения веб-страницы в CSS. Это та область, в которой происходит расположение блочных элементов, и в котором плавающие элементы взаимодействуют с другими элементами.</p>
+
+<p>Блочный контекст форматирования создаёт один из следующих способов (методов):</p>
+
+<ul>
+ <li>корневой элемент документа (<code>&lt;html&gt;</code>).</li>
+ <li>плавающие элементы (элементы, у которых {{ cssxref("float") }} не равно <code>none</code>)</li>
+ <li>абсолютно позиционированные элементы (элементы, значение  {{ cssxref("position") }} которых либо <code>absolute</code>, либо <code>fixed</code>)</li>
+ <li>«строчные блоки» (элементы с {{cssxref("display")}}<code>: inline-block</code>)</li>
+ <li>ячейки таблицы (элементы с {{ cssxref("display")}}<code>: table-cell</code>, являющимся значением по умолчанию для ячеек таблицы в HTML)</li>
+ <li>заголовки таблицы (элементы с {{ cssxref("display")}}<code>: table-caption</code>, являющимся значением по умолчанию для заголовков таблицы в HTML)</li>
+ <li>анонимные ячейки таблицы, неявно создаваемые элементами с {{ cssxref("display") }}<code>: table</code>, <code>table-row</code>, <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> (значения по умолчанию для таблиц, строк таблиц, «шапок», «подвалов» и тел таблиц в HTML соответственно) либо <code>inline-table</code></li>
+ <li>элементы, у которых значение свойства {{ cssxref("overflow") }} отличается от <code>visible</code></li>
+ <li>{{ cssxref("display") }}<code>: <a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code></li>
+ <li>элементы с {{ cssxref("contain") }}<code>: layout</code>, <code>content</code> или <code>strict</code></li>
+ <li>флекс-элементы (непосредственные потомки элемента с {{ cssxref("display") }}<code>: flex</code> или <code>inline-flex</code>)</li>
+ <li>грид-элементы (непосредственные потомки элемента с {{ cssxref("display") }}<code>: grid</code> или <code>inline-grid</code>)</li>
+ <li>многоколоночные контейнеры (элементы, у которых {{ cssxref("column-count") }} или {{ cssxref("column-width") }}  не равно <code>auto</code>, включая элементы с <code>column-count: 1</code>)</li>
+ <li>{{ cssxref("column-span") }}<code>: all</code> должно всегда создавать новый блочный контекст форматирования, даже если элемент с <code>column-span: all</code> не находится в многоголоночном контейнере (<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">изменение в спецификации</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">баг Chrome</a>).</li>
+</ul>
+
+<p>Блочный контекст форматирования применяется ко всему содержимому того элемента, который его создал.</p>
+
+<p>Блочные контексты форматирования важны для размещения плавающих элементов (см. {{ cssxref("float") }}) и отмены их обтекания (см.{{ cssxref("clear") }}) . Правила размещения плавающих элементов и сброса обтекания применяются только к элементам внутри одного и того же блочного контекста форматирования. Плавающие элементы не влияют на размещение содержимого внутри других блочных контекстов форматирования, и отмена обтекания распространяется только на плавающие элементы из того же самого контекста форматирования. <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> тоже происходит только между блоками из одного и того же блочного контекста форматирования.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Как_сделать_плавающему_контенту_и_соседнему_с_ним_контенту_одинаковую_высоту">Как сделать плавающему контенту и соседнему с ним контенту одинаковую высоту</h3>
+
+<p>Давайте рассмотрим пару примеров, чтобы рассмотреть эффект от создания нового блочного контекста форматирования.</p>
+
+<p>В примере ниже мы имеем плавающий элемент внутри <code>&lt;</code><code>div&gt;</code> с заданным <code>border</code>. Содержимое этого <code>&lt;div&gt;</code> обтекает плавающий элемент. Так как содержимое <code>float</code> выше, чем остальное содержимое, обтекающее его, <code>border</code> элемента <code>div</code> теперь проходит сквозь <code>float</code>. Как объясняется в руководстве <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>, плавающий элемент был исключен из потока элементов, так что фон и граница <code>div</code> включает только его содержимое, но не элемент <code>float</code>. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<h3 id="Использование_overflow_auto">Использование <code>overflow: auto;</code></h3>
+
+<p>Создадим новый блочный контекст форматирования, который будет содержать в себе плавающий элемент. Раньше обычным способом сделать это было установить <code>overflow: auto</code> или другое значение, отличное от значения по умолчанию <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>Задание <code>overflow: auto</code> создало новый блочный контекст форматирования, включающий <code>float</code>. Теперь <code>div</code> стал мини-слоем внутри нашего слоя. Любые дочерние элементы войдут в него.</p>
+
+<p>Проблема использования <code>overflow</code> для создания нового блочного контекста форматирования в том, что свойство <code>overflow</code> предназначено для сообщения браузеру как обращаться с переполнением содержимого. Существуют случаи, в которых оно вызовет появление нежелательных скролл-баров или обрезание теней, когда вы используете это свойство только для того, чтобы создать блочный контекст форматирования. Кроме того, оно потенциально делает код менее понятным для следующего разработчика, так как не всегда очевидно, почему использовано <code>overflow</code> в данном случае. Если вы используете этот подход, хорошей идеей будет прокомментировать код, чтобы объяснить это.</p>
+
+<h3 id="Использование_display_flow-root">Использование <code>display: flow-root</code></h3>
+
+<div id="flowroot">
+<p>Одно из новых значений свойства <code>display</code>  позволяет нам создавать новый блочный контекст форматирования без всяких потенциально проблемных побочных эффектов. Использование <code>display: flow-root</code> как свойство содержащего блока, создаёт новый блочный контекст форматирования.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>float<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I am a floated box!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>I am content inside the container.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+</div>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.box</span></span> <span class="punctuation token">{</span>
+    <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">224</span><span class="punctuation token">,</span> <span class="number token">206</span><span class="punctuation token">,</span> <span class="number token">247</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span> solid rebeccapurple<span class="punctuation token">;</span>
+    <span class="property token">display</span><span class="punctuation token">:</span> flow-root
+<span class="punctuation token">}</span>
+<span class="selector token"><span class="class token">.float</span></span> <span class="punctuation token">{</span>
+    <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+    <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span><span class="token unit">px</span><span class="punctuation token">;</span>
+    <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span>
+    <span class="property token">background-color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+    <span class="property token">border</span><span class="punctuation token">:</span><span class="number token">1</span><span class="token unit">px</span> solid black<span class="punctuation token">;</span>
+    <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div id="flowroot">
+<p>{{EmbedLiveSample("flowroot", 200, 200)}}</p>
+</div>
+
+<p>С помощью <code>display: flow-root;</code> применённом на элементе <code>&lt;div&gt;</code>, всё внутри этого контейнера будет учавствовать в едином блочном контексте форматирования этого контейнера, и плавающие элементы не будут торчать из нижней части контейнера.</p>
+
+<p>Задание значения <code>flow-root</code> имеет смысл тогда, когда Вы понимаете, что Вы создаёте что-то, что будет действовать так же, как действует корневой <code>root</code> элемент (<code>&lt;html&gt;</code> в браузерах) в том плане, что он создаёт новый контекст для компоновки потока внутри него.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong>  <code>display: flow-root;</code> <a href="https://caniuse.com/#search=flow-root">не поддерживается</a> в Safari.</p>
+</div>
+
+<h3 id="Схлопывание_границ_margin">Схлопывание границ margin</h3>
+
+<p>Создание нового блочного контекста форматирования предотвращает эффект <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопывания границ</a> между двумя соседними div:</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red-outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red-inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>red inner<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.blue</span>, <span class="class token">.red-inner</span></span> <span class="punctuation token">{</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.blue</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.red-outer</span></span> <span class="punctuation token">{</span>
+  <span class="property token">overflow</span><span class="punctuation token">:</span> hidden<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample("Margin_collapsing", 120, 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
+ <li><a class="external" href="https://drafts.csswg.org/css-display/#block-formatting-context">CSS Display Level 3</a></li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">Статьи по теме</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html
new file mode 100644
index 0000000000..248c935d52
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html
@@ -0,0 +1,151 @@
+---
+title: Каскадность и наследование
+slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Web
+  - Веб
+  - Новичку
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Как работает CSS")}} Это четвертый раздел руководства <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.</p>
+
+<h2 id="Информация_Каскадность_и_наследование">Информация: Каскадность и наследование</h2>
+
+<p>Окончательный стиль элемента можно указать во многих местах, которые комплексно взаимодействуют между собой. Эти комплексные взаимодействия делают CSS мощным, но в то же время, иногда сбивают с толку и порождают сложности при отладке. </p>
+
+<p>Три основных источника информации о стилях образовывают <em>каскад</em>. К ним относятся следующие:</p>
+
+<ul>
+ <li>Стили разметки браузера по умолчанию.</li>
+ <li>Стили, указанные пользователем при чтении документа.</li>
+ <li>Стили, связанные с документом их автором. Их можно указывать в трех местах:</li>
+</ul>
+
+<ol>
+ <li>Во внешнем файле: в этом учебном руководстве обсуждается преимущественно этот метод указания стилей.</li>
+ <li>В начале документа (раздел заголовок документа): используйте этот метод только для стилей в пределах этой страницы.</li>
+ <li>Для конкретного элемента в теле документа: это наименее поддерживаемый метод, но может быть использован для тестирования.</li>
+</ol>
+
+<p>Стиль пользователя модифицирует стиль браузера по умолчанию. Стиль документа, указанный его автором, изменяет стиль ещё в некоторой мере. В этом обучающем руководстве, вы являетесь автором шаблонного документа, и только вы работаете с авторскими таблицами стилей.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Когда вы читаете этот документ в браузере, часть стилей происходит от стилей для HTML по умолчанию вашего браузера.</p>
+
+<p>Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле <code>userContent.css</code> в профиле браузера.</p>
+
+<p>Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.</p>
+</div>
+
+<p>Когда вы открываете шаблон документа в браузере, элементы {{ HTMLElement("strong") }} имеют более жирный шрифт по сравнению с остальным текстом. Это следует из настроек HTML стилей браузера по умолчанию.</p>
+
+<p>Элемент {{ HTMLElement("strong") }} красного цвета. Это следует из настроек вашего шаблона таблиц стилей.</p>
+
+<p>Элементы {{ HTMLElement("strong") }} также наследуют большую часть стилей элемента {{ HTMLElement("p") }} поскольку они являются дочерними. Таким же образом элемент {{ HTMLElement("p") }} наследует большую часть стиля элемента {{ HTMLElement("body") }}.</p>
+
+<p>Для стилей в каскаде, авторские таблицы стилей имеют приоритет перед стилями для режимов чтения браузера. Последние, в свою очередь, имеют приоритет перед настройками браузера по умолчанию.</p>
+
+<p>Для наследуемых стилей, собственный стиль дочернего узла имеет приоритет над стилем, унаследованным от родительского узла.</p>
+
+<p>These are not the only priorities that apply. A later page in this tutorial will explain more.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>CSS также предоставляет способ переопределения стиля в авторском документе для читателя с помощью ключевого слова <code>!important</code>.</p>
+
+<p>Это означает, что как автор документа, вы не всегда можете точно предсказать, что ваши читатели будут видеть в своём браузере.</p>
+
+<p>Если вы хотите знать все детали каскадирования и наследования, ознакомьтесь с документом <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> в спецификации CSS.</p>
+</div>
+
+<h2 id="К_действию_Использование_наследования">К действию: Использование наследования</h2>
+
+<ol>
+ <li>Откройте CSS-файл примера.</li>
+ <li>Добавьте в файл строку кода, представленную ниже. Не имеет особого значения, в какой части CSS-документа вы расположите эту строку. Тем не менее, добавить его в самом верху будет логично, поскольку в документе элемент {{ HTMLElement("p") }} является родительским по отношению к элементу {{ HTMLElement("strong") }} :
+  <pre>p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные буквы. Элемент {{ HTMLElement("strong") }} унаследовал подчеркнутый стиль от родительского элемента {{ HTMLElement("p") }} .<br>
+
+  <p>Обратите внимание, что элементы {{ HTMLElement("strong") }} всё ещё красные. Красный цвет является их собственным стилем, поэтому имеет приоритет перед синим цветом, заданным для родительского элемента {{ HTMLElement("p") }} . </p>
+ </li>
+</ol>
+
+<h2 id="Before" name="Before">До</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+&lt;strong&gt;C&lt;/strong&gt;ascading
+&lt;strong&gt;S&lt;/strong&gt;tyle
+&lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">strong {color:red}
+</pre>
+
+<p>{{ EmbedLiveSample('Before') }}</p>
+
+<h2 id="After" name="After">После</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+&lt;strong&gt;C&lt;/strong&gt;ascading
+&lt;strong&gt;S&lt;/strong&gt;tyle
+&lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline}
+strong {color:red}</pre>
+
+<p>{{ EmbedLiveSample('After') }}</p>
+
+<p> </p>
+
+<div class="tuto_example">
+<div class="tuto_type">Задание</div>
+Измените таблицу стилей таким образом, чтобы были подчеркнуты только красные буквы:
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Возможное решение</div>
+
+<p>Переместите объявление подчеркивания из правила для {{ HTMLElement("p") }} в правило для {{ HTMLElement("strong") }}. В результате файл будет выглядеть следующим образом:</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: red; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть вариант решения.</a></div>
+
+<p> </p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Selectors", "Селекторы")}}Ваш пример таблицы стилей определяет стили для тегов &lt;p&gt; и &lt;STRONG&gt;, изменяя стиль соответствующих элементов по всему документу. В следующем разделе описывается, как задать стиль более <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors">избирательными методами</a>.</p>
diff --git a/files/ru/web/guide/css/getting_started/color/index.html b/files/ru/web/guide/css/getting_started/color/index.html
new file mode 100644
index 0000000000..1da796858f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/color/index.html
@@ -0,0 +1,344 @@
+---
+title: Color
+slug: Web/Guide/CSS/Getting_started/Color
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}<span class="seoSummary">This is the 8th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it explains how you can specify color in CSS. In your sample stylesheet, you introduce background colors.</span></p>
+
+<h2 class="clearLeft" id="Information_Color">Information: Color</h2>
+
+<p>In this tutorial so far, you have used a limited number of named colors. CSS2 supports 17 named colors in all. Some of the names might not be what you expect:</p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primaries</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secondaries</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="tuto_details">
+<div class="tuto_type">Details</div>
+
+<p>Your browser might support many more named colors, like:</p>
+
+<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td>dodgerblue</td>
+   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+   <td>peachpuff</td>
+   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+   <td>tan</td>
+   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+   <td>firebrick</td>
+   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+   <td>aquamarine</td>
+   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For details of this extended list, see: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> in the CSS 3 Color Module. Beware of using color names that your reader's browsers might not support.</p>
+</div>
+
+<p>For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three <em>hexadecimal</em> digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ For the full palette, specify two hexadecimal digits for each component:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<p>With a little practice, you can adjust the three-digit colors manually for most purposes:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Start with pure red:</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>To make it paler, add some green and blue:</td>
+   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+   <td><code>#f77</code></td>
+  </tr>
+  <tr>
+   <td>To make it more orange, add a little extra green:</td>
+   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+   <td><code>#fa7</code></td>
+  </tr>
+  <tr>
+   <td>To darken it, reduce all its components:</td>
+   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+   <td><code>#c74</code></td>
+  </tr>
+  <tr>
+   <td>To reduce its saturation, make its components more equal:</td>
+   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+   <td><code>#c98</code></td>
+  </tr>
+  <tr>
+   <td>If you make them exactly equal, you get gray:</td>
+   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+   <td><code>#ccc</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For a pastel shade like pale blue:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Start with pure white:</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+  <tr>
+   <td>Reduce the other components a little:</td>
+   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+   <td><code>#eef</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">More details</div>
+
+<p>You can also specify a color using decimal RGB values in the range 0 – 255, or percentages.</p>
+
+<p>For example, this is maroon (dark red):</p>
+
+<pre class="brush:css">rgb(128, 0, 0)
+</pre>
+
+<p>For full details of how to specify colors, see: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in the CSS Specification.</p>
+
+<p>For information on matching system colors like Menu and ThreeDFace, see: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in the CSS Specification.</p>
+</div>
+
+<h3 id="Color_properties">Color properties</h3>
+
+<p>You have already used the {{ cssxref("color") }} property on text.</p>
+
+<p>You can also use the {{ cssxref("background-color") }} property to change elements' backgrounds.</p>
+
+<p>Backgrounds can be set to <code>transparent</code> to explicitly remove any color, revealing the parent element's background.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<p>The <strong>Example</strong> boxes in this tutorial use this pale yellow background:</p>
+
+<pre class="brush:css">background-color: #fffff4;
+</pre>
+
+<p>The <strong>More details</strong> boxes use this pale gray:</p>
+
+<pre class="brush:css">background-color: #f4f4f4;
+</pre>
+</div>
+
+<p> </p>
+
+<h2 id="Action_Using_color_codes">Action: Using color codes</h2>
+
+<h2 id="Color_page" name="Color_page">Color page</h2>
+
+<ol>
+ <li>Edit your CSS file.</li>
+ <li>Make the change shown down here, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)</li>
+ <li>
+  <h3 id="HTML_Content">HTML Content</h3>
+
+  <pre class="brush: html">&lt;p id = "first"&gt; &lt;strong&gt;C&lt;/strong&gt;ascading &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets&lt;/p&gt;
+&lt;p&gt; &lt;strong&gt;C&lt;/strong&gt;ascading &lt;strong&gt;S&lt;/strong&gt;tyle &lt;strong&gt;S&lt;/strong&gt;heets&lt;/p&gt;
+</pre>
+
+  <h3 id="CSS_Content">CSS Content</h3>
+
+  <pre class="brush: css">/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
+/* paragraphs */
+p {
+  color: blue;
+}
+#first {
+  font-style: italic;
+}
+
+/* initial letters */
+strong {
+  background-color: #ddf;
+  color: red;
+  font: 200% serif;
+}
+
+.spinach {
+  color: green;
+  background-color: #ddf;
+}
+
+</pre>
+ </li>
+ <li>Save the file and refresh your browser to see the result.</li>
+ <li>The result should be like this:</li>
+</ol>
+
+<p>{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p>
+
+<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>The following values are reasonable approximations of the named colors:</p>
+
+<pre class="brush: css">strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p>
diff --git a/files/ru/web/guide/css/getting_started/how_css_works/index.html b/files/ru/web/guide/css/getting_started/how_css_works/index.html
new file mode 100644
index 0000000000..067a4a8fe0
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/how_css_works/index.html
@@ -0,0 +1,121 @@
+---
+title: Как работает CSS
+slug: Web/Guide/CSS/Getting_started/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?") }} Это третья статья руководства по <span class="seoSummary"><a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (</span>Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.</p>
+
+<h2 class="clearLeft" id="Информация_Как_работает_CSS">Информация: Как работает CSS</h2>
+
+<p>Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:</p>
+
+<ol>
+ <li>Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.</li>
+ <li>Браузер отображает содержимое DOM.</li>
+</ol>
+
+<p>Язык разметки использует <em>элементы</em> для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '&lt;' и заканчивающиеся '&gt;'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '&lt;' и '&gt;'. Для закрывающего тега, поместите '<code>/</code>'  между '<code>&lt;</code>', и именем элемента.</p>
+
+<p>В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где '/' располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.</p>
+
+<p>DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится <em>узлом</em> в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).</p>
+
+<p>Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<div class="tuto_type"> </div>
+В данном примере, тег <code>&lt;p&gt;</code> и его закрывающий тег <code>&lt;/p&gt;</code> создают контейнер:
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<p><strong>Живой пример</strong></p>
+
+<p>{{ EmbedLiveSample('Информация_Как_работает_CSS', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p>
+
+<p>В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги <small>STRONG</small>  и узлы текста. Теги <small>STRONG, </small> в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:</p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<h2 id="К_действию_Анализ_DOM">К действию: Анализ DOM</h2>
+
+<h3 id="Использование_DOM_Inspector">Использование DOM Inspector</h3>
+
+<p>Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).</p>
+
+<ol>
+ <li>Используйте браузер Mozilla, чтобы открыть свой HTML-документ.</li>
+ <li>Из строки меню браузера выберите <strong>Инструменты &gt; DOM инспектор</strong>, или <strong>Инструменты &gt; Веб-разработка &gt; Инспектор</strong>.
+  <div class="tuto_details">
+  <div class="tuto_type">Подробнее</div>
+
+  <p>Если в вашем браузере Mozilla не установлен DOMi, вы можете <a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/6622/" title="https://addons.mozilla.org/ru/firefox/addon/6622/">установить его с сайта дополнений</a> и перезапустить браузер. Затем возвращайтесь к этому руководству.</p>
+
+  <p>Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.</p>
+  </div>
+ </li>
+ <li>В DOMi разверните узлы вашего документа, нажав на их стрелки.
+  <p><strong>Замечание: </strong> Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.</p>
+
+  <p>Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:</p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p>При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.</p>
+
+  <p>При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях - лишь часть информации, которую там можно просмотреть.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Задача</div>
+
+<p>В DOMi, кликните на узле <small>STRONG</small>.</p>
+
+<p>Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задачи.</a></div>
+
+<h3 id="Использование_Рентген-очков">Использование Рентген-очков</h3>
+
+<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Рентген-очки </a>показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.</p>
+
+<ol>
+ <li>Перейдите на домашнюю страницу <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">X-Ray Goggles</a>.</li>
+ <li>Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.</li>
+ <li>Откройте HTML-документ.</li>
+ <li>Запустите Рентген-очки, кликнув по появившейся закладке.</li>
+ <li>Передвигайте курсор мыши по документу для просмотра элементов в документе.</li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Каскадность и наследование") }}Если вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">следующей странице</a> объясняется больше об этих взаимодействиях.</p>
diff --git a/files/ru/web/guide/css/getting_started/index.html b/files/ru/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..047fa6ea8f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS для начинающих
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Needs
+  - NeedsBeginnerUpdate
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+  - Web
+  - Новичку
+  - Руководство
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксом) <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p>
+
+<p>Данное руководство создано для новичков и всех, кто хотел бы освежить свои знания основ CSS. Если у вас уже есть опыт работы с CSS, на главной странице вы можете найти <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">список</a> обучающих ресурсов, подходящих для вашего уровня.</p>
+
+<nav class="fancyTOC"><a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Глава «Что такое CSS» руководства по CSS">Что такое CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Глава «Зачем нужен CSS» руководства по CSS">Зачем нужен CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Глава «Как работает CSS» руководства по CSS">Как работает CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Глава «Каскадирование и наследование» руководства по CSS">Каскадность и наследование</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Глава «Селекторы» руководства по CSS">Селекторы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Глава «Читаемость CSS» руководства по CSS">Читаемость CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">стили текста</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Color" title="Глава «Цвета» руководства по CSS">Цвета</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">контент</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Lists" title="Глава «Списки» руководства по CSS">Списки</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">блок</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">макет</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Tables" title="Глава «Таблицы» руководства по CSS">Таблицы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">медиа</a></nav>
+
+<h2 id="Что_вам_нужно_для_того_чтобы_начать">Что вам нужно для того, чтобы начать</h2>
+
+<ul>
+ <li>Текстовый редактор</li>
+ <li>Современный браузер</li>
+ <li>Опыт работы с текстовым редактором и браузером</li>
+</ul>
+
+<p>В данном руководстве вам будут встречаться упражнения, которые вам предлагается выполнить для лучшего понимания материала. Их выполнение не является обязательным: вы можете просто читать материал и смотреть на иллюстрации.</p>
+
+<p><strong>Важно:</strong> Руководство включает в себя материалы по работе с цветом в CSS. Эти материалы будет легче пройти, если у вас цветной монитор и нормальное цветовое зрение.</p>
+
+<h2 id="Как_пользоваться_руководством">Как пользоваться руководством</h2>
+
+<p>Наилучшим вариантом будет внимательное и постепенное чтение разделов в строгой последовательности. Если вы пропустите какой-то раздел, вам может оказаться что-то непонятно в следующих главах.</p>
+
+<h3 id="Часть_I_Основы_CSS">Часть I: Основы CSS</h3>
+
+<p>На каждой странице, используйте секцию <em>Информация</em>, чтобы понять, как работает CSS. Используйте секцию <em>К действию</em>, чтобы попробовать использовать CSS на вашем компьютере.</p>
+
+<p>Чтобы проверить усвоенные знания, вам будет полезно решить задачу в конце каждой страницы. Верные решения задач вы всегда можете найти под их описанием в виде ссылки - таким образом, вы не сможете увидеть их случайно.</p>
+
+<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведенные там ссылки.</p>
+
+<h3 id="Часть_II_Возможности_CSS">Часть II: Возможности CSS</h3>
+
+<p>Вторая часть руководства содержит примеры, которые продемонстрируют вам возможности CSS применительно к другим web-технологиям и технологиям Mozilla. </p>
+
+<ol>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="ru/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="ru/CSS/Getting_Started/SVG_graphics">SVG графика</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XML_data" title="ru/CSS/Getting_Started/XML_data">XML данные</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="ru/CSS/Getting_Started/XBL_bindings">XBL байдинг bindings</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Пользовательские интерфейсы XUL</a></li>
+</ol>
diff --git a/files/ru/web/guide/css/getting_started/readable_css/index.html b/files/ru/web/guide/css/getting_started/readable_css/index.html
new file mode 100644
index 0000000000..1720f6261d
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/readable_css/index.html
@@ -0,0 +1,165 @@
+---
+title: Чистый СSS код
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p>
+
+<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2>
+
+<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p>
+
+<h3 id="Пустое_пространство">Пустое пространство</h3>
+
+<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p>
+
+<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p>
+
+<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p>
+
+<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Примеры</div>
+
+<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p>
+
+<h3 id="Комментарии">Комментарии</h3>
+
+<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p>
+
+<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p>
+
+<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="Группировка_селекторов">Группировка селекторов</h3>
+
+<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p>
+
+<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p>
+
+<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p>
+
+<pre class="brush: css">/* цвет для заголовков */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2>
+
+<ol>
+ <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li>
+ <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">Задание</div>
+
+<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Существует более чем один способ сделать это).</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:
+
+<pre class="brush: css">/*.carrot {
+  color: orange;
+}*/</pre>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p>
diff --git a/files/ru/web/guide/css/getting_started/selectors/index.html b/files/ru/web/guide/css/getting_started/selectors/index.html
new file mode 100644
index 0000000000..7af11a31e1
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/selectors/index.html
@@ -0,0 +1,433 @@
+---
+title: Selectors
+slug: Web/Guide/CSS/Getting_started/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}Это пятый раздел руководства <a href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты. <span class="seoSummary"> </span></p>
+
+<p>Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.</p>
+
+<h2 class="clearLeft" id="Информация_Селекторы">Информация: Селекторы</h2>
+
+<p>Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p>В терминологии CSS эта строка полностью является <em>правилом CSS</em>. Это правило начинается со <code>strong</code>, что и называется <em>селектором</em> <em>CSS</em>. Селектор выбирает, к каким элементам DOM применяется правило.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробности</div>
+
+<p>Часть внутри фигурных скобок называется <em>объявлением</em>.</p>
+
+<p>Ключевое слово <code>color</code> - <em>свойство</em>, а <code>red</code> - <em>значение</em>.</p>
+
+<p>Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.</p>
+
+<p>Этот учебник ссылается на селектор типа <code>strong</code> как на селектор <em>тега</em>. Спецификация CSS ссылается на него как на селектор <em>типа</em>.</p>
+</div>
+
+<p>На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.</p>
+
+<p>В дополнение к именам тегов, вы можете использовать в селекторах значения атрибутов. Это позволит вашим правилам быть более избирательными.</p>
+
+<p>Два атрибута имеют особый статус в CSS. Это <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> и <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Селекторы_классов">Селекторы классов</h3>
+
+<p>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.</p>
+
+<p>В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.</p>
+
+<h3 id="Селекторы_ID">Селекторы ID</h3>
+
+<p><code>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.</code></p>
+
+<p>В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+Этот HTML тэг имеет оба элемента, атрибут <code>class</code> и <code>id</code>:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p>Значение идентификатора <strong>id</strong>, <code>principal</code>, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя <strong>class</strong> со значением <code>key</code>.</p>
+
+<p>Это правило делает все классы(class) со значением<code>key</code> зелёными. (Они даже не должны быть все элементами {{ HTMLElement("p") }}.)</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>Это правило делает один элемент с идентификатором (<strong>id</strong>) и значением <code>principal</code> полужирным:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<h3 id="Селекторы_Атрибутов">Селекторы Атрибутов</h3>
+
+<p>Вы не ограничены двумя специальными атрибутами, <code>class</code> и <code>id</code>. Вы можете определить <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">другие атрибуты</a> используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:</p>
+
+<dl>
+ <dt><code>[disabled]</code></dt>
+ <dd>Выбирает все элементы с атрибутом "disabled".</dd>
+ <dt><code>[type='button']</code></dt>
+ <dd>Выбирает элементы с типом "button".</dd>
+ <dt><code>[class~=key]</code></dt>
+ <dd>Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно <code>.key</code>.</dd>
+ <dt><code>[lang|=es]</code></dt>
+ <dd>Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).</dd>
+ <dt>[title*="example" i]</dt>
+ <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.</dd>
+ <dt><code>a[href^="https://"]</code></dt>
+ <dd>Выбирает все защищённые ссылки.</dd>
+ <dt><code>img[src$=".png"]</code></dt>
+ <dd>Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.</dd>
+</dl>
+
+<h3 id="Селекторы_псевдокласса"><span class="short_text" id="result_box" lang="ru"><span>Селекторы псевдокласса</span></span></h3>
+
+<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора</span></span> ({{ cssxref(":visited") }}, для примера), <span id="result_box" lang="ru"><span>статус его содержимого</span></span> (наподобии {{ cssxref(":checked") }} <span id="result_box" lang="ru"><span>на некоторых элементах формы) или положение мыши </span></span> (наподобии {{ cssxref(":hover") }} <span id="result_box" lang="ru"><span> который позволяет узнать, находится ли мышь над элементом или нет).</span> <span>Чтобы просмотреть полный список селекторов, посетите</span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Спецификация работы селекторов</a>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Список_псевдоклассов"><span class="short_text" id="result_box" lang="ru"><span>Список псевдоклассов</span></span></h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Информация_Специфичность"><span class="short_text" id="result_box" lang="ru"><span>Информация: Специфичность</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Подробнее</span></span></div>
+
+<p><span id="result_box" lang="ru"><span>Вы также можете комбинировать селектор, создавая более конкретный селектор.</span> <span>Например, селектор</span></span> <code>.key</code> <span id="result_box" lang="ru"><span>выбирает все элементы, с ключом имени класса </span></span><code>key</code>. Селектор <code>p.key</code> отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса <code>key</code>.</p>
+</div>
+
+<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="alt-edited">Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет.</span> <span class="alt-edited">Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.</span></span></p>
+
+<h2 id="Информация_Селекторы_на_основе_отношений"><span class="short_text" id="result_box" lang="ru"><span>Информация: Селекторы на основе отношений</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>CSS имеет несколько способов выбора элементов на основе отношений между элементами.</span> <span>Вы можете использовать их, чтобы сделать селектора более конкретными.</span></span></p>
+
+<table id="relselectors">
+ <caption><span class="short_text" id="result_box" lang="ru"><span>Общие селекторы, основанные на отношениях</span></span></caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Селектор</strong></td>
+   <td><strong>Выбрано</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Любой E элемент, что является <em>потомком</em> одного из A элемента (то есть: дочерний, или один из дочернего, <em>т.д.</em>)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Любой E элемент, что явлется  <em>дочерним</em> (т.е. прямой потомок)  A элемента.</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Любой E элемент, что является первым <em>дочерним</em> элементом родительского элемента.</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребенок того же родителя)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы можете комбинировать их для выражения сложных отношений.</p>
+
+<p>Вы можете так же использовать символ <code>*</code> (звездочка), что подразумевает "любой элемент".</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица HTML имеет аттрибут <code>id</code> , но строки и ячейки не имеют отдельных идентификаторов:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p>
+
+<pre class="brush:css">#data-table-1 td:first-child {text-decoration: underline;}
+#data-table-1 td:first-child + td {text-decoration: line-through;}
+</pre>
+
+<p>Резульат  выглядит  наподобии:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><u>Prefix</u></td>
+       <td><s>0001</s></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробно</div>
+
+<p><span id="result_box" lang="ru"><span>Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.</span></span></p>
+
+<p>Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах <code>class</code> или <code>id</code> на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.</p>
+
+<p><span id="result_box" lang="ru"><span>В больших конструкциях, где скорость важна, вы можете сделать свои таблицы стилей более эффективными, избегая сложных правил, которые зависят от отношений между элементами.</span></span></p>
+
+<p>Дополнительные примеры о таблицах, смотрите <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> на странице ссылок CSS.</p>
+</div>
+
+<h2 id="Действие_Использование_селекторов_class_и_ID">Действие: Использование селекторов class и ID</h2>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него</span></span>.</li>
+ <li>Затем добавьте аттрибуты <strong>id</strong> и <strong>class</strong>  в первую копию, а аттрибут <strong>id</strong> во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush:css">strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат:</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p><span id="result_box" lang="ru"><span>Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.</span></span></p>
+
+  <p>Селекторы классов <code>.carrot</code> и <code>.spinach</code> имеют приоритет над селектором тега <code>strong</code>.</p>
+
+  <p>Селектор ID <code>#first</code> имеет приоритет над селекторами класс и тег.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызовы</div>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:</span></span>
+
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:</span></span>
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<ol>
+ <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
+
+  <pre class="brush: css">#second { color: blue; }
+</pre>
+  A more specific selector, <code>p#second</code> also works.</li>
+ <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
+  <pre class="brush: css">p { color: blue; }
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="Действие_Использование_селекторов_псевдокласса">Действие: Использование селекторов псевдокласса</h2>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Создайте HTML-файл со следующим содержимым</span></span>:
+
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Действие_Использование_селекторов_на_основе_отношений_и_псевдоклассов">Действие: Использование селекторов на основе отношений и псевдоклассов</h2>
+
+<p><span id="result_box" lang="ru"><span>С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы.</span></span> <span id="result_box" lang="ru"><span>Это обычная техника, используемая, например, для создания</span></span> <strong>чисто-CSS выпадающее меню</strong> ( <span id="result_box" lang="ru"><span>это только CSS, без использования JavaScript).</span> <span>Суть этого метода заключается в создании правила следующего вида:</span></span></p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>для применения к структуре HTML, наподобии следующей:</span></span></p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Смотрите наш полный <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">Пример CSS-основанного выпадающего меню</a> для возможной реплики.</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">легкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/ru/web/guide/css/getting_started/svg_и_css/index.html b/files/ru/web/guide/css/getting_started/svg_и_css/index.html
new file mode 100644
index 0000000000..a69c4281af
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/svg_и_css/index.html
@@ -0,0 +1,213 @@
+---
+title: SVG и CSS
+slug: Web/Guide/CSS/Getting_started/SVG_и_CSS
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>На этой странице показано, как использовать CSS со специальным языком для создания графики: <a href="/en-US/docs/SVG">SVG</a>.</p>
+
+<p>Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.</p>
+
+<p>Это вторая секция Части II <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Руководство по CSS</a>.<br>
+ Предыдущая секция: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
+ Следующая секция: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
+
+<h3 id="Information_SVG" name="Information:_SVG">Общая информация: SVG</h3>
+
+<p><em>SVG</em> (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.</p>
+
+<p>SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.</p>
+
+<p>Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.</p>
+
+<p>Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>Немного подробностей</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p>
+
+    <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
+
+    <p>Более подробная информация о SVG в Mozilla, представлена на станице <a href="/en-US/docs/SVG">SVG</a> в этой wiki.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action_An_SVG_demonstration" name="Action:_An_SVG_demonstration">За дело: Демонстрация SVG</h3>
+
+<p>Создайте новый документ SVG, как обычный текстовый файл, <code>doc8.svg</code>. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Создайте новый файл CSS, <code>style8.css</code>. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: css">/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+  stroke: green;
+  }
+</pre>
+
+<p>Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.</p>
+
+<p>Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:</p>
+
+<table style="border: 2px outset #3366bb;">
+ <tbody>
+  <tr>
+   <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Примечания к демонстрации:</p>
+
+<ul>
+ <li>Документ SVG привязывается к таблице стилей общепринятым способом.</li>
+ <li>SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Задание</caption>
+ <tbody>
+  <tr>
+   <td>Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Посмотреть решение к этому заданию.</a></p>
+
+<h4 id="What_next.3F" name="What_next.3F">Что дальше?</h4>
+
+<p>В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
diff --git a/files/ru/web/guide/css/getting_started/text_styles/index.html b/files/ru/web/guide/css/getting_started/text_styles/index.html
new file mode 100644
index 0000000000..d8e97fa5bd
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/text_styles/index.html
@@ -0,0 +1,151 @@
+---
+title: Text styles
+slug: Web/Guide/CSS/Getting_started/Text_styles
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">This is the 7th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.</span></p>
+
+<h2 class="clearLeft" id="Information_Text_styles">Information: Text styles</h2>
+
+<p>CSS имеет несколько свойств для стилизации текста.</p>
+
+<p>There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:</p>
+
+<ul>
+ <li>Bold, italic, and small-caps (small capitals)</li>
+ <li>Size</li>
+ <li>Line height</li>
+ <li>Font typeface</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<pre class="brush:css">p {
+font: italic 75%/125% "Comic Sans MS", cursive;
+}
+</pre>
+
+<p>This rule sets various font properties, making all paragraphs italic.</p>
+
+<p>The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).</p>
+
+<p>The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.</p>
+
+<p>The rule has the side-effect of turning off bold and small-caps (setting them to <code>normal</code>).</p>
+</div>
+
+<h3 id="Font_faces">Font faces</h3>
+
+<p>You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.</p>
+
+<p>End the list with one of the built-in default typefaces: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
+
+<p>If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.</p>
+
+<p>To specify a typeface on its own, use the {{ cssxref("font-family") }} property.</p>
+
+<h3 id="Font_sizes">Font sizes</h3>
+
+<p>Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.</p>
+
+<p>You can use some built-in values for font sizes, like <code>small</code>, <code>medium</code> and <code>large</code>. You can also use values relative to the font size of the parent element like: <code>smaller</code>, <code>larger</code>, <code>150%</code> or <code>1.5em</code>. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.</p>
+
+<p>If necessary you can specify an actual size like: <code>14px</code> (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.</p>
+
+<p>To specify a font size on its own, use the {{ cssxref("font-size") }} property.</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.</p>
+
+<p>To specify a line height on its own, use the {{ cssxref("line-height") }} property.</p>
+
+<h3 id="Decoration">Decoration</h3>
+
+<p>The separate {{ cssxref("text-decoration") }} property can specify other styles, like <code>underline</code> or <code>line-through</code>. You can set it to <code>none</code> to explicitly remove any decoration.</p>
+
+<h3 id="Other_properties">Other properties</h3>
+
+<p>To specify italic on its own, use {{ cssxref("font-style") }}<code>: italic;</code><br>
+ To specify bold on its own, use <code>{{ cssxref("font-weight") }}: bold;</code><br>
+ To specify small capitals on its own, use <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
+
+<p>To turn any of these off individually, you can specify the value <code>normal</code> or <code>inherit</code>.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">More details</div>
+
+<p>You can specify text styles in a variety of other ways.</p>
+
+<p>For example, some of the properties mentioned here have other values that you can use.</p>
+
+<p>In a complex stylesheet, avoid using the shorthand <code>font</code> property because of its side-effects (resetting other individual properties).</p>
+
+<p>For full details of the properties that relate to fonts, see <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification. For full details of text decoration, see <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
+
+<p>If you don't want to depend on the typefaces installed on users' systems, you can use {{ cssxref("@font-face") }} to specify an online font. However, this requires that the users have a browser that supports this rule.</p>
+</div>
+
+<h2 id="Action_Specifying_fonts">Action: Specifying fonts</h2>
+
+<p>For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.</p>
+
+<ol>
+ <li>Edit your CSS file.</li>
+ <li>Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:
+  <pre class="eval">body {
+font: 16px "Comic Sans MS", cursive;
+}
+</pre>
+ </li>
+ <li>Add a comment explaining the rule, and add white space to make it match your preferred layout.</li>
+ <li>Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>From your browser's menu bar, choose <strong>View &gt; Text Size &gt; Increase</strong> (or <strong>View &gt; Zoom &gt; Zoom In</strong>). Even though you specified 16 pixels in the style, a user reading the document can change the size.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">next section</a> lists the names of standard colors and explains how you can specify others<strong>.</strong></p>
diff --git a/files/ru/web/guide/css/getting_started/what_is_css/index.html b/files/ru/web/guide/css/getting_started/what_is_css/index.html
new file mode 100644
index 0000000000..597b5be93f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/what_is_css/index.html
@@ -0,0 +1,119 @@
+---
+title: Что такое CSS?
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Веб
+  - Новичку
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{ CSSTutorialTOC() }}</div>
+
+<p>{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started", "CSS для начинающих")}} <span class="seoSummary">Эта первая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a> кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.</span></p>
+
+<h2 class="clearLeft" id="Информация_Что_такое_CSS">Информация: Что такое CSS</h2>
+
+<p>Каскадные таблицы стилей (Cascading Style Sheets = <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) — это язык, который отвечает за визуальное представление документов пользователю.</p>
+
+<p>Под <em>документом</em> мы будем понимать набор информации о структуре страницы, описываемый <em>языком разметки</em>.</p>
+
+<p>А <em>представление</em> документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.</p>
+
+<div class="tuto_example">
+<p><strong>Примеры</strong></p>
+
+<ul>
+ <li>Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (<span lang="en">HyperText Markup Language</span> — Язык ГиперТекстовой Разметки)</li>
+ <li>Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (<span lang="en">XML User Interface Language</span> — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.</li>
+</ul>
+</div>
+
+<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящен тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.</p>
+
+<p>Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.</p>
+
+<p>Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/HTML" title="/ru/docs/Web/HTML">HTML</a></td>
+   <td>о веб-страницах</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/XML" title="/ru/docs/XML">XML</a></td>
+   <td>о структуре документов в общем</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/SVG" title="/ru/docs/Web/SVG">SVG</a></td>
+   <td>о графике</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/XUL" title="/ru/docs/XUL">XUL</a></td>
+   <td>о пользовательских интерфейсах в Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Во второй части данного руководства вы встретите примеры этих языков разметки.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>В терминах CSS программа, которая выводит документ пользователю, так называемому <em lang="en">user agent</em> (<span lang="en">UA</span>). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.</p>
+
+<p>Прочие определения и термины, имеющие отношение к CSS, вы можете найти в <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Определениях</a> спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.</p>
+</div>
+
+<h2 id="К_действию_Создание_документа">К действию: Создание документа</h2>
+
+<ol>
+ <li>Создайте новую папку на вашем компьютере для упражнений.</li>
+ <li>Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.</li>
+ <li>Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+  <p>{{ LiveSampleLink('Action.3A_Creating_a_document', 'Посмотреть демо') }}</p>
+ </li>
+ <li>Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.
+  <p>Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:</p>
+
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>То, что вы увидите на самом деле, может немного отличаться потому, что настройки по умолчанию вашего браузера и данной энциклопедии наверняка будут отличаться: небольшие различия в шрифте, пробелах и цветах не очень-то и важны.</p>
+ </li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?")}}В документе, который вы создали, CSS пока что не использовался. В <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">следующем разделе</a> вы научитесь использовать CSS для стилизации документа.</p>
diff --git a/files/ru/web/guide/css/getting_started/why_use_css/index.html b/files/ru/web/guide/css/getting_started/why_use_css/index.html
new file mode 100644
index 0000000000..04f708bc27
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/why_use_css/index.html
@@ -0,0 +1,109 @@
+---
+title: Зачем нужен CSS?
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Web
+  - Веб
+  - Новичку
+  - Руководство
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Что такое CSS?") }}<span class="seoSummary">Это вторая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.</span></p>
+
+<h2 class="clearLeft" id="Информация_Зачем_нужен_CSS">Информация: Зачем нужен CSS?</h2>
+
+<p>CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега &lt;HEAD&gt; документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке &lt;HEAD&gt; документа.</p>
+
+<p>У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:</p>
+
+<ul>
+ <li>Помогает избежать дублирования</li>
+ <li>Облегчает обслуживание</li>
+ <li>Позволяет делать изменения для всего сайта в одном месте</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.</p>
+
+<p>Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.</p>
+
+<p>Когда пользователь открывает веб-страницу в режиме печати, вы можете предоставить различную информацию о стилях которая сделает страницу более лёгкой для чтения.</p>
+</div>
+
+<p>Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.</p>
+
+<p>Например, в HTML вы можете использовать тег &lt;B&gt;, чтобы сделать текст жирным, либо указать цвет фона страницы в теге &lt;BODY&gt;.</p>
+
+<p>При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.</p>
+</div>
+
+<h2 id="Действие_Создание_таблицы_стилей">Действие: Создание таблицы стилей</h2>
+
+<ol>
+ <li>Создайте новый текстовый файл в том же каталоге, что и <code>doc1.html</code>, созданный в первой статье.</li>
+ <li>Сохраните его как <code>style1.css</code>. Этот файл будет вашей таблицей стилей.</li>
+ <li>Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл:
+  <pre class="brush: css">strong {color: red;}
+</pre>
+ </li>
+</ol>
+
+<h3 id="Привязка_таблицы_стилей_к_документу">Привязка таблицы стилей к документу</h3>
+
+<ol>
+ <li>Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже:
+  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:</li>
+</ol>
+
+<p>{{ EmbedLiveSample('Действие_Создание_таблицы_стилей', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}</p>
+
+<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'Просмотреть демо') }}</p>
+
+<div class="tuto_example" id="challenge">
+<div class="tuto_type">Задание</div>
+
+<p>В дополнение к красному, в CSS имеются и другие названия цветов.</p>
+
+<p>Не открывая подсказку, подберите ещё пять цветовых имён, которые будут работать в CSS.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Возможное решение</div>
+
+<p>CSS поддерживает общие названия цветов, например <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, или <code>black</code>. Он также поддерживает некоторые более экзотические названия типа <code>chartreuse</code>, <code>fuschia</code>, или <code>burlywood</code>. Посмотрите <a href="/ru/docs/CSS/color_value" title="Цвет в CSS">значения цвета CSS</a>, чтобы ознакомится с полным списком поддерживаемых цветов, а так же методов их задания.</p>
+<a class="hideAnswer" href="#challenge">Скрыть решение</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Как работает CSS.")}}  Теперь, когда у вас есть образец документа, связанный с отдельной таблицей стилей, вы готовы <a href="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works">узнать больше</a> о том, как ваш браузер объединяет их при отображении документа.</p>
diff --git a/files/ru/web/guide/css/getting_started/таблицы/index.html b/files/ru/web/guide/css/getting_started/таблицы/index.html
new file mode 100644
index 0000000000..b67f611ea7
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/таблицы/index.html
@@ -0,0 +1,524 @@
+---
+title: Таблицы
+slug: Web/Guide/CSS/Getting_started/Таблицы
+tags:
+  - CSS
+  - Веб
+  - Руководство
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<p>{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}</p>
+
+<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.</p>
+
+<h2 class="clearLeft" id="Информация_Таблицы">Информация: Таблицы</h2>
+
+<p>Таблица распологает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.</p>
+
+<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.</p>
+
+<p>Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (<strong><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Разметка</a></strong>) предпочтительнее для этой цели.</p>
+
+<h3 id="Структура_таблицы">Структура таблицы</h3>
+
+<p>В таблице, каждый кусок информации отображается в ячейке (<em>cell)</em>.</p>
+
+<p>Ячейки, лежащие на одной линии, составляют строку (<em>row</em>).</p>
+
+<p>В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (<em>header)</em>, в конце - нижний колонтитул (<em>footer)</em>. Главные строки таблицы - тело (<em>body)</em>, и они могут быть также сгруппирированы.</p>
+
+<p>Ячейки в линии сверху вниз, составляют столбец (<em>column)</em>, но столбцы имеют ограниченное приминение в таблицах CSS.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Селекторов, основанных на отношении</a> в <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Селекторы</a> имеет десять ячеек в пяти строках.</p>
+
+<p>Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.</p>
+
+<p>У неё два столбца.</p>
+</div>
+
+<p>Это руководство охватывает только простые таблицы, где результат довольно предсказуемый. В простой таблице, каждая ячейка занимает только одну ячейку в строке и в столбце. Вы можете использовать CSS для сложных таблиц, где ячейки занимают диапазон ячеек более чем одна в строке или столбце, но таблицы, подобно этим находятся вне пределов этого руководства.</p>
+
+<h3 id="Рамки">Рамки</h3>
+
+<p>Ячейки не имеют границ.</p>
+
+<p>У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в <code>collapse</code>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Здесь три таблицы.</p>
+
+<p>У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 2em;">
+    <table style="">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="border-collapse: collapse;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заголовок">Заголовок</h3>
+
+<p>{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.</p>
+
+<p>Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в <code>bottom</code>. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.</p>
+
+<p>Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>У этой таблицы заголовок внизу</p>
+
+<pre class="brush: css">#demo-table &gt; caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+</pre>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <caption>Подходит</caption>
+     <tbody>
+      <tr>
+       <td>
+        <table style="border-collapse: collapse;">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Клубы</td>
+           <td style="border: 1px solid gray; text-align: center;">Сердца</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Алмазы</td>
+           <td style="border: 1px solid gray; text-align: center;">Лопаты</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Пустые_ячейки">Пустые ячейки</h3>
+
+<p>Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.</p>
+
+<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.</p>
+
+<p>В таблице слева пустая таблица отображается. В таблице справа, она скрыта:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="background-color: #dfd;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee;"> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="background-color: #dfd;">
+     <tbody>
+      <tr>
+       <td> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Детали</div>
+
+<p>Для подбробной информации о таблицах, смотрите <a href="http://www.w3.org/TR/CSS21/tables.html">Таблицы</a> в Спецификации CSS.</p>
+
+<p>Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.</p>
+</div>
+
+<h2 id="Действие_Стилизация_таблицы">Действие: Стилизация таблицы</h2>
+
+<ol>
+ <li>Создайте новый HTML документ, <code>doc3.html</code>. Скопируйте и вставьте содержимое отсюда:
+
+  <div style="height: 36em; overflow: auto;">
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Документ примера 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Океаны&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Площадь&lt;/th&gt;
+          &lt;th&gt;Средняя глубина&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;млн. км&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;м&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Северный Ледовитый&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Атлантический&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Тихий&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Индийский&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Южный&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Общая&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Средняя&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </div>
+ </li>
+ <li>Создайте новую таблицу стилей, <code>style3.css</code>. Скопируйте и вставьте содержимое отсюда:
+  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+</pre>
+ </li>
+ <li>Откройте документ в вашем браузере. Он должен выглядеть наподобие этого:
+  <table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+   <tbody>
+    <tr>
+     <td>
+      <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Океаны</p>
+
+      <div style="border: 1px solid #7a7; background-color: #efe;">
+      <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+       <tbody>
+        <tr style="text-align: center; color: blue;">
+         <th> </th>
+         <th>Площадь</th>
+         <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
+        </tr>
+        <tr style="font-style: italic; color: gray;">
+         <th> </th>
+         <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
+         <th style="padding-left: .5em; padding-right: .5em;">м</th>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Северный Ледовитый:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Атлантический:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Тихий:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Индийский:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Общая:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Средняя:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+        </tr>
+       </tbody>
+      </table>
+      </div>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице:
+  <ul>
+   <li>Заголовок находится снаружи рамки таблицы.</li>
+   <li>Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km<sup>2</sup>.</li>
+   <li>Три пустые ячейки. Через две из них  позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.</li>
+   <li>Двоеточия добавлены с помощью таблицы стилей.</li>
+  </ul>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызов</div>
+
+<p>Измените таблицу стилей, чтобы она выглядела, как эта:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="border: 1px solid #7a7; background-color: #efe;">
+    <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+     <tbody>
+      <tr style="text-align: center; color: blue;">
+       <th>
+        <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+         <tbody>
+          <tr style="text-align: center; color: blue;">
+           <th> </th>
+           <th>Площадь</th>
+           <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
+          </tr>
+          <tr style="font-style: italic; color: gray;">
+           <th> </th>
+           <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
+           <th style="padding-left: .5em; padding-right: .5em;">м</th>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Северный Ледовитый:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Атлантический:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Тихий:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Индийский:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Общая:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Средняя:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+          </tr>
+         </tbody>
+        </table>
+       </th>
+      </tr>
+     </tbody>
+    </table>
+    </div>
+
+    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Океаны</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Посмотреть решение для этой задачи.</a></p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите <a href="http://www.w3.org/TR/CSS21/propidx.html">все свойства таблиц</a> в CSS Спецификациях.</p>
+
+<p>Следующая страница <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="en-US/docs/Web/Guide/CSS/Getting_Started/Media">тоже рассматривает</a> цель и структуру CSS таблиц.</p>
diff --git a/files/ru/web/guide/css/index.html b/files/ru/web/guide/css/index.html
new file mode 100644
index 0000000000..5d13e8cc55
--- /dev/null
+++ b/files/ru/web/guide/css/index.html
@@ -0,0 +1,11 @@
+---
+title: Руководство разработчика CSS
+slug: Web/Guide/CSS
+tags:
+  - CSS
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+prepare for redirect
diff --git a/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html b/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..2fff1726d3
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,157 @@
+---
+title: Using z-index
+slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{cssref}}</div>
+
+<p>The first part of this article, <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p>
+
+<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию єлемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственое порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p>
+
+<ul>
+ <li>bottom layer<em> (farthest from the observer)</em></li>
+ <li>...</li>
+ <li>Layer -3</li>
+ <li>Layer -2</li>
+ <li>Layer -1</li>
+ <li>Layer 0 <em>(default rendering layer)</em></li>
+ <li>Layer 1</li>
+ <li>Layer 2</li>
+ <li>Layer 3</li>
+ <li>...</li>
+ <li>top layer<em> (closest to the observer)</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>When no <code>z-index</code> property is specified, elements are rendered on the default rendering layer 0 (zero).</li>
+ <li>If several elements share the same <code>z-index</code> value (i.e., they are placed on the same layer), stacking rules explained in the section <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> apply.</li>
+</ul>
+</div>
+
+<p>In the following example, the layers' stacking order is rearranged using <code>z-index</code>. The <code>z-index</code> of element #5 has no effect since it is not a positioned element.</p>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p>
+
+<h2 id="Source_code_for_the_example"><strong>Source code for the example</strong></h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: November 3, 2014</li>
+</ul>
+</div>
diff --git a/files/ru/web/guide/css/understanding_z_index/index.html b/files/ru/web/guide/css/understanding_z_index/index.html
new file mode 100644
index 0000000000..0074ff2577
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Понимание CSS z-index
+slug: Web/Guide/CSS/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - Understanding_CSS_z-index
+  - Web
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).</p>
+
+<blockquote>
+<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и распологались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.</p>
+
+<p>Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это обьясняется целым комплексом правил "укладки" элементов. Фактически в спецификации  <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно обьясняющий эти правила.</p>
+
+<p>Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.</p>
+
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Позиционирование без z-индекса</a> : правила по умолчанию</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Позиционирование и float</a> : как себя поводят float элементы c позиционированием</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Использование z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Информация о документе</h3>
+
+<ul>
+ <li>Автор: Paolo Lombardi</li>
+ <li>Эта статья - английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Дата последнего обновления: 9 июля 2005 г.</li>
+</ul>
+
+<p>Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.</p>
+
+<article></article>
+</div>
diff --git a/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..7f4eb09133
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,140 @@
+---
+title: Stacking without z-index
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
+tags:
+  - CSS
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">Понимание CSS z-index</span></a></p>
+
+<h3 id="Наложения_без_Z-индекса">Наложения без Z-индекса</h3>
+
+<p>Когда элементы не имеют z-индека, они накладываються в таком порядке(снизу вверх):</p>
+
+<p>1. Фон и границы корневого элемента.</p>
+
+<p>2. Дочерние блоки в нормальном потоке в порядке размещения(в HTML порядке).</p>
+
+<p>3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).</p>
+
+<p>В следующем примере, абсолютно и относительно спозиционированным блокам определена величина  и позиция таким образом, чтобы продемонстировать правила наложения.</p>
+
+<div class="note">
+<p><strong>Заметки:</strong></p>
+
+<ul>
+ <li>Given a homogeneous group of elements without any z-index property, such as the positioned blocks (DIV #1 to #4) in the example, the element's stacking order is their order in the HTML hierarchy, regardless of their position.</li>
+ <li>
+  <p>Standard blocks (DIV #5) in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy. </p>
+ </li>
+</ul>
+</div>
+
+<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="absdiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="reldiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="reldiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="absdiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="normdiv"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+    &lt;br /&gt;no positioning &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css"> .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>(If the image does not display in CodePen, click the Tidy button in the CSS section)</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p>
+
+<h3 id="Так_же_посмотрите">Так же посмотрите</h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: November 3rd, 2014</li>
+</ul>
+</div>
diff --git a/files/ru/web/guide/css/using_multi-column_layouts/index.html b/files/ru/web/guide/css/using_multi-column_layouts/index.html
new file mode 100644
index 0000000000..65e96fcdcf
--- /dev/null
+++ b/files/ru/web/guide/css/using_multi-column_layouts/index.html
@@ -0,0 +1,124 @@
+---
+title: Использование CSS разметки для многих колонок
+slug: Web/Guide/CSS/Using_multi-column_layouts
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>{{CSSRef("CSS Multi-columns")}}</p>
+
+<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить легкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p>
+
+<p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p>
+
+<h2 id="Использование_колонок">Использование колонок</h2>
+
+<h3 id="Количество_колонок_и_ширина">Количество колонок и ширина</h3>
+
+<p>Два свойства CSS контролируют появятся ли колонки и как много их будет: {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}.</p>
+
+<p><code>Свойство column-count</code> устанавливает количество колонок определённым числом. Пример,</p>
+
+<pre class="brush: html">&lt;div style="column-count:2;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p><code>Свойство column-width</code> устанавливает минимальную желаемую ширину колонки. Если <code>column-count</code> также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить  доступную ширину.</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>становится:</p>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>Подробные детали описаны в <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 спецификации</a>.</p>
+
+<p>В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.</p>
+
+<h3 id="Краткая_запись_columns"><code>К</code>раткая запись columns</h3>
+
+<p>В большинстве случаев веб-разработчики используют одно из двух свойств CSS: {{ cssxref("column-count") }} или {{ cssxref("column-width") }}. Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись {{ cssxref("columns") }}. Пример:</p>
+
+<p>CSS объявление  <code>column-width:12em</code> может быть заменено:</p>
+
+<pre class="brush: html">&lt;div style="columns:12em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; columns: 12em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>CSS объявление <code>column-count:4</code> может быть заменено:</p>
+
+<pre class="brush: html">&lt;div style="columns:4"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 4; -webkit-columns: 4; columns: 4;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>Два CSS объявления <code>column-width:8em</code> и <code>column-count:12</code> могут быть заменены:</p>
+
+<pre class="brush: html">&lt;div style="columns:12 8em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; columns: 12 8em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h3 id="Выравнивание_высоты">Выравнивание высоты</h3>
+
+<p>CSS3-спецификация колонок требует, чтобы высота колонки была выровнена, т.е. браузер автоматически устанавливает максимальную высоту колонки, для того, чтобы высота содержимого в каждой из них была приблизительно одинаковая. Firefox так и делает.</p>
+
+<p>Однако, в некоторых ситуациях полезно установить максимальную высоту колонок явно, тогда расположение содержимого, начиная с первой колонки и последующих созданных, как необходимо, возможно, перекроют правую границу. Поэтому, если высота ограничена, с помощью CSS {{ cssxref("height") }} или {{ cssxref("max-height") }} свойств на многоколончатом блоке, каждой колонке разрешено расти до этой высоты, но не более, пока не добавится новая колонка. Этот режим также более эффективен для разметки.</p>
+
+<h3 id="Промежутки_между_колонками">Промежутки между колонками</h3>
+
+<p>Существует промежуток между колонками. По умолчанию рекомендовано значение <code>1em</code>. Это значение можно изменить, применяя свойство {{ Cssxref("column-gap") }} на многоколончатом блоке:</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em; column-gap:2em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h2 id="Постепенное_ухудшение">Постепенное ухудшение</h2>
+
+<p>Свойства колонки будут просто проигнорированы браузерами, которые не поддерживают многоколончатый режим. Поэтому соответственно легче создать разметку, которая отобразит содержимое в одной колонке и будет использовать несколько колонок в тех браузерах, которые поддерживают многоколончатый режим.</p>
+
+<p>Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом {{ property_prefix("-moz") }} , одно с префиксом {{ property_prefix("-webkit") }} и третье без префикса.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>CSS3 колонки - примитивная разметка, которая поможет Веб-разработчикам лучше воспользоваться реальным участком экрана. Разработчики с воображением могут найти много способов для их использования, особенно с автоматическим выравниванием высоты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
diff --git a/files/ru/web/guide/css/visual_formatting_model/index.html b/files/ru/web/guide/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..7a5de35909
--- /dev/null
+++ b/files/ru/web/guide/css/visual_formatting_model/index.html
@@ -0,0 +1,209 @@
+---
+title: Модель визуального форматирования
+slug: Web/Guide/CSS/Visual_formatting_model
+translation_of: Web/CSS/Visual_formatting_model
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><em>Модель визуального форматирования </em>CSS<em> </em> - это алгоритм, используемый для обработки документа и его визуального отображения. Это базовая концепция CSS</span>. Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, одну или несколько боксов, согласно <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">боксовой модели CSS</a>. Расположение (layout) каждого бокса определяется:</p>
+
+<ul>
+ <li>размерами бокса: точно заданными или заданными ограничениями. Если размеры не заданы, это правило игнорируется;</li>
+ <li>типом бокса: inline, inline-level, atomic inline-level, block box;</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Box_positioning_scheme">схемой позиционирования</a>: normal flow, float или absolute;</li>
+ <li>другими элементами дерева: дочерними и соседними;</li>
+ <li>размерами и расположением окна просмотра ({{glossary("viewport")}});</li>
+ <li>внутренними размерами содержащихся изображений;</li>
+ <li>другой внешней информацией.</li>
+</ul>
+
+<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполенинем</em> (<em>overflow).</em></p>
+
+<h2 id="Генерация_бокса">Генерация бокса</h2>
+
+<p>Генерация бокса - часть алгоритма модели визуального форматирования, процедура, генерирующая блоки из элементов. Различные типы боксов определяют различное поведение в контексте форматирования. Тип бокса зависит от свойства CSS {{ cssxref("display") }}.</p>
+
+<h3 id="Блочные_эклементы_и_блок-боксы">Блочные эклементы и блок-боксы</h3>
+
+<p>Говорят, что элемент является блочным, когда вычисленное значение его CSS свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p>
+
+<p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как миниум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p>
+
+<p>Главный блок-бокс содержит сгенериованные боксы-потомки и сгенериованный контекст. Он так же будет боксом, участвующем в <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">схеме позиционирования</a>.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контекст инлайнового форматирования</a> и, таким образом, содержит только инлайновые элементы.</p>
+
+<p>Важно понимать, что понятие блочного элемента и понятие блочного контейнера - это разные вещи. Первое описывает, как блок будет себя вести по отношению к своему родителю и своим соседям/братьям. А второе - описывает, как блок будет взаимодействовать со своими потомками. Некоторые элементы блочного уровня, например, таблицы, не являются содержащими блоками. И наоборот, некоторые блоки-контейнеры, например, ячейки таблицы, не являются элементами блочного уровня.</p>
+
+<p>Элементы блочного уровня, которые так же являются контейнерами, называются <em>блок-боксами</em>.</p>
+
+<h4 id="Анонимные_блок-боксы">Анонимные блок-боксы</h4>
+
+<p>В некоторых случаях алгоритм визуального форматирования  вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то проименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p>
+
+<p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p>
+
+<p>Блоки-контейнеры содержат либо только инлайн-боксы, либо только элементы блочного уровня. Но, как правило, документ содержит и те и другие. В этом случае анонимные блок-боксы создаются вокруг примыкающих к ним инлайн-боксов.</p>
+
+<h3 id="Пример">Пример</h3>
+
+<p>Возьмём следующий HTML код (со стилями по умолчанию, то есть элементы {{ HTMLElement("div") }} и {{ HTMLElement("p") }} имеют значение <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;div&gt;Some inline text &lt;p&gt;followed by a paragraph&lt;/p&gt; followed by more inline text.&lt;/div&gt;</code></pre>
+
+<p>Здесь создались два анонимных блока: один для текста перед параграфом (<code>Some inline text</code>), и второй для текста после параграфа (<code>followed by more inline text.</code>). И у нас получилась вот такая структура:</p>
+
+<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>Выглядеть это будет так:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">Some inline text
+followed by a paragraph
+followed by more inline text.</code></pre>
+
+<p>В отличие от параграфа {{ HTMLElement("p") }}, Web разработчик не может напрямую контролировать стили этих двух анонимных боксов. Те свойства, которые наследуются, берут своё значение от элемента {{ HTMLElement("div") }}, например {{ cssxref("color") }}, определяющий цвет текста. А другие значения, ненаследуемые, устанавливаются в значение <code>initial</code>. Например, у них не будет своего свойства {{ cssxref("background-color") }}, он всегда будет в состоянии "прозрачный" (transparent), значении по умолчанию для этого свойства, и поэтому будет видно тот background, который установлен у элемента <code>&lt;div&gt;</code>. А вот для параграфа <code>&lt;p&gt; </code>можно установить своё свойство цвета фона. Таким образом, эти два анонимных бокса будут иметь один и тот же цвет текста.</p>
+
+<p>Ещё один случай, который приводит к созданию анонимных блок-боксов, это случай, когда инлайн-бокс содержит один или несколько блок-боксов. В этом случае элемент, содержащий блок-боксы, делится на два инлайн-бокса - один перед, а второй после блок-бокса. И потом инлайн-элементы перед и после блок-бокса дополнительно заключаются в <em>анонимные блок-боксы</em>. Таким образом блок-бокс становится соседом для анонимных блок-боксов, содержащих инлайн-элементы.</p>
+
+<p>Если есть несколько блок-боксов, идущих подряд, без инлайн-элементов между ними, то анонимные блок-боксы создаются только перед и после такого набора блок-боксов.</p>
+
+<h3 id="Пример_2">Пример</h3>
+
+<p>Возьмём следующий HTML код, где установим для элемента {{ HTMLElement("p") }} значение <code>display:inline</code> и для элемента {{ HTMLElement("span") }} значение <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;p&gt;Some &lt;em&gt;inline&lt;/em&gt; text &lt;span&gt;followed by a paragraph&lt;/span&gt; followed by more inline text.&lt;/p&gt;</code></pre>
+
+<p>Создадутся два анонимных блок-бокса, один для текста перед элементом span (<code>Some <em>inline</em> text</code>) и один для текста после него (<code>followed by more inline text</code>), и у нас получится вот такая структура:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<p>Выглядеть она будет так:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">Some inline text
+followed by a paragraph
+followed by more inline text.</code></pre>
+
+<h3 id="Элементы_инлайн-уровня_и_инлайн-боксы">Элементы инлайн-уровня и инлайн-боксы</h3>
+
+<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они распологаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p>
+
+<p><img alt="venn_inlines.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p>
+
+<div class="warning">
+<p>Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него  (it could be a mathematical superset), потому что в спецификации сказано: "Элементв инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2</p>
+</div>
+
+<p>Элементы инлайн-уровня создают <em>боксы инлайн-уровня</em>, которые определены как боксы, участвующие в <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контексте форматирования инлайн-уровня</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p>
+
+<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div>
+
+<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context.
+<div style="-moz-column-width: 30em;">
+<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="style token"><span class="language-css token">
+  <span class="selector token">span</span> <span class="punctuation token">{</span>
+    <span class="property token">display</span><span class="punctuation token">:</span>inline<span class="punctuation token">;</span> <span class="comment token">/* default value*/</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>can be split in several
+   lines as it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> is an inline box.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+</div>
+
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div>
+
+<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="style token"><span class="language-css token">
+  <span class="selector token">span</span> <span class="punctuation token">{</span>
+    <span class="property token">display</span><span class="punctuation token">:</span>inline-block<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>cannot be split in several
+   lines as it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> is an inline-block box.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<div style="-moz-column-width: 30em;">
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div>
+</div>
+</div>
+
+<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4>
+
+<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p>
+
+<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p>
+
+<div class="note">Example TBD</div>
+
+<h3 id="Other_types_of_boxes">Other types of boxes</h3>
+
+<h4 id="Line_boxes">Line boxes</h4>
+
+<p><em>Line boxes</em> are generated by the <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p>
+
+<p>These boxes are technical, and Web authors do not usually have to bother with them.</p>
+
+<h4 id="Run-in_boxes">Run-in boxes</h4>
+
+<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p>
+
+<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div>
+
+<h4 id="Model-induced_boxes">Model-induced boxes</h4>
+
+<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p>
+
+<ul>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li>
+ <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li>
+</ul>
+
+<h4 id="Positioning_schemes">Positioning schemes</h4>
+
+<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p>
+
+<ul>
+ <li>The <em>normal flow</em> - positions each box one after the other.</li>
+ <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li>
+ <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li>
+</ul>
+
+<h3 id="Normal_flow">Normal flow</h3>
+
+<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p>
+
+<h3 id="Example">Example</h3>
+
+<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.<br>
+<br>
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out.</div>
+
+<div class="note">
+<p>There are two sub-cases of the normal flow: static positioning and relative positioning:</p>
+
+<ul>
+ <li>In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.</li>
+ <li>In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li>
+</ul>
+</div>
+
+<h3 id="Floats">Floats</h3>
+
+<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p>
+
+<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p>
+
+<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p>
+
+<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p>
diff --git a/files/ru/web/guide/events/event_handlers/index.html b/files/ru/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..8401bd0739
--- /dev/null
+++ b/files/ru/web/guide/events/event_handlers/index.html
@@ -0,0 +1,166 @@
+---
+title: DOM onevent handlers
+slug: Web/Guide/Events/Event_handlers
+translation_of: Web/Guide/Events/Event_handlers
+---
+<p>Веб-платформа предоставляет несколько способов получения уведомлений о событиях DOM. Два общих подхода - это {{domxref ("EventTarget.addEventListener", " addEventListener ()")}} и конкретные обработчики <span class="seoSummary"><code>on<em>event</em></code> </span> . Эта страница посвящена тому, как работают последние.</p>
+
+<h2 id="Регистрация_обработчиков_onevent">Регистрация обработчиков onevent</h2>
+
+<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определенных элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base &lt;body&gt;). События - это такие действия, как:</p>
+
+<ul>
+ <li>Клик мышкой</li>
+ <li>Нажатие клавиш</li>
+ <li>Получение фокуса</li>
+</ul>
+
+<p>Обработчик on-event обычно называется с именем события, на которое он реагирует, например <code>on<em>click</em></code> , <code>on<em>keypress</em></code> , <code>on<em>focus</em></code> и т. д.</p>
+
+<p>Вы можете указать обработчик событий on&lt;...&gt; для конкретного события (например, {{event("click")}}) для данного объекта различными способами:</p>
+
+<ul>
+ <li>Добавление HTML элемента {{Glossary("attribute")}} с событием <code>on<em>&lt;eventtype&gt;</em></code>:<br>
+  <code>&lt;button <strong>onclick="handleClick()"</strong>&gt;</code>,</li>
+ <li>Или установив соответствующий параметр {{Glossary("property/JavaScript", "property")}} из JavaScript:<br>
+  <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li>
+</ul>
+
+<p>Свойство обработчика событий <code>on<em>event</em></code>  служит своего рода заполнителем, которому может быть назначен один обработчик событий. Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать метод {{domxref("EventTarget.addEventListener", " addEventListener ()")}} , который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию {{domxref ("EventTarget.removeEventListener", "removeEventListener()")}} .</p>
+
+<p>Когда происходит событие, которое применяется к элементу, каждый из его обработчиков событий вызывается, чтобы позволить им обрабатывать это событие один за другим. Вам не нужно вызывать их самостоятельно, хотя вы можете сделать это во многих случаях, чтобы легко имитировать происходящее событие. Например, учитывая объект кнопки <code>myButton</code> , вы можете сделать <code>myButton.onclick(myEventObject)</code> для прямого вызова обработчика событий. Если обработчик событий не имеет доступа к каким-либо данным из объекта event, вы можете пропустить это событие при вызове функции <code>onclick()</code> .</p>
+
+<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p>
+
+<p>Это продолжается до тех пор, пока не будет вызван каждый обработчик, если только один из обработчиков событий явно не остановит обработку события, вызвав {{domxref("Event.stopPropagation", " stopPropagation ()")}} на самом объекте события.</p>
+
+<h3 id="Non-element_objects">Non-element objects</h3>
+
+<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p>
+
+<pre class="brush: js">const xhr = new XMLHttpRequest();
+xhr.onprogress = function() { … };</pre>
+
+<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2>
+
+<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p>
+
+<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Given this HTML document:</p>
+
+<pre class="brush: html">&lt;p&gt;Demonstrating quirks of &lt;code&gt;on&lt;em&gt;event&lt;/em&gt;&lt;/code&gt; HTML attributes on
+   &lt;a onclick="log('Click!')"&gt;these three words&lt;/a&gt;.
+&lt;/p&gt;
+
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p>
+
+<pre class="brush: js">let logElement = document.querySelector('div');
+let el = document.querySelector("a");
+
+function log(msg) { logElement.innerHTML += `${msg}&lt;br&gt;` };
+function anchorOnClick(event) { log("Changed onclick handler") };
+
+// Original Handler
+log(`Element's onclick as a JavaScript property: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+
+//Changing handler using .onclick
+log('&lt;br&gt;Changing onclick handler using &lt;strong&gt; onclick property &lt;/strong&gt; ');
+
+el.onclick = anchorOnClick;
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`But the HTML attribute is unchanged: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);
+
+//Changing handler using .setAttribute
+log('&lt;hr/&gt;&lt;br&gt; Changing onclick handler using &lt;strong&gt; setAttribute method &lt;/strong&gt; ');
+el.setAttribute("onclick", 'anchorOnClick(event)');
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`Now even the HTML attribute has changed: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p>
+
+<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p>
+
+<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3>
+
+<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p>
+
+<ul>
+ <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li>
+</ul>
+
+<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p>
+
+<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3>
+
+<div class="blockIndicator note">
+<p>TBD (non-capturing listener)</p>
+</div>
+
+<h3 id="Terminology">Terminology</h3>
+
+<p>The term <strong>event handler</strong> may refer to:</p>
+
+<ul>
+ <li>Any function or object that is registered to be notified of events</li>
+ <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code>&lt;button onclick="alert(this)"&gt;</code> or <code>window.onload = function() { … }</code>.</li>
+</ul>
+
+<p>When discussing the various methods of listening to events:</p>
+
+<ul>
+ <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li>
+ <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4>
+
+<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p>
+
+<pre class="brush: js">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4>
+
+<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p>
diff --git a/files/ru/web/guide/events/index.html b/files/ru/web/guide/events/index.html
new file mode 100644
index 0000000000..ccf1d5b353
--- /dev/null
+++ b/files/ru/web/guide/events/index.html
@@ -0,0 +1,59 @@
+---
+title: Руководство разработчика событий
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>События связаны с:</p>
+
+<ul>
+ <li>Шаблонами проектирования, использующимися для асинхронной обработки инцидентов, возникающих в жизненном цикле веб страницы</li>
+ <li>Именованием, характеризацией и использованием большого количества инцидентов различного типа</li>
+</ul>
+
+<p>Статья <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">Overview page</a> содержит в краткой манере описание шаблонов проектирования и типов определяемых современными браузерами инцидентов</p>
+
+<div></div>
+
+<p><a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Custom events page</a> <span id="result_box" lang="ru"><span class="hps">описывает, как</span> <span class="hps">шаблон кода события</span> <span class="hps">может быть использован в</span> <span class="hps">пользовательском коде</span><span>, чтобы</span> <span class="hps">определить новые</span> <span class="hps">типы событий</span><span>, испускаемые от</span> <span class="hps">пользовательских объектов</span><span>, зарегистрируйтесь</span> <span class="hps">функции</span> <span class="hps">слушателя</span>для <span class="hps">обработки</span> <span class="hps">этих</span> <span class="hps">событий</span><span>,</span> <span class="hps">и вызова</span> <span class="hps">события</span> <span class="hps">в коде</span> <span class="hps">пользователя</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Остальные</span> <span class="hps">страницы описывают</span><span>, как использовать</span> <span class="hps">события разных</span> <span class="hps">видов</span><span>, определенных</span> <span class="hps">в веб-браузерах</span><span>.</span> <span class="hps">К сожалению,</span> <span class="hps">эти события</span> <span class="hps">были определены</span> <span class="hps">по частям</span><span>,</span> <span class="atn hps">веб-</span><span>браузеры</span> <span class="hps">развивались</span> <span class="hps">таким образом, что</span> <span class="hps">нет</span> <span class="hps">удовлетворения</span> <span class="hps">систематическим</span> <span class="hps">характеристикам</span> <span class="hps">событий</span> <span class="hps">встроенным</span> <span class="hps">или</span> <span class="hps">определенным</span> в <span class="atn hps">современных веб-</span><span>браузерах.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span><strong>Устройство</strong>, на котором</span> <span class="atn hps">работа веб-</span><span>браузера</span> <span class="hps">может спровоцировать</span> <span class="hps">событие</span><span>, например</span> <span class="hps">связанное с</span> <span class="hps">изменением его</span> <span class="hps">положения и ориентации</span> <span class="hps">в реальном мире</span><span>,</span> <span class="hps">частично описано</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> и <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. Они<span id="result_box" lang="ru"> <span class="hps">разные, но</span> <span class="hps">похожи</span><span>,</span> <span class="hps">с измененой</span> <span class="hps">вертикальной ориентации</span> <span class="hps">устройства</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><strong><span>Окно в котором</span> <span class="hps">отображается</span> <span class="hps">браузер</span></strong> <span class="hps">может вызвать</span> <span class="hps">события</span><span>, к примеру</span><span>,</span> <span class="hps">измененить размер</span><span>, если пользователь</span> <span class="hps">максимизирует</span> <span class="hps">окно или</span> <span class="hps">изменит его размер</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><strong><span>Процесс загрузки</span></strong> <span class="hps">веб-страницы</span> <span class="hps">может вызвать</span> <span class="hps">ответное событие</span><span class="hps"> на завершение</span> <span class="hps">различных</span> <span class="hps">этапо</span><span class="hps">в</span> <span class="hps">загрузки,</span> анализирования <span class="hps">и перевода</span> <span class="hps">веб-страниц</span> <span class="hps">отображаемых пользователю</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span><strong>Взаимодействие пользователя</strong> с</span> <span class="hps">содержимым</span> <span class="hps">веб-страницы</span> <span class="hps">может вызвать</span> <span class="hps">события</span><span>.</span> <span class="hps">События</span><span>, вызванные</span> <span class="hps">взаимодействием</span> <span class="hps">пользователя</span> <span class="hps">развивались</span> <span class="hps">в первые годы</span> проектирования <span class="hps">браузера</span>, <span class="hps">и включают в себя</span> <span class="hps">сложную систему</span><span>, определяющую</span> <span class="hps">последовательность, в которой</span> <span class="hps">будет вызываться</span> <span class="hps">событие</span> <span class="hps">и</span> <span class="hps">манера, в которой</span> <span class="hps">эта последовательность</span> <span class="hps">может</span> <span class="hps">быть</span> <span class="hps">контролируемой</span><span>.</span> <span class="hps">Различные типы</span> <span class="hps">взаимодействия пользователя с</span> <span class="hps">управляемыми</span> <span class="hps">событиями:</span></span></p>
+
+<ul>
+ <li>обычное событие при нажатии,</li>
+ <li>событие, активированное мышью,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">событие жеста мышью</a>,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">события нажатия на экран</a> и устаревшие <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">экспериментальные события нажания на экран (от Mozilla)</a>.</li>
+</ul>
+
+<p><span id="result_box" lang="ru"><strong><span>Модификация</span> <span class="hps">в структуре веб-страницы</span> <span class="hps">или содержании</span></strong> <span class="hps">может быть</span> <span class="hps">вызвано некоторым</span> <span class="hps">событием</span><span>, </span> <span class="hps">описанным в</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a><span id="result_box" lang="ru"><span class="hps">, но</span> их<span class="hps"> использование </span> <span class="hps">устарело в</span> <span class="hps">пользу более </span><span class="hps">легкого</span></span> <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> подхода.</p>
+
+<p><span id="result_box" lang="ru"><strong><span class="hps">Потоки</span> <span class="hps">Медиа</span></strong>, <span class="hps">встроенный</span> <span class="hps">в</span> <span class="hps">HTML</span> <span class="hps">документа,</span> <span class="hps">может</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>,</span> <span class="hps">страница описания</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a>.</p>
+
+<p><span id="result_box" lang="ru"><strong><span class="hps">Сетевые</span> </strong><span class="hps"><strong>запросы</strong>, сделанные</span> <span class="atn hps">веб-</span><span>страницей, могут</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Есть</span> <span class="hps">много других источников</span> <span class="hps">событий, определенных</span> <span class="hps">в веб-браузере</span><span>,</span> <span class="hps">страницы которых</span> <span class="hps">пока не доступны</span> <span class="hps">в данном руководстве</span><span>.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><span class="hps">Примечание</span><span>:</span> <span class="hps">Это руководство</span> <span class="hps">событие</span> <span class="hps">Разработчик</span>а <span class="hps">нуждается в существенной</span> <span class="hps">работе</span><span>.</span><span>Структура должна</span> <span class="hps">быть</span> <span class="hps">реорганизована</span> <span class="hps">и страницы</span> <span class="hps">переписаны.</span> <span class="hps">Мы надеемся, что</span> <span class="hps">все, что вы</span><span class="hps"> знаете и должны знать</span> <span class="hps">о событиях</span> <span class="hps">будет опубликованно</span> <span class="hps">здесь.</span></span></p>
+</div>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ru/web/guide/events/media_events/index.html b/files/ru/web/guide/events/media_events/index.html
new file mode 100644
index 0000000000..655e71ec61
--- /dev/null
+++ b/files/ru/web/guide/events/media_events/index.html
@@ -0,0 +1,269 @@
+---
+title: 'События в медиа (audio, video) объектах'
+slug: Web/Guide/Events/Media_events
+tags:
+  - Видео
+  - Медиа
+  - аудио
+  - события
+translation_of: Web/Guide/Events/Media_events
+---
+<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведен их список и описание.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Название события</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td><code>abort</code></td>
+   <td>Отправляется, когда воспроизведение прерывается; Например, если воспроизведение медиа прерывается и начинается с самого начала, это событие будет отправлено.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplay")}}</code></td>
+   <td>Отправляется, когда доступно достаточно данных для того, что бы медиа могло воспроизвестись, по крайней мере, в течение нескольких кадров. Соответствует состоянию (readyState) HAVE_ENOUGH_DATA.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplaythrough")}}</code></td>
+   <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остается, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("durationchange")}}</code></td>
+   <td>Метаданные были загружены или изменены, что указывает на изменение в продолжительности медиа. Может быть отправлено, например, когда медиа загружено достаточно для того, чтобы продолжительность уже была известна.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("emptied")}}</code></td>
+   <td>Медиа стало пустым. Например, это событие отправляется, если медиа уже загружено (или частично заргужено), и метод <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> был вызван что бы его перезагрузить.</td>
+  </tr>
+  <tr>
+   <td>encrypted <span style="line-height: 1.5;">{{experimental_inline}}</span></td>
+   <td>The user agent has encountered initialization data in the media data.</td>
+  </tr>
+  <tr>
+   <td><code>ended</code></td>
+   <td>Отправляется, когда воспроизведение завершено.</td>
+  </tr>
+  <tr>
+   <td><code>error</code></td>
+   <td>Отправляется, когда произошла ошибка.  Атрибут <code>error</code> медиа объекта содержит более подробную информацию об ошибке. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a>, что бы узнать подробнее.</td>
+  </tr>
+  <tr>
+   <td><code>interruptbegin</code></td>
+   <td>Отправляется, когда воспроизведение на Firefox OS устройстве прервано по любой из причин - например, если приложение ушло в фон или аудио с большим приоритетом начало воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>.</td>
+  </tr>
+  <tr>
+   <td><code>interruptend</code></td>
+   <td>Отправляется, когда ранее прерванное воспроизвдеение на Firefox OS устройстве продолжает воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadeddata")}}</code></td>
+   <td>Завершена загрузка первого кадра (frame) медиа.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadedmetadata")}}</code></td>
+   <td>Метаданные медиа были загружены; все атрибуты теперь содержат максимум информации.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadstart")}}</code></td>
+   <td>Отправляется, когда начинается загрузка медиа.</td>
+  </tr>
+  <tr>
+   <td><code>mozaudioavailable</code></td>
+   <td>Sent when an audio buffer is provided to the audio layer for processing; the buffer contains raw audio samples that may or may not already have been played by the time you receive the event.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("pause")}}</code></td>
+   <td>Отправляется, когда воспроизведение приостановлено.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("play")}}</code></td>
+   <td>Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("playing")}}</code></td>
+   <td>Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).</td>
+  </tr>
+  <tr>
+   <td><code>{{event("progress")}}</code></td>
+   <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объеме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("ratechange")}}</code></td>
+   <td>Отправляется, когда изменяется скорость воспроизведения.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeked")}}</code></td>
+   <td>Отправляется, когда операция поиска завершена.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeking")}}</code></td>
+   <td>Отправляется, когда начинается операция поиска.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("stalled")}}</code></td>
+   <td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("suspend")}}</code></td>
+   <td>Отправляется, когда загрузка медиа приостановлена. Это может прозойти как потому, что загрузка была завершена, так и по другим причинам.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("timeupdate")}}</code></td>
+   <td>Отправляется, когда изменяется значение атрибута <code>currentTime.</code></td>
+  </tr>
+  <tr>
+   <td><code>{{event("volumechange")}}</code></td>
+   <td>Отправляется, когда изменяется громкость звука (также когда звук включен или выключен).</td>
+  </tr>
+  <tr>
+   <td><code>{{event("waiting")}}</code></td>
+   <td>Отправляется, когда операция (напр. воспроизведение) была отложена до завершение другой операции (напр. поиск).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы можете легко следить за этими событиями, используя следующий код:</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+</pre>
+
+<p>В этом примере первый элемент получает видео и вешает на него событие "seeked". Обработчик вызывает метод элемента play(), который начинает воспроизведение.</p>
+
+<p>Затем, в строке 3 примера, устанавливается атрибут currentTime элемента в значение 10.0, что инициирует переход к десятой секунде видео. Это приводит к отправлению события "seeking" после начала операции, и события "seeked" после её завершения.</p>
+
+<p>Другими словами, этот пример пытается перейти к 10-секундной видео, после чего начинает воспроизведение.</p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatNo }}</span></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html
new file mode 100644
index 0000000000..b9f689caa2
--- /dev/null
+++ b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html
@@ -0,0 +1,130 @@
+---
+title: Обзор событий и обработчиков
+slug: Web/Guide/Events/Overview_of_Events_and_Handlers
+translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
+---
+<div class="summary">
+<p>Эта обзорная статья о событиях и их обработчиках описывает шаблон проектирования кода, который используется для реагирования на события, возникающие, когда браузер получает доступ к web-странице, и содержит подборку типов подобных событий, которые современные брауезеры могут обрабатывать.</p>
+</div>
+
+<p>События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с ее содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчет времени анимации.</p>
+
+<p>События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпановке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остается неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети<em>,</em> скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы<em>,</em> нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи <em>"Неудобные API: Теория DOM",</em> которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.</p>
+
+<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div>
+
+<p>Второй подход изменяет последние шаги, переходя от просторого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер еще не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">этот</a>.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.</p>
+
+<h2 id="Шаблон_проектирования_событий">Шаблон проектирования событий</h2>
+
+<p>Система событий, по своей сути, простой программный шаблон проектирования. Он начинается с соглашения о виде события и:</p>
+
+<ul>
+ <li>имени-строки, используемой для собыйтия,</li>
+ <li>типа структуры данных, используемых для представления ключевых свойств события,</li>
+ <li>объекта JavaScript, который будет 'вызывать' это событие.</li>
+</ul>
+
+<p>Шаблон реализуется с помощью:</p>
+
+<ul>
+ <li>определение JavaScript-функции, которая принимает в качестве аргумента структуру данных, которая была согласована ранее, и</li>
+ <li>регистрации функции с помощью имени-строки через объект, который будет вызывать событие.</li>
+</ul>
+
+<p>Функция считается "слушателем" или "обработчиком", где оба именами взаимнозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">статье о пользовательских событиях</a>. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.</p>
+
+<p>Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта <code>EventPrototype</code>. Для регистратрации функции, которая будет обрабатывать эту структуру даных, используется метод, называемый <code>addEventListener</code>, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.</p>
+
+<h2 id="Button_Event_Handler" name="Button_Event_Handler">Пример обработчика события кнопки</h2>
+
+<p>К примеру, браузерный элемент <code>button</code> предназначен для вызова события с именем  <code>'click'</code> в ответ на нажатие кнопки мыши или прикосновене пальца к чувствительной части экрана. В HTML мы можем определить  <code>button</code> как:</p>
+
+<pre class="brush: html">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</pre>
+
+<p>и, в коде JavaScript, мы можем сначала определить функцию для прослушивания этого события <code>'click'</code> :</p>
+
+<pre class="brush: js">var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};</pre>
+
+<p>и затем зарегестрировать свою функцию с помощью объекта <code>Button</code> или со стороны скрипта, используя представление DOM (Document Object Model) на HTML-странице:</p>
+
+<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);</pre>
+
+<p>или на самой HTML-странице, добавив функцию как значение атрибута <code>'onclick'</code>, хотя этот вариант обычно используется на очень  простых web-страницах.</p>
+
+<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p>
+
+<p>Этот код полагается на соглашение о том, что существует некоторый вид события, называемый <code>'click'</code> , который вызовет все функции-слушатели (или 'обработчи') с объектом-аргументом <code>Event</code> (на данный момент, в этом случае производный от объекта <code>MouseEvent</code> ) и будет запущен после манипуляций пользователя с элементами <code>button</code> на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, <code>buttonDOMElement</code> объекта JavaScript вызовет функцию <code>example_click_handler</code> с объектом <code>Event</code> в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту <code>ev</code>, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.</p>
+
+<p>Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:</p>
+
+<pre class="brush: js">var funcInit = function(){
+    // user code goes here and can safely address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+</pre>
+
+<p>так что этот код будет вызван только после того, как объект <code>document</code> вызовет событие <code>'DOMContentLoaded'</code>, потому что HTML был проанализирован и были созданы объекты Javasript,   представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передает аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.</p>
+
+<p>Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает ассинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.</p>
+
+<h2 id="Важные_события">Важные события</h2>
+
+<p>Web-браузеры определяют большое число событий, поэтому не практично описывать их все. <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> призван содержать список стандартных событий, используемых в современных браузерах.</p>
+
+<p>В общем случае, события различного вида выделяют, основываясь на объекте, который вызывает данное событие, включая:</p>
+
+<ul>
+ <li>объект <code>window</code>, на случай изменения размера браузера,</li>
+ <li>объект <code>window.screen</code>, на случай изменения положения устройства,</li>
+ <li>объект <code>document</code>, включая загрузку, модификацию, пользовательское взаимодействие и разгрузку страницы,</li>
+ <li>объект в DOM (объектная модель документа) дереве, включая пользовательское взаимодействие или изменения,</li>
+ <li>объект <code>XMLHttpRequest</code>, используемый для запросов сети, и</li>
+ <li>медиа-объекты, такие как <code>audio</code> и <code>video</code>, когда медиа-потоковые плееры изменяют состояние.</li>
+</ul>
+
+<p>хотя этот список на данный момент неполный.</p>
+
+<p>Некоторые события, которые стоит отметить:</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Этот список событий будет нуждаться в доработке, чтобы соответствовать действительности; эта работа ожидает некоторой глобальной реорганизации в документе. Так же нужно найти хорошее объяснение событий, включая события во время загрузки страницы, таких, как частично описаных в <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">этой статье</a>  или  <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">этом вопросе на  Stack Overflow</a>. </em></p>
+</div>
+
+<ul>
+ <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a>, когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,</li>
+ <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a>, когда высота или ширина окна браузера была измененеа пользователем,</li>
+ <li>объект DOM <a href="/en-US/docs/Web/API/Document"><code>document</code></a>, представляющий HTML-документ, вызывает событие, называемое <code><a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code>, когда документ закончил загрузку,</li>
+ <li>объект узла DOM, такой как <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> или <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a>, вызывающий событие, называемое <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a>, когда пользователь нажимает кнопку мыши, пока ее указатель находится поверх узла DOM на HTML-странице.</li>
+</ul>
+
+
+
+<h2 id="Иерархия_объекта_событий">Иерархия объекта событий</h2>
+
+<p>Web-браузер определяет множество событий различного вида. Каждое описание включает, как структуру данных, передающуюся в обработчика, объект, который наследуется от объекта <code>EventPrototype</code>.</p>
+
+<p>Частичная диаграма иерархии класса объекта событий:</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Эта диаграма неполная.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p>
+
+<p>Web API Документация содержит <a href="/en-US/docs/Web/API/Event">страницу, описывающую объект событий</a>, который так же включает известные события DOM, подклассы объекта <code>Event</code>.</p>
+
+<h2 id="Документации">Документации</h2>
+
+<p>Три ресурса на MDN (Mozilla Developer Network) частично полезные для программистов, желащих работать с событиями:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Гайд по событиям</a>, который является частью <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li>
+ <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li>
+ <li>Web API Документация по объекту <a href="/en-US/docs/Web/API/Event"><code>Event</code></a>.</li>
+</ul>
diff --git a/files/ru/web/guide/events/создание_и_вызов_событий/index.html b/files/ru/web/guide/events/создание_и_вызов_событий/index.html
new file mode 100644
index 0000000000..9e7a8f099b
--- /dev/null
+++ b/files/ru/web/guide/events/создание_и_вызов_событий/index.html
@@ -0,0 +1,92 @@
+---
+title: Создание и вызов событий
+slug: Web/Guide/Events/Создание_и_вызов_событий
+tags:
+  - DOM
+  - JavaScript
+  - events
+  - события
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют <strong>исскуственными</strong> событиями, по отношению к событиям, производимым браузером.</p>
+
+<h2 id="Создание_собственных_событий">Создание собственных событий</h2>
+
+<p>События могут быть созданы с помощью  конструктора <code><a href="/ru/docs/Web/API/Event">Event</a></code>:</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Подписываемся на событие
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Вызываем событие
+elem.dispatchEvent(event);</pre>
+
+<p>Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже <a href="#The_old-fashioned_way">"Старомодный способ"</a>.</p>
+
+<h3 id="Добавление_пользовательских_данных_–_CustomEvent()">Добавление пользовательских данных – CustomEvent()</h3>
+
+<p>Чтобы добавить больше данных к объекту event, существует интерфейс <a href="/ru/docs/Web/API/CustomEvent">CustomEvent</a>, и вы можете использовать свойство <u><strong>detail</strong></u>, чтобы передать собственные данные. Например, событие может быть создано так:</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>Это позволит вам получить доступ к дополнительным данным в обработчике:</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="Старомодный_способ"><a id="The_old-fashioned_way" name="The_old-fashioned_way">Старомодный способ</a></h3>
+
+<p>Старый способ создать событие использует API в стиле Java. Пример:</p>
+
+<pre class="brush: js">// Создание события
+var event = document.createEvent('Event');
+
+// Назначить имя событию
+event.initEvent('build', true, true);
+
+// Слушаем событие
+document.addEventListener('build', function (e) {
+  // e.target соотетствует объекту document
+}, false);
+
+// target события может быть любой элемент
+document.dispatchEvent(event);
+
+</pre>
+
+<h2 id="Вызов_встроенных_событий">Вызов встроенных событий</h2>
+
+<p>Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. <a class="external" href="/samples/domref/dispatchEvent.html">Просмотр действующих примеров.</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/ru/web/guide/html/content_categories/index.html b/files/ru/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..7a7b3eb1fe
--- /dev/null
+++ b/files/ru/web/guide/html/content_categories/index.html
@@ -0,0 +1,171 @@
+---
+title: Категории контента
+slug: Web/Guide/HTML/Content_categories
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Каждый элемент <a href="/ru/docs/Web/HTML">HTML</a> принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задает на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит <em>ни в одну</em> из этих категорий.</span></p>
+
+<p>Существует три типа категорий контента:</p>
+
+<ul>
+ <li>Основные категории контента, описывающие общие для многих элементов правила;</li>
+ <li>Категории контента для элементов форм, описывающие общие правила для элементов форм;</li>
+ <li>Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.</li>
+</ul>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Более подробное обсуждение данных категорий контента и их сравнительных особенностей выходит за рамки данной статьи; можно обратиться к <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">соответствующим разделам спецификации HTML</a> (на английском).</p>
+</div>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Main_content_categories" name="Main_content_categories">Основные категории контента</h2>
+
+<h3 id="Метаданные">Метаданные</h3>
+
+<p>Элементы, принадлежащие к <em>категории метаданных,</em> изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую <em>дополнительную</em> информацию о документе.</p>
+
+<p>Элементами метаданных являются:  {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} и {{HTMLElement("title")}}.</p>
+
+<h3 id="Основной_поток">Основной поток</h3>
+
+<p>Элементы основного потока обычно содержат текст и встроенный контент.</p>
+
+<p>{{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} и Текст.</p>
+
+<p>Несколько других элементов, которые тоже принадлежат к этому типу, но требуют определённых условий:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, только внутри элемента {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+ <li>{{HTMLElement("meta")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+ <li>{{HTMLElement("style")}}, при наличии атрибута {{htmlattrxref("scoped","style")}}</li>
+</ul>
+
+<h3 id="Секционный_контент">Секционный контент</h3>
+
+<p>Подобные элементы создают <a href="/ru/docs/Sections_and_Outlines_of_an_HTML5_document">секции (блоки) в текущей структуре документа</a>, определяющие область действия <a href="/ru/docs/Web/Guide/HTML/Content_categories#Заголовочный_контент">заголовочного контента</a> и элементов {{HTMLElement("header")}} и {{HTMLElement("footer")}}</p>
+
+<p>К этой категории принадлежат элементы {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} и {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p>Не стоит путать данную модель контента с категорией <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">корня задания разделов</a>, которая изолирует свое содержимое от обычной структуры.</p>
+</div>
+
+<h3 id="Заголовочный_контент_2"><a name="Заголовочный_контент">Заголовочный контент</a></h3>
+
+<p>Заголовочный контент задает заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.</p>
+
+<p>Данной категории принадлежат такие элементы, как {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} и {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Э</em>лемент {{HTMLElement("header")}} сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.</p>
+</div>
+
+<div class="note">
+<p>Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удален из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.</p>
+</div>
+
+<h3 id="Phrasing_content" name="Phrasing_content">Фразовый контент</h3>
+
+<p>Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.</p>
+
+<p>К данной категории принадлежат следующие элементы:  {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} и обычный текст (не только состоящий из символов пробелов).</p>
+
+<p>Еще несколько элементов входят в данную категорию при соблюдении особых условий:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("area")}}, только внутри элемента {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("ins")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("link")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+ <li>{{HTMLElement("map")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("meta")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+</ul>
+
+<h3 id="Встроенный_контент">Встроенный контент</h3>
+
+<p>Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имен. Элементами данной категории являются: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Интерактивный_контент"><a name="interactive_content">Интерактивный контент</a></h3>
+
+<p>К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.<br>
+ Некоторые элементы считаются интерактивным контентом только при соблюдении определенных условий:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, если указан атрибут {{htmlattrxref("controls", "audio")}}</li>
+ <li>{{HTMLElement("img")}}, если указан атрибут {{htmlattrxref("usemap", "img")}}</li>
+ <li>{{HTMLElement("input")}}, если атрибут {{htmlattrxref("type", "input")}} не скрыт</li>
+ <li>{{HTMLElement("menu")}}, если атрибут {{htmlattrxref("type", "menu")}} имеет значение <code>toolbar</code></li>
+ <li>{{HTMLElement("object")}}, если указан атрибут {{htmlattrxref("usemap", "object")}}</li>
+ <li>{{HTMLElement("video")}}, если указан атрибут {{htmlattrxref("controls", "video")}}</li>
+</ul>
+
+<h3 id="Явный_контент">Явный контент</h3>
+
+<p>Контент считается явным, когда он не скрыт и не является пустым, это контент, который отображен и предметен. У элементов потокового или фразового контента должен быть хотя бы один явный узел.</p>
+
+<h3 id="Контент_форм">Контент форм</h3>
+
+<p>Контент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом <strong>form</strong>. Владелецем формы является либо элемент {{HTMLElement("form")}}, либо элемент, id которого указан в атрибуте <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>Данная категория включает несколько подкатегорий:</p>
+
+<dl>
+ <dt><a name="Form_listed">listed</a></dt>
+ <dd>Элементы, перечисленные в IDL коллекциях <a href="/ru/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> и fieldset.elements. Включают {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, и {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">labelable</a></dt>
+ <dd>Элементы, которые могут ассоциироваться с элементами {{HTMLElement("label")}}. Включают {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">submittable</a></dt>
+ <dd>Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">resettable</a></dt>
+ <dd>Элементы, которые могут быть затронуты при сбросе данных формы. Включают {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} и {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Вторичные_категории">Вторичные категории</h2>
+
+<p>Существуют некоторые вторичные классификации элементов, о которых тоже полезно знать.</p>
+
+<h3 id="Элементы_поддержки_скриптов">Элементы поддержки скриптов</h3>
+
+<p>Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. Вместо этого они служат для внедрения скриптов, путем либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.</p>
+
+<p>Элементами поддержки скриптов являются:</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="Прозрачная_модель_контента">Прозрачная модель контента</h2>
+
+<p>Если элемент обладает прозрачной моделью контента, его содержимое должно быть структурировано таким образом, чтобы оно оставалось валидным HTML5, даже при удалении прозрачного элемента или заменой его на дочерние элементы.</p>
+
+<p>Например, элементы {{HTMLElement("del")}} и {{HTMLELement("ins")}} являются прозрачными:</p>
+
+<pre>&lt;p&gt;Мы почитаем следующие истины &lt;del&gt;&lt;em&gt;священными &amp;amp; неоспоримыми&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;само собой разумеющимися&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Если удалить эти элементы, данный фрагмент все равно будет представлять собой валидный HTML.</p>
+
+<pre>&lt;p&gt;Мы почитаем следующие истины &lt;em&gt;священными &amp;amp; неоспоримыми&lt;/em&gt; само собой разумеющимися.&lt;/p&gt;
+</pre>
+
+<h2 id="Прочие_модели_контента">Прочие модели контента</h2>
+
+<p>Корень задания разделов.</p>
diff --git a/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html b/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html
new file mode 100644
index 0000000000..2dcdb6babb
--- /dev/null
+++ b/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html
@@ -0,0 +1,314 @@
+---
+title: Drag Operations
+slug: Web/Guide/HTML/Drag_and_drop/Drag_operations
+translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>Ниже описаны шаги, которые происходят при drag and drop операции.</p>
+
+<p class="note">Drag операции описываются в документе, используя {{domxref("DataTransfer")}} интерфейс. Этот документ не использует не{{domxref("DataTransferItem")}} интерфейс, не{{domxref("DataTransferItemList")}} интерфейс.</p>
+
+<h2 id="draggableattribute" name="draggableattribute"><code>draggable</code> атрибуты</h2>
+
+<p>На веб-странице, в некоторых случаях используется поведение drag (перетаскивания) по умолчанию. Включая выделенный текст, изображения и ссылки. Когда изображение иои ссылка переносятся, URL изображения или ссылки устанавливается в качестве данных drag и перетаскивание начинается. Для других элементов, они должны быть частью выделения для выполнения перетаскивания по умолчанию. Чтобы увидеть это в действии, выделите область веб-страницы, а затем нажмите и удерживайте кнопку мыши и перетащите выделение. Появится специфичный для ОС рендеринг выделенного фрагмента и будет следовать за указателем мыши при перетаскивании. Однако это поведение является только drag поведением по умолчанию, если нет слушателей, определяющих данные для перетаскивания.</p>
+
+<p>В HTML, кроме поведения по умолчанию изображений, ссылок и выделенных областей, ноикакие другие элементы по умолчанию не переносятся.</p>
+
+<p>Для перетаскивания других HTML-элементов, должны быть выполнены три пункта :</p>
+
+<ol>
+ <li>Установить <code>{{htmlattrxref("draggable")}}="</code><code>true"</code> на элемент, который вы хотите сделать перетаскиваемым.</li>
+ <li>Добавить слушатель события <code>{{event("dragstart")}}</code>.</li>
+ <li><a href="/en-US/docs/Web/API/DataTransfer/setData">Установить данные перетаскивания</a> в слушатель выше.</li>
+</ol>
+
+<p>Вот пример, который позволяет перетаскивать часть содержимого.</p>
+
+<pre class="brush: html">&lt;p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/p&gt;
+</pre>
+
+<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> установлен в  <code>"true"</code>, т.о. этот элемент становится перетаскиваемым. Если этот атрибут был опущен или установлен в <code>"false"</code>, то элемент не может быть перенесен, и вместо этого будет выбран текст.</p>
+
+<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> может быть использован для любого элемента, включаяизображения и ссылки. Однако, для последних двух, значение по умолчанию - <code>true</code>, т.о. вы можете только использвать атрибут  <code>{{htmlattrxref("draggable")}}</code> со значением <code>false</code> для отключение перетаскивания этих элементов.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Когда элемент становится перетаскиваемыми, tтекст или другие элементы в нем больше не могут быть выбраны обычным способом, щелкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу <kbd>Alt</kbd>  чтобы выбрать текст с помощью мыши или клавиатуры.</p>
+</div>
+
+<h2 id="dragstart" name="dragstart">Начало операции перетаскивания</h2>
+
+<p>В примере, слушатель добавлен для события {{event("dragstart")}} с использованием атрибута<code>{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}</code>.</p>
+
+<pre class="brush: html">&lt;p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/p&gt;
+</pre>
+
+<p>Когда пользователь начинает перетаскивание, запускается событиеdrag, the {{event("dragstart")}}.</p>
+
+<p>В этом примере слушатель {{event("dragstart")}} добавлен к самому перемещаемом элементу. Однако, вы можете слушать более высокого предка, так как событие перетаскивание высплывает вверх как и большинство событий.</p>
+
+<p>Внутри события {{event("dragstart")}}, вы можете указать <strong>drag данные</strong>, <strong>изображжение отклика</strong>, <strong>drag-эффекты</strong>, все это описано ниже. Однако, обязательны только <strong>drag данные</strong>. (Изображение и drag-эффекты по умолчанию, подходят в большинстве ситуаций)</p>
+
+<h2 id="dragdata" name="dragdata">Drag-данные</h2>
+
+<p>Все {{domxref("DragEvent","drag events")}} имеют свойство, называемое{{domxref("DragEvent.dataTransfer","dataTransfer")}}, которое содержит drag-данные (<code>dataTransfer</code> это {{domxref("DataTransfer")}} object).</p>
+
+<p>Когда происходит перетаскивание, данные должны быть связаны с перетаскиванием, которое определяет, что перетаскивается. Например, при перетаскивании выделенного текста в текстовое поле данные, связанные с элементом данных перетаскивания, являются самим текстом. Аналогично, при перетаскивании ссылки на веб-странице элемент данных перетаскивания является URL-адресом ссылки.</p>
+
+<p>{{domxref("DataTransfer","drag data")}} содержит два параметра, <strong>тип</strong> (или формат) данных, и <strong>значение </strong>данных. Формат это строковый тип (такой как <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> текстовых данных), значение - строка текста. Когда начинается перетаскивание, вы добавляете данные, предоставляя тип и данные. Во время перетаскивания в слушателе события для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> , вы используете типы данных перетаскиваемых данных, чтобы проверить, разрешено ли удаление. Например, цель drop, которая принимает ссылки, будет проверять тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code>. В течение события drop, слушатель будет получать данные тащат и вставить его на место.</p>
+
+<p>Свойство {{domxref("DataTransfer","drag data's")}} {{domxref("DataTransfer.types","types")}} возвращает список MIME-типов {{domxref("DOMString")}}, таких как <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> или <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="image/jpeg">image/jpeg</a></code>. Вы также можете создавать свои собственные типы. Большинство основные используемых типов описаны в  <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a>.</p>
+
+<p>Перетаскивание может включать элементы данных нескольких различных типов. Это позволяет предоставлять данные в более специфических типах, часто пользовательских, но по предоставляет резервные данные для drop, которые не поддерживают более специфические типы. Как правило, наименее специфичным типом будут обычные текстовые данные, использующие тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code>. Эти данные будут простым текстовым представлением.</p>
+
+<p>Установка элементов drag-данных {{domxref("DragEvent.dataTransfer","dataTransfer")}}, используя метод {{domxref("DataTransfer.setData","setData()")}}. Требуется два аргумента: тип данных и значение данных. Например:</p>
+
+<pre class="brush: js">event.dataTransfer.setData("text/plain", "Text to drag");
+</pre>
+
+<p>Здесь, значение -  "Text to drag", формат -  <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code>.</p>
+
+<p>Вы можете предусмотреть данные в нескольких форматах. Сделаем это, вызовем метод  {{domxref("DataTransfer.setData","setData()")}} несколько раз с различными форматами. Вы должны вызывать его с форматами от большей специфичности к меньшей.</p>
+
+<pre class="brush: js">const dt = event.dataTransfer;
+dt.setData("application/x.bookmark", bookmarkString);
+dt.setData("text/uri-list", "https://www.mozilla.org");
+dt.setData("text/plain", "https://www.mozilla.org");
+</pre>
+
+<p>Добавлены данные трех различных форматов. Первый тип - <code>application/x.bookmark</code>, пользовательский тип.Другие приложения не поддерживают данный тип, но вы можете использовать пользовательский тип для перетаскивания между областями в одном приложениее или на одной странице.</p>
+
+<p>Предоставляя данные и в других типах, мы также можем поддерживать перетаскивание в другие приложения в менее специфичных формах. Тип <code>application/x.bookmark</code> может предоставлять данные с  более подробной информацией для использования в приложении, в то время как другие типы могут включать только один URL-адрес или текстовую версию.</p>
+
+<p>Обратите внимание, что и <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> и <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> cодержат одни и те же данные в этом примере.  Это часто бывает так, но это не обязательно.</p>
+
+<p>Если вы попытаетесь добавить данные дважды с тем же форматом, новые данные заменят старые данные, но в той же позиции в списке типов, что и старые данные.</p>
+
+<p>Вы можете очистить данные, используя метод {{domxref("DataTransfer.clearData","clearData()")}}, который принимает один аргумент: тип данных для удаления.</p>
+
+<pre class="brush: js">event.dataTransfer.clearData("text/uri-list");
+</pre>
+
+<p>Аргумент <code>type</code> в методе {{domxref("DataTransfer.clearData","clearData()")}} опционален. Если <code>type</code> не указан, данные, связанные со всеми типами, удаляются. Если перетаскивание не содержит элементов данных перетаскивания или все элементы были впоследствии очищены, то перетаскивание не произойдет.</p>
+
+<h2 id="dragfeedback" name="dragfeedback">Настройка изображения отклика drag</h2>
+
+<p>Когда происходит перетаскивание, полупрозрачное изображение генерируется из цели перетаскивания (событие "{{event("dragstart")}}" элемента срабатывает), и следует за указателем пользователя во время перетаскивания. Это изображение создается автоматически, поэтому вам не нужно создавать его самостоятельно. Однако вы можете использовать {{domxref("DataTransfer.setDragImage","setDragImage()")}} для задания пользовательского изображения отклика перетаскивания.</p>
+
+<pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset);
+</pre>
+
+<p>Необходимы три аргумента. Первый - это ссылка на изображение. Эта ссылка обычно относится к элементу <code>&lt;img&gt;</code>, но также может относиться к элементу <code>&lt;canvas&gt;</code> или любому другому элементу. Изображение отклика будет генерироваться из того, как изображение выглядит на экране, для изображений они будут нарисованы в их первоначальном размере. Второй и третий аргументы метода {{domxref("DataTransfer.setDragImage","setDragImage()")}} - это смещения, в которых изображение должно появляться относительно указателя мыши.</p>
+
+<p>Также можно использовать изображения и canvas, которых нет в документе. Этот метод полезен при рисовании пользовательских изображений перетаскивания с помощью элемента canvas, как показано в следующем примере:</p>
+
+<pre class="brush: js">function dragWithCustomImage(event) {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 50;
+
+  const ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  const dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+</pre>
+
+<p>В этом примере мы делаем один canvas перетаскивания. Поскольку размер холста составляет 50×50 пикселей, мы используем смещение половины этого (25), чтобы изображение было центрировано на указателе мыши.</p>
+
+<h2 id="drageffects" name="drageffects">Drag эффекты</h2>
+
+<p>При перетаскивании можно выполнить несколько операций. Операция  <code>copy</code> используется для указания на то, что перетаскиваемые данные будут скопированы из текущего местоположения в место перетаскивания. Операция <code>move</code> используется для указания на то, что перетаскиваемые данные будут перемещены, а операция <code>link</code> используется для указания на то, что между исходным и удаляемым местоположениями будет создана некоторая форма связи или соединения.</p>
+
+<p>Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в слушателе событий<code>{{event("dragstart")}}</code>.</p>
+
+<pre class="brush: js">event.dataTransfer.effectAllowed = "copy";
+</pre>
+
+<p>В этом примере разрешена только <strong>копия</strong>.</p>
+
+<p>Вы можете комбинировать значения различными способами:</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>никакая операция не разрешена</dd>
+ <dt><code>copy</code></dt>
+ <dd>только <code>copy</code></dd>
+ <dt><code>move</code></dt>
+ <dd>только <code>move</code></dd>
+ <dt><code>link</code></dt>
+ <dd>только <code>link</code></dd>
+ <dt><code>copyMove</code></dt>
+ <dd>только <code>copy</code> или <code>move</code></dd>
+ <dt><code>copyLink</code></dt>
+ <dd>только <code>copy</code> или <code>link</code></dd>
+ <dt><code>linkMove</code></dt>
+ <dd>только <code>link</code> или <code>move</code></dd>
+ <dt><code>all</code></dt>
+ <dd>только <code>copy</code>, <code>move</code>, или <code>link</code></dd>
+ <dt>uninitialized</dt>
+ <dd>Значение по умолчанию <code>all</code>.</dd>
+</dl>
+
+<p>Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на <code>copyMove</code> позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}},  то любая операция разрешена, как и со значением '<code>all</code>'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определенные типы.</p>
+
+<p>Во время операции перетаскивания, слушатель для событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code> может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство,  {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - <code>none</code>, <code>copy</code>, <code>move</code>, или <code>link</code>. Комбинированные значения для этого свойства не используются.</p>
+
+<p>С событиями <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code>, свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} инициализируется в соответствии с запросом пользователя. Пользователь может изменить желаемый эффект, нажав клавиши-модификаторы. Хотя точные используемые клавиши различаются в зависимости от платформы, обычно клавиши  <kbd>Shift</kbd> и <kbd>Control</kbd> используются для переключения между копированием, перемещением и связыванием. Указатель мыши изменится, чтобы указать, какая операция требуется. Например, для <code>copy</code> курсор может появиться со знаком плюс рядом с ним.</p>
+
+<p>Вы можете изменять свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} во время событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code>, например, определенная drop-цель поддерживает только определенные операции. Вы можете изменить свойство {{domxref("DataTransfer.dropEffect","dropEffect")}}, чтобы переопределить действие пользователя, и обеспечить выполнение специфичной  операции перетаскивания при ее наступлении. Обратите внимание, что этот эффект должен быть указан в списке свойств {{domxref("DataTransfer.effectAllowed","effectAllowed")}}. В противном случае ему будет присвоено другое допустимое значение.</p>
+
+<pre class="brush: js">event.dataTransfer.dropEffect = "copy";
+</pre>
+
+<p>В этом примере выполняется эффект копирования.</p>
+
+<p>Вы можете использовать значение <code>none</code>, чтобы указать, что в этом месте не допускается удаление, хотя в этом случае лучше не отменять событие.</p>
+
+<p>В событиях <code>{{event("drop")}}</code> и <code>{{event("dragend")}}</code>, yвы можете проверить свойства {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения того, какой эффект был в конечном итоге выбран.  Если выбран эффект "<code>move</code>",то исходные данные должны быть удалены из источника перетаскивания в событии<code>{{event("dragend")}}</code>.</p>
+
+<h2 id="droptargets" name="droptargets">Указание drop-целей</h2>
+
+<p>Слушатель для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> используются для указания допустимых drop-целей, то есть мест, где могут быть сброшены перетаскиваемые элементы. Большинство областей веб-страницы или приложения не являются допустимыми местами для сброса данных. Таким образом, обработка этих событий по умолчанию не допускает сброса перетаскиваемых данных.</p>
+
+<p>Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события <code>dragenter</code> и <code>dragover</code>.  Это можно сделать, либо вернув <code>false</code> из определенных атрибутом слушателя событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.</p>
+
+<pre class="brush: html">&lt;div ondragover="return false"&gt;
+&lt;div ondragover="event.preventDefault()"&gt;
+</pre>
+
+<p>Вызывая метод {{domxref("Event.preventDefault","preventDefault()")}} во время обоих событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> укажите, что падение разрешено в этом месте. Однако обычно вы захотите вызвать метод  {{domxref("Event.preventDefault","preventDefault()")}} события только в определенных ситуациях (например, только при перетаскивании ссылки).</p>
+
+<p>Для этого вызовите функцию, которая проверяет условие и отменяет событие только при его выполнении. Если условие не выполнено, не отменяйте событие, и сброс перетаскиваемых данных не произойдет, если пользователь отпустит кнопку мыши.</p>
+
+<p>Наиболее распространенным является принятие или отклонение сброса в зависимости от типа данных перетаскивания при передаче данных — например, разрешение для изображений, ссылок или и того, и другого. Для этого вы можете проверить свойство {{domxref("DataTransfer.types","types")}} события {{domxref("DragEvent.dataTransfer","dataTransfer")}} (свойство). Свойство {{domxref("DataTransfer.types","types")}} возвращает массив из строк, добавленных при начале перетаскивания, в порядке от наиболее значимого к наименее значимому.</p>
+
+<pre class="brush: js">function doDragOver(event) {
+  const isLink = event.dataTransfer.types.includes("text/uri-list");
+  if (isLink) {
+    event.preventDefault();
+  }
+}</pre>
+
+<p>В этом примере мы используем метод <code>includes</code>  чтобы проверить, присутствует ли тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> в списке типов. Если это так, мы отменим событие, так что сброс становится разрешен. Если перетаскиваемые данные не содержат ссылки, событие не будет отменено, и сброс не может произойти в этом месте.</p>
+
+<p>Вы также можете установить либо свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, либо свойство{{domxref("DataTransfer.dropEffect","dropEffect")}}, либо оба одновременно, если вы хотите указать более конкретные сведения о типе операции, которая будет выполнена. Естественно, изменение любого свойства не будет иметь никакого эффекта, если вы не отмените событие.</p>
+
+<h2 id="dropfeedback" name="dropfeedback">Drop Feedback</h2>
+
+<p>There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property.</p>
+
+<p>Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a '<code>copy</code>' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.</p>
+
+<p>However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the <code>:-moz-drag-over</code> CSS pseudoclass on a drop target.</p>
+
+<pre class="brush: css">.droparea:-moz-drag-over {
+  outline: 1px solid black;
+}
+</pre>
+
+<p>In this example, the element with the class <code>droparea</code> will receive a 1 pixel black outline while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the <code>{{event("dragenter")}}</code> event.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> You must cancel the <code>{{event("dragenter")}}</code> event for this pseudoclass to apply, as this state is not checked for the <code>{{event("dragover")}}</code> event.</p>
+</div>
+
+<p>For more complex visual effects, you can also perform other operations during the <code>{{event("dragenter")}}</code> event. For example, by inserting an element at the location where the drop will occur. This might be an insertion marker, or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en-US/docs/XUL/image" title="image">image</a> or <a href="/en-US/docs/XUL/separator" title="separator">separator</a> element and simply insert it into the document during the <code>{{event("dragenter")}}</code> event.</p>
+
+<p>The <code>{{event("dragover")}}</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>{{event("dragover")}}</code> event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.</p>
+
+<p>Finally, the <code>{{event("dragleave")}}</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>:-moz-drag-over</code> pseudoclass will be removed automatically. The <code>{{event("dragleave")}}</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p>
+
+<h2 id="drop" name="drop">Performing a Drop</h2>
+
+<p>When the user releases the mouse, the drag and drop operation ends.</p>
+
+<p>If the mouse is released over an element that is a valid drop target, that is, one that cancelled the last <code>{{event("dragenter")}}</code> or <code>{{event("dragover")}}</code> event, then the drop will be successful, and a <code>{{event("drop")}}</code> event will fire at the target. Otherwise, the drag operation is cancelled, and no <code>{{event("drop")}}</code> event is fired.</p>
+
+<p>During the <code>{{event("drop")}}</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.</p>
+
+<p>As with all drag-related events, the event's <code>{{domxref("DataTransfer","dataTransfer")}}</code> property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.</p>
+
+<pre class="brush: js">function onDrop(event) {
+  const data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+</pre>
+
+<p>The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. (Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a <code>{{event("dragover")}}</code> event.)</p>
+
+<p>In the example here, once the data has been retrieved, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p>
+
+<p>In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop, so that the browser's default handling is not triggered by the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.</p>
+
+<p>You can retrieve other types of data as well. If the data is a link, it should have the type <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code>. You could then insert a link into the content.</p>
+
+<pre class="brush: js">function doDrop(event) {
+  const lines = event.dataTransfer.getData("text/uri-list").split("\n");
+  lines.filter(line =&gt; !line.startsWith("#"))
+    .forEach(line =&gt; {
+      const link = document.createElement("a");
+      link.href = line;
+      link.textContent = line;
+      event.target.appendChild(link);
+    })
+  event.preventDefault();
+}
+</pre>
+
+<p>This example inserts a link from the dragged data. As the name implies, the <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> type actually may contain a list of URLs, each on a separate line. The above code uses <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split">split</a></code> to break the string into lines, then iterates over the list of lines, and inserts each as a link into the document. (Note also that links starting with a number sign (<code>#</code>) are skipped, as these are comments.)</p>
+
+<p>For simple cases, you can use the special type <code>URL</code> just to retrieve the first valid URL in the list. For example:</p>
+
+<pre class="brush: js">const link = event.dataTransfer.getData("URL");
+</pre>
+
+<p>This eliminates the need to check for comments or iterate through lines yourself. However, it is limited to only the first URL in the list.</p>
+
+<p>The <code>URL</code> type is a special type. It is used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.</p>
+
+<p>Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In the following example, three formats are supported by a drop target.</p>
+
+<p>The following example returns the data associated with the best-supported format:</p>
+
+<pre class="brush: js">function doDrop(event) {
+  const supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  const types = event.dataTransfer.types.filter(type =&gt; supportedTypes.includes(type));
+  if (types.length) {
+    const data = event.dataTransfer.getData(types[0]);
+  }
+  event.preventDefault();
+}
+</pre>
+
+<h2 id="dragend" name="dragend">Окончание перетаскивания</h2>
+
+<p>Как только перетаскивание завершено, событие <code>{{event("dragend")}}</code> запускается в источнике перетаскивания (тот же элемент, который получил событие <code>{{event("dragstart")}}</code>). Это событие сработает, если перетаскивание было успешным<sup>[1]</sup> или если оно было отменено. Однако вы можете использовать свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения, какая операция удаления произошла.</p>
+
+<p>Если свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} имеет значение <code>none</code> во время события <code>{{event("dragend")}}</code>, то перетаскивание было отменено. В противном случае эффект указывает, какая операция была выполнена. Источник может использовать эту информацию после операции перемещения для удаления перетаскиваемого элемента из старого расположения. Свойство {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} будет присвоено значение <code>true</code>, если пользователь отменил перетаскивание (нажав <kbd>Escape</kbd>), и <code>false</code> если перетаскивание было отменено по другим причинам, таким как недопустимая цель перетаскивания, или если оно было успешным.</p>
+
+<p>Сброс может произойти внутри того же окна или над другим приложением. Событие<code>{{event("dragend")}}</code>будет срабатывать всегда, независимо от этого. Свойство события {{domxref("MouseEvent.screenX","screenX")}} и {{domxref("MouseEvent.screenY","screenY")}} будут установлены в координаты экрана, где произошел сброс.</p>
+
+<p>Когда событие <code>{{event("dragend")}}</code> завершило распространение, операция перетаскивания завершена.</p>
+
+<p>[1]: В Gecko, {{event("dragend")}} не отправляется, если исходный узел движется или удаляется во время перетаскивания (например, при сбрасывании или {{event("dragover")}}). <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=460801" title="New D&amp;D API: dragend is not dispatched if the source node was moved or removed during the drag session">Bug 460801</a></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML Drag and Drop API (Overview)</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/ru/web/guide/html/drag_and_drop/index.html b/files/ru/web/guide/html/drag_and_drop/index.html
new file mode 100644
index 0000000000..86467501fd
--- /dev/null
+++ b/files/ru/web/guide/html/drag_and_drop/index.html
@@ -0,0 +1,72 @@
+---
+title: Drag and drop
+slug: Web/Guide/HTML/Drag_and_drop
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции. На протяжении всей операции перемещения полупрозрачное представление элемента следует за курсором мыши. Новая позиция элемента может располагаться в совершенно другом приложении. Веб сайты, и XUL приложения могут использовать эту функциональность для того, чтобы определить какие элементы страницы могут быть перемещены, а также определить элементы куда первые могут быть перемещены.</p>
+
+<div class="note">Эта часть покрывает функциональность drag и drop в Firefox 3.5 (Gecko 1.9.1) а также последующие версии. Для старого API для Firefox 3.0 и ранее, в котором нет соответствующей поддержки данной функциональности, смотрите <a href="/en-US/docs/Drag_and_Drop" title="Older Drag and Drop API">older API documentation</a>.</div>
+
+<h2 id="Основы_Drag_и_Drop">Основы Drag и Drop</h2>
+
+<p>Использование функциональности drag и drop подразумевает выполнения следующих шагов:</p>
+
+<ul>
+ <li>Определить переносимый элемент. Присвоить true атрибуту draggable элемента, который мы хотим перенести. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">The Draggable Attribute</a>.</li>
+ <li>Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещен. Для детальной информации смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</li>
+ <li>(Необязательно) Определить изображение которое будет рядом с указателем мыши на протяжении всей операции перетаскивания.  Если пользовательское изображение не будет определено, будет сгенерирована картинка по умолчанию, в зависимости от элемента, на котором была зажата кнопка мыши (что будет означать, что элемент переносят). Ознакомиться детально с установкой изображения перетаскивания можно по ссылке <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>.</li>
+ <li>Определить возможные эффекты переноса. Возможны три таких эффекта: <code>copy</code> показывает, что перемещаемые данные копируются из прежнего места расположения в новое, <code>move</code> показывает, что перемещаемые данные полностью переносятся на новое место, и <code>link</code> показывает, что создается некая форма взаимодействия или связи между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещен в область под курсором. Если перенос разрешен, перемещение может быть произведено. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> для детальной информации.</li>
+ <li>Определить область назначения. По умолчанию браузер не позволяет перемещать что-либо на HTML элемент. Однако, чтобы сделать элемент активным для перемещения других элементов на него, просто отмените действие по умолчанию. То есть, подпишитесь на события "ondragenter" или "ondragover". Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>.</li>
+ <li>Обработать завершение переноса. Вы можете получить данные из переносимого элемента и произвести над ними необходимые операции. Для детальной информации, пожалуйста, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>.</li>
+</ul>
+
+<p>Mozilla и Firefox поддерживают ряд возможностей, которые выходят за рамку стандартной модели спецификации. Они позволяют пользователю перемещать несколько элементов и перемещать нестроковые данные. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>.</p>
+
+<p>Для того, чтобы ознакомиться с общим списком данных поддерживаемых операцией drag and drop смотрите <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>.</p>
+
+<p>Также доступны примеры с лучшей практикой использования операции drag and drop для перемещения данных разных типов:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types#text" title="Text">Text</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li>
+</ul>
+
+<p>Смотри <a href="/en-US/docs/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> для ссылки на объект DataTransfer.</p>
+
+<h2 id="events" name="events">События Drag</h2>
+
+<p>Ряд событий срабатывают на протяжении всей процедуры drag and drop. Запомните, что только drag-события срабатывают на протяжении операции перемещения; события мыши, такие как <code>mousemove</code> - нет. Также запомните, что события <code>dragstart и</code> <code>dragend</code> не срабатывают при попытке перенести файл из операционной системы в браузер.</p>
+
+<p>Свойство <a href="/en-US/docs/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> всех событий перемещения содержит данные про все drag и drop операции.</p>
+
+<dl>
+ <dt><code>dragstart</code></dt>
+ <dd>Срабатывает когда элeмент начал перемещаться. В момент срабатывания события <code>dragstart</code> пользователь начинает перетаскивание элемента. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Дaнное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>.</dd>
+ <dt><code>dragenter</code></dt>
+ <dd>Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
+ <dt><code>dragover</code></dt>
+ <dd>Данное событие срабатывает каждые несколько сотен милисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
+ <dt><code>dragleave</code></dt>
+ <dd>Это событие запускается в момент перетаскивания, когда курсор мыши выходит за пределы элемента. Обработчикам следует убрать любую подсветку или иные индикаторы, указывавшие на присутствие курсора, чтобы тем самым обозначить реакцию на прекращение перетаскивания.</dd>
+ <dt><code>drag</code></dt>
+ <dd>Запускается при перемещении элемента или выделенного текста.</dd>
+ <dt><code>drop</code></dt>
+ <dd>Событие <code>drop</code> вызывается для элемента, над которым произошло "сбрасывание" перемещаемого элемента. Событие отвечает за извлечение "сброшенных" данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесет элемент, до цели. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd>
+ <dt><code>dragend</code></dt>
+ <dd>Источник перетаскивания получит событие dragend, когда перетаскивание завершится, было оно удачным или нет. Это событие не вызывается при перетаскивании файла в браузер из ОС.   Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/En/DragDrop/Drag_Operations" title="Drag and Drop">Drag Operations</a></li>
+ <li><a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a></li>
+ <li><a class="internal" href="http://www.whatwg.org/specs/web-apps/current-work/#dnd" title="Drag and Drop">HTML5 Living Standard: Drag and Drop</a></li>
+ <li><a class="internal" href="/en-US/demos/tag/tech:dragndrop" title="Drag and Drop">DemoStudio: Drag and Drop</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService">nsIDragService</a></li>
+</ul>
diff --git a/files/ru/web/guide/html/editable_content/index.html b/files/ru/web/guide/html/editable_content/index.html
new file mode 100644
index 0000000000..c260371219
--- /dev/null
+++ b/files/ru/web/guide/html/editable_content/index.html
@@ -0,0 +1,242 @@
+---
+title: Создание контента для редактирования
+slug: Web/Guide/HTML/Editable_content
+tags:
+  - HTML5
+  - contenteditable
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><font>В HTML любой элемент может быть доступен для редактирования. </font><font>Используя некоторые обработчики событий JavaScript, вы можете превратить свою веб-страницу в полноценный и быстрый текстовый редактор. </font><font>В этой статье содержится некоторая информация об этой функции.</font></p>
+
+<h2 id="Как_это_работает">Как это работает?</h2>
+
+<p>Все, что вам нужно сделать, это установить атрибут {{htmlattrxref("contenteditable")}} почти на любой элемент HTML, чтобы сделать его доступным для редактирования.</p>
+
+<p>Вот простой пример, который создает элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать.</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+  Этот текст может быть отредактирован пользователем.
+&lt;/div&gt;</pre>
+
+<p>Вот приведенный выше HTML-код в песочнице:</p>
+
+<p>{{ EmbedLiveSample('Как_это_работает') }} </p>
+
+<h2 id="Выполнение_команд">Выполнение команд</h2>
+
+<p>Когда HTML-элемент имеет <code>contenteditable</code> установленный в <code>true</code>, метод {{ domxref("document.execCommand()") }} становится доступным. Это позволяет запускать команды для управления содержимым редактируемого региона. Большинство команд влияют на выбор документа, например, применяя стиль к тексту (полужирный, курсив и т. д.), в то время как другие вставляют новые элементы (например, добавление ссылки) или влияют на всю строку (отступы). При использовании  <code>contentEditable</code>,  вызов  <code>execCommand()</code>  будет влиять на текущий активный редактируемый элемент.</p>
+
+<h2 id="Различия_в_генерации_разметки">Различия в генерации разметки</h2>
+
+<p>Использование  <code>contenteditable</code>  в разных браузерах было болезненным в течение длительного времени из-за различий в сгенерированной разметке между браузерами. Например, даже что-то простое, что происходит, когда вы нажимаете Enter/Return для создания новой строки текста внутри редактируемого элемента, обрабатывалось по-разному в основных браузерах (Firefox вставлял элементы {{htmlelement("br")}}, IE/Opera использовала {{htmlelement("p")}}, в Chrome/Safari использовался {{htmlelement("div")}}). </p>
+
+<p>К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>,  Firefox будет обновлен, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari.</p>
+
+<p>Попробуйте это в приведенном выше примере.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Internet Explorer, который больше не разрабатывается, использует элементы {{htmlelement("p")}} вместо <code>&lt;div&gt;</code>.</p>
+</div>
+
+<p>Если вы хотите использовать другой разделитель абзацев, все вышеперечисленные браузеры поддерживают {{domxref("document.execCommand")}}, предоставляющий для этих изменений команду  <code>defaultParagraphSeparator</code>. Например, чтобы использовать элементы {{htmlelement("p")}}:</p>
+
+<pre><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Добавочно, Firefox поддерживает нестандартный аргумент, <code>br</code>, для <code>defaultParagraphSeparator</code>  с Firefox 55. Это действительно полезно, если ваше веб-приложение обеспечивало поддержку старого Firefox, а у вас, к сожалению, нет времени исправить его для более нового Firefox, то вы можете вернуть прежнее поведение Firefox вставкой этой строки во время инициализации <code>designMode</code> или  <code>contenteditable</code> редактора:</p>
+
+<pre><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>По соображениям безопасности Firefox не позволяет JavaScript-коду использовать связанные с буфером функции (копировать, вставлять и т. д.) по умолчанию. Используя  <code>about:config</code> вы можете включить их, установив настройки, показанные ниже:</p>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<h2 id="Пример">Пример:</h2>
+
+<p>Простой, но полный текстовый редактор:</p>
+
+<div style="height: 500px; width: auto; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;&lt;/script&gt;
+&lt;style type="text/css"&gt;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- формат -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Подзаголовок &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Параграф &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- шрифт -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- размер -&lt;/option&gt;
+&lt;option value="1"&gt;Малюсенький&lt;/option&gt;
+&lt;option value="2"&gt;Маленький&lt;/option&gt;
+&lt;option value="3"&gt;Нормальный&lt;/option&gt;
+&lt;option value="4"&gt;Большеват&lt;/option&gt;
+&lt;option value="5"&gt;Большой&lt;/option&gt;
+&lt;option value="6"&gt;Большущий&lt;/option&gt;
+&lt;option value="7"&gt;Огромный&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- цвет -&lt;/option&gt;
+&lt;option value="red"&gt;Красный&lt;/option&gt;
+&lt;option value="blue"&gt;Синий&lt;/option&gt;
+&lt;option value="green"&gt;Зеленый&lt;/option&gt;
+&lt;option value="black"&gt;Чёрный&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- фон -&lt;/option&gt;
+&lt;option value="#faa"&gt;Красень&lt;/option&gt;
+&lt;option value="#afa"&gt;Зелень&lt;/option&gt;
+&lt;option value="#aaf"&gt;Синь&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Чистка" onclick="if(validateMode()&amp;&amp;confirm('Вы уверены?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Печать" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Назад" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Вперёд" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Удалить форматирование" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Жирный" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Подчеркивание" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Выровнять слева" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Выровнять центр" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Выровнять справа" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Нумерованный список" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Пунктирный список" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Цитата" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Удалить отступ" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Добавить отступ" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Гиперссылка" onclick="var sLnk=prompt('Введите ваш URL','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Вырезать" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Копировать" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Вставить" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Однажды в студёную, зимнюю пору...&lt;/p&gt;&lt;/div&gt;
+&lt;span&gt;&lt;input id="btn" type="submit" value="Принять" /&gt;&lt;/span&gt;
+&lt;span id="editMode"&gt;&lt;input id="switchBox" type="checkbox" name="switchMode" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Показать HTML&lt;/label&gt;&lt;/span&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: css">.content { display: none; }
+.content::after {
+  display: block; content: ' ( 'url(href="sample.php")' ) ';
+}
+form {
+  display: inline-block;
+  background-color: rgba(180,180,180,.8);
+  border: 1px solid rgba(155,155,155,.6);
+}
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; background-color: #eff;}
+#textBox {
+  min-width: 500px;
+  height: 300px;
+  border: 1px solid rgba(155,155,155,.6);
+  padding: 12px;
+  overflow: scroll;
+  background-color: #eff;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  max-width: 800px;
+  min-height: 200px;
+}
+#switchBox, label, #btn { cursor: pointer; }
+</pre>
+
+<pre class="brush: js">var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchBox.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchBox.checked) { return true ; }
+  alert("Uncheck \"Показать HTML\"."); /* убрать галочку из "Показать HTML" */
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+    document.execCommand("defaultParagraphSeparator", false, "div");
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close(); /*  */
+}
+
+</pre>
+</div>
+
+<p><br>
+ Результат: {{EmbedLiveSample('Пример')}}</p>
+
+<div class="note"><strong>Примечание:</strong> если вы хотите увидеть, как стандартизировать создание и вставку вашего редактора на свою страницу, см. <a href="https://developer.mozilla.org/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">наш более полный пример редактора.</a> </div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{htmlattrxref("contenteditable")}} глобальный атрибут</li>
+ <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (компонент сценария для текстового редактора)</li>
+ <li>{{cssxref("caret-color")}}, позволяющий установить цвет вставляемого текста</li>
+</ul>
diff --git a/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..a6236d9c24
--- /dev/null
+++ b/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,375 @@
+---
+title: Использование разделов и создание структуры HTML документа
+slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
+tags:
+  - HTML5
+  - Веб
+  - Для опытных разработчиков
+  - Обзор
+  - Пример
+  - Разделы
+  - Руководство
+  - Структура
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div class="warning">
+<p><strong>Важно</strong>: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрен в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм <a href="http://www.w3.org/TR/html5/sections.html#outline">построения структуры</a> нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели <a href="http://www.w3.org/TR/html5/sections.html#rank">степень важности</a> заголовков (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>).</p>
+</div>
+
+<p>Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.</p>
+
+<h2 id="Структура_документа_в_HTML_4">Структура документа в HTML 4</h2>
+
+<p>Структура документа, т. е. семантическая структура контента, заключенного в теги  <code>&lt;body&gt;</code> и <code>&lt;/body&gt;</code>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включенными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.</p>
+
+<p>Так, следующая разметка:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml notranslate">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Среда обитания&lt;/h2&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+     ...продолжение данного подраздела...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>обеспечивает следующую структуру:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания
+</pre>
+
+<p>Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка</p>
+
+<pre class="brush:xml notranslate">&lt;h1&gt;Лесные слоны&lt;/h1&gt;
+ &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;h2&gt;Среда обитания&lt;/h2&gt;
+  &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+  &lt;h2&gt;Рацион&lt;/h2&gt;
+&lt;h1&gt;Монгольская песчанка&lt;/h1&gt;
+</pre>
+
+<p>обеспечивает следующую структуру:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания
+   1.2 Рацион
+2. Монгольская песчанка
+</pre>
+
+<h2 id="Какие_проблемы_решает_HTML5">Какие проблемы решает HTML5</h2>
+
+<p>Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются четкостью, что порождает множество проблем:</p>
+
+<ol>
+ <li>Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов <strong>class</strong> не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">реабилитационными технологиями</a>, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.</li>
+ <li>Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.</li>
+ <li>В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.</li>
+ <li>Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.</li>
+</ol>
+
+<p>В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что дает браузерам возможность более качественно обслуживать пользователей.</p>
+
+<h2 id="Алгоритм_создания_структуры_HTML5">Алгоритм создания структуры HTML5</h2>
+
+<h3 id="Задание_разделов_в_HTML5">Задание разделов в HTML5</h3>
+
+<p>Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. </p>
+
+<div class="note"><strong>Note: </strong>Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">«Задание заголовков в HTML5»</a>.</div>
+
+<p>Например:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Введение&lt;/h1&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Среда обитания&lt;/h1&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;рекламный блок&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>Данный фрагмент HTML задает раздел верхнего уровня:</p>
+
+<pre class="notranslate"><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Введение&lt;/h1&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Среда обитания&lt;/h1&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;рекламный блок&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>Данный раздел имеет три подраздела:</p>
+
+<pre class="notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;Введение&lt;/h1&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;Среда обитания&lt;/h1&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;рекламный блок&lt;/p&gt;
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>В результате получаем следующую структуру:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+</pre>
+
+<h3 id="Задание_заголовков_в_HTML5">Задание заголовков в HTML5</h3>
+
+<p>Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задает заголовок текущего раздела.</p>
+
+<p>Элемент заголовка имеет определенную <em>степень важности,</em> определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет <em>максимальную</em> степень важности, а {{HTMLElement("h6")}} <em>минимальную</em>. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;section&gt;
+    &lt;h2&gt;Среда обитания&lt;/h2&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+        ...продолжение данного подраздела...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Монгольская песчанка&lt;/h3&gt;
+  &lt;p&gt;В данном разделе мы расскажем о монгольской песчанке.
+     ...продолжение данного раздела...
+&lt;/section&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания
+2. Монгольская песчанка</pre>
+
+<p>Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)</p>
+
+<h3 id="Неявное_задание_разделов">Неявное задание разделов</h3>
+
+<p>Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется <em>неявным заданием разделов</em>.</p>
+
+<p>Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;h3 class="implicit subsection"&gt;Среда обитания&lt;/h3&gt;
+  &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+&lt;/section&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания <em>(неявно задано элементом h3)</em>
+</pre>
+
+<p>Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: </p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;h1 class="implicit section"&gt;Монгольская песчанка&lt;/h1&gt;
+  &lt;p&gt;Монгольская песчанка – это небольшое симпатичное млекопитающее.
+    ...продолжение данного раздела...
+&lt;/section&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+2. Монгольская песчанка <em>(неявно задано элементом h1, который одновременно закрывает предыдущий раздел)</em>
+</pre>
+
+<p>Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:</p>
+
+<pre class="brush:xml notranslate">&lt;body&gt;
+  &lt;h1&gt;Млекопитающие&lt;/h1&gt;
+  &lt;h2&gt;Киты&lt;/h2&gt;
+  &lt;p&gt;В данном разделе мы поговорим о китах.
+    ...продолжение данного раздела...
+  &lt;section&gt;
+    &lt;h3&gt;Лесные слоны&lt;/h3&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+    &lt;h3&gt;Монгольская песчанка&lt;/h3&gt;
+      &lt;p&gt;Песчанки распространились далеко за пределы Монголии.
+         ...продолжение данного подраздела...
+    &lt;h2&gt;Рептилии&lt;/h2&gt;
+      &lt;p&gt;Рептилии – это холоднокровные животные.
+          ...продолжение данного раздела...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Млекопитающие
+   1.1 <em>Киты (неявно задается элементом h2)</em>
+   1.2 Лесные слоны <em>(явным образом задается элементом раздела)</em>
+   1.3 Монгольская песчанка <em>(неявно задается элементом h3, который одновременно закрывает предыдущий раздел)</em>
+2. <em>Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)</em>
+</pre>
+
+<p>Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.</p>
+
+<p>Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.</p>
+
+<h3 id="Корни_задания_разделов"><a name="sectioning_root">Корни задания разделов</a></h3>
+
+<p> <a id="sectioning root" name="sectioning root">Корень задания разделов</a> – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.</p>
+
+<p>Например:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Введение&lt;/h2&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Среда обитания&lt;/h2&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «&lt;cite&gt;Лесной слон на Борнео&lt;/cite&gt;»:&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Борнео&lt;/h1&gt;
+       &lt;p&gt;Лесной слон живет на Борнео...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>Данный пример приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания</pre>
+
+<p>Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.</p>
+
+<h3 id="Разделы_не_входящие_в_структуру">Разделы, не входящие в структуру</h3>
+
+<p> HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:</p>
+
+<ol>
+ <li>Элемент вспомогательного раздела {{HTMLElement("aside")}} задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.</li>
+ <li>Элемент навигационного раздела {{HTMLElement("nav")}} задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.</li>
+</ol>
+
+<h3 id="Шапки_и_подвалы">Шапки и подвалы</h3>
+
+<p>HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:</p>
+
+<ol>
+ <li>Элемент шапки {{HTMLElement("header")}} задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.</li>
+ <li>Элемент подвала ({{HTMLElement("footer")}}) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.</li>
+</ol>
+
+<p>Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.</p>
+
+<h2 id="Адреса_в_элементах_задания_разделов">Адреса в элементах задания разделов</h2>
+
+<p>Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.</p>
+
+<p>Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.</p>
+
+<h2 id="Использование_элементов_HTML5_в_браузерах_не_поддерживающих_HTML5">Использование элементов HTML5 в браузерах, не поддерживающих HTML5</h2>
+
+<p>Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль <code>display:inline</code>:</p>
+
+<pre class="brush: css notranslate">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.</p>
+
+<p>Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:</p>
+
+<pre class="brush:xml notranslate">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:</p>
+
+<pre class="brush:xml notranslate">&lt;noscript&gt;
+   &lt;strong&gt;Внимание!&lt;/strong&gt;
+   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+&lt;/noscript&gt;</pre>
+
+<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p>
+
+<pre class="brush:xml notranslate">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;Внимание!&lt;/strong&gt;
+     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+  &lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..f34fe049f5
--- /dev/null
+++ b/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
@@ -0,0 +1,204 @@
+---
+title: Tips for authoring fast-loading HTML pages
+slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Эти советы основаны на общих знаниях и экспериментах.</p>
+
+<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p>
+
+<p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p>
+
+<h2 id="Tips" name="Tips">Советы</h2>
+
+<h3 id="Reduce_page_weight" name="Reduce_page_weight">Уменьшайте вес страницы</h3>
+
+<p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p>
+
+<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p>
+
+<p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p>
+
+<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Минимизируйте количество файлов</h3>
+
+<p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p>
+
+<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p>
+
+<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p>
+
+<h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3>
+
+<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p>
+
+<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p>
+
+<p>Дальнейшее чтение:</p>
+
+<ul>
+ <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li>
+</ul>
+
+<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Сократите поиск доменов</h3>
+
+<p>Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.</p>
+
+<p>Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.</p>
+
+<h3 id="Cache_reused_content" name="Cache_reused_content">Кэшируйте повторно использованный контент</h3>
+
+<p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p>
+
+<p>В частности, обратите внимание на  заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p>
+
+<p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p>
+
+<p>Больше информации:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">On HTTP Last-Modified and ETag</a></li>
+</ol>
+
+<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3>
+
+<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p>
+
+<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3>
+
+<p>Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования <code>document.write()</code> для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> для управления содержимым страницы, а не устаревшие подходы, которые основаны на  <code>document.write()</code>.</p>
+
+<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Используйте современный CSS и корректную разметку</h3>
+
+<p>Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.</p>
+
+<p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p>
+
+<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p>
+
+<h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3>
+
+<p>Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Floats"&gt;floats&lt;/a&gt;, &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning"&gt;positioning&lt;/a&gt;, &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox"&gt;flexbox&lt;/a&gt;, или &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Grids"&gt;grids&lt;/a&gt;.</p>
+
+<p>Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.</p>
+
+<p>Вместо глубоко вложенных таблиц, как в:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+
+<p>используйте невложенные таблицы как показано (или div'ы)</p>
+
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+
+<p>Смотри также: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> и <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+
+<h3 id="Сокращайте_и_сжимайте_активы_SVG">Сокращайте и сжимайте активы SVG</h3>
+
+<p>SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG</p>
+
+<h3 id="Сокращайте_и_сжимайте_ваши_изображения">Сокращайте и сжимайте ваши изображения</h3>
+
+<p>Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу.  Есть онлайн-инструменты, такие как &lt;a href="https://compressjpeg.com/"&gt;Compress Jpeg&lt;/a&gt;, &lt;a href="https://tinypng.com"&gt;Tiny PNG&lt;/a&gt; и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.</p>
+
+<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Указывайте размеры для изображений и таблиц </h3>
+
+<p>Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине <code>height</code> и <code>width</code>  должны быть указаны для изображений всегда, когда это возможно.</p>
+
+<p>Таблицы должны использовать CSS селектор: комбинация свойств</p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>и должны указывать ширину колонок используя HTML теги <code>COL</code> и <code>COLGROUP</code></p>
+
+<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Мудро выбирайте требования к пользовательскому агенту</h3>
+
+<p>Чтобы добиться наибольших улучшений в дизайне страниц, убедитесь, что для проектов указаны разумные требования к пользовательским агентам. Не требуйте, чтобы ваш контент казался идеальным во всех браузерах, особенно в устаревших.</p>
+
+<p>В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.</p>
+
+<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+
+<h3 id="Используйте_async_и_defer_если_это_возможно">Используйте async и defer, если это возможно</h3>
+
+<p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p>
+
+<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p>
+
+<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Пример структуры страницы</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы</dd>
+  <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.</dd>
+  <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания</dd>
+  <dd>Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2>
+
+<ul>
+ <li>Книга: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li>Отличная и очень содеражательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li>
+ <li>Last Updated Date: Published 04 Apr 2003</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/guide/html/using_data_attributes/index.html b/files/ru/web/guide/html/using_data_attributes/index.html
new file mode 100644
index 0000000000..cef001e25a
--- /dev/null
+++ b/files/ru/web/guide/html/using_data_attributes/index.html
@@ -0,0 +1,129 @@
+---
+title: Использование data-* атрибутов
+slug: Web/Guide/HTML/Using_data_attributes
+tags:
+  - Guide
+  - HTML
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p><a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. <a href="/ru/docs/Web/HTML/Global_attributes#data-*"><code>data-*</code> атрибуты</a> позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Синтаксис_HTML">Синтаксис HTML</h2>
+
+<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <code>data</code>-атрибуты:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Доступ_в_JavaScript">Доступ в JavaScript</h2>
+
+<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p>
+
+<pre><code>var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</code></pre>
+
+<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p>
+
+<h2 id="Доступ_в_CSS">Доступ в CSS</h2>
+
+<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p>
+
+<pre class="brush: css">article[data-columns='3']{
+  width: 400px;
+}
+article[data-columns='4']{
+  width: 600px;
+}</pre>
+
+<p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p>
+
+<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p>
+
+<h2 id="Проблемы">Проблемы</h2>
+
+<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p>
+
+<p>Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии <a href="https://caniuse.com/#feat=dataset">не поддерживают <code>dataset</code></a>. Для поддержки IE 10 и более ранних версий получение доступа к <code>data</code>-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, <a href="https://jsperf.com/data-dataset">производительность чтения <code>data-</code>атрибутов</a> по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование <code>dataset</code> ещё медленнее, чем чтение данных с <code>getAttribute()</code>.</p>
+
+<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<table class="standard-table">
+ <caption>caniuse</caption>
+ <thead>
+  <tr>
+   <th scope="col">
+    <h4 id="IE">IE</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Edge">Edge</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Firefox">Firefox</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Chrome">Chrome</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Safari">Safari</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Opera">Opera</h4>
+   </th>
+   <th scope="col">
+    <h4 id="iOS_Safari">iOS Safari</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Opera_Mini*">Opera Mini<sup>*</sup></h4>
+   </th>
+   <th scope="col">
+    <h4 id="Android_Browser">Android Browser</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Chrome_for_Android">Chrome for Android</h4>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>11+</td>
+   <td>14+</td>
+   <td>52+</td>
+   <td>49+</td>
+   <td>10.1+</td>
+   <td>46+</td>
+   <td>9.3+</td>
+   <td>all</td>
+   <td>4.4+</td>
+   <td>59+</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>Тем не менее, для содержимого, которое не надо показывать это является отличным решением.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>
diff --git a/files/ru/web/guide/html/формы_в_html/index.html b/files/ru/web/guide/html/формы_в_html/index.html
new file mode 100644
index 0000000000..ad5a8bc7e6
--- /dev/null
+++ b/files/ru/web/guide/html/формы_в_html/index.html
@@ -0,0 +1,149 @@
+---
+title: Формы в HTML
+slug: Web/Guide/HTML/Формы_в_HTML
+tags:
+  - HTML
+  - HTML5
+  - Введение
+  - Интернет
+  - Любитель
+  - Новичок
+  - Обзор
+  - Руководство
+  - Формы
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<p>Элементы и атрибуты форм в <strong>HTML5</strong> предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.</p>
+
+<p><span class="seoSummary">Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное<a href="/ru/docs/Web/Guide/HTML/Forms"> руководство по HTML-формам</a>.</span></p>
+
+<h2 id="The_input_element" name="The_input_element">Элемент <code>&lt;input&gt;</code></h2>
+
+<p>В элементе <code>{{HTMLElement("input")}}</code> появились новые значения для атрибута {{htmlattrxref("type", "input")}}. (Просмотрите справочник {{HTMLElement("input")}} для получения полного списка атрибутов, значений и их использования для этого элемента.)</p>
+
+<ul>
+ <li><code>search</code>: Элемент представляет из себя поле для поиска. Переходы строк автоматически удаляются из значения <code>value</code>.</li>
+ <li><code>tel</code>: Элемент представляет из себя поле для редактирования номера телефона. Переходы строк автоматически удаляются из значения <code>value</code>. Вы можете использовать атрибуты, такие как: {{htmlattrxref("pattern", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы запретить ввод неподходящих символов.</li>
+ <li><code>url</code>: Элемент представляет из себя поле для редактирования <a class="external" href="https://ru.wikipedia.org/wiki/URL" title="http://en.wikipedia.org/wiki/URL">URL</a>. Переходы строк и пробелы автоматически удаляются из значения <code>value</code>.</li>
+ <li>
+  <p><code>email</code>: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются из значения <code>value</code>. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы, если эл. адрес почты не будет соответствовать нормам ABNF.</p>
+
+  <div class="note"><strong>Заметьте:</strong> Если установлен атрибут {{htmlattrxref("multiple", "input")}}, то может быть введено несколько адресов электронной почты, разделенных запятой, но, в данный момент, такая возможность не реализована в Firefox.</div>
+ </li>
+</ul>
+
+<p>Также, элемент {{HTMLElement("input")}} получил новые атрибуты:</p>
+
+<ul>
+ <li>{{htmlattrxref("list", "input")}}: ID элемента {{HTMLElement("datalist")}}, в котором элементы {{HTMLElement("option")}} используются как подсказки для текстового поля.</li>
+ <li>{{htmlattrxref("pattern", "input")}}: Регулярное выражение, по которому поверяются вводимые данные. Может использоваться в элементе {{htmlattrxref("type", "input")}} со значениями <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>и email</code>.</li>
+ <li>{{htmlattrxref("form", "input")}}: Строка, указывающая, к какому элементу {{HTMLElement("form")}} принадлежит элемент. Элемент может быть частью только одной формы.</li>
+ <li>{{htmlattrxref("formmethod", "input")}}: Строка, указывающая метод передачи данных  (GET or POST), когда форма отправляется на сервер. Он перекрывает значение атрибута {{htmlattrxref("method", "form")}} элемента {{HTMLElement("form")}}, если установлен. Работает только, если {{htmlattrxref("type", "input")}} является <code>image</code> <code>или submit, </code>и если установлен атрибут {{htmlattrxref("form", "input")}}.</li>
+ <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдет валидацию. Этот атрибут - расширение Mozilla и не является стандартом.</li>
+</ul>
+
+<h2 id="Текстовое_поле">Текстовое поле</h2>
+
+<p><code>&lt;input&gt;</code> с атрибутом <code>type="text"</code> определяет однострочное поле для ввода.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  Введите свое имя: &lt;input type="text" name="name"&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="Флажок"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Флажок</strong></h2>
+
+<p><code>&lt;input&gt;</code> с атрибутом <code>type="checkbox"</code> определяет флажок.</p>
+
+<pre class="brush: html">&lt;input type="checkbox" name="chk" value="" checked&gt; Подписаться на рассылку</pre>
+
+<h2 id="The_form_element" name="The_form_element">Переключатель</h2>
+
+<p><code>&lt;input&gt;</code> с атрибутом <code>type="radio"</code> определяет радио кнопку.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="radio" name="animal" value="monkey"&gt;Обезьяна&lt;br&gt;
+  &lt;input type="radio" name="animal" value="cat"&gt;Кот&lt;br&gt;
+  <span style="font-size: 1rem;">&lt;input type="radio" name="</span>animal<span style="font-size: 1rem;">" value="other"&gt;Другое
+</span>&lt;/form&gt;</pre>
+
+<h2 id="The_form_element" name="The_form_element"><code>Элемент &lt;form&gt;</code></h2>
+
+<p>Элемент {{HTMLElement("form")}} получил новый атрибут:</p>
+
+<ul>
+ <li>{{htmlattrxref("novalidate", "form")}}: Этот атрибут предотвращает валидацию формы перед отправкой.</li>
+</ul>
+
+<h2 id="The_datalist_element" name="The_datalist_element"><code>Элемент &lt;datalist&gt;</code></h2>
+
+<p>Элемент {{HTMLElement("datalist")}} представляет собой список элементов {{HTMLElement("option")}}, который необходимо предложить при вводе поля {{HTMLElement("input")}}.</p>
+
+<p>Вы можете использовать атрибут {{htmlattrxref("list", "input")}} в элементе {{HTMLElement("input")}}, чтобы связать текстовое поле с элементом {{HTMLElement("datalist")}}.</p>
+
+<h2 id="The_output_element" name="The_output_element"><code>Элемент &lt;output&gt;</code></h2>
+
+<p>Элемент <code>{{HTMLElement("output")}}</code> представляет собой результат каких-либо вычислений.</p>
+
+<p>Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом <code>{{HTMLElement("output")}}</code> и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделенный пробелами.</p>
+
+<p>{{non-standard_inline}} Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for {{HTMLElement("output")}} elements, and therefore applies the {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, and {{Cssxref(":-moz-ui-valid")}} CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").</p>
+
+<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">Атрибут placeholder</h2>
+
+<p>Атрибут {{htmlattrxref("placeholder", "input")}} в элементах <code>{{HTMLElement("input")}}</code> и <code>{{HTMLElement("textarea")}}</code> отображает подсказки для пользователей, которые показывают, что можно ввести в эти поля. Текст в placeholder не должен содержать символов перевода строки или возврата каретки.</p>
+
+<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">Атрибут autofocus</h2>
+
+<p>Атрибут {{htmlattrxref("autofocus", "input")}} позволяет указать для элемента формы автоматическое получение фокуса после полной загрузки страницы, если пользователь сам не переместит фокус на другой элемент, например, этот атрибут можно указать для различных полей ввода. Только один элемент в документе должен иметь этот атрибут, который содержит Boolean значение. Этот атрибут может быть установлен в <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}} </code>и <code>{{HTMLElement("textarea")}}</code> элементах.  {{htmlattrxref("autofocus", "input")}} нельзя установить в элементах input c атрибутом type установленным в значение hidden (это означает, что ты не можешь автоматически устанавливать фокус в скрытых полях).</p>
+
+<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">DOM свойство label.control</h2>
+
+<p>DOM интерфейс <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> , помимо свойств, относящихся к HTML элементу <code>{{HTMLElement("label")}}</code> , предоставляет дополнительное свойство <strong> control</strong>, возвращающее поле ввода, для которого предназначен <code>{{HTMLElement("label")}}</code>. Оно либо указывается в атрибуте <code>{{htmlattrxref("for", "label")}}</code> , либо является первым вложенным полем ввода.</p>
+
+<h2 id="Constraint_Validation" name="Constraint_Validation">Constraint Validation</h2>
+
+<p>HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.</p>
+
+<p>If the <code>title</code> attribute is set on the {{HTMLElement("input")}} element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard {{htmlattrxref("x-moz-errormessage")}} attribute or when calling the <code>setCustomValidity()</code> method.</p>
+
+<pre class="brush: html">&lt;input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"&gt;</pre>
+
+<div class="note"><strong>Note:</strong> Constraint validation is not supported on {{HTMLElement("button")}} elements in a form; to style a button based on the validity of the associated form, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class.</div>
+
+<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">HTML Syntax for Constraint Validation</h3>
+
+<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p>
+
+<ul>
+ <li>The {{htmlattrxref("required", "input")}} attribute on the {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements indicates that a value must be supplied. (On the {{HTMLElement("input")}} element, {{htmlattrxref("required", "input")}} applies only in conjunction with certain values of the {{htmlattrxref("type", "input")}} attribute.)</li>
+ <li>The {{htmlattrxref("pattern", "input")}} attribute on the {{HTMLElement("input")}} element constrains the value to match a specific regular expression.</li>
+ <li>The {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes of the {{HTMLElement("input")}} element constrain the minimum and maximum values that can be entered.</li>
+ <li>The {{htmlattrxref("step", "input")}} attribute of the {{HTMLElement("input")}} element (when used in combination with the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li>
+ <li>The {{htmlattrxref("maxlength", "input")}} attribute of the {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li>
+ <li>The values <code>url</code> and <code>email</code> for the {{htmlattrxref("type", "input")}} constrain the value to being a valid URL or e-mail address, respectively.</li>
+</ul>
+
+<p>In addition, you can prevent constraint validation by specifying the {{htmlattrxref("novalidate", "form")}} attribute on the {{HTMLElement("form")}}, or the {{htmlattrxref("formnovalidate", "button")}} attribute on the {{HTMLElement("button")}} element and on the {{HTMLElement("input")}} element (when {{htmlattrxref("type", "input")}} is <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p>
+
+<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">Constraint Validation API</h3>
+
+<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p>
+
+<ul>
+ <li>On <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li>
+ <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>:
+  <ul>
+   <li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li>
+   <li><code>validity</code> property, which is a <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li>
+   <li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li>
+   <li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li>
+   <li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li>
+</ul>
diff --git a/files/ru/web/guide/index.html b/files/ru/web/guide/index.html
new file mode 100644
index 0000000000..d71cb89e9e
--- /dev/null
+++ b/files/ru/web/guide/index.html
@@ -0,0 +1,70 @@
+---
+title: Руководства Web-разработчика
+slug: Web/Guide
+tags:
+  - Web
+  - Руководство
+translation_of: Web/Guide
+---
+<p><strong>Эти статьи помогут изучить веб-технологии и интерфейсы API.</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/ru/docs/Learn/HTML">Изучение HTML: руководства и уроки</a></dt>
+ <dd class="landingPageList"><strong>Язык гипертекстовой разметки HTML (HyperText Markup Language)</strong> — это основной язык практически для всего веб-контента. Многое из того, что Вы видите в окне браузера, описано с помощью HTML.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Learn/CSS">Изучение CSS</a></dt>
+ <dd class="landingPageList">Каскадные таблицы стилей CSS (Cascading Style Sheets) — язык стилей, используемый для описания внешнего вида документа HTML.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Audio_and_video_delivery">Доставка аудио и видео контента</a></dt>
+ <dd class="landingPageList">Мы можем доставлять аудио и видео контент различными способами. Это могут быть как статичные медиа файлы, так и потоковые данные. Эта статья является отправной точкой в изучении различных механизмов доставки медиа ресурсов и совместимости работы с популярными браузерами.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Audio_and_video_manipulation">Обработка аудио и видео </a></dt>
+ <dd class="landingPageList">Веб-технологии примечательны тем, что они позволяют использовать различные инструменты в совокупности. Например, можно проводить манипуляции над имеющимися в браузере аудио и видео потоками с помощью {{htmlelement("canvas")}}, <a href="/en-US/docs/Web/WebGL">WebGL</a> или <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>: напрямую изменять аудио и видео, т.е. добавлять эффекты к аудио (реверберацию, компрессор), или к видео (фильтры ч/б, сепия и т.д.). В этой статье рассказывается о том, как это сделать.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Events">Руководство разработчика событий</a></dt>
+ <dd class="landingPageList">События связаны с:
+ <ul>
+  <li>Шаблонами проектирования, используемыми для асинхронной обработки инцидентов, возникающих в жизненном цикле веб страницы</li>
+  <li>Именованием, характеризацией и использованием большого количества инцидентов различного типа</li>
+ </ul>
+ </dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList">Это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. АJAX включает: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Графика">Графика для Web</a></dt>
+ <dd class="landingPageList">Современным веб-сайтам и веб-приложениям часто требуется отображать графику.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/API">Уроки по Web API</a></dt>
+ <dd class="landingPageList">Список всех веб-API и как они работают.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript" title="/ru/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>Мощный скриптовый язык для создания приложений в Web.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Localizations_and_character_encodings">Локализация и кодировка символов</a></dt>
+ <dd class="landingPageList">По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами. Стандартом HTML рекомендуется использовать кодировку UTF-8 (так как она может представить любой Unicode символ) и обязательно объявлять, какая кодировка используется в документе.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/mobile">Веб-разработка под мобильные устройства</a></dt>
+ <dd class="landingPageList">На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. См. также: <a href="/ru/docs/Mozilla/Firefox_для_Android">Firefox для Android</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Progressive_web_apps">Прогрессивные веб-приложения</a></dt>
+ <dd class="landingPageList">Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Производительность">Оптимизация и производительность </a></dt>
+ <dd class="landingPageList">Создаваемые Вами современные веб-приложения и сайты должны иметь хорошую производительность - работать быстро и эффективно, как на персональных компьютерах (десктоп), так и на менее мощных мобильных устройствах.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Parsing_and_serializing_XML">Прямая и обратная обработка XML</a></dt>
+ <dd class="landingPageList">Различные методы обработки XML с помощью web платформы.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList">WOFF — бесплатный файловый формат шрифтов.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm">Алгоритм обработки текста двусторонней направленности (Unicode Bidirectional Text Algorithm)</a></dt>
+ <dd class="landingPageList">Алгоритм является частью стандарта Юникод. Он описывает в каком порядке выставляет символы браузер при обработке текста Unicode. Руководство поможет при создании международного веб-контента.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/API/FormData/Using_FormData_Objects">Использование объектов FormData</a></dt>
+ <dd class="landingPageList">Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> позволяет создать набор пар ключ/значение и передать их, используя <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.</code> Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом <code>{{domxref("HTMLFormElement.submit","submit()")}}</code> формы, с установленной кодировкой <code>enctype="multipart/form-data"</code>.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/User_input_methods">Пользовательский ввод и управление</a></dt>
+ <dd class="landingPageList">Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Словарь">Словарь (глоссарий терминов)</a></dt>
+ <dd class="landingPageList">Определения и аббревиатуры в мире Web и Internet.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Reference">Справочник по веб-технологиям </a></li>
+</ul>
diff --git a/files/ru/web/guide/localizations_and_character_encodings/index.html b/files/ru/web/guide/localizations_and_character_encodings/index.html
new file mode 100644
index 0000000000..1da05508fd
--- /dev/null
+++ b/files/ru/web/guide/localizations_and_character_encodings/index.html
@@ -0,0 +1,57 @@
+---
+title: Локализация и кодировка символов
+slug: Web/Guide/Localizations_and_character_encodings
+translation_of: Web/Guide/Localizations_and_character_encodings
+---
+<p>По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами (см. <a href="https://en.wikipedia.org/wiki/Character_encoding">кодирование символов</a>). <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Стандартом HTML</a> рекомендуется использовать кодировку UTF-8 (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.</p>
+
+<p>The {{HTMLElement("meta")}} element's {{htmlattrxref("charset", "meta")}} attribute is used to specify the page's character encoding. It <strong>must</strong> be used within a {{HTMLElement("head")}} block.</p>
+
+<p>To specify that a page is using, for example, the UTF-8 character encoding (as per the recommendation), simply place the following line in the {{HTMLElement("head")}} block:</p>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;
+</pre>
+
+<h2 id="Details_and_browser_internals">Details and browser internals</h2>
+
+<p>When the encoding is declared by Web content like the HTML specification requires, Firefox will use that encoding for turning the bytes into the internal representation. Unfortunately, using UTF-8 and declaring that UTF-8 was used was not always the prevalent way of offering Web content. In the 1990s, it was common to leave the encoding undeclared and to use a region-specific encoding that wasn't able to represent all of Unicode.</p>
+
+<p>Firefox needs a fallback encoding that it uses for non-conforming legacy content that doesn't declare its encoding. For most locales, the fallback encoding is windows-1252 (often called ISO-8859-1), which was the encoding emitted by most Windows applications in the 1990s and a superset of the encoding emitted by most UNIX applications in the 1990s as a deployed in the America has and in Western Europe. However, there are locales where Web publishing was common already in the 1990s but the windows-1252 encoding was not suitable for the local language. In these locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than windows-1252. In order to work with legacy content, some Firefox localizations need a non-windows-1252 fallback encoding.</p>
+
+<p>Unfortunately, this means that the Web-exposed functionality of Firefox differs by locale and it is hard to read legacy content across locales with different fallback encodings. To avoid introducing this problem in locales where Web publishing took off after the adoption of UTF-8, locales that don't have a non-windows-1252 legacy encoding arising from the practices of the 1990s, should leave the fallback encoding at windows-1252 to facilitate reading content cross-locale from the old locales whose fallback encoding is windows-1252. New-authored locale-native UTF-8 content is expected to declare its encoding, in which case the fallback encoding does not participate in the processing of content.</p>
+
+<p>Additionally, there is a small number of locales where in the 1990s there wasn't an obvious single region-specific encoding and heuristic detection among multiple legacy encodings was introduced to Web browsers. This has then had the effect that Web authors have depended on heuristic detection being present, so Firefox still has heuristic detection in these locales.</p>
+
+<h2 id="Finding_canonical_encoding_names">Finding canonical encoding names</h2>
+
+<p>The text below refers to canonical names of encodings. The canonical names are the values to the right of the equals sign in <a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>.</p>
+
+<h2 id="Specifying_the_fallback_encoding">Specifying the fallback encoding</h2>
+
+<p><strong>As of Firefox 28, this section is obsolete, since the preference <code>intl.charset.default</code> no longer exists. The mapping from locales onto fallback encodings is now built into Gecko itself.</strong></p>
+
+<p>The fallback encoding is specified by the preference <code>intl.charset.default</code> in <code>intl.properties</code>. It should be set to the canonical name of the legacy encoding that users of the localizations are most likely to encounter when browsing non-conforming legacy Web content that doesn't declare its encoding. Note that the fallback encoding as defined by the previous sentence does not necessarily need to be able to represent the characters needed for the language of the localization!</p>
+
+<p>The fallback encoding should be left to windows-1252 for Western European locales, North, Central and South American locales, African locales, Central Asian locales and Oceanian locales. It typically needs to be set to something other than windows-1252 for Central and Eastern European locales, Middle Eastern locales and East Asian locales.</p>
+
+<p>In order to avoid the problem of Web authors creating new UTF-8 content without declaring that the content uses UTF-8 and in order to maximize the ability of users to read content cross-locale, <em>do not</em> set the fallback encoding to UTF-8 for any newly-introduced localization. Note that Firefox no longer sends the <code>Accept-Charset</code> HTTP header, so there is no need to consider what gets advertised in <code>Accept-Charset</code> when setting the fallback encoding.</p>
+
+<p>For locales where the fallback encoding is currently ISO-8859-1, it should be changed to windows-1252. ISO-8859-1 is decoded in the exact same way as windows-1252, but Firefox is moving to treating windows-1252 as the preferred label for this encoding in accordance with the <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a>.</p>
+
+<p>For locales where Internet Explorer has more market share than Firefox, the fallback encoding should typically be set to the same value as in Internet Explorer. You can see the fallback encoding a particular browser has by loading a <a href="http://hsivonen.iki.fi/test/moz/check-charset.htm" title="http://hsivonen.iki.fi/test/moz/check-charset.htm">test page</a>. (Be sure to use a browser installation that has its settings left to the defaults when investigating!)</p>
+
+<p>For locales where Firefox has more market share than Internet Explorer, it's probably best not to change the fallback encoding even if it doesn't follow the guidance given above. (For example, the fallback encoding for the Polish, Hungarian and Czech locales should probably continue to be ISO-8859-2 even though IE has a different fallback encoding.)</p>
+
+<p>When in doubt, use windows-1252 as the fallback encoding.</p>
+
+<h2 id="Specifying_the_heuristic_detection_mode">Specifying the heuristic detection mode</h2>
+
+<p>The heuristic detection mode is specified by the preference <code>intl.charset.detector</code> in <code>intl.properties</code>. The setting <em>must</em> be left blank for all locales other than Russian, Ukrainian and Japanese. Do not under any circumstances specify the "universal" detector. It is <em>not actually universal</em> despite its name!</p>
+
+<h2 id="Exception_for_minority_languages">Exception for minority languages</h2>
+
+<p>If the localization is for minority language and the users are typically literate in the majority language of the region and read Web content written in the majority language very often, it is appropriate to specify the fallback encoding and the heuristic detection mode to be the same as for the localization for the majority language of the region. For example, for a localization for minority language in Russia, it is appropriate to copy the settings from the Russian localization.</p>
+
+<h2 id="Setting_some_encodings_to_be_more_easily_selectable_from_the_character_encoding_menu">Setting some encodings to be more easily selectable from the character encoding menu</h2>
+
+<p>The preference <code>intl.charsetmenu.browser.static</code> in <code>intl.properties</code> makes some character encodings more easily available in the Character Encoding menu in the browser. The value should be a comma-separated list of canonical encoding names. The list should include at least the fallback encoding, windows-1252 and UTF-8. For locales where there are multiple common legacy encodings, all those encodings should be included. For example, the fallback encoding for Japanese is Shift_JIS, but there are other legacy encodings: ISO-2022-JP and EUC-JP. Therefore, it makes sense for the list to be Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8.</p>
diff --git a/files/ru/web/guide/mobile/index.html b/files/ru/web/guide/mobile/index.html
new file mode 100644
index 0000000000..e7eb95c172
--- /dev/null
+++ b/files/ru/web/guide/mobile/index.html
@@ -0,0 +1,75 @@
+---
+title: Веб-разработка под мобильные устройства
+slug: Web/Guide/mobile
+tags:
+  - Средний уровень
+translation_of: Web/Guide/Mobile
+---
+<p>На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Если вы ищете информацию о проекте Firefox OS от Mozilla, смотрите страницу <a href="/ru/docs/Archive/B2G_OS" title="Boot to Gecko">Firefox OS</a>. Возможно вас также интересует подробная информация о  <a href="/ru/docs/Mozilla/Firefox_%D0%B4%D0%BB%D1%8F_Android" title="Firefox for Android">Firefox для Android</a>.</p>
+
+<p>Статья разбита на два раздела: <a href="#разработка_под_мобильные_устройства">разработка под мобильные устройства</a> и <a href="#кросс_браузерная_верстка">кросс-браузерная совместимость</a>.<br>
+ См. также руководство от Jason Grlicky по <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">дружелюбность-к-мобильным</a> для веб-разработчиков.</p>
+
+<h2 id="Разработка_под_мобильные_устройства"><a id="разработка_под_мобильные_устройства" name="разработка_под_мобильные_устройства">Разработка под мобильные устройства</a></h2>
+
+<p>По сравнению со стационарными компьютерами и ноутбуками у мобильных устройств гораздо больше различий в их аппаратной составляющей. Экраны мобильных устройств могут иметь как очень большое, так и очень маленькое разрешение. Помимо этого, они могут автоматически переключаться между вертикальной и горизонтальной ориентацией в момент, когда пользователь поворачивает устройство. Они обычно используют сенсорный экран для пользовательского ввода. Всевозможные API, например,  геолокация или ориентация, которые либо не поддерживаются или не используются на на стационарных компьютерах, предоставляют мобильным устройствам пользователей дополнительные способы взаимодействия с вашим сайтом.</p>
+
+<h3 id="Работа_с_маленькими_экранами">Работа с  маленькими экранами</h3>
+
+<p><a href="/en-US/docs/Web/Guide/Responsive_design" title="/en-US/docs/Web/Guide/Responsive_design">Адаптивный веб-дизайн</a> – это термин, означающий набор методов, позволяющих вашему веб-сайту адаптировать разметку под среду, в которой он просматривается. Как правило, это изменяющиеся размеры и ориентация. Основные методы адаптивного веб-дизайна:</p>
+
+<ul>
+ <li>обтекаемая разметка CSS, позволяющая плавно адаптировать страницу под изменяющиеся размеры окна</li>
+ <li>использование <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">медиа-запросов</a>, подключающих стили по условию, соответственно, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">ширине</a> и <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">высоте</a> экрана.</li>
+</ul>
+
+<p><a href="/ru/docs/Mozilla/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">Meta-тег viewport</a> указывает браузеру, каким образом отображать ваш сайт в подходящем масштабе на устройстве пользователя.</p>
+
+<h3 id="Работа_с_сенсорными_экранами">Работа с сенсорными экранами</h3>
+
+<p>Для использования сенсорного экрана вам понадобится работать с <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM Touch events</a>. Вы не сможете использовать псевдо класс <a href="/ru/docs/Web/CSS/:hover" title="En/CSS/:hover">CSS :hover</a>, а при проектировании интерактивных элементов (к примеру, кнопок) нужно будет учитывать тот факт, что пальцы толще, чем указатели мыши. Дополнительные материалы в статье <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">проектирование под сенсорные экраны</a>.</p>
+
+<p>Вы можете использовать медиа-запрос <a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a>, чтобы использовать нужные вам правила CSS на устройствах, поддерживающих обработку нажатий на экран.</p>
+
+<h3 id="Оптимизация_изображений">Оптимизация изображений</h3>
+
+<p>Чтобы помочь пользователям, чьи устройства имеют медленный или дорогой доступ к сети, вы можете оптимизировать изображения, загружая изображения под соответствующие размеры и разрешение экрана устройства. Это делается в CSS указывая в медиа-запросах <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, и <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p>
+
+<p>Также вы можете использовать свойства CSS чтобы применить визуальные эффекты типа <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> и <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> без использования изображений.</p>
+
+<h3 id="API_для_мобильных_устройств">API для мобильных устройств</h3>
+
+<p>Наконец, вы можете воспользоваться преимуществом новых возможностей, предлагаемых мобильными устройствами, такие как <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> и <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p>
+
+<h2 id="Кросс-браузерная_верстка"><a id="кросс_браузерная_верстка" name="кросс_браузерная_верстка">Кросс-браузерная верстка</a></h2>
+
+<h3 id="Пишите_кросс-браузерный_код">Пишите кросс-браузерный код</h3>
+
+<p>Чтобы создавать веб-сайты, которые будут работать приемлемо во всех мобильных браузерах:</p>
+
+<ul>
+ <li>Старайтесь избегать использования стилей, специфических для браузеров, таких как свойства CSS с вендорными префиксами.</li>
+ <li>Если всё же вам необходимо ими воспользоваться, убедитесь что другие браузеры применяют свои собственные версии этих свойств, и укажите их.</li>
+ <li>Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощенный вариант.</li>
+</ul>
+
+<p>Например, если вы указываете градиент в качестве фона для какого-либо текста, используя стиль с вендорным префиксом типа <code>-webkit-linear-gradient</code>, правильнее включить другие варианты с вендор-специфичекими префиксами для свойства <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a>. Если вы этого не делаете, по крайней мере удостоверьтесь, что фон, отображаемый по умолчанию, контрастирует с текстом: тогда страница, по крайней мере, будет корректно отображаться в браузере, который не воспринимает ваше <code>linear-gradient</code> правило.</p>
+
+<p>Смотрите этот <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">список Gecko-специфических свойств</a>, и этот список <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-</a><a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">специфических свойств</a>, и <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">таблицу вендор-специфических свойств</a> от Peter Beverloo.</p>
+
+<p>Использование инструментов, наподобие <a class="external" href="http://csslint.net/">CSS Lint</a> может помочь обнаружить подобные проблемы в коде, а такие препроцессоры, как <a class="external" href="http://sass-lang.com/">SASS</a> и <a class="external" href="http://lesscss.org/">LESS</a> могут помочь вам создавать кросс-браузерный код.</p>
+
+<h3 id="Позаботьтесь_об_анализе_user_agent">Позаботьтесь об анализе user agent</h3>
+
+<p>Для веб-сайтов предпочтительнее обнаружить свойства, специфичные для устройства, такие как размеры экрана и наличие сенсорного экрана, используя описанные выше способы, и соответсвенно адаптироваться. Но иногда это непрактично, и веб-сайты прибегают к синтаксическому разбору строки user agent браузера чтобы различить десктопы, планшеты, и смартфоны, чтобы отправлять разный контент под каждый тип устройств.</p>
+
+<p>Если вы это делаете, удостоверьтесь что ваш алгоритм точный, и вы не отправляете неверный тип контента на устройство из-за того что вы не знаете какой-то специфической для браузера user agent строки. Смотрите данное <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">руководство по использованию user agent строки чтобы определить тип устройства</a>.</p>
+
+<h3 id="Проверяйте_на_многих_браузерах">Проверяйте на многих браузерах</h3>
+
+<p>Проверяйте ваш веб-сайт на многих браузерах. Это означает тестирование на многих платформах — по крайней мере на iOS и Android.</p>
+
+<ul>
+ <li>тестируйте под мобильный Safari на iPhone используя <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS симулятор</a></li>
+ <li>тестируйте под Opera и Firefox используя <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. Смотрите эти дополнительные интсрукции для <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">запуска Firefox под Android используя эмулятор Android</a>.</li>
+</ul>
diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.html
new file mode 100644
index 0000000000..a99fe9cd84
--- /dev/null
+++ b/files/ru/web/guide/parsing_and_serializing_xml/index.html
@@ -0,0 +1,118 @@
+---
+title: Прямая и обратная обработка XML
+slug: Web/Guide/Parsing_and_serializing_XML
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>
+ <audio class="audio-for-speech"></audio>
+</p>
+
+<div class="translate-tooltip-mtz hidden">
+<div class="header">
+<div class="header-controls"></div>
+
+<div class="translate-icons"><img class="from" src=""> <img class="arrow"> <img class="to" src=""></div>
+</div>
+
+<div class="translated-text">
+<div class="words"></div>
+
+<div class="sentences"></div>
+</div>
+</div>
+
+<p>Иногда возникает необходимость в обработке {{Glossary("XML")}} и в последующей конвертации в древо {{Glossary("DOM")}}. Или наоборот, необходимо перевести древо DOM в XML. В этой статье рассмотрим объекты платформы web для обработки XML.</p>
+
+<dl>
+ <dt>{{domxref("XMLSerializer")}}</dt>
+ <dd>Сериализует деревья DOM, преобразуя их в строки, содержащие XML.</dd>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd>Создает дерево DOM, анализируя строку, содержащую XML, возвращая {{domxref ("XMLDocument")}} или {{domxref ("Document")}} в зависимости от входящих данных.</dd>
+ <dt>{{domxref("XMLHttpRequest")}}</dt>
+ <dd>Загружает контент из URL-адреса; Содержимое XML возвращается как объект XML {{domxref ("Document")}} с деревом DOM, построенным из самого XML.</dd>
+ <dt><a href="/en-US/docs/Web/XPath">XPath</a></dt>
+ <dd>Технология создания строк, содержащих адреса для определенных частей документа XML, и поиска узлов XML на основе этих адресов.</dd>
+</dl>
+
+<h2 id="Создание_XML-документа">Создание XML-документа</h2>
+
+<p>Использование одного из следующих подходов для создания XML-документа (который является экземпляром {{domxref ("Document")}}.</p>
+
+<h3 id="Parsing_строк_в_дерево_DOM">Parsing строк в дерево DOM</h3>
+
+<p>В этом примере фрагмент XML в строке преобразуется в дерево DOM с помощью {{domxref ("DOMParser")}}:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">var sMyString = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;';
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sMyString, "application/xml");
+// print the name of the root element or error message
+console.log(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+</pre>
+</div>
+
+<h3 id="Parsing_URL-addressable_ресурсов_в_дерево_DOM">Parsing URL-addressable ресурсов в дерево DOM</h3>
+
+<h4 id="Использование_XMLHttpRequest">Использование XMLHttpRequest</h4>
+
+<p>Вот пример кода, который считывает и анализирует XML-файл с URL-адресом в дереве DOM:</p>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+xhr.onerror = function() {
+  dump("Error while getting XML.");
+}
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+</pre>
+
+<p>Значение, возвращаемое в поле {{domxref ("XMLHttpRequest.responseXML", "responseXML")}} объекта xhr, является {{domxref ("Document")}}, созданным путем синтаксического анализа XML.</p>
+
+<p>Если документ представляет собой {{Glossary ("HTML")}}, приведенный выше код вернет {{domxref ("Document")}}. Если документ XML, результирующий объект на самом деле является {{domxref ("XMLDocument")}}. Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.</p>
+
+<div class="note">
+<p>Примечание: на самом деле существует интерфейс {{domxref ("HTMLDocument")}}, но это не обязательно независимый тип. В некоторых браузерах это так, а в других это просто псевдоним для интерфейса документа.</p>
+</div>
+
+<h2 id="Сериализация_XML-документа">Сериализация XML-документа</h2>
+
+<p>Имея {{domxref ("Document")}}, вы можете сериализовать дерево DOM документа обратно в XML с помощью метода {{domxref ("XMLSerializer.serializeToString ()")}}.</p>
+
+<p>Используйте следующие подходы для сериализации содержимого XML-документа, созданного в предыдущем разделе.</p>
+
+<h3 id="Serializing_DOM_trees_to_strings">Serializing DOM trees to strings</h3>
+
+<p>Сначала создайте дерево DOM, как описано в разделе Как создать дерево DOM. В качестве альтернативы используйте дерево DOM, полученное из {{domxref ("XMLHttpRequest")}}.</p>
+
+<p>Чтобы сериализовать документ дерева DOM в текст XML, вызовите {{domxref ("XMLSerializer.serializeToString ()")}}:</p>
+
+<pre class="brush: js notranslate">var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);</pre>
+
+<h3 id="Serializing_HTML_documents">Serializing HTML documents</h3>
+
+<p>Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать ее с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.</p>
+
+<pre class="brush: js notranslate">var docHTML = document.documentElement.innerHTML;
+</pre>
+
+<p>В результате docHTML представляет собой {{domxref ("DOMString")}}, содержащий HTML-код содержимого документа; то есть содержимое элемента {{HTMLElement ("body")}}.</p>
+
+<p>Вы можете получить HTML, соответствующий &lt;body&gt; и его потомкам, с помощью этого кода:</p>
+
+<pre class="brush: js notranslate">var docHTML = document.documentElement.outerHTML;</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("Document")}}, {{domxref("XMLDocument")}}, and {{domxref("HTMLDocument")}}</li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 118px; top: 2989.8px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html b/files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html
new file mode 100644
index 0000000000..d07516957c
--- /dev/null
+++ b/files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html
@@ -0,0 +1,144 @@
+---
+title: Алгоритм обработки текста двусторонней направленности (Юникод)
+slug: Web/Guide/Unicode_Bidrectional_Text_Algorithm
+tags:
+  - Алгоритм
+  - Локализация
+  - Руководство
+  - Юникод
+  - направление
+translation_of: Web/Guide/Unicode_Bidrectional_Text_Algorithm
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary"><strong>Алгоритм обработки текста двусторонней направленности</strong> (Unicode® Bidirectional Algorithm или <strong>BiDi</strong> Algorithm) — раздел стандарта текста Unicode, описывающий в каком порядке раскладываются символы во время обработки страницы {{Glossary("агентом пользователя")}}.</span>
+Этот алгоритм полезен при создании локализированного веб-контента.</p>
+
+<p class="summary">В руководстве рассказывается о том, как работает BiDi алгоритм и как его применить. Алгоритм непосредственно связан с {{Glossary("HTML")}} и {{Glossary("CSS")}}, при обработке которых определяется порядок и направление символов в тексте.</p>
+
+<h2 id="Основы">Основы</h2>
+
+<p>(Базовое направление, типы символов, и т.д.)</p>
+
+<h2 id="Алгоритм">Алгоритм</h2>
+
+<h3 id="Уровни_направленности_символов">Уровни направленности символов</h3>
+
+<h3 id="Directional_runs">Directional runs</h3>
+
+<p>(Что это, что такое базовое направление)</p>
+
+<h3 id="Символы_нейтральной_направленности">Символы нейтральной направленности</h3>
+
+<h2 id="Overriding_the_algorithm">Overriding the algorithm</h2>
+
+<p>Content about using HTML and CSS to override the default behavior of the algorithm; include info about isolating ranges etc.</p>
+
+<h3 id="Overiding_BiDi_using_Unicode_control_characters">Overiding BiDi using Unicode control characters</h3>
+
+<p>Unicode provides a number of special control characters that make it possible to control directionality of ranges of text. There are two sets of control characters; one set opens the override, and another restores the original directionality. You must always follow each opening character with an appropriate closing character.</p>
+
+<table class="standard-table">
+ <caption>Initial Unicode BiDi algorithm control characters</caption>
+ <thead>
+  <tr>
+   <th scope="row">Character</th>
+   <th scope="col">Code point</th>
+   <th scope="col">HTML entity</th>
+   <th scope="col">Markup equivalent</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Left-to-Right Isolate (LRI)</th>
+   <td>U+2066</td>
+   <td><code>&amp;#x2066;</code></td>
+   <td><code>dir="ltr"</code></td>
+   <td>Sets the base direction to LTR, isolating the embedded content from the surrounding text</td>
+  </tr>
+  <tr>
+   <th scope="row">Right-to-Left Isolate (LRI)</th>
+   <td>U+2067</td>
+   <td><code>&amp;#x2067;</code></td>
+   <td><code>dir="rtl"</code></td>
+   <td>Sets the base direction to RTL, isolating the embedded content from the surrounding text</td>
+  </tr>
+  <tr>
+   <th scope="row">First Strong Isolate (FSI)</th>
+   <td>U+2068</td>
+   <td><code>&amp;#x2068;</code></td>
+   <td><code>dir="auto"</code></td>
+   <td>Isolates the content and sets the base direction according to the first strongly-typed directional character in the embedded content</td>
+  </tr>
+  <tr>
+   <th scope="row">Left-to-Right Embedding (LRE)</th>
+   <td>U+202A</td>
+   <td><code>&amp;#x202A;</code></td>
+   <td><code>dir="ltr"</code></td>
+   <td>Sets the base direction to LTR but allows the embedded text to interact with the surrounding content; this risks the effect spilling over to the outer content</td>
+  </tr>
+  <tr>
+   <th scope="row">Right-to-Left Embedding (RLE)</th>
+   <td>U+202B</td>
+   <td><code>&amp;#x202B;</code></td>
+   <td><code>dir="rtl"</code></td>
+   <td>Sets the base direction to RTL, but lets the embedded text interact with the surrounding content, risking spillover effects</td>
+  </tr>
+  <tr>
+   <th scope="row">Left-to-Right Override (LRO)</th>
+   <td>U+202D</td>
+   <td><code>&amp;#x202D;</code></td>
+   <td><code>&lt;bdo dir="ltr"&gt;</code></td>
+   <td>Overrides the BiDi algorithm, displaying the characters in memory order, from left to right</td>
+  </tr>
+  <tr>
+   <th scope="row">Right-to-Left Override (RLO)</th>
+   <td>U+202E</td>
+   <td><code>&amp;#x202E;</code></td>
+   <td><code>&lt;bdo dir="rtl"&gt;</code></td>
+   <td>Overrides the BiDi algorithm and displays the embedded characters in reverse memory order, from right to left</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Closing Unicode BiDi algorithm control characters</caption>
+ <thead>
+  <tr>
+   <th scope="row">Character</th>
+   <th scope="col">Code point</th>
+   <th scope="col">HTML entity</th>
+   <th scope="col">Markup equivalent</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th rowspan="2" scope="row">Pop Directional Formatting (PDF)</th>
+   <td rowspan="2">U+202C</td>
+   <td rowspan="2"><code>&amp;#x202C;</code></td>
+   <td>Closing whatever opening tag used the {{htmlattrxref("dir")}} attribute</td>
+   <td>Used for RLE or LRE</td>
+  </tr>
+  <tr>
+   <td><code>&lt;/bdo&gt;</code></td>
+   <td>Used for RLO or LRO</td>
+  </tr>
+  <tr>
+   <th scope="row">Pop Directional Isolate (PDI)</th>
+   <td>U+2069</td>
+   <td><code>&amp;#x2069;</code></td>
+   <td>Closing whatever opening tag used the {{htmlattrxref("dir")}} attribute</td>
+   <td>Used for RLI, LRI, or FSI</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://www.unicode.org/reports/tr9/">Соответствующий стандарт Юникод (Unicode® Standard Annex #9: Unicode Bidirectional Algorithm)</a></li>
+ <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">W3C: Unicode Bidirectional Algorithm basics</a></li>
+ <li><a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls">W3C Q&amp;A: How to use Unicode controls for bidi text</a></li>
+</ul>
diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.html
new file mode 100644
index 0000000000..9204a6fb1a
--- /dev/null
+++ b/files/ru/web/guide/user_input_methods/index.html
@@ -0,0 +1,198 @@
+---
+title: Ввод пользователя и управление
+slug: Web/Guide/User_input_methods
+tags:
+  - Клавиатура
+  - Ориентация экрана
+  - ввод пользователя
+  - касание
+  - мышь
+  - указатель
+translation_of: Web/Guide/User_input_methods
+---
+<div class="summary">
+<p><span class="seoSummary">Это руководство содержит рекомендации по обработке пользовательского ввода
+ и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.
+ Связанные интерфейсы API и события: <a href="/ru/docs/Web/API/Touch_events">события касаний</a>, <a href="/ru/docs/Web/API/Pointer_Lock_API">интерфейс отслеживания указателя мыши</a>,
+ <a href="/ru/docs/Web/API/CSS_Object_Model/ориентация_экрана">интерфейс ориентации экрана</a>,
+ <a href="/ru/docs/DOM/Using_fullscreen_mode">интерфейс режима "на весь экран"</a>, <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">перетаскивание и сброс</a> и т. д.</span></p>
+</div>
+
+<h2 id="Рабочая_область">Рабочая область</h2>
+
+<p>The following diagram illustrates the typical workflow for implementing user input mechanisms:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
+
+<p>First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries.</p>
+
+<h2 id="Recommendations">Recommendations</h2>
+
+<p>Available input mechanisms depend on the capabilities of the device running the application:</p>
+
+<ul>
+ <li>Some devices provide touchscreen displays: the Web Platform offers <a href="/en-US/docs/Web/Guide/Events/Touch_events">touch events</a> to interpret finger activity on touch-based user interfaces.</li>
+ <li>For devices providing a mouse/touchpad as a pointing method, the <a href="/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> helps you in implementing a first person 3D game or other applications requiring full control of the pointing device. And the <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> helps you in displaying your app in fullscreen mode.</li>
+ <li>Using features such as <a href="/en-US/docs/Web/Guide/HTML/Content_Editable">contentEditable</a> elements you can implement fast rich-text editors and with <a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">Drag&amp;Drop</a> let users moving elements inside your app. When screen orientation matters for your application, through the <a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a> you can read the screen orientation state and perform other actions.</li>
+ <li>You should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.</li>
+</ul>
+
+<p>The following is a set of recommendations and best practices for using such tools in Open Web Apps.</p>
+
+<h3 id="Decide_what_input_mechanism_you’re_using">Decide what input mechanism you’re using</h3>
+
+<h4 id="Keyboard">Keyboard</h4>
+
+<p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true);
+window.addEventListener("keyup", handleKeyUp, true);</pre>
+
+<p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Have a look at the <a href="/en-US/docs/Web/Reference/Events">Events reference</a> and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.</p>
+</div>
+
+<h4 id="Mouse">Mouse</h4>
+
+<p>The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include <a href="/en-US/docs/Web/Reference/Events/click"><code>click</code></a>, <a href="/en-US/docs/Web/Reference/Events/dblclick"><code>dblclick</code></a>, <a href="/en-US/docs/Web/Reference/Events/mouseup"><code>mouseup</code></a>, and <a href="/en-US/docs/Web/Reference/Events/mousedown"><code>mousedown</code></a>. The list of all events using the Mouse Event Interface is provided in the <a href="/en-US/docs/Web/Reference/Events">Events reference</a>.</p>
+
+<p>When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag &amp; Drop (see below).</p>
+
+<h4 id="Finger_touch">Finger touch</h4>
+
+<p>When developing web applications meant to be installed on touchscreen devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input. <a href="/en-US/docs/Web/Guide/Events/Touch_events">Touch events</a> can help you implement interactive elements and common interaction gestures on touchscreen devices.</p>
+
+<p>If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:</p>
+
+<pre class="brush: js notranslate">element.addEventListener("touchstart", handleStart, false);
+element.addEventListener("touchcancel", handleCancel, false);
+element.addEventListener("touchend", handleEnd, false);
+element.addEventListener("touchmove", handleMove, false);</pre>
+
+<p>where <code>element</code> is the DOM element you want to register the touch events on.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For further information about what you can do with touch events, please read our <a href="/en-US/docs/Web/Guide/Events/Touch_events">touch events guide</a>.</p>
+</div>
+
+<h4 id="Pointer_Events">Pointer Events</h4>
+
+<p>When dealing with devices that incorporate multiple forms of input, like mouse, finger touch and pen input, it might be hard to develop a solution that works for all these different control mechanisms. <a href="http://www.w3.org/TR/pointerevents/">Pointer Events</a> help developers more easily manage events across devices by normalizing the handling of each one. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. The events for handling generic pointer input look a lot like those for mouse: <code>pointerdown</code>, <code>pointermove</code>, <code>pointerup</code>, <code>pointerover</code>, <code>pointerout</code>, etc.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pointer Events are not widely supported yet, but a <a href="https://github.com/mozilla/pointer.js">pointer.js polyfill</a> is available on Mozilla Github.</p>
+</div>
+
+<h3 id="Implement_controls">Implement controls</h3>
+
+<h4 id="Pointer_lock">Pointer lock</h4>
+
+<p>In some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the browser or screen: the {{domxref("Pointer_Lock_API")}} gives you full control of the pointing device.</p>
+
+<p>This is the code to request pointer lock on an <code>element</code>:</p>
+
+<pre class="brush: js notranslate">element.requestPointerLock();</pre>
+
+<div class="note">
+<p><strong>Note</strong>: For a full tutorial and reference, read our {{domxref("Pointer_Lock_API")}} page.</p>
+</div>
+
+<h4 id="Screen_Orientation">Screen Orientation</h4>
+
+<p>When screen orientation matters for your application, you can read the screen orientation state, be informed when this state changes, and able to lock the screen orientation to a specific state (usually portrait or landscape) through the <a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>.</p>
+
+<p>Orientation data can be retrieved through the {{domxref("screen.orientation")}} attribute or through the <a href="/en-US/docs/Web/Guide/CSS/Media_queries#orientation"><code>orientation</code></a> media feature. When <code>screen.orientation</code> changes, the {{domxref("screen.orientationchange")}} event is fired on the screen object. Locking the screen orientation is made possible by invoking the {{domxref("screen.lockOrientation")}} method, while the {{domxref("screen.unlockOrientation")}} method removes all the previous screen locks that have been set.</p>
+
+<div class="note">
+<p><strong>Note</strong>: More information about the Screen Orientation API can be found in <a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Managing screen orientation</a>.</p>
+</div>
+
+<h4 id="Fullscreen">Fullscreen</h4>
+
+<p>You might need to present an element of your application (such as a {{ htmlelement("video") }}, for example) in fullscreen mode. You can achieve this by calling {{domxref("Element.requestFullscreen()")}} on that element. Bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this:</p>
+
+<pre class="brush: js notranslate">var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+} else if (elem.msRequestFullscreen) {
+  elem.msRequestFullscreen();
+} else if (elem.mozRequestFullScreen) {
+  elem.mozRequestFullScreen();
+} else if (elem.webkitRequestFullscreen) {
+  elem.webkitRequestFullscreen();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: To find more out about adding fullscreen functionality your application, read our documentation about <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">using fullscreen mode</a>.</p>
+</div>
+
+<h4 id="Drag_Drop">Drag &amp; Drop</h4>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">Drag &amp; Drop</a> allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</p>
+
+<p>Here is an example that allows a section of content to be dragged.</p>
+
+<pre class="brush: html notranslate">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+    This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+
&lt;/div&gt;</pre>
+
+<p>in which we:</p>
+
+<ul>
+ <li>Set the <a href="/en-US/docs/Web/HTML/Global_attributes#draggable"><code>draggable</code></a> attribute to true on the element that you wish to make draggable</li>
+ <li>Add a listener for the <a href="/en-US/docs/Web/Events/dragstart"><code>dragstart</code></a> event and set the drag data within this listener</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can find more information in the <a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">MDN Drag &amp; Drop documentation</a>.</p>
+</div>
+
+<h4 id="contentEditable">contentEditable</h4>
+
+<p>In open web apps any DOM element can be made directly editable using the <a href="/en-US/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> attribute.</p>
+
+<pre class="brush: html notranslate">&lt;div contenteditable="true"&gt;
+    This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Compatibility information, examples and other resources can be found in the <a href="/en-US/docs/Web/Guide/HTML/Content_Editable">Content Editable guide</a>.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<dl>
+ <dt><strong><a href="/en/DOM/Touch_events#Example">Tracking multiple touch points at a time</a></strong></dt>
+ <dd>This example tracks multiple touch points at a time, allowing the user to draw in a <code>{{htmlelement("canvas")}}</code> with more than one finger at a time. It will only work on a browser that supports touch events.</dd>
+ <dt><strong><a href="/en-US/docs/Web/API/Pointer_Lock_API#example">Simple pointer lock demo</a></strong></dt>
+ <dd>We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a <code>{{htmlelement("canvas")}}</code> element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.</dd>
+ <dt><strong><a href="http://html5demos.com/contenteditable">contentEditable demo</a></strong></dt>
+ <dd>This is a working example showing how contenteditable can be used to create an editable document section, the state of which is then saved using <a href="/en-US/docs/Web/Guide/API/DOM/Storage">LocalStorage</a>.</dd>
+</dl>
+
+<h2 id="Руководства">Руководства</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Touch_events">События касаний (тач-события) - руководство</a></li>
+ <li><a href="/ru/docs/Web/API/CSS_Object_Model/ориентация_экрана">Разбираемся с ориентацией экрана</a></li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Использование полноэкранного режима</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Перетаскивание и сброс нескольких объектов</a></li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Drag_and_drop/Drag_operations">Руководство по перетаскиваниям</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Touch_events">Touch events</a></li>
+ <li>{{domxref("Pointer_Lock_API")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Fullscreen API</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">Drag &amp; Drop</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Content_Editable">Content Editable</a></li>
+ <li><a href="/en-US/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li>
+</ul>
diff --git a/files/ru/web/guide/woff/index.html b/files/ru/web/guide/woff/index.html
new file mode 100644
index 0000000000..330047ef99
--- /dev/null
+++ b/files/ru/web/guide/woff/index.html
@@ -0,0 +1,65 @@
+---
+title: The Web Open Font Format (WOFF)
+slug: Web/Guide/WOFF
+tags:
+  - Шрифты
+  - шрифт
+translation_of: Web/Guide/WOFF
+---
+<p><span class="seoSummary"><strong>WOFF</strong>(<strong>Web Open Font Format</strong>) — формат шрифтов, разработанный Mozilla совместно с Type Supply, LettError, и др.</span> По сути — это сжатая версия формата <a href="https://ru.wikipedia.org/wiki/Sfnt"><code>sfnt</code></a>, используемого шрифтами TrueType, OpenType, и Open Font Format, но <span class="seoSummary">с возможностью добавления мета-данных и приватных структур данных (private-use data structures). Например, в формате предусмотрены поля для ввода информации о лицензии.</span></p>
+
+<p>Преимущества использования WOFF:</p>
+
+<ol>
+ <li>The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.</li>
+ <li>Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers.</li>
+ <li>Both proprietary and free software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.</li>
+</ol>
+
+<p>Существует две версии WOFF, отличающихся используемым алгоритмом сжатия: WOFF и WOFF2. В правиле {{cssxref("@font-face")}} они определяются в дескрипторе <code>format</code> как <code>'woff'</code> или <code>'woff2'</code> соответственно.</p>
+
+<h2 id="Использование_WOFF">Использование WOFF</h2>
+
+<p>You can use the {{cssxref("@font-face")}} CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except it will likely let your content download more efficiently due to the addition of compression.</p>
+
+<h2 id="Tools_for_working_with_WOFF_fonts">Tools for working with WOFF fonts</h2>
+
+<ul>
+ <li><a href="https://github.com/odemiral/woff2sfnt-sfnt2woff">Tools for working with WOFF</a> fonts are available. <code>sfnt2woff</code> and <code>woff2sfnt</code> convert between WOFF and OpenType.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', '')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>New compression algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', '')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("@font-face")}}</li>
+</ul>
diff --git a/files/ru/web/guide/графика/index.html b/files/ru/web/guide/графика/index.html
new file mode 100644
index 0000000000..57dd4238e1
--- /dev/null
+++ b/files/ru/web/guide/графика/index.html
@@ -0,0 +1,41 @@
+---
+title: Графика для Web
+slug: Web/Guide/Графика
+translation_of: Web/Guide/Graphics
+---
+<p>Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства  {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать ее каким-либо образом после. Как это проделать можно узнать в следующих статьях.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D графика</h2>
+
+<dl>
+ <dt><a href="/ru/docs/HTML/Canvas">Канвас</a></dt>
+ <dd>Элемент {{HTMLElement("canvas")}} представляет удобный API для рисования 2D графики с помощью JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/SVG">SVG</a></dt>
+ <dd>Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет рисовать линии, кривые, и другие геометрические фигуры. С их помощью можно создавать <span style="font-family: arial,sans-serif; font-size: 10.5pt; line-height: 115%;">масштабируемые </span>изображения, которые не теряют в качестве при изменении размера в отличии от растровой графики.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/Graphics">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D графика</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/WebGL">WebGL</a></dt>
+ <dd>Руководство по быстрому старту с WebGL. WebGL предоставляет API для работы с 3D графиками в веб. Эта технология позволяет Вам использовать стандартный OpenGL ES в веб контексте.</dd>
+</dl>
+
+<h2 id="Видео">Видео</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Использование HTML5 видео и аудио</a></dt>
+ <dd>Встраивание видео и аудио в HTML документ и управление проигрыванием.</dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC в WebRTC означает Real-Time Communications, технология которая позволяет стримить аудио/видео и данные между клиентами браузера (пирами).</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/guide/производительность/index.html b/files/ru/web/guide/производительность/index.html
new file mode 100644
index 0000000000..8b1d2760da
--- /dev/null
+++ b/files/ru/web/guide/производительность/index.html
@@ -0,0 +1,20 @@
+---
+title: Оптимизация и производительность
+slug: Web/Guide/Производительность
+tags:
+  - Оптимизация
+  - Производительность
+translation_of: Web/Guide/Performance
+---
+<p>Создаваемые Вами современные веб-приложения и сайты должны иметь хорошую производительность - работать быстро и эффективно, как на персональных компьютерах (десктоп), так и на менее мощных мобильных устройствах. Существуют различные инструменты для тестирования сайтов на производительность. Самые известные из них:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/speed/pagespeed/insights/" rel="resources">Google PageSpeed Insights</a></li>
+ <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></li>
+ <li><a href="https://www.webpagetest.org/">WebPageTest</a></li>
+ <li>Browser developer tools</li>
+</ul>
+
+<p>Производительность в web - первостепенная задача для тех, кто заботится о комфорте конечного пользователя.</p>
+
+<p>{{LandingPageListSubpages}}</p>