diff options
Diffstat (limited to 'files/ru/learn/html/введение_в_html/начало_работы/index.html')
| -rw-r--r-- | files/ru/learn/html/введение_в_html/начало_работы/index.html | 772 |
1 files changed, 772 insertions, 0 deletions
diff --git a/files/ru/learn/html/введение_в_html/начало_работы/index.html b/files/ru/learn/html/введение_в_html/начало_работы/index.html new file mode 100644 index 0000000000..48904b9e17 --- /dev/null +++ b/files/ru/learn/html/введение_в_html/начало_работы/index.html @@ -0,0 +1,772 @@ +--- +title: Начало работы с HTML +slug: Learn/HTML/Введение_в_HTML/Начало_работы +tags: + - Guide + - HTML + - Аттрибуты + - Для начинающих + - Комментарии + - Пробелы + - Программирование + - Руководство + - Урок + - элементы +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<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> |