diff options
Diffstat (limited to 'files/ru/learn/html/introduction_to_html')
10 files changed, 3931 insertions, 0 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 new file mode 100644 index 0000000000..2e34f4a80b --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,680 @@ +--- +title: Углубленное форматирование текста +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - Beginner + - Guide + - HTML + - Начинающий + - Руководство +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">В HTML для форматирования текста есть много других элементов, не рассмотренных в статье <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/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Элементы, описанные в этой статье, не так часто используются, но все же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Предварительные требования:</th> + <td> + <p>Базовое знакомство с HTML, раскрытое в <br> + <a href="/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">Начало работы с HTML</a>. Форматирование текста с помощью HTML, описанное в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Задача:</th> + <td>Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.</td> + </tr> + </tbody> +</table> + +<h2 id="Списки_описания">Списки описания</h2> + +<p>В основах HTML-текста мы рассмотрели, как <a href="HTML_text_fundamentals#Lists">пометить привычные типы списков</a> в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.</p> + +<p>Давайте рассмотрим пример набора терминов и определений:</p> + +<pre class="notranslate">Солилоквий +Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам). +Монолог +Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам. +Ремарка +В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</pre> + +<p>В списках описания используется иная оболочка, чем в других типах списков — {{htmlelement ("dl")}} (от <em>description list</em>); кроме того, каждый термин завёрнут в элемент {{htmlelement ("dt")}} (<em>description term</em> — термин для описания) и каждое определение завёрнуто в элемент {{htmlelement ("dd")}} (<em>description definition</em> — описание определения).</p> + +<p>Закончим разметку нашего примера:</p> + +<pre class="brush: html notranslate"><dl> + <dt>Солилоквий</dt> + <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd> + <dt>Монолог</dt> + <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd> + <dt>Ремарка</dt> + <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd> +</dl></pre> + +<p>В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:</p> + +<dl> + <dt>Солилоквий</dt> + <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd> + <dt>Монолог</dt> + <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd> + <dt>Ремарка</dt> + <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd> +</dl> + +<p>Заметьте, что разрешено давать одному элементу несколько описаний:</p> + +<dl> + <dt>Ремарка</dt> + <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd> + <dd>В письменности: отметка, примечание (<em>устар.</em>).</dd> +</dl> + +<h3 id="Активное_обучение_разметка_набора_определений">Активное обучение: разметка набора определений</h3> + +<p>Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле <em>Вывод</em>. Вы можете попробовать использовать свои собственные термины и описания, если хотите.</p> + +<p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +Бекон +Скрепляет мир вокруг. +Яйца +Скрепляют пироги вокруг. +Кофе +Рычаг, движущий планетами. +Светло-коричневого цвета.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<dl>\n <dt>Бекон</dt>\n <dd>Скрепляет мир вокруг.</dd>\n <dt>Яйца</dt>\n <dd>Скрепляют пироги вокруг.</dd>\n <dt>Кофе</dt>\n <dd>Рычаг, движущий планетами.</dd>\n <dd>Светло-коричневого цвета.</dd>\n</dl>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Цитаты">Цитаты</h2> + +<p>HTML также имеет функции, доступные для маркировки цитат; какой элемент вы используете, зависит от того, маркируете ли вы блочную или строчную цитату.</p> + +<h3 id="Блочные_цитаты">Блочные цитаты</h3> + +<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть ее внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p> + +<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 +Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p></pre> + +<p>Чтобы превратить её в блочную цитату, мы просто делаем следующее:</p> + +<pre class="brush: html notranslate"><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> + +<p>Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<p><strong>HTML-элемент <blockquote> </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p> +</blockquote> + +<h3 id="Строчные_цитаты">Строчные цитаты</h3> + +<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">предназначен +для коротких цитат, не требующих прерывания абзаца</q>.</p></pre> + +<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключенный в кавычки для обозначения цитаты, например:</p> + +<p>Элемент цитирования — <code><q></code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p> + +<h3 id="Цитирование">Цитирование</h3> + +<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"> +<cite>блочных цитатах</cite></a>: +</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> + <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block + Quotation Element</em>) указывает на то, что заключённый в нем текст является развёрнутой цитатой.</p> +</blockquote> + +<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен +для коротких цитат, не требующих прерывания абзаца</q>. -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> +<cite>Строчные цитаты</cite></a>.</p></pre> + +<p>По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a></p> + +<h3 id="Активное_обучение_кто_это_сказал">Активное обучение: кто это сказал?</h3> + +<p>Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:</p> + +<ol> + <li>Преобразуйте средний абзац в блочную цитату (<code><blockquote></code>), который включает атрибут <code>cite</code>.</li> + <li>Заверните часть третьего абзаца в строчную цитату, которая включает атрибут <code>cite</code>.</li> + <li>Включите элемент <code><cite></code> для каждой ссылки.</li> +</ol> + +<p>Источники цитирования, которые вам потребуются:</p> + +<ul> + <li><a href="http://www.brainyquote.com/quotes/authors/c/confucius">http://www.brainyquote.com/quotes/authors/c/confucius</a> — HTML-страница с цитатами Конфуция</li> + <li><a href="https://www.affirmationsforpositivethinking">https://www.affirmationsforpositivethinking</a> — HTML-страница <em>The Need To Eliminate Negative Self Talk</em>.</li> +</ul> + +<p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:</p> +<p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.</p> +<p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<p>Здравствуйте и добро пожаловать на мою страницу мотивации! <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Конфуций</cite></a> как-то сказал:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.</p>\n</blockquote>\n\n<p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает <q cite="http://www.affirmationsforpositivethinking.com/index.htm">Необходимость избавления от негативного внутреннего разговора</q> (как сказано в зарубежной статье <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Аббревиатуры">Аббревиатуры</h2> + +<p>Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это {{htmlelement ("abbr")}}, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута {{htmlattrxref("title")}}.)</p> + +<p>Давайте рассмотрим несколько примеров:</p> + +<pre class="notranslate"><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> + +<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> +</pre> + +<p>Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):</p> + +<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> + +<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code><abbr></code>, но предназначен специально для акронимов (тип аббревитатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code><abbr></code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code><abbr></code>.</p> +</div> + +<h3 id="Активное_обучение_выделение_аббревиатуры">Активное обучение: выделение аббревиатуры</h3> + +<p>В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>Безусловно, NASA занимается классными вещами.</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<p>Безусловно, <abbr title="National Aeronautics and Space Administration">NASA</abbr> занимается классными вещами.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Разметка_контактных_данных">Разметка контактных данных</h2> + +<p>HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:</p> + +<pre class="brush: html notranslate"><address> + <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> +</address></pre> + +<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдет:</p> + +<pre class="brush: html notranslate"><address> + <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p> +</address></pre> + +<h2 id="Верхний_и_нижний_индекс">Верхний и нижний индекс</h2> + +<p>Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.</p> + +<p>Приведем пример:</p> + +<pre class="brush: html notranslate"><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> + +<p>Результат этого кода выглядит следующим образом:</p> + +<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> + +<h2 id="Представление_компьютерного_кода">Представление компьютерного кода</h2> + +<p>Существует несколько элементов для маркировки компьютерного кода с использованием HTML:</p> + +<ul> + <li>{{htmlelement("code")}}: Для разметки общих частей компьютерного кода.</li> + <li>{{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <code><pre></pre></code>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.</li> + <li>{{htmlelement("var")}}: Для конкретной маркировки имен переменных.</li> + <li>{{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введенного в компьютер.</li> + <li>{{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.</li> +</ul> + +<p>Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="notranslate"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('Owww, stop poking me!'); +}</code></pre> + +<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p> + +<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p> + + +<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>Вышеприведенный код будет выглядеть так:</p> + +<p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Разметка_времени_и_даты">Разметка времени и даты</h2> + +<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> + +<p>Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:</p> + +<ul> + <li>20 Января 2020</li> + <li>20-ое Января 2020</li> + <li>Янв 20 2020</li> + <li>20/01/20</li> + <li>01/20/20</li> + <li><span lang="fr">20e Janvier 2020</span></li> + <li><span lang="ja">2020年1月20日</span></li> + <li>и другое...</li> +</ul> + +<p>Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.</p> + +<p>В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</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>> +<!-- Только год и месяц --> +<<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>> +<!-- Только месяц и день --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 Января</<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>19:30<span class="pl-pds">"</span></span>>19:30</<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></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<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-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 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-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 Января 2020, — это 8.30pm во Франции.</<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-W04<span class="pl-pds">"</span></span>>Четвертая неделя 2020</<span class="pl-ent">time</span>></pre> + +<h2 id="Заключение">Заключение</h2> + +<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнетесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p> + +<p>{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> 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 new file mode 100644 index 0000000000..a6cd7e7730 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,436 @@ +--- +title: Создание гиперссылок +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Абсолютные + - Гиперссылки + - Единый указатель ресурса + - Заголовок + - Начинающий + - Обучение + - Относительные + - Руководство + - Ссылки + - Язык гипертекстовой разметки +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперссылок +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary"><span id="result_box" lang="ru"><span>Гиперссылки действительно важны — </span></span><span lang="ru"><span>они делают Интернет Интернетом.</span> <span>В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.</span></span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Предварительные требования:</th> + <td>Базовое <span class="short_text" id="result_box" lang="ru"><span>знакомство с HTML, описаное в статье</span></span> <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">Начало работы c HTML</a>. Форматирование текста в HTML, описанное в статье <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/HTML_text_fundamentals">Основы редактирования текста в HTML</a>.</td> + </tr> + <tr> + <th scope="row">Задача:</th> + <td>Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.</td> + </tr> + </tbody> +</table> + +<h2 id="Что_такое_гиперссылка">Что такое гиперссылка?</h2> + +<p><span id="result_box" lang="ru"><span class="alt-edited">Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес</span></span> ({{glossary("URL")}}.)</p> + +<div class="note"> +<p><span id="result_box" lang="ru"><span class="alt-edited"><strong>Примечание:</strong> URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).</span></span></p> +</div> + +<p><span id="result_box" lang="ru"><span>Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.</span></span></p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Анатомия_ссылки">Анатомия ссылки</h2> + +<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>Я создал ссылку на + <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>. +</p></pre> + +<p>Это дало нам следующий результат:</p> + +<p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.</p> + +<h3 id="Добавляем_инфомацию_через_атрибут_title">Добавляем инфомацию через атрибут title</h3> + +<p>Другим атрибутом, который вы можете добавить к своим ссылкам, является — <code>title</code>. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:</p> + +<pre class="brush: html notranslate"><p>Я создал ссылку на + <a href="https://www.mozilla.org/ru/" + title="Лучшее место для поиска дополнительной информации + о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla + </a>. +</p></pre> + +<p>Вот что получилось (описание появится, если навести курсор на ссылку):</p> + +<p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla</a>.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить ее таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.</p> +</div> + +<h3 id="Активное_изучение_создаём_собственную_ссылку">Активное изучение: создаём собственную ссылку</h3> + +<p>Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">базовый пример</a> подойдёт.)</p> + +<ul> + <li>Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.</li> + <li>Теперь превратите некоторые фрагменты документа в ссылки.</li> + <li>Добавьте ссылкам атрибут <code>title</code>.</li> +</ul> + +<h3 id="Ссылки-блоки">Ссылки-блоки</h3> + +<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/"> + <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу"> +</a></pre> + +<div class="note"> +<p><strong>Примечание</strong>: Вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.</p> +</div> + +<h2 id="Краткое_руководство_по_URL-адресам_и_путям">Краткое руководство по URL-адресам и путям</h2> + +<p>Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.</p> + +<p>URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу <code>https://www.mozilla.org/ru/</code>.</p> + +<p>URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>.)</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p><strong>Корень</strong> структуры — каталог <code>creating-hyperlinks</code>. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — <code>index.html</code> и <code>contacts.html</code>. На настоящем веб-сайте <code>index.html</code> был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).</p> + +<p>В корне есть ещё два каталога — <code>pdfs</code> и <code>projects</code>. У каждого из них есть один файл внутри — <code>project-brief.pdf</code> и <code>index.html</code>, соответсвенно. Обратите внимание на то, что вы можете довольно успешно иметь два <code>index.html</code> файла в одном проекте, <span id="result_box" lang="ru"><span>пока они находятся в разных местах файловой системы.</span></span> Многие веб-сайты так делают. Второй <code>index.html</code><span id="result_box" lang="ru"><span>, возможно, будет главной лендинг-страницей для связанной с проектом информации.</span></span></p> + +<ul> + <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>Хотите связаться с конкретным сотрудником? + Найдите подробную информацию на нашей + <a href="contacts.html">странице контактов</a>. +</p></pre> + </li> + <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>Посетите мою + <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>Ссылка на + <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>. +</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Примечание</strong>: Вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: <br> + <code>../../../сложный/путь/к/моему/файлу.html</code>.</p> +</div> + +<h3 id="Фрагменты_документа">Фрагменты документа</h3> + +<p>Можно ссылаться на определенную часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> + +<pre class="brush: html notranslate"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> + +<p>Затем, чтобы связаться с этим конкретным <code>id</code>, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:</p> + +<pre class="brush: html notranslate"><p>Хотите написать мне письмо? Используйте наш + <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>. +</p></pre> + +<p>Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на <em>другую часть того же документа</em>:</p> + +<pre class="brush: html notranslate"><p> + <a href="#Почтовый_адрес">Почтовый адрес кампании</a> + можно найти в нижней части этой страницы. +</p></pre> + +<h3 id="Абсолютные_и_относительные_URL-адреса">Абсолютные и относительные URL-адреса</h3> + +<p>Два понятия, с которыми вы столкнетесь в Интернете, — это <strong>абсолютный URL</strong> и <strong>относительный URL</strong><strong>:</strong></p> + +<dl> + <dt><strong>Абсолютный URL</strong></dt> + <dd>Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая {{glossary("protocol","протокол")}} и {{glossary("domain name","доменное имя")}}. Например, если страница <code>index.html</code> загружается в каталог, называемый <code>projects</code>, который находится внутри корня веб-сервера, а домен веб-сайта — <code>http://www.example.com</code>, страница будет доступна по адресу <code>http://www.example.com/projects/index.html</code> (или даже просто <code>http://www.example.com/projects/</code>), так как большинство веб-серверов просто ищет целевую страницу, такую как <code>index.html</code>, для загрузки, если он не указан в URL-адресе.).</dd> +</dl> + +<p><em>Абсолютный URL</em> всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.</p> + +<dl> + <dt><strong>Относительный URL</strong></dt> + <dd>Указывает расположение <em>относительно </em>файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы <code>http://www.example.com/projects/index.html</code> на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла — <code>project-brief.pdf</code> — никакой дополнительной информации не требуется. Если PDF расположен в поддериктории <code>pdfs</code> внутри каталога <code>projects</code>, относительная ссылка будет <code>pdfs/project-brief.pdf</code> (аналогичный абсолютный URL был бы <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.).</dd> +</dl> + +<p><em>Относительный URL</em> будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл <code>index.html</code> из каталога <code>projects</code> в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL <code>pdfs/project-brief.pdf</code> будет вести на <code>http://www.example.com/pdfs/project-brief.pdf</code>, а не на <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Советуем вам основательно разобраться в этой теме!</p> + +<h2 id="Практика_написания_хороших_ссылок">Практика написания хороших ссылок</h2> + +<p>При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.</p> + +<ul> +</ul> + +<h3 id="Используйте_четкие_формулировки_описания_ссылок">Используйте четкие формулировки описания ссылок</h3> + +<p>На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки <em>доступными </em>для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:</p> + +<ul> + <li>Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.</li> + <li>Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведет ссылка.</li> + <li>Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведет ссылка.</li> +</ul> + +<p>Взгляните на этот пример:</p> + +<p><em><strong>Хороший</strong> текст ссылки:</em> <a href="https://firefox.com">Скачать Firefox</a></p> + +<pre class="brush: html notranslate"><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/"> + Нажми сюда +</a> +чтобы скачать Firefox</p> +</pre> + +<p>Советы:</p> + +<ul> + <li>Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.</li> + <li>Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговоаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).</li> + <li>Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.</li> + <li>Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.</li> +</ul> + +<h3 id="Используйте_относительные_ссылки_где_это_возможно">Используйте относительные ссылки, где это возможно</h3> + +<p>Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах <em>одного сайта</em> (при ссылке на <em>другие сайты</em> необходимо использовать абсолютную ссылку):</p> + +<ul> + <li>Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода</li> + <li>Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System ({{glossary("DNS")}}; также прочтите <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает web</a>), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.</li> +</ul> + +<h3 id="Создавая_ссылки_на_не_HTML_ресурсы_—_добавляйте_описание">Создавая ссылки на не HTML ресурсы — добавляйте описание</h3> + +<p>Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсуствие описания может раздражать пользователя. Приведем пример:</p> + +<ul> + <li>Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.</li> + <li>Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.</li> +</ul> + +<p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p> + +<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> + Скачать отчет о продажах (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Посмотреть видео (видео откроется в отдельном окне, HD качество) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Играть в гонки (необходим Flash) +</a></p></pre> + +<h3 id="Используйте_атрибут_download_когда_создаете_ссылку">Используйте атрибут download, когда создаете ссылку</h3> + +<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" + download="firefox-39-installer.exe"> + Скачать Firefox 39 для Windows +</a></pre> + +<h2 id="Активное_изучение_создание_меню_навигации">Активное изучение: создание меню навигации</h2> + +<p>Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространенных способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создается впечатление, что вы остаетесь в одном месте: меню остается на месте, а контент меняется.</p> + +<p>Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a>):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Что делать:</p> + +<ol> + <li>Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.</li> + <li>Создайте ссылки каждому элементу списка, ведущие на эти страницы.</li> + <li>Скопируйте созданное меню в каждую страницу.</li> + <li>На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.</li> +</ol> + +<p>Когда закончите задание, посмотрите, как это должно выглядеть:</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p>Если не удается сделать, или вы неуверены, что сделали верно, посмотрите наш вариант <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a>.</p> +</div> + +<h2 id="Ссылки_электронной_почты">Ссылки электронной почты</h2> + +<p>Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент {{HTMLElement("a")}} и <code>mailto:</code> — <em>адрес почты</em>.</p> + +<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> + +<p>В результате полчим ссылку вида: <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>.</p> + +<p>Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".</p> + +<h3 id="Особенности_и_детали">Особенности и детали</h3> + +<p>Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу <code>mailto</code>. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.</p> + +<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"> + Send mail with cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>Примечание:</strong> Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля <code>mailto:</code> URL. Для этого используется стандартное описание URL запроса. Прочтите <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">о методе GET</a>, чтобы лучше понимать описание URL запроса.</p> +</div> + +<p>Вот несколько примеров использования <code>mailto</code> URLs:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Заключение">Заключение</h2> + +<p>Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button"></div> + +<div id="SL_shadow_translation_result2" style="display: none;"></div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<div id="SL_alert_cont"></div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Switch languages"></div> + </td> + <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option selected value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Listen to the translation"></div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copy translation"></div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"></div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Font size"></div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Help"></div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Pin pop-up bubble"></div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result"></div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<div id="SL_player2"></div> + +<div id="SL_alert100">Text-to-speech function is limited to 200 characters</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody> + <tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Show Translator's button 3 second(s)"></div> + </td> + <td><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation History">History</a> : <a class="SL_options" title="ImTranslator Feedback">Feedback</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Make a small contribution">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Close">Close</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..a48d53d1c2 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,182 @@ +--- +title: Отладка HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - Debugging + - Guide + - HTML + - Валидация + - Отладка +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Написать HTML — здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Что нужно знать:</th> + <td>Базовые знания HTML на уровне <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">Начало работы с HTML</a>, <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/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, и <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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>.</td> + </tr> + <tr> + <th scope="row">Чему вы научитесь:</th> + <td>Искать проблемы в HTML с помощю инструментов отладки.</td> + </tr> + </tbody> +</table> + +<h2 id="Отладка_—_это_не_страшно">Отладка — это не страшно</h2> + +<p>Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке <a href="https://www.rust-lang.org/">Rust</a>, компилятор укажет на ошибку:</p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на <code>println!(Hello, world!");</code> , то заметите, что здесь отсутсвует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.</p> + +<p>Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.</p> + +<h2 id="HTML_и_отладка">HTML и отладка</h2> + +<p>HTML не так сложен к пониманию, как Rust. HTML не компилируется в какую-либо другую форму перед тем, как браузер проанализирует это и покажет результат (он является <em>интерпретируемым</em>, а не <em>компилируемым</em>). Синтаксис HTML элементов намного понятнее, чем у "настоящих языков программирования", таких как Rust, {{glossary("JavaScript")}}, или {{glossary("Python")}}. Способ, которым браузеры читают HTML более <strong>толерантен</strong>, чем у языков программирования, интерпретирующих свой код строже. Это одновременно и плохо, и хорошо.</p> + +<h3 id="Толерантный_код">Толерантный код</h3> + +<p>Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:</p> + +<ul> + <li><strong>Синтаксические ошибки (Syntax errors)</strong>: Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.</li> + <li><strong>Логические ошибки (Logic errors)</strong>: Это ошибки, появляющиеся в том случае, если синтаксис корректен, но код не выполняет своего предназначения, то есть программа выполняется неверно. Такие исправлять сложнее, чем синтаксические, поскольку не выводится сообщений, указывающих место, где вы ошиблись.</li> +</ul> + +<p>HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутсвуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!</p> + +<div class="note"> +<p><strong>На заметку</strong>: HTML читается толерантно, потому что когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.</p> +</div> + +<h3 id="Активное_обучение_Знакомство_с_толерантным_кодом">Активное обучение: Знакомство с толерантным кодом</h3> + +<p>Время изучить природу толерантного кода в HTML.</p> + +<ol> + <li>Для начала, скачайте наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">пример отладки</a> и сохраните локально. Эта демонстрация намеренно написана с ошибками, которые нам предстоит обнаружить.</li> + <li>Далее, откройте её в браузере. Вы увидите нечто вроде этого :<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа): + <pre class="brush: html"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>Рассмотрим проблемы: + <ul> + <li>У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.</li> + <li>Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.</li> + <li>Следующая часть нарушает правила вложенности: <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.</li> + <li>В атрибуте {{htmlattrxref("href","a")}} отсутсвует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.</li> + </ul> + </li> + <li>Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Обзор инструментов разработки в браузерах</a>.</li> + <li>В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): + <ul> + <li>Параграфы и элементы списка получены с закрывающими тегами.</li> + <li>Было неочевидно, где элемент <code><strong></code> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причем до самого низа документа!</li> + <li>Некорректная вложенность была исправлена браузером следующим образом: + <pre class="brush: html"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>Ссылка с отсутсвующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: + <pre class="brush: html"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Валидация_HTML">Валидация HTML</h3> + +<p>Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?</p> + +<p>Лучше всего проверить страницу в <a href="https://validator.w3.org/">сервисе валидации разметки</a>. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчет по ошибкам в нем.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>HTML можно проверить по адресу, загрузив файл или напрямую ввести код HTML.</p> + +<h3 id="Активное_обучение_Валидируем_HTML-документ">Активное обучение: Валидируем HTML-документ</h3> + +<p>Попробуем проверить <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">документ-пример</a>.</p> + +<ol> + <li>Откройте <a href="https://validator.w3.org/">сервис валидации разметки</a> в браузере.</li> + <li>Перейдите в режим <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>Скопируйте весь код документа (не только body) и вставьте в место для ввода.</li> + <li>Нажмите на <em>Check (проверить)</em>.</li> +</ol> + +<p>Вы увидите список ошибок и другую информацию.</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Работа_с_сообщениями_об_ошибках">Работа с сообщениями об ошибках</h4> + +<p>Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдемся по всем ошибкам и разберем, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдете нужное место.</li> + <li>"Unclosed element <code>strong</code>": Это очень простая ошибка — элемент {{htmlelement("strong")}} не закрыт, и сообщение указывает прямо на открывающий тег.</li> + <li>"End tag <code>strong</code> violates nesting rules": Элемент неправильно вложен — на этом уровне нет парного открывающего тега.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки — скорее всего, проблема рядом с ней.</li> + <li>"End of file seen and there were open elements": Файл закончился, но некоторые элементы не закрыты. Сообщение указывает на конец файла, в данном случае не закрыт элемент + <pre>example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Примечание</strong>: Свойство без закрывающей кавычки может проглотить закрывающий тег — браузер считает его частью значения этого свойства.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.</li> +</ul> + +<p>Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ еще раз. Иногда одна ошибка ломает большую часть документа.</p> + +<p><span>Когда вы увидите эту надпись, в вашем документе больше нет ошибок:</span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Заключение">Заключение</h2> + +<p>Теперь вы умеете отлаживать HTML. С новыми знаниями вам будет проще разобраться и в отладке более сложных языков — например, CSS и JavaScript. На этом мы заканчиваем вводный модуль курса HTML — время попробовать свои силы в упражнениях.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> 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 new file mode 100644 index 0000000000..081d12edf3 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,292 @@ +--- +title: Структура документа и веб-сайта +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +tags: + - Guide + - HTML + - Базовая разметка + - Гайд + - Для новичков + - С чего начать + - Структура сайта +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Learn/HTML/Введение_в_HTML/Структура_документа_и_веб-сайта +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), {{glossary("HTML")}} также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые знания:</th> + <td>Базовое знакомство с HTML, описано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>. Форматирование текста в HTML, описано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основы текста в HTML</a>. Как работают гиперссылки, описано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Создание гиперссылок</a>.</td> + </tr> + <tr> + <th scope="row">Задача:</th> + <td>Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.</td> + </tr> + </tbody> +</table> + +<h2 id="Основные_составляющие_документа">Основные составляющие документа</h2> + +<p>Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:</p> + +<dl> + <dt>Заголовок (колонтитул)</dt> + <dd>Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.</dd> + <dt>Навигационное меню</dt> + <dd>Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает <a href="/en-US/docs/Learn/Accessibility">доступность</a>, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.</dd> + <dt>Основное содержимое</dt> + <dd>Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!</dd> + <dt>Боковая панель</dt> + <dd>Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.</dd> + <dt>Нижний колонтитул (футер)</dt> + <dd>Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.</dd> +</dl> + +<p>"Типичный веб-сайт" может быть структурирован примерно так:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17069/Sample_website__ru.png" style="border-style: solid; border-width: 1px; height: 291px; width: 600px;"></p> + +<h2 id="HTML_для_структурирования_содержимого">HTML для структурирования содержимого</h2> + +<p>Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и <strong>использовать правильный элемент для правильной работы</strong>. </p> + +<p>Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?</p> + +<div class="note"> +<p><strong>Заметка</strong>: Люди с дальтонизмом составляют около <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% мирового населения</a>. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 миллионов таких людей</a>, а общая численность населения составляла <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">около 7 миллиардов</a>).</p> +</div> + +<p>В своём HTML-коде Вы можете размечать разделы содержимого сайта на основе их <em>функциональности</em> — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">последствий неиспользования правильной структуры элементов и семантики для правильной работы.</a></p> + +<p>Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:</p> + +<ul> + <li><strong>Заголовок: </strong>{{htmlelement("header")}}.</li> + <li><strong>Навигационное меню: </strong>{{htmlelement("nav")}}.</li> + <li><strong>Основное содержимое: </strong>{{htmlelement("main")}}, с различными подразделами содержимого, представленными элементами {{HTMLElement("article")}}, {{htmlelement("section")}} и {{htmlelement("div")}}.</li> + <li><strong>Боковая панель: </strong>{{htmlelement("aside")}}, обычно располагается внутри {{htmlelement("main")}}.</li> + <li><strong>Нижний колонтитул: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Активное_обучение_исследование_кода_для_нашего_примера">Активное обучение: исследование кода для нашего примера</h3> + +<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> +<html> + <head> + <meta charset="utf-8"> + + <title>Заголовок моей страницы</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --> + + <header> + <h1>Заголовок</h1> + </header> + + <nav> + <ul> + <li><a href="#">Домашняя страница</a></li> + <li><a href="#">Наша команда</a></li> + <li><a href="#">Проекты</a></li> + <li><a href="#">Контакты</a></li> + </ul> + + <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. --> + + <form> + <input type="search" name="q" placeholder="Search query"> + <input type="submit" value="Go!"> + </form> + </nav> + + <!-- Здесь основное содержимое нашей страницы --> + <main> + + <!-- Она содержит статью --> + <article> + <h2>Заголовок статьи</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Подраздел</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Ещё один подраздел</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- Дополнительный контент также может быть вложен в основной контент --> + <aside> + <h2>Связанные темы</h2> + + <ul> + <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li> + <li><a href="#">>Мне нравится стоять рядом с морем</a></li> + <li><a href="#">Даже на севере Англии</a></li> + <li><a href="#">Здесь не перестаёт дождь</a></li> + <li><a href="#">Лаааадно...</a></li> + </ul> + </aside> + + </main> + + <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --> + + <footer> + <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p> + </footer> + + </body> +</html></pre> + +<p>Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.</p> + +<h2 id="Подробнее_об_элементах_HTML_макета">Подробнее об элементах HTML макета</h2> + +<p>Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью <a href="/en-US/docs/Web/HTML/Element">HTML-элементы</a>. Пока что это основные определения, которые вы должны попытаться понять:</p> + +<ul> + <li>{{HTMLElement('main')}} предназначен для содержимого, <em>уникального для этой страницы</em>. Используйте <code><main></code> только <em>один</em> раз на странице и размещайте прямо внутри {{HTMLElement('body')}}. В идеале он не должен быть вложен в другие элементы.</li> + <li>{{HTMLElement('article')}} окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).</li> + <li>{{HTMLElement('section')}} подобен <code><article></code>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">заголовка</a>. Также обратите внимание, что в зависимости от контекста вы можете разбить <code><article></code> на несколько <code><section></code> или, наоборот, <code><section></code> на несколько <code><article></code>.</li> + <li>{{HTMLElement('aside')}} содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).</li> + <li>{{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles и headings</a>). </li> + <li>{{HTMLElement('nav')}} содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.</li> + <li>{{HTMLElement('footer')}} представляет собой группу конечного контента для страницы.</li> +</ul> + +<h3 id="Несемантические_обертки">Несемантические обертки</h3> + +<p>Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.</p> + +<p>{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:</p> + +<pre class="brush: html notranslate"><p>Пьяный Король возвратился в свою комнату в 01:00 +и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент +свет на сцене должен быть приглушён]</span>.</p></pre> + +<p>В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.</p> + +<p>{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если Вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который Вы можете открыть в любой момент нахождения на сайте:</p> + +<pre class="brush: html notranslate"><div class="shopping-cart"> + <h2>Корзина</h2> + <ul> + <li> + <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p> + <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги"> + </li> + <li> + ... + </li> + </ul> + <p>Итого: $237.89</p> +</div></pre> + +<p>Ему не подходит <code><aside></code>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и <code><section></code>, т. к. это не часть основного содержимого страницы. Поэтому <code><div></code> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.</p> + +<div class="warning"> +<p><strong>Внимание</strong>: <code>div</code> настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают Ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе Вам будет трудно обновлять и поддерживать Ваши документы.</p> +</div> + +<h3 id="Перенос_строки_и_горизонтальный_разделитель">Перенос строки и горизонтальный разделитель</h3> + +<p>Два элемента, которые Вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:</p> + +<p><code><br></code> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> + +<pre class="brush: html notranslate"><p>Жила-была девчушка Нелл,<br> +Любившая писать HTML:<br> +Её семантика ужасна была — <br> +Она и сама прочитать ничего не могла.</p></pre> + +<p>Без элемента <code><br></code> абзац разместится в одну длинную линию (как было сказано ранее, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML игнорирует переносы строк</a>), а с ним в коде — разметка будет выглядеть следующим образом:</p> + +<p>Жила-была девчушка Нелл,<br> + Любившая писать HTML:<br> + Её семантика ужасна была —<br> + Она и сама прочитать ничего не могла.</p> + +<p><code><hr></code> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> + +<pre class="notranslate"><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> +<hr> +<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p></pre> + +<p>Будет выглядеть примерно так:</p> + +<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> + +<hr> +<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p> + +<h2 id="Планирование_простого_веб-сайта">Планирование простого веб-сайта</h2> + +<p>Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется {{glossary("Information architecture")}}. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!</p> + +<ol> + <li><span class="tlid-translation translation">Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц</span>. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.</li> +</ol> + +<p><img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Самостоятельная_работа_создайте_свою_собственную_карту_сайта">Самостоятельная работа: создайте свою собственную карту сайта</h3> + +<p>Приментие наш метод к своему сайту. О чем он будет?</p> + +<div class="note"> +<p><strong>Примечание</strong>: Сохраните свой код, он Вам ещё понадобится.</p> +</div> + +<h2 id="Заключение">Заключение</h2> + +<p><span class="tlid-translation translation">Вы стали лучше понимаеть, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.</span></p> + +<h2 id="Дополнительные_материалы">Дополнительные материалы</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> 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 new file mode 100644 index 0000000000..f27e4c5398 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,773 @@ +--- +title: Начало работы с HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - Guide + - HTML + - Аттрибуты + - Для начинающих + - Комментарии + - Пробелы + - Программирование + - Руководство + - Урок + - элементы +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Learn/HTML/Введение_в_HTML/Начало_работы +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}</div> + +<p class="summary">В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые знания:</th> + <td>Умение работать с компьютером, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">наличие необходимого ПО</a>, базовые знания о <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>.</td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Познакомиться с языком HTML и научиться описывать некоторые его элементы.</td> + </tr> + </tbody> +</table> + +<h2 id="Что_такое_HTML">Что такое HTML?</h2> + +<p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> + +<pre class="notranslate">Мой кот очень сердитый</pre> + +<p>Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" ({{htmlelement("p")}}), например:</p> + +<pre class="brush: html notranslate"><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> +</div> + +<h2 id="Структура_HTML_элементов">Структура HTML элементов</h2> + +<p>Давайте рассмотрим элемент "параграф" чуть подробнее:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16452/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png" style="height: 255px; width: 821px;"></p> + +<p>Основными частями элемента являются:</p> + +<ol> + <li><strong>Открывающий тег:</strong> Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри <strong>угловых скобок</strong>. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.</li> + <li><strong>Закрывающий тег:</strong> выглядит как и открывающий, но содержит слэш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.</li> + <li><strong>Содержимое:</strong> Как видно, в нашем случае содержимым является простой текст.</li> + <li><strong>Элемент:</strong> открывающий тег + закрывающий тег + содержимое = элемент.</li> +</ol> + +<h3 id="Активное_изучение_создание_вашего_первого_HTML_элемента">Активное изучение: создание вашего первого HTML элемента</h3> + +<p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув ее тегами <code><em></code> и <code></em></code> (вставьте <code><em></code> перед строкой, чтобы <em>указать начало элемента</em>, и <code></em></code> после нее, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p> + +<p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + Это мой текст. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Сбросить" /> + <input id="solution" type="button" value="Показать решение" /> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<em>Это мой текст.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Вложенные_элементы">Вложенные элементы</h3> + +<h3 id="Nesting_elements" style="display: none;">Nesting_elements</h3> + +<p>Вы также можете вкладывать элементы внутрь других элементов — это называется <strong>вложенностью</strong>. Если мы хотим подчеркнуть, что наш кот <strong>очень</strong> сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:</p> + +<pre class="brush: html notranslate"><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> + +<p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p> + +<h3 id="Блочные_и_строчные_элементы">Блочные и строчные элементы</h3> + +<h3 id="Block_versus_inline_elements" style="display: none;">Block versus inline elements</h3> + +<p>Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.</p> + +<ul> + <li>Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.</li> + <li>Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент {{htmlelement("a")}} (ссылка) или акцентирующие элементы вроде {{htmlelement("em")}} или {{htmlelement("strong")}}.</li> +</ul> + +<p>Посмотрите на следующий пример:</p> + +<pre class="brush: html notranslate"><em>Первый</em><em>второй</em><em>третий</em> + +<p>четвертый</p><p>пятый</p><p>шестой</p> +</pre> + +<p>{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS-оформлением</a> по умолчанию, которое браузеры применяют к абзацам).</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Примечание</strong>: HTML5 переопределил категории элементов в HTML: смотрите <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Категории типов содержимого элементов</a>. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.</p> +</div> + +<div class="note"> +<p><strong>Примечание</strong>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типами отображения в CSS</a>. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.</p> +</div> + +<div class="note"> +<p><strong>Примечание</strong>: Вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри <a href="/en-US/docs/Web/HTML/Block-level_elements">Элементы блочного уровня</a> и <a href="/en-US/docs/Web/HTML/Inline_elements">Строчные элементы</a>.</p> +</div> + +<h3 id="Пустые_элементы">Пустые элементы</h3> + +<h3 id="Empty_elements" style="display: none;">Empty elements</h3> + +<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> + +<p>Это выведет на вашу страницу следующее:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Примечание</strong>: Пустые элементы иногда называют <em>void-элементами</em>.</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>У элементов также могут быть атрибуты, которые выглядят так:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут <code>class</code> позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.</p> + +<p>Атрибут должен иметь:</p> + +<ol> + <li>Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).</li> + <li>Имя атрибута и следующий за ним знак равенства.</li> + <li>Значение атрибута, заключенное в кавычки.</li> +</ol> + +<h3 id="Активное_изучение_Добавление_атрибутов_в_элемент">Активное изучение: Добавление атрибутов в элемент</h3> + +<h3 id="Active_learning_Adding_attributes_to_an_element" style="display: none;">Active learning: Adding attributes to an element</h3> + +<p>Возьмём для примера элемент {{htmlelement("a")}} — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:</p> + +<ul> + <li><code>href</code>: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: Атрибут <code>title</code> описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, <code>title="The Mozilla homepage"</code>. Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.</li> + <li><code>target</code>: Атрибут <code>target</code> определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, <code>target="_blank"</code> отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.</li> +</ul> + +<p>Измените строку текста ниже в поле <em>Ввод</em> так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент <code><a></code>затем атрибут <code>href</code> и атрибут <code>title</code>. Наконец, укажите атрибут <code>target</code> чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле <em>Вывод</em>. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута <code>title</code>, а при щелчке переходит по адресу в атрибуте <code>href</code>. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.</p> + +<p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;Ссылка на мой любимый веб-сайт.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<p>Ссылка на мой <a href="https://www.mozilla.org/" title="Домашняя страница Mozilla" target="_blank">любимый веб-сайт</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Булевые_атрибуты">Булевые атрибуты</h3> + +<h3 id="Boolean_attributes" style="display: none;">Boolean attributes</h3> + +<p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p> + +<pre class="brush: html notranslate"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>На выходе оба варианта будут выглядеть следующим образом:</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Опускание_кавычек_вокруг_значений_атрибутов">Опускание кавычек вокруг значений атрибутов</h3> + +<h3 id="Omitting_quotes_around_attribute_values" style="display: none;">Omitting quotes around attribute values</h3> + +<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> + +<pre class="brush: html notranslate"><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> + +<p>В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут <code>title</code> — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: <code>Mozilla</code> и <code>homepage</code>. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!</p> + +<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.</p> + +<h3 id="Одинарные_или_двойные_кавычки">Одинарные или двойные кавычки?</h3> + +<h3 id="Single_or_double_quotes" style="display: none;">Single or double quotes?</h3> + +<p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p> + +<pre class="brush: html notranslate"><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> + +<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> + +<p>Если вы хотите вставить кавычки того же типа, то вы должны использовать <a href="/en-US/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> + +<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> + +<h2 id="Структура_HTML_документа">Структура HTML документа</h2> + +<p>Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Тестовая страница</title> + </head> + <body> + <p>Это — моя страница</p> + </body> +</html></pre> + +<p>Вот что мы имеем:</p> + +<ol> + <li><code><!DOCTYPE html></code>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: + + <pre class="notranslate"><!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> + <li><code><head></head></code>: Элемент {{htmlelement("head")}}. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.</li> + <li><code><meta charset="utf-8"></code>: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.</li> + <li><code><title></title></code>: Элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.</li> + <li><code><body></body></code>: Элемент {{htmlelement("body")}}. Он содержит <em>весь</em> контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.</li> +</ol> + +<h3 id="Активное_изучение_Добавление_элементов_в_ваш_HTML-документ">Активное изучение: Добавление элементов в ваш HTML-документ</h3> + +<h3 id="Active_learning_Adding_some_features_to_an_HTML_document" style="display: none;">Active learning: Adding some features to an HTML document</h3> + +<p>Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:</p> + +<ol> + <li>Скопировать пример HTML-страницы, расположенный выше.</li> + <li>Создать новый файл в текстовом редакторе.</li> + <li>Вставить код в ваш новый текстовый файл.</li> + <li>Сохранить файл как <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Примечание</strong>: Вы также можете найти этот базовый пример HTML на <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:</p> + +<p><img alt="Скриншот примера тестовой страницы" src="https://mdn.mozillademos.org/files/17060/Test_page.jpg" style="border-style: solid; border-width: 1px; height: 293px; width: 415px;"><br> + Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента {{htmlelement("body")}}. Попробуйте сделать следующее:</p> + +<ul> + <li>Добавьте заголовок страницы сразу за открывающим тегом {{htmlelement("body")}}. Текст должен находиться между открывающим тегом <code><h1></code> и закрывающим <code></h1></code> .</li> + <li>Напишите в параграфе о чём-нибудь, что кажется вам интересным.</li> + <li>Выделите важные слова, обернув их в открывающий тег <code><strong></code> и закрывающий <code></strong></code></li> + <li>Добавьте ссылку на свой абзац так, как <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">объяснено ранее в статье</a>.</li> + <li>Добавьте изображение в свой документ под абзацем, как <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">объяснено ранее в статье</a>. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!</li> +</ul> + +<p>Если вы запутались, всегда можно запустить пример сначала кнопкой <em>Сбросить</em>. Сдаётесь — посмотрите ответ, нажав на <em>Показать решение</em>.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;Это — моя страница&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = '<em>Спрятать решение</em>'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<p>Мне очень нравится <strong>играть на барабанах</strong>. Мой любимый барабанщик — Нил Пирт, который\ играет в группе <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">"Rush"</a>.\ Мой любимый альбом Rush — <a href="http://www.deezer.com/album/942295">"Moving Pictures"</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Пробелы_в_HTML">Пробелы в HTML</h3> + +<h3 id="Whitespace_in_HTML" style="display: none;">Whitespace in HTML</h3> + +<p>Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:</p> + +<pre class="brush: html notranslate"><p>Собаки глупы.</p> + +<p>Собаки + глупы.</p></pre> + +<p>Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.</p> + +<h2 id="Ссылки_на_сущности_Включение_специальных_символов_в_HTML">Ссылки на сущности: Включение специальных символов в HTML</h2> + +<h2 id="Entity_references_Including_special_characters_in_HTML" style="display: none;">Entity references: Including special characters in HTML</h2> + +<p>В HTML символы <code><</code>, <code>></code>, <code>"</code>, <code>'</code> и <code>&</code> являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.</p> + +<p>Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с ампресанда (&) и завершается точкой с запятой (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Буквенный символ</th> + <th scope="col">Символьный эквивалент</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:</p> + +<pre class="brush: html notranslate"><p>В HTML вы определяете параграф элементом <p>.</p> + +<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p></pre> + +<p>В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент <code><p></code> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Примечание</strong>: Таблица всех доступных в HTML символов-мнемоников — в Википедии: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="HTML_комментарии">HTML комментарии</h2> + +<h2 id="HTML_comments" style="display: none;">HTML comments</h2> + +<p>В HTML, как и в большинстве языков программирования, есть возможность писать комментарии в коде. Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д. Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.</p> + +<p>Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <code><!--</code> и <code>--></code>, например:</p> + +<pre class="brush: html notranslate"><p> Меня нет в комментариях( </p> + +<!-- <p>А теперь есть!</p> --></pre> + +<p>Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Подведение_итогов">Подведение итогов</h2> + +<p>Вы дошли до конца статьи — надемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!</p> + +<div class="note"> +<p><strong>Примечание</strong>: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Применение цвета к элементам HTML с помощью CSS</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}</div> + +<div></div> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> 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 new file mode 100644 index 0000000000..8ca79e314e --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,995 @@ +--- +title: Основы редактирования текста в HTML +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - Guide + - HTML + - Абзацы + - Введение в HTML + - Изучение + - Начинающий + - Параграфы + - Руководство + - Семантика + - Текст +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals +--- +<div> +<div> {{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> +</div> + +<p class="summary">Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Предварительные требования:</th> + <td>Базовое знакомство с HTML , описанное в <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">Начало работы с HTML</a>.</td> + </tr> + <tr> + <th scope="row">Задача:</th> + <td>Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td> + </tr> + </tbody> +</table> + +<h2 id="Основы_Заголовки_и_абзацы_параграфы">Основы: Заголовки и абзацы / параграфы</h2> + +<p>Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>Упорядоченный контент делает чтение более легким и приятным.</p> + +<p>В HTML каждый абзац заключен в элемент {{htmlelement("p")}}, подобно:</p> + +<pre class="brush: html notranslate"><p>Я параграф, да, это я.</p></pre> + +<p>Каждый заголовок заключен в элемент заголовка {{htmlelement("h1")}}:</p> + +<pre class="brush: html notranslate"><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> + +<h3 id="Создание_иерархической_структуры">Создание иерархической структуры</h3> + +<p>Например, в рассказе <code><h1></code> будет представлять заглавие рассказа, <code><h2></code> обозначит название каждой главы, <code><h3></code> будет обозначать подзаголовки в каждой главе и так далее.</p> + +<pre class="brush: html notranslate"><h1> Сокрушительная скука </ h1> + +<p> Крис Миллс </ p> + +<h2> Глава 1: Темная ночь </ h2> + +<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> + +<h2> Глава 2: Вечное молчание </ h2> + +<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p> + +<h3> Призрак говорит </ h3> + +<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p> +</pre> + +<p>Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.</p> + +<ul> + <li>Предпочтительнее использовать <code><h1></code> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки распологаются ниже его в иерархии.</li> + <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <code><h3></code> для создания подзаголовков при одновременном использовании <code><h2></code> для представления под-подзаголовков — это не имеет смысла и приведет к странным результатам.</li> + <li><span id="result_box" lang="ru"><span>Из шести доступных уровней заголовка вы должны стремиться использовать не более трех на странице, если только вы не чувствуете, что это необходимо.</span></span> <span id="result_box" lang="ru"><span>Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации.</span></span> <span id="result_box" lang="ru"><span>В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</span></span></li> +</ul> + +<h3 id="Зачем_нам_необходима_структура">Зачем нам необходима структура?</h3> + +<p><span id="result_box" lang="ru"><span>Чтобы ответить на этот вопрос, давайте посмотрим на </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> —<span lang="ru"><span> отправную точку нашего примера для этой статьи (хороший рецепт хумуса).</span></span> <span id="result_box" lang="ru"><span>Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже.</span></span> <span id="result_box" lang="ru"><span>Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).</span></span></p> + +<p><span id="result_box" lang="ru"><span>Однако, когда вы откроете документ в своем браузере, вы увидите, что текст выглядит как один большой кусок!</span></span></p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p> + +<p><span id="result_box" lang="ru"><span>Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац.</span> <span>Более того:</span></span></p> + +<ul> + <li><span id="result_box" lang="ru"><span>Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно </span></span><a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">тратим очень мало времени на веб-странице</a><span lang="ru"><span>).</span> <span>Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.</span></span></li> + <li><span id="result_box" lang="ru"><span>Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы.</span> <span>Без заголовков ваша страница будет плохо работать с точки зрения</span></span> {{glossary("SEO")}} (Search Engine Optimization — поисковая оптимизация).</li> + <li>Сильно <span id="result_box" lang="ru"><span>слабовидящие люди часто не читают веб-страницы —</span> <span>они слушают их вместо этого.</span> <span>Это делается с помощью программного обеспечения, называемого </span></span><a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">программой чтения с экрана</a><span lang="ru"><span>.</span> <span>Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту.</span> <span>Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию.</span> <span>Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.</span></span></li> + <li><span id="result_box" lang="ru"><span>Чтобы стилизовать контент с помощью {{glossary ("CSS")}} или сделать его интересным с помощью {{glossary ("JavaScript")}}, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать</span><span>.</span></span></li> +</ul> + +<p><span id="result_box" lang="ru"><span>Поэтому нужно дать структурную разметку нашему контенту.</span></span></p> + +<h3 id="Активное_изучение_создание_структуры_для_нашего_контента">Активное изучение: создание структуры для нашего контента</h3> + +<p><span id="result_box" lang="ru"><span>Давайте рассмотрим это на живом примере.</span> <span>В приведённом ниже примере добавьте элементы в исходный текст в поле «</span></span>Редактируемый код<span lang="ru"><span>», чтобы он отображался как заголовок и два абзаца в поле «</span></span>Результат<span lang="ru"><span>».</span></span></p> + +<p><span id="result_box" lang="ru"><span>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки <em>Сбросить</em>.</span> <span>Если вы застряли, нажмите кнопку <em>Показать решение</em>, чтобы увидеть ответ.</span></span></p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">Моя мини-история +Я полицейский, и моё имя Триш. +Мои ноги сделаны из картона, и мой муж — рыба.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +body { + margin: 10px; + background: #f5f9fa; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Моя мини-история</h1>\n<p>Я полицейский, и моё имя Триш.</p>\n<p>Мои ноги сделаны из картона, и мой муж — рыба.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +textarea.onkeyup = function(){ + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Почему_мы_нуждаемся_в_семантике">Почему мы нуждаемся в семантике?</h3> + +<p><span id="result_box" lang="ru"><span>Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметoв;</span> <span>когда мы что-то видим, мы знаем, какова его функция.</span> <span>Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти».</span> <span>Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</span></span></p> + +<p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> + +<pre class="brush: html notranslate"><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> + +<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> + +<h2 id="Списки">Списки</h2> + +<p><span id="result_box" lang="ru"><span>Теперь обратим наше внимание на списки.</span> <span>Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве!</span> <span>Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.</span></span></p> + +<h3 id="Неупорядоченные">Неупорядоченные</h3> + +<p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:</span></span></p> + +<pre class="notranslate">молоко +яйца +хлеб +хумус</pre> + +<p><span id="result_box" lang="ru"><span>Каждый неупорядоченный список начинается с элемента {{htmlelement ("ul")}} (<em>unordered list</em>) — он обёртывает все элементы списка:</span></span> молоко, яйца, хлеб, хумус.</p> + +<p><span id="result_box" lang="ru"><span>Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):</span></span></p> + +<pre class="brush: html notranslate"><ul> + <li>молоко</li> + <li>яйца</li> + <li>хлеб</li> + <li>хумус</li> +</ul></pre> + +<h3 id="Активное_изучение_разметка_неупорядоченного_списка">Активное изучение: разметка неупорядоченного списка</h3> + +<p><span id="result_box" lang="ru"><span>Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.</span></span></p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><code><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label"></code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code></p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">молоко +яйца +хлеб +хумус</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></code></pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +body { + margin: 10px; + background: #f5f9fa; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>молоко</li>\n<li>яйца</li>\n<li>хлеб</li>\n<li>хумус</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +textarea.onkeyup = function(){ + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Упорядоченные">Упорядоченные</h3> + +<p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:</span></span></p> + +<pre class="notranslate">Доедьте до конца дороги +Поверните направо +Едьте прямо через первые два перекрестка с круговым движением +Поверните налево на третьем перекрестке +Школа справа от вас, 300 метров вверх по дороге</pre> + +<p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:</span></span></p> + +<pre class="brush: html notranslate"><ol> + <li>Доедьте до конца дороги</li> + <li>Поверните направо</li> + <li>Едьте прямо через первые два перекрестка с круговым движением</li> + <li>Поверните налево на третьем перекрестке</li> + <li>Школа справа от вас, в 300 метрах вверх по дороге</li> +</ol></pre> + +<h3 id="Активное_изучение_разметка_упорядоченного_списка">Активное изучение: разметка упорядоченного списка</h3> + +<p><span id="result_box" lang="ru"><span>Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.</span></span></p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><code><h2>Результат</h2> +<div class="output" style="min-height: 50px;"> +</div> +<h2>Редактируемый код</h2> +<p class="a11y-label"></code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code></p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"></code>Доедьте до конца дороги +Поверните направо +Едьте прямо через первые два перекрестка с круговым движением +Поверните налево на третьем перекрестке +Школа справа от вас, 300 метров вверх по дороге<code></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></code></pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +body { + margin: 10px; + background: #f5f9fa; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Доедьте до конца дороги</li>\n<li>Поверните направо</li>\n<li>Едьте прямо через первые два перекрестка с круговым движением</li>\n<li>Поверните налево на третьем перекрестке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +textarea.onkeyup = function(){ + if(solution.value === 'Показать решение>') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Активное_изучение_разметка_собственной_страницы_рецептов">Активное изучение: разметка собственной страницы рецептов</h3> + +<p><span id="result_box" lang="ru"><span>Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта.</span> <span>Вы можете либо сохранить локальную копию исходного файла </span></span><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a><span lang="ru"><span> и выполнить в нём работу, либо сделать это в приведённом ниже примере.</span> <span>Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы.</span> <span>У обоих способов есть плюсы и минусы.</span></span></p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2><code>Редактируемый код</code></h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Рецепт быстрого приготовления хумуса. + + Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет. + + Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой. + + Ингредиенты + + 1 банка (400г) турецкого гороха (или бараньего гороха) + 175г тахини + 6 вяленых томатов + Половинка красного перца + Щепотка кайенского перца + 1 зубчик чеснока + Чуть-чуть оливкового масла + + Рецепт + + Очистите чеснок от кожуры и крупно нарежьте. + Удалите стебель и семена у перца; крупно нарежьте перец. + Добавьте все ингредиенты в пищевой комбайн. + Измельчите все ингридиенты до состояния пасты. + Если вы хотите "грубый" хумус, измельчайте пару минут. + Если вам нужен гладкий хумус, измельчайте дольше. + + По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подоходит вам. + + Хранение + + Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его. + + Хумус можно хранить в морозильном отделении 2–3 месяца.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +body { + margin: 10px; + background: #f5f9fa; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Показать решение'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Рецепт быстрого приготовления хумуса.</h1>\n\n<p>Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.</p>\n\n<p>Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.</p>\n\n<h2>Ингредиенты</h2>\n\n<ul>\n<li>1 банка (400г) турецкого гороха (или бараньего гороха)</li>\n<li>175г тахани</li>\n<li>6 вяленых томатов</li>\n<li>Половинка красного перца</li>\n<li>Щепотка кайенского перца</li>\n<li>1 зубчик чеснока</li>\n<li>Чуть-чуть оливкового масла</li>\n</ul>\n\n<h2>Рецепт</h2>\n\n<ol>\n<li>Очистите чеснок от кожуры и крупно нарежьте.</li>\n<li>Удалите стебель и семена у перца; крупно нарежьте.</li>\n<li>Добавьте все ингредиенты в пищевой комбайн.</li>\n<li>Измельчите все ингридиенты до состояния пасты.</li>\n<li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>\n<li>Если вам нужен гладкий хумус, измельчайте дольше.</li>\n</ol>\n\n<p>По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подоходит вам.</p>\n\n<h2>Хранение</h2>\n\n<p>Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.</p>\n\n<p>Хумус можно хранить в морозильном отделении 2–3 месяца.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +textarea.onkeyup = function(){ + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p><span id="result_box" lang="ru"><span>Если вы застряли, вы всегда можете нажать кнопку <em>Показать решение</em> или проверить наш пример </span></span><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a><span lang="ru"><span> в нашем реестре github.</span></span></p> + +<h3 id="Вложенные_списки">Вложенные списки</h3> + +<p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список распологался внутри другого.</span> <span>Давайте возьмем второй список из нашего примера рецепта:</span></span></p> + +<pre class="brush: html notranslate"><ol> + <li>Очистите чеснок от кожуры и крупно нарежьте.</li> + <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> + <li>Добавьте все ингредиенты в пищевой комбайн.</li> + <li>Измельчите все ингридиенты до состояния пасты.</li> + <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li> + <li>Если вам нужен гладкий хумус, измельчайте дольше.</li> +</ol> </pre> + +<div id="gt-res-content"> +<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> + <li>Очистите чеснок от кожуры и крупно нарежьте.</li> + <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> + <li>Добавьте все ингредиенты в пищевой комбайн.</li> + <li>Измельчите все ингридиенты до состояния пасты. + <ul> + <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li> + <li>Если вам нужен гладкий хумус, измельчайте дольше.</li> + </ul> + </li> +</ol></pre> + +<p><span id="result_box" lang="ru"><span>Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.</span></span></p> + +<h2 id="Акцент_и_важность"><span class="short_text" id="result_box" lang="ru"><span>Акцент и важность</span></span></h2> + +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде.</span> <span>HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.</span></span></div> + +<div class="trans-verified-button-small" dir="ltr"></div> +</div> + +<h3 id="Акцент">Акцент</h3> + +<p><span id="result_box" lang="ru"><span>Когда мы хотим добавить акцент в разговорный язык, мы подчеркиваем определенные слова, тонко изменяя смысл того, что мы говорим.</span> <span>Точно так же на письменном языке мы склонны подчеркивать слова, выделяя их <em>курсивом</em>.</span> <span>Например, следующие два предложения имеют разные значения.</span></span></p> + +<p><span class="short_text" id="result_box" lang="ru"><span>Я рад, что ты не опоздал.</span></span></p> + +<p><span class="short_text" id="result_box" lang="ru"><span>Я <em>рад</em>, что ты не <em>опоздал</em>.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="alt-edited">В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена </span></span><span lang="ru"><span class="alt-edited">досада от того, что человек немного опоздал.</span></span></p> + +<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> + +<h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3> + +<p><span id="result_box" lang="ru"><span>Чтобы подчеркнуть важные слова, мы склонны подчеркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке.</span> <span>Например:</span></span></p> + +<p><span id="result_box" lang="ru"><span>Эта жидкость <strong>очень токсична</strong>.</span><br> + <br> + <span>Я рассчитываю на вас.</span> <span><strong>Не опаздывай</strong>!</span></span></p> + +<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> + +<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p></pre> + +<p><span id="result_box" lang="ru"><span>При желании вы можете вложить важные и акцентированные слова друг в друга:</span></span></p> + +<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong> — +если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p></pre> + +<h3 id="Активное_изучение_Давайте_будем_важны!">Активное изучение: <span class="short_text" id="result_box" lang="ru"><span>Давайте будем важны!</span></span></h3> + +<p><span id="result_box" lang="ru"><span>В этом разделе активного обучения мы предоставили редактируемый пример.</span> <span>Внутри него мы хотели бы, чтобы вы попытались добавить акцент и большую важность для слов, которые, по вашему мнению, им нужны, просто для того, чтобы попрактиковаться.</span></span></p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Результат</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Редактируемый код</h2> +<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Важное объявление</h1> +<p>9 января 2010 года, в воскресенье, +банда вандалов была обнаружена за кражей нескольких +садовых гномов из торгового центра в центре Милуоки. На них были +надеты зелёные спортивные костюмы и глупые шляпы, и, +по-видимому, они были в нетрезвом состоянии. Если у кого-то +есть какая-либо информация об этом инциденте, пожалуйста, +позвоните в полицию немедленно.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Сбросить"> + <input id="solution" type="button" value="Показать решение"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Показать решение') { + textarea.value = solutionEntry; + solution.value = 'Спрятать решение'; + } else { + textarea.value = userEntry; + solution.value = 'Показать решение'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Важное объявление</h1>\n<p><strong>9 января 2010 года, в воскресенье</strong>, банда <em>вандалов</em> была обнаружена за кражей <strong><em>нескольких</em> садовых гномов</strong> торговом центре в центре <strong>Милуоки</strong>. На них были надеты <em>зелёные спортивные костюмы</em> и <em>глупые шляпы</em>, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть <strong>какая-либо</strong> информация об этом инциденте, пожалуйста, позвоните в полицию <strong>немедленно</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Показать решение') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Курсив_жирный_шрифт_подчеркивание...">Курсив, жирный шрифт, подчеркивание...</h3> + +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике.</span> <span>Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее.</span> <span>Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался</span></span><span lang="ru"><span>, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчеркнутый</u> текст.</span> <span>Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</span></span></div> + +<div class="trans-verified-button-small" dir="ltr"></div> +</div> + +<p><span id="result_box" lang="ru"><span>HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="alt-edited">Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</span></span></p> + +<ul> + <li>{{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...</li> + <li><span id="result_box" lang="ru"><span>{{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...</span></span></li> + <li><span id="result_box" lang="ru"><span>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчеркиванием: имя собственное</span></span><span lang="ru"><span>, орфографическая ошибка ...</span></span></li> +</ul> + +<div class="note"> +<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"><!-- Научные наименования --> +<p> + Колибри обыкновенный (<i>архилоус обыкновенный</i>) — +наиболее часто встречающийся вид колибри в северо-восточной Америке. +</p> + +<!-- Иностранные слова --> +<p> + Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- Явно неправильное произношение или написание --> +<p> + Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок. +</p> + +<!-- Выделение ключевых слов в инструкциях --> +<ol> + <li> + <b>Отрежьте</b> два ломтика хлеба. + </li> + <li> + <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба. + </li> +</ol></pre> + +<h2 id="Заключение">Заключение</h2> + +<p><span id="result_box" lang="ru"><span>Вот и всё!</span> <span>Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области.</span> <span>В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе.</span> <span>В следующей статье мы подробно рассмотрим, как </span></span><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">создавать гиперссылки</a><span lang="ru"><span>, возможно, самый важный элемент в Интернете. </span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..a90af38b71 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/index.html @@ -0,0 +1,68 @@ +--- +title: Введение в HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - HTML + - Введение + - Для чайников + - Заголовок + - Начинающим + - Новичкам + - Основы HTML + - Семантика + - Ссылки + - Структура + - Текст +translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/Введение_в_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">По сути, {{glossary("HTML")}} довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у документа шапка? три столбца с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Этот модуль расскажет Вам о первых двух возможностях HTML и научит фундаментальным концепциям и синтаксису, которые вам нужно знать, чтобы понять HTML.</p> + +<h2 id="Необходимые_условия">Необходимые условия</h2> + +<p>Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового програмного обеспечения</a>), а также понимание, как создавать и управлять файлами, что подробно описано в статье <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> — обе статьи являются частью нашего модуля <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">Начало работы с сетью</a>.</p> + +<div class="note"> +<p><strong>Примечание</strong>: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble.</a></p> +</div> + +<h2 id="Руководства">Руководства</h2> + +<p>Этот модуль содержит следующие статьи, которые помогут изучить всю основную теорию HTML и предоставят широкие возможности для проверки некоторых навыков.</p> + +<dl> + <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы">Начало работы с HTML</a></dt> + <dd>Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></dt> + <dd>Заголовок HTML — это часть документа, которая <strong>не отображается</strong> в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></dt> + <dd>Основной задачей HTML является придание тексту значения <strong>(</strong>также известно, как <strong>семантика</strong>), чтобы браузер знал, как его правильно отображать. В этой статье расматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></dt> + <dd>Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></dt> + <dd>Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье <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/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></dt> + <dd>Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации", "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></dt> + <dd>Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.</dd> +</dl> + +<h2 id="Оценка">Оценка</h2> + +<p>Следующие задания проверят ваше понимание основ HTML, описанных в приведенных выше руководствах.</p> + +<dl> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></dt> + <dd>Все мы рано или поздно учимся писать письма; также это полезеный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.</dd> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></dt> + <dd>Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.</dd> +</dl> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основы интернет-грамотности</a></dt> + <dd>Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле <em>Введение в HTML. </em>Учащиееся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.</dd> +</dl> diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..cb0956fa0b --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,102 @@ +--- +title: Разметка письма +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +tags: + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента <code><head></code>.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Знания:</th> + <td> + <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">Начало работы с HTML</a>, <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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a>, <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/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, <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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>, и <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/Advanced_text_formatting">Углубленное форматирование текста</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td> + <p>Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега <code><head></code>.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Отправная_точка">Отправная точка</h2> + +<p>Для начала задания, вы должны <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">скачать текст</a>, который вам надо отформатировать, и <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS стиль</a>, который вы должны подключить к вашему HTML. Создайте .html файл используюя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редактороми, таким как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>).</p> + +<h2 id="Описание_проекта">Описание проекта</h2> + +<p>В этом проекте, ваша задача - отформатировать письмо, которое должно быть размещено во внутренней сети университета. Это письмо - ответ исследователя будущему PhD студенту о его заявлении на работу в университете.</p> + +<p>Блочные элементы / структура:</p> + +<ul> + <li>Вы должны корректно структурировать весь документ, включив в него элементы doctype, и {{htmlelement("html")}}, {{htmlelement("head")}} и {{htmlelement("body")}}.</li> + <li>Письмо в целом должно быть размечено используя параграфы и заголовки, за исключением следующих пунктов - один заголовок верхнего уровня (начинается на "Re:") и три заголовка второго уровня.</li> + <li>Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответсвующие типы списков.</li> + <li>Два адреса должны быть помещены внутри элементов {{htmlelement("address")}}. Каждая строка адреса должна находиться на новой строке, но не быть новым параграфом.</li> +</ul> + +<p>Строчные элементы:</p> + +<ul> + <li>Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.</li> + <li>Четырем датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li> + <li>Первый адрес и первая дата в письме должны иметь аттрибут <code>class</code> со значением <code>"sender-column"</code>; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.</li> + <li>Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.</li> + <li>Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 10<sup>3</sup> и 10<sup>4 </sup>(степень числа должна быть над числом).</li> + <li>Для разметки символов градуса и умножения воспользуйтесь <a href="https://ru.wikipedia.org/wiki/Мнемоники_в_HTML">справкой</a>.</li> + <li>Постарайтесь выделить как минимум два нужных по смыслу слова в тексте жирным.</li> + <li>Есть два места, где следует разместить гиперссылки; добавьте нужные ссылки с заголовками. В качестве адреса для ссылок используйте http://example.com.</li> + <li>Девиз университета и цитата должны быть размечены соответствующими элементами.</li> +</ul> + +<p>Заголовок документа:</p> + +<ul> + <li>Кодировка документа должна быть указана как utf-8 с использованием соответствующего мета-тега.</li> + <li>Автор письма должен быть указан в соответствующем мета-теге.</li> + <li>Предоставленный CSS должен быть включён в соответствующий тег.</li> +</ul> + +<h2 id="Советы_и_подсказки">Советы и подсказки</h2> + +<ul> + <li>Проверяйте свой HTML в <a href="https://validator.w3.org/">валидаторе W3C</a> — писать валидный код здорово!</li> + <li>Для задания не нужно знать CSS — просто укажите CSS из задания в документе.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<p>Это скриншот размеченного письма:</p> + +<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p> + +<h2 id="Оценка">Оценка</h2> + +<p>Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на <a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">форум, в тему этого задания</a>, или по тегу <a href="irc://irc.mozilla.org/mdn">#mdn</a> в нашем IRC-канале (<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>). Сделайте это задание сами — вам некого обманывать, кроме себя самого.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..0dd009c3bc --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,102 @@ +--- +title: Структурируем страницу +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +tags: + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придется подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Что нужно знать:</th> + <td>Вам пондобятся навыки из всего курса. Особое внимание уделите разделу <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a>.</td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td> + <p>Проверить знания структуры веб-страницы и ее перевода в разметку.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Отправная_точка">Отправная точка</h2> + +<p>Чтобы начать это, вы должны перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">архив содержаший все начальные активы</a>. Архив содержит:</p> + +<ul> + <li>HTML, где вам нужно добавить структурную разметку.</li> + <li>CSS для стилизации вашей разметки.</li> + <li>Изображения, которые используются на странице.</li> +</ul> + +<p>Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> для исследования.</p> + +<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> + +<p>Для этого проекта ваша задача - взять контент для домашней страницы веб-сайта наблюдения за птицами и добавить к нему структурные элементы, чтобы он мог использовать макет страницы. Он должен иметь:</p> + +<ul> + <li>Заголовок, охватывающий всю ширину сайта, содержащий основное название страницы, логотип сайта и меню навигации. Заголовок и логотип появляются рядом друг с другом, когда применяется стилизация, и навигация появляется ниже этих двух элементов.</li> + <li>Основная область содержимого, содержащая два столбца - основной блок, содержащий текст приветствия, и боковую панель для размещения миниатюр изображений.</li> + <li>Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.</li> +</ul> + +<p>Вам необходимо добавить подходящую обертку для:</p> + +<ul> + <li>Заголовока</li> + <li>Меню навигации</li> + <li>Основного содержимого</li> + <li>Приветственного текста</li> + <li>Боковой панели изображения</li> + <li>Нижнего колонтитула</li> +</ul> + +<p>Вы также должны:</p> + +<ul> + <li>Примените предоставленный CSS к странице, добавив еще один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.</li> +</ul> + +<h2 id="Советы_и_подсказки">Советы и подсказки</h2> + +<ul> + <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).</li> + <li>Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.</li> + <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.</li> + <li>Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<p>Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Оценивание">Оценивание</h2> + +<p>Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на <a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assessment/24678">форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla</a>, или в IRC-канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> в <a href="https://wiki.mozilla.org/IRC">IRC Mozilla</a>. Попробуйте выполнить задание сами, ведь Вам некого обманывать, кроме себя самого!</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> 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 new file mode 100644 index 0000000000..9563f7edbe --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,301 @@ +--- +title: Что внутри "head"? Метаданные в HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +tags: + - HTML + - Meta + - favicon + - head + - lang + - metadata + - Для начинающих + - Заголовок + - Руководство + - иконка + - метаданные + - язык +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p>Элемент {{glossary("Head", "head")}} HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:</p> + +<ul> + <li>{{htmlelement("title", "заголовок (title)")}} страницы</li> + <li>ссылки на файлы {{glossary("CSS")}} (если вы хотите применить к вашему HTML стили CSS)</li> + <li>ссылки на иконки</li> + <li>другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)</li> +</ul> + +<p>В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Предварительные требования:</th> + <td>Базовое знакомство с HTML , описанное в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>.</td> + </tr> + <tr> + <th scope="row">Задача:</th> + <td>Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.</td> + </tr> + </tbody> +</table> + +<h2 id="Что_такое_<head>">Что такое <head>?</h2> + +<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> +<html> + <head> + <meta charset="utf-8"> + <title>Моя тестовая страница</title> + </head> + <body> + <p>Это — моя страница</p> + </body> +</html></pre> + +<p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведенном выше примере <head> совсем небольшой:</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Моя тестовая страница</title> +</head></pre> + +<p>Однако на больших страницах блок <head> может быть довольно объемным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью <a href="/ru/docs/Learn/Discover_browser_developer_tools">инструментов разработчика</a>. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.</p> + +<h2 id="Название_страницы_title">Название страницы (title)</h2> + +<p>Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда назвают заголовком страницы. Но это разные вещи!</p> + +<ul> + <li>Элемент {{htmlelement("h1")}} виден на странице, открытой в браузере, — его используют <strong>один раз на странице</strong>, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.</li> + <li>Элемент {{htmlelement("title")}} — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого. </li> +</ul> + +<h3 id="Активное_изучение_разбор_простого_примера">Активное изучение: разбор простого примера</h3> + +<ol> + <li>Чтобы приступить к активному изучению, скачайте страницу <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a> из нашего GitHub-репозитория. Это можно сделать двумя способами: + + <ol> + <li>Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.</li> + <li>Нажмите на странице кнопку "Raw", нажмите <em>Файл > Сохранить Как...</em> в меню браузера и выберите папку для сохранения.</li> + </ol> + </li> + <li>Откройте файл в браузере. Вы увидите что-то вроде этого: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Теперь должно стать совершенно ясно, в чём разница между <code><h1></code> и <code><title></code>!</p> + </li> + <li>Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!</li> +</ol> + +<p>Содержимое элемента <code><title></code> используется и в других местах. Например, при добавлении страницы в избранное (<em>Bookmarks > Bookmark This Page</em> в Firefox), текст из <code><title></code> предлагается в качестве названия закладки.</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>Текст из <code><title></code> также появляется в результатах поиска, как мы скоро увидим.</p> + +<h2 id="Метаданные_Элемент_<meta>">Метаданные: Элемент <meta></h2> + +<p>Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент {{htmlelement("meta")}}. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <code><meta></code>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.</p> + +<h3 id="Указываем_кодировку_текста_документа">Указываем кодировку текста документа</h3> + +<p>В заголовке примера выше есть следующая строка:</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . <code>utf-8</code> — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницов, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Если использовать, скажем, кодировку <code>ISO-8859-1</code> (набор символов для латиницы), текст страницы испортится:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong>Примечание</strong>: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.</p> +</div> + +<h3 id="Активное_изучение_экспериментируем_с_символьными_кодировками">Активное изучение: экспериментируем с символьными кодировками</h3> + +<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> + +<h3 id="Указываем_автора_и_описание">Указываем автора и описание</h3> + +<p>У элементов <code><meta></code> часто есть атрибуты <code>name</code> и <code>content</code>:</p> + +<ul> + <li><code>name</code> — тип элемента, то есть какие именно метаданные он содержит.</li> + <li><code>content</code> — сами метаданные.</li> +</ul> + +<p>Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:</p> + +<pre class="brush: html notranslate"><meta name="author" content="Крис Миллс"> +<meta name="description" content="Задача MDN — в том, чтобы обучить +новичков всему тому, что нужно им для разработки веб-сайтов и приложений."></pre> + +<p>По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.</p> + +<p>Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют <a href="/en-US/docs/Glossary/SEO">поисковой оптимизацией</a>, или {{glossary("SEO")}}.</p> + +<h3 id="Активное_изучение_как_поисковые_системы_используют_описание">Активное изучение: как поисковые системы используют описание</h3> + +<p>Описание из <code><meta name="description"></code> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.</p> + +<ol> + <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 +предоставляет собой информацию об открытых веб-технологиях, +включая HTML, CSS и различные API для веб-сайтов и +прогрессивных веб-приложений. Также на сайте содержатся материалы +для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox."></pre> + </li> + <li>Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <code><meta></code> и <code><title></code> используется в результатах поиска, — мы не зря указали их!</li> +</ol> + +<p><img alt="Результат поиска в Google" src="https://mdn.mozillademos.org/files/17061/Updated_search_result__ru.jpg" style="border-style: solid; border-width: 1px; height: 542px; width: 819px;"></p> + +<div class="note"> +<p><strong>Примечание</strong>: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через <a href="http://www.google.com/webmasters/tools/">Google Search Console</a>, чтобы пользователи могли сразу перейти к ним со страницы поиска.</p> +</div> + +<div class="note"> +<p><strong>Примечание</strong>: Многие типы <code><meta></code> больше не используются. Так, поисковые системы больше не используют данные из элемента <code><meta type="keywords" content="ваши, ключевые, слова, введите, здесь"></code>, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.</p> +</div> + +<h3 id="Другие_виды_метаданных">Другие виды метаданных</h3> + +<p>В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p> + +<p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метеданных. В исходном коде MDN Web Docs вы можете найти строки:</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png"> +<meta property="og:description" content="Веб-документация на MDN предоставляет +собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов +и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких +продуктах Mozilla, как Инструменты разработчика Firefox."> +<meta property="og:title" content="MDN Web Docs"></pre> + +<p>Один из результатов добавления этих метеданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия <em><a href="https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F">(User eXperience, UX</a>)</em>.</p> + +<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> + +<h2 id="Добавление_иконок">Добавление иконок</h2> + +<p>Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.</p> + +<p><a href="https://ru.wikipedia.org/wiki/Favicon">Favicon</a>, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.<img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Чтобы добавить на страницу favicon:</p> + +<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> + </li> +</ol> + +<p>Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:</p> + +<pre class="brush: html notranslate"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- Для iPhone с Retina-экраном высокого разрешения: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- Для iPad первого и второго поколения: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- Для других случаев - обычный favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении. </p> + +<p>Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов.</p> + +<h2 id="Подключение_CSS_и_JavaScript">Подключение CSS и JavaScript</h2> + +<p>Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связянные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .</p> + +<ul> + <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> + </li> + <li> + <p>Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом <code></body></code>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.</p> + + <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + + <p><strong>Примечание</strong>: Элемент <code><script></code> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.</p> + </li> +</ul> + +<h3 id="Активное_изучение_добавляем_на_страницу_CSS_и_JavaScript">Активное изучение: добавляем на страницу CSS и JavaScript</h3> + +<ol> + <li>Для этого упражнения скачайте файлы <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.</li> + <li>Откройте HTML в браузере и текстовом редакторе.</li> + <li>Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов {{htmlelement("link")}} и {{htmlelement("script")}}.</li> +</ol> + +<p>Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.</li> + <li>CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.</li> +</ul> + +<div class="note"> +<p><strong>Примечание</strong>: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> +</div> + +<h2 id="Основной_язык_HTML_страницы">Основной язык HTML страницы</h2> + +<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 notranslate"><html lang="ru"> +</pre> + +<p>Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово "шесть" пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).</p> + +<p>Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:</p> + +<pre class="brush: html notranslate"><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> + +<h2 id="Заключение">Заключение</h2> + +<p>На этом заканчивается наш беглый обзор по HTML-блоку head — с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><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">Начало работы с HTML</a></li> + <li><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/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> + <li><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/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> + <li><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%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> + <li><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/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><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%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> + <li><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/Debugging_HTML">Отладка HTML</a></li> + <li><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/Marking_up_a_letter">Разметка письма</a></li> + <li><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/Structuring_a_page_of_content">Структурируем страницу</a></li> +</ul> |