diff options
| author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
| commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
| tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/learn/html | |
| parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
| download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip | |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/learn/html')
25 files changed, 235 insertions, 235 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 2c51073d15..5cbf27d355 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 @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages --- <p>Эти советы основаны на общих знаниях и экспериментах.</p> -<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p> +<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объёмом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p> <p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p> @@ -16,7 +16,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p> -<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p> +<p>Уменьшение веса страницы за счёт устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p> <p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p> @@ -24,15 +24,15 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p> -<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p> +<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменён с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p> -<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p> +<p>Если вы часто используете фоновые изображения в своём CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p> <h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3> -<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p> +<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединённых Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p> -<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p> +<p>CDN - это географически распределённая сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p> <p>Дальнейшее чтение:</p> @@ -50,7 +50,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p> -<p>В частности, обратите внимание на заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p> +<p>В частности, обратите внимание на заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передаётся информация о файле, который он хочет загрузить, например, когда он был последний раз изменён. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p> <p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p> @@ -64,9 +64,9 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3> -<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p> +<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает ещё более быстрый отклик для пользователя.</p> -<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p> +<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведёт к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p> <h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3> @@ -78,7 +78,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p> -<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p> +<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьёзными ошибками разметки</p> <h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3> @@ -136,7 +136,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p> -<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p> +<p>При этом страница может перестать отображаться, пока JavaScript все ещё загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p> <p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p> diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html index c4f9f46583..79ecb8bac7 100644 --- a/files/ru/learn/html/howto/index.html +++ b/files/ru/learn/html/howto/index.html @@ -77,13 +77,13 @@ original_slug: Learn/HTML/Рецепты <h2 id="Необычные_или_продвинутые_проблемы">Необычные или продвинутые проблемы</h2> -<p>Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространенными случаями использования, с которыми вы можете столкнуться:</p> +<p>Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространёнными случаями использования, с которыми вы можете столкнуться:</p> <div class="column-container"> <div class="column-half"> <h3 id="Формы">Формы</h3> -<p>Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвященное руководство. Вот где вы должны начать:</p> +<p>Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:</p> <ul> <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Как создать простую Веб-форму</a></li> diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.html index 0727a2b8bd..724e99ac8a 100644 --- a/files/ru/learn/html/index.html +++ b/files/ru/learn/html/index.html @@ -19,7 +19,7 @@ translation_of: Learn/HTML <h2 id="Путь_обучения_(образовательная_траектория)">Путь обучения (образовательная траектория)</h2> -<p>В идеале вы должны начать свое учебное путешествие с изучения HTML. Начните с прочтения раздела <a href="/ru/docs/Web/Guide/HTML/Introduction">"Введение в HTML"</a>. Затем вы можете перейти к изучению более продвинутых тем, таких как:</p> +<p>В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела <a href="/ru/docs/Web/Guide/HTML/Introduction">"Введение в HTML"</a>. Затем вы можете перейти к изучению более продвинутых тем, таких как:</p> <ul> <li><a href="/ru/docs/Learn/CSS">"CSS (Каскадные таблицы стилей)"</a>, и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).</li> @@ -36,19 +36,19 @@ translation_of: Learn/HTML <dl> <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a></dt> - <dd>Этот модуль дает основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.</dd> + <dd>Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.</dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a></dt> <dd>В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.</dd> <dt> </dt> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Tables">HTML Таблицы</a></dt> <dd>Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms">HTML Формы</a></dt> - <dd>Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнете с создания частей форм на стороне клиента.</dd> + <dd>Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.</dd> </dl> <h2 id="Решение_общих_HTML_задач">Решение общих HTML задач</h2> -<p><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения общих задач</a> содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространенных проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.</p> +<p><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения общих задач</a> содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.</p> <h2 id="Смотрите_также">Смотрите также:</h2> 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 3e05c04ea4..4f401ed57b 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 @@ -1,5 +1,5 @@ --- -title: Углубленное форматирование текста +title: Углублённое форматирование текста slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - Beginner @@ -215,9 +215,9 @@ textarea.onkeyup = function(){ <h3 id="Блочные_цитаты">Блочные цитаты</h3> -<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть ее внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p> +<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p> -<p class="syntaxbox">Например, следующая разметка берется из страницы элемента MDN <code><strong><blockquote></strong></code>:</p> +<p class="syntaxbox">Например, следующая разметка берётся из страницы элемента MDN <code><strong><blockquote></strong></code>:</p> <pre class="brush: html notranslate"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p></pre> @@ -241,7 +241,7 @@ Quotation Element</em>) указывает на то, что заключ <pre class="brush: html notranslate"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p></pre> -<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключенный в кавычки для обозначения цитаты, например:</p> +<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p> <p>Элемент цитирования — <code><q></code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p> @@ -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> @@ -560,7 +560,7 @@ textarea.onkeyup = function(){ <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> </address></pre> -<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдет:</p> +<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p> <pre class="brush: html notranslate"><address> <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p> @@ -570,7 +570,7 @@ textarea.onkeyup = function(){ <p>Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.</p> -<p>Приведем пример:</p> +<p>Приведём пример:</p> <pre class="brush: html notranslate"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> <p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> @@ -591,8 +591,8 @@ textarea.onkeyup = function(){ <ul> <li>{{htmlelement("code")}}: Для разметки общих частей компьютерного кода.</li> <li>{{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <code><pre></pre></code>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.</li> - <li>{{htmlelement("var")}}: Для конкретной маркировки имен переменных.</li> - <li>{{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введенного в компьютер.</li> + <li>{{htmlelement("var")}}: Для конкретной маркировки имён переменных.</li> + <li>{{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введённого в компьютер.</li> <li>{{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.</li> </ul> @@ -615,7 +615,7 @@ para.onclick = function() { <samp>PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> -<p>Вышеприведенный код будет выглядеть так:</p> +<p>Вышеприведённый код будет выглядеть так:</p> <p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p> @@ -640,7 +640,7 @@ para.onclick = function() { <p>Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.</p> -<p>В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> +<p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> <pre class="brush: html notranslate"><!-- Стандартная дата --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>> @@ -657,11 +657,11 @@ para.onclick = function() { <!-- Дата и время со смещением по часовому поясу --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 Января 2020, — это 8.30pm во Франции.</<span class="pl-ent">time</span>> <!-- Вызов номера недели --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-W04<span class="pl-pds">"</span></span>>Четвертая неделя 2020</<span class="pl-ent">time</span>></pre> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-W04<span class="pl-pds">"</span></span>>Четвёртая неделя 2020</<span class="pl-ent">time</span>></pre> <h2 id="Заключение">Заключение</h2> -<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнетесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p> +<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p> <p>{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> @@ -672,7 +672,7 @@ para.onclick = function() { <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 6c1090bd2e..67f1ba48b7 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 @@ -74,7 +74,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla</a>.</p> <div class="note"> -<p><strong>Примечание</strong>: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить ее таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.</p> +<p><strong>Примечание</strong>: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.</p> </div> <h3 id="Активное_изучение_создаём_собственную_ссылку">Активное изучение: создаём собственную ссылку</h3> @@ -109,7 +109,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> -<p><strong>Корень</strong> структуры — каталог <code>creating-hyperlinks</code>. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — <code>index.html</code> и <code>contacts.html</code>. На настоящем веб-сайте <code>index.html</code> был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).</p> +<p><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> @@ -145,7 +145,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h3 id="Фрагменты_документа">Фрагменты документа</h3> -<p>Можно ссылаться на определенную часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> +<p>Можно ссылаться на определённую часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> <pre class="brush: html notranslate"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> @@ -164,7 +164,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h3 id="Абсолютные_и_относительные_URL-адреса">Абсолютные и относительные URL-адреса</h3> -<p>Два понятия, с которыми вы столкнетесь в Интернете, — это <strong>абсолютный URL</strong> и <strong>относительный URL</strong><strong>:</strong></p> +<p>Два понятия, с которыми вы столкнётесь в Интернете, — это <strong>абсолютный URL</strong> и <strong>относительный URL</strong><strong>:</strong></p> <dl> <dt><strong>Абсолютный URL</strong></dt> @@ -189,14 +189,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <ul> </ul> -<h3 id="Используйте_четкие_формулировки_описания_ссылок">Используйте четкие формулировки описания ссылок</h3> +<h3 id="Используйте_чёткие_формулировки_описания_ссылок">Используйте чёткие формулировки описания ссылок</h3> <p>На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки <em>доступными </em>для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:</p> <ul> <li>Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.</li> - <li>Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведет ссылка.</li> - <li>Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведет ссылка.</li> + <li>Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведёт ссылка.</li> + <li>Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведёт ссылка.</li> </ul> <p>Взгляните на этот пример:</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> @@ -245,7 +245,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p> <pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> - Скачать отчет о продажах (PDF, 10MB) + Скачать отчёт о продажах (PDF, 10MB) </a></p> <p><a href="http://www.example.com/video-stream/"> @@ -256,9 +256,9 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс Играть в гонки (необходим Flash) </a></p></pre> -<h3 id="Используйте_атрибут_download_когда_создаете_ссылку">Используйте атрибут download, когда создаете ссылку</h3> +<h3 id="Используйте_атрибут_download_когда_создаёте_ссылку">Используйте атрибут download, когда создаёте ссылку</h3> -<p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведем пример ссылки для загрузки браузера Firefox 39:</p> +<p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:</p> <pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> @@ -267,7 +267,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h2 id="Активное_изучение_создание_меню_навигации">Активное изучение: создание меню навигации</h2> -<p>Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространенных способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создается впечатление, что вы остаетесь в одном месте: меню остается на месте, а контент меняется.</p> +<p>Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.</p> <p>Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a>):</p> @@ -281,10 +281,10 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Что делать:</p> <ol> - <li>Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.</li> + <li>Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.</li> <li>Создайте ссылки каждому элементу списка, ведущие на эти страницы.</li> <li>Скопируйте созданное меню в каждую страницу.</li> - <li>На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.</li> + <li>На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.</li> </ol> <p>Когда закончите задание, посмотрите, как это должно выглядеть:</p> @@ -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> @@ -345,7 +345,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 e80ec52b6d..0a64f58205 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 @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <h2 id="Отладка_—_это_не_страшно">Отладка — это не страшно</h2> -<p>Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке <a href="https://www.rust-lang.org/">Rust</a>, компилятор укажет на ошибку:</p> +<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> @@ -43,7 +43,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <h3 id="Толерантный_код">Толерантный код</h3> -<p>Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:</p> +<p>Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнётесь:</p> <ul> <li><strong>Синтаксические ошибки (Syntax errors)</strong>: Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.</li> @@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li>Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): <ul> <li>Параграфы и элементы списка получены с закрывающими тегами.</li> - <li>Было неочевидно, где элемент <code><strong></code> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причем до самого низа документа!</li> + <li>Было неочевидно, где элемент <code><strong></code> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!</li> <li>Некорректная вложенность была исправлена браузером следующим образом: <pre class="brush: html"><strong>strong <em>strong emphasised?</em> @@ -115,7 +115,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <p>Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?</p> -<p>Лучше всего проверить страницу в <a href="https://validator.w3.org/">сервисе валидации разметки</a>. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчет по ошибкам в нем.</p> +<p>Лучше всего проверить страницу в <a href="https://validator.w3.org/">сервисе валидации разметки</a>. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчёт по ошибкам в нем.</p> <p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> @@ -138,10 +138,10 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <h4 id="Работа_с_сообщениями_об_ошибках">Работа с сообщениями об ошибках</h4> -<p>Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдемся по всем ошибкам и разберем, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.</p> +<p>Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдёмся по всем ошибкам и разберём, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.</p> <ul> - <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдете нужное место.</li> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдёте нужное место.</li> <li>"Unclosed element <code>strong</code>": Это очень простая ошибка — элемент {{htmlelement("strong")}} не закрыт, и сообщение указывает прямо на открывающий тег.</li> <li>"End tag <code>strong</code> violates nesting rules": Элемент неправильно вложен — на этом уровне нет парного открывающего тега.</li> <li>"End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки — скорее всего, проблема рядом с ней.</li> @@ -155,7 +155,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li>"Unclosed element <code>ul</code>": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.</li> </ul> -<p>Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ еще раз. Иногда одна ошибка ломает большую часть документа.</p> +<p>Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ ещё раз. Иногда одна ошибка ломает большую часть документа.</p> <p><span>Когда вы увидите эту надпись, в вашем документе больше нет ошибок:</span></p> @@ -174,7 +174,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 7128fd4462..31119efc4a 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 @@ -39,11 +39,11 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <dt>Заголовок (колонтитул)</dt> <dd>Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.</dd> <dt>Навигационное меню</dt> - <dd>Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает <a href="/en-US/docs/Learn/Accessibility">доступность</a>, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.</dd> + <dd>Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает <a href="/en-US/docs/Learn/Accessibility">доступность</a>, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.</dd> <dt>Основное содержимое</dt> - <dd>Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!</dd> + <dd>Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!</dd> <dt>Боковая панель</dt> - <dd>Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.</dd> + <dd>Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.</dd> <dt>Нижний колонтитул (футер)</dt> <dd>Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.</dd> </dl> @@ -56,7 +56,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и <strong>использовать правильный элемент для правильной работы</strong>. </p> -<p>Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?</p> +<p>Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?</p> <div class="note"> <p><strong>Заметка</strong>: Люди с дальтонизмом составляют около <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% мирового населения</a>. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 миллионов таких людей</a>, а общая численность населения составляла <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">около 7 миллиардов</a>).</p> @@ -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> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <li><a href="#">Контакты</a></li> </ul> - <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. --> + <!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту. --> <form> <input type="search" name="q" placeholder="Search query"> @@ -162,7 +162,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум </body> </html></pre> -<p>Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.</p> +<p>Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.</p> <h2 id="Подробнее_об_элементах_HTML_макета">Подробнее об элементах HTML макета</h2> @@ -178,7 +178,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <li>{{HTMLElement('footer')}} представляет собой группу конечного контента для страницы.</li> </ul> -<h3 id="Несемантические_обертки">Несемантические обертки</h3> +<h3 id="Несемантические_обёртки">Несемантические обёртки</h3> <p>Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.</p> @@ -216,7 +216,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>Два элемента, которые Вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:</p> -<p><code><br></code> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> +<p><code><br></code> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> <pre class="brush: html notranslate"><p>Жила-была девчушка Нелл,<br> Любившая писать HTML:<br> @@ -230,7 +230,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум Её семантика ужасна была —<br> Она и сама прочитать ничего не могла.</p> -<p><code><hr></code> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> +<p><code><hr></code> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> <pre class="notranslate"><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> <hr> @@ -249,7 +249,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <ol> <li><span class="tlid-translation translation">Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц</span>. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> - <li>Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> <li>Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> <li>Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> <li>Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.</li> @@ -284,7 +284,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 9fe76fed12..cfd2d251bb 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 @@ -36,7 +36,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <h2 id="Что_такое_HTML">Что такое HTML?</h2> -<p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> +<p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> <pre class="notranslate">Мой кот очень сердитый</pre> @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <h3 id="Активное_изучение_создание_вашего_первого_HTML_элемента">Активное изучение: создание вашего первого HTML элемента</h3> -<p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув ее тегами <code><em></code> и <code></em></code> (вставьте <code><em></code> перед строкой, чтобы <em>указать начало элемента</em>, и <code></em></code> после нее, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p> +<p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув её тегами <code><em></code> и <code></em></code> (вставьте <code><em></code> перед строкой, чтобы <em>указать начало элемента</em>, и <code></em></code> после неё, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p> <p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p> @@ -220,7 +220,7 @@ textarea.onkeyup = function(){ <pre class="brush: html notranslate"><em>Первый</em><em>второй</em><em>третий</em> -<p>четвертый</p><p>пятый</p><p>шестой</p> +<p>четвёртый</p><p>пятый</p><p>шестой</p> </pre> <p>{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS-оформлением</a> по умолчанию, которое браузеры применяют к абзацам).</p> @@ -232,7 +232,7 @@ textarea.onkeyup = function(){ </div> <div class="note"> -<p><strong>Примечание</strong>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типами отображения в CSS</a>. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.</p> +<p><strong>Примечание</strong>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типами отображения в CSS</a>. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.</p> </div> <div class="note"> @@ -268,7 +268,7 @@ textarea.onkeyup = function(){ <ol> <li>Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).</li> <li>Имя атрибута и следующий за ним знак равенства.</li> - <li>Значение атрибута, заключенное в кавычки.</li> + <li>Значение атрибута, заключённое в кавычки.</li> </ol> <h3 id="Активное_изучение_Добавление_атрибутов_в_элемент">Активное изучение: Добавление атрибутов в элемент</h3> @@ -279,7 +279,7 @@ textarea.onkeyup = function(){ <ul> <li><code>href</code>: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code>: Атрибут <code>title</code> описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, <code>title="The Mozilla homepage"</code>. Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.</li> + <li><code>title</code>: Атрибут <code>title</code> описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, <code>title="The Mozilla homepage"</code>. Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.</li> <li><code>target</code>: Атрибут <code>target</code> определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, <code>target="_blank"</code> отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.</li> </ul> @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ <h3 id="Boolean_attributes" class="hidden">Boolean attributes</h3> -<p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> +<p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> <pre class="notranslate"><input type="text" disabled="disabled"></pre> @@ -431,7 +431,7 @@ textarea.onkeyup = function(){ <h3 id="Omitting_quotes_around_attribute_values" class="hidden">Omitting quotes around attribute values</h3> -<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> +<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> <pre class="brush: html notranslate"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> @@ -459,7 +459,7 @@ textarea.onkeyup = function(){ <pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> -<p>Если вы используете один тип кавычек в своем HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p> +<p>Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p> <pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> @@ -745,7 +745,7 @@ textarea.onkeyup = function(){ <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> +<p><strong>Примечание</strong>: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.</p> </div> <h2 id="Смотрите_также">Смотрите также</h2> @@ -765,7 +765,7 @@ textarea.onkeyup = function(){ <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 1adc27c159..d27868014a 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 @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals </tr> <tr> <th scope="row">Задача:</th> - <td>Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td> + <td>Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td> </tr> </tbody> </table> @@ -42,13 +42,13 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> -<p>Упорядоченный контент делает чтение более легким и приятным.</p> +<p>Упорядоченный контент делает чтение более лёгким и приятным.</p> -<p>В HTML каждый абзац заключен в элемент {{htmlelement("p")}}, подобно:</p> +<p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p> <pre class="brush: html notranslate"><p>Я параграф, да, это я.</p></pre> -<p>Каждый заголовок заключен в элемент заголовка {{htmlelement("h1")}}:</p> +<p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p> <pre class="brush: html notranslate"><h1>Я заголовок истории.</h1></pre> @@ -62,9 +62,9 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p> Крис Миллс </ p> -<h2> Глава 1: Темная ночь </ h2> +<h2> Глава 1: Тёмная ночь </ h2> -<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> +<p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> <h2> Глава 2: Вечное молчание </ h2> @@ -79,15 +79,15 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <ul> <li>Предпочтительнее использовать <code><h1></code> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.</li> - <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <code><h3></code> для создания подзаголовков при одновременном использовании <code><h2></code> для представления под-подзаголовков — это не имеет смысла и приведет к странным результатам.</li> - <li><span id="result_box" lang="ru"><span>Из шести доступных уровней заголовка вы должны стремиться использовать не более трех на странице, если только вы не чувствуете, что это необходимо.</span></span> <span id="result_box" lang="ru"><span>Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации.</span></span> <span id="result_box" lang="ru"><span>В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</span></span></li> + <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <code><h3></code> для создания подзаголовков при одновременном использовании <code><h2></code> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.</li> + <li><span id="result_box" lang="ru"><span>Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо.</span></span> <span id="result_box" lang="ru"><span>Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации.</span></span> <span id="result_box" lang="ru"><span>В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</span></span></li> </ul> <h3 id="Зачем_нам_необходима_структура">Зачем нам необходима структура?</h3> -<p><span id="result_box" lang="ru"><span>Чтобы ответить на этот вопрос, давайте посмотрим на </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> —<span lang="ru"><span> отправную точку нашего примера для этой статьи (хороший рецепт хумуса).</span></span> <span id="result_box" lang="ru"><span>Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже.</span></span> <span id="result_box" lang="ru"><span>Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).</span></span></p> +<p><span id="result_box" lang="ru"><span>Чтобы ответить на этот вопрос, давайте посмотрим на </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> —<span lang="ru"><span> отправную точку нашего примера для этой статьи (хороший рецепт хумуса).</span></span> <span id="result_box" lang="ru"><span>Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже.</span></span> <span id="result_box" lang="ru"><span>Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).</span></span></p> -<p><span id="result_box" lang="ru"><span>Однако, когда вы откроете документ в своем браузере, вы увидите, что текст выглядит как один большой кусок!</span></span></p> +<p><span id="result_box" lang="ru"><span>Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!</span></span></p> <p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p> @@ -238,7 +238,7 @@ textarea.onkeyup = function(){ <h3 id="Почему_мы_нуждаемся_в_семантике">Почему мы нуждаемся в семантике?</h3> -<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>когда мы что-то видим, мы знаем, какова его функция.</span> <span>Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти».</span> <span>Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</span></span></p> <p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> @@ -258,7 +258,7 @@ textarea.onkeyup = function(){ <h3 id="Неупорядоченные">Неупорядоченные</h3> -<p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:</span></span></p> +<p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</span></span></p> <pre class="notranslate">молоко яйца @@ -411,12 +411,12 @@ textarea.onkeyup = function(){ <h3 id="Упорядоченные">Упорядоченные</h3> -<p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:</span></span></p> +<p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</span></span></p> <pre class="notranslate">Двигайтесь до конца дороги Поверните направо -Езжайте прямо через первые два перекрестка с круговым движением -Поверните налево на третьем перекрестке +Езжайте прямо через первые два перекрёстка с круговым движением +Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге</pre> <p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:</span></span></p> @@ -424,8 +424,8 @@ textarea.onkeyup = function(){ <pre class="brush: html notranslate"><ol> <li>Двигайтесь до конца дороги</li> <li>Поверните направо</li> - <li>Езжайте прямо через первые два перекрестка с круговым движением</li> - <li>Поверните налево на третьем перекрестке</li> + <li>Езжайте прямо через первые два перекрёстка с круговым движением</li> + <li>Поверните налево на третьем перекрёстке</li> <li>Школа справа от вас, в 300 метрах вверх по дороге</li> </ol></pre> @@ -444,8 +444,8 @@ textarea.onkeyup = function(){ <textarea id="code" class="input" style="min-height: 200px; width: 95%"></code>Двигайтесь до конца дороги Поверните направо -Езжайте прямо через первые два перекрестка с круговым движением -Поверните налево на третьем перекрестке +Езжайте прямо через первые два перекрёстка с круговым движением +Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге<code></textarea> <div class="playable-buttons"> @@ -517,7 +517,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрестка с круговым движением</li>\n<li>Поверните налево на третьем перекрестке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>'; +var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрёстка с круговым движением</li>\n<li>Поверните налево на третьем перекрёстке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -601,7 +601,7 @@ textarea.onkeyup = function(){ Если вы хотите "грубый" хумус, измельчайте пару минут. Если вам нужен гладкий хумус, измельчайте дольше. - По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдет вам. + По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам. Хранение @@ -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> @@ -757,14 +757,14 @@ textarea.onkeyup = function(){ <h2 id="Акцент_и_важность"><span class="short_text" id="result_box" lang="ru"><span>Акцент и важность</span></span></h2> <div id="gt-res-content"> -<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде.</span> <span>HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.</span></span></div> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде.</span> <span>HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.</span></span></div> <div class="trans-verified-button-small" dir="ltr"></div> </div> <h3 id="Акцент">Акцент</h3> -<p><span id="result_box" lang="ru"><span>Когда мы хотим добавить акцент в разговорный язык, мы подчеркиваем определенные слова, тонко изменяя смысл того, что мы говорим.</span> <span>Точно так же на письменном языке мы склонны подчеркивать слова, выделяя их <em>курсивом</em>.</span> <span>Например, следующие два предложения имеют разные значения.</span></span></p> +<p><span id="result_box" lang="ru"><span>Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим.</span> <span>Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их <em>курсивом</em>.</span> <span>Например, следующие два предложения имеют разные значения.</span></span></p> <p><span class="short_text" id="result_box" lang="ru"><span>Я рад, что ты не опоздал.</span></span></p> @@ -778,7 +778,7 @@ textarea.onkeyup = function(){ <h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3> -<p><span id="result_box" lang="ru"><span>Чтобы подчеркнуть важные слова, мы склонны подчеркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке.</span> <span>Например:</span></span></p> +<p><span id="result_box" lang="ru"><span>Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке.</span> <span>Например:</span></span></p> <p><span id="result_box" lang="ru"><span>Эта жидкость <strong>очень токсична</strong>.</span><br> <br> @@ -928,23 +928,23 @@ textarea.onkeyup = function(){ <h3 id="Курсив_жирный_шрифт_подчеркивание...">Курсив, жирный шрифт, подчеркивание...</h3> <div id="gt-res-content"> -<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике.</span> <span>Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее.</span> <span>Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался</span></span><span lang="ru"><span>, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчеркнутый</u> текст.</span> <span>Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</span></span></div> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике.</span> <span>Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее.</span> <span>Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался</span></span><span lang="ru"><span>, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчёркнутый</u> текст.</span> <span>Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</span></span></div> <div class="trans-verified-button-small" dir="ltr"></div> </div> <p><span id="result_box" lang="ru"><span>HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.</span></span></p> -<p><span id="result_box" lang="ru"><span class="alt-edited">Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</span></span></p> +<p><span id="result_box" lang="ru"><span class="alt-edited">Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</span></span></p> <ul> <li>{{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...</li> <li><span id="result_box" lang="ru"><span>{{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...</span></span></li> - <li><span id="result_box" lang="ru"><span>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчеркиванием: имя собственное</span></span><span lang="ru"><span>, орфографическая ошибка ...</span></span></li> + <li><span id="result_box" lang="ru"><span>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное</span></span><span lang="ru"><span>, орфографическая ошибка ...</span></span></li> </ul> <div class="note"> -<p><span id="result_box" lang="ru"><span>Предупреждение о подчеркивании:<strong> люди сильно ассоциируют подчеркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчеркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p> +<p><span id="result_box" lang="ru"><span>Предупреждение о подчёркивании:<strong> люди сильно ассоциируют подчёркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p> </div> <pre class="brush: html notranslate"><!-- Научные наименования --> @@ -987,7 +987,7 @@ textarea.onkeyup = function(){ <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html index c914c8ff27..9d847f1dfe 100644 --- a/files/ru/learn/html/introduction_to_html/index.html +++ b/files/ru/learn/html/introduction_to_html/index.html @@ -41,17 +41,17 @@ original_slug: Learn/HTML/Введение_в_HTML <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> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></dt> <dd>Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></dt> <dd>Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации", "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></dt> - <dd>Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.</dd> + <dd>Писать на HTML хорошо, но что, если что-то идёт не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.</dd> </dl> <h2 id="Оценка">Оценка</h2> -<p>Следующие задания проверят ваше понимание основ HTML, описанных в приведенных выше руководствах.</p> +<p>Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.</p> <dl> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></dt> @@ -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 4638bb8c24..26d593df31 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 @@ -17,7 +17,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <tr> <th scope="row">Знания:</th> <td> - <p>Перед выполнением этого задания вы должны пройти <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>, и <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a>.</p> + <p>Перед выполнением этого задания вы должны пройти <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>, и <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a>.</p> </td> </tr> <tr> @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <ul> <li>Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.</li> - <li>Четырем датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li> + <li>Четырём датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li> <li>Первый адрес и первая дата в письме должны иметь атрибут <code>class</code> со значением <code>"sender-column"</code>; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.</li> <li>Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.</li> <li>Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 10<sup>3</sup> и 10<sup>4 </sup>(степень числа должна быть над числом).</li> @@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 3f0fe71917..f5a62ee916 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 @@ -10,7 +10,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> -<p class="summary">Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придется подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.</p> +<p class="summary">Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.</p> <table class="learn-box standard-table"> <tbody> @@ -21,7 +21,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <tr> <th scope="row">Цель:</th> <td> - <p>Проверить знания структуры веб-страницы и ее перевода в разметку.</p> + <p>Проверить знания структуры веб-страницы и её перевода в разметку.</p> </td> </tr> </tbody> @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <li>Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.</li> </ul> -<p>Вам необходимо добавить подходящую обертку для:</p> +<p>Вам необходимо добавить подходящую обёртку для:</p> <ul> <li>Заголовка</li> @@ -63,7 +63,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <p>Вы также должны:</p> <ul> - <li>Примените предоставленный CSS к странице, добавив еще один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.</li> + <li>Примените предоставленный CSS к странице, добавив ещё один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.</li> </ul> <h2 id="Советы_и_подсказки">Советы и подсказки</h2> @@ -71,7 +71,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <ul> <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).</li> <li>Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.</li> - <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.</li> + <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.</li> <li>Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.</li> </ul> @@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 6c762e94ac..0635ec9342 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 @@ -60,14 +60,14 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML </body> </html></pre> -<p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведенном выше примере <head> совсем небольшой:</p> +<p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере <head> совсем небольшой:</p> <pre class="brush: html notranslate"><head> <meta charset="utf-8"> <title>Моя тестовая страница</title> </head></pre> -<p>Однако на больших страницах блок <head> может быть довольно объемным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью <a href="/ru/docs/Learn/Discover_browser_developer_tools">инструментов разработчика</a>. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.</p> +<p>Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью <a href="/ru/docs/Learn/Discover_browser_developer_tools">инструментов разработчика</a>. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.</p> <h2 id="Название_страницы_title">Название страницы (title)</h2> @@ -174,7 +174,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <h3 id="Другие_виды_метаданных">Другие виды метаданных</h3> -<p>В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p> +<p>В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p> <p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:</p> @@ -187,7 +187,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <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> +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:</p> <pre class="brush: html notranslate"><meta name="twitter:title" content="MDN Web Docs"></pre> @@ -221,7 +221,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении. </p> -<p>Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов.</p> +<p>Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.</p> <h2 id="Подключение_CSS_и_JavaScript">Подключение CSS и JavaScript</h2> @@ -293,7 +293,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> 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 3d241796d9..e6ce44bb9d 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 @@ -26,7 +26,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi </table> <div class="note"> -<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.</p> +<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как её использовать в веб-документах.</p> </div> <h2 id="Что_такое_векторная_графика">Что такое векторная графика?</h2> @@ -34,7 +34,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:</p> <ul> - <li>Растровое изображение задается сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li> + <li>Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li> <li>Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.</li> </ul> @@ -56,7 +56,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <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> +<p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p> <pre class="brush: html notranslate"><svg version="1.1" baseProfile="full" @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Дополнительные преимущества SVG:</p> <ul> - <li>Текст в векторном изображении остается машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li> + <li>Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li> <li>SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.</li> </ul> @@ -99,7 +99,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <h3 id="Быстрый_путь_htmlelementimg">Быстрый путь: {{htmlelement("img")}}</h3> -<p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> +<p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> <pre class="brush: html notranslate"><img src="equilateral.svg" @@ -118,7 +118,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <ul> <li>Вы не можете изменять изображение с помощью JavaScript.</li> - <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своем SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li> + <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li> <li>Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например <code>:focus</code>).</li> </ul> @@ -128,7 +128,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> -<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> +<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> <pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); @@ -140,7 +140,7 @@ background-size: contain;</code></pre> <h3 id="Как_включить_SVG_в_ваш_HTML_код">Как включить SVG в ваш HTML код</h3> -<p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> +<p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> <pre class="brush: html notranslate"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> @@ -150,7 +150,7 @@ background-size: contain;</code></pre> <h4 id="Плюсы_2">Плюсы</h4> <ul> - <li>Вставка вашего SVG путем <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li> + <li>Вставка вашего SVG путём <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li> <li>Вы можете присваивать <code>class</code>-ы и <code>id</code> элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо <span class="tlid-translation translation" lang="ru"><span title="">внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">атрибут представления SVG </a>как свойство CSS.</li> <li><strong>SVG inline </strong>единственный метод, который позволяет вам использовать CSS-взаимодействия (как <code>:focus</code>) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).</li> <li>Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.</li> @@ -178,7 +178,7 @@ background-size: contain;</code></pre> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> -<p>Это - определенно не самый лучший метод для выбора:</p> +<p>Это - определённо не самый лучший метод для выбора:</p> <h4 id="Минусы_3">Минусы</h4> @@ -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> @@ -324,7 +324,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы еще не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p> +<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p> <p>В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.</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 3dc16ecfd2..c9b088742d 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 @@ -60,7 +60,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li> </ul> -<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенное на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> +<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте <code>src</code> ссылку на изображение, размещённое на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> </div> <p>Наш код выше даст нам следующий результат:</p> @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <h3 id="Альтернативный_текст">Альтернативный текст</h3> -<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> +<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p> <pre class="notranslate"><img src="images/dinosaur.jpg" alt="Голова и туловище скелета динозавра; @@ -85,14 +85,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведем несколько примеров:</p> +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведём несколько примеров:</p> <ul> <li>Пользователь с нарушением зрения использует <a href="https://en.wikipedia.org/wiki/Screen_reader">устройство чтения с экрана</a>, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте <code>alt</code> для описания изображения может быть полезно для большинства пользователей.</li> <li>В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).</li> <li>Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, которые вместо изображений отображают текст из атрибута <code>alt</code>.</li> <li>Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута <code>alt</code>.</li> - <li>Если пользователи отключили отображение изображений на странице для уменьшения объема передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li> + <li>Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li> </ul> <p>Что именно вы должны писать в атрибут <code>alt</code>? В первую очередь, это зависит от того, <em>зачем</em> изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:</p> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <ul> <li><strong>Декорация. </strong>Вы должны использовать {{anch ("Фоновые изображения CSS")}} для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.</li> <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> - <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_четкие_формулировки_описания_ссылок">использовать четкие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> + <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_чёткие_формулировки_описания_ссылок">использовать чёткие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого <a href="/ru/docs/Web/CSS/text-shadow">CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> </ul> @@ -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> @@ -143,7 +143,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM height="341" title="A T-Rex on display in the Manchester University Museum"></pre> -<p>Это дает нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:</p> +<p>Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:</p> <p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> @@ -241,7 +241,7 @@ window.addEventListener("load", drawOutput); <p>Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?</p> -<p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> +<p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> <pre class="notranslate"><figure> <img src="images/dinosaur.jpg" @@ -262,7 +262,7 @@ window.addEventListener("load", drawOutput); <p>Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: </p> <ul> - <li>Передает смысл компактным, интуитивно понятным способом.</li> + <li>Передаёт смысл компактным, интуитивно понятным способом.</li> <li>Может использоваться в различных местах страницы.</li> <li>Предоставляет ценную информацию, поддерживающую основной текст.</li> </ul> diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html index 00ef01d21d..ec9a11491f 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html @@ -64,7 +64,7 @@ original_slug: >- <p>Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:</p> <ol> - <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.</li> + <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.</li> <li>Напишите сообщение с просьбой об оценке и / или помощи в <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать: <ul> <li>Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".</li> diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html index 5926902c75..b2aecfbd25 100644 --- a/files/ru/learn/html/multimedia_and_embedding/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/index.html @@ -29,9 +29,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding <p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p> </dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> к <iframe> — другие технологии встраивания</a></dt> - <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.</dd> + <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.</dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> - <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> + <dd>Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt> <dd> <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.</p> @@ -44,7 +44,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dl> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия Mozilla</a></dt> - <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!</dd> + <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!</dd> </dl> <h2 id="Смотри_также">Смотри также</h2> @@ -54,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.</dd> <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt> <dd> - <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> + <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> </dd> </dl> 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 8cbd9191df..bfb1efb19a 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 @@ -30,12 +30,12 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p>Сохраните изображения из папки <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.</p> <div class="note"> -<p><strong>Note</strong>: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p> +<p><strong>Note</strong>: Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p> </div> <h2 id="Описание_проекта">Описание проекта</h2> -<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> +<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> <h3 id="Подготовка_изображений">Подготовка изображений</h3> @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p><strong>Note</strong>: Для проверки правильности работы <code>srcset</code>/<code>sizes</code> , вам нужно загрузить ваш сайт на сервер (используйте <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> </div> -<h3 id="Искусственно_измененная_красная_панда">Искусственно измененная красная панда</h3> +<h3 id="Искусственно_изменённая_красная_панда">Искусственно изменённая красная панда</h3> <p>Внутри элемента {{htmlelement("div")}} с классом <code>red-panda</code>, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.</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 6963f6a873..5baed457cc 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 @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <ol> <li>Сначала перейдите на Youtube и найдите понравившееся вам видео.</li> - <li>Под видео вы найдете кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li> + <li>Под видео вы найдёте кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li> <li>Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> - скопируйте его.</li> <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li> </ol> @@ -53,7 +53,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li> </ol> -<p>Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p> +<p>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> @@ -179,7 +179,7 @@ textarea.onkeyup = function(){ <p>Итак, это было легко и весело, не так ли? Элементы {{htmlelement ("iframe")}} предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью <iframe>.</p> -<p>Есть несколько серьезных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> +<p>Есть несколько серьёзных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> <pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" @@ -193,7 +193,7 @@ textarea.onkeyup = function(){ <dl> <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <dd>Если установлено, <iframe> может быть помещен в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd> + <dd>Если установлено, <iframe> может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd> <dt>{{htmlattrxref('frameborder','iframe')}}</dt> <dd>Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя {{cssxref ('border')}}: none; в {{Glossary ('CSS')}}.</dd> <dt>{{htmlattrxref('src','iframe')}}</dt> @@ -201,7 +201,7 @@ textarea.onkeyup = function(){ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt> <dd>Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.</dd> <dt>Резервный контент</dt> - <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнетесь с таким браузером, который не поддерживает <iframe> в наше время.</dd> + <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнётесь с таким браузером, который не поддерживает <iframe> в наше время.</dd> <dt>{{htmlattrxref('sandbox','iframe')}}</dt> <dd>Этот атрибут, который работает в более современных браузерах, чем остальные функции <iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.</dd> </dl> @@ -212,7 +212,7 @@ textarea.onkeyup = function(){ <h3 id="Проблемы_безопасности">Проблемы безопасности</h3> -<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймете с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнете рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Продолжим...</p> +<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Продолжим...</p> <p>Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe - частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты <iframe>, лучшие из которых мы рассмотрим ниже.</p> @@ -220,7 +220,7 @@ textarea.onkeyup = function(){ <p>{{interwiki('wikipedia','Clickjacking')}} – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.</p> </div> -<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнет стоить Mozilla больших денег.</p> +<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.</p> <h4 id="Используйте_только_при_необходимости">Используйте только при необходимости</h4> @@ -237,8 +237,8 @@ textarea.onkeyup = function(){ <p>{{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. <span id="result_box" lang="ru"><span>Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно</span></span> :</p> <ol> - <li>HTTPS уменьшает вероятность того, что контент был изменен по пути;</li> - <li>HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.</li> + <li>HTTPS уменьшает вероятность того, что контент был изменён по пути;</li> + <li>HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.</li> </ol> <p>Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть <a href="https://letsencrypt.org/">Let's Encrypt</a>, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS <em>во что бы то ни стало</em> вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через <iframe>, доступны через HTTPS - посмотрите URL-адреса внутри <iframe> src при встраивании, например, содержимого из Карт Google или Youtube.</p> @@ -256,7 +256,7 @@ textarea.onkeyup = function(){ <p>Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута <code>sandbox=""</code>) — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы <em>никогда</em> не должны добавлять атрибуты <code>allow-scripts</code> и <code>allow-same-origin</code> в свой <code>sandbox</code> атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .</p> <div class="note"> -<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определенный контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p> +<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p> </div> <h4 id="Настройка_директив_CSP"><span id="result_box" lang="ru"><span>Настройка директив CSP</span></span></h4> @@ -275,7 +275,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span><strong>Примечание</strong>. <strong>Плагин </strong>- это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.</span></span></p> </div> -<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.</p> +<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.</p> <p><span id="result_box" lang="ru"><span>Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:</span></span></p> @@ -343,7 +343,7 @@ textarea.onkeyup = function(){ <h3 id="Дело_против_плагинов"><span class="short_text" id="result_box" lang="ru"><span>Дело против плагинов</span></span></h3> -<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надежнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p> +<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p> <ul> <li><strong>Расширьте свою досягаемость для всех</strong>. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.</li> @@ -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 654c0496b0..3f4ad83e69 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 @@ -33,7 +33,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">посмотреть демо-пример</a> и найти <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">исходный код</a> на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:</p> <ul> - <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остается на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li> + <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li> <li>Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) все равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.</li> <li>Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.</li> </ul> @@ -46,7 +46,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется <strong>resolution switching problem</strong> — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторную графику</a>, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.</p> -<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы четче отображалось. По сути это всё одна задача в разных условиях.</p> +<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.</p> <p>Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. </p> @@ -143,7 +143,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images 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"> @@ -164,7 +164,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <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>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> @@ -185,7 +185,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <h3 id="Смело_используйте_современные_форматы_изображений">Смело используйте современные форматы изображений</h3> -<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p> +<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p> <p><code><picture></code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p> 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 d37ae96622..c6cf6331fd 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 @@ -61,7 +61,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h3 id="Поддержка_нескольких_форматов">Поддержка нескольких форматов</h3> -<p>Присутствует одна проблема с приведенным выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> +<p>Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> <p>Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются <strong>форматами контейнеров</strong>. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.</p> @@ -75,15 +75,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.</li> </ul> -<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощенным контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> +<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> -<p>Еще одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> +<p>Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> <p>Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.</p> <h4 id="Поддержка_медиафайлов_в_браузерах">Поддержка медиафайлов в браузерах</h4> -<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> +<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> <div class="note"> <p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> @@ -93,9 +93,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите <a href="/en-US/docs/Web/Media/Formats/Containers#Choosing_the_right_container">выбор подходящего контейнера</a> для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите <a href="/en-US/docs/Web/Media/Formats/Video_codecs#Выбор_видеокодека">выбор видеокодека</a> и <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">выбор аудиокодека</a> для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.</p> -<p>Еще одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определенных типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</p> +<p>Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</p> -<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновленный пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> +<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновлённый пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> <pre class="brush: html notranslate"><video controls> <source src="rabbit320.mp4" type="video/mp4"> @@ -103,12 +103,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> </video></pre> -<p>Здесь мы изъяли атрибут <code>src</code> из нашего тега <code><video></code>, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдется по элементам <code><source></code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p> +<p>Здесь мы изъяли атрибут <code>src</code> из нашего тега <code><video></code>, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <code><source></code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p> -<p>Каждый элемент <code><source></code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p> +<p>Каждый элемент <code><source></code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p> <div class="note"> -<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространенные {{glossary("MIME type","MIME types")}}.</p> +<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.</p> </div> <h3 id="Другие_параметры_<video>">Другие параметры <video></h3> @@ -136,12 +136,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <dt><strong>{{htmlattrxref("loop","video")}}</strong></dt> <dd>Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.</dd> <dt><strong>{{htmlattrxref("muted","video")}}</strong></dt> - <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.</dd> + <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию.</dd> <dt><strong>{{htmlattrxref("poster","video")}}</strong></dt> <dd>Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.</dd> <dt><strong>{{htmlattrxref("preload","video")}}</strong></dt> <dd> - <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:</p> + <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:</p> <ul> <li><code>"none"</code> не буферизирует файл</li> @@ -151,7 +151,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </dd> </dl> -<p>Вы можете найти приведенный выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнет воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p> +<p>Вы можете найти приведённый выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p> <h3 id="Элемент_<audio>">Элемент <audio> </h3> @@ -178,11 +178,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Он также не поддерживает атрибут <code>poster</code> опять же, из-за отсутствия визуального компонента. </li> </ul> -<p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведенные выше разделы для получения дополнительной информации о них.</p> +<p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведённые выше разделы для получения дополнительной информации о них.</p> <h2 id="Отображение_текстовых_дорожек_к_видео">Отображение текстовых дорожек к видео</h2> -<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:</p> +<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:</p> <ul> <li>У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).</li> @@ -196,11 +196,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><strong><strong>Замечание</strong>: </strong>"Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».</p> </div> -<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:</p> +<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:</p> <dl> <dt><strong>субтитры</strong></dt> - <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесенных в аудио.</dd> + <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.</dd> <dt><strong>титры</strong></dt> <dd>Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.</dd> <dt><strong>рассчитанные описания</strong></dt> @@ -226,7 +226,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <ol> <li>Сохраните его как <code>.vtt</code>- файл, в разумном месте.</li> - <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code><track></code> должен быть помещен в <code><audio></code> или <code><video></code>, но после элементов <code><source></code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li> + <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code><track></code> должен быть помещён в <code><audio></code> или <code><video></code>, но после элементов <code><source></code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li> </ol> <p>Вот пример:</p> @@ -238,7 +238,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </video> </pre> -<p dir="ltr" id="tw-target-text">Это приведет к просмотру видео с субтитрами, таким как:</p> +<p dir="ltr" id="tw-target-text">Это приведёт к просмотру видео с субтитрами, таким как:</p> <p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> @@ -250,7 +250,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h3 id="Активное_обучение_Внедрение_собственного_аудио_и_видео">Активное обучение: Внедрение собственного аудио и видео</h3> -<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p> +<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p> <p>Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">образцами аудио и видео файлов</a> для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.</p> diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index e578557eb7..a98631d064 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -7,7 +7,7 @@ translation_of: Learn/HTML/Tables/Advanced <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> -<p class="summary">Во второй статье этого модуля мы рассматриваем еще несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p> +<p class="summary">Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/HTML/Tables/Advanced <h2 id="Добавление_заголовка_к_таблице_с_помощью_<caption>">Добавление заголовка к таблице с помощью <caption></h2> -<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причем вам нужно поместить его сразу после открытия тега <code><table></code>.</p> +<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> <pre class="brush: html notranslate"><table> <caption>Dinosaurs in the Jurassic period</caption> @@ -42,7 +42,7 @@ translation_of: Learn/HTML/Tables/Advanced <h3 id="Упражнение_Добавление_заголовка">Упражнение: Добавление заголовка</h3> -<p>Давайте попробуем это, вернемся к примеру который мы ранее встретили в прошлой статье.</p> +<p>Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.</p> <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> @@ -69,7 +69,7 @@ translation_of: Learn/HTML/Tables/Advanced </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> @@ -93,11 +93,11 @@ tfoot { } </pre> </li> - <li>Сохраните, обновите и вы увидите результат. Если <code><tbody></code> и <code><tfoot></code> элементы не были установлены, то вам придется писать много сложных селекторов/правил для применения одного и того же стиля.</li> + <li>Сохраните, обновите и вы увидите результат. Если <code><tbody></code> и <code><tfoot></code> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.</li> </ol> <div class="note"> -<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймете CSS. Вы узнаете больше когда пройдете наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p> +<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p> </div> <p>Ваша готовая таблица должна выглядеть примерно так:</p> @@ -284,7 +284,7 @@ tfoot { <h2 id="Таблицы_для_пользователей_с_ограниченными_возможностями">Таблицы для пользователей с ограниченными возможностями</h2> -<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который дает нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и ее заголовками колонок и/или строк.</p> +<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.</p> <table> <caption>Items Sold August 2016</caption> @@ -373,7 +373,7 @@ tfoot { </tr> </thead></pre> -<p>И у каждой строки может быть определен заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> +<p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> <pre class="brush: html notranslate"><tr> <th scope="row">Haircut</th> @@ -385,7 +385,7 @@ tfoot { <p>Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.</p> -<p>Атрибут <code>scope</code> имеет еще два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code><th></code>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p> +<p>Атрибут <code>scope</code> имеет ещё два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code><th></code>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p> <h3 class="attTitle" id="Атрибуты_id_и_headers">Атрибуты id и headers</h3> @@ -393,12 +393,12 @@ tfoot { <ol> <li>Вы устанавливаете уникальный <code>id</code> для каждого<code><th></code> элемента.</li> - <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code><td></code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделенный пробелами, ко всем <code><th></code> элементам которые действуют как заголовок для этой ячейки.</li> + <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code><td></code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделённый пробелами, ко всем <code><th></code> элементам которые действуют как заголовок для этой ячейки.</li> </ol> <p>Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.</p> -<p>Вернемся к нашему примеру с расчетом затрат, его можно переписать следующим образом:</p> +<p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> <pre class="brush: html notranslate"><thead> <tr> @@ -440,7 +440,7 @@ tfoot { <h2 id="Заключение">Заключение</h2> -<p>Есть еще некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> +<p>Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index 15f766186a..08a1767593 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -30,7 +30,7 @@ translation_of: Learn/HTML/Tables/Basics <p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> -<p>Люди постоянно используют таблицы, причем уже давно, как показывает документ по переписи в США, относящийся к 1800 году:</p> +<p>Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:</p> <p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Tables/Basics <h3 id="Как_работает_таблица">Как работает таблица?</h3> -<p>Смысл таблицы в том, что она жесткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведенную ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p> +<p>Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p> <table> <caption>Personal pronouns</caption> @@ -68,7 +68,7 @@ translation_of: Learn/HTML/Tables/Basics <tr> <th class="symbol" scope="row">♀</th> <td>она</td> - <td>ее</td> + <td>её</td> </tr> <tr> <th class="symbol" scope="row">o</th> @@ -94,18 +94,18 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Если правильно представить таблицу HTML, интерпретировать ее данные смогут даже люди, имеющие проблемы со зрением.</p> +<p>Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.</p> <h3 id="Оформление_таблиц">Оформление таблиц</h3> -<p><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">Исходный код HTML (HTML source code)</a> вышеприведенной таблице есть в GitHub; посмотрите его и <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">живой пример (look at the live example)</a>! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведенный в GitHub пример информации о стиле не имеет.</p> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">Исходный код HTML (HTML source code)</a> вышеприведённой таблице есть в GitHub; посмотрите его и <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">живой пример (look at the live example)</a>! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.</p> <p>Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (<a href="/en-US/docs/Learn/CSS">CSS</a>). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a>.</p> <p>В этом разделе мы не фокусируемся на CSS, но все же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">здесь</a>, можно также использовать <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">шаблон HTML</a>, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.</p> <div class="note"> -<p><strong>Примечание</strong>: Посмотрите также <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с примененным к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p> +<p><strong>Примечание</strong>: Посмотрите также <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с применённым к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p> </div> <h3 id="Когда_не_надо_использовать_таблицы_HTML">Когда не надо использовать таблицы HTML?</h3> @@ -116,21 +116,21 @@ 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>: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li> <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li> </ol> <h2 id="Упражнение_Ваша_первая_таблица">Упражнение: Ваша первая таблица</h2> -<p>Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.</p> +<p>Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.</p> <ol> <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li> <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Добавьте их в тело HTML.</li> - <li>Самым маленьким контейнером в таблице является ячейка, она создается элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: + <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> </li> - <li>Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: + <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> @@ -138,7 +138,7 @@ translation_of: Learn/HTML/Tables/Basics </li> </ol> -<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code><td> </code>создает отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p> +<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code><td> </code>создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p> <p>Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> ('tr' - сокращение от 'table row'). Попробуем, как это получится.</p> @@ -152,7 +152,7 @@ translation_of: Learn/HTML/Tables/Basics <td>I'm your fourth cell.</td> </tr></pre> </li> - <li>Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></code>.</li> + <li>Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></code>.</li> </ol> <p>В результате получится таблица, которая будет выглядеть примерно так:</p> @@ -180,7 +180,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Добавление_заголовков_с_помощью_элементов_<th>">Добавление заголовков с помощью элементов <th></h2> -<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:</p> +<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> <pre class="brush: html notranslate"><table> <tr> @@ -262,7 +262,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Проблема в том, что, хотя вы и можете представить, о чем идет речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p> +<p>Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p> <h3 id="Упражнение_заголовки">Упражнение: заголовки</h3> @@ -270,7 +270,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Сначала создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.</li> - <li>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code><td></code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своем HTML все элементы <code><td></code>, содержащие заголовки, на элементы <code><th></code>.</li> + <li>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code><td></code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <code><td></code>, содержащие заголовки, на элементы <code><th></code>.</li> <li>Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.</li> </ol> @@ -283,14 +283,14 @@ translation_of: Learn/HTML/Tables/Basics <p>Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.</p> <div class="note"> -<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определенный стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p> +<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p> </div> <p>Заголовки дают дополнительное преимущество — вместе с атрибутом <code>scope</code> (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно</p> <h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2> -<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> +<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> <p>Исходная разметка выглядит так:</p> @@ -372,7 +372,7 @@ translation_of: Learn/HTML/Tables/Basics <p>И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> и <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.</p> -<p>Возьмем простой пример:</p> +<p>Возьмём простой пример:</p> <pre class="brush: html notranslate"><table> <tr> @@ -389,7 +389,7 @@ translation_of: Learn/HTML/Tables/Basics </tr> </table></pre> -<p>Что дает нам:</p> +<p>Что даёт нам:</p> <table> <tbody> @@ -408,7 +408,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трех ячеек в столбце (в реальном проекте, возможно, придется вводить <code>class</code> на всех трех и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задается в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> +<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> <pre class="brush: html notranslate"><table> <colgroup> @@ -429,7 +429,7 @@ translation_of: Learn/HTML/Tables/Basics </tr> </table></pre> -<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применен стиль.</p> +<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применён стиль.</p> <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> @@ -515,9 +515,9 @@ translation_of: Learn/HTML/Tables/Basics <li>Добавьте элемент <code><colgroup></code> вверху таблицы, сразу же под тегом <code><table></code>, куда вы сможете вставлять элементы <code><col></code>.</li> <li>Первые два столбца надо оставить без стиля..</li> <li>Добавьте цвет фона для третьего столбца. Значением атрибута <code>style</code> будет <code>background-color:#97DB9A;</code></li> - <li>Задайте ширину для четвертого столбца. <code>Значением атрибута style</code> будет <code>width: 42px;</code></li> + <li>Задайте ширину для четвёртого столбца. <code>Значением атрибута style</code> будет <code>width: 42px;</code></li> <li>Добавьте цвет фона для пятого столбца. Значением атрибута <code>style</code> будет <code>background-color: #97DB9A;</code></li> - <li>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведет новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> + <li>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> <li>Последние два дня выходные; значением атрибута style <code>будет width: 42px;</code></li> </ol> diff --git a/files/ru/learn/html/tables/index.html b/files/ru/learn/html/tables/index.html index 609f1b36fe..3f3d4e5cb8 100644 --- a/files/ru/learn/html/tables/index.html +++ b/files/ru/learn/html/tables/index.html @@ -5,7 +5,7 @@ translation_of: Learn/HTML/Tables --- <div>{{LearnSidebar}}</div> -<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с легкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p> +<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p> <h2 id="Необходимые_условия">Необходимые условия</h2> 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 85c3d9dc91..78c6a63a01 100644 --- a/files/ru/learn/html/tables/structuring_planet_data/index.html +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -36,7 +36,7 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> -<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.</p> +<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведённым инструкциям.</p> <p>Готовая таблица должна выглядеть так:</p> @@ -49,16 +49,16 @@ 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>Добавьте предоставленную подпись к вашей таблице ("Caption" в конце <code>planets-data.txt</code>).</li> <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li> <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li> - <li>Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> + <li>Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li> - <li>Добавьте черную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li> + <li>Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li> </ol> <h2 id="Подсказки_и_советы">Подсказки и советы</h2> |