diff options
Diffstat (limited to 'files/ru/learn')
26 files changed, 208 insertions, 208 deletions
diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.html index aedb2fffec..1ae3ee4805 100644 --- a/files/ru/learn/common_questions/what_is_a_web_server/index.html +++ b/files/ru/learn/common_questions/what_is_a_web_server/index.html @@ -18,7 +18,7 @@ original_slug: Learn/Что_такое_веб_сервер <tr> <th scope="row">Необходимые<br> знания:</th> - <td>Вы должны уже знать, <a href="/ru/docs/Learn/How_the_Internet_works">как работает Интернет</a> и <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">понимать разницу между страницей, сайтом, сервером и поисковой системой.</a></td> + <td>Вы должны уже знать, <a href="/ru/docs/Learn/Common_questions/How_does_the_Internet_work">как работает Интернет</a> и <a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">понимать разницу между страницей, сайтом, сервером и поисковой системой.</a></td> </tr> <tr> <th scope="row">Цель:</th> @@ -40,7 +40,7 @@ original_slug: Learn/Что_такое_веб_сервер <p>На самом базовом уровне, когда браузеру нужен файл, размещённый на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке <a href="/ru/docs/Web/HTTP/Status/404">404</a>) и отправляет обратно, также через HTTP.</p> -<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p> +<p><img alt="Basic representation of a client/server connection through HTTP" src="web-server.svg"></p> <p>Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.</p> @@ -52,7 +52,7 @@ original_slug: Learn/Что_такое_веб_сервер <h2 id="Активное_изучение">Активное изучение</h2> -<p><em>Активное изучение пока не доступно. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p> +<p><em>Активное изучение пока не доступно. <a href="/en-US/docs/MDN/Contribute/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p> <h2 id="Погружаемся_глубже">Погружаемся глубже</h2> @@ -71,9 +71,9 @@ original_slug: Learn/Что_такое_веб_сервер <li>обслуживается третьей, сторонней компанией</li> </ul> -<p>По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в <a href="https://developer.mozilla.org/en-EU/Learn/How_much_does_it_cost#Hosting">этой статье.</a></p> +<p>По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost#hosting">этой статье.</a></p> -<p>Как только вы решили проблему с хостингом, вам понадобится только <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">загрузить свои файлы на ваш веб-сервер</a>.</p> +<p>Как только вы решили проблему с хостингом, вам понадобится только <a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">загрузить свои файлы на ваш веб-сервер</a>.</p> <h3 id="Связь_по_HTTP">Связь по HTTP</h3> @@ -96,7 +96,7 @@ original_slug: Learn/Что_такое_веб_сервер <li>Веб-сервер <em>должен ответить</em> на каждый HTTP-запрос, по крайней мере сообщением об ошибке.</li> </ul> -<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>На веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.</p> +<p><a href="/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="mdn-404.jpg" style="float: right;"></a>На веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.</p> <ol> <li>При получении запроса, HTTP-сервер сначала проверяет, существует ли ресурс по данному URL.</li> @@ -110,7 +110,7 @@ original_slug: Learn/Что_такое_веб_сервер <p><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>Динамическое<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.</p> -<p>Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется <a href="/en-US/docs/MDN/Kuma">Kuma</a>, написан он на языке программирования <a href="https://www.python.org/">Python</a> (используя фреймворк <a href="https://www.djangoproject.com/">Django</a>). Команда Mozilla создала <cite>Kuma</cite> для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.</p> +<p>Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется <a href="/en-US/docs/MDN/Yari">Kuma</a>, написан он на языке программирования <a href="https://www.python.org/">Python</a> (используя фреймворк <a href="https://www.djangoproject.com/">Django</a>). Команда Mozilla создала <cite>Kuma</cite> для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.</p> <p>Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определённые категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаёте динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.</p> @@ -119,9 +119,9 @@ original_slug: Learn/Что_такое_веб_сервер <p>Теперь, когда вы познакомились с веб-серверами, вы можете:</p> <ul> - <li>прочитать <a href="/en-US/docs/Learn/How_much_does_it_cost">насколько сложно делать что-либо в веб</a></li> - <li>узнать больше о <a href="/en-US/docs/Learn/What_software_do_I_need">разнообразии ПО, которое может пригодиться для создания веб-сайта</a></li> - <li>двигаться к практике: например, <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">узнать как загружать файлы на веб-сервер</a>.</li> + <li>прочитать <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">насколько сложно делать что-либо в веб</a></li> + <li>узнать больше о <a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">разнообразии ПО, которое может пригодиться для создания веб-сайта</a></li> + <li>двигаться к практике: например, <a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">узнать как загружать файлы на веб-сервер</a>.</li> </ul> <div id="s3gt_translate_tooltip" style="left: 140px; top: 658px; opacity: 0.75;"></div> diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html index eb4a2d4b0f..286708f392 100644 --- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -33,7 +33,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS </ul> <div class="note"> -<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code><img></code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code><style></code> в заголовке документа.</p> +<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code><img></code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code><style></code> в заголовке документа.</p> </div> <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> @@ -97,7 +97,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <p>На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:</p> -<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="business-card.png" style="display: block; margin: 0 auto;"></p> <h2 id="Проверка">Проверка</h2> @@ -108,17 +108,17 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <h2 id="В_этом_модуле">В этом модуле</h2> <ul> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">Как работает CSS</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Syntax">Синтаксис CSS</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Введение в селекторы</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">Простые селекторы</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Селекторы по атрибутам</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">Комбинаторы и множественные селекторы</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS значения и единицы</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Каскадность и наследование</a></li> - <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model">Блочная модель</a></li> + <li><a href="/ru/docs/Learn/CSS/First_steps">Вступление в CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured">Синтаксис CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Введение в селекторы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Простые селекторы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы по атрибутам</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы и множественные селекторы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">CSS значения и единицы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскадность и наследование</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель</a></li> <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Отладка CSS</a></li> <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Задание: Основы понимания CSS</a></li> </ul> diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index 242a0859fa..090f134d91 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -24,7 +24,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <tbody> <tr> <th scope="row">Необходимые знания:</th> - <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td> + <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td> </tr> <tr> <th scope="row">Цель:</th> @@ -37,7 +37,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p> -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> +<p><img alt="Some code with the h1 highlighted." src="selector.png" style="border: 1px solid #cccccc;"></p> <p>Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p> @@ -47,26 +47,26 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css notranslate">h1 { color: blue; } .special { color: blue; -} </code></pre> +} </pre> <p>А могу написать короче — просто отделив селекторы запятыми:</p> -<pre class="brush: css notranslate"><code>h1, .special { +<pre class="brush: css notranslate">h1, .special { color: blue; -} </code></pre> +} </pre> <p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p> -<pre class="brush: css notranslate"><code>h1, +<pre class="brush: css notranslate">h1, .special { color: blue; -} </code></pre> +} </pre> <p>В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.</p> @@ -76,19 +76,19 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css notranslate">h1 { color: blue; } ..special { color: blue; -} </code></pre> +} </pre> <p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p> -<pre class="brush: css notranslate"><code>h1, ..special { +<pre class="brush: css notranslate">h1, ..special { color: blue; -} </code></pre> +} </pre> <h2 id="Типы_селекторов">Типы селекторов</h2> @@ -136,7 +136,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <h2 id="Продолжение">Продолжение</h2> -<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p> +<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> @@ -156,57 +156,57 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <tr> <td><a href="/ru/docs/Web/CSS/Type_selectors">Селектор по типу</a></td> <td><code>h1 { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_типу">Селектор по типу</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83">Селектор по типу</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></td> <td><code>* { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Универсальный_селектор">Универсальный селектор</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80">Универсальный селектор</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Class_selectors">Селектор класса</a></td> <td><code>.box { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_классов">Селекторы классов</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2">Селекторы классов</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/ID_selectors">Селектор ID</a></td> <td><code>#unique { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_ID">Селекторы по ID</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id">Селекторы по ID</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Attribute_selectors">Селектор атрибутов </a></td> <td><code>a[title] { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибутов </a></td> </tr> <tr> - <td><a href="/ru/docs/Web/CSS/Псевдо-классы">Селектор псевдоклассов</a></td> + <td><a href="/ru/docs/Web/CSS/Pseudo-classes">Селектор псевдоклассов</a></td> <td><code>p:first-child { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдокласс">Псевдоклассы</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81">Псевдоклассы</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Pseudo-elements">Селектор псевдоэлементов</a></td> <td><code>p::first-line { }</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдоэлемент">Псевдоэлементы</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82">Псевдоэлементы</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Descendant_combinator">Селектор потомков</a></td> <td><code>article p</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Селектор_потомков">Селектор потомков</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2">Селектор потомков</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Child_combinator">Селектор дочерних элементов</a></td> <td><code>article > p</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Комбинатор">Селектор дочерних элементов</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80">Селектор дочерних элементов</a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/Adjacent_sibling_combinator">Смежные селекторы</a></td> <td><code>h1 + p</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Смежные_селекторы">Смежные селекторы </a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b">Смежные селекторы </a></td> </tr> <tr> <td><a href="/ru/docs/Web/CSS/General_sibling_combinator">Селектор братских элементов</a></td> <td><code>h1 ~ p</code></td> - <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Братские_элементы">Селектор братских элементов</a></td> + <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b">Селектор братских элементов</a></td> </tr> </tbody> </table> @@ -215,12 +215,12 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <ol> <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li> - <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы </a> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">CSS-селекторы </a> <ul> - <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li> - <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></li> - <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li> - <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators">Комбинации селекторов </a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибутов </a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинации селекторов </a></li> </ul> </li> <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS </a></li> diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html index 563122004b..7cdc57a8de 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables <tbody> <tr> <th scope="row">Необходимые знания:</th> - <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>).</td> + <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td> </tr> <tr> <th scope="row">Цель:</th> @@ -71,9 +71,9 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables </tfoot> </table></pre> -<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p> +<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="table-unstyled.png" style="display: block; margin: 0 auto;"></p> <p>Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.</p> @@ -128,14 +128,14 @@ th, td { <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> <br> Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).</li> - <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code> рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code> рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="border-collapse.png" style="display: block; margin: 0 auto;"></li> <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li> <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.</li> </ul> <p>На этом этапе наша таблица выглядит уже гораздо лучше:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="table-with-spacing.png" style="display: block; margin: 0 auto;"></p> <h3 id="Немного_простой_типографики">Немного простой типографики</h3> @@ -186,7 +186,7 @@ tfoot th { <p>В результате таблица выглядит немного аккуратнее:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="table-with-typography.png" style="display: block; margin: 0 auto;"></p> <h3 id="Графика_и_цвета">Графика и цвета</h3> @@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td { <p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p> -<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p> +<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="/en-US/docs/Web/CSS/gradient/linear-gradient()">линейные градиенты</a>.</p> <h4 id="Полосатая_зебра">Полосатая зебра</h4> @@ -240,7 +240,7 @@ table { <p>Этот взрыв цвета выглядит следующим образом:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="table-with-color.png" style="display: block; margin: 0 auto;"></p> <p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.</p> @@ -258,9 +258,9 @@ table { letter-spacing: 1px; }</pre> -<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> +<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> +<p><img alt="" src="table-with-caption.png" style="display: block; margin: 0px auto;"></p> <h2 id="Активное_обучение_Стилизация_вашей_собственной_таблицы">Активное обучение: Стилизация вашей собственной таблицы</h2> @@ -290,13 +290,13 @@ table { <h2 id="В_этом_блоке">В этом блоке</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li> - <li><a href="/ru/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Box model recap</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Borders</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced box effects</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box">A cool looking box</a></li> </ul> <p> </p> diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html index 5d66f90825..81b8c0bfc1 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -13,7 +13,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <tbody> <tr> <th scope="row">Для изучения вам потребуется:</th> - <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td> + <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td> </tr> <tr> <th scope="row">Вы узнаете:</th> @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <h3 id="Состояния_ссылок">Состояния ссылок</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">псевдоклассы</a>:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes">псевдоклассы</a>:</p> <ul> <li><strong>Link (не посещённая)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li> @@ -38,7 +38,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li> </ul> -<h3 id="Стили_по_умолчанию">Стили по умолчанию</h3> +<h3 id="Default_styles">Стили по умолчанию</h3> <p>Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).</p> @@ -50,7 +50,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links text-align: center; }</pre> -<p>{{ EmbedLiveSample('Стили_по_умолчанию', '100%', 120) }}</p> +<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы заметите несколько вещей при изучении стилей по умолчанию</span></span>:</p> @@ -82,7 +82,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <p><strong>Обратите внимание</strong>: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — <span class="tlid-translation translation" lang="ru"><span title="">вы можете использовать любые свойства, которые вам нравятся. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Просто постарайтесь не сходить с ума слишком сильно!</span></span></p> </div> -<h3 id="Стилизация_некоторых_ссылок">Стилизация некоторых ссылок</h3> +<h3 id="Styling_some_links">Стилизация некоторых ссылок</h3> <p>Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.</p> @@ -165,7 +165,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog <p>Объединение этих двух даёт нам такой результат:</p> -<p>{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}</p> +<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p> <p>Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но <span class="tlid-translation translation" lang="ru"><span title="">все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</span></span></p> @@ -268,7 +268,7 @@ window.addEventListener("load", drawOutput); <p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> -<h2 id="Добавление_иконок_в_ссылки">Добавление иконок в ссылки</h2> +<h2 id="Including_icons_on_links">Добавление иконок в ссылки</h2> <p><span class="tlid-translation translation" lang="ru"><span title="">Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки </span></span>— например, мы будем использовать <a href="https://icons8.com/web-app/741/external-link">этот отличный образец с сайта icons8.com</a>.</p> @@ -313,28 +313,28 @@ a:active { } a[href*="http"] { - background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background: url('external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; }</pre> -<p>{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}</p> +<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p> -<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p> +<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists#using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p> <p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.</p> <p>Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p> -<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p> +<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p> <p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p> <div class="note"> -<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> +<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Building_blocks">фоном </a>и <a href="/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> </div> -<h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2> +<h2 id="Styling_links_as_buttons">Стилизация ссылок в виде кнопок</h2> <p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты, которые вы исследовали в этой статье</span></span> также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p> @@ -392,13 +392,13 @@ a:active { <p>Что даёт нам следующий результат:</p> -<p>{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p> <p>Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:</p> <ul> <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li> - <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li> + <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li> <li>четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом: <ul> <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li> diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html index fd507cffeb..9fb3de53ff 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.html +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -8,14 +8,14 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> -<p class="summary"><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.</p> +<p class="summary"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Требования:</th> <td> - <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p> + <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p> </td> </tr> <tr> @@ -27,7 +27,7 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков <h2 id="Пример_простого_списка">Пример простого списка</h2> -<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p> +<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p> <p>HTML для нашего примера списка представлен ниже:</p> @@ -83,7 +83,7 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p <h2 id="Управление_интервалами_списков">Управление интервалами списков</h2> -<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p> +<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="https://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p> <p><span class="tlid-translation translation" lang="ru"><span title="">CSS, используемый для оформления текста и интервалов, выглядит следующим образом:</span></span></p> @@ -148,7 +148,7 @@ dd { <p>Это даёт нам следующий вид:</p> -<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> +<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.</span></span></p> @@ -163,7 +163,7 @@ dd { list-style-position: inside; }</pre> -<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> +<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <h3 id="Использование_пользовательского_изображения_как_маркер">Использование пользовательского изображения как маркер</h3> @@ -173,7 +173,7 @@ dd { list-style-image: url(star.svg); }</pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Однако это свойство немного ограничено с точки зрения управления позициями</span></span>, размерами (и т.д.) маркеров. <span class="tlid-translation translation" lang="ru"><span title="">Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле </span></span><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">А пока вот вам образец для дегустации!</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Однако это свойство немного ограничено с точки зрения управления позициями</span></span>, размерами (и т.д.) маркеров. <span class="tlid-translation translation" lang="ru"><span title="">Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле </span></span><a href="/en-US/docs/Learn/CSS/Building_blocks">Styling boxes</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">А пока вот вам образец для дегустации!</span></span></p> <p>В нашем законченном примере мы оформили неупорядоченный список следующим образом (<span class="tlid-translation translation" lang="ru"><span title="">поверх того, что вы уже видели выше</span></span>):</p> @@ -207,7 +207,7 @@ ul li { <p>Это даёт нам следующий результат:</p> -<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> +<p><img alt="an unordered list with the bullet points set as little star images" src="list_formatting.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <h3 id="короткая_запись_list-style">короткая запись list-style</h3> @@ -386,5 +386,5 @@ window.addEventListener("load", drawOutput); <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li> </ul> diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html index 53db98ecdd..d19626e533 100644 --- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html @@ -32,7 +32,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <li>Сделайте их копии на вашем компьютере.</li> </ul> -<p>В качестве альтернативы, вы можете пользоваться сайтами как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a> чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">этот URL</a> чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <code><style></code> в head документа.</p> +<p>В качестве альтернативы, вы можете пользоваться сайтами как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a> чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать <a href="https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">этот URL</a> чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <code><style></code> в head документа.</p> <div class="blockIndicator note"> <p><strong>Обратите внимание</strong>: Если вы застрянете, то попросите помощи — см. секцию {{anch("Оценка или дальнейшая помощь")}} в конце этой страницы.</p> @@ -96,7 +96,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <p>Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> +<p><img alt="" src="example2.png" style="display: block; margin: 0px auto;"></p> <h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2> @@ -123,5 +123,5 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Задании: Стилизация школьного сайта</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Задании: Стилизация школьного сайта</a></li> </ul> diff --git a/files/ru/learn/forms/basic_native_form_controls/all-buttons.png b/files/ru/learn/forms/basic_native_form_controls/all-buttons.png Binary files differnew file mode 100644 index 0000000000..1f43c4f1fb --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-buttons.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png b/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png Binary files differnew file mode 100644 index 0000000000..2769f0594d --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-datalist.png b/files/ru/learn/forms/basic_native_form_controls/all-datalist.png Binary files differnew file mode 100644 index 0000000000..f89c3e1eb9 --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-datalist.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png Binary files differnew file mode 100644 index 0000000000..bae88512cb --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png Binary files differnew file mode 100644 index 0000000000..6c6bc1862f --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-radio.png b/files/ru/learn/forms/basic_native_form_controls/all-radio.png Binary files differnew file mode 100644 index 0000000000..e5a36ca200 --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-radio.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-search-field.png b/files/ru/learn/forms/basic_native_form_controls/all-search-field.png Binary files differnew file mode 100644 index 0000000000..83e4c0ff3a --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-search-field.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-select.png b/files/ru/learn/forms/basic_native_form_controls/all-select.png Binary files differnew file mode 100644 index 0000000000..fde1fbf68b --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-select.png diff --git a/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png b/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png Binary files differnew file mode 100644 index 0000000000..84cccbee6a --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png diff --git a/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png b/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png Binary files differnew file mode 100644 index 0000000000..4e7466691e --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png diff --git a/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png b/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png Binary files differnew file mode 100644 index 0000000000..c1c6e68cd3 --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png diff --git a/files/ru/learn/forms/basic_native_form_controls/email-invalid.png b/files/ru/learn/forms/basic_native_form_controls/email-invalid.png Binary files differnew file mode 100644 index 0000000000..25ab5fcacd --- /dev/null +++ b/files/ru/learn/forms/basic_native_form_controls/email-invalid.png diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html index 996ff8bede..7da1a16864 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -23,10 +23,10 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм </tbody> </table> -<p>Сейчас мы сосредоточимся на виджетах форм, встроенных в браузеры, но поскольку формы HTML остаются несколько ограниченными и особенности их реализации различаются для разных браузеров, веб-разработчики иногда создают собственные виджеты форм - прочтите статью <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Как создать собственную форму</a> позже в данном модуле для более подробного изучения.</p> +<p>Сейчас мы сосредоточимся на виджетах форм, встроенных в браузеры, но поскольку формы HTML остаются несколько ограниченными и особенности их реализации различаются для разных браузеров, веб-разработчики иногда создают собственные виджеты форм - прочтите статью <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Как создать собственную форму</a> позже в данном модуле для более подробного изучения.</p> <div class="note"> -<p><strong>Note</strong>: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference, </a>и в частости к нашей обширной ссылке <a href="/en-US/docs/Web/HTML/Element/input"><input> types.</a></p> +<p><strong>Note</strong>: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к <a href="/en-US/docs/Web/HTML/Element#forms">HTML forms element reference, </a>и в частости к нашей обширной ссылке <a href="/en-US/docs/Web/HTML/Element/input"><input> types.</a></p> </div> <h2 id="Стандартные_атрибуты">Стандартные атрибуты</h2> @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Текстовые поля {{htmlelement("input")}} являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели несколько простых примеров.</p> <div class="note"> -<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p> +<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p> </div> <p>Все текстовые поля имеют общие атрибуты:</p> @@ -83,8 +83,8 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <ul> <li>Они могут быть помечены как {{htmlattrxref("readonly","input")}} (пользователь не может изменять начальное значение) или даже {{htmlattrxref("disabled","input")}} начальное значение никогда не посылается вместе с остальными данными формами).</li> <li>Они могут иметь атрибут {{htmlattrxref("placeholder","input")}}; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.</li> - <li>Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">длину</a> (максимальное количество символов, которые может ввести пользователь).</li> - <li>Они могут быть определены с помощью <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, если браузер поддерживает данную функцию.</li> + <li>Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и <a href="/en-US/docs/Web/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">длину</a> (максимальное количество символов, которые может ввести пользователь).</li> + <li>Они могут быть определены с помощью <a href="/en-US/docs/Web/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, если браузер поддерживает данную функцию.</li> </ul> <div class="note"> @@ -105,7 +105,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.</p> -<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> +<p><img alt="Screenshots of single line text fields on several platforms." src="all-single-line-text-field.png"></p> <p>HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p> @@ -117,14 +117,14 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Когда используется этот <code>type</code>, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:</p> -<p><img alt="An invalid email input showing the message Please enter an email address." src="https://mdn.mozillademos.org/files/14781/email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="An invalid email input showing the message Please enter an email address." src="email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <p>It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.</p> <p>On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.</p> <div class="note"> -<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p> +<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/Forms/Form_validation">Form data validation</a>.</p> </div> <h4 id="Password_field">Password field</h4> @@ -147,7 +147,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p> -<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> +<p><img alt="Screenshots of search fields on several platforms." src="all-search-field.png"></p> <h4 id="Phone_number_field">Phone number field</h4> @@ -168,7 +168,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.</div> <div class="note"> -<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p> +<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/Learn/Forms/Form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p> </div> <h3 id="Multi-line_text_fields">Multi-line text fields</h3> @@ -179,7 +179,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p> -<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> +<p><img alt="Screenshots of multi-lines text fields on several platforms." src="all-multi-lines-text-field.png"></p> <div class="note"> <p><strong>Note</strong>: You can find an example of a multi-line text field on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">see it live also</a>). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to <code>none</code> using <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> @@ -257,7 +257,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм </optgroup> </select></pre> -<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> +<p><img alt="Screenshots of single line select box on several platforms." src="all-select.png"></p> <p>If an {{HTMLElement("option")}} element is set with a <code>value</code> attribute, that attribute's value is sent when the form is submitted. If the <code>value</code> attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.</p> @@ -275,7 +275,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <option>Lemon</option> </select></pre> -<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> +<p><img alt="Screenshots of multi-lines select box on several platforms." src="all-multi-lines-select.png"></p> <div class="note"><strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div> @@ -300,9 +300,9 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <option>Pear</option> </datalist></pre> -<div class="note"><strong>Note:</strong> According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div> +<div class="note"><strong>Note:</strong> According to <a href="https://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div> -<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> +<div><img alt="Screenshots of datalist on several platforms." src="all-datalist.png"></div> <div></div> @@ -336,11 +336,11 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <tbody> <tr> <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> + <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="datalist-safari.png"></td> </tr> <tr> <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> + <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="datalist-firefox-macos.png"></td> </tr> </tbody> </table> @@ -368,7 +368,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p> -<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> +<p><img alt="Screenshots of check boxes on several platforms." src="all-checkbox.png"></p> <h3 id="Radio_button">Radio button</h3> @@ -396,7 +396,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм </ul> </fieldset></pre> -<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> +<p><img alt="Screenshots of radio buttons on several platforms." src="all-radio.png"></p> <h2 id="Buttons">Buttons</h2> @@ -448,7 +448,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a <code>value</code> attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.</li> </ul> -<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> +<p><img alt="Screenshots of buttons on several platforms." src="all-buttons.png"></p> <p>Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.</p> @@ -569,7 +569,7 @@ beans.oninput = function() { <h3 id="File_picker">File picker</h3> -<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p> +<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p> <p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p> @@ -606,7 +606,7 @@ beans.oninput = function() { <pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> -<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p> +<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p> <h3 id="Meters_and_progress_bars">Meters and progress bars</h3> @@ -669,7 +669,7 @@ beans.oninput = function() { <ul> <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> by Wufoo</li> - <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li> + <li><a href="https://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="https://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li> </ul> <p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> @@ -677,15 +677,15 @@ beans.oninput = function() { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first HTML form</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure an HTML form</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">The native form widgets</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Form data validation</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form widgets</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html index 155242dff0..d152e456b0 100644 --- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html @@ -12,7 +12,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <tbody> <tr> <th scope="row">Предварительные знания:</th> - <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">понимание HTML</a> и базовые знания по <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> и <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">программированию на стороне сервера</a>.</td> + <td>Базовая компьютерная грамотность, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">понимание HTML</a> и базовые знания по <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> и <a href="/en-US/docs/Learn/Server-side/First_steps">программированию на стороне сервера</a>.</td> </tr> <tr> <th scope="row">Задача:</th> @@ -27,7 +27,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <h3 id="О_клиенсткойсерверной_архитектуре">О клиентской/серверной архитектуре</h3> -<p>WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как <a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="https://www.nginx.com/" rel="external">Nginx</a>, <a href="https://www.iis.net/" rel="external">IIS</a>, <a href="https://tomcat.apache.org/" rel="external">Tomcat</a>, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.<img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> +<p>WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как <a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="https://www.nginx.com/" rel="external">Nginx</a>, <a href="https://www.iis.net/" rel="external">IIS</a>, <a href="https://tomcat.apache.org/" rel="external">Tomcat</a>, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.<img alt="A basic schema of the Web client/server architecture" src="client-server.png" style="display: block; margin: 0px auto;"></p> <p>На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .</p> @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <h4 id="Атрибут_htmlattrxrefmethodform">Атрибут {{htmlattrxref("method","form")}}</h4> -<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> +<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/Web/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> <p>Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.</p> @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>Поскольку используется метод <code>GET</code>, вы увидите URL <code>www.foo.com/?say=Hi&to=Mom</code>, который появится в адресной строке браузера при отправке формы.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаём две части данных на сервер:</p> +<p><img alt="" src="url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаём две части данных на сервер:</p> <ul> <li><code>say</code>, со значением <code>Hi</code></li> @@ -156,7 +156,7 @@ say=Hi&to=Mom</pre> <p>Затем вы можете получить данные формы, как показано на рисунке ниже.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <p>Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом <code>GET</code> позволит пользователю увидеть информацию из запроса в URL, а запрос с методом <code>POST</code> не позволит. Две причины, почему это может быть важно:</p> @@ -184,7 +184,7 @@ say=Hi&to=Mom</pre> <p>Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — который содержит те же данные, которые вы видели раньше: <code>method</code> : <code>post</code> и <code>action</code> из <code>php-example.php</code>. Когда данные переданы на отправку (submit), они переданы в форму <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: <code>Hi Mom</code>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="php-result.png" style="display: block; margin: 0 auto;"></p> <div class="note"> <p><strong>Примечание</strong>: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) и/или <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> @@ -217,7 +217,7 @@ if __name__ == "__main__": </ul> <div class="note"> -<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своём браузере.</p> +<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#installing_python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своём браузере.</p> </div> <h4 id="Другие_языки_и_фреймворки">Другие языки и фреймворки</h4> @@ -251,7 +251,7 @@ if __name__ == "__main__": <ul> <li>Указать {{htmlattrxref("method","form")}} атрибут <code>POST</code>, поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.</li> <li>Установить в {{htmlattrxref("enctype","form")}} значение <code>multipart/form-data</code>, потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).</li> - <li>Подключите один или более <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">File picker</a> виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.</li> + <li>Подключите один или более <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls#file_picker">File picker</a> виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.</li> </ul> <p>Пример:</p> @@ -322,7 +322,7 @@ if __name__ == "__main__": <h2 id="Заключение">Заключение</h2> -<p>Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы">мы можем проверить данные на стороне клиента</a>, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.</p> +<p>Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, <a href="/ru/docs/Learn/Forms/Form_validation">мы можем проверить данные на стороне клиента</a>, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.</p> <h2 id="Смотрите_также">Смотрите также</h2> @@ -339,15 +339,15 @@ if __name__ == "__main__": <h2 id="В_этом_модуле">В этом модуле</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML-форма</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Предопределённые виджеты</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Валидация данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать кастомные виджеты</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм с помощью JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых версиях браузеров</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Продвинутая стилизация для HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств виджетов форм</a></li> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Ваша первая HTML-форма</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Как структурировать HTML-форму</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Предопределённые виджеты</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Валидация данных формы</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Как создавать кастомные виджеты</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Отправка форм с помощью JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых версиях браузеров</a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Стилизация HTML-форм</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Продвинутая стилизация для HTML-форм</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Таблица совместимости свойств виджетов форм</a></li> </ul> diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html index 0e5373c160..c7b482741e 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html @@ -31,7 +31,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как <code>style.css</code> в вашей папке <code>styles</code>.</p> -<p>Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> и <a href="/ru/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>, чтобы узнать, что вам нужно сделать в первую очередь.)</p> +<p>Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> и <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>, чтобы узнать, что вам нужно сделать в первую очередь.)</p> <ol> <li>Откройте ваш файл <code>index.html</code> и вставьте следующую строку куда-нибудь в шапку, между <code><head></code> и <code></head></code> тегами: @@ -41,13 +41,13 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <li>Сохраните <code>index.html</code> и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:</li> </ol> -<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!</p> +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="website-screenshot-styled.png" style="display: block; margin: 0px auto;">Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!</p> <h3 id="Анатомия_набора_правил_CSS">Анатомия набора правил CSS</h3> <p>Давайте взглянем на вышеупомянутый CSS немного более подробно:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> +<p><img alt="" src="css-declaration-small.png" style="display: block; margin: 0px auto;"></p> <p>Вся структура называется <strong>набором правил</strong> (но зачастую для краткости "правило"). Отметим также имена отдельных частей:</p> @@ -139,7 +139,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл <code>style.css</code>, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.</p> <ol> - <li>Прежде всего, вернитесь и найдите <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code><head></code> и <code></head></code>). Это будет выглядеть примерно так: + <li>Прежде всего, вернитесь и найдите <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code><head></code> и <code></head></code>). Это будет выглядеть примерно так: <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.</li> @@ -170,13 +170,13 @@ p, li { <p>Вы можете настроить значения <code>px</code> так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:</p> -<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="website-screenshot-font-small.png" style="display: block; margin: 0px auto;"></p> <h2 id="Блоки_блоки_и_ещё_раз_блоки">Блоки, блоки и ещё раз блоки</h2> <p>Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML элементов на странице можно рассматривать как блоки, расположенные друг над другом.</p> -<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> +<p><img alt="a big stack of boxes or crates sat on top of one another" src="boxes.jpg" style="display: block; margin: 0px auto;"></p> <p>Не удивительно, макет CSS основан, главным образом, на <em>блочной модели (box model)</em>. Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:</p> @@ -186,7 +186,7 @@ p, li { <li><code>margin</code>, пространство вокруг внешней стороны элемента</li> </ul> -<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="box-model.png" style="display: block; margin: 0px auto;"></p> <p>В этом разделе мы также используем:</p> @@ -206,7 +206,7 @@ p, li { background-color: #00539F; }</pre> -<p>Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вы выбрали при планировании вашего сайта</a>.</p> +<p>Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вы выбрали при планировании вашего сайта</a>.</p> <h3 id="Разбираемся_с_телом">Разбираемся с телом</h3> @@ -222,7 +222,7 @@ p, li { <ul> <li><code>width: 600px;</code> — заставляет тело быть всегда 600 пикселей в ширину.</li> - <li><code>margin: 0 auto;</code> — когда вы устанавливаете два значения для таких свойств как <code>margin</code> или <code>padding</code>, первое значение элемента влияет на верхнюю <strong>и</strong> нижнюю сторону (делает их <code>0</code> в данном случае), и второе значение на левую <strong>и</strong> правую сторону (здесь, <code>auto</code> является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin#Values">здесь</a>.</li> + <li><code>margin: 0 auto;</code> — когда вы устанавливаете два значения для таких свойств как <code>margin</code> или <code>padding</code>, первое значение элемента влияет на верхнюю <strong>и</strong> нижнюю сторону (делает их <code>0</code> в данном случае), и второе значение на левую <strong>и</strong> правую сторону (здесь, <code>auto</code> является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано <a href="/ru/docs/Web/CSS/margin#values">здесь</a>.</li> <li><code>background-color: #FF9500;</code> — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.</li> <li><code>padding: 0 20px 20px 20px;</code> — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.</li> <li><code>border: 5px solid black;</code> — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.</li> @@ -271,13 +271,13 @@ p, li { <h2 id="Заключение">Заключение</h2> -<p>Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="http://mdn.github.io/beginner-html-site-styled/">посмотреть нашу версию здесь</a>):</p> +<p>Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-styled/">посмотреть нашу версию здесь</a>):</p> -<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="website-screenshot-final.png" style="display: block; margin: 0px auto;"></p> <p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">готовым примером кода на Github</a>.</p> -<p>Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу <a href="https://developer.mozilla.org/ru/Learn/CSS">страницу изучения CSS</a>.</p> +<p>Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу <a href="/ru/docs/Learn/CSS">страницу изучения CSS</a>.</p> <p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> @@ -285,11 +285,11 @@ p, li { <ul> <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li> - <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li> - <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li> - <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li> - <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li> + <li id="What_will_your_website_look_like"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li> + <li id="Dealing_with_files"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li> + <li id="HTML_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li> + <li id="CSS_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li> + <li id="JavaScript_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li> + <li id="Publishing_your_website"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li> + <li id="How_the_web_works"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li> </ul> diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html index f506a21200..f3ecfbe95c 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html @@ -32,7 +32,7 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics <li>Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.</li> </ul> -<p>Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript">учебной области JavaScript </a> и в остальной части MDN. </p> +<p>Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей <a href="/ru/docs/Learn/JavaScript">учебной области JavaScript </a> и в остальной части MDN. </p> <p>Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!</p> @@ -56,7 +56,7 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';</pre> </li> - <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> + <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li> </ol> <div class="note"> @@ -74,12 +74,12 @@ myHeading.textContent = 'Hello world!';</pre> <p>Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!</p> <div class="warning"> -<p><strong>Важно</strong>: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью <a href="/ru/Learn/Discover_browser_developer_tools">Откройте для себя браузерные инструменты разработчика</a>.</p> +<p><strong>Важно</strong>: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Откройте для себя браузерные инструменты разработчика</a>.</p> </div> <h3 id="Переменные">Переменные</h3> -<p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> <span class="tlid-translation translation" lang="ru"><span title="">(не рекомендуется, продолжайте читать, чтобы получить объяснения)</span></span> или <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p> +<p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> <span class="tlid-translation translation" lang="ru"><span title="">(не рекомендуется, продолжайте читать, чтобы получить объяснения)</span></span> или <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p> <pre class="brush: js notranslate">let myVariable;</pre> @@ -286,7 +286,7 @@ multiply(20,20); multiply(0.5,3);</pre> <div class="note"> -<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">больше об области видимости переменных</a>.)</p> +<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope">больше об области видимости переменных</a>.)</p> </div> <h3 id="События">События</h3> @@ -351,7 +351,7 @@ myImage.onclick = function() { <h3 id="Добавление_персонального_приветственного_сообщения">Добавление персонального приветственного сообщения</h3> -<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся - мы сохраним его с помощью <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p> +<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся - мы сохраним его с помощью <a href="/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p> <ol> <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}: @@ -391,7 +391,7 @@ var myHeading = document.querySelector('h1');</pre> <p>Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-scripted/">посмотреть нашу версию здесь</a>):</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="website-screen-scripted.png" style="display: block; margin: 0px auto;"></p> <p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">готовым примером кода на Github</a>.</p> @@ -403,11 +403,11 @@ var myHeading = document.querySelector('h1');</pre> <ul> <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li> - <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li> - <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li> - <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li> - <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li> + <li id="What_will_your_website_look_like"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li> + <li id="Dealing_with_files"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li> + <li id="HTML_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li> + <li id="CSS_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li> + <li id="JavaScript_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li> + <li id="Publishing_your_website"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li> + <li id="How_the_web_works"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li> </ul> 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 efca6f0536..8621a782a0 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 @@ -14,7 +14,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <tbody> <tr> <th scope="row">Необходимы:</th> - <td>Базовые знания компьютера, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, знания основ HTML (как описано в статье <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы">Начало работы с HTML</a>).</td> + <td>Базовые знания компьютера, <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, знания основ HTML (как описано в статье <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>).</td> </tr> <tr> <th scope="row">Цель:</th> @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p> <div class="note"> -<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адреса.</p> +<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%90%d0%b1%d1%81%d0%be%d0%bb%d1%8e%d1%82%d0%bd%d1%8b%d0%b5_%d0%b8_%d0%be%d1%82%d0%bd%d0%be%d1%81%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5_url-%d0%b0%d0%b4%d1%80%d0%b5%d1%81%d0%b0">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адреса.</p> </div> <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> @@ -65,10 +65,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Наш код выше даст нам следующий результат:</p> -<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="basic-image.png" style="display: block; margin: 0px auto;"></p> <div class="note"> -<p><strong>Примечание</strong>: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Замещаемый_элемент">Замещаемых элементах</a>.</p> +<p><strong>Примечание</strong>: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Replaced_element">Замещаемых элементах</a>.</p> </div> <div class="note"> @@ -85,7 +85,7 @@ 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="alt-text.png" style="display: block; margin: 0px auto;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведём несколько примеров:</p> <ul> <li>Пользователь с нарушением зрения использует <a href="https://en.wikipedia.org/wiki/Screen_reader">устройство чтения с экрана</a>, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте <code>alt</code> для описания изображения может быть полезно для большинства пользователей.</li> @@ -100,14 +100,14 @@ 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/Introduction_to_HTML/Creating_hyperlinks#%d0%98%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d1%83%d0%b9%d1%82%d0%b5_%d1%87%d1%91%d1%82%d0%ba%d0%b8%d0%b5_%d1%84%d0%be%d1%80%d0%bc%d1%83%d0%bb%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b8_%d0%be%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d1%8f_%d1%81%d1%81%d1%8b%d0%bb%d0%be%d0%ba">использовать чёткие формулировки описания ссылок</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> <p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.</p> <div class="note"> -<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь: <a href="/ru/docs/Learn/Доступность/HTML#Альтернативный_текст">Альтернативный текст</a>.</p> +<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь: <a href="/ru/docs/Learn/Accessibility/HTML#%d0%90%d0%bb%d1%8c%d1%82%d0%b5%d1%80%d0%bd%d0%b0%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b9_%d1%82%d0%b5%d0%ba%d1%81%d1%82">Альтернативный текст</a>.</p> </div> <h3 id="Ширина_и_высота">Ширина и высота</h3> @@ -122,7 +122,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:</p> -<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="alt-text-with-width-height.png" style="display: block; margin: 0px auto;"></p> <p>Это хорошая практика, в результате страница загрузится быстрее и более гладко.</p> @@ -134,7 +134,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <h3 id="Заголовок_изображения">Заголовок изображения</h3> -<p>Как и для <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p> +<p>Как и для <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -145,7 +145,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <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> +<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="image-with-title.png" style="display: block; margin: 0px auto;"></p> <p>Однако это не рекомендуется - <code>title</code> имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.</p> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index a87d4503a0..bd9b5f4fb4 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -26,13 +26,13 @@ translation_of: Learn/HTML/Tables/Basics <p>Таблица - это структурированный набор данных, состоящий из строк и столбцов (<strong>табличных данных</strong>). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.</p> -<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="numbers-table.png" style="display: block; margin: 0px auto;"></p> -<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><img alt="A swimming timetable showing a sample data table" src="swimming-timetable.png" style="display: block; margin: 0px auto;"></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> +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="1800-census.jpg" style="display: block; margin: 0px auto;"></p> <p>Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.</p> @@ -98,24 +98,24 @@ translation_of: Learn/HTML/Tables/Basics <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="https://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>Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (<a href="/en-US/docs/Learn/CSS">CSS</a>). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье <a href="/en-US/docs/Learn/CSS/Building_blocks/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="https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с применённым к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p> </div> <h3 id="Когда_не_надо_использовать_таблицы_HTML">Когда не надо использовать таблицы HTML?</h3> -<p>HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе <a href="/ru/docs/Learn/Доступность/HTML#Вёрстка">Вёрстка</a> на <a href="/ru/docs/Learn/Доступность">Начальном обучающем модуле доступности</a>. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.</p> +<p>HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе <a href="/ru/docs/Learn/Accessibility/HTML#%d0%92%d1%91%d1%80%d1%81%d1%82%d0%ba%d0%b0">Вёрстка</a> на <a href="/ru/docs/Learn/Accessibility">Начальном обучающем модуле доступности</a>. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.</p> <p>Короче говоря, использование таблиц в целях оформления вместо <a href="/en-US/docs/Learn/CSS/CSS_layout">методов CSS</a> является плохой идеей по следующим причинам :</p> <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>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screenreaders">Скринридеры (Screenreaders</a>), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.</li> <li><strong>Таблицы создают путаницу тегов</strong>: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li> <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li> </ol> @@ -175,7 +175,7 @@ translation_of: Learn/HTML/Tables/Basics </table> <div class="note"> -<p><strong>Примечание</strong>: Этот пример можно также найти на GitHub под названием <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p> +<p><strong>Примечание</strong>: Этот пример можно также найти на GitHub под названием <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p> </div> <h2 id="Добавление_заголовков_с_помощью_элементов_<th>">Добавление заголовков с помощью элементов <th></h2> @@ -275,7 +275,7 @@ translation_of: Learn/HTML/Tables/Basics </ol> <div class="note"> -<p><strong>Примечание</strong>: Законченный пример можно найти на <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> в GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">посмотрите живой пример</a>).</p> +<p><strong>Примечание</strong>: Законченный пример можно найти на <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> в GitHub (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">посмотрите живой пример</a>).</p> </div> <h3 id="Для_чего_нужны_заголовки">Для чего нужны заголовки?</h3> @@ -362,7 +362,7 @@ translation_of: Learn/HTML/Tables/Basics </ol> <div class="note"> -<p><strong>Примечание</strong>: Законченный пример можно посмотреть в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> на GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">живой пример</a>).</p> +<p><strong>Примечание</strong>: Законченный пример можно посмотреть в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> на GitHub (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">живой пример</a>).</p> </div> <table id="tabular" style="background-color: white;"> @@ -521,7 +521,7 @@ translation_of: Learn/HTML/Tables/Basics <li>Последние два дня выходные; значением атрибута style <code>будет width: 42px;</code></li> </ol> -<p>Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">посмотрите живой пример</a>).</p> +<p>Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">посмотрите живой пример</a>).</p> <h2 id="Итог">Итог</h2> diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 0158a4ce38..aad1044a22 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -82,7 +82,7 @@ dblSgl;</pre> <pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...'; bigmouth;</pre> -<p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a>.</p> +<p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation">Escape notation</a>.</p> <h2 id="Конкатенация_строк">Конкатенация строк</h2> @@ -143,7 +143,7 @@ typeof myDate;</pre> var myNum = Number(myString); typeof myNum;</pre> </li> - <li>С другой стороны, каждое число имеет метод, называемый <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это: + <li>С другой стороны, каждое число имеет метод, называемый <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это: <pre class="brush: js notranslate">var myNum = 123; var myString = myNum.toString(); typeof myString;</pre> |
