aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/html/introduction_to_html/getting_started/index.html
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-10-27 02:31:24 +0300
committerGitHub <noreply@github.com>2021-10-27 02:31:24 +0300
commit980fe00a74a9ad013b945755415ace2e5429c3c2 (patch)
treea1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/learn/html/introduction_to_html/getting_started/index.html
parent374a039b97a11ee7306539d16aaab27fed66b398 (diff)
downloadtranslated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz
translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2
translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/learn/html/introduction_to_html/getting_started/index.html')
-rw-r--r--files/ru/learn/html/introduction_to_html/getting_started/index.html58
1 files changed, 29 insertions, 29 deletions
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">&lt;p&gt;Мой кот очень сердитый&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;Мой кот очень сердитый&lt;/p&gt;</pre>
<div class="note">
<p><strong>Примечание</strong>: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</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">&lt;h2&gt;Результат&lt;/h2&gt;
+<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;
@@ -89,7 +89,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы
&lt;/div&gt;
</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">&lt;p&gt;Мой кот &lt;strong&gt;очень&lt;/strong&gt; сердитый.&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;Мой кот &lt;strong&gt;очень&lt;/strong&gt; сердитый.&lt;/p&gt;</pre>
<p>Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем <code>p</code> элемент первым, затем элемент <code>strong</code>, затем мы закрываем элемент <code>strong</code> первым, затем <code>p</code>. Следующее писать неправильно:</p>
-<pre class="example-bad brush: html notranslate">&lt;p&gt;Мой кот &lt;strong&gt;очень сердитый.&lt;/p&gt;&lt;/strong&gt;</pre>
+<pre class="example-bad brush: html">&lt;p&gt;Мой кот &lt;strong&gt;очень сердитый.&lt;/p&gt;&lt;/strong&gt;</pre>
<p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p>
@@ -214,7 +214,7 @@ textarea.onkeyup = function(){
<p>Посмотрите на следующий пример:</p>
-<pre class="brush: html notranslate">&lt;em&gt;Первый&lt;/em&gt;&lt;em&gt;второй&lt;/em&gt;&lt;em&gt;третий&lt;/em&gt;
+<pre class="brush: html">&lt;em&gt;Первый&lt;/em&gt;&lt;em&gt;второй&lt;/em&gt;&lt;em&gt;третий&lt;/em&gt;
&lt;p&gt;четвёртый&lt;/p&gt;&lt;p&gt;пятый&lt;/p&gt;&lt;p&gt;шестой&lt;/p&gt;
</pre>
@@ -239,7 +239,7 @@ textarea.onkeyup = function(){
<p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:</p>
-<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</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">&lt;h2&gt;Результат&lt;/h2&gt;
+<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;
@@ -299,7 +299,7 @@ textarea.onkeyup = function(){
&lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;</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">&lt;input type="text" disabled="disabled"&gt;</pre>
+<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
<p>Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p>
-<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;
+<pre class="brush: html">&lt;input type="text" disabled&gt;
&lt;input type="text"&gt;
</pre>
@@ -421,11 +421,11 @@ textarea.onkeyup = function(){
<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p>
-<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;любимый веб-сайт&lt;/a&gt;</pre>
+<pre class="brush: html">&lt;a href=https://www.mozilla.org/&gt;любимый веб-сайт&lt;/a&gt;</pre>
<p>Однако, как только мы добавим атрибут <code>title</code> в таком же стиле, мы поступим неверно:</p>
-<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</pre>
+<pre class="example-bad brush: html">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</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">&lt;a href="http://www.example.com"&gt;Ссылка к моему примеру.&lt;/a&gt;
+<pre class="brush: html">&lt;a href="http://www.example.com"&gt;Ссылка к моему примеру.&lt;/a&gt;
&lt;a href='http://www.example.com'&gt;Ссылка к моему примеру.&lt;/a&gt;</pre>
<p>Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!</p>
-<pre class="example-bad brush: html notranslate">&lt;a href="http://www.example.com'&gt;Ссылка к моему примеру.&lt;/a&gt;</pre>
+<pre class="example-bad brush: html">&lt;a href="http://www.example.com'&gt;Ссылка к моему примеру.&lt;/a&gt;</pre>
<p>Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p>
-<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</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">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+<pre class="example-bad brush: html">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
<p>Поэтому вам нужно сделать так:</p>
-<pre class="brush: html notranslate">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+<pre class="brush: html">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
<h2 id="Структура_HTML_документа">Структура HTML документа</h2>
<p>Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p>
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
@@ -477,7 +477,7 @@ textarea.onkeyup = function(){
<ol>
<li><code>&lt;!DOCTYPE html&gt;</code>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:
- <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <code>&lt;!DOCTYPE html&gt;</code> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .</li>
<li><code>&lt;html&gt;&lt;/html&gt;</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">&lt;h2&gt;Результат&lt;/h2&gt;
+<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;
@@ -537,7 +537,7 @@ textarea.onkeyup = function(){
&lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;</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">&lt;p&gt;Собаки глупы.&lt;/p&gt;
+<pre class="brush: html">&lt;p&gt;Собаки глупы.&lt;/p&gt;
&lt;p&gt;Собаки
глупы.&lt;/p&gt;</pre>
@@ -692,7 +692,7 @@ textarea.onkeyup = function(){
<p>В  следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:</p>
-<pre class="brush: html notranslate">&lt;p&gt;В HTML вы определяете параграф элементом &lt;p&gt;.&lt;/p&gt;
+<pre class="brush: html">&lt;p&gt;В HTML вы определяете параграф элементом &lt;p&gt;.&lt;/p&gt;
&lt;p&gt;В HTML вы определяете параграф элементом &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
@@ -710,7 +710,7 @@ textarea.onkeyup = function(){
<p>Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <code>&lt;!--</code> и <code>--&gt;</code>, например:</p>
-<pre class="brush: html notranslate">&lt;p&gt; Меня нет в комментариях( &lt;/p&gt;
+<pre class="brush: html">&lt;p&gt; Меня нет в комментариях( &lt;/p&gt;
&lt;!-- &lt;p&gt;А теперь есть!&lt;/p&gt; --&gt;</pre>