5 способов создания привлекательных заголовков для текстовых блоков

Текстовое поле — это полезный инструмент в программе Microsoft Word, который позволяет вставлять динамические данные в документы. Оно может быть использовано для вставки автоматического номера страницы, даты, времени и других сведений, которые могут изменяться в процессе работы над документом. В этой статье мы рассмотрим, как правильно использовать текстовое поле в Word и какие функции оно предлагает.

Вставить текстовое поле в Word очень просто. Для этого выберите вкладку «Вставка» в меню программы, затем нажмите на кнопку «Текстовое поле». В появившемся списке выберите нужный вариант, например, «Номер страницы» или «Дата и время». После выбора текстовое поле автоматически вставится в документ в текущем месте курсора.

Один из полезных вариантов текстового поля в Word — вставка номера страницы. Когда вы разрабатываете длинный документ с несколькими страницами, номера страницы автоматически обновляются при внесении изменений в текст. Это удобно, так как вам не придется каждый раз вручную изменять номер страницы при добавлении или удалении содержания.

Текстовое поле в Word также может содержать дату и время. Это может быть полезно, когда вы хотите, чтобы документ автоматически отображал текущую дату и время. Например, в бизнес-документе или отчете можно использовать такое текстовое поле для обозначения даты создания документа.

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

Таким образом, текстовое поле в Word — это удобный и гибкий инструмент, который можно использовать для вставки динамических данных в документы. Он предлагает множество функций, которые могут сэкономить ваше время и сделать работу над документами более эффективной.

Магические возможности текстового поля

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

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

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

Возможности текстового поля:

• Ввод любого текста без ограничений.
• Настройка атрибутов для контроля вводимой информации.
• Стилизация с помощью CSS для соответствия дизайну.

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

Преимущества использования текстового поля в веб-разработке

1. Гибкость и универсальность. Текстовые поля могут быть использованы для различных целей, начиная от простых форм обратной связи и регистрации пользователей до сложных текстовых редакторов и поисковых полей. Они могут быть настроены для различных типов ввода данных, таких как текст, числа, даты и электронная почта. Благодаря этому, текстовые поля просты в использовании и могут быть адаптированы под различные потребности и требования пользователей.

2. Удобство использования. Текстовые поля предоставляют удобный и интуитивно понятный способ ввода данных для пользователей. Они позволяют быстро и легко ввести текст или другую информацию без необходимости в использовании сложных инструментов или команд. Кроме того, текстовые поля могут быть настроены с помощью различных параметров, таких как ограничение на количество символов или формат ввода, что позволяет контролировать и валидировать данные, вводимые пользователем.

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

Как правильно использовать текстовое поле на сайте

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

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

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

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

Основные типы текстовых полей в HTML

Первый тип текстового поля — это обычное однострочное текстовое поле. Оно позволяет пользователю вводить текст только на одной строке. Это самый простой и наиболее часто используемый тип текстового поля в HTML. Чтобы создать такое поле, нужно использовать тег с атрибутом type=»text».

Второй тип текстового поля — это многострочное текстовое поле. Оно позволяет пользователю вводить текст на нескольких строках. Такое поле полезно, когда требуется вводить большое количество текста, например, в комментариях или описании. Для создания многострочного текстового поля нужно использовать тег .</p> <p>Третий тип текстового поля — это поле для ввода пароля. Оно похоже на обычное однострочное текстовое поле, но при вводе символы пароля заменяются точками или звездочками, чтобы скрыть их от посторонних глаз. Для создания такого поля нужно использовать тег <input> с атрибутом type=»password».</p> <h2 id="populyarnye-css-stili-dlya-tekstovyh-poley">Популярные CSS-стили для текстовых полей</h2> <p>Одним из популярных стилей для текстовых полей является изменение цвета фона при фокусе. Это делает поле более заметным и позволяет пользователю легче ориентироваться на странице. Вы можете использовать CSS-свойство <strong>:focus</strong> для указания стилей только для активного текстового поля.</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://ictechnika.ru/sozdanie-avtozapolneniya-v-word-udobnyy-instrument-dlya-povysheniya-proizvoditelnosti/" target="_blank" rel="nofollow" class="u7be77d72b8af3d1d62617c5d2832b621"><!-- INLINE RELATED POSTS 3/3 //--><style> .u7be77d72b8af3d1d62617c5d2832b621 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #7F8C8D!important; text-decoration:none; } .u7be77d72b8af3d1d62617c5d2832b621:active, .u7be77d72b8af3d1d62617c5d2832b621:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u7be77d72b8af3d1d62617c5d2832b621 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u7be77d72b8af3d1d62617c5d2832b621 .ctaText { font-weight:bold; color:#000000; text-decoration:none; font-size: 16px; } .u7be77d72b8af3d1d62617c5d2832b621 .postTitle { color:#141414; text-decoration: underline!important; font-size: 16px; } .u7be77d72b8af3d1d62617c5d2832b621:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Читайте также:</span>  <span class="postTitle">Создание автозаполнения в Word - удобный инструмент для повышения производительности</span></div></a></div><p>Еще один популярный стиль для текстовых полей — изменение цвета границы при наведении курсора. Это помогает пользователю понять, что поле можно нажать и ввести текст. Свойство <strong>:hover</strong> позволяет применять стили к текстовому полю при наведении курсора на него.</p> <ul> <li>Другой интересный стиль для текстовых полей — добавление эффекта тени. Это создает иллюзию вогнутости поля и делает его более привлекательным для взгляда. Вы можете использовать свойство <strong>box-shadow</strong> для создания тени вокруг текстового поля.</li> <li>Еще один эффект, который можно применить к текстовым полям, — это добавление градиента. Градиентный фон делает поле более ярким и привлекательным. Свойство <strong>background</strong> и свойство <strong>linear-gradient</strong> позволяют создавать красивые и насыщенные цветовые переходы.</li> <li>Наконец, вы можете добавить всплывающую подсказку к текстовому полю с помощью свойства <strong>title</strong>. Когда пользователь наводит курсор на поле, появляется всплывающая подсказка с дополнительной информацией или подсказкой по заполнению.</li> </ul> <p>В зависимости от потребностей вашего проекта вы можете использовать один или несколько из этих стилей для текстовых полей. Это поможет улучшить пользовательский опыт и сделать вашу веб-страницу более привлекательной и функциональной.</p> <h2 id="metody-validatsii-i-obrabotki-dannyh-iz-tekstovogo">Методы валидации и обработки данных из текстового поля</h2> <p>Одним из методов валидации является проверка наличия данных в поле. Это позволяет убедиться, что пользователь ввел необходимую информацию. Кроме того, мы изучили методы проверки формата данных, такие как проверка на соответствие шаблону или формату.</p> <p>Для обработки данных из текстового поля мы рассмотрели некоторые приемы, включая очистку данных от лишних символов, преобразование регистра символов и удаление пробелов. Это помогает нормализовать данные и обеспечить их единообразие при дальнейшей обработке.</p> <p>Также в статье мы познакомились с методами экранирования специальных символов, чтобы избежать возможных проблем с безопасностью. Это важно при работе с данными, которые могут содержать опасные или некорректные символы.</p> <p>В завершение можно сказать, что правильная валидация и обработка данных из текстового поля является неотъемлемой частью создания надежной и функциональной веб-формы. При помощи описанных методов мы можем гарантировать корректность и безопасность пользовательского ввода, а также облегчить последующую обработку данных.</p> </div><!-- .entry-content --> </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="289044" 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--facebook" data-social="facebook"></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></div> </div> <meta itemprop="author" content="admin"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://ictechnika.ru/5-sposobov-sozdaniya-privlekatelnyh-zagolovkov-dlya-tekstovyh-blokov-2/" content="5 способов создания привлекательных заголовков для текстовых блоков"> <meta itemprop="dateModified" content="2024-04-21"> <meta itemprop="datePublished" content="2024-04-18T22:59:07+02:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="Инструкции и Советы по Настройке"><meta itemprop="telephone" content="Инструкции и Советы по Настройке"><meta itemprop="address" content="https://ictechnika.ru"></div> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" class="search-form" action="https://ictechnika.ru/"> <label> <span class="screen-reader-text"><!--noindex-->Search for:<!--/noindex--></span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s"> </label> <button type="submit" class="search-submit"></button> </form></div> <div id="recent-posts-2" class="widget widget_recent_entries"> <div class="widget-header">Свежие записи</div> <ul> <li> <a href="https://ictechnika.ru/5-sposobov-sopostavit-dokumenty-word-i-sdelat-rabotu-effektivnee-2/">5 способов сопоставить документы word и сделать работу эффективнее</a> </li> <li> <a href="https://ictechnika.ru/5-sposobov-sozdat-krasivye-grafiki-i-diagrammy-v-microsoft-excel-2/">5 способов создать красивые графики и диаграммы в Microsoft Excel</a> </li> <li> <a href="https://ictechnika.ru/5-sposobov-sozdat-krasivoe-oformlenie-ramki-kotoroe-zavlechet-vashih-chitateley-2/">5 способов создать красивое оформление рамки которое завлечет ваших читателей</a> </li> <li> <a href="https://ictechnika.ru/5-sposobov-sozdat-znak-nomer-v-word-kotorye-uvlekut-chitatelya-2/">5 способов создать знак номер в Word которые увлекут читателя</a> </li> <li> <a href="https://ictechnika.ru/5-sposobov-sozdat-dokument-word-s-pomoschyu-pravoy-knopki-myshi-2/">5 способов создать документ Word с помощью правой кнопки мыши</a> </li> </ul> </div><div id="block-3" class="widget widget_block"><div class="flatPM_sidebar" data-top="70"> <div id="Q_sidebar"></div> </div></div> </div> </aside><!-- #secondary --> <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://ictechnika.ru/5-prichin-pochemu-shrift-igraet-vazhnuyu-rol-v-dizayne/">5 причин почему шрифт играет важную роль в дизайне</a></div><div class="post-card__description">Word Equation – это инструмент, который позволяет пользователям</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://ictechnika.ru/bezopasnoe-podklyuchenie-sotrudnikov-cherez-vpn-zaschita-dannyh-i-povyshenie-effektivnosti-raboty/">Безопасное подключение сотрудников через VPN — защита данных и повышение эффективности работы</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://ictechnika.ru/zagadochnoe-slovo-nachinayuscheesya-na-e-i-zakanchivayuscheesya-na-e/">Загадочное слово начинающееся на е и заканчивающееся на е</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://ictechnika.ru/kak-aktivirovat-i-ispolzovat-rezhim-sohraneniya-izmeneniy-v-word/">Как активировать и использовать режим сохранения изменений в Word</a></div><div class="post-card__description">Режим сохранения изменений в Word —</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://ictechnika.ru/kak-ispolzovat-word-v-kachestve-pochty/">Как использовать Word в качестве почты</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://ictechnika.ru/kak-ogranichit-vvod-dannyh-v-yacheyku-excel-sovety-dlya-udobnoy-raboty/">Как ограничить ввод данных в ячейку Excel — советы для удобной работы</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://ictechnika.ru/kak-sdelat-nepodvizhnye-stroki-v-excel-i-uprostit-rabotu/">Как сделать неподвижные строки в Excel и упростить работу</a></div><div class="post-card__description">В программе Excel существует возможность создавать</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://ictechnika.ru/kak-effektivno-ubirat-probely-v-vba-excel-i-povysit-effektivnost-svoey-raboty/">Как эффективно убирать пробелы в VBA Excel и повысить эффективность своей работы</a></div><div class="post-card__description">Устали тратить время на ручное удаление пробелов в</div> </div> </div></div> </div><!--.site-content-inner--> </div><!--.site-content--> <div class="site-footer-container "> <div class="footer-navigation fixed" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner full"> <div class="menu-tehnicheskoe-menyu-container"><ul id="footer_menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="https://ictechnika.ru/pravoobladatelyam/">Правообладателям</a></li> <li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="https://ictechnika.ru/politika-konfidentsialnosti/">Политика конфиденциальности</a></li> <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="https://ictechnika.ru/kontakty/">Контакты</a></li> </ul></div> </div> </div><!--footer-navigation--> <footer id="colophon" class="site-footer site-footer--style-gray full"> <div class="site-footer-inner fixed"> <div class="footer-bottom"> <div class="footer-info"> © 2024 Инструкции и Советы по Настройке </div> <div class="footer-counters"><!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(96233993, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/96233993" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </div> </footer><!--.site-footer--> </div> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><script type="text/javascript" id="reboot-scripts-js-extra"> /* <![CDATA[ */ 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:\/\/ictechnika.ru\/wp-admin\/admin-ajax.php","nonce":"9ddacbdeeb"}; /* ]]> */ </script> <script type="text/javascript" src="https://ictechnika.ru/wp-content/themes/reboot/assets/js/scripts.min.js" id="reboot-scripts-js"></script> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function($){ $('.link').replaceWith(function(){ var id = ( null != $(this).attr('id') ) ? ' id="' + $(this).attr('id') + '"' : '', target = ( null != $(this).attr('data-target') ) ? ' target="' + $(this).attr('data-target') + '"' : ' target="_blank"', title = ( null != $(this).attr('title') ) ? ' title="' + $(this).attr('title') + '"' : '', style = ( null != $(this).attr('style') ) ? ' style="' + $(this).attr('style') + '"' : '', rel = ( null != $(this).attr('data-rel') ) ? ' rel="' + $(this).attr('data-rel') + '"' : '', cl = ( null != $(this).attr('class') ) ? $(this).attr('class').replace('link','').trim() : ''; cl = ( '' != cl ) ? ' class="' + cl + '"' : ''; return '<a href="' + $(this).attr('data-link') + '" ' + title + id + cl + target + style + rel + ' >' + $(this).html() + '</a>'; }); }); /*]]>*/ </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://ictechnika.ru/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> </body> </html>