Структура html-документа, веб-страницы | основные теги
- doctype
- Элемент html
- Элемент head
- Элемент title
- Элемент body
Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. — «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).
doctype
Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления <!DOCTYPE> следующим образом:
<!DOCTYPE html>
Эта строка поможет браузеру определить, как правильно интерпретировать код полученной веб-страницы.
В данном случае мы говорим браузеру, что HTML соответствует последнему стандарту спецификации.
Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.
Элемент html
После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента <html>:
<!DOCTYPE html> <html> </html>
Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: <head> и <body>.
Элемент head
Элемент <head> является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров.
Помимо обязательного элемента <title>, рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента <head>.
Элемент <head> должен быть первым дочерним элементом <html>, никакое содержимое или элементы не должны располагаться перед ним:
<!DOCTYPE html> <html> <head> </head> </html>
Элемент title
Элемент <title> предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент <title>, который должен располагаться внутри элемента <head>:
<!DOCTYPE html> <html> <head> <title>Заголовок окна</title> </head> </html>
Браузеры отображают содержимое элемента <title> как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:
Элемент body
Элемент <body> является контейнером для всего содержимого веб-страницы.
Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель — отделить содержимое документа от метаданных:
<!DOCTYPE html> <html> <head> <title>Заголовок окна</title> </head> <body> </body> </html>
Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:
<!DOCTYPE html> <html> <head> <title>Заголовок окна</title> </head> <body> Hello, world! </body> </html>
С этой темой смотрят:
- Введение в html
- HTML элементы
- Создание html документа
- Теги <meta> в HTML
Базовая структура HTML файла
Любой HTML файл начинается с базовой структуры.
Обычно она включает в себя теги, которые есть в любом HTML файле.
Пример базовой структуры показан ниже.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
</body>
</html>* * *
Начнем с тега DOCTYPE
<!DOCTYPE html>
Задача этого тега — указать браузеру стандарт HTML который используется в документе. Этот тег не будет показан на странице, но будет присутствовать в HTML коде страницы.
Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.
Вы можете видеть и другие версии этого тега, более объемные, обычно такие теги можно встретить на сайтах сделанных 5 — 10 лет назад. Они указывают браузерам, что используется другой стандарт HTML.
* * *
Тег <html>
Тег <html> — парный, очень важный тег, благодаря ему браузер понимает, где начинается контент который нужно обрабатывать как HTML.
<html></html>
Также тег <html> имеет обязательный атрибут lang, в качестве значения мы указываем язык, на котором должна отображаться страница. Эта информация помогает браузеру считывать специфические символы которые могу встречаться в различных языках.
В качестве значения передаем сокращения языков: ru, en и тд.
* * *
Тег <head>
<head></head>
Тег <head> — парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется ‘метаинформацией‘. Также метаинформация активно используется для продвижения сайта в поисковых системах (Google, Yandex и тд.).
Все что находится внутри тега <head> не будет отображено пользователю.
* * *
Тег <meta>
<meta>
Тег <meta>
С настройкой тега <meta> вы ближе познакомитесь при разработке своих сайтов.<meta charset="UTF-8">
В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта. Кодировка помогает правильно интерпретировать текст. Указываем мы ее потому что у разных пользователей в их системе может быть указана разная кодировка, из-за чего контент сайта может выглядеть не так как мы ожидаем.
Самой универсальной кодировкой является UTF-8, ее мы и указываем.
* * *
Тег <title>
<title>Заголовок страницы</title>
<title> — парный тег, располагается внутри тега <head>, внутри него указываем текст который будет выводиться во вкладке нашего сайта.
* * *
Тег <body>
<body></body>
<body> — парный тег, располагается внутри тега <html>, после закрывающего тега </head>.
Пример конечной структуры в файле index.html.
P.S. Больше уроков у меня на канале
СТРУКТУРА HTML-СТРАНИЦЫ И ВЛОЖЕНИЕ
Следующая диаграмма дает нам общее представление о структуре HTML-страницы:
Как мы видим, страница состоит из пяти важных частей:
- DOCTYPE
- HTML
- ГОЛОВКА
- КОРПУС
- НАЗВАНИЕ
DOCTYPE:
Говоря простыми словами, это означает объявление «типа документа».
Существуют различные версии HTML, как и другое программное обеспечение, а также различные инструкции по его отображению в браузерах. Для корректного просмотра веб-страницы информация о версии HTML появляется в Тег
Должен появиться только один раз в верхней части страницы перед любыми тегами HTML.
В целях безопасности мы обычно используем «свободную» интерпретацию, которая позволяет браузерам читать старые теги HTML. Например:
HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd “>
Для HTML5 объявление выглядит так:
HTML:
Чтобы отобразить веб-страницу, нам сначала нужно сообщить браузеру, что это веб-страница.
Почему? Потому что браузеры могут отображать файлы других типов: файлы Adobe Acrobat, текстовые файлы, изображения, файлы Flash.
Чтобы сигнализировать браузеру, что это страница сайта, нам нужны два тега — открывающий и закрывающий тег:
Все, что есть видно в браузере, находится между этими двумя тегами .
Обратите внимание, что вы не видите эти теги в своем браузере (если вы не просматриваете исходный код).
Это связано с тем, что браузеры запрограммированы читать код, чтобы определить, как отображать страницу, а не отображать теги HTML.
HEAD:
Включает только информацию о текущем документе (метаданные), но не содержание документа (данные). Он содержит заголовок документа, ключевые слова и другие описания, которые могут быть полезны для поисковых систем, стиль и другие данные, которые не должны показываться пользователям (кроме заголовка, который отображается в строке заголовка браузера)
Внутри элемента
могут находиться следующие элементы:(этот элемент обязателен в HTML-документе)</li><li> <стиль></li><li> <базовый></li><li> <ссылка></li><li> <мета></li><li> <скрипт></li><li> <noscript></li></ul><p> Размещается между тегами<html> и<body>.</p><p> В HTML 4.01 элемент<head> является обязательным.</p><p> В HTML5 элемент<head> можно опустить.</p><h3><span class="ez-toc-section" id="BODY"> BODY: </span></h3><p> Все, что пользователи видят на своем экране, генерируется из кода между открывающим и закрывающим тегами этого элемента.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/http/images.myshared.ru/4/87821/slide_9.jpg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/http/images.myshared.ru/4/87821/slide_9.jpg' /></noscript><center><div class="advv"><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center> Итак, это «тело» HTML-документа.</p><p> Содержит текст, гиперссылки, изображения, таблицы, списки и т.д.,</p><p> Тег body имеет множество атрибутов, которые помогают нам управлять отображением некоторых элементов страницы. Мы можем классифицировать эти атрибуты по трем типам</p><ol><li> Атрибуты макета: например, цвет фона или изображения, цвет текста и цвета ссылок</li><li> Глобальные атрибуты: атрибуты, общие для всех элементов HTML, такие как стиль, язык, класс, идентификатор и т. д.</li><li> Атрибут событий: например, события мыши, события клавиатуры, события Windows или события формы, события мультимедиа и т. д.</li><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></ol><p> Обратите внимание, что все атрибуты макета были удалены из HTML5. Вместо этого используйте CSS.</p><h3><span class="ez-toc-section" id="i"> ВКЛАДЫВАНИЕ: </span></h3><p> Элемент HTML — это элемент, который имеет открывающий и закрывающий теги. Например, два тега</p><p> Открывающий тег<head></p><p> Закрывающий тег</head></p><p> Сделать элемент head.</p><p> Когда разные элементы HTML назначаются одному и тому же блоку, это называется вложением.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/5/377907/slide_29.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/5/377907/slide_29.jpg' /></noscript></p><p> В HTML мы используем вложение много раз.</p><pre title="Basic HTML structure"> <! ДОКТИП HTML> <html> <голова> <title> Название страницы Мой первый заголовок
Мой первый абзац.
В приведенном выше примере элементы
Аналогичным образом элемент заголовка и элемент абзаца
вложены в элемент .PS: По любым вопросам, запросам и отзывам пишите нам по адресу [email protected] или [email protected]. Счастливого обучения?
Следите за Саурабхом Дхингрой:
Что такое HTML? Определение языка гипертекстовой разметки
следующий → ← предыдущая
HTML — это аббревиатура от Hyper Text Markup Language , которая используется для создания веб-страниц и веб-приложений. Давайте посмотрим, что подразумевается под языком гипертекстовой разметки и веб-страницей.
Гипертекст: Гипертекст просто означает «Текст в тексте». Внутри текста есть ссылка, это гипертекст. Всякий раз, когда вы нажимаете на ссылку, которая ведет на новую веб-страницу, вы нажимаете на гипертекст. Гипертекст — это способ связать две или более веб-страниц (документов HTML) друг с другом.
Язык разметки: Язык разметки — это компьютерный язык, который используется для применения правил компоновки и форматирования к текстовому документу. Язык разметки делает текст более интерактивным и динамичным. Он может превращать текст в изображения, таблицы, ссылки и т. д.
Веб-страница: Веб-страница — это документ, обычно написанный в формате HTML и переведенный веб-браузером. Веб-страницу можно идентифицировать, введя URL-адрес. Веб-страница может быть статического или динамического типа. Только с помощью HTML мы можем создавать статические веб-страницы .
Таким образом, HTML — это язык разметки, который используется для создания привлекательных веб-страниц с помощью стилей и выглядит в веб-браузере в удобном формате.
Давайте посмотрим на простой пример HTML.
<голова>
Название веб-страницы <тело>Напишите свой первый заголовок
Напишите свой первый абзац.
Протестируйте сейчасОписание примера HTML
: Определяет тип документа или указывает браузеру версию HTML.
: Этот тег информирует браузер о том, что это HTML-документ. Текст между тегом html описывает веб-документ. Это контейнер для всех остальных элементов HTML, кроме
.: </strong> Как следует из названия, он используется для добавления заголовка той HTML-страницы, которая появляется в верхней части окна браузера.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/10/984386/slide_6.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/10/984386/slide_6.jpg' /></noscript> Он должен быть помещен внутри тега head и должен немедленно закрываться. (Необязательно)</p><p> <strong><body> </strong> : Текст между тегом body описывает содержимое тела страницы, которое видно конечному пользователю. Этот тег содержит основное содержимое HTML-документа.</p><p> <strong><h2></h2> </strong> : Текст между тегом<h2><span class="ez-toc-section" id="i-4"> описывает заголовок первого уровня веб-страницы. </span></h2></p><p> <strong><p> </strong> : Текст между тегом<p> описывает абзац веб-страницы.</p><hr/><h3><span class="ez-toc-section" id="_HTML-5"> Краткая история HTML </span></h3><p> В конце 1980-х годов физик Тим Бернерс-Ли, работавший по контракту в ЦЕРН, предложил исследователям ЦЕРН систему. В 1989 году он написал меморандум, в котором предлагал гипертекстовую систему на базе Интернета.</p><p> <strong> Тим Бернерс-Ли </strong> известен как отец HTML. Первым доступным описанием HTML был документ под названием «Теги HTML», предложенный Тимом в конце 19 века.91. Последней версией HTML является HTML5, о котором мы узнаем позже в этом руководстве.</p><hr/><h3><span class="ez-toc-section" id="_HTML-6"> Версии HTML </span></h3><p> С момента изобретения HTML на рынке существует множество версий HTML, краткое введение в версию HTML приведено ниже:</p><p> <strong> HTML 1.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/8864879_69407630/image-4.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/8864879_69407630/image-4.jpg' /></noscript> 0: </strong> Первой версией HTML была 1.0, базовая версия языка HTML, выпущенная в 1991 году.</p><p> <strong> HTML 2.0: </strong> Это была следующая версия, выпущенная в 1995, и это была стандартная языковая версия для дизайна сайта. HTML 2.0 смог поддерживать дополнительные функции, такие как загрузка файлов на основе формы, элементы формы, такие как текстовое поле, кнопка выбора и т. д.</p><p> <strong> HTML 3.2: </strong> Версия HTML 3.2 была опубликована W3C в начале 1997 года. Эта версия позволяла создавать таблицы и обеспечивать поддержку дополнительных параметров для элементов формы. Он также может поддерживать веб-страницу со сложными математическими уравнениями. Он стал официальным стандартом для любого браузера до 19 января.97. Сегодня практически поддерживается большинством браузеров.</p><p> <strong> HTML 4.01: </strong> Версия HTML 4.01 была выпущена в декабре 1999 года и является очень стабильной версией языка HTML. Эта версия является текущим официальным стандартом и обеспечивает дополнительную поддержку таблиц стилей (CSS) и возможность написания сценариев для различных мультимедийных элементов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/3/12961273_330564684.pdf-img/12961273_330564684.pdf-1.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/3/12961273_330564684.pdf-img/12961273_330564684.pdf-1.jpg' /></noscript></p><p> <strong> HTML5 : </strong> HTML5 — новейшая версия языка гипертекстовой разметки. Первый проект этой версии был анонсирован в январе 2008 года. В разработке версии HTML 5 участвуют две основные организации: W3C (Консорциум World Wide Web) и WHATWG (Рабочая группа по технологиям веб-гипертекстовых приложений). , и все еще находится в разработке.</p><hr/><h3><span class="ez-toc-section" id="_HTML-7"> Особенности HTML </span></h3><p> 1) Это очень <strong> легкий и простой язык </strong> . Его можно легко понять и изменить.</p><p> 2) Очень легко сделать <strong> эффективную презентацию </strong> с помощью HTML, потому что он имеет много тегов форматирования.</p><p> 3) Это язык разметки <strong> </strong> , поэтому он обеспечивает гибкий способ разработки веб-страниц вместе с текстом.</p><p> 4) Это облегчает программистам добавление <strong> ссылки </strong> на веб-страницы (с помощью тега привязки html), что повышает интерес пользователя к просмотру.</p><p> 5) <strong> не зависит от платформы </strong>, поскольку может отображаться на любой платформе, такой как Windows, Linux, Macintosh и т.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.khtulhu.org.ua/images/stories/HTML5-semantin-infografic_rightblog.ru_.png' /><noscript><img loading='lazy' src='/800/600/https/www.khtulhu.org.ua/images/stories/HTML5-semantin-infografic_rightblog.ru_.png' /></noscript></div><div class="post-meta"></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/sajt/shrift-dlya-veb-sajta-20-kick-ass-fonts-for-web-design-check-out-this-list-of-modern-by-abhijit-nayak.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Шрифт для веб сайта: 20 Kick-Ass Fonts for Web Design. Check out this list of modern… | by Abhijit Nayak</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/programmy-dlya-majndmeppinga-10-poleznyx-programm-dlya-postroeniya-mind-map.html" rel="next"><span class="meta-nav">Следующая запись</span> Программы для майндмэппинга: 10 полезных программ для построения mind map</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/struktura-stranicy-html-prostejshaya-html-stranica-struktura-html-dokumenta-html-academy.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='57981' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div><div class="col-md-4"><div id="sidebar" class="sidebar"><div id="search-9" class="widget widget_search"><form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span></div></form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div></div></div><footer class="mz-footer" id="footer"><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info"> © Орфографика.рф, 2010 - 2019</div> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф.</div></footer></div><p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a></p> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_13058247d3082f39f5d009ed1b806645.js"></script></body></html>
