Html5 теги все: HTML 5 Справочник всех тегов онлайн и примеры – HTML и HTML5. Описание тегов по основным разделам

HTML 5 элементы и теги, которые расширят ваши возможности

HTML5 элементы – новые теги

От автора: приветствую вас на этом блоге. В этом уроке я хотел бы познакомить вас с основами html5, а именно с самыми основными тегами, которые появились в нем и уже используются при создании современных сайтов. Элементы html5 значительно расширяют возможности этого языка, давайте с ними познакомимся.

Новые элементы в html5 — семантика

Для начала я хотел бы упомянуть о так называемых семантических тегах, которые и являются основным нововведением, хотя кроме них есть много новшеств, связанных с формами и их обработкой. Семантика в верстке раньше была просто на нуле, еще во времена таблиц. Сегодня же в эпоху поискового продвижения все больше веб-мастеров начинают осознавать ее важность, потому что даже такие вещи играют роль.

К тому же, сами современные веб-стандарты ориентированы на простоту и понятность кода. Новые элементы, в частности, включают в себя такие теги:

Header – парный тег, который обозначает шапку сайта, статьи или чего-то другого. Лично я поначалу подумал, что этот тег нужно использовать только для обозначения непосредственно шапки сайта.

Позднее же от более опытных людей в сайтостроении я узнал, что тегов header на одной странице может быть несколько. Соответственно, необходимость в идентификаторах или классах для подобных элементов осталась актуальной.

HTML5 элементы – новые теги

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Footer – низ сайта, подвал, или как там его еще можно назвать. Обычно содержит информацию об авторских правах, иногда дополнительное меню и контактную информацию. В случае с этим тегом ситуация такая же, как и с header – он может быть и не одним на странице, этим тегом можно пометить, например, нижнюю секцию в сайдбаре, если она действительно отличается от других.

Nav – это контейнер для ссылок, которые имеют особую важность на веб-странице. Короче говоря, теперь в этот тег стоит заключать главное меню сайта, где содержаться ссылки на важные страницы и рубрики сайта.

Article – контейнер для содержания страницы, будь то статья, новость, новая тема на форуме и т.д.

Aside – все еще ведутся споры, для чего же должен использоваться этот тег. Сначала кто-то считал, что им принято формировать боковую колонку, где располагаются различные виджеты. Более павильным считается такое утверждение – этим тегом следует обрамлять всю информацию, которая является побочной на веб-странице. Например, цитата, блок с навигацией по документу или блок с контекстной рекламой.

HTML5 элементы – новые теги

Рис. 1. Семантические элементы и новая разметка с их помощью.

Это были основные семантические элементы html5, а теперь давайте разберем другие, которые добавляют дополнительные возможности на веб-странице.

Вставка медиафайлов

Audio – этот тег тоже парный, он предназначен для легкого и понятного вывода аудиозаписей на экран, а также плеера, в котором их можно воспроизводить. В этот тег дополнительно нужно поместить одиночные теги source, в которых прописать путь к аудиофайлу в разных форматах, чтобы все браузеры могли обработать звук.

Это делается для кроссбраузерности. Достаточно прописать путь к аудиофайлу в расширениях ogg и mp3. Также audio имеет определенные атрибуты. Например, атрибут controls добавляет к аудиозаписи элементы управления – так вы сможете менять громкость и останавливать воспроизведение.

Video – абсолютно идентичный прошлому элемент, за исключением того, что он выводит видео. В него также помещают теги source, где в атрибутах src прописываются пути к файлам.

HTML5 элементы – новые теги

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Стоит сказать, что с видео ситуация чуть посложней. Чтобы оно воспроизводилось во всех браузерах, нужно добавить его сразу в трех форматах – это ogg, mp4 и webm.

В целом, тег имеет такие же атрибуты, как и audio. Дополнительно у него есть атрибут poster, с помощью которого вы можете задать путь к картинке, которая будет видна, если видео не проигрывается. Также с помощью атрибутов width и height можно определить размеры области, в которой будет воспроизводиться видео. Но мне все-таки кажется, что это лучше делать через css.

Что-то я примеров не привожу, а вот со вставкой видео это бы надо сделать.

<video poster="video/poster.jpg" controls="controls"> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. </video>

<video poster="video/poster.jpg" controls="controls">

   <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>

   <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

   <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'>

   Тег video не поддерживается вашим браузером.

     </video>

Как видите, у нас один и тот же файл – movie. Просто он в разных форматах. Также нужно указать MIME-тип и кодеки. Но это не стоит заучивать и пытаться держать в памяти – просто копируйте.

Figure – тег создан для группировки каких-то элементов. Он неразрывно связан с figcaption. С появлением этих элементов мы можем реализовать то, что раньше делалось другими путями. Например, вставить подпись к изображению. Это можно сделать так:

<figure> <img src = “image.jpg”> <figcaption>Подпись к изображению</figcaption> </figure>

<figure>

<img src = “image.jpg”>

<figcaption>Подпись к изображению</figcaption>

</figure>

HTML5 элементы – новые теги

Рис. 2. Подпись к изображению.

Datalist – интересный тег, в который можно вписать с помощью тегов option возможные варианты при наборе пользователем слов в текстовом поле input. Это вы можете наблюдать в поисковике – он сам подсказывает вам возможные варианты. Тут, конечно, системы не столь гениальна – вы просто можете записать пару наиболее частых слов, которые люди могут искать у вас на сайте. Элемент связывается с текстовым полем с помощью атрибута list, в котором нужно указать идентификатор, который мы определили для тега datalist.

Пожалуй, об html5 элементах нужно писать книгу, а не статью, ведь мы не рассмотрели с вами и половины всего, что можно делать с помощью этой технологии. Но, я надеюсь, вам стало понятно – HTML5 это сила и это технология, которая значительно расширяет арсенал возможностей веб-разработчика.

HTML5 элементы – новые теги

Мы лишь немного коснулись возможностей технологии, также информацию вы можете найти в нашем курсе, посвященном основам HTML5. Он находится в премиум-разделе вместе с остальными интересными курсами по сайтостроению.

Как видите, HTML5 дает много новых возможностей, поэтому с этой технологией обязан ознакомиться любой человек, который интересуется сайтостроением. Желаю вам успехов в обучении и не забывайте поглядывать к нам на блог.

HTML5 элементы – новые теги

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее HTML5 элементы – новые теги

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML 5 теги и возможности, которые они дают разработчикам

HTML 5 теги – обзор основных элементов новой технологии

От автора: это статья, в которой будут немного описаны новые html5 теги. Она позволит вам познакомиться с этой новой спецификацией, если вы еще не успели этого сделать.

Семантические теги html5

О некоторых новых элементах этого языка я уже писал в одной из прошлых статей (дать ссылку на статью “элементы html5”), но все же не будет лишним и здесь повторить, что это такое и с чем его едят. Итак, основная цель семантических тегов заключается в том, чтобы сделать разметку сайтов более понятной для браузеров и поисковых машин.

Например, в html5 появились теги header и footer и теперь эти элементы веб-страницы не нужно создавать через обычный div с идентификатором, как это делали раньше. Кроме этих тегов появилось еще много новых. Например, такие:

Nav – контейнер, в котором нужно располагать самые важные гиперссылки на странице. Теперь в него можно вкладывать главное меню на сайте, хотя не запрещено использовать несколько nav на странице.

Article – тег для контента на странице. В него нужно помещать статью, новость, описание товара или что-то другое, являющееся непосрественно контентом на странице. Я хочу отметить, что текст нужно помещать без заголовка и мета-данных. По крайней мере, так рекомендуется делать.

HTML 5 теги – обзор основных элементов новой технологии

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Section – элемент, который уже своим названием говорит нам – я отдельная секция веб-страницы, в которой может быть что угодно. Например, в такой контейнер можно заключить всю статью на сайте, включая заголовок и побочную информацию (вроде даты публикации и количества комментариев). Также допускается вкладывать одну секцию в другую.

Main – контейнер, в который, судя по всему, нужно заключать основное содержимое страницы. Именно текст (без заголовка и остальных типовых блоков). На данный момент все-таки не рекомендуется его использование. Лично я видел его только в одном шаблоне, а сам элемент поддерживается только в двух браузерах, даже редактор кода не подсвечивает этот тег. Возможно, его судьба решится в будущем.

Другие элементы языка html5

Audio, video – а вот это явное нововведение HTML5. Эти парные контейнеры предназначены для того, чтобы вставлять в них аудио и видеозаписи, при этом никаких дополнительных плагинов больше не требуется. На данный момент эти теги уже неплохо поддерживаются в современных браузерах, поэтому при вставке медиафайлов их использование приветствуется.

Внутрь audio или video обязательно вставляются одинарные теги source, в которых задается путь к файлу. Нужно записать несколько таких строк, потому что разные браузеры читают разные форматы. Об этом я уже писал в статье про элементы html5, где также привел пример вставки одного медиафайла.

Тег video в html5, ровным счетом как и audio, серьезно упростил задачу добавления на страницу подобных файлов. Вот пример вставки видео:

<video controls> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>

<video controls>

   <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

  </video>

HTML 5 теги – обзор основных элементов новой технологии

Рис. 1. Видео и элементы управления к нему.

На простой html странице появился видеоролик о новом курсе по верстке с помощью фреймворка Bootstrap. Вот он, кстати. Стоит сказать, что на реальныйсайт лучше не вставлять видео тем способом, который я использовал только что. Вернее, не совсем так. Заметьте, что тут я записал только один одинарный тег source, в котором указал путь к файлу mp4 и соответствующие кодеки. Для полной кроссбраузерности вам придется указывать видео в трех форматах (также ogg и webM).

HTML 5 теги – обзор основных элементов новой технологии

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Details – очень интересный элемент, который впервые позволил скрывать какую-то информацию и разворачивать ее по клику без использования javascript. Текст, который по умолчанию записывается в этот контейнер, не виден на странице. Вместо этого появляется строка со словом “Подробнее”, клик по которому и развернет нашу информацию.
Давайте я покажу пример:

<details> <summary>Кликни для просмотра</summary> <img src = "img.jpg"> </details>

<details>

<summary>Кликни для просмотра</summary>

<img src = "img.jpg">

</details>

HTML 5 теги – обзор основных элементов новой технологии

Кстати, тег summary позволяет изменить заголовок с “Подробнее” на свой, что мы и сделали. Далее размещаем какую-то картинку, но она станет видна только после клика, изначально при загрузке страницы она отображаться не будет. Вот так вот все просто и интересно, без всяких скриптов. Умельцы в сети уже нашли выход, как изменить картинку-маркер, убрать синюю рамку и т.д.

HTML 5 теги – обзор основных элементов новой технологии

При повторном клике информация опять исчезает с экрана, что очень удобно для пользователя. Из минусов можно отметить разве только то, что тег не поддерживается браузером Internet Explorer. Figure – элемент позволяет группировать какие-то элементы, а с помощью figcaption им можно давать общий заголовок. Сегодня чаще всего это используют для того, чтобы сделать описание к рисунку (подпись).

<figure> <img src = "img.jpg"> <figcaption>Подпись </figcaption> </figure>

<figure>

<img src = "img.jpg">

<figcaption>Подпись </figcaption>

</figure>

С помощью стилей вы легко можете изменить внешний вид заголовков фигур (отцентрировать, например).

Canvas – элемент, который достоин отдельной статьи, а то и книги. По умолчанию его называет хостом, на котором с помощью javascript можно рисовать различные изображения. С помощью canvas сегодня создают приложения и игры, различную анимацию и т.д.

Также появились другие теги, типа output или progress. Работа с ними также напрямую связана с javascript.

Наконец, один элемент из html5 немного выделяется от остальных – он добавлен для форматирования текста, а именно для его выделения – mark. Обрамив нужный текст в него обновите страницу и вы увидите, что фоновый цвет такого текста изменился на желтый.

Это всего лишь стиль по умолчанию. При помощи css вы можете легко переопределить цвет фона, а разные стилевые классы помогут вам по-разному отмечать нужный текст. В целом, mark действительно может пригодиться, хотя я очень мало где видел до сих пор его использование.

Итак, в этой статье мы с вами посмотрели на то, что появилось в HTML5 и как это улучшает верстку уже сейчас. Используйте эти новые вещи при создании сайтов, а также не забывайте следить за обновлениями на Webformyself.

HTML 5 теги – обзор основных элементов новой технологии

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее HTML 5 теги – обзор основных элементов новой технологии

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Теги html 5 для современной верстки сайтов и блогов

Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.

Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.

Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!

Главнокомандующий разметкой сайтов, знаменитый html

После прочтения предыдущих моих публикаций, а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!

Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.

Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.

Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?

Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).

Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.

Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.

Атрибуты нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда браузер будет задавать им форматирование по умолчанию.

Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
Одиночные теги
<meta charset="utf-8" name = «GENERATOR» content = «Microsoft FrontPage 4.0»> В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени.
<img src="image/cars.jpeg" alt="BMW"> Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение.
Парные теги
<a href= «tip.html» target="_blank" title=" Нажмите на ссылку и она откроется в новой вкладке"> Как правильно приготовить запеканку?</a> Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор.

Близкий родственник языка html

 

Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.

Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.

Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как <video> и <audio>, отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: <bgsound>, <dir>, <rb>, <applet> и другие.

А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.

Тег Описание
<article> Задает наименование статьи, объявления, страницы сайта и т.д. Атрибутов не имеет.
<aside> Определяет боковой блок для размещения в нем карты сайта, рекламы, ссылок на ресурсы и т.д. Можно использовать универсальные атрибуты.
<canvas> Полезный элемент для создания при помощи JavaScript анимаций, рисунков, а также редактирования имеющихся картинок. Поддерживает как уникальные атрибуты, так и события.
<figure>   Основная задача тега: группировать разные элементы в единое целое. Это может быть, например, текст и рисунок.

Семантические теги

С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.

Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.

Может это и было удобно с одной стороны для девелоперов, однако поисковым системам, а также браузерам приходилось туго. Поэтому было найдено решение в виде семантических тегов.

Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся <header>, <footer> и <nav>. <header> отвечает за определение на сайте его заголовка или заголовка текста, <footer> – за «подвал» внизу интернет-страницы, а <nav> – за навигацию сайта.

Для усвоения материала хочу, чтоб вы опробовали практический пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ваш сайт</title>
</head>
<body>
   <header>
      <h2>Блог для айтишников</h2>
   </header>
   <nav>
      <ul>
         <li>Пункт меню 1</li>
         <li>Пункт меню 2</li>
      </ul>
   </nav>
   <article>
      <header>
         <h3>Заголовок  публикации</h3>
         <p><a href="#">Автор </a>. Всего комментариев:  6 </p>
      </header>
      <p>Текст первой статьи</p>
   </article>
   <footer>
      <p>Copyright любимый блогер</p>
   </footer>
</body>
</html>

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ваш сайт</title> </head> <body> <header> <h2>Блог для айтишников</h2> </header> <nav> <ul> <li>Пункт меню 1</li> <li>Пункт меню 2</li> </ul> </nav> <article> <header> <h3>Заголовок публикации</h3> <p><a href="#">Автор </a>. Всего комментариев: 6 </p> </header> <p>Текст первой статьи</p> </article> <footer> <p>Copyright любимый блогер</p> </footer> </body> </html>

Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с сайтом, а также оптимизируют работу поисковых роботов.

Ну что ж. Я рассказал все, что вам нужно знать на начальных стадиях изучения языка html. Если вы узнали что-то новое для себя, то подписывайтесь на обновления моего блога и делитесь ссылочкой с друзьями. Пока-пока!

С уважением, Роман Чуешов

Загрузка...

Прочитано: 241 раз

Новые теги HTML5 — Как создать сайт

Новые теги в языке HTML5

HTML-теги
Новые теги в HTML5

Новые теги HTML5 — это теги, которые появились в спецификации языка HTML5. Внимание, некоторые теги пока не поддерживаются браузерами, со временем эта ситуация должна исправиться.

Новые теги HTML5 по алфавиту

<article> </article> — основной контент страницы, тег HTML5,
<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
<audio> </audio> — воспроизводит аудиофайлы, создаёт панель управления ими, тег HTML5,
<bdi> </bdi> — запрещает изменять направление текста, тег HTML5,
<canvas> </canvas> — замена флэш-технологии, тег HTML5,
<command> — команда-переключатель, тег HTML5,
<datalist> </datalist> — выпадающий список, тег HTML5,
<details> </details> — спойлер, тег HTML5,
<dialog> </dialog> — диалоги, тег HTML5,
<embed> — внедряет плагины, тег HTML5,
<figcaption> </figcaption> — заголовок тега figure, тег HTML5,
<figure> </figure> — группирует различные элементы, тег HTML5,
<footer> </footer> — подвал сайта, тег HTML5,
<header> </header> — шапка сайта, тег HTML5,
<hgroup> </hgroup> — группирует заголовки, тег HTML5,
<keygen> — шифровка расшифровка данных, тег HTML5,
<mark> </mark> — выделенный текст, тег HTML5,
<menu> </menu> — обрамляет теги command, тег HTML5,
<meter> </meter> — шкала измерения, тег HTML5,
<nav> </nav> — важные ссылки страницы, тег HTML5,
<output> </output> — вывод работы скрипта, тег HTML5,
<progress> </progress> — шкала прогресса, тег HTML5,
<rp> </rp> — часть аннотации, заменяет тег ruby, если браузер его не поддерживает тег HTML5,
<rt> </rt> — аннотация, тег HTML5,
<ruby> </ruby> — обрамляет аннотацию, тег HTML5,
<section> </section> — семантически единые разделы страницы, тег HTML5,
<source> — внедряет аудио/видео файлы, с помощью тегов audio и video, тег HTML5,
<summary> </summary> — заголовок тега details, тег HTML5,
<time> </time> — дата и/или время, тег HTML5,
<track> — внедряет текстовую информацию (субтитры, характеристики медиафайлов и т.д.) в аудио/видео файлы, через теги audio и video, тег HTML5,
<video> </video> — воспроизводит видеофайлы, создаёт панель управления ими, тег HTML5,
<wbr> — указывает, где нужно перенести длинное слово, если оно не вмещается в окно браузера, тег HTML5.

Читать далее: Устаревшие теги HTML


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *