initial commit

1 files changed, 171 insertions, 0 deletions

diff --git a/files/ru/web/html/element/pre/index.html b/files/ru/web/html/element/pre/index.html
new file mode 100644
index 0000000000..70a3b05b1f
--- /dev/null
+++ b/files/ru/web/html/element/pre/index.html
@@ -0,0 +1,171 @@
+---
+title: '<pre>: Предварительно отформатированный текстовый элемент'
+slug: Web/HTML/Element/pre
+tags:
+  - HTML
+  - HTML группировка контента
+  - 'HTML: поток контента'
+  - Элемент
+translation_of: Web/HTML/Element/pre
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>Элемент HTML <code>&lt;pre&gt;</code> </strong> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле.</span> Текст обычно отображается с использованием непропорционального ("<a href="/ru/docs/XUL/Style/monospace">monospace</a>") шрифта. Пробелы внутри этого элемента отображаются как записанные.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%AF%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">Явный контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">содержимое потока</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Неявная роль ARIA</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLPreElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя только <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt>
+ <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Это был нестандартный синоним {{htmlattrxref("width", "pre")}}. Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.</dd>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
+ <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.</dd>
+ <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
+ <dd>Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Использовать CSS для изменения цвета шрифта легко.&lt;/p&gt;
+&lt;pre&gt;
+body {
+  color: red;
+}
+&lt;/pre&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно четко и лаконично описывать содержание изображения или диаграммы.</p>
+
+<p>Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.</p>
+
+<p>Комбинация элементов {{HTMLElement("figure")}} и {{HTMLElement("figcaption")}}, дополненная {{htmlattrxref("id")}} и <a href="/ru/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> и <code>aria-labelledby</code>, позволяет объявить предварительно отформатированный текст как изображение, а <code>figcaption</code> служит альтернативным описанием изображения.</p>
+
+<h3 id="Пример_2">Пример</h3>
+
+<pre>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
+  &lt;pre&gt;
+  ____________________________
+&lt;  Я эксперт в своей области.  &gt;
+  ----------------------------
+         \   ^__^
+          \  (oo)\_______
+             (__)\       )\/\
+                 ||----w |
+                 ||     ||
+  &lt;/pre&gt;
+  &lt;figcaption id="cow-caption"&gt;
+     Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов.
+  &lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Характеристики">Характеристики</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('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No significant change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No significant change from {{SpecName("HTML4.01")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Deprecated the <code>cols</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("html.elements.pre")}}</p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
+ <li>Связанный элемент: {{HTMLElement("code")}}</li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1739px; left: 246px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>