HTML (HyperText Markup Language) – это язык разметки, который используется для создания веб-страниц. Если вы хотите создать свою первую веб-страницу, то вам понадобится файл HTML. Но как же создать его? В этой статье мы рассмотрим основные шаги по созданию файла HTML.
Первым шагом для создания файла HTML является выбор текстового редактора. Ваш выбор может падать на такие программы, как Notepad (для Windows), TextEdit (для Mac) или Visual Studio Code. Откройте программу и создайте новый документ.
Далее мы должны указать браузеру, что это HTML-документ. Для этого нужно добавить специальную строку в начале файла:
<!DOCTYPE html>
Эта строка говорит браузеру, что он должен интерпретировать содержимое файла как код на языке HTML5. После этой строки мы должны добавить тег <html>, который будет определять начало и конец HTML-документа.
Установка и настройка
Для создания файла HTML вам необходимо иметь текстовый редактор, такой как Блокнот, Sublime Text или Visual Studio Code. Эти редакторы удобны в использовании и предоставляют большой функционал для работы с HTML-кодом.
После того, как вы установили редактор, откройте его и создайте новый файл. Для этого выберите меню «Файл» и в нем «Создать новый файл».
| Редактор | Ссылка для скачивания |
|---|
| Блокнот (Windows) | https://www.microsoft.com/ru-ru/p/блокнот/9wzdncrfj3qk |
| Sublime Text | https://www.sublimetext.com/ |
| Visual Studio Code | https://code.visualstudio.com/ |
После создания нового файла, необходимо сохранить его с расширением .html. Для этого выберите меню «Файл» и в нем «Сохранить». В появившемся диалоговом окне укажите имя файла, например «index», и добавьте расширение .html, чтобы получилось так: «index.html». Кроме того, убедитесь, что выбран формат UTF-8 для кодировки текста.
Теперь вы можете начать писать код HTML в созданном файле. Для открытия файла и редактирования кода используйте выбранный вами редактор. Напишите необходимый HTML-код и сохраните файл.
После сохранения файла, вы можете открыть его в веб-браузере, щелкнув правой кнопкой мыши на файле и выбрав «Открыть с помощью» и затем выбирая ваш предпочтительный веб-браузер.
Шаг 1: Установка необходимых программ
Для создания и редактирования файлов HTML вам потребуется установить несколько программ на ваш компьютер. Ниже приведен список программ, которые вам понадобятся:
1. Браузер: На вашем компьютере уже должен быть установлен браузер, такой как Google Chrome, Mozilla Firefox или Microsoft Edge. Браузер позволит вам открывать и просматривать созданные вами файлы HTML.
2. Текстовый редактор: Вы можете использовать любой текстовый редактор для создания и редактирования файлов HTML. Популярные редакторы, такие как Sublime Text, Visual Studio Code и Atom, предоставляют ряд полезных функций для работы с HTML кодом.
3. Локальный сервер: Для тестирования и просмотра созданных вами файлов HTML вам может понадобиться также локальный сервер. Вы можете установить сервер, такой как XAMPP или WampServer, чтобы иметь возможность запускать и открывать файлы HTML на локальном компьютере.
После установки этих программ вы будете готовы приступить к созданию своего первого файла HTML.
Шаг 2: Создание папки для проекта
После того, как вы решили создать файл HTML, вам необходимо создать папку, в которой будут храниться все файлы вашего проекта. Это поможет вам сохранить структуру и организацию проекта, а также упростит его дальнейшую разработку.
Для начала откройте проводник на вашем компьютере и выберите место, где вы хотите создать папку для проекта. Можете выбрать любую папку или создать новую.
Затем нажмите правой кнопкой мыши на выбранном месте и выберите опцию «Создать новую папку». Введите название папки, например, «Мой проект», и нажмите Enter.
Теперь у вас есть папка для проекта, в которой вы сможете хранить все необходимые файлы, такие как HTML, CSS, JavaScript и другие. Не забудьте сохранить файл HTML в эту папку, чтобы его было легко найти и открыть в дальнейшем.
Создание папки для проекта является важным шагом в создании файлов HTML, поскольку это позволяет вам упорядочить и структурировать проект, что упрощает его управление и разработку.
Убедитесь, что вы создали папку для проекта и сохраните весь необходимый контент в этой папке.
Шаг 3: Открытие текстового редактора
Чтобы открыть текстовый редактор, щелкните правой кнопкой мыши на созданном файле HTML и выберите «Открыть с помощью». Затем выберите текстовый редактор из списка программ, доступных на вашем компьютере.
После открытия файла HTML в текстовом редакторе, вы увидите код, который будет описывать содержимое вашего веб-страницы. Внимательно ознакомьтесь с этим кодом и убедитесь, что он соответствует вашим ожиданиям. Если вам нужно внести изменения, вы можете отредактировать код непосредственно в текстовом редакторе.
Когда вы закончите редактировать код, сохраните файл. Нажмите «Сохранить» или «Сохранить как» в меню текстового редактора и выберите место, где вы хотите сохранить файл на вашем компьютере. Убедитесь, что расширение файла остается .html или .htm, чтобы ваш браузер мог правильно интерпретировать его как веб-страницу.
Теперь вы готовы приступить к следующему шагу – добавлению содержимого на вашу веб-страницу.
Шаг 4: Создание файловой структуры
Для начала, создайте основную папку для вашего проекта и назовите ее с именем, которое легко запомнить. Внутри этой папки создайте файл index.html, который будет являться стартовым файлом вашего проекта.
Далее, создайте папки для каждого раздела вашего проекта. Например, если у вас есть разделы «О нас», «Услуги» и «Контакты», создайте папки с соответствующими названиями. В каждой папке создайте файлы HTML для соответствующих страниц.
Это поможет вам легко найти и изменить нужный код в будущем. Не забудьте поддерживать порядок в файловой структуре, чтобы ваш код был легко читать и поддерживать.
Также, может быть полезно создать папку для хранения всех стилей, скриптов и изображений, которые вы будете использовать в вашем проекте. Это поможет вам легко организовать и находить нужные файлы.
Не забывайте делать резервные копии вашего кода, чтобы избежать потерю данных в случае непредвиденных ситуаций. Хорошо организованная файловая структура поможет вам сохранить ваш код в безопасности и с легкостью находить нужные файлы.
Важно следовать этим шагам при создании файловой структуры вашего проекта. Это поможет вам сохранить код в порядке, легко найти нужные файлы и поддерживать ваш проект в будущем.
Основные теги
Одним из основных тегов является тег
. Он используется для создания и форматирования таблиц на веб-странице. Тег содержит другие теги, такие как (строка таблицы),| (ячейка данных) и | (ячейка заголовка). Тег используется для параграфов. Он позволяет создавать отдельные блоки текста, разделяя их между собой. Каждый параграф обычно начинается с новой строки и имеет пустую строку перед и после себя. Другим важным тегом является тег . Он используется для определения метаданных страницы, таких как заголовок страницы, ключевые слова и описание. Тег обычно содержит теги, такие как (заголовок страницы) и<meta> (мета-теги).</p><p>Теги <a> используются для создания ссылок. Они позволяют пользователю переходить по различным страницам или местам внутри одной страницы.</p><p>Кроме того, существуют теги для создания списков (</p><ul> для маркированного списка,<ol> для нумерованного списка) и теги для вставки изображений (<img>). Это только некоторые из основных тегов, которые могут быть использованы в HTML.<p>Использование правильных тегов и их правильное расположение в HTML-файле помогает создавать эстетический и структурированный контент, который легко читается и понимается браузерами и поисковыми системами.</p><h2 id="teg">Тег</h2><p>Теги являются открытыми и закрытыми. Открывающий тег указывается с помощью угловых скобок (<code><</code>), за которыми следует название тега, и закрывающий тег указывается также с помощью угловых скобок, но дополнительно с символом слеша (<code></</code>), после которого следует название тега.</p><p>Между открывающим и закрывающим тегами может быть размещен контент, который определяет содержимое элемента.</p><p><strong>Пример:</strong></p><pre>
<code><p>Это абзац текста.</p></code>
</pre><p>В данном примере используется тег <code><p></code> для создания абзаца текста. Открывающий тег <code><p></code> указывает начало абзаца, а закрывающий тег <code></p></code> указывает его конец. Текст «Это абзац текста.» является содержимым абзаца.</p><p>Теги также могут иметь атрибуты, которые позволяют задавать дополнительные свойства элемента. Атрибуты указываются в открывающем теге после названия тега.</p><p><strong>Пример:</strong></p><pre>
<code><a href="https://www.example.com">Ссылка</a></code>
</pre><p>В данном примере используется тег <code><a></code> для создания гиперссылки. Атрибут <code>href</code> определяет адрес, на который будет вести ссылка. Текст «Ссылка» является отображаемым текстом ссылки.</p><h2 id="teg-2">Тег</h2><p>Основной синтаксис тега выглядит следующим образом: <strong><тег></strong>текст<em></тег></em>. Закрывающий тег обязателен, поскольку он определяет конец элемента. Теги также могут иметь атрибуты, которые позволяют дополнительно настраивать их поведение.</p><p>Многие теги имеют свои специфические свойства и функции. Например, тег <strong><p></strong> используется для создания абзацев текста, тег <strong><h1></strong> — для создания заголовков различных уровней, а тег <strong><a></strong> — для создания ссылок.</p><p>Теги могут быть вложены друг в друга для создания более сложной разметки страницы. Например:</p><pre>
<code>
<div>
<h1>Заголовок</h1>
<p>Текст абзаца.</p>
</div>
</code>
</pre><p>В данном примере тег <strong><div></strong> является контейнером, в котором содержатся заголовок <strong><h1></strong> и абзац <strong><p></strong>. Заголовок и абзац находятся внутри тега <strong><div></strong> и образуют единое целое.</p><p>Знание основных тегов является важным для создания правильной и структурированной разметки веб-страницы. Они позволяют определить и организовать содержимое страницы, а также задать его внешний вид и интерактивность.</p><h2 id="teg-3">Тег</h2><p>В HTML теги используются для определения структуры и представления информации на веб-странице. Теги помечают определенные элементы внутри документа и применяют к ним определенные стили или функциональность.</p><p>Теги в HTML обычно заключаются в угловые скобки и могут иметь атрибуты для дополнительной настройки их поведения или внешнего вида. Например, тег <a> используется для создания гиперссылок, атрибут href задает адрес ссылки.</p><p>Существует множество различных тегов, каждый из которых имеет свое предназначение. Некоторые из наиболее часто используемых тегов включают:</p><ul><li>Тег<p>используется для создания абзацев текста;</li><li>Тег<ul> создает неупорядоченный список;</li><li>Тег<ol> используется для создания упорядоченного списка;</li><li>Тег<li> определяет элемент списка.</li></ul><p>Определение и использование правильных тегов является важным аспектом создания корректной и хорошо оформленной веб-страницы. Корректное использование тегов помогает поисковым системам разобраться в контенте страницы и улучшает ее доступность для пользователей.</p><div class="fpm_end"></div></div></article><div class="rating-box"><div class="rating-box__header">Оцените статью</div><div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="150977" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div></div><div class="entry-social"><div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span><span class="social-button social-button--pinterest" data-social="pinterest" data-url="https://profi-velo.ru/blog/prostoi-i-ponyatnyi-gaid-o-sozdanii-faila-html-dlya-vasego-veb-saita-bez-lisnix-tocek-i-dvoetocii/" data-title="Простой и понятный гайд о создании файла HTML для вашего веб-сайта без лишних точек и двоеточий" data-description="HTML (HyperText Markup Language) – это язык разметки, который используется для создания веб-страниц. Если вы хотите создать свою первую веб-страницу, то вам понадобится файл HTML. Но как же создать его? В этой статье мы рассмотрим основные шаги по созданию файла HTML. Первым шагом для создания файла HTML является выбор текстового редактора. Ваш выбор может падать […]" data-image=""></span></div></div><meta itemprop="author" content="admin"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://profi-velo.ru/blog/prostoi-i-ponyatnyi-gaid-o-sozdanii-faila-html-dlya-vasego-veb-saita-bez-lisnix-tocek-i-dvoetocii/" content="Простой и понятный гайд о создании файла HTML для вашего веб-сайта без лишних точек и двоеточий"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="profi-velo.ru"><meta itemprop="telephone" content="profi-velo.ru"><meta itemprop="address" content="https://profi-velo.ru/blog"></div></main></div><aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"><div class="sticky-sidebar js-sticky-sidebar"><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="Q_sidebar"></div></div></div></div></aside><div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/blog/yandeks-start-besplatnyi-servis-ot-yandeksa-s-unikalnymi-vozmoznostyami-dlya-organizacii-raboty-i-povyseniya-effektivnosti-otlicnye-funkcionalnye-instrumenty-udobnyi-interfeis-i-mnozestvo-poleznyx-otz/">Яндекс Старт – бесплатный сервис от Яндекса с уникальными возможностями для организации работы и повышения эффективности — отличные функциональные инструменты, удобный интерфейс и множество полезных отзывов пользователей!</a></div><div class="post-card__description">Яндекс Старт — это современный сервис, предоставляемый</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/blog/yandeks-metrika-perexody-po-reklame-vse-o-rezultatax-i-rukovodstvo/">Яндекс метрика — переходы по рекламе все о результатах и руководство</a></div><div class="post-card__description">Яндекс Метрика является одной из наиболее популярных</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/blog/yantar-celitel-v-domasnix-usloviyax-vosstanovlenie-zdorovya-ukreplenie-immuniteta-i-energeticeskaya-garmoniya-s-pomoshhyu-yantarya/">Янтарь — целитель в домашних условиях. Восстановление здоровья, укрепление иммунитета и энергетическая гармония с помощью янтаря</a></div><div class="post-card__description">Янтарь – это не только прекрасное украшение, но и ценный</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/blog/yandeks-launcer-effektivnoe-resenie-dlya-povyseniya-proizvoditelnosti-v-android-ustroistvax-i-optimizacii-raboty-s-prilozeniyami/">Яндекс Лаунчер — эффективное решение для повышения производительности в Android устройствах и оптимизации работы с приложениями</a></div><div class="post-card__description">Современные смартфоны на платформе Android предлагают</div></div></div></div></div></div><div class="site-footer-container "><footer id="colophon" class="site-footer site-footer--style-gray full"><div class="site-footer-inner fixed"><div class="footer-widgets footer-widgets-3"><div class="footer-widget"><div id="nav_menu-3" class="widget widget_nav_menu"><div class="widget-header">Про сайт</div><div class="menu-about_menu-container"><ul id="menu-about_menu" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://profi-velo.ru/blog/kontakty/">Контакты</a></li><li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="/sitemap_index.xml">Карта сайта</a></li></ul></div></div></div><div class="footer-widget"><div id="wpshop_widget_articles-2" class="widget widget_wpshop_widget_articles"><div class="widget-header">Популярные записи</div><div class="widget-articles"><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/blog/effektivnye-sposoby-unictozeniya-osinogo-gnezda-v-zemle-proverennye-texniki-i-metody-obespecivayushhie-polnoe-ustranenie-opasnosti/">Эффективные способы уничтожения осиного гнезда в земле – проверенные техники и методы, обеспечивающие полное устранение опасности</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/blog/gid-dlya-nacinayushhix-po-rabote-televizora-osnovnye-principy-i-funkcional-ustroistva/">Гид для начинающих по работе телевизора — основные принципы и функционал устройства</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/blog/pocemu-blok-ne-redaktiruetsya-v-autocad-osnovnye-priciny-i-effektivnye-sposoby-reseniya-problemy/">Почему блок не редактируется в AutoCAD — основные причины и эффективные способы решения проблемы</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/blog/kak-vosstanovit-rabotu-zeludka-poleznye-sovety-i-rekomendacii/">Как восстановить работу желудка: полезные советы и рекомендации</a></div></div></article></div></div></div><div class="footer-widget"><div id="nav_menu-4" class="widget widget_nav_menu"><div class="widget-header">Cookie</div><div class="menu-cookie_menu-container"><ul id="menu-cookie_menu" class="menu"><li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-66"><a rel="privacy-policy" href="https://profi-velo.ru/blog/privacy-policy/">Политика конфиденциальности</a></li><li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="https://profi-velo.ru/blog/soglashenie/">Соглашение (пользовательское)</a></li></ul></div></div></div></div><div class="footer-bottom"><div class="footer-info"> © 2025 profi-velo.ru</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://profi-velo.ru/blog/prostoi-i-ponyatnyi-gaid-o-sozdanii-faila-html-dlya-vasego-veb-saita-bez-lisnix-tocek-i-dvoetocii";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type="text/javascript" id="reboot-scripts-js-extra">var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"};
var wps_ajax = {"url":"https:\/\/profi-velo.ru\/blog\/wp-admin\/admin-ajax.php","nonce":"0e0f14446c"};</script> <script>window.lazyLoadOptions = {
elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
data_src: "lazy-src",
data_srcset: "lazy-srcset",
data_sizes: "lazy-sizes",
class_loading: "lazyloading",
class_loaded: "lazyloaded",
threshold: 300,
callback_loaded: function(element) {
if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
if (element.classList.contains("lazyloaded") ) {
if (typeof window.jQuery != "undefined") {
if (jQuery.fn.fitVids) {
jQuery(element).parent().fitVids();
}
}
}
}
}};
window.addEventListener('LazyLoad::Initialized', function (e) {
var lazyLoadInstance = e.detail.instance;
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var image_count = 0;
var iframe_count = 0;
var rocketlazy_count = 0;
mutations.forEach(function(mutation) {
for (i = 0; i < mutation.addedNodes.length; i++) {
if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
return;
}
if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
return;
}
images = mutation.addedNodes[i].getElementsByTagName('img');
is_image = mutation.addedNodes[i].tagName == "IMG";
iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');
image_count += images.length;
iframe_count += iframes.length;
rocketlazy_count += rocket_lazy.length;
if(is_image){
image_count += 1;
}
if(is_iframe){
iframe_count += 1;
}
}
} );
if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
lazyLoadInstance.update();
}
} );
var b = document.getElementsByTagName("body")[0];
var config = { childList: true, subtree: true };
observer.observe(b, config);
}
}, false);</script><script data-no-minify="1" async src="https://profi-velo.ru/blog/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> <script defer src="https://profi-velo.ru/blog/wp-content/cache/autoptimize/js/autoptimize_8719a8fcc817f74da642350c845eb2cd.js"></script></body></html> |