gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
guide/russian/html/elements/a-tag/index.md Normal file
View File

@@ -0,0 +1,46 @@
---
title: A Tag
localeTitle: День
---
## Тег
Тег `<a>` или элемент _привязки_ создает гиперссылку на другую страницу или файл. Чтобы ссылаться на другую страницу или файл, тег `<a>` должен также содержать атрибут `href` , который указывает назначение ссылки.
Ссылка между открывающим и закрывающим тегами `<a>` становится ссылкой.
По умолчанию в текущем окне браузера отображается связанная страница, если не указана другая цель.
#### Пример:
```html
<a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>
```
Изображение также можно превратить в ссылку, заключая `<img>` тег `<a>` .
#### Пример:
```html
<a href= "https://guide.freecodecamp.org/"><img src="logo.svg"></a>
```
Также возможно определить цель тега `<a>` . Это делается с использованием `target` атрибута. Атрибут `target` имеет следующие значения: `_blank|_self|_parent|_top|framename` .
`_blank` : открывает ссылку на новой вкладке или в новом окне в зависимости от предпочтений пользователя. `_self` : открывает ссылку в том же фрейме (поведение по умолчанию). `_parent` : открывает ссылку в родительском фрейме, например, когда пользователь нажимает ссылку в iframe. `_top` : открывает ссылку во всей полноте окна. `framename` : Открывает ссылку в указанном фрейме.
#### Пример:
```html
<a href= "https://guide.freecodecamp.org/" target="_blank">freeCodeCamp</a>
```
[freeCodeCamp](https://guide.freecodecamp.org/) Эта ссылка создается так же, как предлагает пример кода. Нажмите, чтобы посмотреть, как это работает.
#### Дополнительная информация:
* [Элемент HTML <a>: MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
* [Тег: w3schools](https://www.w3schools.com/tags/tag_a.asp)
* [Тег: htmlreference.io](http://htmlreference.io/element/a/)

19
guide/russian/html/elements/abbr-tag/index.md Normal file
View File

@@ -0,0 +1,19 @@
---
title: Abbr Tag
localeTitle: Abbr Tag
---
## Abbr Tag
Тег `<abbr>` обозначает аббревиатуру. Это может занять атрибут `title` , чтобы объяснить аббревиатуру.
Пример использования:
```html
<abbr title="Free Code Camp">FCC</abbr>
```
#### Дополнительная информация:
* [Элемент HTML <abbr>: MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)
* [Расширенное форматирование текста: сокращения](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations)

36
guide/russian/html/elements/address-tag/index.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Address Tag
localeTitle: Адрес тега
---
## Адрес тега
Элементы формы Bootstrap расширяют наши стили формы перезагрузки с помощью классов. Используйте эти классы, чтобы выбрать их настроенные дисплеи для более последовательного отображения в браузерах и устройствах.
Обязательно используйте атрибут соответствующего типа на всех входах (например, адрес электронной почты для адреса электронной почты или номер для цифровой информации), чтобы использовать преимущества новых элементов управления входами, таких как проверка электронной почты, выбор номера и многое другое.
Вот краткий пример демонстрации стилей формы Bootstrap. Продолжайте читать документацию по требуемым классам, форме макета и т. Д.
#### использование
```html
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```

11
guide/russian/html/elements/area-tag/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Area Tag
localeTitle: Тег области
---
## Тег области
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/area-tag/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

27
guide/russian/html/elements/article-tag/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Article Tag
localeTitle: Тег статьи
---
## Тег статьи
Тег `<article>` представляет собой автономный контент в документе. Статья должна быть независимой от остальной страницы, предназначенной для распространения и повторного использования.
Тег `<article>` был добавлен в HTML5 и поддерживается основными браузерами.
### пример
Ниже приведен пример использования тега статьи на веб-странице:
```html
<article>
<h1>FreeCodeCamp</h1>
<p>
Learn to code with a community of programmers and contribute to open source projects.
</p>
</article>
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/tr/docs/Web/HTML/Element/article)

11
guide/russian/html/elements/aside-tag/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Aside Tag
localeTitle: Другие теги
---
## Другие теги
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/aside-tag/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

53
guide/russian/html/elements/audio-tag/index.md Normal file
View File

@@ -0,0 +1,53 @@
---
title: Audio Tag
localeTitle: Аудио тег
---
## Аудио теги
Тег < **_audio_** > определяет аудио-элемент, который можно использовать для добавления ресурса аудиоресурсов в HTML-документ, который будет воспроизводиться встроенной поддержкой воспроизведения звука, встроенного в браузер, а не в плагин браузера.
Звуковой тег в настоящее время поддерживает три формата файлов OGG, MP3 и WAV, которые можно добавить в ваш html следующим образом.
##### Добавление OGG
```
<audio controls>
<source src="file.ogg" type="audio/ogg">
</audio>
```
##### Добавление MP3
```
<audio controls>
<source src="file.mp3" type="audio/mpeg">
</audio>
```
##### Добавление WAV
```
<audio controls>
<source src="file.wav" type="audio/wav">
</audio>
```
Он может содержать один или несколько источников звука, представленных с использованием атрибута src или исходного элемента.
##### Добавление нескольких аудиофайлов
```
<audio controls>
<source src="file-1.wav" type="audio/wav">
<source src="file-2.ogg" type="audio/ogg">
<source src="file-3.mp3" type="audio/mpeg">
</audio>
```
#### Поддержка браузера для разных типов файлов выглядит следующим образом
| Браузер | Mp3 | Wav | Ogg | | -------: | ---: | ---: | ---: | | Internet Explorer | Да | Нет | Нет | | Google Chrome | Да | Да | Да | | Mozilla Firefox | Да | Да | Да | | Сафари | Да | Да | Нет | | Опера | Да | Да | да
### Поддерживаемые атрибуты
| Атрибут | Значение | Описание | | -------: | ---: | ---: | | автовоспроизведение | автовоспроизведение | Звук начнется, как только он будет готов | | управление | управление | аудио будет отображаться (например, кнопка воспроизведения / паузы и т. д.) | | loop | loop | audio начнется снова, каждый раз, когда он будет завершен | | muted | muted | аудио выход будет отключен | | src | URL | Указывает URL-адрес аудиофайла |
#### Дополнительная информация:
[https://www.w3schools.com/tags/tag\_audio.asp](https://www.w3schools.com/tags/tag_audio.asp) [https://html.com/tags/audio/](https://html.com/tags/audio/) [https://html.com/tags/audio/#ixzz5Sg4QbtH8](https://html.com/tags/audio/#ixzz5Sg4QbtH8)

24
guide/russian/html/elements/b-tag/index.md Normal file
View File

@@ -0,0 +1,24 @@
---
title: B Tag
localeTitle: B день
---
## Тег B
Тег `<b>` используется для выделения жирного текста без какого-либо особого значения или значимости. При выделенном тексте особого значения или релевантности рекомендуется использовать `<strong>` .
### Пример:
```html
<b>This text is bold</b>
```
Это может выглядеть так:
**Этот текст выделен жирным шрифтом**
#### Дополнительная информация:
1. [w3schools](https://www.w3schools.com/tags/tag_b.asp "<b> Тег: w3schools")
2. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)

11
guide/russian/html/elements/base-tag/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Base Tag
localeTitle: Базовый тег
---
## Базовый тег
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/base-tag/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

29
guide/russian/html/elements/blockquote-tag/index.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: Blockquote Tag
localeTitle: Тег Blockquote
---
## Тег Blockquote
### Цель
Элемент HTML `<blockquote>` выделяет цитату из окружающего содержимого. Это позволяет читателю ясно видеть цитату как материал, приписываемый ее оригинальному автору.
### использование
Подобно тому, как теги «H» посылают сигнал читателю, что информация важна, блок-код предупреждает читателя, что информация, которую они читают, принадлежит внешнему источнику. Тег `<blockquote>` может включать URL-адрес источника цитаты, который может быть задан с использованием атрибута cite, тогда как текстовое представление источника может быть задано с помощью элемента `<cite>` .
### пример
```html
<blockquote cite="https://www.cnet.com/news/tim-cook-maintains-steve-jobs-beatles-business-model/">
“My model for business is The Beatles. They were four guys who kept each other's kind of negative tendencies in check.
They balanced each other and the total was greater than the sum of the parts.
That's how I see business: great things in business are never done by one person, they're done by a team of people.”
</blockquote>
<cite>Steve Jobs</cite>
```
#### Дополнительная информация:
[blockquote MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)

25
guide/russian/html/elements/body-tag/index.md Normal file
View File

@@ -0,0 +1,25 @@
---
title: Body Tag
localeTitle: Тег тела
---
## Тег тела
Тег `<body>` содержит контент для веб-страницы. Наряду с `<head>` , это один из двух необходимых элементов документа HTML. `<body>` должен быть вторым потомком элемента `<html>` . На странице может быть только один элемент `<body>` .
Элемент `<body>` должен содержать все содержимое страницы, включая все элементы отображения. Элемент `<body>` также может содержать теги `<script>` , обычно скрипты, которые должны запускаться после загрузки содержимого страницы.
```html
<html>
<head>
<title>Document Titles Belong in the Head</title>
</head>
<body>
<p>This paragraph is content. It goes in the body!</p>
</body>
</html>
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)

29
guide/russian/html/elements/br-tag/index.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: Br Tag
localeTitle: Бр. День
---
## Br Tag
Тег `<br>` создает разрыв строки в тексте. Это полезно для стихов и адресов.
### пример
```html
<!DOCTYPE html>
<html>
<body>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</body>
</html>
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
[br tag: w3schools](https://www.w3schools.com/tags/tag_br.asp)

56
guide/russian/html/elements/button-tag/index.md Normal file
View File

@@ -0,0 +1,56 @@
---
title: Button Tag
localeTitle: Значок кнопки
---
## Значок кнопки
Тег `<button>` указывает кнопку clickable в документе HTML. Между тегами `<button>` вы можете размещать контент, например текст или изображения. Это отличается от кнопки, созданной с помощью `<input>` , который принимает текст только как контент.
**Синтаксис:**
`<button type="submit">Click Here!</button>`
**Atributes:**
Ниже приведен соответствующий атрибут, поддерживаемый HTML 4:
| **Атрибуты** | **Значение** | **Что он делает** | | --- | --- | --- | | отключен | отключен | Отключает кнопку | | имя | имя | Указывает имя кнопки. Имя предназначено для ссылки на кнопку в HTML-форме, JS и т. Д. | | тип | кнопку или сбросить или отправить | Устанавливает тип кнопки. Кнопка с типом `button` - это простая кнопка для клика, с типом `submit` она отправляет данные формы, а с типом `reset` она сбрасывает данные формы. | | стоимость | текст | Устанавливает начальное значение для кнопки. Это значение отправляется вместе с данными формы. |
HTML 5 поддерживает следующие дополнительные атрибуты:
| **Атрибуты** | **Значение** | **Что он делает** | | --- | --- | --- | | автофокус | автофокус | Если кнопка автоматически получает фокус при загрузке страницы. Например, см. Google. Когда страница загружается полностью, текстовое поле автоматически фокусируется. | | форма | form\_id | Указывает одну или несколько форм, которым принадлежит кнопка. | | формование | URL | Указывает, куда отправлять данные формы после нажатия кнопки типа `submit` . | | formmethod | получить или отправить | Указывает, как отправить данные формы. Только для кнопки типа `submit` . | | formtarget | `_blank` или `_self` или `_parent` или `_top` или framename | Определяет место, где результат должен отображаться после отправки данных формы. |
**Пример:**
```html
<html>
<head>
<title>Button Tag example</title>
</head>
<body>
<form>
First name:<br>
<input type="text" name="firstname" value="Free">
<br>
Last name:<br>
<input type="text" name="lastname" value="CodeCamp">
<br><br>
<input type="submit" value="Submit" formtarget="_self">
</form>
</body>
</html>
```
Все основные браузеры поддерживают `<button>` . Тег `<button>` также поддерживает атрибуты событий в HTML. **Примечание.** Различные браузеры могут отправлять разные значения, если вы используете элемент `<button>` . Рекомендуется указывать значение кнопки или использовать `<input>` для создания кнопки в форме HTML.
**Другие источники:**
* Другие атрибуты:
| **Атрибуты** | **Ссылка** | | --- | --- | | formenctype | https://www.w3schools.com/TAgs/att _button_ formenctype.asp | | формовалидат | https://www.w3schools.com/TAgs/att _button_ formnovalidate.asp |
* `<input>` : https://www.w3schools.com/TAgs/tag\_input.asp
* Атрибуты событий: https://www.w3schools.com/TAgs/ref\_eventattributes.asp
* `formtarget` атрибутов `formtarget` : https://www.w3schools.com/TAgs/att _button_ formarget.asp
* Форма HTML:

11
guide/russian/html/elements/canvas-tag/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Canvas Tag
localeTitle: Тег холста
---
## Тег холста
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/canvas-tag/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

12
guide/russian/html/elements/center-tag/index.md Normal file
View File

@@ -0,0 +1,12 @@
---
title: Center Tag
localeTitle: Центральный тег
---
## Центральный тег
В HTML `<center>` используется для центрирования текста на странице. Вы можете написать `<center>` как `<center>My Text Here</center>` Функция не рекомендуется использовать. Тег `<center>` устарел в HTML 4, эта функция может быть удалена из веб-браузеров в любое время. Рекомендуется использовать CSS `text-align` для центра текста.
#### Дополнительная информация:
* [MDN - тег HTML-центра](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
* [MDN - выравнивание текста CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)

16
guide/russian/html/elements/code-tag/index.md Normal file
View File

@@ -0,0 +1,16 @@
---
title: Code Tag
localeTitle: Кодовый тег
---
## Кодовый тег
Тег `<code>` содержит часть компьютерного кода для веб-страницы. По умолчанию `<code>` отображается в моноширинном шрифте браузера по умолчанию.
```html
<code>A piece of computer code</code>
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)

32
guide/russian/html/elements/comment-tag/index.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: Comment Tag
localeTitle: Как тегировать
---
## Добавить комментарий
Комментарии - это теги, которые используются для вывода заметок в документе. Только разработчик имеет доступ к комментариям, конечный пользователь не видит, если они не проверяют с элементом инспектора браузера.
Когда вы работаете в некотором коде, полезно оставить советы другим разработчикам, чтобы понять, о чем идет речь.
### пример
```html
<!-- This is a comment -->
```
Комментарии также могут использоваться, чтобы сделать код неактивным, не удаляя его целиком.
### пример
```html
<!--
<h1>Hello Campers</h1>
-->
<h2>Hello Friends</h2>
<!--
<p>Hello Paragraph</p>
-->
```

25
guide/russian/html/elements/div-tag/index.md Normal file
View File

@@ -0,0 +1,25 @@
---
title: Div Tag
localeTitle: Тег Div
---
## Тег Div
Тег `<div>` является общим контейнером, который определяет раздел в вашем документе HTML. Элемент `<div>` используется для группировки разделов элементов HTML вместе и форматирования их с помощью CSS. A `<div>` - элемент уровня блока. Это означает, что он занимает свою собственную линию на экране. Элементы сразу после `<div>` будут сдвинуты вниз до строки ниже. Для подобных группировок и стилей, которые не являются блочными, но встроенными, вместо этого вы должны использовать `<span>` . Тег используется для группировки встроенных элементов в документе.
### пример
Вот пример того, как отображать раздел одного цвета:
```html
<div style="color:#ff0000">
<h3>my heading</h3>
<p>my paragraph</p>
</div>
```
#### Дополнительная информация:
[Tutorialspoint](https://www.tutorialspoint.com/html/html_div_tag.htm)
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)

27
guide/russian/html/elements/doctype-tag/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Doctype Tag
localeTitle: Тег Doctype
---
## Тег Doctype
HTML-код всегда сопровождается «шаблоном» тегов. Самый первый тег, найденный в любом файле HTML, должен быть объявлением Doctype. Html5 doctype `<!DOCTYPE html>` - это обязательная преамбула, используемая для информирования браузера о том, какой [режим рендеринга](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode) использовать (HTML5 и XHTML). Обязательно поместите doctype в самый верх документа.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Document Title</title>
</head>
<body>
<p>Document content.</p>
</body>
</html>
```
#### Дополнительная информация:
* [Doctype: MDN](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
* [Введение в HTML5: MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5)
* [Режим Quirks и режим стандартов: MDN](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)

24
guide/russian/html/elements/em-tag/index.md Normal file
View File

@@ -0,0 +1,24 @@
---
title: Em Tag
localeTitle: В тегах
---
## Em Tag
Тег `<em>` используется для подчеркивания текста в документе HTML. Это можно сделать, обернув текст, который вы хотите подчеркнуть, в `<em>` . Большинство браузеров будут отображать текст, заключенный в `<em>` как выделенный курсивом.
Примечание. Тег `<em>` не следует использовать для стилизации текста курсивом. Тег `<em>` используется для подчеркивания текста.
### Пример:
```
<body>
<p>
Text that requires emphasis should go <em>here</em>.
</p>
</body>
```
#### Дополнительная информация:
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
* [em tag: w3schools](https://www.w3schools.com/tags/tag_em.asp)
* [em tag: htmlreference.io](http://htmlreference.io/element/em/)

11
guide/russian/html/elements/fieldsets-and-legends/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Fieldsets and Legends
localeTitle: Наборы и легенды
---
#### Предлагаемое чтение:
См. [Сайт WebAIM](http://webaim.org/techniques/forms/controls) для доступных примеров форм - в частности, часть о переключателях
#### Проект статьи:
Объяснение и примеры для группировки связанных элементов в форме с элементами `fieldset` и `legend`

27
guide/russian/html/elements/font-tag/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Font Tag
localeTitle: Шрифт
---
## Шрифт
_Эта функция была устарела в HTML 4.01 и удалена в HTML 5._
HTML Font Element `<font>` определяет размер шрифта, цвет и лицо для его содержимого. Он был нормализован в HTML 3.2, но затем устарел в HTML 4.01 и теперь устарел в HTML5. Хотя он по-прежнему может работать в некоторых браузерах, рекомендуется прекратить использовать его, поскольку он может быть удален в любое время. Стилизация шрифтов может быть достигнута и намного лучше контролируется с помощью CSS, ведь все стили должны быть написаны только с использованием CSS.
**Предыдущее** поведение элемента `<font>` :
* **Цвет:** этот атрибут позволяет установить цвет текста либо с именованным цветом, как «синий», или шестнадцатеричный цвет в формате #RRGGBB.
* **Лицо:** этот атрибут позволяет установить семейство шрифтов и будет содержать список из одного или нескольких имен шрифтов, разделенных запятыми. Если первый шрифт в списке не поддерживается браузером, он переместится на второй шрифт. Если шрифт не поддерживается или не указан, браузер обычно по умолчанию использует шрифт для этой системы.
* **Размер:** этот атрибут позволяет указать размер шрифта. Это можно сделать двумя способами: установить числовое значение или относительное значение. Числовые значения варьируются от 1 до 7, 1 - наименьшее, а 3 - по умолчанию. Относительные значения, например -2 или +2, устанавливают значение по отношению к размеру элемента `<basefont>` или '3' значения по умолчанию.
Пример:
```html
<font face="fontNameHere" size="7" color="blue">My Text Here</font>
```
#### Дополнительная информация:
* [МДН - тег шрифта HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)
* [MDN - CSS-шрифт](https://developer.mozilla.org/en-US/docs/Web/CSS/font)

27
guide/russian/html/elements/footer-tag/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Footer Tag
localeTitle: Нижний колонтитул
---
## Нижний колонтитул
Тег `<footer>` обозначает нижний колонтитул HTML-документа или раздела. Как правило, нижний колонтитул содержит информацию об авторе, информацию об авторских правах, контактную информацию и карту сайта. Любая контактная информация внутри `<footer>` должна находиться внутри `<address>` .
### пример
```html
<html>
<head>
<title>Paragraph example</title>
</head>
<body>
<footer>
<p>&copy; 2017 Joe Smith</p>
</footer>
</body>
</html>
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)

58
guide/russian/html/elements/form-tag/index.md Normal file
View File

@@ -0,0 +1,58 @@
---
title: Form Tag
localeTitle: Тег формы
---
## Тег формы
Тег `<form>` используется для создания форм в HTML, которые предназначены для ввода пользователем. Когда пользователь вводит данные и отправляет их, данные отправляются на обрабатываемый сервер.
Вот пример использования `<form>` :
```html
<form action="/example.php" method="get">
Name: <input type="text"><br>
Email Address: <input type="text"><br>
<input type="submit" value="Submit">
</form>
```
### Атрибут действия
Каждому элементу `<form>` нужен атрибут действия. Значение атрибута action - это URL-адрес сервера, который будет получать данные в форме при их отправке.
Вот пример использования атрибута action:
```html
<form action="http://www.google.com/form.php" method="get">
<p>Controls will appear inside here.</p>
</form>
```
Как вы можете видеть, форма отправляет свои данные на URL [http://www.google.com/from.php](http://www.google.com/from.php) .
### метод
Формы могут быть представлены с использованием метода GET или POST.
* Метод GET идеален для более коротких форм, поскольку он привязывает данные к концу URL-адреса, указанного внутри атрибута действия.
* Метод POST идеально подходит для форм, которые длиннее или когда вы добавляете или удаляете информацию из базы данных. С помощью метода POST значения формы отправляются в заголовках HTTP.
### элементы
Элемент `<form>` будет иметь по крайней мере один из следующих элементов, вложенных внутри него:
* [`<input>`](https://guide.freecodecamp.org/html/elements/input "вход")
* [`<button>`](https://guide.freecodecamp.org/html/elements/button-tag "кнопка")
* [`<label>`](https://guide.freecodecamp.org/html/elements/label-tag "этикетка")
* [`<select>`](https://guide.freecodecamp.org/html/elements/select-tag "Выбрать")
* [`<textarea>`](https://guide.freecodecamp.org/html/elements/textarea-tag "Textarea")
* [`<fieldset>`](https://guide.freecodecamp.org/html/elements/fieldsets-and-legends "Fieldset")
### Ресурсы
* [W3 Schools Form Resource](https://www.w3schools.com/tags/tag_form.asp "W3 Школы")
* [Ресурс формы Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form "Форма Mozilla")

15
guide/russian/html/elements/head-tag/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Head Tag
localeTitle: Главный тег
---
## Главный тег
Тег `<head>` содержит информацию о веб-странице. Наряду с `<body>` , это один из двух обязательных элементов HTML-документа. `<head>` должен быть первым дочерним элементом `<html>` . На странице может быть только один элемент `<head>` .
Элемент `<head>` содержит информацию о том, как должна отображаться веб-страница, также известная как метаданные. Заголовок документа, ссылки на таблицы стилей и теги `<script>` связанные с файлами JavaScript, должны быть помещены в `<head>` . `<head>` не должен содержать содержимого страницы.
`html <html> <head> <title>Document Titles Belong in the Head</title> </head> <body> <p>This paragraph is content. It goes in the body!</p> </body> </html>`
#### Дополнительная информация:
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)

30
guide/russian/html/elements/header-tag/index.md Normal file
View File

@@ -0,0 +1,30 @@
---
title: Header Tag
localeTitle: Тэг заголовка
---
## Тэг заголовка
Тег `<header>` - это контейнер, который используется для навигационных ссылок или вводного содержимого. Он может обычно включать элементы заголовка, такие как `<h1>` , `<h2>` , но может также включать в себя другие элементы, такие как форма поиска, логотип, информация автора и т. Д.
# соответствует самому важному заголовку. Когда мы переходим к другим тегам, например
## ,
### , и т. д. степень значимости уменьшается. Хотя это и не требуется, `<header>` предназначен для размещения заголовка окружающих разделов. Он также может использоваться несколько раз в документе HTML. Важно отметить, что `<header>` не вводит новый раздел, а просто является главой раздела.
Вот пример, использующий `<header>` :
```html
<article>
<header>
<h1>Heading of Page</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
```
#### Дополнительная информация:
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
* [W3 Школы](https://www.w3schools.com/tags/tag_header.asp)

26
guide/russian/html/elements/hr-tag/index.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: Hr Tag
localeTitle: Хр. День
---
## Hr Tag
Горизонтальное правило или `<hr>` - это тег, который позволяет вставлять разделительную линию, определяя содержимое вашего документа. Очень важно уточнить, что этот тег является тематическим перерывом; в предыдущих версиях .html - это горизонтальное правило.
### пример
```
<!DOCTYPE html>
<html>
<body>
<h2>FreeCodeCamp</h2>
<p>FreeCodeCamp is a place where you can learn to code from scratch to professional</p>
<hr>
<h3>How to start</h3>
<p>Just go to <a href="www.freecodecamp.com">FreeCodeCamp website and start learning!</a></p>
<hr>
</body
</html>
```

20
guide/russian/html/elements/i-tag/index.md Normal file
View File

@@ -0,0 +1,20 @@
---
title: I Tag
localeTitle: I Tag
---
## I Tag
Элемент `<i>` используется для обозначения текста, который каким-то образом отличается от окружающего текста. По умолчанию текст, окруженный тегами `<i>` будет отображаться курсивом.
В предыдущих спецификациях HTML тег `<i>` использовался исключительно для обозначения текста, выделенного курсивом. Однако в современном семантическом HTML следует использовать теги, такие как `<em>` и `<strong>` . Вы можете использовать атрибут «class» элемента `<i>` чтобы указать, почему текст в тегах отличается от текста. Вы можете показать, что текст или фраза написаны на другом языке, как в приведенном ниже примере.
```HTML
<p>The French phrase <i class="french">esprit de corps</i> is often
used to describe a feeling of group cohesion and fellowship.</p>
```
#### Дополнительная информация:
* [Элемент HTML <i>: MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i)
* [Я помещаю: w3schools](https://www.w3schools.com/tags/tag_i.asp)
* [Я помещаю: htmlreference.io](http://htmlreference.io/element/i/)

33
guide/russian/html/elements/iframe-tag/index.md Normal file
View File

@@ -0,0 +1,33 @@
---
title: Iframe Tag
localeTitle: Тег iframe
---
## Тег iframe
Теги iframe используются для добавления существующей веб-страницы или приложения на ваш сайт в пределах заданного пространства.
При использовании тегов iframe атрибут src следует использовать для указания местоположения веб-страницы или приложения для использования внутри фрейма.
```html
<iframe src="framesite/index.html"></iframe>
```
Вы можете установить атрибуты ширины и высоты для ограничения размера фрейма.
```html
<iframe src="framesite/index.html" height="500" width="200"></iframe>
```
Iframes имеет границу по умолчанию, если вы хотите удалить ее, вы можете сделать это, используя атрибут style и задав свойства рамки CSS none.
```html
<iframe src="framesite/index.html" height="500" width="200" style="border:none;"></iframe>
```
#### Дополнительная информация:
* [MDN - HTML-тег iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
* [W3 - спецификация iframe HTML 5.2](https://www.w3.org/TR/html5/semantics-embedded-content.html#the-iframe-element)

36
guide/russian/html/elements/img-tag/index.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Img Tag
localeTitle: Img Tag
---
## Img Tag
Простой элемент HTML-изображения может быть включен в HTML-документ следующим образом:
```html
<img src="path/to/image/file" alt="this is a cool picture">
```
`alt` теги предоставляют альтернативный текст для изображения. Одно использование тега `alt` для людей с ослабленным зрением с помощью устройства чтения с экрана; они могут быть прочитаны меткой `alt` изображения, чтобы понять смысл изображения.
Обратите внимание, что путь к файлу изображения может быть как относительным, так и абсолютным. Кроме того, помните, что элемент `img` является самозакрывающимся, что означает, что он не закрывается `<img />` и закрывается только с одним `>` .
Пример:
```html
<img src="https://example.com/image.png" alt="my picture">
```
(Предполагается, что html-файл находится в https://example.com/index.html, поэтому он находится в той же папке, что и файл изображения)
такой же как:
```html
<img src="image.png" alt="my picture">
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) [W3Schools](https://www.w3schools.com/TAGs/tag_img.asp)

118
guide/russian/html/elements/index.md Normal file
View File

@@ -0,0 +1,118 @@
---
title: Elements
localeTitle: элементы
---
# Элементы HTML
Элементы являются строительными блоками HTML, которые описывают структуру и содержимое веб-страницы. Они являются частью «Разметки» языка разметки гипертекста (HTML).
Синтаксис HTML использует угловые скобки («<» и «>») для хранения имени элемента HTML. Элементы обычно имеют открывающий тег и закрывающий тег и предоставляют информацию о содержании, которое они содержат. Разница между ними заключается в том, что закрывающий тег имеет косую черту.
Вот пример использования [элемента p](#) ( `<p>` ), чтобы сообщить браузеру, что группа текста является абзацем:
```html
<p>This is a paragraph.</p>
```
Теги открытия и закрытия должны совпадать, иначе браузер может отображать содержимое неожиданным образом.
![XKCD комикс, показывающий текст «Q: Как вы раздражаете разработчика?» окруженный меткой открытия div и тегом закрытия закрытия](http://imgs.xkcd.com/comics/tags.png)
## Самозакрывающиеся элементы
Некоторые элементы HTML являются самозакрывающимися, что означает, что у них нет отдельного закрывающего тега. Самозакрывающиеся элементы обычно вставляют что-то в ваш документ.
Примером может служить [элемент br](#) ( `<br>` ), который вставляет текст в текст. Раньше самозакрывающиеся теги имели прямую косую черту ( `<br />` ), однако спецификация HTML5 больше не требует этого.
## Функциональность HTML-элемента
Существует много доступных элементов HTML. Вот список некоторых функций, которые они выполняют:
* предоставить информацию о самой веб-странице (метаданные)
* структурировать содержимое страницы на разделы
* вставлять изображения, видео, аудиоклипы или другие мультимедиа
* создавать списки, таблицы и формы
* предоставить больше информации о определенном текстовом содержимом
* ссылка на таблицы стилей, в которых есть правила о том, как браузер должен отображать страницу
* добавьте скрипты, чтобы сделать страницу более интерактивной и динамичной
## Вложения HTML-элементов
Вы можете вставлять элементы внутри других элементов в HTML-документ. Это помогает определить структуру страницы. Просто убедитесь, что теги ближе к самому внутреннему элементу.
Верный: `<p>This is a paragraph that contains a <span>span element.</span></p>`
Неправильно: `<p>This is a paragraph that contains a <span>span element.</p></span>`
## Блочные и встроенные элементы
Элементы входят в две общие категории, известные как блочные и встроенные. Элементы уровня блока автоматически начинаются с новой строки, а встроенные элементы - в окружающем контенте.
Элементы, которые помогают структурировать страницу на разделы, такие как панель навигации, заголовки и абзацы, обычно являются элементами уровня блока. Элементы, которые вставляют или предоставляют больше информации о контенте, обычно являются встроенными, такими как [ссылки](#) или [изображения](#) .
## Элемент HTML
Существует элемент `<html>` который используется для размещения другой разметки для HTML-документа. Он также известен как «корневой» элемент, поскольку он является родителем других элементов HTML и содержимого страницы.
Вот пример страницы с [элементом головы, элементом](#the-head-element) [тела](#the-body-element) и одним [абзацем](#the-p-element) :
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I'm a paragraph</p>
</body>
</html>
```
## Элемент HEAD
Это контейнер для обработки информации и метаданных для HTML-документа.
```html
<head>
<meta charset="utf-8">
</head>
```
## Элемент BODY
Это контейнер для отображаемого содержимого HTML-документа.
```html
<body>...</body>
```
## Элемент P
Создает абзац, возможно, самый распространенный элемент уровня блока.
```html
<p>...</p>
```
## Элемент A (Link)
Создает гиперссылку для прямых посетителей на другую страницу или ресурс.
```html
<a href="#">...</a>
```
## Другие источники
* [HTML-абзацы](#)
* [HTML br](#)
* [Ссылки на HTML](#)
* [Изображения HTML](#)
* [Заголовок HTML](#)
* [Тело HTML](#)
* [HTML DOCTYPE](#)

82
guide/russian/html/elements/input-tag/index.md Normal file
View File

@@ -0,0 +1,82 @@
---
title: Input Tag
localeTitle: Входной тег
---
## вход
HTML-тег можно включить в документ HTML следующим образом:
```html
<input type="text">
```
Это создает область, в которой пользователь может легко вводить информацию. Затем эта информация отправляется в базовую базу данных и сохраняется или используется далее в веб-сайте или приложении.
Ввод с «type = 'text» будет создавать однострочное поле, в котором можно ввести любую информацию. Другие распространенные типы входных данных включают, но не ограничиваются: кнопка, флажок, цвет, электронная почта и пароль.
### Наиболее распространенные типы
* `text` : однострочное текстовое поле.
* `button` : кнопка без по умолчанию.
* `submit` : кнопка, которая отправляет форму.
* `checkbox` : флажок, позволяющий выбирать / отменять значения.
* `date` : для ввода даты (год, месяц и день).
* `email` : для редактирования адреса электронной почты.
* `file` : Позволяет пользователю выбрать файл.
* `hidden` : не отображается, но его значение отправляется на сервер.
* `number` : для ввода числа.
* `password` : однострочное текстовое поле, значение которого закрыто.
* `radio` : переключатель, позволяющий выбрать одно значение из нескольких вариантов.
* `range` : элемент управления для ввода числа.
* `url` : для ввода URL-адреса.
Пример:
```html
<input type="button">
<input type="checkbox">
<input type="color">
<input type="email">
<input type="password">
```
Входы имеют множество предопределенных атрибутов.
Некоторые обычно обнаруживаемые атрибуты включают автозаполнение, проверку и замещение.
```html
<input type="text" placeholder="This is a placeholder">
```
В приведенном выше примере отображается область, в которую вводится ввод, с заполнителем, в котором указано «Это местозаполнитель». После нажатия кнопки ввода и нажатия клавиши заполнитель исчезает и заменяется вашим собственным входом.
```html
<input type="checkbox" checked>
```
В этом случае появляется флажок, и по умолчанию он проверяется атрибутом «checked».
Существует много разных типов входов и связанных атрибутов, которые можно найти в ссылке, приведенной ниже.
#### Дополнительная информация:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
https://www.w3schools.com/tags/tag\_input.asp

13
guide/russian/html/elements/input-types/index.md Normal file
View File

@@ -0,0 +1,13 @@
---
title: Input Types
localeTitle: Типы входных данных
---
## Типы входных данных
Входным элементам HTML может быть присвоен атрибут «тип». Тип входного элемента определяет тип данных, которые пользователь может ввести. По умолчанию ввод представляет собой текст, но другие параметры включают флажки, простые кнопки или цвет (с использованием шестнадцатеричных кодов).
#### Дополнительная информация:
[Школы W3: Тип ввода](https://www.w3schools.com/tags/att_input_type.asp)
[MDN:](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)

62
guide/russian/html/elements/label-tag/index.md Normal file
View File

@@ -0,0 +1,62 @@
---
title: Label Tag
localeTitle: День этикетки
---
# Метка метки
< **_label_** > определяет метку для тип элемента / тега.
### использование
```
<label for="id">Label</label>
<input type="text" name="text" id="id" value="yourvalue"><br>
```
Как вы можете видеть, атрибут _for_ для тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе.
### Поддержка платформы
| Браузер | Поддержка элементов | | -----: |: -------------: | | Internet Explorer |: белый _галочка_ : | | Mozilla Firefox |: белый _галочка_ : | | Google Chrome |: белый _галочка_ : | | Opera |: белый _галочка_ : | | Safari |: белый _галочка_ : |
### Атрибуты
| Атрибут | Значение | Описание | | -------: |: ----: | ---------: | | Для | элемент _id | Определяет, какой элемент формы привязан к метке | | form | form_ id | Указывает одну или несколько форм, к которой принадлежит метка |
### Глобальный атрибут
Тег < **label** > поддерживает глобальные атрибуты в HTML.
### Атрибут события
Тег < **label** > поддерживает атрибуты событий в HTML.
> Элемент < **label** > не отображает ничего особенного для пользователя. Тем не менее, он обеспечивает улучшение удобства использования для пользователей мыши, потому что, если пользователь нажимает на текст внутри элемента, он переключает элемент управления.
#### Дополнительная информация:
# [https://www.w3schools.com/jsref/dom _obj_ label.asp](https://www.w3schools.com/jsref/dom_obj_label.asp)
## этикетка
Тег `<label>` определяет метку для элемента `<input>` .
Метка может быть привязана к элементу либо с использованием атрибута «для», либо путем размещения элемента внутри элемента.
```html
<label for="peas">Do you like peas?
<input type="checkbox" name="peas" id="peas">
</label>
```
```html
<label>Do you like peas?
<input type="checkbox" name="peas">
</label>
```
#### Дополнительная информация:
[MDN - Tagel Tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
[W3School - ярлык](https://www.w3schools.com/tags/tag_label.asp)

181
guide/russian/html/elements/li-tag/index.md Normal file
View File

@@ -0,0 +1,181 @@
---
title: Li Tag
localeTitle: Li Tag
---
## Li Tag
Тег `<li>` определяет элемент списка в списке. Тег `<li>` может использоваться с неупорядоченными списками ( `<ul>` ), упорядоченными списками ( `<ol>` ) и меню ( `<menu>` ).
Чтобы определить элемент списка, оберните нужные элементы в `<li>` . Элементы `<li>` должны содержаться внутри родительского элемента, который является списком.
### пример
```html
<body>
<ul>
<li>
<p>I'm a list item</p>
</li>
<li>
<p>I'm a list item too</p>
</li>
<li>
<p>Me three/p>
</li>
</ul>
</body>
```
В упорядоченном списке `<li>` отображается как элемент с маркером.
* Первый пункт
* Второй пункт
* Третий пункт
В неупорядоченном списке `<li>` отображается как нумерованный элемент.
1. Первый пункт
2. Второй пункт
3. Третий пункт
Этот цифровой счетчик может быть настроен с использованием свойства CSS _стиля в стиле списка_ .
Примеры:
```html
<!-- In a simple unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- In a simple ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- In a menu list -->
<menu>
<li>Menu item one</li>
<li>Menu item two</li>
<li>Menu item three</li>
</menu>
```
### Атрибуты
Элемент `<li>` имеет следующие элементы:
#### Тип
Атрибут `type` определяет тип нумерации, который будет использоваться в списке. Для определения стиля нумерации используются следующие значения:
* `1` : номера
* `a` : строчные буквы
* `A` : прописные буквы
* `i` : строчные цифры
* `I` : верхние цифры
#### пример
```html
<body>
<ol type="I">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
```
Вышеуказанный HTMl будет выводить:
1. Элемент списка
2. Элемент списка
3. Элемент списка
#### Стоимость
Атрибут `value` указывает числовой порядок текущего `<li>` . Этот атрибут принимает только числовое значение и может использоваться только с упорядоченным списком. Любые элементы списка, которые будут следовать, будут упорядочены численно на основе числового ввода атрибута `value` .
#### пример
```html
<body>
<ol>
<li value="4">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
```
Вышеупомянутый HTML выводит:
4. Элемент списка
5. Элемент списка
6. Элемент списка
### Вложение другого списка в качестве элемента
Помимо создания отдельных элементов, вы также можете использовать теги `<li>` для создания вложенного списка, упорядоченного или неупорядоченного. Для этого вы вставляете `<ol>` или `<ul>` _в_ `<li>` .
Вот неупорядоченный список с вложенным упорядоченным списком.
* Первый пункт
* Второй пункт
1. Первый подпункт
2. Второй подпункт
* Третий пункт
И вот упорядоченный список с вложенным неупорядоченным списком.
1. Первый пункт
2. Второй пункт
* Первый подпункт
* Второй подпункт
1. Третий пункт
```html
<!-- An unordered list with a nested, ordered list. -->
<ul>
<li>First item</li>
<li>Second item <!-- No closing </li> tag before the nested list -->
<ol>
<li>First sub-item</li>
<li>Second sub-item</li>
</ol>
</li> <!-- The closing </li> tag comes after the nested list -->
<li>Third item</li>
</ul>
<!-- An ordered list with a nested, unordered list. -->
<ol>
<li>First item</li>
<li>Second item <!-- No closing </li> tag before the nested list -->
<ul>
<li>First sub-item</li>
<li>Second sub-item</li>
</ul>
</li> <!-- The closing </li> tag comes after the nested list -->
<li>Third item</li>
</ol>
```
#### Дополнительная информация:
* [Элемент HTML <li>: MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
* [HTML <li> тег: w3schools](https://www.w3schools.com/cssref/pr_list-style-type.asp)
* [CSS list-style Свойство: CSS-Tricks](https://css-tricks.com/almanac/properties/l/list-style/)

11
guide/russian/html/elements/link-tag/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Link Tag
localeTitle: Ссылка тега
---
## Ссылка тега
Элемент link может использоваться для привязки соответствующего контента с другой веб-страницы или документа. Теги ссылок обычно включают реализацию CSS в HTML-документ.
#### Дополнительная информация:
[MDN: тег ссылки](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)

69
guide/russian/html/elements/lists/index.md Normal file
View File

@@ -0,0 +1,69 @@
---
title: Lists
localeTitle: Списки
---
## Списки
В HTML есть три типа списков. Все списки должны содержать один или несколько элементов списка.
### Неупорядоченный список HTML
Неупорядоченный список начинается с `<ul>` а элементы списка начинаются с `<li>` . В неупорядоченных списках все элементы списка, отмеченные марками по умолчанию.
\`\` \`
* Пункт
* Пункт
* Пункт
\`\` \` Вывод:
* Пункт
* Пункт
* Пункт
### Упорядоченный HTML-список
Упорядоченный список начинается с `<ol>` а элементы списка начинаются с `<li>` . В упорядоченных списках все элементы списка отмечены цифрами.
\`\` \`
1. Первый предмет
2. Второй пункт
3. Третий пункт
\`\` \` Вывод:
1. Первый предмет
2. Второй пункт
3. Третий пункт
### Список описания HTML
Список описаний содержит элементы списка с их определенными значениями. Мы используем `<dl>` для запуска списка, `<dt>` чтобы определить термин и `<dd>` чтобы описать каждый термин.
\`\` \`
freeCodeCamp
Научитесь кодировать бесплатные онлайн-курсы, проекты программирования и подготовку интервью для рабочих мест разработчиков.
GitHub
GitHub - это репозиторий управления репозиториями Git или версии и интернет-хостинг. Он в основном используется для кода.
\`\` \` Вывод:
freeCodeCamp
Научитесь кодировать бесплатные онлайн-курсы, проекты программирования и подготовку интервью для рабочих мест разработчиков.
GitHub
GitHub - это репозиторий управления репозиториями Git или версии и интернет-хостинг. Он в основном используется для кода.
#### Дополнительная информация:
[HTML](https://html.com/lists/)
[w3schools](https://www.w3schools.com/html/html_lists.asp)

29
guide/russian/html/elements/main-tag/index.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: Main Tag
localeTitle: Основной день
---
## Основной тег
Тег `<main>` работает аналогично тегу `<div>` но семантически представляет основное содержание документа или части документа. Можно использовать несколько тегов `<main>` , например, для основного содержимого различных статей, поэтому его содержимое должно быть уникальным для документа и не повторяться в другом месте.
### пример
Следующий пример иллюстрирует использование `<main>` :
```html
<!-- other content -->
<main>
<h1>Diary Entry 31</h1>
<p>Oct 23 2017</p>
<article>
<h2>Today Is Unique</h2>
<p>This information will be unique among other articles.</p>
</article>
</main>
<!-- other content -->
```

29
guide/russian/html/elements/meta-tag/index.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: Meta Tag
localeTitle: Метатег
---
## Метатег
Тег `<meta>` предоставляет метаданные о документе HTML.
Эти метаданные используются для указания кодировки, описания, ключевых слов, автора и окна просмотра страницы.
Эти метаданные не будут отображаться на самом веб-сайте, но будут использоваться броузерами и поисковыми системами, чтобы определить, как страница будет отображать контент и оценивать поисковую оптимизацию (SEO).
Метаданные назначаются документа HTML:
```html
<head>
<meta charset="UTF-8">
<meta name="description" content="Short description of website content here">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jane Smith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user's visible area of a web page. A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. -->
</head>
```
#### Дополнительная информация:
За дополнительной информацией о тег, перейдите по следующему адресу: (https://www.w3schools.com/TAgs/tag\_meta.asp "w3schools.com тег") (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta "MDN тег")

23
guide/russian/html/elements/nav-tag/index.md Normal file
View File

@@ -0,0 +1,23 @@
---
title: Nav Tag
localeTitle: Значок Nav
---
## Значок Nav
Тег `<nav>` предназначен для основного блока навигационных ссылок. НЕ все ссылки документа должны находиться внутри элемента `<nav>` .
Браузеры, такие как устройства чтения с экрана для отключенных пользователей, могут использовать этот элемент, чтобы определить, следует ли опустить первоначальный рендеринг этого содержимого.
#### пример
\`\` \`html
* [Главная](#)
* [Около](#)
* [контакт](#)
\`\` \`
#### Дополнительная информация:
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)

32
guide/russian/html/elements/ol-tag/index.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: ol Tag
localeTitle: ol Tag
---
## ol Tag
Тег `<ol>` создает упорядоченный элемент списка в HTML. Упорядоченный список является одной из двух структур списка в HTML, другой - неупорядоченным списком, созданным тегом `<ul>` . Упорядоченные списки используются для отображения списков со значимым порядком. По умолчанию элементы списка в упорядоченном списке отображаются в виде пронумерованного списка, начиная с 1. Это поведение может быть изменено с помощью атрибута «type» или с использованием стилей CSS. Элементы списка могут быть вложенными.
```html
<ol>
<li>First Item</li>
<li>Second Item <!-- No closing </li> tag before the nested list -->
<ol>
<li>First Subitem</li>
<li>Second Subitem</li>
</ol>
</li> <!-- The closing </li> tag comes after the nested list -->
<li>Third Item</li>
</ol>
```
### Упорядоченные или неупорядоченные списки
В HTML упорядоченные и неупорядоченные списки схожи в использовании и стилизации. Используйте упорядоченные списки в местах, где изменение порядка элементов изменит значение списка. Например, упорядоченный список может быть использован для рецепта, где изменение порядка шагов будет иметь значение. Используйте неупорядоченные списки для групп элементов без значимого порядка. Список животных на ферме может идти в неупорядоченном списке.
#### Дополнительная информация:
## Другие источники
* [Неупорядоченный список `<ul>`](https://github.com/freeCodeCamp/guides/blob/master/src/pages/html/elements/ul-tag/index.md)
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)

43
guide/russian/html/elements/p-tag/index.md Normal file
View File

@@ -0,0 +1,43 @@
---
title: P Tag
localeTitle: P день
---
## P Tag
Тег `<p>` обозначает абзац, который является наиболее распространенным тегом, используемым для создания строк слов внутри документа `<html>` . Использование `<p>` будет очень полезно для автоматического добавления поля между элементами. Атрибут `<p>` также может быть полезен для стилизации CSS.
### Пэг с другими тегами
Использование `<p>` совместимо с другими тегами, позволяющими добавлять гиперссылки ( `<a>` ), жирным шрифтом ( `<strong>` ), курсивом ( `<i>` ) и другими.
### пример
```html
<html>
<head>
<title>Paragraph example</title>
</head>
<body>
<p>
This <strong>sentence</strong> was created to show how the paragraph works.
</p>
</body>
</html>
```
Вы также можете вставить элемент привязки `<a>` в абзаце.
### пример
```html
<p>Here's a
<a href="http://freecodecamp.com">link to Free Code Camp.com</a>
for you to follow.</p>
```
#### Дополнительная информация:
* [MDN: <p> Элемент абзаца](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
* [w3schools: HTML <p> Тег](https://www.w3schools.com/tags/tag_i.asp)

25
guide/russian/html/elements/paragraph/index.md Normal file
View File

@@ -0,0 +1,25 @@
---
title: Paragraph Tag
localeTitle: Тег абзаца
---
## Параграф
HTML-код
Элемент представляет собой абзац текста.
обычно представляет собой блок текста, который он отделяет от других блоков по вертикальному пустому пространству.
### пример
\`\` \`html
Это абзац
Это еще один абзац
\`\` \`
#### Дополнительная информация:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

11
guide/russian/html/elements/paragraphs/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Paragraphs
localeTitle: Пункты
---
## Пункты
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/paragraphs/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

18
guide/russian/html/elements/s-tag/index.md Normal file
View File

@@ -0,0 +1,18 @@
---
title: S Tag
localeTitle: S день
---
## Тег S
В HTML `<s>` используется для зачеркивания текста. Например:
```html
<p><s>This year is the year of the monkey.</s></p>
<p>This year is the year of the Rooster.</p>
```
#### Дополнительная информация:
* [MDN - HTML-тег](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
* [Спецификация тегов W3 - HTML 5.2 s](https://www.w3.org/TR/html5/textlevel-semantics.html#the-s-element)

41
guide/russian/html/elements/script-tag/index.md Normal file
View File

@@ -0,0 +1,41 @@
---
title: Script Tag
localeTitle: Сценарий
---
## Сценарий
Тег HTML Script используется для того, чтобы либо содержать JavaScript на стороне клиента, либо ссылаться на внешний файл JavaScript, используя атрибут сценария «src».
Тег / элемент `<script>` используется для включения Javascript на стороне клиента в ваш HTML-файл, который можно использовать для добавления интерактивности и логики на ваш сайт
```
<script>
//JavaScript code is written here
</script>
<script src="js/app.js">
```
Тег можно использовать для включения реального кода Javascript прямо в HTML как это
```
<script>
alert('hello this is my Javascript doing things!');
</script>
```
Или вы можете использовать его как способ ссылки на внешний файл javascript, как это
```
<script src="main.js" />
```
Здесь атрибут `src` элемента принимает путь к файлу Javascript
Теги скрипта загружаются в ваш HTML-код и синхронизированы, поэтому обычно лучше всего добавлять свои скрипты прямо перед концом `<body>` в вашем HTML-формате
```
<script src="main.js" />
<script>
alert('hello this is my Javascript doing things!');
</script>
</body>
```
Вы можете увидеть официальную документацию для элемента сценария в [Документах MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)

31
guide/russian/html/elements/section-tag/index.md Normal file
View File

@@ -0,0 +1,31 @@
---
title: Section Tag
localeTitle: Тег раздела
---
## Раздел
Элемент HTML `<section>` определяет раздел внутри HTML-страницы, который используется, когда нет более специфичного семантического HTML-элемента для его представления. Как правило, элемент `<section>` будет включать элемент заголовка ( `<h1>` - `<h6>` ) в качестве дочернего элемента.
Например, веб-страницу можно разделить на различные разделы, такие как приветственные, контентные и контактные разделы.
Элемент `<section>` не должен использоваться вместо элемента `<div>` если требуется общий контейнер. Он должен использоваться для определения разделов на странице HTML.
```html
<html>
<head>
<title>Section Example</title>
</head>
<body>
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
</body>
</html>
```
#### Дополнительная информация:
* [Веб-документы MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
* [W3 Школы](https://www.w3schools.com/tags/tag_section.asp)

11
guide/russian/html/elements/select-tag/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Select Tag
localeTitle: Выбрать тег
---
## Выбрать тег
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/select-tag/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

39
guide/russian/html/elements/span-tag/index.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Span Tag
localeTitle: Время простоя
---
## Span Tag
Тег `<span>` - это контейнерный элемент общего назначения, похожий на `<div>` . Браузеры не делают никаких визуальных изменений в `<span>` s по умолчанию, но вы можете стилизовать их с помощью CSS или манипулировать ими с помощью JavaScript.
### пример
```html
<html>
<head>
<title>The Span Tag</title>
</head>
<body>
<div>
<p>This is a normal paragraph without any changes.</p>
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
</div>
</body>
</html>
```
Код для абзаца с красным текстом выглядит следующим образом:
```html
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
```
#### Различия между `<span>` и `<div>`
Основное отличие состоит в том, что `<span>` является встроенным элементом, а `<div>` является блочным элементом. Это означает, что a `<span>` может отображаться в предложении или абзаце (как в примере выше), а `<div>` запустит новую строку содержимого. Обратите внимание, что свойство `display` CSS может изменять это поведение по умолчанию, но это выходит за рамки этой статьи!
#### Дополнительная информация:
* [Ссылка на HTML-код MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)

45
guide/russian/html/elements/strong-tag/index.md Normal file
View File

@@ -0,0 +1,45 @@
---
title: Strong Tag
localeTitle: Сильный тег
---
# Сильный тег
Тег HTML < **_strong_** > - это тег подчеркивания текста, который при его использовании приводит к полужидному отображению текста, помещенному в теги.
### использование
```
<strong> Hello World! </strong>
```
Приведенный выше код приводит к
**Привет, мир!**
Этот тег также обычно называют **сильным элементом** . Когда дело доходит до атрибутов, только глобальные атрибуты применяются к **сильным** т. е. нет специальных атрибутов для тега < **strong** >.
### Поддержка браузера
| Имя браузера | Поддержка | |: -------------------: |: -------: | | Хром | Да | | Android | Да | | Firefox | Да | | Internet Explorer | Да | | Opera | Да | | Сафари | Да |
#### Дополнительная информация:
[https://www.techonthenet.com/html/elements/strong\_tag.php](https://www.techonthenet.com/html/elements/strong_tag.php)
# [https://www.w3schools.com/tags/tag\_strong.asp](https://www.w3schools.com/tags/tag_strong.asp)
Тег `<strong>` используется для придания важности тексту в документе HTML. Это можно сделать, обернув текст, который вы хотите подчеркнуть, в `<strong>` . Большинство браузеров будут отображать текст, заключенный в `<strong>` полужирным шрифтом.
Примечание. Тег `<strong>` не должен использоваться для стилистического выделения текста.
### Пример:
```
<body>
<p>
<strong> This </strong> is important.
</p>
</body>
```
#### Дополнительная информация:
* [em tag: w3schools](https://www.w3schools.com/tags/tag_strong.asp)

41
guide/russian/html/elements/style-tag/index.md Normal file
View File

@@ -0,0 +1,41 @@
---
title: Style Tag
localeTitle: Стиль тегов
---
## Стиль тегов
Тег стиля используется как файл css, кроме как внутри HTML, например:
```
<head>
<title>Your Title</title>
<style>
p {
color:red;
}
</style>
</head>
```
Это сделает цвет тега абзаца красным. Это полезно, если вы просто хотите поместить немного кода, но если вам нужна действительно длинная таблица стилей, я рекомендую просто использовать `<link />` .
#### Дополнительная информация:
[Школы W3C](https://www.w3schools.com/tags/tag_style.asp)
Больше информации:
Тег стиля используется для установки любых CSS-стилей для веб-страницы внутри документа. Тег стиля должен быть вложен в раздел заголовка html-документа:
```html
<head>
<style>
h1 {
text-align: center;
font-family: sans-serif;
}
</style>
</head>
```
Вы можете написать любой CSS-код внутри тега стиля в соответствии с его синтаксисом.

37
guide/russian/html/elements/table-tag/index.md Normal file
View File

@@ -0,0 +1,37 @@
---
title: Table Tag
localeTitle: Тег таблицы
---
## Тег таблицы
Тег `<table>` позволяет вам отображать таблицу на вашей веб-странице.
### пример
```html
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
```
Этот кодовый блок создаст следующий результат:
Строка 1, ячейка 1
Строка 1, ячейка 2
Строка 2, ячейка 1
Строка 2, ячейка 2
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)

38
guide/russian/html/elements/td-tag/index.md Normal file
View File

@@ -0,0 +1,38 @@
---
title: Td Tag
localeTitle: Td день
---
## Td Tag
Тег `<td>` определяет стандартную ячейку в таблице HTML.
Таблица HTML имеет два типа ячеек:
* Ячейки заголовков - содержит информацию заголовка (созданную с элементом `<th>` )
* Стандартные ячейки - содержат данные (созданные с помощью элемента `<td>` )
Текст в `<th>` элементах выделен полужирным шрифтом и по центру. Текст в элементах `<td>` по умолчанию является регулярным и выравнивается по левому краю.
### пример
```html
<html>
<head>
<title>Td Tag Example</title>
</head>
<body>
<table>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
```

22
guide/russian/html/elements/textarea-tag/index.md Normal file
View File

@@ -0,0 +1,22 @@
---
title: Textarea Tag
localeTitle: Textarea Tag
---
## Textarea Tag
Тег textarea HTML позволяет ввести поле, которое будет содержать текст для обратной связи или взаимодействия с пользователем. В большинстве случаев обычно считается, что текстовое поле используется как часть формы.
Программисты используют тег textarea для создания многострочного поля для ввода пользователем (полезно особенно в том случае, если пользователь должен иметь возможность вставлять в форму более длинный текст). Программисты могут указывать разные атрибуты для тегов textarea.
Образец кода:
```html
<form>
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
</form>
```
Наиболее распространенные атрибуты: атрибуты `row` и `cols` определяют высоту и ширину текстового поля Атрибут `placeholder` указывает текст, который видим пользователю, он помогает пользователю понять, какие данные следует вводить в атрибут `maxlength` определяет максимальную длину текста, который можно ввести в текстовое поле, пользователь не может отправлять больше символов `required` атрибут означает, что это поле должно быть заполнено перед отправкой формы
Для получения дополнительной информации о теге textarea и его атрибутах посетите MDN или w3schools .

37
guide/russian/html/elements/th-tag/index.md Normal file
View File

@@ -0,0 +1,37 @@
---
title: Th Tag
localeTitle: В день
---
## Th Tag
Тег `<th>` позволяет вам определять ячейку заголовка в таблицах HTML. По умолчанию большинство браузеров выделяют жирным шрифтом и центрируют данные в этих тегах.
### пример
```html
<table>
<tr>
<th>Movie</th>
<th>Rating</th>
</tr>
<tr>
<td>Die Hard</td>
<td>5 Stars</td>
</tr>
</table>
```
Эта разметка создаст следующий результат:
Кино
Рейтинг
Живучи
5 звезд
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)

25
guide/russian/html/elements/tr-tag/index.md Normal file
View File

@@ -0,0 +1,25 @@
---
title: Tr Tag
localeTitle: Tr день
---
Тег `<tr>` определяет стандартную строку в таблице HTML на веб-странице.
Тег `<tr>` содержит теги `<th>` и `<td>` , также называемые заголовком таблицы и данными таблицы соответственно.
Тег `<tr>` - это тег с закрытым концом, означающий, что каждый открытый тег `<tr>` должен быть закрыт с их последующим закрывающим тегом, обозначенным `</tr>`
Тег `<tr>` определяет строку в таблице.
### пример
\`\` \`\` HTML
Пример тр-тега
Header One
Обычная таблица данных / ячейка столбца.
Обычная таблица данных / ячейка столбца.
Обычная таблица данных / ячейка столбца.

26
guide/russian/html/elements/u-tag/index.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: U Tag
localeTitle: U Tag
---
## U Tag
Тег HTML `<u>` выводит текст с подчеркиванием.
Элемент `<u>` устарел в HTML 4.01. В HTML5 `<u>` был переопределен для представления текста, который должен быть стилистически отличным от обычного текста. Это включает слова с ошибками или собственные имена на китайском языке.
Вместо этого, чтобы подчеркнуть текст, рекомендуется использовать `<span>` вместо `<u>` . Создайте теги `<span>` с помощью свойства `text-decoration` CSS со значением `underline` .
### Примеры:
\`\` \`html
Этот паранграф имеет подчеркивание .
```
Underlining text with the `<span>` tag:
```
HTML В последнее время все говорят о freeCodeCamp . \`\` \`
### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)

33
guide/russian/html/elements/ul-tag/index.md Normal file
View File

@@ -0,0 +1,33 @@
---
title: Ul Tag
localeTitle: Ul Tag
---
## Ul Tag
Неупорядоченный список `<ul>` - это тег, используемый для создания маркированных списков. Чтобы создать список внутри `<ul>` , используйте `<li>` . В списки стилей перейдите в списки стилей CSS и внесите изменения.
`<ul>` может быть вложен в другие списки и совместим с другими тегами, такими как `<a>` , `<p>` , `<button>` , тегами стиля html ( `<strong>` , `<em>` и т. Д.).
### пример
Чтобы создать следующее:
```html
<ul>
<li>This is the bulleted list #1</li>
<li>This is the bulleted list #2</li>
<li>This is the bulleted list #3</li>
<li>
<ul>
<li>This is the bulleted nested list #1</li>
</ul>
</li>
</ul>
```
Вы бы использовали этот HTML-код: `html <html> <head> <title></title> </head> <body> <ul> <li>This is the bulleted list #1</li> <li>This is the bulleted list #2</li> <li>This is the bulleted list #3</li> <li> <ul> <li>This is the bulleted nested list #1</li> </ul> </li> </ul> </body> </html>`
## Другие источники
* [Упорядоченный список `<ol>`](https://github.com/freeCodeCamp/guides/blob/master/src/pages/html/elements/ol-tag/index.md)