diff --git a/.prettierignore b/.prettierignore
index 1da275ff0479e4..09b56589ccb0a2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -21,6 +21,7 @@ build/
/files/fr/glossary/main_axis/index.md
/files/fr/learn/server-side/django/forms/index.md
/files/pt-br/learn/server-side/django/forms/index.md
+/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
/files/zh-cn/learn/css/howto/css_faq/index.md
/files/zh-cn/learn/server-side/django/forms/index.md
@@ -82,7 +83,6 @@ build/
/files/pt-br/web/svg/**/*.md
# ru
-/files/ru/learn/html/**/*.md
/files/ru/learn/server-side/**/*.md
/files/ru/web/api/**/*.md
/files/ru/web/css/**/*.md
diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
index 07d45c19825132..e2019586fec0ee 100644
--- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -143,22 +143,24 @@ SVG, создаваемый большинством графических пр
## Пример структуры страницы
-- `HTML`
+- `html`
-- `HEAD`
- - `LINK` ...
+- `head`
+
+ - `link` ...
CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.
- - `SCRIPT` ...
+ - `script` ...
Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы
Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.
-- `BODY`
+- `body`
- Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
- - `SCRIPT` ...
+
+ - `script` ...
Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.
diff --git a/files/ru/learn/html/howto/index.md b/files/ru/learn/html/howto/index.md
index 551ccd2d969a60..14b201a072db24 100644
--- a/files/ru/learn/html/howto/index.md
+++ b/files/ru/learn/html/howto/index.md
@@ -9,6 +9,7 @@ tags:
translation_of: Learn/HTML/Howto
original_slug: Learn/HTML/Рецепты
---
+
Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.
### Основы структурирования
diff --git a/files/ru/learn/html/howto/use_data_attributes/index.md b/files/ru/learn/html/howto/use_data_attributes/index.md
index fe40887f1e9d2c..cebae28eb22fe4 100644
--- a/files/ru/learn/html/howto/use_data_attributes/index.md
+++ b/files/ru/learn/html/howto/use_data_attributes/index.md
@@ -20,7 +20,7 @@ original_slug: Web/Guide/HTML/Using_data_attributes
data-columns="3"
data-index-number="12314"
data-parent="cars">
-...
+ ...
```
@@ -53,10 +53,10 @@ article::before {
Также можно использовать [селекторы атрибутов](/ru/docs/Web/CSS/Attribute_selectors) в CSS для изменения стилей в соответствии с данным:
```css
-article[data-columns='3']{
+article[data-columns="3"] {
width: 400px;
}
-article[data-columns='4']{
+article[data-columns="4"] {
width: 600px;
}
```
diff --git a/files/ru/learn/html/index.md b/files/ru/learn/html/index.md
index a6ff7684bb949e..960b16ca73b173 100644
--- a/files/ru/learn/html/index.md
+++ b/files/ru/learn/html/index.md
@@ -1,5 +1,5 @@
---
-title: 'Изучение HTML: руководства и уроки'
+title: "Изучение HTML: руководства и уроки"
slug: Learn/HTML
tags:
- HTML
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 74fb501829d110..cfa81fc6f6ffa0 100644
--- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -41,11 +41,21 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting
```html
Солилоквий
-
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
+
+ Драматическая речь, в которой персонаж разговаривает сам с собой, передавая
+ свои ощущения и мысли публике (но не другим персонажам).
+
Монолог
-
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
+
+ Драматическая речь, в которой персонаж передаёт свои мысли публике и
+ некоторым персонажам.
+
Ремарка
-
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
+
+ В драме: речь персонажа, при которой делается замечание с юмористическим или
+ драматическим эффектом; чаще всего это чувства, мысли или предпосылки к
+ чему-либо.
+
";
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -173,8 +186,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -185,10 +201,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Показать решение') {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -211,15 +227,23 @@ HTML также имеет функции, доступные для марки
Например, следующая разметка берётся из страницы элемента MDN **`
`**:
```html
-
HTML-элемент<blockquote> (от англ. HTML Block
-Quotation Element) указывает на то, что заключённый в нём текст является развёрнутой цитатой.
+
+ HTML-элемент<blockquote> (от англ.
+ HTML Block Quotation Element) указывает на то, что заключённый в нём
+ текст является развёрнутой цитатой.
+
```
Чтобы превратить её в блочную цитату, мы просто делаем следующее:
```html
-
-
HTML-элемент<blockquote> (от англ. HTML Block Quotation Element) указывает на то, что заключённый в нём текст является развёрнутой цитатой.
+
+
+ HTML-элемент<blockquote> (от англ.
+ HTML Block Quotation Element) указывает на то, что заключённый в
+ нём текст является развёрнутой цитатой.
+
```
@@ -232,8 +256,12 @@ Quotation Element) указывает на то, что заключённ
Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы `` MDN:
```html
-
Элемент цитирования — <q> — предназначен
-для коротких цитат, не требующих прерывания абзаца.
+
+ Элемент цитирования — <q> —
+ предназначен для коротких цитат, не требующих прерывания абзаца.
+
```
Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:
@@ -245,18 +273,31 @@ Quotation Element) указывает на то, что заключённ
Содержание атрибута [`cite`](/ru/docs/Web/HTML/Element/blockquote#cite) выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута `cite` без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри `` с источником цитаты:
```html
-
HTML-элемент<blockquote> (от англ. HTML Block
- Quotation Element) указывает на то, что заключённый в нем текст является развёрнутой цитатой.
+
+
+ HTML-элемент<blockquote> (от англ.
+ HTML Block Quotation Element) указывает на то, что заключённый в
+ нем текст является развёрнутой цитатой.
+
-
Элемент цитирования — <q> — предназначен
-для коротких цитат, не требующих прерывания абзаца. --
-Строчные цитаты.
+
+ Элемент цитирования — <q> —
+ предназначен для коротких цитат, не требующих прерывания абзаца. --
+
+ Строчные цитаты.
+
```
По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html)
@@ -279,11 +320,12 @@ Quotation Element) указывает на то, что заключённ
```html hidden
Результат
-
-
+
Редактируемый код
-
Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
+ Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:
\n\n
\n
Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.
\n
\n\n
Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)
';
+var htmlSolution =
+ '
Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:
\n\n
\n
Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.
\n
\n\n
Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)
';
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -374,8 +417,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -386,10 +432,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Показать решение') {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -428,19 +474,20 @@ textarea.onkeyup = function(){
```html hidden
Результат
-
-
+
Редактируемый код
-
Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
+ Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
';
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -521,8 +569,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -533,10 +584,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Показать решение') {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -574,7 +625,10 @@ HTML имеет элемент для разметки контактных да
```html
You shouldn't use presentational elements like <font> and <center>.
+
+ You shouldn't use presentational elements like <font> and
+ <center>.
+
-
In the above JavaScript example, para represents a paragraph element.
+
+ In the above JavaScript example, para represents a paragraph
+ element.
+
Select all the text with Ctrl/Cmd + A.
@@ -657,7 +717,9 @@ HTML также содержит элемент {{htmlelement ("time")}} для
-
+
```
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
index c5ab27939b4249..ecc273957b2c1a 100644
--- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -39,7 +39,8 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите [Ссылки-блоки](#ссылки-блоки)), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута [`href`](/ru/docs/Web/HTML/Element/a#href) (который также известен как **гипертекстовая ссылка,** или **цель**), который будет содержать веб-адрес, на который вы хотите указать ссылку.
```html
-
```
@@ -53,11 +54,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
Другим атрибутом, который вы можете добавить к своим ссылкам, является — `title`. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:
```html
-
```
@@ -81,7 +85,9 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
```html
-
+
```
@@ -104,24 +110,25 @@ URL-адреса используют пути для поиска файлов.
- **Тот же каталог**: Если вы хотите подключить ссылку внутри `index.html` (верхний уровень `index.html`), указывающую на `contacts.html`, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — `contacts.html`:
```html
-
Хотите связаться с конкретным сотрудником?
- Найдите подробную информацию на нашей
- странице контактов.
+
+ Хотите связаться с конкретным сотрудником? Найдите подробную информацию на
+ нашей странице контактов.
```
- **Перемещение вниз в подкаталоги**: Если вы хотите подключить ссылку внутри `index.html` (верхний уровень `index.html`), указывающую на `projects/index.html`, вам нужно спуститься ниже в директории `projects` перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - `projects/index.html`:
```html
-
```
- **Перемещение обратно в родительские каталоги**: Если вы хотите подключить ссылку внутри `projects/index.html`, указывающую на `pdfs/project-brief.pdf`, вам нужно будет подняться на уровень каталога, затем спустится в каталог `pdf`. "Подняться вверх на уровень каталога" обозначается двумя точками — `..` — так, URL-адрес, который вы используете `../pdfs/project-brief.pdf`:
```html
-
```
@@ -140,7 +147,8 @@ URL-адреса используют пути для поиска файлов.
Затем, чтобы связаться с этим конкретным `id`, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:
```html
-
Хотите написать мне письмо? Используйте наш
+
+ Хотите написать мне письмо? Используйте наш
почтовый адрес.
```
@@ -187,18 +195,13 @@ _Относительный URL_ будет указывать на различ
_**Хороший** текст ссылки:_ [Скачать Firefox](https://firefox.com)
```html
-
```
### Используйте атрибут download, когда создаёте ссылку
@@ -243,8 +252,9 @@ _**Плохой** текст ссылки:_ [Нажми сюда](https://firefo
Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут `download`, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:
```html
-
+
Скачать Firefox 39 для Windows
```
@@ -294,7 +304,8 @@ _**Плохой** текст ссылки:_ [Нажми сюда](https://firefo
Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):
```html
-
+
Send mail with cc, bcc, subject and body
```
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.md b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
index 1744f71c0c1331..acddfe4e486329 100644
--- a/files/ru/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
@@ -50,55 +50,58 @@ HTML не страдает от синтаксических ошибок, по
2. Далее, откройте её в браузере. Вы увидите нечто вроде этого :
3. Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа):
- ```html
-
HTML debugging examples
+ ```html
+
HTML debugging examples
-
What causes errors in HTML?
+
What causes errors in HTML?
-
-
Unclosed elements: If an element is not closed properly,
- then its effect can spread to areas you didn't intend
+
+
Unclosed elements: If an element is not closed properly,
+ then its effect can spread to areas you didn't intend
-
Badly nested elements: Nesting elements properly is also very important
- for code behaving correctly. strong strong emphasised?
- what is this?
+
Badly nested elements: Nesting elements properly is also very important
+ for code behaving correctly. strong strong emphasised?
+ what is this?
-
Unclosed attributes: Another common source of HTML problems. Let's
- look at an example: link to Mozilla
+ homepage
+
+ ```
4. Рассмотрим проблемы:
- - У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.
- - Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.
- - Следующая часть нарушает правила вложенности: `strong strong emphasised? what is this?`. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.
- - В атрибуте [`href`](/ru/docs/Web/HTML/Element/a#href) отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
+ - У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.
+ - Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.
+ - Следующая часть нарушает правила вложенности: `strong strong emphasised? what is this?`. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.
+ - В атрибуте [`href`](/ru/docs/Web/HTML/Element/a#href) отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на [Обзор инструментов разработки в браузерах](/ru/docs/Learn/Discover_browser_developer_tools).
6. В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: 
7. Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты):
- - Параграфы и элементы списка получены с закрывающими тегами.
- - Было неочевидно, где элемент `` должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!
- - Некорректная вложенность была исправлена браузером следующим образом:
-
- ```html
- strong
- strong emphasised?
-
- what is this?
- ```
-
- - Ссылка с отсутствующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так:
-
- ```html
-
- Unclosed attributes: Another common source of HTML problems.
- Let's look at an example:
-
- ```
+ - Параграфы и элементы списка получены с закрывающими тегами.
+ - Было неочевидно, где элемент `` должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!
+ - Некорректная вложенность была исправлена браузером следующим образом:
+
+ ```html
+ strong
+ strong emphasised?
+
+ what is this?
+ ```
+
+ - Ссылка с отсутствующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так:
+
+ ```html
+
+ Unclosed attributes: Another common source of HTML problems. Let's
+ look at an example:
+
+
+ ```
### Валидация HTML
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
index a6ad834a7676eb..c61d2518b1b854 100644
--- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -63,14 +63,17 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
Наш пример, представленный выше, содержит следующий код (Вы также можете [найти пример в нашем репозитории Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
```html
-
+
-
+
Заголовок моей страницы
-
-
+
+
+
-
-
+
+
-
Заголовок статьи
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
+ lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
+ viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
+ et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
+ congue enim, ut porta lorem lacinia consectetur.
+
Подраздел
-
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
+
+ Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
+ dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
+ Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
+
-
Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
+
+ Pelientesque auctor nisi id magna consequat sagittis. Curabitur
+ dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
+ Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
+
Ещё один подраздел
-
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
-
-
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.
+
+ Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
+ soclis natoque penatibus et manis dis parturient montes, nascetur
+ ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
+ facilisis semper ac in est.
+
+
+
+ Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
+ tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
+ ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
+ diam iaculis velit, is fringille sem nunc vet mi.
+
-
@@ -143,7 +168,6 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
-
```
@@ -169,9 +193,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:
```html
-
Пьяный Король возвратился в свою комнату в 01:00
-и всё никак не мог войти в дверь: хмель мешал [Примечание редактора: В этот момент
-свет на сцене должен быть приглушён].
+
+ Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в
+ дверь: хмель мешал
+ [Примечание редактора: В этот момент свет на сцене должен быть
+ приглушён].
+
```
В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.
@@ -183,12 +212,13 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
@@ -205,10 +235,12 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
` ` создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:
```html
-
Жила-была девчушка Нелл,
-Любившая писать HTML:
-Её семантика ужасна была —
-Она и сама прочитать ничего не могла.
+
+ Жила-была девчушка Нелл,
+ Любившая писать HTML:
+ Её семантика ужасна была —
+ Она и сама прочитать ничего не могла.
+
```
Без элемента ` ` абзац разместится в одну длинную линию (как было сказано ранее, [HTML игнорирует переносы строк](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML)), а с ним в коде — разметка будет выглядеть следующим образом:
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md
index c3d3a516059d1f..cafc3d3096b0f1 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md
@@ -15,6 +15,7 @@ tags:
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
original_slug: Learn/HTML/Введение_в_HTML/Начало_работы
---
+
{{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
@@ -60,11 +61,12 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы
```html hidden
Результат
-
-
+
Редактируемый код
-
Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).
+
+ Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).
+
';
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -360,8 +372,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -372,10 +387,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Показать решение') {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -398,9 +413,9 @@ textarea.onkeyup = function(){
Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):
```html
-
+
-
+
```
На выходе оба варианта будут выглядеть следующим образом:
@@ -434,7 +449,7 @@ textarea.onkeyup = function(){
```html
Ссылка к моему примеру.
-Ссылка к моему примеру.
+Ссылка к моему примеру.
```
Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
@@ -446,7 +461,9 @@ textarea.onkeyup = function(){
Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:
```html
-A link to my example.
+A link to my example.
```
Если вы хотите вставить кавычки того же типа, то вы должны использовать [объекты HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html). Например, это работать не будет:
@@ -458,7 +475,9 @@ textarea.onkeyup = function(){
Поэтому вам нужно сделать так:
```html
-A link to my example.
+A link to my example.
```
## Структура HTML документа
@@ -466,10 +485,10 @@ textarea.onkeyup = function(){
Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:
```html
-
+
-
+
Тестовая страница
@@ -482,12 +501,11 @@ textarea.onkeyup = function(){
1. ``: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:
- ```
-
- ```
+ ```html
+
+ ```
- Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. `` — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
+ Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. `` — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
2. ``: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент".
3. ``: Элемент {{htmlelement("head")}}. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
@@ -522,19 +540,20 @@ textarea.onkeyup = function(){
```html hidden
Результат
-
-
+
Редактируемый код
-
Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).
+
+ Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).
+
Мне очень нравится играть на барабанах. Мой любимый барабанщик — Нил Пирт, который\ играет в группе "Rush".\ Мой любимый альбом Rush — "Moving Pictures".
\ ';
+var htmlSolution =
+ '
Мне очень нравится играть на барабанах. Мой любимый барабанщик — Нил Пирт, который играет в группе "Rush". Мой любимый альбом Rush — "Moving Pictures".
';
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -619,8 +639,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -631,10 +654,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Показать решение') {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -650,7 +673,7 @@ textarea.onkeyup = function(){
Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:
-```html
+```html-nolint
Собаки глупы.
Собаки
@@ -675,7 +698,7 @@ textarea.onkeyup = function(){
В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:
-```html
+```html-nolint
В HTML вы определяете параграф элементом
.
В HTML вы определяете параграф элементом <p>.
@@ -694,7 +717,7 @@ textarea.onkeyup = function(){
Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры ``, например:
```html
-
Меня нет в комментариях(
+
Меня нет в комментариях(
```
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
index f9a9f481b5ab46..216af67fb9e131 100644
--- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -51,21 +51,24 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
Например, в рассказе `
` будет представлять заглавие рассказа, `
` обозначит название каждой главы, `
` будет обозначать подзаголовки в каждой главе и так далее.
```html
-
Сокрушительная скука
+
Сокрушительная скука
-
Крис Миллс
+
Крис Миллс
-
Глава 1: Тёмная ночь
+
Глава 1: Тёмная ночь
-
Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ...
+
Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ...
-
Глава 2: Вечное молчание
+
Глава 2: Вечное молчание
-
Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ...
+
Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ...
-
Призрак говорит
+
Призрак говорит
-
Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!»
+
+ Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул:
+ «Пожалуйста, помилуй мою душу!»
+
```
Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.
@@ -100,25 +103,28 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
```html hidden
Результат
-
-
+
Редактируемый код
-
Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
+ Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
";
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -202,8 +210,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -212,8 +223,8 @@ function insertAtCaret(text) {
textarea.scrollTop = scrollPos;
}
-textarea.onkeyup = function(){
- if(solution.value === 'Показать решение') {
+textarea.onkeyup = function () {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -240,7 +251,9 @@ textarea.onkeyup = function(){
С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:
```html
-Это заголовок верхнего уровня?
+Это заголовок верхнего уровня?
```
Это элемент {{htmlelement ("span")}}. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.
@@ -280,26 +293,29 @@ textarea.onkeyup = function(){
```html hidden
Результат
-
-
+
Редактируемый код
-
Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
+ Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
+
Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.
\n\n
Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.
\n\n
Ингредиенты
\n\n
\n
1 банка (400г) турецкого гороха (или бараньего гороха)
\n
175г тахани
\n
6 вяленых томатов
\n
Половинка красного перца
\n
Щепотка кайенского перца
\n
1 зубчик чеснока
\n
Чуть-чуть оливкового масла
\n
\n\n
Рецепт
\n\n\n
Очистите чеснок от кожуры и крупно нарежьте.
\n
Удалите стебель и семена у перца; крупно нарежьте.
\n
Добавьте все ингредиенты в пищевой комбайн.
\n
Измельчите все ингредиенты до состояния пасты.
\n
Если вы хотите "грубый" хумус, измельчайте пару минут.
\n
Если вам нужен гладкий хумус, измельчайте дольше.
\n\n\n
По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.
\n\n
Хранение
\n\n
Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.
\n\n
Хумус можно хранить в морозильном отделении 2–3 месяца.
';
+var htmlSolution =
+ '
Рецепт быстрого приготовления хумуса.
\n\n
Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.
\n\n
Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.
\n\n
Ингредиенты
\n\n
\n
1 банка (400г) турецкого гороха (или бараньего гороха)
\n
175г тахани
\n
6 вяленых томатов
\n
Половинка красного перца
\n
Щепотка кайенского перца
\n
1 зубчик чеснока
\n
Чуть-чуть оливкового масла
\n
\n\n
Рецепт
\n\n\n
Очистите чеснок от кожуры и крупно нарежьте.
\n
Удалите стебель и семена у перца; крупно нарежьте.
\n
Добавьте все ингредиенты в пищевой комбайн.
\n
Измельчите все ингредиенты до состояния пасты.
\n
Если вы хотите "грубый" хумус, измельчайте пару минут.
\n
Если вам нужен гладкий хумус, измельчайте дольше.
\n\n\n
По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.
\n\n
Хранение
\n\n
Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.
\n\n
Хумус можно хранить в морозильном отделении 2–3 месяца.
';
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -700,8 +734,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -710,8 +747,8 @@ function insertAtCaret(text) {
textarea.scrollTop = scrollPos;
}
-textarea.onkeyup = function(){
- if(solution.value === 'Показать решение') {
+textarea.onkeyup = function () {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -747,7 +784,8 @@ textarea.onkeyup = function(){
Очистите чеснок от кожуры и крупно нарежьте.
Удалите стебель и семена у перца; крупно нарежьте перец.
Добавьте все ингредиенты в пищевой комбайн.
-
Измельчите все ингредиенты до состояния пасты.
+
+ Измельчите все ингредиенты до состояния пасты.
Если вы хотите "грубый" хумус, измельчайте пару минут.
Если вам нужен гладкий хумус, измельчайте дольше.
@@ -797,8 +835,11 @@ textarea.onkeyup = function(){
При желании вы можете вложить важные и акцентированные слова друг в друга:
```html
-
Эта жидкость очень токсична —
-если ты выпьешь её, то можешь умереть.
+
+ Эта жидкость очень токсична — если ты выпьешь её,
+ то можешь умереть.
+
9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов торговом центре в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.
';
+var htmlSolution =
+ "
Важное объявление
\n
9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов торговом центре в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.
";
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -906,8 +951,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -918,10 +966,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Показать решение') {
+ if (solution.value === "Показать решение") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -950,8 +998,8 @@ HTML5 переопределил \, \ и \ с новыми, неско
```html
- Колибри обыкновенный (архилоус обыкновенный) —
-наиболее часто встречающийся вид колибри в северо-восточной Америке.
+ Колибри обыкновенный (архилоус обыкновенный) — наиболее часто
+ встречающийся вид колибри в северо-восточной Америке.
@@ -961,18 +1009,12 @@ HTML5 переопределил \, \ и \ с новыми, неско
-
- Когда-нибудь я узнаю, как гаварить без ошибок.
-
+
Когда-нибудь я узнаю, как гаварить без ошибок.
-
- Отрежьте два ломтика хлеба.
-
-
- Добавьте кусочек помидора и лист латука между ломтями хлеба.
-
+
Отрежьте два ломтика хлеба.
+
Добавьте кусочек помидора и лист латука между ломтями хлеба.
```
diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 18beb1da3c7a80..b135db3d9e073b 100644
--- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -38,10 +38,10 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
Давайте снова посмотрим на [HTML-документ из прошлой статьи](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B#%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0):
```html
-
+
-
+
Моя тестовая страница
@@ -54,7 +54,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
```html
-
+
Моя тестовая страница
```
@@ -72,18 +72,18 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
1. Чтобы приступить к активному изучению, скачайте страницу [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html) из нашего GitHub-репозитория. Это можно сделать двумя способами:
- 1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
- 2. Нажмите на странице кнопку "Raw", нажмите _Файл > Сохранить Как..._ в меню браузера и выберите папку для сохранения.
+ 1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
+ 2. Нажмите на странице кнопку "Raw", нажмите _Файл > Сохранить Как..._ в меню браузера и выберите папку для сохранения.
2. Откройте файл в браузере. Вы увидите что-то вроде этого:
- Теперь должно стать совершенно ясно, в чём разница между `<h1>` и `<title>`!
+ Теперь должно стать совершенно ясно, в чём разница между `<h1>` и `<title>`!
3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!
Содержимое элемента `<title>` используется и в других местах. Например, при добавлении страницы в избранное (_Bookmarks > Bookmark This Page_ в Firefox), текст из `<title>` предлагается в качестве названия закладки.
-
+
Текст из `<title>` также появляется в результатах поиска, как мы скоро увидим.
@@ -96,7 +96,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
В заголовке примера выше есть следующая строка:
```html
-<meta charset="utf-8">
+<meta charset="utf-8" />
```
В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . `utf-8` — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:
@@ -125,9 +125,11 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:
```html
-<meta name="author" content="Крис Миллс">
-<meta name="description" content="Задача MDN — в том, чтобы обучить
-новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">
+<meta name="author" content="Крис Миллс" />
+<meta
+ name="description"
+ content="Задача MDN — в том, чтобы обучить
+новичков всему тому, что нужно им для разработки веб-сайтов и приложений." />
```
По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.
@@ -142,13 +144,15 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите _Просмотреть код_ в контекстном меню.)
3. Найдите тег meta с описанием. Он выглядит так:
- ```html
- <meta name="description" content="Веб-документация на MDN
- предоставляет собой информацию об открытых веб-технологиях,
- включая HTML, CSS и различные API для веб-сайтов и
- прогрессивных веб-приложений. Также на сайте содержатся материалы
- для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
- ```
+ ```html
+ <meta
+ name="description"
+ content="Веб-документация на MDN
+ предоставляет собой информацию об открытых веб-технологиях,
+ включая HTML, CSS и различные API для веб-сайтов и
+ прогрессивных веб-приложений. Также на сайте содержатся материалы
+ для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." />
+ ```
4. Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из `<meta>` и `<title>` используется в результатах поиска, — мы не зря указали их!
@@ -165,20 +169,24 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
Например, [Протокол Open Graph](https://ruogp.me/) создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:
```html
-<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png">
-<meta property="og:description" content="Веб-документация на MDN предоставляет
+<meta
+ property="og:image"
+ content="https://developer.mozilla.org/mdn-social-share.png" />
+<meta
+ property="og:description"
+ content="Веб-документация на MDN предоставляет
собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
-продуктах Mozilla, как Инструменты разработчика Firefox.">
-<meta property="og:title" content="MDN Web Docs">
+продуктах Mozilla, как Инструменты разработчика Firefox." />
+<meta property="og:title" content="MDN Web Docs" />
```
-Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _[(User eXperience, UX](https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F))_.
+Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _[(User eXperience, UX](https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F))\_.
У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:
```html
-<meta name="twitter:title" content="MDN Web Docs">
+<meta name="twitter:title" content="MDN Web Docs" />
```
## Добавление иконок
@@ -192,23 +200,36 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
1. Сохраните изображение в формате `.ico` (многие браузеры поддерживают и в более привычных форматах, таких как `.gif` или `.png`) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат `.ico`
2. Добавьте ссылку на иконку в `<head>` документа:
- ```html
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- ```
+ ```html
+ <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+ ```
Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:
```html
<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
+<link
+ rel="apple-touch-icon-precomposed"
+ sizes="144x144"
+ href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- Для iPhone с Retina-экраном высокого разрешения: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
+<link
+ rel="apple-touch-icon-precomposed"
+ sizes="114x114"
+ href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- Для iPad первого и второго поколения: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
+<link
+ rel="apple-touch-icon-precomposed"
+ sizes="72x72"
+ href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
+<link
+ rel="apple-touch-icon-precomposed"
+ href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- Для других случаев - обычный favicon -->
-<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
+<link
+ rel="shortcut icon"
+ href="https://developer.mozilla.org/static/img/favicon32.png" />
```
В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении.
@@ -222,7 +243,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
- Элемент {{htmlelement("link")}} помещают в заголовок документа. У него есть два атрибута: `rel="stylesheet"` показывает, что мы указываем _стиль_ документа, а в `href` указан путь к файлу:
```html
- <link rel="stylesheet" href="my-css-file.css">
+ <link rel="stylesheet" href="my-css-file.css" />
```
- Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом `</body>`. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.
diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index e2ad1d87cef4e0..62095b3e430180 100644
--- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -41,10 +41,12 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
В качестве простого примера, следующий код создаёт круг и прямоугольник:
```html
-<svg version="1.1"
- baseProfile="full"
- width="300" height="200"
- xmlns="http://www.w3.org/2000/svg">
+<svg
+ version="1.1"
+ baseProfile="full"
+ width="300"
+ height="200"
+ xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
@@ -81,10 +83,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
```html
<img
- src="equilateral.svg"
- alt="triangle with all three sides equal"
- height="87px"
- width="100px" />
+ src="equilateral.svg"
+ alt="triangle with all three sides equal"
+ height="87px"
+ width="100px" />
```
#### Плюсы
@@ -103,7 +105,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в `src` атрибуте и использовать [`srcset`](/ru/docs/Web/HTML/Element/img#srcset) атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:
```html
-<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+<img
+ src="equilateral.png"
+ alt="triangle with equal sides"
+ srcset="equilateral.svg" />
```
Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:
@@ -124,7 +129,7 @@ background-size: contain;
```html
<svg width="300" height="200">
- <rect width="100%" height="100%" fill="green" />
+ <rect width="100%" height="100%" fill="green" />
</svg>
```
@@ -150,7 +155,7 @@ background-size: contain;
```html
<iframe src="triangle.svg" width="500" height="500" sandbox>
- <img src="triangle.png" alt="Triangle with three unequal sides" />
+ <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
```
@@ -170,11 +175,12 @@ background-size: contain;
```html hidden
<h2>Live output</h2>
-<div class="output" style="min-height: 50px;">
-</div>
+<div class="output" style="min-height: 50px;"></div>
<h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
<svg width="100%" height="100%">
@@ -189,8 +195,8 @@ background-size: contain;
</textarea>
<div class="playable-buttons">
- <input id="reset" type="button" value="Reset">
- <input id="solution" type="button" value="Show solution" disabled>
+ <input id="reset" type="button" value="Reset" />
+ <input id="solution" type="button" value="Show solution" disabled />
</div>
```
@@ -217,10 +223,10 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;
@@ -228,38 +234,38 @@ function updateCode() {
output.innerHTML = textarea.value;
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var htmlSolution = '';
+var htmlSolution = "";
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -271,8 +277,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -283,10 +292,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Show solution') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
index e97c4847e7daa1..1c6d92a71574de 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -22,13 +22,13 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
Например, если ваше изображение называется `dinosaur.jpg`, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:
```html
-<img src="dinosaur.jpg">
+<img src="dinosaur.jpg" />
```
Если изображение было в поддиректории `images` , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:
```html
-<img src="images/dinosaur.jpg">
+<img src="images/dinosaur.jpg" />
```
И так далее.
@@ -38,7 +38,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
Вы можете встроить изображение используя абсолютный URL, например:
```html
-<img src="https://www.example.com/images/dinosaur.jpg">
+<img src="https://www.example.com/images/dinosaur.jpg" />
```
Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.
@@ -82,7 +82,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
Что именно вы должны писать в атрибут `alt`? В первую очередь, это зависит от того, _зачем_ изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:
- **Декорация.** Вы должны использовать [Фоновые изображения CSS](#фоновые_изображения_css) для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой `alt=""`. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
-- **Контент.** Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий `alt`. Или даже лучше, в *главном* тексте, который все увидят. Не используйте `alt` , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы *параграфы* были написаны дважды в _главном контенте_? Если изображение адекватно описано в основном тексте, можете просто использовать `alt=""`.
+- **Контент.** Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий `alt`. Или даже лучше, в _главном_ тексте, который все увидят. Не используйте `alt` , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы _параграфы_ были написаны дважды в _главном контенте_? Если изображение адекватно описано в основном тексте, можете просто использовать `alt=""`.
- **Ссылка.** Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны [использовать чёткие формулировки описания ссылок](/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>` или атрибут `alt` . Старайтесь выбрать лучший вариант.
- **Текст.** Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого [CSS](/ru/docs/Web/CSS/text-shadow) вместо добавления текста в изображение. Однако, если _действительно этого не избежать_, то вам следует дополнить текст в атрибуте `alt`.
@@ -95,11 +95,12 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
Вы можете использовать атрибуты `width` и `height`, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:
```html
-<img src="images/dinosaur.jpg"
- alt="The head and torso of a dinosaur skeleton;
+<img
+ src="images/dinosaur.jpg"
+ alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
- width="400"
- height="341">
+ width="400"
+ height="341" />
```
Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:
@@ -117,12 +118,13 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
Как и для [ссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), вы также можете добавить атрибут `title` для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:
```html
-<img src="images/dinosaur.jpg"
- alt="The head and torso of a dinosaur skeleton;
+<img
+ src="images/dinosaur.jpg"
+ alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
- width="400"
- height="341"
- title="A T-Rex on display in the Manchester University Museum">
+ width="400"
+ height="341"
+ title="A T-Rex on display in the Manchester University Museum" />
```
Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:
@@ -149,8 +151,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
```html hidden
<h2>Input</h2>
-<textarea id="code" class="input">
-<img></textarea>
+<textarea id="code" class="input"><img></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
@@ -161,10 +162,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
```css hidden
body {
- font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+ font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}
-.input, .output {
+.input,
+.output {
width: 90%;
height: 10em;
padding: 10px;
@@ -188,13 +190,14 @@ function drawOutput() {
output.innerHTML = textarea.value;
}
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
textarea.value = code;
drawOutput();
});
-solution.addEventListener("click", function() {
-textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
+solution.addEventListener("click", function () {
+ textarea.value =
+ '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
drawOutput();
});
@@ -210,11 +213,12 @@ window.addEventListener("load", drawOutput);
```html
<div class="figure">
- <img src="images/dinosaur.jpg"
- alt="The head and torso of a dinosaur skeleton;
+ <img
+ src="images/dinosaur.jpg"
+ alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
- width="400"
- height="341">
+ width="400"
+ height="341" />
<p>A T-Rex on display in the Manchester University Museum.</p>
</div>
@@ -259,8 +263,7 @@ window.addEventListener("load", drawOutput);
```html hidden
<h2>Input</h2>
-<textarea id="code" class="input">
-</textarea>
+<textarea id="code" class="input"></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
@@ -271,10 +274,11 @@ window.addEventListener("load", drawOutput);
```css hidden
body {
- font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+ font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}
-.input, .output {
+.input,
+.output {
width: 90%;
height: 10em;
padding: 10px;
@@ -298,13 +302,14 @@ function drawOutput() {
output.innerHTML = textarea.value;
}
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
textarea.value = code;
drawOutput();
});
-solution.addEventListener("click", function() {
-textarea.value = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
+solution.addEventListener("click", function () {
+ textarea.value =
+ '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
drawOutput();
});
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
index d993fc73ad7f37..891b2c93e4bfc9 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
@@ -1,5 +1,5 @@
---
-title: 'Проверьте свои знания: Изображения в HTML'
+title: "Проверьте свои знания: Изображения в HTML"
slug: >-
Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images
translation_of: >-
@@ -57,7 +57,7 @@ original_slug: >-
1. Поместите свою работу в онлайн-редактор, например [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/). Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.
2. Напишите сообщение с просьбой об оценке и / или помощи в [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
- - Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
- - Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
- - Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
- - Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.
+ - Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
+ - Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
+ - Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
+ - Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 617644582d46b3..cb6d8cc5d1fd20 100644
--- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -10,7 +10,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
| Предпосылки: | Базовая компьютерная грамотность, [установка базового программного обеспечения](/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), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), знакомство с основами HTML (как описано в разделе [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)) и предыдущими статьями в этом модуле. |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Задача: | Узнать, как встраивать элементы в веб-страницы, используя {{htmlelement ("object")}}, {{htmlelement ("embed")}} и {{htmlelement ("iframe")}}, например, флеш-ролики и другие веб-страницы |
+| Задача: | Узнать, как встраивать элементы в веб-страницы, используя {{htmlelement ("object")}}, {{htmlelement ("embed")}} и {{htmlelement ("iframe")}}, например, флеш-ролики и другие веб-страницы |
## Краткая история внедрения
@@ -44,18 +44,21 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
```html hidden
<h2>Live output</h2>
-<div class="output" style="min-height: 250px;">
-</div>
+<div class="output" style="min-height: 250px;"></div>
<h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
-<textarea id="code" class="input" style="width: 95%;min-height: 100px;">
-</textarea>
+<textarea
+ id="code"
+ class="input"
+ style="width: 95%;min-height: 100px;"></textarea>
<div class="playable-buttons">
- <input id="reset" type="button" value="Reset">
- <input id="solution" type="button" value="Show solution">
+ <input id="reset" type="button" value="Reset" />
+ <input id="solution" type="button" value="Show solution" />
</div>
```
@@ -82,10 +85,10 @@ body {
```
```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;
@@ -93,38 +96,39 @@ function updateCode() {
output.innerHTML = textarea.value;
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
textarea.value = solutionEntry;
- solution.value = 'Hide solution';
+ solution.value = "Hide solution";
} else {
textarea.value = userEntry;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
}
updateCode();
});
-var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
+var htmlSolution =
+ '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
var solutionEntry = htmlSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -136,8 +140,11 @@ function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
- var front = (textarea.value).substring(0, caretPos);
- var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ var front = textarea.value.substring(0, caretPos);
+ var back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -148,10 +155,10 @@ function insertAtCaret(text) {
// Update the saved userCode every time the user updates the text area code
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
- if(solution.value === 'Show solution') {
+ if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -251,24 +258,31 @@ textarea.onkeyup = function(){
Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:
-| | {{htmlelement("embed")}} | {{htmlelement("object")}} |
-| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| {{glossary("URL")}} встраиваемого контента | [`src`](/ru/docs/Web/HTML/Element/embed#src) | [`data`](/ru/docs/Web/HTML/Element/object#data) |
-| _точный_ {{glossary("MIME type", 'media type')}} встраиваемого контента | [`type`](/ru/docs/Web/HTML/Element/embed#type) | [`type`](/ru/docs/Web/HTML/Element/object#type) |
-| высота и ширина (в пикселях) элемента, управляемого плагином | [`height`](/ru/docs/Web/HTML/Element/embed#height) [`width`](/ru/docs/Web/HTML/Element/embed#width) | [`height`](/ru/docs/Web/HTML/Element/object#height) [`width`](/ru/docs/Web/HTML/Element/object#width) |
-| имена и значения, предоставляемые плагину в качестве параметров | Особые атрибуты,с их именами и значениями | одиночные элементы {{htmlelement("param")}}, находящиеся внутри `<object>` |
-| независимый HTML-контент в качестве резерва для отсутствующего ресурса | не поддерживается (`<noembed>` является устаревшим) | содержится внутри `<object>`, после элементов `<param>` |
+| | {{htmlelement("embed")}} | {{htmlelement("object")}} |
+| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| {{glossary("URL")}} встраиваемого контента | [`src`](/ru/docs/Web/HTML/Element/embed#src) | [`data`](/ru/docs/Web/HTML/Element/object#data) |
+| _точный_ {{glossary("MIME type", 'media type')}} встраиваемого контента | [`type`](/ru/docs/Web/HTML/Element/embed#type) | [`type`](/ru/docs/Web/HTML/Element/object#type) |
+| высота и ширина (в пикселях) элемента, управляемого плагином | [`height`](/ru/docs/Web/HTML/Element/embed#height) [`width`](/ru/docs/Web/HTML/Element/embed#width) | [`height`](/ru/docs/Web/HTML/Element/object#height) [`width`](/ru/docs/Web/HTML/Element/object#width) |
+| имена и значения, предоставляемые плагину в качестве параметров | Особые атрибуты,с их именами и значениями | одиночные элементы {{htmlelement("param")}}, находящиеся внутри `<object>` |
+| независимый HTML-контент в качестве резерва для отсутствующего ресурса | не поддерживается (`<noembed>` является устаревшим) | содержится внутри `<object>`, после элементов `<param>` |
> **Примечание:** Элементу `<object>` необходим атрибут `data` , атрибут `type` , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут [`typemustmatch`](/ru/docs/Web/HTML/Element/object#typemustmatch) (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут `typemustmatch` предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут `typemustmatch` может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников {{glossary("origin")}} (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).
Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на [live on Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html), а также на [check the source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html)):
```html
-<embed src="whoosh.swf" quality="medium"
- bgcolor="#ffffff" width="550" height="400"
- name="whoosh" align="middle" allowScriptAccess="sameDomain"
- allowFullScreen="false" type="application/x-shockwave-flash"
- pluginspage="http://www.macromedia.com/go/getflashplayer">
+<embed
+ src="whoosh.swf"
+ quality="medium"
+ bgcolor="#ffffff"
+ width="550"
+ height="400"
+ name="whoosh"
+ align="middle"
+ allowScriptAccess="sameDomain"
+ allowFullScreen="false"
+ type="application/x-shockwave-flash"
+ pluginspage="http://www.macromedia.com/go/getflashplayer" />
```
Достаточно ужасно, не так ли? Html-код, генерируемый Flash, имел склонность быть значительно хуже. Он использовал элемент `<object>` вместе со встроенным элементом `<embed>` для скрытия всего фундамента (взгляните на пример). Flash ранее использовался в качестве резерва для HTML5-видео (в случае его отсутствия), но со временем необходимость в этом отпала.
@@ -276,9 +290,16 @@ textarea.onkeyup = function(){
Давайте взглянем на пример `<object>` , встраивающего PDF в страницу (взгляните [live example](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) и [source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)):
```html
-<object data="mypdf.pdf" type="application/pdf"
- width="800" height="1200" typemustmatch>
- <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
+<object
+ data="mypdf.pdf"
+ type="application/pdf"
+ width="800"
+ height="1200"
+ typemustmatch>
+ <p>
+ You don't have a PDF plugin, but you can
+ <a href="mypdf.pdf">download the PDF file.</a>
+ </p>
</object>
```
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
index 387daafe2872da..85eccbefac4d36 100644
--- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -10,7 +10,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
| Требования: | Предполагается, что вы уже знакомы с [основами HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) и умеете [добавлять статичные изображения на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Цель: | Узнать, как использовать такие элементы, как [`srcset`](/ru/docs/Web/HTML/Element/img#srcset) и {{htmlelement("picture")}} чтобы обеспечить работу гибких изображения на веб-сайтах. |
+| Цель: | Узнать, как использовать такие элементы, как [`srcset`](/ru/docs/Web/HTML/Element/img#srcset) и {{htmlelement("picture")}} чтобы обеспечить работу гибких изображения на веб-сайтах. |
## Почему адаптивные изображения?
@@ -49,19 +49,23 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один путь к файлу:
```html
-<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
```
Однако есть два новых атрибута — [`srcset`](/ru/docs/Web/HTML/Element/img#srcset) и [`sizes`](/ru/docs/Web/HTML/Element/img#sizes) — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) (также смотри [источник кода](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)).
```html
-<img srcset="elva-fairy-320w.jpg 320w,
- elva-fairy-480w.jpg 480w,
- elva-fairy-800w.jpg 800w"
- sizes="(max-width: 320px) 280px,
+<img
+ srcset="
+ elva-fairy-320w.jpg 320w,
+ elva-fairy-480w.jpg 480w,
+ elva-fairy-800w.jpg 800w
+ "
+ sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
- src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ src="elva-fairy-800w.jpg"
+ alt="Elva dressed as a fairy" />
```
Атрибуты `srcset` и `sizes` кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:
@@ -72,13 +76,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
2. Пробел.
3. **Актуальная ширина картинки** **в пикселах** (`480w`) — заметьте, что здесь используется `w` вместо `px`, как вы могли ожидать. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать
- <kbd>Cmd</kbd>
+ <kbd>Cmd</kbd>
- \+
+ \+
- <kbd>I</kbd>
+ <kbd>I</kbd>
- , чтобы вывести информацию на экран).
+ , чтобы вывести информацию на экран).
**`sizes`** определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:
@@ -118,10 +122,10 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя `srcset` с x-дескриптором и без `sizes` — более простой синтаксис! Найти пример как это выглядит можно здесь [srcset-resolutions.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (смотрите также [the source code](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
```html
-<img srcset="elva-fairy-320w.jpg,
- elva-fairy-480w.jpg 1.5x,
- elva-fairy-640w.jpg 2x"
- src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+<img
+ srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
+ src="elva-fairy-640w.jpg"
+ alt="Elva dressed as a fairy" />
```
В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
@@ -141,16 +145,16 @@ img {
Возвращаясь к нашему оригинальному примеру [not-responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html), мы имеем изображение которое очень нуждается в художественном оформлении:
```html
-<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
```
Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как [`<video>` и `<audio>`](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content), элемент `<picture>` это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) выглядит так:
```html
<picture>
- <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
- <source media="(min-width: 800px)" srcset="elva-800w.jpg">
- <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
+ <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
+ <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>
```
@@ -176,9 +180,11 @@ img {
```html
<picture>
- <source type="image/svg+xml" srcset="pyramid.svg">
- <source type="image/webp" srcset="pyramid.webp">
- <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+ <source type="image/svg+xml" srcset="pyramid.svg" />
+ <source type="image/webp" srcset="pyramid.webp" />
+ <img
+ src="pyramid.png"
+ alt="regular pyramid built from four equilateral triangles" />
</picture>
```
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 80fb79fae02a06..b960721abb6095 100644
--- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -9,8 +9,8 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.
| Предпосылки: | Базовая компьютерная грамотность, [установка базового ПО](/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), базовые знания [работа с файлами](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), знакомство с основами HTML (как описано в [Начало работы с HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started)) и [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Задача: | Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача: | Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. |
## Аудио и видео в Интернете
@@ -28,7 +28,10 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
```html
<video src="rabbit320.webm" controls>
- <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p>
+ <p>
+ Ваш браузер не поддерживает HTML5 видео. Используйте
+ <a href="rabbit320.webm">ссылку на видео</a> для доступа.
+ </p>
</video>
```
@@ -83,9 +86,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
```html
<video controls>
- <source src="rabbit320.mp4" type="video/mp4">
- <source src="rabbit320.webm" type="video/webm">
- <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p>
+ <source src="rabbit320.mp4" type="video/mp4" />
+ <source src="rabbit320.webm" type="video/webm" />
+ <p>
+ Ваш браузер не поддерживает HTML5 видео. Вот
+ <a href="rabbit320.mp4">ссылка на видео</a> взамен.
+ </p>
</video>
```
@@ -100,12 +106,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
Есть ряд других параметры, которые вы можете включить в HTML5 элемент `video`. Взгляните на наш третий пример:
```html
-<video controls width="400" height="400"
- autoplay loop muted
- poster="poster.png">
- <source src="rabbit320.mp4" type="video/mp4">
- <source src="rabbit320.webm" type="video/webm">
- <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+<video
+ controls
+ width="400"
+ height="400"
+ autoplay
+ loop
+ muted
+ poster="poster.png">
+ <source src="rabbit320.mp4" type="video/mp4" />
+ <source src="rabbit320.webm" type="video/webm" />
+ <p>
+ Your browser doesn't support HTML5 video. Here is a
+ <a href="rabbit320.mp4">link to the video</a> instead.
+ </p>
</video>
```
@@ -139,9 +153,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
```html
<audio controls>
- <source src="viper.mp3" type="audio/mp3">
- <source src="viper.ogg" type="audio/ogg">
- <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+ <source src="viper.mp3" type="audio/mp3" />
+ <source src="viper.ogg" type="audio/ogg" />
+ <p>
+ Your browser doesn't support HTML5 audio. Here is a
+ <a href="viper.mp3">link to the audio</a> instead.
+ </p>
</audio>
```
@@ -204,9 +221,9 @@ WEBVTT
```html
<video controls>
- <source src="example.mp4" type="video/mp4">
- <source src="example.webm" type="video/webm">
- <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+ <source src="example.mp4" type="video/mp4" />
+ <source src="example.webm" type="video/webm" />
+ <track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
</video>
```
diff --git a/files/ru/learn/html/tables/advanced/index.md b/files/ru/learn/html/tables/advanced/index.md
index 5fed22d1acebc5..fcb8a68659a60b 100644
--- a/files/ru/learn/html/tables/advanced/index.md
+++ b/files/ru/learn/html/tables/advanced/index.md
@@ -18,7 +18,9 @@ translation_of: Learn/HTML/Tables/Advanced
```html
<table>
- <caption>Dinosaurs in the Jurassic period</caption>
+ <caption>
+ Dinosaurs in the Jurassic period
+ </caption>
...
</table>
@@ -65,16 +67,16 @@ translation_of: Learn/HTML/Tables/Advanced
5. Далее, добавьте атрибут [`colspan`](/ru/docs/Web/HTML/Element/td#colspan), чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в `<head>` вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода:
- ```css
- tbody {
- font-size: 90%;
- font-style: italic;
- }
+ ```css
+ tbody {
+ font-size: 90%;
+ font-style: italic;
+ }
- tfoot {
- font-weight: bold;
- }
- ```
+ tfoot {
+ font-weight: bold;
+ }
+ ```
7. Сохраните, обновите и вы увидите результат. Если `<tbody>` и `<tfoot>` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
@@ -83,109 +85,110 @@ translation_of: Learn/HTML/Tables/Advanced
Ваша готовая таблица должна выглядеть примерно так:
```html hidden
-<!DOCTYPE html>
+<!doctype html>
<html>
<head>
- <meta charset="utf-8">
+ <meta charset="utf-8" />
<title>My spending record
-
...
-
```
diff --git a/files/ru/learn/html/tables/basics/index.md b/files/ru/learn/html/tables/basics/index.md
index 8b17a0641a2e81..432eb951c323bb 100644
--- a/files/ru/learn/html/tables/basics/index.md
+++ b/files/ru/learn/html/tables/basics/index.md
@@ -116,18 +116,18 @@ HTML-таблицы следует использовать для таблич
2. Содержимое любой таблицы заключается между двумя тегами : **[`
`](/ru/docs/Web/HTML/Element/table)**. Добавьте их в тело HTML.
3. Самым маленьким контейнером в таблице является ячейка, она создаётся элементом **[`
`](/ru/docs/Web/HTML/Element/td)** ('td' - сокращение от 'table data'). Введите внутри тегов table следующее:
- ```html
-
Hi, I'm your first cell.
- ```
+ ```html
+
Hi, I'm your first cell.
+ ```
4. Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
- ```html
-
Hi, I'm your first cell.
-
I'm your second cell.
-
I'm your third cell.
-
I'm your fourth cell.
- ```
+ ```html
+
Hi, I'm your first cell.
+
I'm your second cell.
+
I'm your third cell.
+
I'm your fourth cell.
+ ```
Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент `
` создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.
@@ -135,14 +135,14 @@ HTML-таблицы следует использовать для таблич
1. Поместите четыре уже созданных ячейки между тегами `
` как здесь показано:
- ```html
-
-
Hi, I'm your first cell.
-
I'm your second cell.
-
I'm your third cell.
-
I'm your fourth cell.
-
- ```
+ ```html
+
+
Hi, I'm your first cell.
+
I'm your second cell.
+
I'm your third cell.
+
I'm your fourth cell.
+
+ ```
2. Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент `
`, а каждая ячейка должна быть внутри `элемента
`.
@@ -318,8 +318,8 @@ HTML-таблицы следует использовать для таблич
```html
-
-
+
+
Data 1
@@ -342,7 +342,7 @@ HTML-таблицы следует использовать для таблич
```html
-
+
```
diff --git a/files/ru/learn/html/tables/index.md b/files/ru/learn/html/tables/index.md
index 8e1c1eebe3c457..85c5d7e39e2de8 100644
--- a/files/ru/learn/html/tables/index.md
+++ b/files/ru/learn/html/tables/index.md
@@ -3,6 +3,7 @@ title: HTML таблицы
slug: Learn/HTML/Tables
translation_of: Learn/HTML/Tables
---
+
{{LearnSidebar}}
Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей ([CSS](/ru/docs/Learn/CSS)) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.
diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.md b/files/ru/learn/html/tables/structuring_planet_data/index.md
index b731dec6f997e1..60c7b3f6e655ff 100644
--- a/files/ru/learn/html/tables/structuring_planet_data/index.md
+++ b/files/ru/learn/html/tables/structuring_planet_data/index.md
@@ -1,5 +1,5 @@
---
-title: 'Аттестация: Структурирование данных о планетах'
+title: "Аттестация: Структурирование данных о планетах"
slug: Learn/HTML/Tables/Structuring_planet_data
tags:
- HTML
@@ -57,10 +57,10 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data
1. Разместите свою работу в онлайн-редакторе, таком как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/).
2. Напишите сообщение с просьбой об оценке и/или помощи в [разделе обучения на форуме MDN Discourse](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
- - Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».
- - Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.
- - Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.
- - Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.
+ - Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».
+ - Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.
+ - Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.
+ - Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ 
- 
';
+var htmlSolution =
+ '