diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-10-27 02:31:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-27 02:31:24 +0300 |
| commit | 980fe00a74a9ad013b945755415ace2e5429c3c2 (patch) | |
| tree | a1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/learn/html/introduction_to_html | |
| parent | 374a039b97a11ee7306539d16aaab27fed66b398 (diff) | |
| download | translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2 translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip | |
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/learn/html/introduction_to_html')
6 files changed, 115 insertions, 115 deletions
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index b082eab08e..fbdc97774a 100644 --- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -38,7 +38,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <p>Давайте рассмотрим пример набора терминов и определений:</p> -<pre class="notranslate">Солилоквий +<pre>Солилоквий Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам). Монолог Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам. @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <p>Закончим разметку нашего примера:</p> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt>Солилоквий</dt> <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd> <dt>Монолог</dt> @@ -86,7 +86,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -128,7 +128,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -219,12 +219,12 @@ textarea.onkeyup = function(){ <p class="syntaxbox">Например, следующая разметка берётся из страницы элемента MDN <code><strong><blockquote></strong></code>:</p> -<pre class="brush: html notranslate"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block +<pre class="brush: html"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p></pre> <p>Чтобы превратить её в блочную цитату, мы просто делаем следующее:</p> -<pre class="brush: html notranslate"><blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p> </blockquote></pre> @@ -238,7 +238,7 @@ Quotation Element</em>) указывает на то, что заключ <p>Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <code><q></code> MDN:</p> -<pre class="brush: html notranslate"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен +<pre class="brush: html"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p></pre> <p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p> @@ -249,7 +249,7 @@ Quotation Element</em>) указывает на то, что заключ <p>Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <code><cite></code> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <code><cite></code> с источником цитаты:</p> -<pre class="brush: html notranslate"><p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> <cite>блочных цитатах</cite></a>: </p> @@ -286,7 +286,7 @@ Quotation Element</em>) указывает на то, что заключ <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -305,7 +305,7 @@ Quotation Element</em>) указывает на то, что заключ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -325,7 +325,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ <p>Давайте рассмотрим несколько примеров:</p> -<pre class="notranslate"><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> +<pre><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> </pre> @@ -434,7 +434,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -451,7 +451,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -471,7 +471,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -556,13 +556,13 @@ textarea.onkeyup = function(){ <p>HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> </address></pre> <p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p> </address></pre> @@ -572,7 +572,7 @@ textarea.onkeyup = function(){ <p>Приведём пример:</p> -<pre class="brush: html notranslate"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> +<pre class="brush: html"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> <p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> <p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p></pre> @@ -622,7 +622,7 @@ para.onclick = function() { <p>HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:</p> -<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>></pre> +<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>></pre> <p>Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:</p> @@ -641,7 +641,7 @@ para.onclick = function() { <p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> -<pre class="brush: html notranslate"><!-- Стандартная дата --> +<pre class="brush: html"><!-- Стандартная дата --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>> <!-- Только год и месяц --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01<span class="pl-pds">"</span></span>>Январь 2020</<span class="pl-ent">time</span>> diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html index 40ef7f1d99..5137a61e4e 100644 --- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><span id="result_box" lang="ru"><span class="alt-edited">Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите </span></span>{{anch("Ссылки-блоки")}}<span lang="ru"><span class="alt-edited">), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как <strong>гипертекстовая ссылка,</strong> или <strong>цель</strong>), который будет содержать веб-адрес, на который вы хотите указать ссылку.</span></span></p> -<pre class="brush: html notranslate"><p>Я создал ссылку на +<pre class="brush: html"><p>Я создал ссылку на <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>. </p></pre> @@ -62,7 +62,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Другим атрибутом, который вы можете добавить к своим ссылкам, является — <code>title</code>. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:</p> -<pre class="brush: html notranslate"><p>Я создал ссылку на +<pre class="brush: html"><p>Я создал ссылку на <a href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">блочный элемент</a>. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <code><a></a>.</code></p> -<pre class="brush: html notranslate"><a href="https://www.mozilla.org/ru/"> +<pre class="brush: html"><a href="https://www.mozilla.org/ru/"> <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу"> </a></pre> @@ -117,7 +117,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li> <p><strong>Тот же каталог</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html</code>), указывающую на <code>contacts.html</code>, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — <code>contacts.html</code>:</p> - <pre class="brush: html notranslate"><p>Хотите связаться с конкретным сотрудником? + <pre class="brush: html"><p>Хотите связаться с конкретным сотрудником? Найдите подробную информацию на нашей <a href="contacts.html">странице контактов</a>. </p></pre> @@ -125,14 +125,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li> <p><strong>Перемещение вниз в подкаталоги</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">), указывающую на </span></font></code><code>projects/index.html</code>, вам нужно спуститься ниже в директории <code>projects</code> перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - <code>projects/index.html</code>:</p> - <pre class="brush: html notranslate"><p>Посетите мою + <pre class="brush: html"><p>Посетите мою <a href="projects/index.html">домашнюю страницу проекта</a>. </p></pre> </li> <li> <p><strong>Перемещение обратно в родительские каталоги</strong>: Если вы хотите подключить ссылку внутри <code>projects/index.html</code>, указывающую на <code>pdfs/project-brief.pdf</code>, вам нужно будет подняться на уровень каталога, затем спустится в каталог <code>pdf</code>. "Подняться вверх на уровень каталога" обозначается двумя точками — <code>..</code> — так, URL-адрес, который вы используете <code>../pdfs/project-brief.pdf</code>:</p> - <pre class="brush: html notranslate"><p>Ссылка на + <pre class="brush: html"><p>Ссылка на <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>. </p></pre> </li> @@ -147,17 +147,17 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Можно ссылаться на определённую часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> -<pre class="brush: html notranslate"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> +<pre class="brush: html"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> <p>Затем, чтобы связаться с этим конкретным <code>id</code>, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:</p> -<pre class="brush: html notranslate"><p>Хотите написать мне письмо? Используйте наш +<pre class="brush: html"><p>Хотите написать мне письмо? Используйте наш <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>. </p></pre> <p>Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на <em>другую часть того же документа</em>:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> <a href="#Почтовый_адрес">Почтовый адрес кампании</a> можно найти в нижней части этой страницы. </p></pre> @@ -203,13 +203,13 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><em><strong>Хороший</strong> текст ссылки:</em> <a href="https://firefox.com">Скачать Firefox</a></p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Скачать Firefox </a></p></pre> <p><em><strong>Плохой</strong> текст ссылки:</em> <a href="https://firefox.com/">Нажми сюда</a>, чтобы скачать Firefox</p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Нажми сюда </a> чтобы скачать Firefox</p> @@ -244,7 +244,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p> -<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> Скачать отчёт о продажах (PDF, 10MB) </a></p> @@ -260,7 +260,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:</p> -<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> Скачать Firefox 39 для Windows </a></pre> @@ -301,7 +301,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Самыми простыми и часто используемыми формами <code>mailto:</code> являются <em>subject</em>, <em>cc</em>,<em> bcc</em> и <em>body</em>; дальше прописываем адрес электронной почты. Например:</p> -<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a> </pre> <p>В результате получим ссылку вида: <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>.</p> @@ -314,7 +314,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):</p> -<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a></pre> diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html index 430ac96483..b4d312b67b 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -78,7 +78,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>Наш пример, представленный выше, содержит следующий код (Вы также можете <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">найти пример в нашем репозитории Github</a>). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -184,7 +184,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:</p> -<pre class="brush: html notranslate"><p>Пьяный Король возвратился в свою комнату в 01:00 +<pre class="brush: html"><p>Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент свет на сцене должен быть приглушён]</span>.</p></pre> @@ -192,7 +192,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:</p> -<pre class="brush: html notranslate"><div class="shopping-cart"> +<pre class="brush: html"><div class="shopping-cart"> <h2>Корзина</h2> <ul> <li> @@ -218,7 +218,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p><code><br></code> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> -<pre class="brush: html notranslate"><p>Жила-была девчушка Нелл,<br> +<pre class="brush: html"><p>Жила-была девчушка Нелл,<br> Любившая писать HTML:<br> Её семантика ужасна была — <br> Она и сама прочитать ничего не могла.</p></pre> @@ -232,7 +232,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p><code><hr></code> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> -<pre class="notranslate"><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> +<pre><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> <hr> <p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p></pre> diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index e186996164..2880672577 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -38,11 +38,11 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> -<pre class="notranslate">Мой кот очень сердитый</pre> +<pre>Мой кот очень сердитый</pre> <p>Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" ({{htmlelement("p")}}), например:</p> -<pre class="brush: html notranslate"><p>Мой кот очень сердитый</p></pre> +<pre class="brush: html"><p>Мой кот очень сердитый</p></pre> <div class="note"> <p><strong>Примечание</strong>: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.</p> @@ -72,7 +72,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -89,7 +89,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы </div> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -110,7 +110,7 @@ body { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -195,11 +195,11 @@ textarea.onkeyup = function(){ <p>Вы также можете вкладывать элементы внутрь других элементов — это называется <strong>вложенностью</strong>. Если мы хотим подчеркнуть, что наш кот <strong>очень</strong> сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:</p> -<pre class="brush: html notranslate"><p>Мой кот <strong>очень</strong> сердитый.</p></pre> +<pre class="brush: html"><p>Мой кот <strong>очень</strong> сердитый.</p></pre> <p>Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем <code>p</code> элемент первым, затем элемент <code>strong</code>, затем мы закрываем элемент <code>strong</code> первым, затем <code>p</code>. Следующее писать неправильно:</p> -<pre class="example-bad brush: html notranslate"><p>Мой кот <strong>очень сердитый.</p></strong></pre> +<pre class="example-bad brush: html"><p>Мой кот <strong>очень сердитый.</p></strong></pre> <p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p> @@ -214,7 +214,7 @@ textarea.onkeyup = function(){ <p>Посмотрите на следующий пример:</p> -<pre class="brush: html notranslate"><em>Первый</em><em>второй</em><em>третий</em> +<pre class="brush: html"><em>Первый</em><em>второй</em><em>третий</em> <p>четвёртый</p><p>пятый</p><p>шестой</p> </pre> @@ -239,7 +239,7 @@ textarea.onkeyup = function(){ <p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:</p> -<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> <p>Это выведет на вашу страницу следующее:</p> @@ -282,7 +282,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code2">Playable code2</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -299,7 +299,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -319,7 +319,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -404,11 +404,11 @@ textarea.onkeyup = function(){ <p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> -<pre class="notranslate"><input type="text" disabled="disabled"></pre> +<pre><input type="text" disabled="disabled"></pre> <p>Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p> -<pre class="brush: html notranslate"><input type="text" disabled> +<pre class="brush: html"><input type="text" disabled> <input type="text"> </pre> @@ -421,11 +421,11 @@ textarea.onkeyup = function(){ <p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> -<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> +<pre class="brush: html"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> <p>Однако, как только мы добавим атрибут <code>title</code> в таком же стиле, мы поступим неверно:</p> -<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> +<pre class="example-bad brush: html"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> <p>В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут <code>title</code> — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: <code>Mozilla</code> и <code>homepage</code>. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!</p> @@ -437,31 +437,31 @@ textarea.onkeyup = function(){ <p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p> -<pre class="brush: html notranslate"><a href="http://www.example.com">Ссылка к моему примеру.</a> +<pre class="brush: html"><a href="http://www.example.com">Ссылка к моему примеру.</a> <a href='http://www.example.com'>Ссылка к моему примеру.</a></pre> <p>Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!</p> -<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> +<pre class="example-bad brush: html"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> <p>Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p> -<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> <p>Если вы хотите вставить кавычки того же типа, то вы должны использовать <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html">объекты HTML</a>. Например, это работать не будет:</p> -<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> +<pre class="example-bad brush: html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> <p>Поэтому вам нужно сделать так:</p> -<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> +<pre class="brush: html"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> <h2 id="Структура_HTML_документа">Структура HTML документа</h2> <p>Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -477,7 +477,7 @@ textarea.onkeyup = function(){ <ol> <li><code><!DOCTYPE html></code>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: - <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <code><!DOCTYPE html></code> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .</li> <li><code><html></html></code>: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент". </li> @@ -520,7 +520,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code3">Playable code3</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -537,7 +537,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -561,7 +561,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -646,7 +646,7 @@ textarea.onkeyup = function(){ <p>Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:</p> -<pre class="brush: html notranslate"><p>Собаки глупы.</p> +<pre class="brush: html"><p>Собаки глупы.</p> <p>Собаки глупы.</p></pre> @@ -692,7 +692,7 @@ textarea.onkeyup = function(){ <p>В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:</p> -<pre class="brush: html notranslate"><p>В HTML вы определяете параграф элементом <p>.</p> +<pre class="brush: html"><p>В HTML вы определяете параграф элементом <p>.</p> <p>В HTML вы определяете параграф элементом &lt;p&gt;.</p></pre> @@ -710,7 +710,7 @@ textarea.onkeyup = function(){ <p>Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <code><!--</code> и <code>--></code>, например:</p> -<pre class="brush: html notranslate"><p> Меня нет в комментариях( </p> +<pre class="brush: html"><p> Меня нет в комментариях( </p> <!-- <p>А теперь есть!</p> --></pre> diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html index ba4682f821..4117972ba6 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -46,11 +46,11 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p> -<pre class="brush: html notranslate"><p>Я параграф, да, это я.</p></pre> +<pre class="brush: html"><p>Я параграф, да, это я.</p></pre> <p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p> -<pre class="brush: html notranslate"><h1>Я заголовок истории.</h1></pre> +<pre class="brush: html"><h1>Я заголовок истории.</h1></pre> <p>Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <code><h1></code> представляет главный заголовок, <code><h2></code> представляет подзаголовки, <code><h3></code> представляет под-подзаголовки и так далее.</p> @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>Например, в рассказе <code><h1></code> будет представлять заглавие рассказа, <code><h2></code> обозначит название каждой главы, <code><h3></code> будет обозначать подзаголовки в каждой главе и так далее.</p> -<pre class="brush: html notranslate"><h1> Сокрушительная скука </ h1> +<pre class="brush: html"><h1> Сокрушительная скука </ h1> <p> Крис Миллс </ p> @@ -111,7 +111,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -128,7 +128,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -162,7 +162,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -242,13 +242,13 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> -<pre class="brush: html notranslate"><h1>Это заголовок верхнего уровня</h1></pre> +<pre class="brush: html"><h1>Это заголовок верхнего уровня</h1></pre> <p><span id="result_box" lang="ru"><span>По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS).</span> <span>Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).</span></span></p> <p><span id="result_box" lang="ru"><span>С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня.</span> <span>Рассмотрим следующее:</span></span></p> -<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span></pre> +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span></pre> <p><span id="result_box" lang="ru"><span>Это элемент {{htmlelement ("span")}}.</span> <span>У него нет семантики.</span> <span>Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS,</span> <span>чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше.</span> <span>Рекомендуется использовать соответствующий элемент HTML на практике.</span></span></p> @@ -260,7 +260,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</span></span></p> -<pre class="notranslate">молоко +<pre>молоко яйца хлеб хумус</pre> @@ -269,7 +269,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):</span></span></p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>молоко</li> <li>яйца</li> <li>хлеб</li> @@ -283,7 +283,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><code><h2>Результат</h2> +<pre class="brush: html"><code><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -301,7 +301,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -335,7 +335,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -413,7 +413,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</span></span></p> -<pre class="notranslate">Двигайтесь до конца дороги +<pre>Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке @@ -421,7 +421,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:</span></span></p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Двигайтесь до конца дороги</li> <li>Поверните направо</li> <li>Езжайте прямо через первые два перекрёстка с круговым движением</li> @@ -436,7 +436,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<pre class="brush: html notranslate"><code><h2>Результат</h2> +<pre class="brush: html"><code><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> <h2>Редактируемый код</h2> @@ -453,7 +453,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -487,7 +487,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -568,7 +568,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_4">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -614,7 +614,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -647,7 +647,7 @@ h2 { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -727,7 +727,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмём второй список из нашего примера рецепта:</span></span></p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> @@ -740,7 +740,7 @@ textarea.onkeyup = function(){ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего</span><span>.</span> <span>Это будет выглядеть так:</span></span></div> </div> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> @@ -774,7 +774,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение).</span> <span>Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном.</span> <span>Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив.</span> <span>Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).</span></span></p> -<pre class="brush: html notranslate"><p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p></pre> +<pre class="brush: html"><p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p></pre> <h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3> @@ -786,13 +786,13 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение).</span> <span>Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном.</span> <span>Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить</span></span><span lang="ru"><span> жирный шрифт.</span> <span>Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (</span></span><span id="result_box" lang="ru"><span>смотрите ниже</span></span><span lang="ru"><span>).</span></span></p> -<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong>.</p> +<pre class="brush: html"><p>Эта жидкость <strong>очень токсична</strong>.</p> <p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p></pre> <p><span id="result_box" lang="ru"><span>При желании вы можете вложить важные и акцентированные слова друг в друга:</span></span></p> -<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong> — +<pre class="brush: html"><p>Эта жидкость <strong>очень токсична</strong> — если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p></pre> <h3 id="Активное_изучение_Давайте_будем_важны!">Активное изучение: <span class="short_text" id="result_box" lang="ru"><span>Давайте будем важны!</span></span></h3> @@ -802,7 +802,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_5">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -824,7 +824,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -844,7 +844,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -947,7 +947,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Предупреждение о подчёркивании:<strong> люди сильно ассоциируют подчёркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p> </div> -<pre class="brush: html notranslate"><!-- Научные наименования --> +<pre class="brush: html"><!-- Научные наименования --> <p> Колибри обыкновенный (<i>архилоус обыкновенный</i>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 81bd9f709d..2b66c1fde3 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Давайте снова посмотрим на <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B#%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0">HTML-документ из прошлой статьи</a>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -62,7 +62,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере <head> совсем небольшой:</p> -<pre class="brush: html notranslate"><head> +<pre class="brush: html"><head> <meta charset="utf-8"> <title>Моя тестовая страница</title> </head></pre> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>В заголовке примера выше есть следующая строка:</p> -<pre class="brush: html notranslate"><meta charset="utf-8"></pre> +<pre class="brush: html"><meta charset="utf-8"></pre> <p>В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . <code>utf-8</code> — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-странице, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:</p> @@ -124,7 +124,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Чтобы проверить это, вернитесь к HTML из примера <code><title></code> (странице <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), поменяйте meta charset на <code>ISO-8859-1</code> и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано <em>«рис горячий»</em>):</p> -<pre class="brush: html notranslate"><p>Пример на японском: ご飯が熱い。</p></pre> +<pre class="brush: html"><p>Пример на японском: ご飯が熱い。</p></pre> <h3 id="Указываем_автора_и_описание">Указываем автора и описание</h3> @@ -137,7 +137,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:</p> -<pre class="brush: html notranslate"><meta name="author" content="Крис Миллс"> +<pre class="brush: html"><meta name="author" content="Крис Миллс"> <meta name="description" content="Задача MDN — в том, чтобы обучить новичков всему тому, что нужно им для разработки веб-сайтов и приложений."></pre> @@ -153,7 +153,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li>Перейдите на<a href="https://developer.mozilla.org/en-US/"> главную страницу Mozilla Developer Network</a>.</li> <li>Откройте исходный код страницы (кликните правой кнопкой мыши и выберите <em>Просмотреть код</em> в контекстном меню.)</li> <li>Найдите тег meta с описанием. Он выглядит так: - <pre class="brush: html notranslate"><meta name="description" content="Веб-документация на MDN + <pre class="brush: html"><meta name="description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы @@ -178,7 +178,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:</p> -<pre class="brush: html notranslate"><meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"> +<pre class="brush: html"><meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"> <meta property="og:description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких @@ -189,7 +189,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:</p> -<pre class="brush: html notranslate"><meta name="twitter:title" content="MDN Web Docs"></pre> +<pre class="brush: html"><meta name="twitter:title" content="MDN Web Docs"></pre> <h2 id="Добавление_иконок">Добавление иконок</h2> @@ -202,13 +202,13 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <ol> <li>Сохраните изображение в формате <code>.ico</code> (многие браузеры поддерживают и в более привычных форматах, таких как <code>.gif</code> или <code>.png</code>) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат <code>.ico</code></li> <li>Добавьте ссылку на иконку в <code><head></code> документа: - <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> </li> </ol> <p>Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:</p> -<pre class="brush: html notranslate"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> +<pre class="brush: html"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> <!-- Для iPhone с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> @@ -231,12 +231,12 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li> <p>Элемент {{htmlelement("link")}} помещают в заголовок документа. У него есть два атрибута: <code>rel="stylesheet"</code> показывает, что мы указываем <em>стиль</em> документа, а в <code>href</code> указан путь к файлу:</p> - <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> </li> <li> <p>Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом <code></body></code>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.</p> - <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + <pre class="brush: html"><script src="my-js-file.js"></script></pre> <p><strong>Примечание</strong>: Элемент <code><script></code> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.</p> </li> @@ -267,16 +267,16 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив <a href="/en-US/docs/Web/HTML/Global_attributes/lang">атрибут lang</a> в открывающий HTML-тег (как в примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>: и как показано ниже):</p> -<pre class="syntaxbox notranslate"><html lang="en-US"></pre> +<pre class="syntaxbox"><html lang="en-US"></pre> -<pre class="syntaxbox notranslate"><html lang="ru"> +<pre class="syntaxbox"><html lang="ru"> </pre> <p>Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово "шесть" пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).</p> <p>Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:</p> -<pre class="brush: html notranslate"><p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p></pre> +<pre class="brush: html"><p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p></pre> <p>Коды языков определены в стандарте <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Подробнее о работе с языками можно узнать в <a href="https://www.w3.org/International/articles/language-tags/">Языковые тэги в HTML и XML</a>.</p> |