Лекция по языку разметки гипертекста HTML - Основы, Примеры и Практика

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

Каждый элемент HTML имеет свою роль. Используйте <h1> для заголовков, <p> для параграфов, а <a> для создания ссылок. Знание этих тегов упрощает создание страниц. Мы также подадим примеры реальных сценариев, где каждый тег играет важную роль. Практика поможет вам закрепить полученные навыки.

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

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

Структура HTML-документа: Важные элементы и их функции

Теги параграфов, обозначаемые как `

`, формируют текстовый контент. Для разделения блоков текста используют `
` для переносов строк и `

` для горизонтальных разделителей. Пункты списков оформляются с помощью `

` внутри.

Для взаимодействия с пользователем внедряйте формы с помощью тега `

`. Это позволяет собирать данные через элементы управления, такие как ``, ``, и `<button>`. Кроме того, теги `<a>` используют для создания гиперссылок, указывая атрибут `href` для назначения адреса.</p> <p>Наконец, используйте теги мультимедиа, такие как `<img>`, для изображений и `<video>` для видео. Это поможет сделать страницу более динамичной и привлекательной.</p> <p>Знакомство с этими элементами и их функциями – ключ к созданию структурированных и функциональных веб-страниц. Регулярно практикуйтесь и экспериментируйте с разными тегами, чтобы улучшать свои навыки в HTML.</p> <h3>Что такое DOCTYPE и его значение для браузеров</h3> <p>Когда браузер загружает страницу, он сначала проверяет DOCTYPE. Если оно отсутствует или указано неправильно, браузер может перейти в » quirks mode», что приведет к некорректному отображению элементов страницы. Это означает, что браузер будет пытаться подстраиваться под старые методы отображения, что в свою очередь ухудшает визуальное восприятие и функциональность.</p> <p>Вот основные правила для использования DOCTYPE:</p> <table> <tr> <th>Тип DOCTYPE</th> <th>Образец</th> <th>Область использования</th> </tr> <tr> <td>HTML5</td> <td><code><!DOCTYPE html></code></td> <td>Для всех новых проектов</td> </tr> <tr> <td>HTML 4.01 (Strict)</td> <td><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code></td> <td>Когда требуется строгое соблюдение стандартов</td> </tr> <tr> <td>HTML 4.01 (Transitional)</td> <td><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></code></td> <td>Для проектирования с устаревшими элементами</td> </tr> <tr> <td>XHTML 1.0 (Strict)</td> <td><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></td> <td>Для строго типизированного XHTML</td> </tr> </table> <p>Настоящий DOCTYPE не влияет на дизайн, но он помогает избежать множества проблем, связанных с отображением. Убедитесь, что вы всегда добавляете его в начало вашего HTML-документа, прежде чем писать остальной код. Это наладит работу браузера и обеспечит правильное отображение страницы для пользователей.</p> <h3>Теги <code><header></code>, <code><main></code> и <code><footer></code>: Как организовать содержание</h3> <p>Используйте теги <code><header></code>, <code><main></code> и <code><footer></code> для структурирования вашего веб-контента. Это улучшает читабельность и доступность вашего сайта.</p> <ul> <li><code><header></code>: Этот тег содержит заголовок страницы или раздела. Включите логотип, навигацию и важные ссылки.</li> <li><code><main></code>: Используйте этот тег для основного контента страницы. Это основной блок, который содержит текст, изображения, видео и другие медиа.</li> <li><code><footer></code>: Этот элемент подходит для размещения контактной информации, правовых заметок или дополнительных ссылок. Рекомендуется добавлять сюда ссылки на политику конфиденциальности и условия использования.</li> </ul> <p>Структурируйте ваш документ в соответствии с этим шаблоном:</p> <ol> <li>Поместите все элементы <code><header></code> в верхнюю часть страницы.</li> <li>Исчерпывающе заполняйте блок <code><main></code> актуальным контентом.</li> <li>Завершите страницу блоком <code><footer></code>, чтобы пользователи могли быстро найти важные ссылки.</li> </ol> <p>Делая так, вы упрощаете поиск информации, улучшая опыт пользователя. Это также упрощает работу поисковых систем при индексации вашего сайта.</p> <h3>Пример структуры HTML:</h3> <pre> <header> <h1>Название вашего сайта</h1> <nav> <ul> <li><a href="#home">Главная</a></li> <li><a href="#about">О нас</a></li> </ul> </nav> </header> <main> <article> <h2>Заголовок статьи</h2> <p>Текст статьи.</p> </article> </main> <footer> <p>Контактная информация: info@example.com</p> </footer> </pre> <p>Следуя этой структуре, вы обеспечите правильное отображение сайта и его логическую организацию. Это станет основой для эффективного взаимодействия ваших пользователей с контентом.</p> <h3>Метаданные: Зачем они нужны и как их использовать</h3> <p>Метаданные помогают поисковым системам и другим приложениям правильно индексировать веб-страницы. Используйте метатег <code><meta name="description" content="Ваше описание"></code> для краткого описания содержимого. Это отображается в результатах поисковых систем и влияет на кликабельность.</p> <p>Укажите <code><meta name="keywords" content="слово1, слово2, слово3"></code>, чтобы указать ключевые слова, описывающие вашу тему. Хотя этот метатег менее значим для SEO, он все еще может помочь понять содержание страницы.</p> <p>Задайте <code><meta charset="UTF-8"></code>, чтобы определить кодировку символов. Это предотвратит проблемы с отображением текста и знаков на вашем сайте. Поместите этот тег в раздел <code><head></code> вашего документа.</p> <p>Для улучшения SEO можно использовать <code><meta name="robots" content="index, follow"></code>, чтобы указать поисковым системам, как индексировать страницу. Если не хотите, чтобы страница индексировалась, укажите <code>noindex</code>.</p> <p>Не забывайте включать <code><meta name="viewport" content="width=device-width, initial-scale=1"></code> для обеспечения адаптивности вашего сайта на мобильных устройствах. Это важно в современном веб-дизайне.</p> <p>Также полезно добавлять метаданные Open Graph для улучшения представления вашей страницы в социальных сетях. Используйте теги, такие как <code><meta property="og:title" content="Заголовок вашей страницы"></code> и <code><meta property="og:image" content="URL_изображения"></code>.</p> <p>Регулярно обновляйте метаданные, чтобы они соответствовали текущему содержимому. Это поможет поддерживать актуальность информации и повысит шансы на высокий рейтинг в поисковых системах.</p> <h3>Структурные теги: <code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code> и <code><nav></code></h3> <p>Используйте тег <code><header></code> для обозначения верхней части страницы или раздела. Он может содержать логотип, название сайта и навигационное меню. Это помогает пользователям быстро идентифицировать контент.</p> <p>Тег <code><footer></code> завершает страницы или разделы. Поместите в него информацию о копирайте, ссылки на контактные данные и другие вспомогательные материалы. Это упрощает поиск важной информации.</p> <p>Тег <code><article></code> предназначен для самодостаточного контента, который может быть независимым. Это могут быть блоги, новости или другой важный текст. Использование этого тега улучшает семантику и SEO вашего сайта.</p> <p>Создавайте логическую структуру контента с помощью тега <code><section></code>. Каждая секция должна содержать заголовок и тематически связанный текст. Это делает информацию более доступной и понятной для читателей.</p> <p>Используйте тег <code><nav></code> для создания меню навигации. Это может быть список ссылок на различные разделы. Правильное применение навигационных тегов улучшает доступность и упрощает перемещение по странице.</p> <h2>Практические примеры использования HTML: От простого к сложному</h2> <p>Создайте простую веб-страницу с заголовком и абзацем. Используйте теги <code><h1></code> для заголовка и <code><p></code> для текста. Вот пример:</p> <p><code><br /> <h1>Добро пожаловать на наш сайт!</h1><br /> <p>Здесь вы найдете множество интересного.</p><br /> </code></p> <p>Добавьте изображение с помощью тега <code><img></code>. Укажите атрибуты <code>src</code> и <code>alt</code> для определения пути к файлу и альтернативного текста:</p> <p><code><br /> <img src="path/to/image.jpg" alt="Описание изображения"><br /> </code></p> <p>Создайте список с помощью тегов <code><ul></code> для маркированного списка или <code><ol></code> для нумерованного списка:</p> <p><code><br /> <ul><br /> <li>Первый пункт</li><br /> <li>Второй пункт</li><br /> </ul><br /> </code></p> <p>Чтобы создать таблицу, используйте теги <code><table></code>, <code><tr></code>, <code><th></code> и <code><td></code>. Вот пример таблицы:</p> <table> <tr> <th>Название продукта</th> <th>Цена</th> <th>Количество</th> </tr> <tr> <td>Яблоки</td> <td>100 руб.</td> <td>10 кг</td> </tr> <tr> <td>Бананы</td> <td>150 руб.</td> <td>5 кг</td> </tr> </table> <p>Добавьте ссылки с помощью тега <code><a></code>. Укажите атрибут <code>href</code> для адреса:</p> <p><code><br /> <a href="https://www.example.com">Перейти на сайт</a><br /> </code></p> <p>Например, чтобы создать контактную форму, используйте теги <code><form></code>, <code><input></code>, <code><textarea></code> и <code><button></code>:</p> <p><code><br /> <form action="submit.php" method="post"><br /> <label for="name">Ваше имя:</label><br /> <input type="text" id="name" name="name"><br /> <label for="message">Сообщение:</label><br /> <textarea id="message" name="message"></textarea><br /> <button type="submit">Отправить</button><br /> </form><br /> </code></p> <p>С практикой, переходите к более сложным структурам. Попробуйте создать многоколоночный макет с помощью <code><div></code> и CSS.</p> <p>Составьте структуру страницы с заголовком, навигацией, основным содержимым и подвалом, используя семантические теги:</p> <p><code><br /> <header><br /> <h1>Мой сайт</h1><br /> <nav><a href="#home">Главная</a> | <a href="#about">О нас</a></nav><br /> </header><br /> <main><br /> <article><br /> <h2>Статья 1</h2><br /> <p>Содержание статьи.</p><br /> </article><br /> </main><br /> <footer><br /> <p>© 2023 Мой сайт</p><br /> </footer><br /> </code></p> <p>Эти примеры послужат основой для создания ваших собственных проектов. Начните экспериментировать с комбинациямиHTML-тегов для достижения уникального результата!</p> <h3>Создание простой веб-страницы с заголовком и текстом</h3> <p>Для создания простой веб-страницы начните с базовой структуры HTML. Используйте тег <code><!DOCTYPE html></code> для объявления документа. Затем добавьте элемент <code><html></code>, который содержит все остальные элементы.</p> <p>Внутри тега <code><html></code> разместите элемент <code><head></code>, где определите заголовок страницы с помощью тега <code><title></code>. Например:</p> <pre><code><head> <title>Моя первая веб-страница</title> </head></code></pre> <p>После этого добавьте тег <code><body></code>, который будет содержать основной контент вашей страницы. Для заголовка используйте тег <code><h1></code>. Например:</p> <pre><code><body> <h1>Добро пожаловать на мою страницу!</h1> </body></code></pre> <p>Дополнив страницу текстом, примените тег <code><p></code> для параграфов. Например:</p> <pre><code><body> <h1>Добро пожаловать на мою страницу!</h1> <p>Это мой первый опыт создания веб-страницы с помощью HTML.</p> </body></code></pre> <p>Объедините все упомянутое в единую структуру:</p> <pre><code><!DOCTYPE html> <html> <head> <title>Моя первая веб-страница</title> </head> <body> <h1>Добро пожаловать на мою страницу!</h1> <p>Это мой первый опыт создания веб-страницы с помощью HTML.</p> </body> </html></code></pre> <p>По сохранении этого кода в файл с расширением <code>.html</code>, откройте его в браузере. Вы увидите заголовок и текст вашего контента. Экспериментируйте с различными заголовками и параграфами, чтобы лучше изучить HTML.</p> <h3>Работа с изображениями и гиперссылками: Примеры вставки</h3> <p>Для вставки изображений используйте тег <code><img></code>. Укажите обязательные атрибуты <code>src</code> для пути к изображению и <code>alt</code> для текстового описания. Это улучшает доступность и SEO вашего сайта.</p> <p>Пример вставки изображения:</p> <pre><code><img src="path/to/image.jpg" alt="Описание изображения"></code></pre> <p>При создании гиперссылок применяйте тег <code><a></code>. Укажите атрибут <code>href</code> для ссылки. С помощью атрибута <code>target</code> можно задать, открывать ли ссылку в новой вкладке.</p> <p>Пример вставки гиперссылки:</p> <pre><code><a href="https://example.com" target="_blank">Перейти на сайт</a></code></pre> <p>Совмещение изображений и ссылок позволяет создать визуально привлекательные кнопки. Используйте тег <code><a></code> с вложенным внутрь <code><img></code>.</p> <p>Пример создания ссылки на изображение:</p> <pre><code><a href="https://example.com"><img src="path/to/image.jpg" alt="Описание изображения"></a></code></pre> <ul> <li>Убедитесь, что путь к изображению указан правильно.</li> <li>Оптимизируйте изображения для быстрого загрузки страниц.</li> <li>Добавьте атрибут <code>title</code> к ссылкам, чтобы предоставить дополнительную информацию.</li> </ul> <p>Следуйте этим рекомендациям для удобного и эффективного использования изображений и гиперссылок на ваших веб-страницах.</p> <h3>Формы в HTML: Как собрать информацию от пользователей</h3> <p>Создайте форму, чтобы собрать информацию от пользователей. Используйте тег <code><form></code> для этого. Укажите атрибут <code>action</code> для определения URL, куда отправлять данные, и атрибут <code>method</code> для назначения способа отправки (обычно <code>GET</code> или <code>POST</code>). Например:</p> <pre><code><form action="submit.php" method="post"></code></pre> <p>Добавьте элементы управления для ввода данных. Используйте <code><input></code> для текстовых полей, паролей и кнопок. Для выбора из нескольких вариантов примените <code><select></code>. Например, текстовое поле создается так:</p> <pre><code><input type="text" name="username" placeholder="Введите имя пользователя"></code></pre> <p>Добавьте метки с помощью тега <code><label></code>, чтобы сделать формы более доступными. Привязывайте метки к полям, используя атрибут <code>for</code>, например:</p> <pre><code><label for="username">Имя пользователя:</label><input type="text" id="username" name="username"></code></pre> <p>Для сбора дополнительных данных используйте различные типы полей. Поле для пароля обозначьте следующим образом:</p> <pre><code><input type="password" name="password" placeholder="Введите пароль"></code></pre> <p>Создавайте радиокнопки и чекбоксы для выбора опций. Для радиогруппы используйте теги <code><input type="radio"></code>, а для чекбоксов — <code><input type="checkbox"></code>. Пример радиокнопок:</p> <pre><code><input type="radio" name="gender" value="male"> Мужчина<br> <input type="radio" name="gender" value="female"> Женщина<br></code></pre> <p>Закончите форму кнопкой отправки с помощью <code><button></code> или <code><input type="submit"></code>. Направьте пользователей к успеху:</p> <pre><code><input type="submit" value="Отправить"></code></pre> <p>Обеспечьте проверку ввода, используя атрибут <code>required</code> для обязательных полей. Например:</p> <pre><code><input type="text" name="email" required></code></pre> <p>По окончании создания форм, не забудьте протестировать их работу, чтобы убедиться, что данные отправляются корректно и обрабатываются на сервере.</p> <h3>Стилизация элементов с помощью встроенных стилей: Краткое руководство</h3> <p>Встраивайте CSS непосредственно в HTML-элементы через атрибут <code>style</code>. Это позволяет гибко изменять внешний вид элементов на странице без внешних стилей.</p> <ul> <li>Используйте атрибут <code>style</code> для изменения внешнего вида отдельно взятого элемента.</li> <li>Приписывайте стили в формате: <code>property: value;</code>.</li> <li>Разделяйте несколько стилей с помощью точки с запятой.</li> </ul> <p>Например, чтобы задать красный цвет текста и увеличить его размер, используйте следующий код:</p> <pre><code><p style="color: red; font-size: 20px;">Привет, мир!</p></code></pre> <p>С помощью встроенных стилей можно управлять различными свойствами:</p> <ul> <li><code>color</code> – цвет текста.</li> <li><code>background-color</code> – цвет фона.</li> <li><code>font-size</code> – размер шрифта.</li> <li><code>margin</code> – отступы вокруг элемента.</li> <li><code>padding</code> – внутренние отступы внутри элемента.</li> </ul> <p>Вот пример кнопки с использованием встроенных стилей:</p> <pre><code><button style="background-color: blue; color: white; padding: 10px 20px;">Нажмите меня</button></code></pre> <p>Встроенные стили хорошо подходят для быстрого тестирования, но используйте их с осторожностью. Лучше всего хранить основной CSS в отдельном файле для улучшения читаемости и управления стилями. Важно осознавать, что при использовании встроенных стилей может возникнуть множество проблем с поддержкой и скоростью загрузки страницы.</p> <p>Соблюдайте баланс между использованием встроенных стилей и externals для достижения оптимального результата.</p> </p> </div> </article> <div class="entry-footer"> </div> <div class="b-share b-share--post"> <div class="b-share__title">Понравилась статья? Поделить с друзьями:</div> <span class="b-share__ico b-share__vk js-share-link" data-uri="http://vk.com/share.php?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__fb js-share-link" data-uri="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__tw js-share-link" data-uri="http://twitter.com/share?text=%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B+HTML+%D1%8F%D0%B7%D1%8B%D0%BA+%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8+%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B+%D0%B8+%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D1%8B&url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__ok js-share-link" data-uri="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__gp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__whatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B+HTML+%D1%8F%D0%B7%D1%8B%D0%BA+%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8+%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B+%D0%B8+%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D1%8B%20https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__viber js-share-link js-share-link-no-window" data-uri="viber://forward?text=%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B+HTML+%D1%8F%D0%B7%D1%8B%D0%BA+%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8+%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B+%D0%B8+%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D1%8B%20https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"></span> <span class="b-share__ico b-share__telegram js-share-link js-share-link-no-window" data-uri="https://telegram.me/share/url?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F&text=%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B+HTML+%D1%8F%D0%B7%D1%8B%D0%BA+%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8+%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B+%D0%B8+%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D1%8B"></span> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b-html-%d1%8f%d0%b7%d1%8b%d0%ba-%d1%80%d0%b0%d0%b7%d0%bc%d0%b5%d1%82%d0%ba%d0%b8-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-%d0%b8-%d0%bf%d1%80%d0%b0%d0%ba%d1%82/"/> <meta itemprop="dateModified" content="2024-09-16"/> <meta itemprop="datePublished" content="2024-09-16T15:59:18+03:00"/> <div class="wpdiscuz_top_clearing"></div> <div id='comments' class='comments-area'><div id='respond' style='width: 0;height: 0;clear: both;margin: 0;padding: 0;'></div><div id='wpd-post-rating' class='wpd-not-rated'> <div class='wpd-rating-wrap'> <div class='wpd-rating-left'></div> <div class='wpd-rating-data'> <div class='wpd-rating-value'> <span class='wpdrv'>0</span> <span class='wpdrc'>0</span> <span class='wpdrt'>голоса</span></div> <div class='wpd-rating-title'>Рейтинг статьи</div> <div class='wpd-rating-stars'><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg></div><div class='wpd-rate-starts'><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg></div></div> <div class='wpd-rating-right'></div></div></div> <div id="wpdcom" class="wpdiscuz_unauth wpd-default wpd-layout-1 wpd-comments-open"> <div class="wc_social_plugin_wrapper"> </div> <div class="wpd-form-wrap"> <div class="wpd-form-head"> <div class="wpd-sbs-toggle"> <i class="far fa-envelope"></i> <span class="wpd-sbs-title">Подписаться</span> <i class="fas fa-caret-down"></i> </div> <div class="wpd-auth"> <div class="wpd-login"> <a rel="nofollow" href="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/wp-login.php?redirect_to=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25be%25d1%2581%25d0%25bd%25d0%25be%25d0%25b2%25d1%258b-html-%25d1%258f%25d0%25b7%25d1%258b%25d0%25ba-%25d1%2580%25d0%25b0%25d0%25b7%25d0%25bc%25d0%25b5%25d1%2582%25d0%25ba%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b8%25d0%25bc%25d0%25b5%25d1%2580%25d1%258b-%25d0%25b8-%25d0%25bf%25d1%2580%25d0%25b0%25d0%25ba%25d1%2582%2F"><i class='fas fa-sign-in-alt'></i> авторизуйтесь</a> </div> </div> </div> <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden"> <form action="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/wp-admin/admin-ajax.php?action=wpdAddSubscription" method="post" id="wpdiscuz-subscribe-form"> <div class="wpdiscuz-subscribe-form-intro">Уведомить о </div> <div class="wpdiscuz-subscribe-form-option" style="width:40%;"> <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType"> <option value="post">новых последующих комментариях</option> <option value="all_comment" >новых ответах на мои комментарии</option> </select> </div> <div class="wpdiscuz-item wpdiscuz-subscribe-form-email"> <input class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/> </div> <div class="wpdiscuz-subscribe-form-button"> <input id="wpdiscuz_subscription_button" class="wpd-prim-button wpd_not_clicked" type="submit" value="›" name="wpdiscuz_subscription_button"/> </div> <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="fd8722e02b" /><input type="hidden" name="_wp_http_referer" value="/%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D1%8B-html-%D1%8F%D0%B7%D1%8B%D0%BA-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B-%D0%B8-%D0%BF%D1%80%D0%B0%D0%BA%D1%82/" /> </form> </div> <div class="wpd-form wpd-form-wrapper wpd-main-form-wrapper" id='wpd-main-form-wrapper-0_0'> <form method="post" enctype="multipart/form-data" data-uploading="false" class="wpd_comm_form wpd_main_comm_form" > <div class="wpd-field-comment"> <div class="wpdiscuz-item wc-field-textarea"> <div class="wpdiscuz-textarea-wrap "> <div class="wpd-avatar"> <img alt='guest' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%3E%3C/svg%3E" data-lazy-srcset='https://secure.gravatar.com/avatar/1a7d89133354f64b5e3201d5d6b31239ce6df9bb719eb89cc39428a9a31eea8d?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' decoding='async' data-lazy-src="https://secure.gravatar.com/avatar/1a7d89133354f64b5e3201d5d6b31239ce6df9bb719eb89cc39428a9a31eea8d?s=56&d=mm&r=g"/><noscript><img alt='guest' src='https://secure.gravatar.com/avatar/1a7d89133354f64b5e3201d5d6b31239ce6df9bb719eb89cc39428a9a31eea8d?s=56&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/1a7d89133354f64b5e3201d5d6b31239ce6df9bb719eb89cc39428a9a31eea8d?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' decoding='async'/></noscript> </div> <div id="wpd-editor-wraper-0_0" style="display: none;"> <div id="wpd-editor-char-counter-0_0" class="wpd-editor-char-counter"></div> <label style="display: none;" for="wc-textarea-0_0">Label</label> <textarea id="wc-textarea-0_0" name="wc_comment" class="wc_comment wpd-field">