diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
|---|---|---|
| committer | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
| commit | 55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch) | |
| tree | 5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/learn/html | |
| parent | 08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff) | |
| download | translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2 translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip | |
Auto fixes
Diffstat (limited to 'files/ru/learn/html')
23 files changed, 89 insertions, 89 deletions
diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html index a7b386098d..2c51073d15 100644 --- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html @@ -187,7 +187,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <ul> <li>Книга: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> - <li>Отличная и очень содеражательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> + <li>Отличная и очень содержательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> </ul> diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html index 65c138e103..c4f9f46583 100644 --- a/files/ru/learn/html/howto/index.html +++ b/files/ru/learn/html/howto/index.html @@ -45,7 +45,7 @@ original_slug: Learn/HTML/Рецепты <p>Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:</p> <ul> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Как создавить гиперссылки</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Как создавать гиперссылки</a></li> <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Как создать "оглавление" HTML</a></li> </ul> diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.html index 9820e4e0f9..3fa918c42f 100644 --- a/files/ru/learn/html/howto/use_data_attributes/index.html +++ b/files/ru/learn/html/howto/use_data_attributes/index.html @@ -37,7 +37,7 @@ article.dataset.parent // "cars"</code></pre> <h2 id="Доступ_в_CSS">Доступ в CSS</h2> -<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p> +<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p> <pre class="brush: css">article::before { content: attr(data-parent); @@ -54,7 +54,7 @@ article[data-columns='4']{ <p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p> -<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p> +<p><code>Data</code>-атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p> <h2 id="Проблемы">Проблемы</h2> diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.html index 75e8f2485b..0727a2b8bd 100644 --- a/files/ru/learn/html/index.html +++ b/files/ru/learn/html/index.html @@ -23,7 +23,7 @@ translation_of: Learn/HTML <ul> <li><a href="/ru/docs/Learn/CSS">"CSS (Каскадные таблицы стилей)"</a>, и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).</li> - <li><a href="/ru/docs/Learn/JavaScript">"JavaScript"</a>, и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появлятся/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).</li> + <li><a href="/ru/docs/Learn/JavaScript">"JavaScript"</a>, и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).</li> </ul> <p>Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">разделе "Установка базового программного обеспечения"</a>, а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">разделе "Работа с файлами"</a> — обе статьи являются частью нашего модуля для новичков - <a href="/ru/docs/Learn/Getting_started_with_the_web">"Начало работы с вебом"</a>.</p> diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index 2e34f4a80b..3e05c04ea4 100644 --- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -424,7 +424,7 @@ textarea.onkeyup = function(){ <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> <div class="note"> -<p><strong>Примечание:</strong> Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code><abbr></code>, но предназначен специально для акронимов (тип аббревитатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code><abbr></code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code><abbr></code>.</p> +<p><strong>Примечание:</strong> Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code><abbr></code>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code><abbr></code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code><abbr></code>.</p> </div> <h3 id="Активное_обучение_выделение_аббревиатуры">Активное обучение: выделение аббревиатуры</h3> diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html index d252a56e21..0ec868fd19 100644 --- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -25,7 +25,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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> + <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> @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.</p> -<h3 id="Добавляем_инфомацию_через_атрибут_title">Добавляем инфомацию через атрибут title</h3> +<h3 id="Добавляем_информацию_через_атрибут_title">Добавляем информацию через атрибут title</h3> <p>Другим атрибутом, который вы можете добавить к своим ссылкам, является — <code>title</code>. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:</p> @@ -111,7 +111,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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> +<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> @@ -130,7 +130,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс </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> + <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>. @@ -175,7 +175,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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> + <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> @@ -219,7 +219,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <ul> <li>Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.</li> - <li>Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговоаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).</li> + <li>Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).</li> <li>Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.</li> <li>Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.</li> </ul> @@ -235,7 +235,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h3 id="Создавая_ссылки_на_не_HTML_ресурсы_—_добавляйте_описание">Создавая ссылки на не HTML ресурсы — добавляйте описание</h3> -<p>Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсуствие описания может раздражать пользователя. Приведем пример:</p> +<p>Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведем пример:</p> <ul> <li>Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.</li> @@ -292,7 +292,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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> +<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> @@ -304,7 +304,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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>В результате получим ссылку вида: <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>.</p> <p>Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".</p> 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 index a48d53d1c2..e80ec52b6d 100644 --- a/files/ru/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html @@ -24,7 +24,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML </tr> <tr> <th scope="row">Чему вы научитесь:</th> - <td>Искать проблемы в HTML с помощю инструментов отладки.</td> + <td>Искать проблемы в HTML с помощью инструментов отладки.</td> </tr> </tbody> </table> @@ -33,7 +33,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <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><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> @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li><strong>Логические ошибки (Logic errors)</strong>: Это ошибки, появляющиеся в том случае, если синтаксис корректен, но код не выполняет своего предназначения, то есть программа выполняется неверно. Такие исправлять сложнее, чем синтаксические, поскольку не выводится сообщений, указывающих место, где вы ошиблись.</li> </ul> -<p>HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутсвуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!</p> +<p>HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутствуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!</p> <div class="note"> <p><strong>На заметку</strong>: HTML читается толерантно, потому что когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.</p> @@ -86,7 +86,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <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> + <li>В атрибуте {{htmlattrxref("href","a")}} отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.</li> </ul> </li> <li>Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Обзор инструментов разработки в браузерах</a>.</li> @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML </strong> <em> what is this?</em></pre> </li> - <li>Ссылка с отсутсвующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: + <li>Ссылка с отсутствующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: <pre class="brush: html"><li> <strong>Unclosed attributes: Another common source of HTML problems. Let's look at an example: </strong> diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html index 081d12edf3..7128fd4462 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -76,7 +76,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <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> +<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> @@ -259,7 +259,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <h3 id="Самостоятельная_работа_создайте_свою_собственную_карту_сайта">Самостоятельная работа: создайте свою собственную карту сайта</h3> -<p>Приментие наш метод к своему сайту. О чем он будет?</p> +<p>Применить наш метод к своему сайту. О чем он будет?</p> <div class="note"> <p><strong>Примечание</strong>: Сохраните свой код, он Вам ещё понадобится.</p> @@ -267,7 +267,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <h2 id="Заключение">Заключение</h2> -<p><span class="tlid-translation translation">Вы стали лучше понимаеть, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.</span></p> +<p><span class="tlid-translation translation">Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.</span></p> <h2 id="Дополнительные_материалы">Дополнительные материалы</h2> diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index 89f5077314..1a726362e6 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -4,7 +4,7 @@ slug: Learn/HTML/Introduction_to_HTML/Getting_started tags: - Guide - HTML - - Аттрибуты + - Атрибуты - Для начинающих - Комментарии - Пробелы @@ -283,7 +283,7 @@ textarea.onkeyup = function(){ <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> так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <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> @@ -677,7 +677,7 @@ textarea.onkeyup = function(){ <p>В HTML символы <code><</code>, <code>></code>, <code>"</code>, <code>'</code> и <code>&</code> являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.</p> -<p>Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с ампресанда (&) и завершается точкой с запятой (;).</p> +<p>Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).</p> <table class="standard-table"> <thead> @@ -736,13 +736,13 @@ textarea.onkeyup = function(){ <!-- <p>А теперь есть!</p> --></pre> -<p>Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.</p> +<p>Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.</p> <p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Подведение_итогов">Подведение итогов</h2> -<p>Вы дошли до конца статьи — надемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!</p> +<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> diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html index 8ca79e314e..65704d6d4c 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -78,7 +78,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.</p> <ul> - <li>Предпочтительнее использовать <code><h1></code> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки распологаются ниже его в иерархии.</li> + <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> @@ -238,7 +238,7 @@ textarea.onkeyup = function(){ <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>когда мы что-то видим, мы знаем, какова его функция.</span> <span>Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти».</span> <span>Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</span></span></p> <p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> @@ -725,7 +725,7 @@ textarea.onkeyup = function(){ <h3 id="Вложенные_списки">Вложенные списки</h3> -<p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список распологался внутри другого.</span> <span>Давайте возьмем второй список из нашего примера рецепта:</span></span></p> +<p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмем второй список из нашего примера рецепта:</span></span></p> <pre class="brush: html notranslate"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html index a90af38b71..c914c8ff27 100644 --- a/files/ru/learn/html/introduction_to_html/index.html +++ b/files/ru/learn/html/introduction_to_html/index.html @@ -22,7 +22,7 @@ original_slug: Learn/HTML/Введение_в_HTML <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> +<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> @@ -38,7 +38,7 @@ original_slug: Learn/HTML/Введение_в_HTML <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> + <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> @@ -55,7 +55,7 @@ original_slug: Learn/HTML/Введение_в_HTML <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> + <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> @@ -64,5 +64,5 @@ original_slug: Learn/HTML/Введение_в_HTML <dl> <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основы интернет-грамотности</a></dt> - <dd>Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле <em>Введение в HTML. </em>Учащиееся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.</dd> + <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 index cb0956fa0b..4638bb8c24 100644 --- 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 @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <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> +<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> @@ -42,7 +42,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <ul> <li>Вы должны корректно структурировать весь документ, включив в него элементы doctype, и {{htmlelement("html")}}, {{htmlelement("head")}} и {{htmlelement("body")}}.</li> <li>Письмо в целом должно быть размечено используя параграфы и заголовки, за исключением следующих пунктов - один заголовок верхнего уровня (начинается на "Re:") и три заголовка второго уровня.</li> - <li>Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответсвующие типы списков.</li> + <li>Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответствующие типы списков.</li> <li>Два адреса должны быть помещены внутри элементов {{htmlelement("address")}}. Каждая строка адреса должна находиться на новой строке, но не быть новым параграфом.</li> </ul> @@ -51,7 +51,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <ul> <li>Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.</li> <li>Четырем датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li> - <li>Первый адрес и первая дата в письме должны иметь аттрибут <code>class</code> со значением <code>"sender-column"</code>; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.</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> 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 index 0dd009c3bc..3f0fe71917 100644 --- 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 @@ -16,7 +16,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <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> + <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> @@ -29,7 +29,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <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> +<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> @@ -52,7 +52,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <p>Вам необходимо добавить подходящую обертку для:</p> <ul> - <li>Заголовока</li> + <li>Заголовка</li> <li>Меню навигации</li> <li>Основного содержимого</li> <li>Приветственного текста</li> diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 9563f7edbe..01a807747e 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -71,7 +71,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <h2 id="Название_страницы_title">Название страницы (title)</h2> -<p>Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда назвают заголовком страницы. Но это разные вещи!</p> +<p>Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда называют заголовком страницы. Но это разные вещи!</p> <ul> <li>Элемент {{htmlelement("h1")}} виден на странице, открытой в браузере, — его используют <strong>один раз на странице</strong>, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.</li> @@ -110,7 +110,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <pre class="brush: html notranslate"><meta charset="utf-8"></pre> -<p>В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . <code>utf-8</code> — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницов, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:</p> +<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> @@ -176,7 +176,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p> -<p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метеданных. В исходном коде MDN Web Docs вы можете найти строки:</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 предоставляет @@ -185,7 +185,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML продуктах 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>Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку 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> @@ -225,7 +225,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <h2 id="Подключение_CSS_и_JavaScript">Подключение CSS и JavaScript</h2> -<p>Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связянные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .</p> +<p>Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .</p> <ul> <li> diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 9e6eb3707e..3d241796d9 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -20,7 +20,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi </tr> <tr> <th scope="row">Цель:</th> - <td>Изучить как встроить SVG (векторное) изображение на вебстраницу.</td> + <td>Изучить как встроить SVG (векторное) изображение на веб-страницу.</td> </tr> </tbody> </table> @@ -47,14 +47,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> !</p> +<p><strong>Примечание</strong>: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> !</p> </div> <p>Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.</p> <h2 id="Что_такое_SVG">Что такое SVG?</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (примение маски к изображению.)</p> +<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)</p> <p>В качестве простого примера, следующий код создает круг и прямоугольник:</p> @@ -134,7 +134,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi background<code>-image: url("image.svg"); background-size: contain;</code></pre> -<p>Подобно методу <code><img></code>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p> +<p>Подобно методу <code><img></code>, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p> <p>Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">данная статья укажет вам верное направление</a>.</p> @@ -189,7 +189,7 @@ background-size: contain;</code></pre> <h2 id="Активное_изучение_поиграйте_с_SVG">Активное изучение: поиграйте с SVG</h2> -<p>В этом разделе ативного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в областе <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p> +<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p> <p>Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку <em>Reset</em>.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index 3bf7b57393..3dc16ecfd2 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p> <div class="note"> -<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адресса.</p> +<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адреса.</p> </div> <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> @@ -49,10 +49,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> -<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> +<p>Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> <div class="warning"> -<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:</p> +<p><strong>Внимание:</strong> Большинство изображений защищены. Не отображайте изображения на вашем сайте пока:</p> <ul> <li>вы не будете владеть изображением</li> @@ -112,7 +112,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <h3 id="Ширина_и_высота">Ширина и высота</h3> -<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> +<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -126,7 +126,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Это хорошая практика, в результате страница загрузится быстрее и более гладко.</p> -<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> +<p>Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнетесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.</p> <div class="note"> <p><strong>Примечание</strong>: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого <a href="/ru/docs/Learn/CSS">CSS</a>.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index d3233346a2..8cbd9191df 100644 --- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -35,7 +35,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <h2 id="Описание_проекта">Описание проекта</h2> -<p>В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> +<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> <h3 id="Подготовка_изображений">Подготовка изображений</h3> @@ -51,7 +51,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p>Вместе с <code>mdn.svg</code>, эти изображения будут иконками для ссылок на другие ресурсы внутри секции <code>further-info</code>. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и <code>index.html</code>.</p> -<p>Затем создайте фоновую версию <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p> +<p>Затем создайте фоновую версию <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p> <div class="note"> <p><strong>Note</strong>: Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. <a href="https://tinypng.com/">tinypng.com</a> - отличный сервис для этого.</p> @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p>Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.</p> -<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацей">Добавление отзывчивых изображений к ссылкам с доп. информацей</h3> +<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацией">Добавление отзывчивых изображений к ссылкам с доп. информацией</h3> <p>Внутри {{htmlelement("div")}} с классом <code>further-info</code> вы найдёте четыре элемента {{htmlelement("a")}} — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index 7ad838ef1b..7d32a65685 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -355,7 +355,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраиваний стороннего контента, помимо встроенных карт и видео на своих страницах.</p> +<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p> <p>Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index b65ec750e1..d08e65fc01 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -107,9 +107,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <li>Загрузит изображение из списка из <code>srcset</code>, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. </li> </ol> -<p>И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие <code>(max-width: 480px)</code> будет истинно, следовательно, будет выбран слот <code>440px</code>, тогда будет загружено изображение <code>elva-fairy-480w.jpg</code>, так как свойство ширины (<code>480w</code>) наиболее близко значение <code>440px</code>. Условно, изоображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.</p> +<p>И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие <code>(max-width: 480px)</code> будет истинно, следовательно, будет выбран слот <code>440px</code>, тогда будет загружено изображение <code>elva-fairy-480w.jpg</code>, так как свойство ширины (<code>480w</code>) наиболее близко значение <code>440px</code>. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.</p> -<p>Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.</p> +<p>Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.</p> <div class="note"> <p><strong>Note</strong>: В описании элемента {{htmlelement("head")}} вы найдёте строку <code><meta name="viewport" content="width=device-width"></code>: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)</p> @@ -129,7 +129,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <h3 id="Переключения_разрешений_Одинаковый_размер_разные_разрешения">Переключения разрешений: Одинаковый размер, разные разрешения</h3> -<p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дисриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> +<p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дескриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> <pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, @@ -137,13 +137,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> </pre> -<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называмое CSS-пикселями):</p> +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):</p> <pre class="brush: css notranslate">img { width: 320px; }</pre> -<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p> +<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p> <h3 id="Художественное_оформление">Художественное оформление</h3> @@ -153,7 +153,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> -<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождаении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> +<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> <pre class="brush: html notranslate"><picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> @@ -163,8 +163,8 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images </pre> <ul> - <li>Элемент <code><source></code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий опредяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code><source></code>. Если ширина составит 800px и более — второго.</li> - <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code><img></code> выше, <code><source></code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображниями. Так вы можете не только поместить группу изображений внутри элемента <code><picture></code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li> + <li>Элемент <code><source></code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code><source></code>. Если ширина составит 800px и более — второго.</li> + <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code><img></code> выше, <code><source></code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code><picture></code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li> <li>Вы всегда должны использовать элемент <code><img></code>, с <code>src</code> и <code>alt</code>, прямо перед <code></picture></code>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <code><source>)</code> или браузер не поддерживает элемент <code><picture></code>.</li> </ul> @@ -173,12 +173,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Вам следует использовать атрибут <code>media</code> только при художественном оформлении; когда вы используюте <code>media</code>, не применяйте медиа-условия с атрибутом <code>sizes</code>.</p> +<p><strong>Примечание</strong>: Вам следует использовать атрибут <code>media</code> только при художественном оформлении; когда вы используете <code>media</code>, не применяйте медиа-условия с атрибутом <code>sizes</code>.</p> </div> <h3 id="Почему_это_нельзя_сделать_посредством_CSS_и_JavaScript">Почему это нельзя сделать посредством CSS и JavaScript?</h3> -<p>Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решeния, как <code>srcset</code>. Например, вы не могли бы загрузить элемент <code><img></code>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.</p> +<p>Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как <code>srcset</code>. Например, вы не могли бы загрузить элемент <code><img></code>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.</p> <ul> </ul> @@ -210,7 +210,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <li>Напишите простую HTML-разметку.</li> <li>Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).</li> <li>Используйте элемент <code><picture> </code>для работы с художественно оформленной картинкой.</li> - <li>Обозначьте несколько разных размеров для этой картикни.</li> + <li>Обозначьте несколько разных размеров для этой картинки.</li> <li>Используйте <code>srcset</code>/<code>size</code> для описания переключения при смене размеров viewport'а</li> </ol> @@ -227,7 +227,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <li><strong>Переключение разрешений</strong>: Проблема, при которой вы хотите использовать <span class="tlid-translation translation" lang="ru"><span title="">файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях</span></span>, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторной графики</a> (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.</li> </ul> -<p>Это так же подводит нас к окончанию целого модуля <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">"Мультимедия и встраивание"</a>! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше <span class="tlid-translation translation" lang="ru"><span title="">- это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!</span></span></p> +<p>Это так же подводит нас к окончанию целого модуля <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">"Мультимедиа и встраивание"</a>! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше <span class="tlid-translation translation" lang="ru"><span title="">- это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!</span></span></p> <h2 id="Посмотрите_так_же">Посмотрите так же</h2> diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index e37ffaabd4..84751810da 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -86,7 +86,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> <div class="note"> -<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> +<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> </div> <p>Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.</p> diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index 6314fedda1..e578557eb7 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -46,7 +46,7 @@ translation_of: Learn/HTML/Tables/Advanced <ol> <li>Откройте расписание занятий школьного учителя по языку в конце статьи <a href="/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML таблицы основы</a>, или сделайте копию нашего <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> файла.</li> - <li>Добвьте подходящий заголовок к таблице.</li> + <li>Добавьте подходящий заголовок к таблице.</li> <li>Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.</li> </ol> @@ -58,18 +58,18 @@ translation_of: Learn/HTML/Tables/Advanced <p>Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и {{htmlelement("tbody")}}, которые позволяют вам разметить header, footer и body секции таблицы.</p> -<p>Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отбражаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.</p> +<p>Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.</p> <p>Использование:</p> <ul> <li>Элементом <code><thead></code> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете {{htmlelement("col")}}/{{htmlelement("colgroup")}} элемент, тогда заголовок должен находиться ниже его.</li> - <li>Элементом <code><tfoot></code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отбражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).</li> + <li>Элементом <code><tfoot></code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).</li> <li>Элементом <code><tbody></code> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).</li> </ul> <div class="note"> -<p><strong>Примечание</strong>: <code><tbody></code> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code><tbody></code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включениии, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.</p> +<p><strong>Примечание</strong>: <code><tbody></code> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code><tbody></code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.</p> </div> <h3 id="Упражнение_Добавление_структуры_таблицы">Упражнение: Добавление структуры таблицы</h3> @@ -80,7 +80,7 @@ translation_of: Learn/HTML/Tables/Advanced <li>В первую очередь, сделайте копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> в новой папке.</li> <li>Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.</li> <li>Поместите очевидную строку заголовка внутрь <code><thead></code> элемента, строку "SUM" внутрь <code><tfoot></code> элемента и оставшийся контент внутрь <code><tbody></code> элемента.</li> - <li>Сохраните, презагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> + <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li> <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code><head></code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: <pre class="brush: css notranslate">tbody { @@ -349,13 +349,13 @@ tfoot { </tbody> </table> -<p>Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации програмными.</p> +<p>Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.</p> <p>В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.</p> <h3 class="attTitle" id="Использование_заголовков_столбцов_и_строк">Использование заголовков столбцов и строк</h3> -<p>Скринридеры будут определять все заголовки и использовать их создавая програмные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.</p> +<p>Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.</p> <p>Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Добавление заголовков с помощью элемента <th></a>.</p> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index a393a80a84..15f766186a 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -117,10 +117,10 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li><strong>Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Скринридеры (Screenreaders</a>), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.</li> <li><strong>Таблицы создают путаницу тегов</strong>: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li> - <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходими принимать дополнительные меры.</li> + <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li> </ol> -<h2 id="Упражение_Ваша_первая_таблица">Упражение: Ваша первая таблица</h2> +<h2 id="Упражнение_Ваша_первая_таблица">Упражнение: Ваша первая таблица</h2> <p>Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.</p> @@ -290,7 +290,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2> -<p>Иногда нам нужно, чтобы ячейки распротранялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> +<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> <p>Исходная разметка выглядит так:</p> @@ -511,7 +511,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Заново создайте таблицу, проделав указанные ниже действия.</p> <ol> - <li>Сначала создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> в новой папке на вашем копьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.</li> + <li>Сначала создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.</li> <li>Добавьте элемент <code><colgroup></code> вверху таблицы, сразу же под тегом <code><table></code>, куда вы сможете вставлять элементы <code><col></code>.</li> <li>Первые два столбца надо оставить без стиля..</li> <li>Добавьте цвет фона для третьего столбца. Значением атрибута <code>style</code> будет <code>background-color:#97DB9A;</code></li> diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.html index ef5ff547c0..b7e8ab227d 100644 --- a/files/ru/learn/html/tables/structuring_planet_data/index.html +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -31,14 +31,14 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <p>Для того, чтобы начать аттестацию, скопируйте <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> в новую директорию на вашем компьютере.</p> <div class="note"> -<p><strong>Примечание</strong>: В качестве альтарнативы, вы можете использовать такие сайты, как <a class="external external-icon" href="https://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <code><script></code>/<code><style></code> элементы в HTML страницу.</p> +<p><strong>Примечание</strong>: В качестве альтернативы, вы можете использовать такие сайты, как <a class="external external-icon" href="https://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <code><script></code>/<code><style></code> элементы в HTML страницу.</p> </div> <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> <p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.</p> -<p>Готовая таблица должна выглядить так:</p> +<p>Готовая таблица должна выглядеть так:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> @@ -49,12 +49,12 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <h2 id="Шаги_для_завершения">Шаги для завершения</h2> -<p>Следующие шаги опистывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.</p> +<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.</p> <ol> - <li>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтинул (footer) для этого примера.</li> + <li>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li> <li>Добавьте предоставленную подпись к вашей таблице ("Сaption" в конце <code>planets-data.txt</code>).</li> - <li>Добавьте строку в заголовок таблицы, содержащуюю все заголовки столбцов.</li> + <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li> <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li> <li>Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li> |