diff options
Diffstat (limited to 'files/ru/learn/html')
13 files changed, 173 insertions, 173 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> diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 985542c426..e21fcef89d 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p> -<pre class="brush: html notranslate"><svg version="1.1" +<pre class="brush: html"><svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> -<pre class="brush: html notranslate"><img +<pre class="brush: html"><img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" @@ -126,11 +126,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в <code>src</code> атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае <span class="tlid-translation translation" lang="ru"><span title="">SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:</span></span></p> -<pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> +<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> <p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> -<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); background-size: contain;</code></pre> @@ -142,7 +142,7 @@ background-size: contain;</code></pre> <p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> -<pre class="brush: html notranslate"><svg width="300" height="200"> +<pre class="brush: html"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> </pre> @@ -174,7 +174,7 @@ background-size: contain;</code></pre> <p>Вот краткий обзор:</p> -<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> +<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> @@ -196,7 +196,7 @@ background-size: contain;</code></pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -221,7 +221,7 @@ background-size: contain;</code></pre> <input id="solution" type="button" value="Show solution" disabled> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -241,7 +241,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'); diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index 8621a782a0..3523163ad5 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -33,11 +33,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> -<pre class="brush: html notranslate"><img src="dinosaur.jpg"></pre> +<pre class="brush: html"><img src="dinosaur.jpg"></pre> <p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> +<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> <p>И так далее.</p> @@ -47,7 +47,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Вы можете встроить изображение используя абсолютный URL, например:</p> -<pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> <p>Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> @@ -79,7 +79,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p> -<pre class="notranslate"><img src="images/dinosaur.jpg" +<pre><img src="images/dinosaur.jpg" alt="Голова и туловище скелета динозавра; у него большая голова с длинными острыми зубами"></pre> @@ -114,7 +114,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" +<pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" @@ -136,7 +136,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Как и для <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" +<pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" @@ -170,7 +170,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Input</h2> +<pre class="brush: html"><h2>Input</h2> <textarea id="code" class="input"> <img></textarea> <h2>Output</h2> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM </div> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -198,7 +198,7 @@ button { } </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 code = textarea.value; var output = document.querySelector(".output"); @@ -229,7 +229,7 @@ window.addEventListener("load", drawOutput); <p>Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:</p> -<pre class="brush: html notranslate"><div class="figure"> +<pre class="brush: html"><div class="figure"> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" @@ -243,7 +243,7 @@ window.addEventListener("load", drawOutput); <p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> -<pre class="notranslate"><figure> +<pre><figure> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" @@ -283,7 +283,7 @@ window.addEventListener("load", drawOutput); <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html notranslate"><h2>Input</h2> +<pre class="brush: html"><h2>Input</h2> <textarea id="code" class="input"> </textarea> <h2>Output</h2> @@ -294,7 +294,7 @@ window.addEventListener("load", drawOutput); </div> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -311,7 +311,7 @@ button { } </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 code = textarea.value; var output = document.querySelector(".output"); @@ -342,7 +342,7 @@ window.addEventListener("load", drawOutput); <p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие <code>background-*</code> применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { background-image: url("images/dinosaur.jpg"); }</pre> diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index 60f7bb93db..1402482a88 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -58,7 +58,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="min-height: 250px;"> </div> @@ -74,7 +74,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <input id="solution" type="button" value="Show solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -94,7 +94,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'); @@ -181,7 +181,7 @@ textarea.onkeyup = function(){ <p>Есть несколько серьёзных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> -<pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" +<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> @@ -324,7 +324,7 @@ textarea.onkeyup = function(){ <p>Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, а также на <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a>):</p> -<pre class="brush: html notranslate"><embed src="whoosh.swf" quality="medium" +<pre class="brush: html"><embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" @@ -334,7 +334,7 @@ textarea.onkeyup = function(){ <p>Давайте взглянем на пример <code><object></code> , встраивающего PDF в страницу (взгляните <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> и <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p> -<pre class="brush: html notranslate"><object data="mypdf.pdf" type="application/pdf" +<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" width="800" height="1200" typemustmatch> <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p> </object></pre> diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index 7dfa8a7070..474f317658 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -64,11 +64,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один путь к файлу:</p> -<pre class="brush: html notranslate"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> <p>Однако есть два новых атрибута — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> (также смотри <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">источник кода</a>).</p> -<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg 320w, +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, @@ -131,7 +131,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дескриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> -<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg, +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> @@ -139,7 +139,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):</p> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { width: 320px; }</pre> @@ -151,11 +151,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Возвращаясь к нашему оригинальному примеру <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>, мы имеем изображение которое очень нуждается в художественном оформлении:</p> -<pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> +<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> <p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> -<pre class="brush: html notranslate"><picture> +<pre class="brush: html"><picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> @@ -189,7 +189,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><code><picture></code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p> -<pre class="brush: html notranslate"><picture> +<pre class="brush: html"><picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 4176f00fcc..971324fad9 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Элемент {{htmlelement("video")}} позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:</p> -<pre class="brush: html notranslate"><video src="rabbit320.webm" controls> +<pre class="brush: html"><video src="rabbit320.webm" controls> <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p> </video></pre> @@ -97,7 +97,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновлённый пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> -<pre class="brush: html notranslate"><video controls> +<pre class="brush: html"><video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> @@ -115,7 +115,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Есть ряд других параметры, которые вы можете включить в HTML5 элемент <code>video</code>. Взгляните на наш третий пример:</p> -<pre class="brush: html notranslate"><video controls width="400" height="400" +<pre class="brush: html"><video controls width="400" height="400" autoplay loop muted poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> @@ -157,7 +157,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Элемент {{htmlelement ("audio")}} работает точно так же, как элемент {{htmlelement ("video")}}, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:</p> -<pre class="brush: html notranslate"><audio controls> +<pre class="brush: html"><audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> @@ -209,7 +209,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Типичный файл WebVTT будет выглядеть примерно так:</p> -<pre class="eval line-numbers language-html notranslate"><code class="language-html">WEBVTT +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -231,7 +231,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Вот пример:</p> -<pre class="brush: html notranslate"><video controls> +<pre class="brush: html"><video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index fbfdfa13d9..388c093001 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -26,7 +26,7 @@ translation_of: Learn/HTML/Tables/Advanced <p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <caption>Dinosaurs in the Jurassic period</caption> ... @@ -83,7 +83,7 @@ translation_of: Learn/HTML/Tables/Advanced <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li> <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code><head></code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: - <pre class="brush: css notranslate">tbody { + <pre class="brush: css">tbody { font-size: 90%; font-style: italic; } @@ -105,7 +105,7 @@ tfoot { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -224,7 +224,7 @@ tfoot { <p>Разметка простой вложенной таблицы:</p> -<pre class="brush: html notranslate"><table id="table1"> +<pre class="brush: html"><table id="table1"> <tr> <th>title1</th> <th>title2</th> @@ -363,7 +363,7 @@ tfoot { <p>Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу <code><th></code> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th scope="col">Purchase</th> <th scope="col">Location</th> @@ -375,7 +375,7 @@ tfoot { <p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th scope="row">Haircut</th> <td>Hairdresser</td> <td>12/09</td> @@ -400,7 +400,7 @@ tfoot { <p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th id="purchase">Purchase</th> <th id="location">Location</th> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index bd9b5f4fb4..282ccd6039 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -128,10 +128,10 @@ translation_of: Learn/HTML/Tables/Basics <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li> <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Добавьте их в тело HTML.</li> <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + <pre class="brush: html"><td>Hi, I'm your first cell.</td></pre> </li> <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> + <pre class="brush: html"><td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td></pre> @@ -145,7 +145,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Поместите четыре уже созданных ячейки между тегами <code><tr></code> как здесь показано: - <pre class="brush: html notranslate"><tr> + <pre class="brush: html"><tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> @@ -182,7 +182,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -294,7 +294,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Исходная разметка выглядит так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Animals</th> </tr> @@ -374,7 +374,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Возьмём простой пример:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -410,7 +410,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <colgroup> <col> <col style="background-color: yellow"> @@ -433,7 +433,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> -<pre class="brush: html notranslate"><colgroup> +<pre class="brush: html"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> |