HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) являются основными технологиями для создания и стилизации веб-страниц. HTML используется для разметки содержимого веб-страницы, определяя структуру и семантику элементов. CSS, в свою очередь, задает внешний вид и стиль элементов, позволяя создать красивый и привлекательный дизайн.
HTML работает на основе тегов, которые определяют тип и значение элементов страницы. Например, тег используется для выделения жирным шрифтом важной информации, тогда как тег используется для выделения текста курсивом, чтобы добавить эмоциональную окраску или подчеркнуть важность.
Теги HTML могут быть вложены друг в друга, создавая иерархию элементов. Это позволяет определить отношения между различными частями страницы и упростить ее структуру. Кроме того, каждому элементу можно назначить класс или идентификатор CSS, чтобы применить к нему определенные стили.
CSS, с другой стороны, позволяет определить стили для элементов HTML. Размещение правил CSS происходит в блоках, где указывается селектор (элемент, класс или идентификатор) и применяемые стили, такие как цвет, шрифт, размер текста, отступы и многое другое.
Содержание
Основы работы HTML и его применение
HTML использует теги для определения различных элементов страницы. Например, тег <p> используется для определения абзаца, а тег <h1> используется для определения заголовка первого уровня. | Теги HTML также могут содержать атрибуты, которые позволяют настроить их поведение или внешний вид. Например, атрибут class может быть использован для определения класса элемента, который может быть стилизован с помощью CSS. |
Основная структура HTML-страницы состоит из следующих частей:
- Тег <!DOCTYPE html> определяет, что документ является HTML5.
- Тег <html> содержит все содержимое веб-страницы.
- Тег <head> содержит информацию о документе, такую как заголовок, мета-теги и подключаемые стили.
- Тег <body> содержит видимое содержимое веб-страницы, такое как текст, изображения, таблицы и формы.
HTML позволяет создавать веб-страницы, которые могут быть просмотрены веб-браузерами и взаимодействовать с пользователем. HTML также интегрируется с другими технологиями, такими как CSS (Cascading Style Sheets) и JavaScript, для создания более интерактивных и динамичных веб-приложений.
Структура HTML-документа и синтаксис
HTML-документ имеет следующую структуру:
- : Это объявление определяет тип документа как HTML.
- : Элемент является корневым элементом документа и содержит все другие элементы.
- : Элемент содержит информацию о документе, такую как заголовок страницы, описание, стили и другие метаданные.
: Элемент<title> определяет заголовок страницы, который отображается в верхней части окна браузера.</li><li><body>: Элемент<body> содержит содержимое страницы, которое будет отображаться в браузере.</li></ul><p>Элементы могут содержать другие элементы, образуя иерархическую структуру документа. Каждый элемент открывается с помощью открывающего тега (<tag>) и закрывается с помощью закрывающего тега (</tag>). Некоторые элементы могут быть пустыми, то есть они не требуют закрывающего тега.</p><p>Пример простого HTML-документа:</p><pre> <!DOCTYPE html> <html> <head> <title>Моя веб-страница</title> </head> <body> <h1>Привет, мир!</h1> <p>Это моя первая веб-страница.</p> </body> </html> </pre><p>В данном примере <h1> и <p> — это элементы заголовка и абзаца соответственно. Они используются для отображения заголовков и текста на странице.</p><p>Корректное использование элементов и их правильная иерархическая структура являются важными принципами для создания хорошо организованной и понятной веб-страницы. Учение и практика основ работы HTML и CSS помогут вам стать более эффективным в создании и поддержке веб-сайтов.</p><h2 id="tegi-i-ih-primenenie">Теги и их применение</h2><p>Теги HTML используются для форматирования текста, создания ссылок, вставки изображений и других элементов на веб-страницу. Они играют важную роль в оформлении и стилизации веб-страницы.</p><p>Один из наиболее часто используемых тегов — <strong><p></strong> — используется для создания абзацев или отдельных блоков текста. Он является основным блочным элементом HTML и позволяет создавать отдельный блок текста с определенным форматированием.</p><p>Тег <em><strong></em> является строчным элементом и используется для выделения текста сильным (важным) образом. Обычно такой текст отображается полужирным шрифтом для привлечения внимания и выделения его на веб-странице.</p><p>Тег <em><em></em> также является строчным элементом и используется для выделения текста с акцентом или эмоциональной силой. Он обычно отображается курсивом, чтобы отличить его от остального текста и привлечь внимание к нему.</p><p>Комбинирование различных тегов HTML позволяет создавать более сложные и интерактивные веб-страницы. Они могут быть использованы для структурирования текста, работы с изображениями и видео, создания форм и много другого.</p><p>Важно знать основные теги HTML и их применение, чтобы создавать эффективные и понятные веб-страницы, которые будут выглядеть привлекательно и будут легко восприниматься пользователями.</p><h2 id="oformlenie-teksta-i-ssylok">Оформление текста и ссылок</h2><p>Для оформления текста могут использоваться различные теги. Например, тег <strong>делает текст полужирным</strong>, тег <em>выделяет текст курсивом</em>, а тег <u>подчеркивает текст</u>. Комбинируя эти теги, можно достичь более сложных визуальных эффектов.</p><p>Ссылки являются важной частью веб-страниц. Они позволяют пользователям переходить на другие страницы или загружать файлы. Для создания ссылок используется тег <a>. Например, ссылка на страницу «О нас» может выглядеть так: <a href="about.html">О нас</a>. Важно указывать атрибут href с правильным адресом страницы или файла.</p><table><tr><th>Тег</th><th>Описание</th><th>Пример</th></tr><tr><td><strong><strong></strong></td><td>Делает текст полужирным</td><td><strong>Полужирный текст</strong></td></tr><tr><td><em><em></em></td><td>Выделяет текст курсивом</td><td><em>Курсивный текст</em></td></tr><tr><td><u><u></u></td><td>Подчеркивает текст</td><td><u>Подчеркнутый текст</u></td></tr><tr><td><a href="#"><a></a></td><td>Создает ссылку</td><td><a href="#">Ссылка</a></td></tr></table><p>Правильное использование этих тегов и ссылок поможет сделать ваш контент более выразительным и удобным для пользователя. Таким образом, оформление текста и ссылок играет важную роль в создании привлекательного и функционального веб-сайта.</p><h2 id="rabota-s-izobrazheniyami-i-multimedia"> Работа с изображениями и мультимедиа</h2><p>Изображения и мультимедиа играют важную роль в создании привлекательных и интерактивных веб-сайтов. В HTML есть несколько способов вставки изображений и мультимедиа на веб-страницу.</p><p>Изображения могут быть вставлены с помощью тега <code>img</code>. Этот тег имеет атрибуты, такие как <code>src</code> (указывает путь к изображению), <code>alt</code> (текст, отображаемый в случае недоступности изображения) и <code>title</code> (всплывающая подсказка при наведении курсора мыши на изображение).</p><p>Пример вставки изображения с использованием тега <code>img</code>:</p><pre> <code> <img src="path/to/image.jpg" alt="Описание изображения" title="Всплывающая подсказка"> </code> </pre><p>Тег <code>video</code> используется для вставки видео на веб-страницу. Атрибут <code>src</code> указывает путь к видеофайлу, атрибут <code>controls</code> добавляет элементы управления для воспроизведения видео.</p><p>Пример вставки видео с использованием тега <code>video</code>:</p><pre> <code> <video src="path/to/video.mp4" controls></video> </code> </pre><p>Тег <code>audio</code> используется для вставки аудиофайла на веб-страницу. Атрибут <code>src</code> указывает путь к аудиофайлу, атрибут <code>controls</code> добавляет элементы управления для воспроизведения аудио.</p><p>Пример вставки аудио с использованием тега <code>audio</code>:</p><pre> <code> <audio src="path/to/audio.mp3" controls></audio> </code> </pre><p>Используя эти теги, вы можете легко вставлять изображения, видео и аудио на свою веб-страницу и делать ее более интересной и привлекательной для пользователей.</p><h2 id="sozdanie-tablits-i-form">Создание таблиц и форм</h2><p>Для создания таблицы в HTML используется тег <code><table></code>. Тег <code><tr></code> определяет строку таблицы, а тег <code><td></code> — ячейку в этой строке. Часто используемым элементом является также тег <code><th></code>, который задает заголовок для колонки или строки таблицы.</p><p>Пример создания простой таблицы:</p><pre> <table> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> </pre><p>В результате получится таблица с двумя строками и двумя столбцами.</p><p>Для создания формы в HTML используются различные элементы, такие как <code><input></code> для текстовых полей ввода, <code><select></code> для выпадающего списка, <code><textarea></code> для многострочного текстового поля и другие.</p><p>Пример создания простой формы:</p><pre> <form> <label for="name">Имя:</label> <input type="text" id="name" name="name"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <label for="message">Сообщение:</label> <textarea id="message" name="message"></textarea> <br> <input type="submit" value="Отправить"> </form> </pre><p>В результате получится форма с полями для ввода имени, email и текста сообщения, а также кнопкой «Отправить». При отправке формы данные будут переданы на сервер для обработки.</p><h2 id="osnovy-css">Основы CSS</h2><p>Основная идея CSS заключается в том, что стили применяются к элементам на основе селекторов. Селекторы указывают, к каким элементам применить стили, а стили определяют, как они должны выглядеть.</p><p>Стили могут быть определены внутри тега</p><p>, внутри атрибута style у элементов или внешнем файле CSS, который подключается к HTML-странице с помощью тега<link>. Например:</p><pre> <code><style> h1 { color: blue; } </style> <h1>Пример заголовка</h1> <style> p { background-color: yellow; } </style> <p>Пример абзаца с задним фоном</p> <link rel="stylesheet" href="styles.css"></code> </pre><p>В приведенном примере, заголовок первого уровня будет иметь синий цвет текста, а абзац будет иметь желтый фон. Также, с использованием внешнего файла CSS, можно задавать стили централизованно для всех страниц сайта.</p><p>С помощью CSS можно определять различные свойства элементов, такие как цвет текста, выравнивание, размеры, отступы, фон, границы и многое другое. Синтаксис CSS достаточно гибкий и позволяет задать стили для одного или нескольких элементов одновременно.</p><p>Также, CSS поддерживает понятие каскадности, то есть более специфические стили могут переопределить общие стили. Например, если задано одно и то же свойство в разных стилях, то будет применено то, которое наиболее подходит к конкретному элементу.</p><p>Используя CSS, можно значительно улучшить визуальное оформление веб-страниц, делая их более привлекательными и удобочитаемыми для пользователей.</p><h2 id="printsipy-primeneniya-css-k-html-stranitsam">Принципы применения CSS к HTML-страницам:</h2><p>1. Включение CSS-стилей в HTML-страницу</p><p>Для применения стилей CSS к HTML-странице необходимо включить их в код страницы с помощью тега<link>. Тег<link> прописывается в секции<head> и содержит атрибуты, указывающие на файл со стилями CSS. Например:</p><ul><li><p><code><link rel="stylesheet" href="styles.css"></code> — подключение внешнего файла со стилями, названного «styles.css».</p></li><li><p><code><style></code> — внутреннее определение стилей, которые указываются прямо в HTML-коде.</p></li><li><p><code><style type="text/css"></code> — атрибут type=»text/css» указывает на тип содержимого тега и должен присутствовать, однако в HTML5 можно его опустить.</p></li></ul><p>2. Применение стилей к элементам HTML</p><p>Для применения стилей к элементам HTML используются CSS-селекторы. Селектор может указывать на определенный элемент, класс или идентификатор. Например:</p><ul><li><p><code>p</code> — селектор для всех абзацев на странице.</p></li><li><p><code>.classname</code> — селектор для элементов с определенным классом.</p></li><li><p><code>#idname</code> — селектор для элемента с определенным идентификатором.</p></li></ul><p>3. Определение свойств стилей</p><p>После указания селектора следует блок свойств стилей, заключенный в фигурные скобки. Свойство состоит из имени и значения, разделенных двоеточием. Например:</p><ul><li><p><code>p { color: red; }</code> — все абзацы на странице будут иметь красный цвет текста.</p></li><li><p><code>.classname { font-size: 20px; }</code> — все элементы с классом «classname» будут иметь шрифт размером 20 пикселей.</p></li></ul><p>4. Использование каскадности и наследования</p><p>Каскадность и наследование в CSS позволяют определить стили для большого количества элементов с помощью минимального кода. Каскадность означает, что если на элемент применяются несколько правил, то стиль будет применен в порядке их описания. Наследование позволяет наследовать стили от родительских элементов. Например:</p><ul><li><p><code>p { font-size: 20px; }</code> — все абзацы на странице будут иметь шрифт размером 20 пикселей.</p></li><li><p><code>div { color: blue; }</code> — все div-элементы будут иметь синий цвет текста.</p></li><li><p><code>div p { color: red; }</code> — абзацы, находящиеся внутри div-элементов, будут иметь красный цвет текста.</p></li></ul><p>5. Использование различных свойств и значений</p><p>CSS предоставляет широкий набор свойств и значений для определения стилей. Некоторые из них:</p><ul><li><p><code>color</code> — цвет текста.</p></li><li><p><code>background-color</code> — цвет фона.</p></li><li><p><code>font-size</code> — размер шрифта.</p></li><li><p><code>font-weight</code> — насыщенность (жирность) шрифта.</p></li><li><p><code>text-align</code> — выравнивание текста.</p></li></ul><p>Эти принципы позволяют создавать красочные и структурированные HTML-страницы с помощью CSS.</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="62625" 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://prorastenija.ru/portal/osnovy-raboty-html-i-css-principy-sozdaniya-i-stilizacii-veb-stranic-kotorye-neobxodimo-znat-kazdomu-veb-razrabotciku/" data-title="Основы работы HTML и CSS — принципы создания и стилизации веб-страниц, которые необходимо знать каждому веб-разработчику" data-description="HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) являются основными технологиями для создания и стилизации веб-страниц. HTML используется для разметки содержимого веб-страницы, определяя структуру и семантику элементов. CSS, в свою очередь, задает внешний вид и стиль элементов, позволяя создать красивый и привлекательный дизайн. HTML работает на основе тегов, которые определяют тип и значение элементов […]" data-image=""></span></div></div><meta itemprop="author" content="admin"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://prorastenija.ru/portal/osnovy-raboty-html-i-css-principy-sozdaniya-i-stilizacii-veb-stranic-kotorye-neobxodimo-znat-kazdomu-veb-razrabotciku/" content="Основы работы HTML и CSS — принципы создания и стилизации веб-страниц, которые необходимо знать каждому веб-разработчику"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="prorastenija.ru"><meta itemprop="telephone" content="prorastenija.ru"><meta itemprop="address" content="https://prorastenija.ru/portal"></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://prorastenija.ru/portal/bystrye-sluzby-prilozenii-moshhnyi-instrument-dlya-vasego-biznesa/">Быстрые службы приложений — мощный инструмент для вашего бизнеса</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://prorastenija.ru/portal/yasli-i-mladsaya-gruppa-kakie-sushhestvuyut-osobennosti-i-kak-proisxodit-razvitie-detei/">Ясли и младшая группа — какие существуют особенности и как происходит развитие детей</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://prorastenija.ru/portal/kak-pravilno-kormit-yastreba-perepelyatnika-v-domasnix-usloviyax-osnovnye-principy-raciona-i-uxod-za-pticei/">Как правильно кормить ястреба перепелятника в домашних условиях — основные принципы рациона и уход за птицей</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://prorastenija.ru/portal/izbavlyaemsya-nadezno-i-bezopasno-ot-yashheric-v-dome-effektivnye-metody-i-sovety/">Избавляемся надежно и безопасно от ящериц в доме — эффективные методы и советы</a></div><div class="post-card__description">Ящерицы в доме могут стать настоящей неприятностью.</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://prorastenija.ru/portal/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://prorastenija.ru/portal/kak-uznat-licevoi-scet-mosenergosbyt-podrobnaya-instrukciya/">Как узнать лицевой счет Мосэнергосбыт подробная инструкция</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://prorastenija.ru/portal/metody-i-rekomendacii-proverki-celostnosti-failov-unity-dlya-obespeceniya-bezopasnosti-i-nadeznosti-proektov/">Методы и рекомендации проверки целостности файлов Unity для обеспечения безопасности и надежности проектов</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://prorastenija.ru/portal/skolko-casov-dolzen-spat-celovek-posle-bessonnoi-noci-ctoby-polnostyu-vosstanovit-organizm/">Сколько часов должен спать человек после бессонной ночи, чтобы полностью восстановить организм</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://prorastenija.ru/portal/spisok-materialov-i-instrumentov-kotorye-neobxodimy-dlya-provedeniya-remonta-v-vannoi-komnate/">Список материалов и инструментов, которые необходимы для проведения ремонта в ванной комнате</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://prorastenija.ru/portal/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://prorastenija.ru/portal/soglashenie/">Соглашение (пользовательское)</a></li></ul></div></div></div></div><div class="footer-bottom"><div class="footer-info"> © 2025 prorastenija.ru</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://prorastenija.ru/portal/osnovy-raboty-html-i-css-principy-sozdaniya-i-stilizacii-veb-stranic-kotorye-neobxodimo-znat-kazdomu-veb-razrabotciku";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:\/\/prorastenija.ru\/portal\/wp-admin\/admin-ajax.php","nonce":"46065549c4"};</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://prorastenija.ru/portal/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://prorastenija.ru/portal/wp-content/cache/autoptimize/js/autoptimize_8719a8fcc817f74da642350c845eb2cd.js"></script></body></html>